General frontend optimization

README.md

@@ -52,13 +52,13 @@ PINECONE_ENVIRONMENT=
 
 2. In `scripts/ingest-data.ts` replace `filePath` with `docs/{yourdocname}.pdf`
 
-3. Run the script `npm run ingest` to 'ingest' and embed your docs
+3. Run the script `pnpm run ingest` to 'ingest' and embed your docs
 
 4. Check Pinecone dashboard to verify your namespace and vectors have been added.
 
 ## Run the app
 
-Once you've verified that the embeddings and content have been successfully added to your Pinecone, you can run the app `npm run dev` to launch the local dev environment and then type a question in the chat interface.
+Once you've verified that the embeddings and content have been successfully added to your Pinecone, you can run the app `pnpm run dev` to launch the local dev environment and then type a question in the chat interface.
 
 ## Troubleshooting
 

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;
@@ -36,8 +37,6 @@ export default function Home() {
 
   const { messages, pending, history, pendingSourceDocs } = messageState;
 
-  console.log('messageState', messageState);
-
   const messageListRef = useRef<HTMLDivElement>(null);
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -49,6 +48,8 @@ export default function Home() {
   async function handleSubmit(e: any) {
     e.preventDefault();
 
+    setError(null);
+
     if (!query) {
       alert('Please input a question');
       return;
@@ -120,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 [
@@ -148,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>
@@ -208,7 +220,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>
@@ -234,7 +246,7 @@ export default function Home() {
                   <div className="p-5">
                     <Accordion type="single" collapsible className="flex-col">
                       {sourceDocs.map((doc, index) => (
-                        <div key={index}>
+                        <div key={`sourceDocs-${index}`}>
                           <AccordionItem value={`item-${index}`}>
                             <AccordionTrigger>
                               <h3>Source {index + 1}</h3>
@@ -296,9 +308,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;
 }