restart websocket through session id

README.md

@@ -1,3 +1,16 @@
 # Vocode React SDK
 
 See our [React Quickstart](https://docs.vocode.dev/react-quickstart) for set up!
+
+## Invalid Hook Call
+
+You might have more than one copy of React in the same app when using React Hooks and NPM Link together.
+
+Our solution
+```
+npm_link.sh
+```
+
+Refer link:
+- [Invalid Hook Call Warning](https://legacy.reactjs.org/warnings/invalid-hook-call-warning.html)
+- [Solving the problem with NPM Link and React Hooks](https://medium.com/bbc-product-technology/solving-the-problem-with-npm-link-and-react-hooks-266c832dd019)

npm_link.sh

@@ -0,0 +1,19 @@
+WEBAPP_PATH=$PWD/../vocode-react-demo
+
+rm -rf node_modules/react-dom
+rm -rf node_modules/react
+rm -rf node_modules/@types/react-dom
+rm -rf node_modules/@types/react
+rm -rf node_modules/@types/node
+
+ln -s $WEBAPP_PATH/node_modules/react-dom node_modules/react-dom
+ln -s $WEBAPP_PATH/node_modules/react node_modules/react
+ln -s $WEBAPP_PATH/node_modules/@types/react-dom node_modules/@types/react-dom
+ln -s $WEBAPP_PATH/node_modules/@types/react node_modules/@types/react
+ln -s $WEBAPP_PATH/node_modules/@types/node node_modules/@types/node
+
+ls -ld node_modules/react-dom
+ls -ld node_modules/react
+ls -ld node_modules/@types/react-dom
+ls -ld node_modules/@types/react
+ls -ld node_modules/@types/node

package.json

@@ -23,6 +23,7 @@
   "author": "Ajay Raj <[email protected]>",
   "license": "MIT",
   "devDependencies": {
+    "@types/uuid": "^9.0.1",
     "typescript": "^4.9.5"
   },
   "dependencies": {

src/hooks/conversation.ts

@@ -21,6 +21,7 @@ import {
 import { DeepgramTranscriberConfig, TranscriberConfig } from "../types";
 import { isSafari, isChrome } from "react-device-detect";
 import { Buffer } from "buffer";
+import { v4 as uuidv4 } from "uuid"
 
 const VOCODE_API_URL = "api.vocode.dev";
 const DEFAULT_CHUNK_SIZE = 2048;
@@ -173,7 +174,7 @@ export const useConversation = (
     outputAudioMetadata: { samplingRate: number; audioEncoding: AudioEncoding },
     chunkSize: number | undefined,
     downsampling: number | undefined,
-    conversationId: string | undefined
+    conversationId: string | undefined,
   ): AudioConfigStartMessage => ({
     type: "websocket_audio_config_start",
     inputAudioConfig: {
@@ -293,17 +294,27 @@ export const useConversation = (
     } else {
       const selfHostedConversationConfig =
         config as SelfHostedConversationConfig;
+      let conversationId = selfHostedConversationConfig.conversationId;
+      if (!conversationId) {
+        let sessionId = sessionStorage.getItem("sessionId");
+        if (sessionId == undefined) {
+          sessionId = uuidv4();
+          sessionStorage.setItem("sessionId", sessionId);
+        }
+        conversationId = sessionId;
+      }
       startMessage = getAudioConfigStartMessage(
         inputAudioMetadata,
         outputAudioMetadata,
         selfHostedConversationConfig.chunkSize,
         selfHostedConversationConfig.downsampling,
-        selfHostedConversationConfig.conversationId
+        conversationId,
       );
     }
 
     socket.send(stringify(startMessage));
     console.log("Access to microphone granted");
+    console.log(startMessage);
 
     let recorderToUse = recorder;
     if (recorderToUse && recorderToUse.state === "paused") {