Skip to content

Render Audio Player if Tool Result resource mime type is audio. #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jerome3o-anthropic merged 8 commits into from
Feb 2, 2025
Merged

Render Audio Player if Tool Result resource mime type is audio. #99

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
66b1b73
Render HTML5 Audio Player if Tool Result resource mimetype is audio.
evalstate Dec 1, 2024
068d213
extended type for "audio" update to spec
evalstate Dec 1, 2024
14802b8
Merge branch 'main' into feature/audio-rendering
evalstate Dec 3, 2024
35effc4
Merge branch 'main' into feature/audio-rendering
evalstate Dec 5, 2024
04faff4
Merge branch 'main' into feature/audio-rendering
jerome3o-anthropic Jan 28, 2025
afe14bc
Merge branch 'feature/audio-rendering' of https://github.com/evalstat…
evalstate Jan 28, 2025
a87bd17
❯ npx prettier --check .
evalstate Jan 28, 2025
d0ad677
Update ToolsTab.tsx
jerome3o-anthropic Feb 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions client/src/components/ToolsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,11 +87,20 @@ const ToolsTab = ({
className="max-w-full h-auto"
/>
)}
{item.type === "resource" && (
<pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words p-4 rounded text-sm overflow-auto max-h-64">
{JSON.stringify(item.resource, null, 2)}
</pre>
)}
{item.type === "resource" &&
(item.resource?.mimeType?.startsWith("audio/") ? (
<audio
controls
src={`data:${item.resource.mimeType};base64,${item.resource.blob}`}
className="w-full"
>
<p>Your browser does not support audio playback</p>
</audio>
) : (
<pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words p-4 rounded text-sm overflow-auto max-h-64">
{JSON.stringify(item.resource, null, 2)}
</pre>
))}
</div>
))}
</>
Expand Down