feat(image-search): handle chat history

README.md

@@ -109,4 +109,4 @@ Perplexica is built on the idea that AI and large language models should be easy
 
 If you have any questions or feedback, please feel free to reach out to us. You can create an issue on GitHub or join our Discord server. There, you can connect with other users, share your experiences and reviews, and receive more personalized help. [Click here](https://discord.gg/EFwsmQDgAu) to join the Discord server. To discuss matters outside of regular support, feel free to contact me on Discord at `itzcrazykns`.
 
-Thank you for exploring Perplexica, the AI-powered search engine designed to enhance your search experience. We are constantly working to improve Perplexica and expand its capabilities. We value your feedback and contributions which help us make Perplexica even better. Don't forget to check back for updates and new features!
+Thank you for exploring Perplexica, the AI-powered search engine designed to enhance your search experience. We are constantly working to improve Perplexica and expand its capabilities. We value your feedback and contributions which help us make Perplexica even better. Don't forget to check back for updates and new features!

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,
                 }),
               },
             );