langchain retrievers

samarthraj · Apr 10, 2023 · 7a6d82f · 7a6d82f
1 parent 5bd2a3b
commit 7a6d82f
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 175 deletions.
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "@radix-ui/react-accordion": "^1.1.1",
     "clsx": "^1.2.1",
     "dotenv": "^16.0.3",
-    "langchain": "0.0.41",
+    "langchain": "^0.0.51",
     "lucide-react": "^0.125.0",
     "next": "13.2.3",
     "pdf-parse": "1.1.1",

diff --git a/pages/api/chat.ts b/pages/api/chat.ts
@@ -11,54 +11,45 @@ export default async function handler(
 ) {
   const { question, history } = req.body;
 
+  console.log('question', question);
+
+  //only accept post requests
+  if (req.method !== 'POST') {
+    res.status(405).json({ error: 'Method not allowed' });
+    return;
+  }
+
   if (!question) {
     return res.status(400).json({ message: 'No question in the request' });
   }
   // OpenAI recommends replacing newlines with spaces for best results
   const sanitizedQuestion = question.trim().replaceAll('\n', ' ');
 
-  const index = pinecone.Index(PINECONE_INDEX_NAME);
-
-  /* create vectorstore*/
-  const vectorStore = await PineconeStore.fromExistingIndex(
-    new OpenAIEmbeddings({}),
-    {
-      pineconeIndex: index,
-      textKey: 'text',
-      namespace: PINECONE_NAME_SPACE,
-    },
-  );
-
-  res.writeHead(200, {
-    'Content-Type': 'text/event-stream',
-    'Cache-Control': 'no-cache, no-transform',
-    Connection: 'keep-alive',
-  });
-
-  const sendData = (data: string) => {
-    res.write(`data: ${data}\n\n`);
-  };
-
-  sendData(JSON.stringify({ data: '' }));
-
-  //create chain
-  const chain = makeChain(vectorStore, (token: string) => {
-    sendData(JSON.stringify({ data: token }));
-  });
-
   try {
-    //Ask a question
+    const index = pinecone.Index(PINECONE_INDEX_NAME);
+
+    /* create vectorstore*/
+    const vectorStore = await PineconeStore.fromExistingIndex(
+      new OpenAIEmbeddings({}),
+      {
+        pineconeIndex: index,
+        textKey: 'text',
+        namespace: PINECONE_NAME_SPACE, //namespace comes from your config folder
+      },
+    );
+
+    //create chain
+    const chain = makeChain(vectorStore);
+    //Ask a question using chat history
     const response = await chain.call({
       question: sanitizedQuestion,
       chat_history: history || [],
     });
 
     console.log('response', response);
-    sendData(JSON.stringify({ sourceDocs: response.sourceDocuments }));
-  } catch (error) {
+    res.status(200).json(response);
+  } catch (error: any) {
     console.log('error', error);
-  } finally {
-    sendData('[DONE]');
-    res.end();
+    res.status(500).json({ error: error.message || 'Something went wrong' });
   }
 }
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -17,7 +17,6 @@ import {
 export default function Home() {
   const [query, setQuery] = useState<string>('');
   const [loading, setLoading] = useState<boolean>(false);
-  const [sourceDocs, setSourceDocs] = useState<Document[]>([]);
   const [messageState, setMessageState] = useState<{
     messages: Message[];
     pending?: string;
@@ -31,10 +30,10 @@ export default function Home() {
       },
     ],
     history: [],
-    pendingSourceDocs: [],
+    sourceDocs: [],
   });
 
-  const { messages, pending, history, pendingSourceDocs } = messageState;
+  const { messages, pending, history, sourceDocs } = messageState;
 
   const messageListRef = useRef<HTMLDivElement>(null);
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
@@ -63,17 +62,13 @@ export default function Home() {
           message: question,
         },
       ],
-      pending: undefined,
     }));
 
     setLoading(true);
     setQuery('');
-    setMessageState((state) => ({ ...state, pending: '' }));
-
-    const ctrl = new AbortController();
 
     try {
-      fetchEventSource('/api/chat', {
+      const response = await fetch('/api/chat', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -82,40 +77,37 @@ export default function Home() {
           question,
           history,
         }),
-        signal: ctrl.signal,
-        onmessage: (event) => {
-          if (event.data === '[DONE]') {
-            setMessageState((state) => ({
-              history: [...state.history, [question, state.pending ?? '']],
-              messages: [
-                ...state.messages,
-                {
-                  type: 'apiMessage',
-                  message: state.pending ?? '',
-                  sourceDocs: state.pendingSourceDocs,
-                },
-              ],
-              pending: undefined,
-              pendingSourceDocs: undefined,
-            }));
-            setLoading(false);
-            ctrl.abort();
-          } else {
-            const data = JSON.parse(event.data);
-            if (data.sourceDocs) {
-              setMessageState((state) => ({
-                ...state,
-                pendingSourceDocs: data.sourceDocs,
-              }));
-            } else {
-              setMessageState((state) => ({
-                ...state,
-                pending: (state.pending ?? '') + data.data,
-              }));
-            }
-          }
-        },
       });
+      const data = await response.json();
+      console.log('data', data);
+
+      if (data.error) {
+        toast({
+          title: 'Something went wrong',
+          description: data.error,
+          variant: 'destructive',
+        });
+      } else {
+        setMessageState((state) => ({
+          ...state,
+          messages: [
+            ...state.messages,
+            {
+              type: 'apiMessage',
+              message: data.text,
+              sourceDocs: data.sourceDocuments,
+            },
+          ],
+          history: [...state.history, [question, data.text]],
+          // sourceDocs: data.sourceDocs,
+        }));
+      }
+      console.log('messageState', messageState);
+
+      setLoading(false);
+
+      //scroll to bottom
+      messageListRef.current?.scrollTo(0, messageListRef.current.scrollHeight);
     } catch (error) {
       setLoading(false);
       console.log('error', error);
@@ -131,21 +123,6 @@ export default function Home() {
     }
   };
 
-  const chatMessages = useMemo(() => {
-    return [
-      ...messages,
-      ...(pending
-        ? [
-            {
-              type: 'apiMessage',
-              message: pending,
-              sourceDocs: pendingSourceDocs,
-            },
-          ]
-        : []),
-    ];
-  }, [messages, pending, pendingSourceDocs]);
-
   return (
     <>
       <Layout>
@@ -156,7 +133,7 @@ export default function Home() {
           <main className={styles.main}>
             <div className={styles.cloud}>
               <div ref={messageListRef} className={styles.messagelist}>
-                {chatMessages.map((message, index) => {
+                {messages.map((message, index) => {
                   let icon;
                   let className;
                   if (message.type === 'apiMessage') {
@@ -184,7 +161,7 @@ export default function Home() {
                     );
                     // The latest message sent by the user will be animated while waiting for a response
                     className =
-                      loading && index === chatMessages.length - 1
+                      loading && index === messages.length - 1
                         ? styles.usermessagewaiting
                         : styles.usermessage;
                   }