From 5df3c5ad8cac94f94cbc5d3a9d48682722af7998 Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <kushagra20103@gmail.com>
Date: Sun, 28 Apr 2024 11:15:28 +0530
Subject: [PATCH] feat(image-search): handle chat history

---
 README.md                      |  2 +-
 src/routes/images.ts           | 11 ++++++++++-
 ui/components/MessageBox.tsx   |  5 ++++-
 ui/components/SearchImages.tsx | 11 +++++++++--
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index eee0b16..a5e9b5c 100644
--- a/README.md
+++ b/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!
\ No newline at end of file
+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!
diff --git a/src/routes/images.ts b/src/routes/images.ts
index 97f0b31..45a4307 100644
--- a/src/routes/images.ts
+++ b/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();
diff --git a/ui/components/MessageBox.tsx b/ui/components/MessageBox.tsx
index 9018166..cb9da14 100644
--- a/ui/components/MessageBox.tsx
+++ b/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} />
diff --git a/ui/components/SearchImages.tsx b/ui/components/SearchImages.tsx
index 022c90d..1f94963 100644
--- a/ui/components/SearchImages.tsx
+++ b/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,
                 }),
               },
             );