Merge pull request #147 from OpenAssistantGPT/feat/handle-reference-s…

…ources

feat: handle reference sources

.changeset/quiet-oranges-sneeze.md

@@ -0,0 +1,7 @@
+---
+'@openassistantgpt/react': minor
+'openassistantgpt': minor
+'@openassistantgpt/ui': minor
+---
+
+Add support for file references. You can now display the document where the assistant chatbot got his information from.

examples/website-chatbot-window/app/window/page.tsx

@@ -45,6 +45,13 @@ export default function ChatPage() {
       chatbot={chatbot}
       path="/api/chat/assistant"
       defaultMessage=""
+      annotationsFiles={[
+        {
+          fileName: 'google',
+          fileId: 'file-GMUsHaFBkyvlAHdpCvt3Hngf',
+          downloadUrl: 'https://google.com',
+        },
+      ]}
     />
   );
 }

examples/website-chatbot-window/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@openassistantgpt/assistant": "^0.2.0",
+    "@openassistantgpt/assistant": "workspace:*",
     "@openassistantgpt/react": "latest",
     "@openassistantgpt/ui": "workspace:*",
     "ai": "3.2.32",

packages/assistant/src/assistant-response.ts

@@ -144,7 +144,6 @@ export function AssistantResponse(
                 }
 
                 if (content.type == 'image_file') {
-                  console.log(content.image_file);
                   controller.enqueue(
                     textEncoder.encode(
                       formatStreamPart('assistant_message', {

packages/react/src/use-assistant.ts

@@ -193,6 +193,19 @@ export function useAssistant({
                   ];
                 });
               }
+
+              // @ts-ignore - this is a hack to make the type checker happy
+              if (annotation && annotation.type === 'file_citation') {
+                setMessages(messages => {
+                  const lastMessage = messages[messages.length - 1];
+                  // @ts-ignore - because they use JSONValue as a type
+                  lastMessage.annotations = annotation;
+                  return [
+                    ...messages.slice(0, messages.length - 1),
+                    lastMessage,
+                  ];
+                });
+              }
             }
             break;
           }

packages/ui/components/chat-message.tsx

@@ -16,13 +16,20 @@ import { ChatbotConfig } from '@/src';
 import { Attachment } from '@/types/attachements';
 import { PreviewAttachment } from '@/components/preview-attachement';
 
+export interface Reference {
+  id: string;
+  fileName: string;
+  downloadUrl: string;
+}
+
 export interface ChatMessageProps {
   message: Message;
   children?: React.ReactNode;
   chatbot: ChatbotConfig;
   attachments?: Array<Attachment>;
   isFirst?: boolean;
   fontSize: string; // Keep as string for pixel values
+  references: Reference[];
 }
 
 const getDirection = (isRTL: boolean) => (isRTL ? 'rtl' : 'ltr');
@@ -33,9 +40,11 @@ export function ChatMessage({
   chatbot,
   isFirst,
   attachments,
+  references,
   fontSize = '16px', // Default font size in pixels
   ...props
 }: ChatMessageProps) {
+  if (references.length) console.log(` HEEEREEEE ${references}`);
   return (
     <>
       {message.role === 'user' ? (
@@ -168,6 +177,24 @@ export function ChatMessage({
                     ))}
                   </div>
                 )}
+                {references.length > 0 && (
+                  <div className="mt-2 text-xs space-y-1">
+                    Sources:
+                    {references.map((ref, i) => (
+                      <p key={i}>
+                        🔗{' '}
+                        <a
+                          href={ref.downloadUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-blue-500 hover:underline"
+                        >
+                          {ref.fileName}
+                        </a>
+                      </p>
+                    ))}
+                  </div>
+                )}
                 {!isFirst ? (
                   <ChatMessageActions message={message} />
                 ) : (

packages/ui/components/chat.tsx

@@ -16,7 +16,7 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { FooterText } from '@/components/chat-footer-text';
-import { ChatMessage } from '@/components/chat-message';
+import { ChatMessage, Reference } from '@/components/chat-message';
 import { useEnterSubmit } from '@/hooks/use-enter-submit';
 import { ChatHistory } from '@/components/chat-history';
 import { ChatbotConfig } from '@/src/chatbot';
@@ -31,6 +31,11 @@ interface ChatbotProps {
   className?: string;
   withExitX?: boolean;
   clientSidePrompt?: string;
+  annotationsFiles?: Array<{
+    fileId: string;
+    fileName: string;
+    downloadUrl: string;
+  }>;
   extensions?: React.ReactNode[];
   onMessagesChange?: (messages: Message[]) => void;
   onThreadIdChange?: (threadId: string | undefined) => void;
@@ -43,6 +48,7 @@ export function OpenAssistantGPTChat({
   className,
   withExitX = false,
   clientSidePrompt,
+  annotationsFiles = [],
   onMessagesChange,
   onThreadIdChange,
   extensions,
@@ -161,7 +167,6 @@ export function OpenAssistantGPTChat({
       if (response.ok) {
         const data = await response.json();
         const { url, pathname, contentType } = data;
-        console.log(data);
 
         return {
           url,
@@ -219,6 +224,7 @@ export function OpenAssistantGPTChat({
     },
     [setAttachments],
   );
+  console.log(annotationsFiles);
 
   return (
     <>
@@ -254,15 +260,39 @@ export function OpenAssistantGPTChat({
                 content: chatbot.welcomeMessage,
               }}
               fontSize={chatbot.fontSize}
+              references={[]}
             />
             <div className="flex-grow overflow-y-auto space-y-6 flex flex-col order-2">
               {messages.map((message: Message, index) => {
+                const annotationsArray = Array.isArray(message.annotations)
+                  ? message.annotations
+                  : [message.annotations].filter(Boolean);
                 return (
                   <ChatMessage
                     chatbot={chatbot}
                     key={index}
                     message={message}
                     fontSize={chatbot.fontSize}
+                    references={
+                      annotationsArray
+                        .map(a => {
+                          if (a !== null) {
+                            const annotation = annotationsFiles.find(
+                              // @ts-ignore
+                              f => f.fileId === a.file_citation.file_id,
+                            );
+                            if (annotation) {
+                              return {
+                                id: annotation.fileId,
+                                fileName: annotation.fileName,
+                                downloadUrl: annotation.downloadUrl,
+                              };
+                            }
+                          }
+                          return null;
+                        })
+                        .filter(Boolean) as Reference[]
+                    }
                     //attachments={message.experimental_attachments}
                   />
                 );
@@ -278,6 +308,7 @@ export function OpenAssistantGPTChat({
                     content: 'loading',
                   }}
                   fontSize={chatbot.fontSize}
+                  references={[]}
                 />
               </div>
             )}