feat: display document sources (#188)

xgeekshq · Sep 21, 2023 · 708c29f · 708c29f
1 parent e6d9b39
commit 708c29f
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 5 deletions.
diff --git a/packages/web-ui/components/document-snippets.tsx b/packages/web-ui/components/document-snippets.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import React, { useState } from 'react';
+
+import { ChatMessageSourceType } from '@/types/chat';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+
+type DocumentSnippetsProps = {
+  source: ChatMessageSourceType;
+};
+
+export function DocumentSnippets({ source }: DocumentSnippetsProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <p className="cursor-pointer text-sm text-gray-500 underline">
+          {source.filename}
+        </p>
+      </DialogTrigger>
+      <DialogContent className="overflow-y-scroll sm:max-h-[650px] sm:max-w-[900px]">
+        <DialogHeader>
+          <DialogTitle>
+            This answer was based on the following snippets
+          </DialogTitle>
+        </DialogHeader>
+        <>
+          {source.snippets.map((snippet, index) => {
+            return <p key={index}>{snippet}</p>;
+          })}
+        </>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/packages/web-ui/components/message.tsx b/packages/web-ui/components/message.tsx
@@ -7,6 +7,7 @@ import { format } from 'date-fns';
 
 import { ChatMessageType } from '@/types/chat';
 import { Avatar, AvatarImage } from '@/components/ui/avatar';
+import { DocumentSnippets } from '@/components/document-snippets';
 import Markdown from '@/components/markdown';
 
 export interface MessageProps {
@@ -31,11 +32,21 @@ const Message = memo(function Message({ message }: MessageProps) {
         <Markdown content={message.content} />
       </div>
       {message.response ? (
-        <div className="mt-4 flex gap-2 border-t bg-gray-50 p-4 dark:bg-gray-900">
-          <Avatar className="h-8 w-8 rounded-none">
-            <AvatarImage src={'/ai.png'} alt="AI Image" />
-          </Avatar>
-          <Markdown content={message.response} />
+        <div className="mt-4 flex flex-col gap-2 border-t bg-gray-50 p-4 dark:bg-gray-900">
+          <div className="flex gap-2">
+            <Avatar className="h-8 w-8 rounded-none">
+              <AvatarImage src={'/ai.png'} alt="AI Image" />
+            </Avatar>
+            <Markdown content={message.response} />
+          </div>
+          {message.source && (
+            <div className="flex justify-end">
+              <p className="text-sm text-gray-500">
+                Answer based on the following document:&nbsp;
+              </p>
+              <DocumentSnippets source={message.source} />
+            </div>
+          )}
         </div>
       ) : (
         <div className="relative mx-4 h-8 w-8">