Merge pull request #642 from openchatai/disable-pooling-socket-thingy

Disable pooling socket thingy
openchatai · Feb 19, 2024 · c702500 · c702500
2 parents 9d639dc + 8f683b6
commit c702500
Show file tree

Hide file tree

Showing 9 changed files with 182 additions and 145 deletions.
diff --git a/copilot-widget/index.html b/copilot-widget/index.html
@@ -75,9 +75,9 @@ <h2>
     </style>
     <div id="opencopilot-root"></div>
     <script>
-      const token = "wDsimYsE6ac3ZV3o";
-      const apiUrl = "https://api.opencopilot.so/backend";
-      const socketUrl = "https://api.opencopilot.so";
+      const token = "EvWRh4cqyGIgct4c";
+      const apiUrl = "http://localhost:8888/backend";
+      const socketUrl = "http://localhost:8888";
     </script>
     <script>
       document.addEventListener("DOMContentLoaded", () => {

diff --git a/copilot-widget/lib/contexts/Controller.tsx b/copilot-widget/lib/contexts/Controller.tsx
@@ -1,12 +1,19 @@
-import React, { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import now from "../utils/timenow";
 import { useConfigData } from "./ConfigData";
 import { Message } from "@lib/types";
 import { getId } from "@lib/utils/utils";
-import io from 'socket.io-client';
+import io from "socket.io-client";
 import { useSessionId } from "@lib/hooks/useSessionId";
 import { BotResponse, UserMessage } from "@lib/types/messageTypes";
 import { createSafeContext } from "./create-safe-context";
+import { useWidgetState } from "./WidgetState";
 
 export type FailedMessage = {
   message: Message;
@@ -16,131 +23,164 @@ export type FailedMessage = {
 interface ChatContextData {
   messages: Message[];
   conversationInfo: string | null;
-  sendMessage: (message: Extract<Message, { from: 'user' }>) => void;
+  sendMessage: (message: Extract<Message, { from: "user" }>) => void;
   loading: boolean;
   failedMessage: FailedMessage | null;
   reset: () => void;
   setLastMessageId: (id: number | null) => void;
   lastMessageToVote: number | null;
 }
-const [
-  useChat,
-  ChatSafeProvider,
-] = createSafeContext<ChatContextData>();
-
+const [useChat, ChatSafeProvider] = createSafeContext<ChatContextData>();
 
 const ChatProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-  const [currentMessagePair, setCurrentMessagePair] = useState<{ user: string; bot: string } | null>(null);
+  const [isOpen] = useWidgetState();
+  const [currentMessagePair, setCurrentMessagePair] = useState<{
+    user: string;
+    bot: string;
+  } | null>(null);
   const [messages, setMessages] = useState<Message[]>([]);
   const config = useConfigData();
   const { sessionId } = useSessionId(config.token);
   const [conversationInfo, setConversationInfo] = useState<string | null>(null);
-  const [lastMessageToVote, setLastMessageToVote] = useState<number | null>(null);
+  const [lastMessageToVote, setLastMessageToVote] = useState<number | null>(
+    null
+  );
   const setLastMessageId = useCallback((id: number | null) => {
-    setLastMessageToVote(id)
-  }, [])
-
-  const socket = useMemo(() => io(config.socketUrl, {
-    extraHeaders: {
-      "X-Bot-Token": config.token,
-      "X-Session-Id": sessionId,
-    },
-  }), [config, sessionId]);
+    setLastMessageToVote(id);
+  }, []);
+  const socket = useMemo(
+    () =>
+      io(config.socketUrl, {
+        autoConnect: false,
+        transports: ["websocket"],
+        extraHeaders: {
+          "X-Bot-Token": config.token,
+          "X-Session-Id": sessionId,
+        },
+      }),
+    [config, sessionId]
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      socket.connect();
+    } else {
+      socket.disconnect();
+    }
+  }, [isOpen, socket]);
 
   const [failedMessage, setError] = useState<FailedMessage | null>(null);
   const loading = currentMessagePair !== null;
 
   const sendMessage = async (message: Extract<Message, { from: "user" }>) => {
-    // abort 
+    // abort
     const userMessageId = getId();
     const botMessageId = getId();
-    const userMessage: UserMessage & { session_id: string, headers: Record<string, string> } = {
+    const userMessage: UserMessage & {
+      session_id: string;
+      headers: Record<string, string>;
+      bot_token: string;
+    } = {
       timestamp: now(),
       id: userMessageId,
       content: message.content,
       from: "user",
       session_id: sessionId,
       headers: config.headers ?? {},
-    }
-    socket.emit('send_chat', userMessage);
+      bot_token: config.token
+    };
+    socket.emit("send_chat", userMessage);
 
     setCurrentMessagePair({
       user: userMessageId,
       bot: botMessageId,
-    })
+    });
 
     createUserMessage(userMessage);
