Copilot: Collect metadata and add to message before sending

libs/copilot/index.tsx

@@ -33,6 +33,7 @@ declare global {
     sendChainlitMessage: (message: IStep) => void;
     getChainlitCopilotThreadId: () => string | null;
     clearChainlitCopilotThreadId: (newThreadId?: string) => void;
+    setChainlitMetadata: (metadata: Record<string, string>) => void;
   }
 }
 

libs/copilot/src/widget.tsx

@@ -1,6 +1,7 @@
 import { cn } from '@/lib/utils';
 import { MessageCircle, X } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
 
 import Alert from '@chainlit/app/src/components/Alert';
 import { Button } from '@chainlit/app/src/components/ui/button';
@@ -9,7 +10,7 @@ import {
   PopoverContent,
   PopoverTrigger
 } from '@chainlit/app/src/components/ui/popover';
-import { useConfig } from '@chainlit/react-client';
+import { chatMetadataState, useConfig } from '@chainlit/react-client';
 
 import Header from './components/Header';
 
@@ -27,22 +28,24 @@ interface Props {
 
 const Widget = ({ config, error }: Props) => {
   const [expanded, setExpanded] = useState(config?.expanded || false);
-  const [isOpen, setIsOpen] = useState(config?.opened || false);
+  const [isOpen, setIsOpen] = useState(false);
+  const setChatMetadata = useSetRecoilState(chatMetadataState);
   const projectConfig = useConfig();
 
   useEffect(() => {
     window.toggleChainlitCopilot = () => setIsOpen((prev) => !prev);
     window.getChainlitCopilotThreadId = getChainlitCopilotThreadId;
     window.clearChainlitCopilotThreadId = clearChainlitCopilotThreadId;
-
+    // @ts-expect-error is not a valid prop
+    window.setChainlitMetadata = setChatMetadata;
     return () => {
       window.toggleChainlitCopilot = () => console.error('Widget not mounted.');
       window.getChainlitCopilotThreadId = () => null;
 
       window.clearChainlitCopilotThreadId = () =>
         console.error('Widget not mounted.');
     };
-  }, []);
+  }, [setChatMetadata]);
 
   const customClassName = config?.button?.className || '';
 

libs/react-client/src/state.ts

@@ -246,3 +246,8 @@ export const mcpState = atom<IMcp[]>({
   default: [],
   effects: [localStorageEffect<IMcp[]>('mcp_storage_key')]
 });
+
+export const chatMetadataState = atom<Record<string, any>>({
+  key: 'CopilotChatMetadata',
+  default: {}
+});

libs/react-client/src/useChatInteract.ts

@@ -3,6 +3,7 @@ import { useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil';
 import {
   actionState,
   askUserState,
+  chatMetadataState,
   chatSettingsInputsState,
   chatSettingsValueState,
   currentThreadIdState,
@@ -30,6 +31,7 @@ const useChatInteract = () => {
   const session = useRecoilValue(sessionState);
   const askUser = useRecoilValue(askUserState);
   const sessionId = useRecoilValue(sessionIdState);
+  const chatMetadata = useRecoilValue(chatMetadataState);
 
   const resetChatSettings = useResetRecoilState(chatSettingsInputsState);
   const resetSessionId = useResetRecoilState(sessionIdState);
@@ -65,7 +67,7 @@ const useChatInteract = () => {
 
   const sendMessage = useCallback(
     (
-      message: PartialBy<IStep, 'createdAt' | 'id'>,
+      message: PartialBy<IStep, 'createdAt' | 'id' | 'metadata'>,
       fileReferences: IFileRef[] = []
     ) => {
       if (!message.id) {
@@ -74,7 +76,12 @@ const useChatInteract = () => {
       if (!message.createdAt) {
         message.createdAt = new Date().toISOString();
       }
+      message.metadata = { ...(message.metadata || {}), ...chatMetadata };
       setMessages((oldMessages) => addMessage(oldMessages, message as IStep));
+      console.log(
+        'useChatInteract: Sending message metadata',
+        message.metadata
+      );
 
       session?.socket.emit('client_message', { message, fileReferences });
     },