Show RAG files in a sidepanel

app/api/chat/google/route.ts

@@ -44,7 +44,6 @@ export async function POST(request: Request) {
     return new Response(readableStream, {
       headers: { "Content-Type": "text/plain" }
     })
-
   } catch (error: any) {
     let errorMessage = error.message || "An unexpected error occurred"
     const errorCode = error.status || 500

components/chat/chat-files-display.tsx

@@ -2,7 +2,7 @@ import { ChatbotUIContext } from "@/context/context"
 import { getFileFromStorage } from "@/db/storage/files"
 import useHotkey from "@/lib/hooks/use-hotkey"
 import { cn } from "@/lib/utils"
-import { ChatFile, MessageImage } from "@/types"
+import { ChatFile } from "@/types"
 import {
   IconCircleFilled,
   IconFileFilled,
@@ -16,9 +16,8 @@ import {
   IconX
 } from "@tabler/icons-react"
 import Image from "next/image"
-import { FC, useContext, useState } from "react"
+import { FC, useContext } from "react"
 import { Button } from "../ui/button"
-import { FilePreview } from "../ui/file-preview"
 import { WithTooltip } from "../ui/with-tooltip"
 import { ChatRetrievalSettings } from "./chat-retrieval-settings"
 
@@ -40,13 +39,12 @@ export const ChatFilesDisplay: FC<ChatFilesDisplayProps> = ({}) => {
     chatImages,
     setChatImages,
     setChatFiles,
-    setUseRetrieval
+    setUseRetrieval,
+    setShowFilePreview,
+    setFilePreviewItem,
+    setFilePreviewType
   } = useContext(ChatbotUIContext)
 
-  const [selectedFile, setSelectedFile] = useState<ChatFile | null>(null)
-  const [selectedImage, setSelectedImage] = useState<MessageImage | null>(null)
-  const [showPreview, setShowPreview] = useState(false)
-
   const messageImages = [
     ...newMessageImages.filter(
       image =>
@@ -74,30 +72,6 @@ export const ChatFilesDisplay: FC<ChatFilesDisplayProps> = ({}) => {
 
   return showFilesDisplay && combinedMessageFiles.length > 0 ? (
     <>
-      {showPreview && selectedImage && (
-        <FilePreview
-          type="image"
-          item={selectedImage}
-          isOpen={showPreview}
-          onOpenChange={(isOpen: boolean) => {
-            setShowPreview(isOpen)
-            setSelectedImage(null)
-          }}
-        />
-      )}
-
-      {showPreview && selectedFile && (
-        <FilePreview
-          type="file"
-          item={selectedFile}
-          isOpen={showPreview}
-          onOpenChange={(isOpen: boolean) => {
-            setShowPreview(isOpen)
-            setSelectedFile(null)
-          }}
-        />
-      )}
-
       <div className="space-y-2">
         <div className="flex w-full items-center justify-center">
           <Button
@@ -135,8 +109,9 @@ export const ChatFilesDisplay: FC<ChatFilesDisplayProps> = ({}) => {
                   width={56}
                   height={56}
                   onClick={() => {
-                    setSelectedImage(image)
-                    setShowPreview(true)
+                    setFilePreviewType("image")
+                    setFilePreviewItem(image)
+                    setShowFilePreview(true)
                   }}
                 />
 

components/chat/chat-helpers/index.ts

@@ -208,9 +208,12 @@ export const handleHostedChat = async (
 
   let draftMessages = await buildFinalMessages(payload, profile, chatImages)
 
-  let formattedMessages : any[] = []
+  let formattedMessages: any[] = []
   if (provider === "google") {
-    formattedMessages = await adaptMessagesForGoogleGemini(payload, draftMessages)
+    formattedMessages = await adaptMessagesForGoogleGemini(
+      payload,
+      draftMessages
+    )
   } else {
     formattedMessages = draftMessages
   }

components/messages/message.tsx

@@ -18,7 +18,6 @@ import { FC, useContext, useEffect, useRef, useState } from "react"
 import { ModelIcon } from "../models/model-icon"
 import { Button } from "../ui/button"
 import { FileIcon } from "../ui/file-icon"
-import { FilePreview } from "../ui/file-preview"
 import { TextareaAutosize } from "../ui/textarea-autosize"
 import { WithTooltip } from "../ui/with-tooltip"
 import { MessageActions } from "./message-actions"
@@ -59,7 +58,10 @@ export const Message: FC<MessageProps> = ({
     assistantImages,
     toolInUse,
     files,
-    models
+    models,
+    setShowFilePreview,
+    setFilePreviewItem,
+    setFilePreviewType
   } = useContext(ChatbotUIContext)
 
   const { handleSendMessage } = useChatHandler()
@@ -69,13 +71,6 @@ export const Message: FC<MessageProps> = ({
   const [isHovering, setIsHovering] = useState(false)
   const [editedMessage, setEditedMessage] = useState(message.content)
 
-  const [showImagePreview, setShowImagePreview] = useState(false)
-  const [selectedImage, setSelectedImage] = useState<MessageImage | null>(null)
-
-  const [showFileItemPreview, setShowFileItemPreview] = useState(false)
-  const [selectedFileItem, setSelectedFileItem] =
-    useState<Tables<"file_items"> | null>(null)
-
   const [viewSources, setViewSources] = useState(false)
 
   const handleCopy = () => {
@@ -358,8 +353,9 @@ export const Message: FC<MessageProps> = ({
                             key={index}
                             className="ml-8 mt-1.5 flex cursor-pointer items-center space-x-2 hover:opacity-50"
                             onClick={() => {
-                              setSelectedFileItem(fileItem)
-                              setShowFileItemPreview(true)
+                              setFilePreviewType("file_item")
+                              setFilePreviewItem(fileItem)
+                              setShowFilePreview(true)
                             }}
                           >
                             <div className="text-sm font-normal">
@@ -389,15 +385,15 @@ export const Message: FC<MessageProps> = ({
                 width={300}
                 height={300}
                 onClick={() => {
-                  setSelectedImage({
+                  setFilePreviewType("image")
+                  setFilePreviewItem({
                     messageId: message.id,
                     path,
                     base64: path.startsWith("data") ? path : item?.base64 || "",
                     url: path.startsWith("data") ? "" : item?.url || "",
                     file: null
                   })
-
-                  setShowImagePreview(true)
+                  setShowFilePreview(true)
                 }}
                 loading="lazy"
               />
@@ -416,30 +412,6 @@ export const Message: FC<MessageProps> = ({
           </div>
         )}
       </div>
-
-      {showImagePreview && selectedImage && (
-        <FilePreview
-          type="image"
-          item={selectedImage}
-          isOpen={showImagePreview}
-          onOpenChange={(isOpen: boolean) => {
-            setShowImagePreview(isOpen)
-            setSelectedImage(null)
-          }}
-        />
-      )}
-
-      {showFileItemPreview && selectedFileItem && (
-        <FilePreview
-          type="file_item"
-          item={selectedFileItem}
-          isOpen={showFileItemPreview}
-          onOpenChange={(isOpen: boolean) => {
-            setShowFileItemPreview(isOpen)
-            setSelectedFileItem(null)
-          }}
-        />
-      )}
     </div>
   )
 }

components/sidebar/right-sidebar.tsx

@@ -0,0 +1,34 @@
+import { ChatbotUIContext } from "@/context/context"
+import { IconX } from "@tabler/icons-react"
+import { FC, useContext } from "react"
+import { Button } from "../ui/button"
+import { FilePreview } from "../ui/file-preview"
+
+interface RightSidebarProps {}
+
+export const RightSidebar: FC<RightSidebarProps> = ({}) => {
+  const {
+    showFilePreview,
+    filePreviewItem,
+    filePreviewType,
+    setShowFilePreview
+  } = useContext(ChatbotUIContext)
+
+  if (!showFilePreview) return null
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex items-center justify-end p-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setShowFilePreview(false)}
+        >
+          <IconX />
+        </Button>
+      </div>
+
+      <FilePreview item={filePreviewItem} type={filePreviewType} />
+    </div>
+  )
+}