From 04fa72bdc10668c2d9f633ec2e10ef4359a6042d Mon Sep 17 00:00:00 2001 From: ah7255703 Date: Sat, 16 Mar 2024 23:54:50 +0200 Subject: [PATCH 1/3] Reorder Context Providers & Fix the changing session id --- copilot-widget/lib/Root.tsx | 18 +++++++------- .../lib/contexts/SocketProvider.tsx | 4 ++-- copilot-widget/lib/contexts/axiosInstance.tsx | 24 ++++++++++++------- .../lib/contexts/statefulMessageHandler.tsx | 6 ++--- copilot-widget/lib/hooks/useInitialData.ts | 14 +++++++---- copilot-widget/lib/hooks/useSessionId.ts | 16 ------------- 6 files changed, 39 insertions(+), 43 deletions(-) delete mode 100644 copilot-widget/lib/hooks/useSessionId.ts diff --git a/copilot-widget/lib/Root.tsx b/copilot-widget/lib/Root.tsx index 28d882086..4bd948daf 100644 --- a/copilot-widget/lib/Root.tsx +++ b/copilot-widget/lib/Root.tsx @@ -42,15 +42,15 @@ function Root({ children, options, containerProps }: RootProps) { }} > - - - - - {children} - - - - + + + + + {children} + + + + diff --git a/copilot-widget/lib/contexts/SocketProvider.tsx b/copilot-widget/lib/contexts/SocketProvider.tsx index 9e90595c0..2489ae2b6 100644 --- a/copilot-widget/lib/contexts/SocketProvider.tsx +++ b/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( () => diff --git a/copilot-widget/lib/contexts/axiosInstance.tsx b/copilot-widget/lib/contexts/axiosInstance.tsx index 5becd4601..b465689db 100644 --- a/copilot-widget/lib/contexts/axiosInstance.tsx +++ b/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(); 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 ( - {children} + + {children} + ); } diff --git a/copilot-widget/lib/contexts/statefulMessageHandler.tsx b/copilot-widget/lib/contexts/statefulMessageHandler.tsx index 31310e59d..0add7a304 100644 --- a/copilot-widget/lib/contexts/statefulMessageHandler.tsx +++ b/copilot-widget/lib/contexts/statefulMessageHandler.tsx @@ -2,11 +2,11 @@ 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; @@ -14,8 +14,8 @@ const [useMessageHandler, MessageHandlerSafeProvider] = createSafeContext<{ }>(); 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( diff --git a/copilot-widget/lib/hooks/useInitialData.ts b/copilot-widget/lib/hooks/useInitialData.ts index 36a289a7f..634a327cc 100644 --- a/copilot-widget/lib/hooks/useInitialData.ts +++ b/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, + } + ); } diff --git a/copilot-widget/lib/hooks/useSessionId.ts b/copilot-widget/lib/hooks/useSessionId.ts deleted file mode 100644 index 60a2fd498..000000000 --- a/copilot-widget/lib/hooks/useSessionId.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { useRef } from "react"; - -// the session id will be copilotId:uniqueId -function randomString(length = 10) { - return Math.random() - .toString(36) - .substring(2, length + 2); -} - -export function useSessionId(copilotToken: string) { - const sessionId = useRef(copilotToken + "|" + randomString()).current; - const setSessionId = (copilotToken: string) => { - // copilotToken - }; - return { sessionId, setSessionId }; -} From 4314eac64da95cdb3bcd822c89afe21076a23db6 Mon Sep 17 00:00:00 2001 From: ah7255703 Date: Sun, 17 Mar 2024 00:04:24 +0200 Subject: [PATCH 2/3] Release 2.8.9 --- copilot-widget/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/copilot-widget/package.json b/copilot-widget/package.json index 990e156b5..0f9a22c77 100644 --- a/copilot-widget/package.json +++ b/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", From a71b4f8349613323a38a1a54884f94dff1fa73eb Mon Sep 17 00:00:00 2001 From: ah7255703 Date: Sun, 17 Mar 2024 00:05:16 +0200 Subject: [PATCH 3/3] Update dependencies for copilot-widget --- dashboard/package.json | 2 +- dashboard/pnpm-lock.yaml | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/dashboard/package.json b/dashboard/package.json index 9f4f7a8b7..8d0a57fa5 100644 --- a/dashboard/package.json +++ b/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", diff --git a/dashboard/pnpm-lock.yaml b/dashboard/pnpm-lock.yaml index 0229fba05..26b03261a 100644 --- a/dashboard/pnpm-lock.yaml +++ b/dashboard/pnpm-lock.yaml @@ -12,8 +12,8 @@ dependencies: specifier: ^1.0.3 version: 1.0.3(echarts@5.4.3)(react@18.2.0) '@openchatai/copilot-widget': - specifier: ^2.8.8 - version: 2.8.8(react@18.2.0) + specifier: ^2.8.9 + version: 2.8.9(react@18.2.0) '@radix-ui/react-accordion': specifier: ^1.1.2 version: 1.1.2(@types/react-dom@18.2.13)(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) @@ -706,8 +706,8 @@ packages: '@nodelib/fs.scandir': 2.1.5 fastq: 1.15.0 - /@openchatai/copilot-widget@2.8.8(react@18.2.0): - resolution: {integrity: sha512-MaFwp3PPcxKqiYnF/X77DYvUCbOdJSIux/RTDcceBm1UVYPqQsSt01BQxjZj6IQhaIQRfszRjol8zoc2H3vEkQ==} + /@openchatai/copilot-widget@2.8.9(react@18.2.0): + resolution: {integrity: sha512-SjIHviYw0DnAJpkeO74jDBQF2UX7sLIgwTmFzgbnXAsLl3OQLr3W3bs5INbtIm3Cr6JUwGFuwgKKYmRKFGiO9Q==} peerDependencies: react: ^18.x dependencies: