Merge pull request #699 from openchatai/handle-handout-and-fixes

Handle Handoff

copilot-widget/lib/contexts/messageHandler.tsx

@@ -29,6 +29,10 @@ export type ComponentType<DT> = {
   key: string;
   data?: DT;
 };
+export type HandoffPayloadType = {
+  summery: string;
+  sentiment: "happy" | "angry" | "neutral";
+}; // sometimes it will be an empty object
 
 export type State = {
   currentUserMessage: null | UserMessageType;
@@ -180,6 +184,21 @@ export class ChatController {
     socket.emit("send_chat", userMessage);
   };
 
+  internalHandleHandoff = (payload: HandoffPayloadType) => {
+    // handle handoff
+    const id = this.genId();
+    this.setValueImmer((draft) => {
+      const message = {
+        from: "bot",
+        type: "HANDOFF",
+        id: id,
+        responseFor: id,
+        timestamp: this.getTimeStamp(),
+        data: payload,
+      } as BotMessageType<HandoffPayloadType>;
+      draft.messages.push(message);
+    });
+  };
   // Called for every character recived from the bot
   appendToCurrentBotMessage = (message: string) => {
     const currentUserMessage = this.state.currentUserMessage;
@@ -370,6 +389,28 @@ export class ChatController {
     };
   };
 
+  socketHandoffHandler = (
+    socket: Socket,
+    externalCallback?: (payload: HandoffPayloadType) => void
+  ) => {
+    const sessionId = this.sessionId;
+    if (!sessionId) {
+      return;
+    }
+
+    const handle = (msg: string) => {
+      const parsedResponse = JSON.parse(msg) as HandoffPayloadType;
+      externalCallback?.(parsedResponse);
+      this.internalHandleHandoff(parsedResponse);
+    };
+
+    socket.on(`${sessionId}_handoff`, handle);
+
+    return () => {
+      socket.off(`${sessionId}_handoff`, handle);
+    };
+  };
+
   private startTimeout = (callback: () => void) => {
     this.clearTimeout();
     timeout = setTimeout(() => {

copilot-widget/lib/contexts/statefulMessageHandler.tsx

@@ -13,13 +13,15 @@ const [useMessageHandler, MessageHandlerSafeProvider] = createSafeContext<{
 }>();
 
 function MessageHandlerProvider(props: { children: React.ReactNode }) {
-  const { token, components } = useConfigData();
+  const { token, components, onHandoff } = useConfigData();
   const { sessionId } = useSessionId(token);
   const { __socket } = useSocket();
+
   const __components = useMemo(
     () => new ComponentRegistery({ components }),
     [components]
   );
+
   const handler = useMemo(() => new ChatController(sessionId), [sessionId]);
 
   useEffect(() => {
@@ -38,6 +40,10 @@ function MessageHandlerProvider(props: { children: React.ReactNode }) {
     return handler.socketUiHandler(__socket);
   }, [__socket, handler]);
 
+  useEffect(() => {
+    return handler.socketHandoffHandler(__socket, onHandoff);
+  }, [__socket, handler, onHandoff]);
+
   return (
     <MessageHandlerSafeProvider
       value={{

copilot-widget/lib/index.ts

@@ -1,8 +1,10 @@
 export { default as Root } from "./Root";
 export { CopilotWidget } from "./CopilotWidget";
-export type { ComponentType } from "./contexts/componentRegistery";
+export type {
+  ComponentType,
+  ComponentProps,
+} from "./contexts/componentRegistery";
 export type { Options } from "./types/options";
-export type { ComponentProps } from "./contexts/componentRegistery";
 export {
   useChatState,
   useChatLoading,
@@ -12,3 +14,8 @@ export { useConfigData } from "./contexts/ConfigData";
 export { useWidgetState } from "./contexts/WidgetState";
 export { useSocket } from "./contexts/SocketProvider";
 export { useLang } from "./contexts/LocalesProvider";
+export type {
+  UserMessageType,
+  BotMessageType,
+  HandoffPayloadType,
+} from "./contexts/messageHandler";

copilot-widget/lib/screens/ChatScreen.tsx

@@ -43,10 +43,7 @@ export default function ChatScreen() {
         className="flex-1 w-full flex flex-col overflow-x-hidden shrink-0 relative overflow-auto scrollbar-thin scroll-smooth"
       >
         <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 messages, show them.
-            initialMessage && <BotInitialMessage message={initialMessage} />
-          }
+          {initialMessage && <BotInitialMessage message={initialMessage} />}
           <Map
             data={messages}
             render={(message, index) => {

copilot-widget/lib/types/options.ts

@@ -1,4 +1,5 @@
 import { ComponentType } from "@lib/contexts/componentRegistery";
+import { HandoffPayloadType } from "@lib/contexts/messageHandler";
 import type { LangType } from "@lib/locales";
 
 export type Options = {
@@ -14,6 +15,7 @@ export type Options = {
   language?: LangType;
   warnBeforeClose?: boolean;
   onClose?: () => void;
+  onHandoff?: (handout: HandoffPayloadType) => void;
   containerProps?: React.DetailedHTMLProps<
     React.HTMLAttributes<HTMLDivElement>,
     HTMLDivElement

copilot-widget/package.json

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