Merge pull request #708 from openchatai/fix-the-session-id

Fix the problems with session id

copilot-widget/lib/Root.tsx

@@ -42,15 +42,15 @@ function Root({ children, options, containerProps }: RootProps) {
       }}
     >
       <ConfigDataProvider data={options}>
-        <LanguageProvider>
-          <WidgetState>
-            <SocketProvider>
-              <MessageHandlerProvider>
-                <AxiosProvider>{children}</AxiosProvider>
-              </MessageHandlerProvider>
-            </SocketProvider>
-          </WidgetState>
-        </LanguageProvider>
+        <AxiosProvider>
+          <LanguageProvider>
+            <WidgetState>
+              <SocketProvider>
+                <MessageHandlerProvider>{children}</MessageHandlerProvider>
+              </SocketProvider>
+            </WidgetState>
+          </LanguageProvider>
+        </AxiosProvider>
       </ConfigDataProvider>
       <style>{css}</style>
     </root.div>

copilot-widget/lib/contexts/SocketProvider.tsx

@@ -2,10 +2,10 @@ import { Socket } from "socket.io-client";
 import { ReactNode, useCallback, useEffect, useMemo, useReducer } from "react";
 import { createSocketClient } from "@lib/utils/createSocket";
 import { useConfigData } from "./ConfigData";
-import { useSessionId } from "@lib/hooks/useSessionId";
 import { createSafeContext } from "./createSafeContext";
 import { useWidgetState } from "./WidgetState";
 import { produce } from "immer";
+import { useAxiosInstance } from "./axiosInstance";
 
 type SocketState = {
   state: "stale" | "connected" | "retrying" | "disconnected" | "error";
@@ -59,7 +59,7 @@ function SocketProvider({ children }: { children: ReactNode }) {
   });
 
   const options = useConfigData();
-  const { sessionId } = useSessionId(options.token);
+  const { sessionId } = useAxiosInstance();
   const [open] = useWidgetState();
   const socket = useMemo(
     () =>

copilot-widget/lib/contexts/axiosInstance.tsx

@@ -1,30 +1,38 @@
 import { AxiosInstance } from "axios";
 import { ReactNode, useMemo } from "react";
 import { useConfigData } from "./ConfigData";
-import { useSessionId } from "@lib/hooks/useSessionId";
 import { createAxiosInstance } from "@lib/data/chat";
 import { createSafeContext } from "./createSafeContext";
 
 interface AxiosInstanceProps {
   axiosInstance: AxiosInstance;
+  sessionId: string;
+}
+
+function randomString(length = 10) {
+  return Math.random()
+    .toString(36)
+    .substring(2, length + 2);
 }
 
 const [useAxiosInstance, AxiosSafeProvider] =
   createSafeContext<AxiosInstanceProps>();
 
 function AxiosProvider({ children }: { children: ReactNode }) {
-  const config = useConfigData();
-  const { sessionId } = useSessionId(config?.token || "defaultToken");
+  const { token, apiUrl } = useConfigData();
+  const sessionId = useMemo(() => token + "|" + randomString(), [token]);
+
   const axiosInstance: AxiosInstance = useMemo(() => {
     return createAxiosInstance({
-      botToken: config?.token,
+      botToken: token,
       sessionId,
-      apiUrl: config?.apiUrl,
+      apiUrl: apiUrl,
     });
-  }, [config, sessionId]);
-
+  }, [token, apiUrl, sessionId]);
   return (
-    <AxiosSafeProvider value={{ axiosInstance }}>{children}</AxiosSafeProvider>
+    <AxiosSafeProvider value={{ axiosInstance, sessionId }}>
+      {children}
+    </AxiosSafeProvider>
   );
 }
 

copilot-widget/lib/contexts/statefulMessageHandler.tsx

@@ -2,20 +2,20 @@
 import { useEffect, useMemo, useSyncExternalStore } from "react";
 import { ChatController } from "./messageHandler";
 import { createSafeContext } from "./createSafeContext";
-import { useSessionId } from "@lib/hooks/useSessionId";
 import { useConfigData } from "./ConfigData";
 import { useSocket } from "./SocketProvider";
 import { ComponentRegistery } from "./componentRegistery";
 import { useLang } from "..";
+import { useAxiosInstance } from "./axiosInstance";
 
 const [useMessageHandler, MessageHandlerSafeProvider] = createSafeContext<{
   __handler: ChatController;
   __components: ComponentRegistery;
 }>();
 
 function MessageHandlerProvider(props: { children: React.ReactNode }) {
-  const { token, components, onHandoff } = useConfigData();
-  const { sessionId } = useSessionId(token);
+  const { components, onHandoff } = useConfigData();
+  const { sessionId } = useAxiosInstance();
   const { __socket } = useSocket();
 
   const __components = useMemo(

copilot-widget/lib/hooks/useInitialData.ts

@@ -3,9 +3,13 @@ import { getInitialData } from "@lib/data/chat";
 import useSWR from "swr";
 
 export function useInitialData() {
-  const { axiosInstance } = useAxiosInstance();
-  return useSWR("initialData", () => getInitialData(axiosInstance), {
-    revalidateIfStale: false,
-    revalidateOnFocus: false,
-  });
+  const { axiosInstance, sessionId } = useAxiosInstance();
+  return useSWR(
+    [sessionId, "initialData"].join("-"),
+    () => getInitialData(axiosInstance),
+    {
+      revalidateIfStale: false,
+      revalidateOnFocus: false,
+    }
+  );
 }

copilot-widget/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openchatai/copilot-widget",
   "private": false,
-  "version": "2.8.8",
+  "version": "2.8.9",
   "type": "module",
   "scripts": {
     "dev": "vite",

dashboard/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.3.1",
     "@kbox-labs/react-echarts": "^1.0.3",
-    "@openchatai/copilot-widget": "^2.8.8",
+    "@openchatai/copilot-widget": "^2.8.9",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",