feat: move play audio to webview to ensure cross-platform

[samhvw8]

replace sound-play with use-sound for audio handling and add new sound files

Related GitHub Issue

Closes: #2187

Description

Move backend (node) play audio to webview play audio

Test Procedure

Type of Change

• 🐛 Bug Fix: Non-breaking change that fixes an issue.
• ✨ New Feature: Non-breaking change that adds functionality.
• 💥 Breaking Change: Fix or feature that would cause existing functionality to not work as expected.
• ♻️ Refactor: Code change that neither fixes a bug nor adds a feature.
• 💅 Style: Changes that do not affect the meaning of the code (white-space, formatting, etc.).
• 📚 Documentation: Updates to documentation files.
• ⚙️ Build/CI: Changes to the build process or CI configuration.
• 🧹 Chore: Other changes that don't modify src or test files.

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Code Quality:
  • My code adheres to the project's style guidelines.
  • There are no new linting errors or warnings (npm run lint).
  • All debug code (e.g., console.log) has been removed.
• Testing:
  • New and/or updated tests have been added to cover my changes.
  • All tests pass locally (npm test).
  • The application builds successfully with my changes.
• Branch Hygiene: My branch is up-to-date (rebased) with the main branch.
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Changeset: A changeset has been created using npm run changeset if this PR includes user-facing changes or dependency updates.
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

Documentation Updates

Additional Notes

---

Important

Replaces sound-play with use-sound for webview audio handling, moving playback from backend to frontend.

• Behavior:
  • Replaces sound-play with use-sound for audio handling in ChatView.tsx.
  • Moves audio playback from backend to webview, removing playSound handler from webviewMessageHandler.ts.
• Dependencies:
  • Removes sound-play from package.json.
  • Adds use-sound to webview-ui/package.json.
• Code Removal:
  • Deletes sound.ts which contained sound utility functions.
• Tests:
  • Updates tests in ClineProvider.test.ts and ChatView.test.tsx to mock use-sound and verify sound behavior.
• Misc:
  • Updates vite.config.ts to include .wav files in assetsInclude.

^{This description was created by for 48dc6cb7e2470cdf0f6664c59ecfe139b3120df0. You can customize this summary. It will automatically update as commits are pushed.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 1fc13a9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[samhvw8]

@ScyDev @kbradsha can you test with this pr ?

[samhvw8]

@cte what do you think if we migrate to Vitest?

[KJ7LNW]

sound from this PR works for me on my Linux system (Oracle Linux 9, a RHEL 9 clone)

[samhvw8]

sr for force push, can you test again @SmartManoj @KJ7LNW ?

[mrubens]

I haven't tested but the code seems reasonable to me. Have you confirmed that it works both in debug as well as in a built vsix?

[samhvw8]

I haven't tested but the code seems reasonable to me. Have you confirmed that it works both in debug as well as in a built vsix?

@mrubens i remember @SmartManoj has test and build to vsix to test, i have commit from him

[KJ7LNW]

audio still works for me as of the current PR state

[KJ7LNW]

I think this PR introduced the following error:

index.html?id=26a653…se=webviewView:1060 The source list for the Content Security Policy directive 'connect-src' contains an invalid source: 'https://file+.vscode-resource.vscode-cdn.net'. It will be ignored.

here:

1fc13a9a0 src/core/webview/ClineProvider.ts     (sam hoang               2025-05-15 21:15:31 +0700  725)                        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource}; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} data:; media-src ${webview.cspSource}; script-src ${webview.cspSource} 'wasm-unsafe-eval' 'nonce-${nonce}' https://us-assets.i.posthog.com 'strict-dynamic'; connect-src https://openrouter.ai https://api.requesty.ai https://us.i.posthog.com https://us-assets.i.posthog.com https://file+.vscode-resource.vscode-cdn.net;">

[KJ7LNW]

...test and build to vsix to test

here is one that you can use:
https://www.linuxglobal.com/out/roo/roo-cline-3.17.0-feat-move-audio-to-webview.vsix

[samhvw8]

Can you use newest version?

…

On Fri, 16 May 2025 at 04:29 KJ7LNW ***@***.***> wrote: *KJ7LNW* left a comment (RooCodeInc/Roo-Code#3487) <#3487 (comment)> ...test and build to vsix to test here is one that you can use: https://www.linuxglobal.com/out/roo/roo-cline-3.17.0-feat-move-audio-to-webview.vsix — Reply to this email directly, view it on GitHub <#3487 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AC7VCZVRYW7BEEEDKVJZ5YL26UBJZAVCNFSM6AAAAAB444F4VOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQOBVGA4TIOBQGE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[KJ7LNW]

I tested as a one hour ago and it worked, I do not see any new commit messages. Is there something else for me to test?

]$ gh pr checkout 3487 --repo RooVetGit/Roo-Code
From https://github.com/RooVetGit/Roo-Code
 * branch              refs/pull/3487/head -> FETCH_HEAD
Already up to date.

[samhvw8]

The source list for the Content Security Policy directive 'connect-src' contains an invalid source

that's weird, don't know why it still have error

[SmartManoj]

@samhvw8, Would you please remove the mention in the commit message? Side effects

[SmartManoj]

I think this PR introduced the following error:

index.html?id=26a653…se=webviewView:1060 The source list for the Content Security Policy directive 'connect-src' contains an invalid source: 'file+.vscode-resource.vscode-cdn.net'. It will be ignored.

here:

1fc13a9a0 src/core/webview/ClineProvider.ts     (sam hoang               2025-05-15 21:15:31 +0700  725)                        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource}; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} data:; media-src ${webview.cspSource}; script-src ${webview.cspSource} 'wasm-unsafe-eval' 'nonce-${nonce}' https://us-assets.i.posthog.com 'strict-dynamic'; connect-src https://openrouter.ai https://api.requesty.ai https://us.i.posthog.com https://us-assets.i.posthog.com https://file+.vscode-resource.vscode-cdn.net;">

Why did CI not captured that?

[samhvw8]

I think this PR introduced the following error:
index.html?id=26a653…se=webviewView:1060 The source list for the Content Security Policy directive 'connect-src' contains an invalid source: 'file+.vscode-resource.vscode-cdn.net'. It will be ignored.
here:

1fc13a9a0 src/core/webview/ClineProvider.ts     (sam hoang               2025-05-15 21:15:31 +0700  725)                        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource}; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} data:; media-src ${webview.cspSource}; script-src ${webview.cspSource} 'wasm-unsafe-eval' 'nonce-${nonce}' https://us-assets.i.posthog.com 'strict-dynamic'; connect-src https://openrouter.ai https://api.requesty.ai https://us.i.posthog.com https://us-assets.i.posthog.com https://file+.vscode-resource.vscode-cdn.net;">

Why did CI not captured that?

yeah that's strange

[samhvw8]

@SmartManoj thanks for extend my work,

close because we have this pr #3659
@KJ7LNW can you test again with this pr

[SmartManoj]

1fc13a9 It's not Windows related, but it addresses the following: "The extension worked in dev mode but not in build mode."