Merge branch 'main' into feat/add-directory-loader

.env.example

@@ -1,6 +1,6 @@
 OPENAI_API_KEY=
 
-# Update these with your Supabase details from your project settings > API
+# Update these with your Supabase details from your project settings > API and dashboard settings
 PINECONE_API_KEY=
 PINECONE_ENVIRONMENT=
-
+PINECONE_INDEX_NAME=

package.json

@@ -2,6 +2,9 @@
   "name": "gpt4-langchain-pdf-chatbot",
   "version": "0.1.0",
   "private": true,
+  "engines": {
+    "node": ">=18"
+  },
   "license": "MIT",
   "author": "Mayooear<twitter:@mayowaoshin>",
   "type": "module",

pages/index.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect, useMemo } from 'react';
+import { useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import Layout from '@/components/layout';
 import styles from '@/styles/Home.module.css';
 import { Message } from '@/types/chat';
@@ -18,6 +18,7 @@ export default function Home() {
   const [query, setQuery] = useState<string>('');
   const [loading, setLoading] = useState<boolean>(false);
   const [sourceDocs, setSourceDocs] = useState<Document[]>([]);
+  const [error, setError] = useState<string | null>(null);
   const [messageState, setMessageState] = useState<{
     messages: Message[];
     pending?: string;
@@ -47,6 +48,8 @@ export default function Home() {
   async function handleSubmit(e: any) {
     e.preventDefault();
 
+    setError(null);
+
     if (!query) {
       alert('Please input a question');
       return;
@@ -118,18 +121,22 @@ export default function Home() {
       });
     } catch (error) {
       setLoading(false);
+      setError('An error occurred while fetching the data. Please try again.');
       console.log('error', error);
     }
   }
 
   //prevent empty submissions
-  const handleEnter = (e: any) => {
-    if (e.key === 'Enter' && query) {
-      handleSubmit(e);
-    } else if (e.key == 'Enter') {
-      e.preventDefault();
-    }
-  };
+  const handleEnter = useCallback(
+    (e: any) => {
+      if (e.key === 'Enter' && query) {
+        handleSubmit(e);
+      } else if (e.key == 'Enter') {
+        e.preventDefault();
+      }
+    },
+    [query],
+  );
 
   const chatMessages = useMemo(() => {
     return [
@@ -146,6 +153,13 @@ export default function Home() {
     ];
   }, [messages, pending, pendingSourceDocs]);
 
+  //scroll to bottom of chat
+  useEffect(() => {
+    if (messageListRef.current) {
+      messageListRef.current.scrollTop = messageListRef.current.scrollHeight;
+    }
+  }, [chatMessages]);
+
   return (
     <>
       <Layout>
@@ -209,7 +223,7 @@ export default function Home() {
                             className="flex-col"
                           >
                             {message.sourceDocs.map((doc, index) => (
-                              <div key={`sourceDoc-${index}`}>
+                              <div key={`messageSourceDocs-${index}`}>
                                 <AccordionItem value={`item-${index}`}>
                                   <AccordionTrigger>
                                     <h3>Source {index + 1}</h3>
@@ -297,9 +311,14 @@ export default function Home() {
                 </form>
               </div>
             </div>
+            {error && (
+              <div className="border border-red-400 rounded-md p-4">
+                <p className="text-red-500">{error}</p>
+              </div>
+            )}
           </main>
         </div>
-        <footer className="m-auto">
+        <footer className="m-auto p-4">
           <a href="https://twitter.com/mayowaoshin">
             Powered by LangChainAI. Demo built by Mayo (Twitter: @mayowaoshin).
           </a>

styles/Home.module.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  padding: 2rem;
+  padding: 1rem;
 }
 
 .header {
@@ -184,7 +184,7 @@
   justify-content: center;
   align-items: center;
   position: relative;
-  padding: 2rem 0;
+  padding: 1rem 0;
   flex-direction: column;
 }