-    createEmptyBotMessage(botMessageId)
+    createEmptyBotMessage(botMessageId);
   };
 
-  const createUserMessage = useCallback((message: Extract<Message, { from: "user" }>) => {
-    setMessages((m) => [...m, message]);
-  }, [setMessages]);
+  const createUserMessage = useCallback(
+    (message: Extract<Message, { from: "user" }>) => {
+      setMessages((m) => [...m, message]);
+    },
+    [setMessages]
+  );
 
-  const createEmptyBotMessage = useCallback((id: string) => {
-    setMessages((m) => [...m, {
-      timestamp: now(),
-      from: "bot",
-      id: id,
-      type: "text",
-      response: {
-        text: ""
+  const createEmptyBotMessage = useCallback(
+    (id: string) => {
+      setMessages((m) => [
+        ...m,
+        {
+          timestamp: now(),
+          from: "bot",
+          id: id,
+          type: "text",
+          response: {
+            text: "",
+          },
+        },
+      ]);
+    },
+    [setMessages]
+  );
+
+  const updateBotMessage = useCallback(
+    (id: string, text: string) => {
+      const botMessage = messages.find((m) => m.id === id) as BotResponse;
+      if (botMessage) {
+        // append the text to the bot message
+        const textt = botMessage.response.text + text;
+        botMessage.response.text = textt;
+        setMessages([...messages]);
       }
-    }])
-  }, [setMessages]);
-
-  const updateBotMessage = useCallback((id: string, text: string) => {
-    const botMessage = messages.find(m => m.id === id) as BotResponse
-    if (botMessage) {
-      // append the text to the bot message
-      const textt = botMessage.response.text + text
-      botMessage.response.text = textt
-      setMessages([...messages])
-    }
-  }, [messages])
+    },
+    [messages]
+  );
 
   useEffect(() => {
     socket.on(`${sessionId}_info`, (msg: string) => {
-      setConversationInfo(msg)
-    })
+      setConversationInfo(msg);
+    });
 
     return () => {
       socket.off(`${sessionId}_info`);
     };
   }, [sessionId, socket]);
 
   useEffect(() => {
-    const current = currentMessagePair
+    const current = currentMessagePair;
     // the content is the message.content from the server
     try {
       socket.on(sessionId, (content: string) => {
         if (current) {
           if (content === "|im_end|") {
-            setCurrentMessagePair(null)
-            return
+            setCurrentMessagePair(null);
+            return;
           }
-          setConversationInfo(null)
-          updateBotMessage(current.bot, content)
+          setConversationInfo(null);
+          updateBotMessage(current.bot, content);
         }
       });
-      return () => { socket.off(sessionId) }
+      return () => {
+        socket.off(sessionId);
+      };
     } catch (error) {
-      setConversationInfo(null)
+      setConversationInfo(null);
     }
-
   }, [currentMessagePair, sessionId, socket, updateBotMessage]);
   useEffect(() => {
     socket.on(`${sessionId}_vote`, (content) => {
-      console.log(`${sessionId}_vote ==>`, content)
+      console.log(`${sessionId}_vote ==>`, content);
       if (content) {
-        setLastMessageToVote(content)
+        setLastMessageToVote(content);
       }
     });
     return () => {
       socket.off(`${sessionId}_vote`);
-      setLastMessageToVote(null)
+      setLastMessageToVote(null);
     };
-  }, [sessionId, socket])
+  }, [sessionId, socket]);
   function reset() {
     setMessages([]);
   }
@@ -153,16 +193,13 @@ const ChatProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
     failedMessage,
     reset,
     setLastMessageId,
-    lastMessageToVote
+    lastMessageToVote,
   };
 
   return (
-    <ChatSafeProvider value={chatContextValue}>
-      {children}
-    </ChatSafeProvider>
+    <ChatSafeProvider value={chatContextValue}>{children}</ChatSafeProvider>
   );
 };
 
-
 // eslint-disable-next-line react-refresh/only-export-components
 export { ChatProvider, useChat };
diff --git a/copilot-widget/lib/hooks/useInitialData.tsx b/copilot-widget/lib/hooks/useInitialData.tsx
@@ -4,5 +4,5 @@ import useSWR from "swr";
 
 export function useInitialData() {
   const { axiosInstance } = useAxiosInstance();
-  return useSWR("initialData", () => getInitialData(axiosInstance));
+  return useSWR("initialData", () => getInitialData(axiosInstance), {revalidateIfStale: false, revalidateOnFocus: false});
 }
diff --git a/copilot-widget/package.json b/copilot-widget/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@openchatai/copilot-widget",
   "private": false,
-  "version": "2.5.2",
+  "version": "2.5.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git 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.5.2",
+    "@openchatai/copilot-widget": "^2.5.3",
     "@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