feat(image-search): handle chat history

src/routes/images.ts

@@ -3,12 +3,21 @@ import handleImageSearch from '../agents/imageSearchAgent';
 import { BaseChatModel } from '@langchain/core/language_models/chat_models';
 import { getAvailableProviders } from '../lib/providers';
 import { getChatModel, getChatModelProvider } from '../config';
+import { HumanMessage, AIMessage } from '@langchain/core/messages';
 
 const router = express.Router();
 
 router.post('/', async (req, res) => {
   try {
-    const { query, chat_history } = req.body;
+    let { query, chat_history } = req.body;
+
+    chat_history = chat_history.map((msg: any) => {
+      if (msg.role === 'user') {
+        return new HumanMessage(msg.content);
+      } else if (msg.role === 'assistant') {
+        return new AIMessage(msg.content);
+      }
+    });
 
     const models = await getAvailableProviders();
     const provider = getChatModelProvider();

ui/components/MessageBox.tsx

@@ -116,7 +116,10 @@ const MessageBox = ({
             </div>
           </div>
           <div className="lg:sticky lg:top-20 flex flex-col items-center space-y-3 w-full lg:w-3/12 z-30 h-full pb-4">
-            <SearchImages query={history[messageIndex - 1].content} />
+            <SearchImages
+              query={history[messageIndex - 1].content}
+              chat_history={history.slice(0, messageIndex - 1)}
+            />
             <div className="border border-dashed border-[#1C1C1C] px-4 py-2 flex flex-row items-center justify-between rounded-lg text-white text-sm w-full">
               <div className="flex flex-row items-center space-x-2">
                 <VideoIcon size={17} />

ui/components/SearchImages.tsx

@@ -3,6 +3,7 @@ import { ImagesIcon, PlusIcon } from 'lucide-react';
 import { useState } from 'react';
 import Lightbox from 'yet-another-react-lightbox';
 import 'yet-another-react-lightbox/styles.css';
+import { Message } from './ChatWindow';
 
 type Image = {
   url: string;
@@ -10,7 +11,13 @@ type Image = {
   title: string;
 };
 
-const SearchImages = ({ query }: { query: string }) => {
+const SearchImages = ({
+  query,
+  chat_history,
+}: {
+  query: string;
+  chat_history: Message[];
+}) => {
   const [images, setImages] = useState<Image[] | null>(null);
   const [loading, setLoading] = useState(false);
   const [open, setOpen] = useState(false);
@@ -31,7 +38,7 @@ const SearchImages = ({ query }: { query: string }) => {
                 },
                 body: JSON.stringify({
                   query: query,
-                  chat_history: [],
+                  chat_history: chat_history,
                 }),
               },
             );