-
Notifications
You must be signed in to change notification settings - Fork 850
fix(dictation): prevent SSR crash in WebSpeechRecognitionAdapter constructor #2932
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.
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
base: main
Are you sure you want to change the base?
Conversation
🦋 Changeset detectedLatest commit: 29ecc9a The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| data-slot="tooltip-content" | ||
| sideOffset={sideOffset} | ||
| className={cn( | ||
| "fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in text-balance rounded-md bg-primary px-3 py-1.5 text-primary-foreground text-xs data-[state=closed]:animate-out", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Typographical issue: The class string contains origin-(--radix-tooltip-content-transform-origin). Typically in Tailwind for arbitrary values, it should be written as origin-[--radix-tooltip-content-transform-origin]. Please verify if this is intended.
| "fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in text-balance rounded-md bg-primary px-3 py-1.5 text-primary-foreground text-xs data-[state=closed]:animate-out", | |
| "fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-[--radix-tooltip-content-transform-origin] animate-in text-balance rounded-md bg-primary px-3 py-1.5 text-primary-foreground text-xs data-[state=closed]:animate-out", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
50 files reviewed, no comments
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
4 issues found across 52 files
Prompt for AI agents (all 4 issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="examples/with-elevenlabs-scribe/app/page.tsx">
<violation number="1" location="examples/with-elevenlabs-scribe/app/page.tsx:11">
P2: Creating `new ElevenLabsScribeAdapter()` directly in the component body creates a new instance on every render. Consider memoizing the adapter to maintain referential stability.</violation>
</file>
<file name="examples/with-elevenlabs-scribe/components/assistant-ui/tool-fallback.tsx">
<violation number="1" location="examples/with-elevenlabs-scribe/components/assistant-ui/tool-fallback.tsx:56">
P2: Chevron icons are inverted. When collapsed, `ChevronDownIcon` should be shown (indicating "click to expand"), and when expanded, `ChevronUpIcon` should be shown (indicating "click to collapse"). Currently it's the opposite, which contradicts the `aria-label` and standard UX conventions.</violation>
</file>
<file name="apps/docs/content/docs/api-reference/primitives/Composer.mdx">
<violation number="1" location="apps/docs/content/docs/api-reference/primitives/Composer.mdx:310">
P2: Inconsistent component naming: Uses `Composer.If` instead of `ComposerPrimitive.If`. All other examples in this file use `ComposerPrimitive` consistently.</violation>
</file>
<file name="examples/with-elevenlabs-scribe/components/assistant-ui/markdown-text.tsx">
<violation number="1" location="examples/with-elevenlabs-scribe/components/assistant-ui/markdown-text.tsx:68">
P2: The `setTimeout` callback can fire after component unmount, causing a React state update warning. Consider using `useEffect` with cleanup to clear the timeout, or track the timeout ID and clear it on unmount.</violation>
</file>
Reply to cubic to teach it or ask questions. Re-run a review with @cubic-dev-ai review this PR
| export default function Home() { | ||
| const runtime = useChatRuntime({ | ||
| adapters: { | ||
| speechRecognition: new ElevenLabsScribeAdapter({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
P2: Creating new ElevenLabsScribeAdapter() directly in the component body creates a new instance on every render. Consider memoizing the adapter to maintain referential stability.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At examples/with-elevenlabs-scribe/app/page.tsx, line 11:
<comment>Creating `new ElevenLabsScribeAdapter()` directly in the component body creates a new instance on every render. Consider memoizing the adapter to maintain referential stability.</comment>
<file context>
@@ -0,0 +1,25 @@
+export default function Home() {
+ const runtime = useChatRuntime({
+ adapters: {
+ speechRecognition: new ElevenLabsScribeAdapter({
+ tokenEndpoint: "/api/scribe-token",
+ languageCode: "en", // Change to your preferred language
</file context>
| aria-label={isCollapsed ? "Show tool details" : "Hide tool details"} | ||
| aria-expanded={!isCollapsed} | ||
| > | ||
| {isCollapsed ? <ChevronUpIcon /> : <ChevronDownIcon />} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
P2: Chevron icons are inverted. When collapsed, ChevronDownIcon should be shown (indicating "click to expand"), and when expanded, ChevronUpIcon should be shown (indicating "click to collapse"). Currently it's the opposite, which contradicts the aria-label and standard UX conventions.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At examples/with-elevenlabs-scribe/components/assistant-ui/tool-fallback.tsx, line 56:
<comment>Chevron icons are inverted. When collapsed, `ChevronDownIcon` should be shown (indicating "click to expand"), and when expanded, `ChevronUpIcon` should be shown (indicating "click to collapse"). Currently it's the opposite, which contradicts the `aria-label` and standard UX conventions.</comment>
<file context>
@@ -0,0 +1,97 @@
+ aria-label={isCollapsed ? "Show tool details" : "Hide tool details"}
+ aria-expanded={!isCollapsed}
+ >
+ {isCollapsed ? <ChevronUpIcon /> : <ChevronDownIcon />}
+ </Button>
+ </div>
</file context>
| /> | ||
|
|
||
| ```tsx | ||
| <Composer.If editing>{/* rendered if message is being edited */}</Composer.If> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
P2: Inconsistent component naming: Uses Composer.If instead of ComposerPrimitive.If. All other examples in this file use ComposerPrimitive consistently.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At apps/docs/content/docs/api-reference/primitives/Composer.mdx, line 310:
<comment>Inconsistent component naming: Uses `Composer.If` instead of `ComposerPrimitive.If`. All other examples in this file use `ComposerPrimitive` consistently.</comment>
<file context>
@@ -213,3 +227,87 @@ This primitive renders a `<button>` element unless `asChild` is set.
+/>
+
+```tsx
+<Composer.If editing>{/* rendered if message is being edited */}</Composer.If>
+
+<Composer.If listening>{/* rendered if dictation is active */}</Composer.If>
</file context>
| <Composer.If editing>{/* rendered if message is being edited */}</Composer.If> | |
| <ComposerPrimitive.If editing>{/* rendered if message is being edited */}</ComposerPrimitive.If> |
| .writeText(value) | ||
| .then(() => { | ||
| setIsCopied(true); | ||
| setTimeout(() => setIsCopied(false), copiedDuration); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
P2: The setTimeout callback can fire after component unmount, causing a React state update warning. Consider using useEffect with cleanup to clear the timeout, or track the timeout ID and clear it on unmount.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At examples/with-elevenlabs-scribe/components/assistant-ui/markdown-text.tsx, line 68:
<comment>The `setTimeout` callback can fire after component unmount, causing a React state update warning. Consider using `useEffect` with cleanup to clear the timeout, or track the timeout ID and clear it on unmount.</comment>
<file context>
@@ -0,0 +1,237 @@
+ .writeText(value)
+ .then(() => {
+ setIsCopied(true);
+ setTimeout(() => setIsCopied(false), copiedDuration);
+ })
+ .catch((error) => {
</file context>
|
📝 Documentation updates detected! Updated existing suggestion: Add speech recognition adapters to API reference overview |
Fixes an SSR crash caused by accessing browser globals in the WebSpeechRecognitionAdapter constructor.
Important
This pull request adds speech-to-text dictation support using
WebSpeechRecognitionAdapterandElevenLabsScribeAdapter, with new primitives for dictation control and updated documentation.WebSpeechRecognitionAdapterandElevenLabsScribeAdapterfor speech-to-text dictation.ComposerRuntimeto handle speech recognition sessions withstartListening()andstopListening()methods.listeningstate inComposerClientStateto track dictation status.ComposerPrimitive.DictateandComposerPrimitive.StopDictationfor starting and stopping dictation.ComposerPrimitive.ListeningTranscriptto display interim transcripts.examples/with-elevenlabs-scribedemonstrating integration with ElevenLabs Scribe for real-time dictation.README.mdand addsDictation.mdxguide for speech-to-text setup and usage.Composer.mdxto include new dictation primitives.This description was created by
for 29ecc9a. You can customize this summary. It will automatically update as commits are pushed.