general frontend optimization

mayooear · Mar 23, 2023 · 3472219 · 3472219
1 parent fccd3b0
commit 3472219
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 15 deletions.
diff --git a/pages/index.tsx b/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>
@@ -164,6 +176,7 @@ export default function Home() {
                   if (message.type === 'apiMessage') {
                     icon = (
                       <Image
+                        key={`text-${index}`}
                         src="/bot-image.png"
                         alt="AI"
                         width="40"
@@ -182,6 +195,7 @@ export default function Home() {
                         height="30"
                         className={styles.usericon}
                         priority
+                        key={`text-${index}`}
                       />
                     );
                     // The latest message sent by the user will be animated while waiting for a response
@@ -208,7 +222,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 +248,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 +310,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>

diff --git a/styles/Home.module.css b/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;
 }