Merge pull request #687 from openchatai/falta/fix-widget

Fix the failing copilots

copilot-widget/index.html

@@ -63,16 +63,16 @@ <h2>
     <div id="opencopilot-root"></div>
 
     <script>
-      const token = "iPbHD69kEpB8X5jd";
-      const apiUrl = "http://localhost:8888/backend";
-      const socketUrl = "http://localhost:8888";
+      const token = "D3BCYwikexJ0hF1Z";
+      const apiUrl = "https://api.opencopilot.so/backend";
+      const socketUrl = "https://api.opencopilot.so";
       const sharedConfig = {
         initialMessage: "Welcome back! How can I help you today?", // optional
         token: token, // required
         apiUrl: apiUrl, // required
         socketUrl: socketUrl, // required
         defaultOpen: true, // optional
-        language: "nl", // optional
+        language: "en", // optional
         warnBeforeClose: true,
         headers: {
           // optional

copilot-widget/lib/contexts/SocketProvider.tsx

@@ -8,31 +8,43 @@ import { useWidgetState } from "./WidgetState";
 import { produce } from "immer";
 
 type SocketState = {
-  state: "connected" | "disconnected" | "retrying" | "stale";
-  reconnectAttempts: number;
+  state: "stale" | "connected" | "retrying" | "disconnected" | "error";
+  reason: string | null;
+  reconnectAttempts: number | null;
 };
 
 type SocketContextData = {
   __socket: Socket;
   state: SocketState;
 };
 
-function socketReducer(
-  state: SocketState,
-  action:
-    | { type: "SET_STATE"; payload: SocketState["state"] }
-    | { type: "SET_ATTEMPTS"; payload: number }
-) {
+type ActionType =
+  | {
+      type: "RECONNECT_ATTEMPT";
+      payload: number;
+    }
+  | {
+      type: "CONNECTED";
+    }
+  | {
+      type: "DISCONNECTED";
+      payload: string;
+    };
+
+function socketReducer(state: SocketState, action: ActionType) {
   return produce(state, (draft) => {
     switch (action.type) {
-      case "SET_STATE": {
-        draft.state = action.payload;
-        break;
-      }
-      case "SET_ATTEMPTS": {
+      case "RECONNECT_ATTEMPT":
+        draft.state = "retrying";
         draft.reconnectAttempts = action.payload;
         break;
-      }
+      case "CONNECTED":
+        draft.state = "connected";
+        break;
+      case "DISCONNECTED":
+        draft.state = "disconnected";
+        draft.reason = action.payload;
+        break;
     }
   });
 }
@@ -42,7 +54,8 @@ const [useSocket, SocketSafeProvider] = createSafeContext<SocketContextData>();
 function SocketProvider({ children }: { children: ReactNode }) {
   const [state, dispatch] = useReducer(socketReducer, {
     state: "stale",
-    reconnectAttempts: 0,
+    reason: null,
+    reconnectAttempts: null,
   });
 
   const options = useConfigData();
@@ -59,16 +72,15 @@ function SocketProvider({ children }: { children: ReactNode }) {
   );
 
   const handleConnect = useCallback(() => {
-    dispatch({ type: "SET_STATE", payload: "connected" });
+    dispatch({ type: "CONNECTED" });
   }, []);
 
-  const handleDisconnect = useCallback(() => {
-    dispatch({ type: "SET_STATE", payload: "disconnected" });
+  const handleDisconnect = useCallback((reason: string) => {
+    dispatch({ type: "DISCONNECTED", payload: reason });
   }, []);
 
   const handleReconnectAttempt = useCallback((attempt: number) => {
-    dispatch({ type: "SET_STATE", payload: "retrying" });
-    dispatch({ type: "SET_ATTEMPTS", payload: attempt });
+    dispatch({ type: "RECONNECT_ATTEMPT", payload: attempt });
   }, []);
 
   useEffect(() => {
@@ -83,8 +95,11 @@ function SocketProvider({ children }: { children: ReactNode }) {
   }, [open, socket]);
 
   useEffect(() => {
+    // Fired upon a successful connection.
     socket.on("connect", handleConnect);
+    // Fired upon a disconnection.
     socket.on("disconnect", handleDisconnect);
+    // Fired upon an attempt to reconnect.
     socket.on("reconnect_attempt", handleReconnectAttempt);
     return () => {
       socket.off("connect", handleConnect);

copilot-widget/lib/contexts/messageHandler.tsx

@@ -90,14 +90,14 @@ export class ChatController {
     return this.state;
   };
 
-  reset() {
+  reset = () => {
     this.setValueImmer((draft) => {
       draft.messages = [];
       draft.currentUserMessage = null;
       draft.conversationInfo = null;
       draft.lastServerMessageId = null;
     });
-  }
+  };
 
   genId = (len = 7) => {
     return Math.random().toString(36).substring(len);
@@ -264,15 +264,17 @@ export class ChatController {
     if (!sessionId) {
       return;
     }
+
     const handle = (content: string) => {
+      if (this.select("conversationInfo")) {
+        this.setValueImmer((d) => {
+          d.conversationInfo = null;
+        });
+      }
       if (content === "|im_end|") {
         this.settle();
         return;
       }
-      // once we get response
-      this.setValueImmer((draft) => {
-        draft.conversationInfo = "streaming......";
-      });
 
       this.startTimeout(() => {
         this.settle();

copilot-widget/lib/screens/ChatScreen.tsx

@@ -30,7 +30,8 @@ export default function ChatScreen() {
 
   useEffect(() => {
     setPos(0, 100);
-  }, [messages.length, setPos]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [messages.length]);
 
   const LoadingComponent = __components.getComponent("LOADING", config.debug);
 
@@ -39,9 +40,9 @@ export default function ChatScreen() {
       <ChatHeader />
       <main
         ref={scrollElementRef}
-        className="flex-1 w-full overflow-x-hidden shrink-0 overflow-auto scrollbar-thin scroll-smooth"
+        className="flex-1 w-full flex flex-col overflow-x-hidden shrink-0 relative overflow-auto scrollbar-thin scroll-smooth"
       >
-        <div className="flex h-fit mt-auto flex-col py-2 max-h-full items-center gap-1 last:fade-in-right">
+        <div className="flex flex-1 w-full min-h-fit mt-auto flex-col py-2 max-h-full items-center gap-1 last:fade-in-right">
           {
             // If there are initial message, show it.
             initialMessage && <BotInitialMessage message={initialMessage} />

copilot-widget/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openchatai/copilot-widget",
   "private": false,
-  "version": "2.8.0",
+  "version": "2.8.1",
   "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.0",
+    "@openchatai/copilot-widget": "^2.8.1",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",