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",