Websocket disconnects after a single sentence transcription

[midnight ermine]

Thanks for asking your question. Please be sure to reply with as much detail as possible so we can assist you efficiently. Such as:

• Provide the request_id if you've a question about a transcription response.
• The options you used or the api.deepgram.com URL you sent your request to, including parameters.
• Any code snippets you can include.
• Any audio you can include, or if you can't share it here please email it to us at [email protected] and provide a link to this thread.

[next orchid]

I placed the microphone icon in prompt-form.tsx (https://github.com/vercel/ai-chatbot/blob/main/components/prompt-form.tsx)

      <div className="relative flex flex-col w-full px-8 overflow-hidden max-h-60 grow bg-background sm:rounded-md sm:border sm:px-12">
        {/* Flex container for buttons */}
        <div className="absolute top-4 left-0 sm:left-4 flex items-center space-x-2">
          {/* Tooltip for New Chat button */}
          <Tooltip>
            <TooltipTrigger asChild>
              <button
                onClick={e => {
                  e.preventDefault();
                  router.refresh();
                  router.push('/');
                }}
                className={cn(
                  buttonVariants({ size: 'sm', variant: 'outline' }),
                  'rounded-full bg-background p-0'
                )}
              >
                <IconPlus />
                <span className="sr-only">New Chat</span>
              </button>
            </TooltipTrigger>
            <TooltipContent>New Chat</TooltipContent>
          </Tooltip>

          {/* Microphone component */}
          <Microphone onTranscription={(transcription) => setInput(transcription)} />
        </div>

The microphone component is an exact copy of microphone.tsx from the Nextjs starter, and route.ts is also the same.

[winged echo]

I don't have a link to the specific microphone component, but looking at it from the top level. IF that component is a button and it is not calling to prevent the default form submit you may be seeing the form get submitted which would refresh that component causing the web socket to be closed. If you pull your Microphone component outside the form and it works that is likely your issue.

I would also be curious to see what the specific error message is being thrown in the onerror event for that websocket.

[next orchid]

Here's the microphone component:
https://github.com/deepgram-starters/live-nextjs-starter/blob/main/app/microphone.tsx

And here's the API route:
https://github.com/deepgram-starters/live-nextjs-starter/blob/main/app/api/route.ts

Let me try and console log

[winged echo]

Line #162 of the Microphone component.

I would start by testing that microphone component outside of the form, or by modifying the component so that it can get the submit event and call .preventDefault().

[next orchid]

Cool, thanks for this! I'll get to this in 1-2 hrs and report back. I may have gotten a bit hasty with some code modifications and may caused some havoc haha

In the meantime, thought it would be a good idea to include my microphone.tsx adaptation as well. The MicIcon function is just to replace the original SVG

[winged echo]

Line 81 of your component. I am not sure that your model is correct.

According to the docs it should be, "nova-2-general".

[next orchid]

I just made this change, and what I'm seeing now is constant connection and disconnection. This happens again, after transcribing a single sentence. I'll work through it now and see. Funnily enough, the behaiviour is the same with the wrong and right model names lol

[winged echo]

I would start here on fixing the connection issue. The model was just something I noticed.

[next orchid]

@winged echo code ended up becoming very hairy. I spent a bunch of hours and I realised two things: 1) I'm in too deep that I can't recognize where the issue is anymore haha 2) I need to learn more JS

[winged echo]

Thank you for the update. As far as this ticket is concerned, what are your next steps?

[next orchid]

@winged echo I changed the submission method. Instead of placing the microphone inside the form panel (the chat panel), I placed the microphone as a div on its own and it's working nicely. Having issues with state management but that's outside the confines of Deepgram. Thanks for checking with me 🙂