update frontend

UBC-CIC · Aug 27, 2024 · 410efc5 · 410efc5
1 parent 167a2ce
commit 410efc5
Show file tree

Hide file tree

Showing 12 changed files with 1,729 additions and 1,429 deletions.
diff --git a/backend/lib/life-cycle-analysis-chat.ts b/backend/lib/life-cycle-analysis-chat.ts
@@ -491,7 +491,7 @@ export class LifeCycleAnalysisChatStack extends Stack {
           VITE_API_ENDPOINT: `https://${api.restApiId}.execute-api.${this.region}.${cdk.Aws.URL_SUFFIX}/dev`,
           VITE_USER_POOL_ID: userPool.userPoolId,
           VITE_USER_POOL_CLIENT_ID: userPoolClient.userPoolClientId,
-          VITE_APP_NAME: 'Life Cycle Analysis Chat',
+          VITE_APP_NAME: 'Life Cycle Chat',
           VITE_API_NAME: `${api.restApiName}`
         },
       });

diff --git a/frontend/index.html b/frontend/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Life Cycle Analysis Chat</title>
+    <title>Life Cycle Chat</title>
   </head>
   <body>
     <div id="root" className="flex flex-col min-h-screen"></div>

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/public/github.svg b/frontend/public/github.svg
diff --git a/frontend/src/components/ChatMessages.tsx b/frontend/src/components/ChatMessages.tsx
@@ -61,7 +61,7 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
                 : "block w-full p-4 pl-4 text-sm text-gray-900 border border-gray-200 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
             }
             placeholder={
-              "Ask " + conversation.document.filename + " anything..."
+              "Ask " + (conversation.document.filename === "ALL_DOCUMENTS" ? "All Documents" : conversation.document.filename) + " anything..."
             }
           />
           {messageStatus === "idle" && (

diff --git a/frontend/src/components/ChatSidebar.tsx b/frontend/src/components/ChatSidebar.tsx
@@ -63,35 +63,37 @@ const ChatSidebar: React.FC<ChatSidebarProps> = ({
             Start a new conversation
           </button>
         )}
-        {conversation &&
-          conversation.document.conversations.map((conversation, i) => (
-            <div key={i}>
-              {params.conversationid === conversation.conversationid && (
-                <button
-                  disabled={
-                    params.conversationid === conversation.conversationid
-                  }
-                  className="bg-gray-500 text-white w-full inline-flex items-center mt-2 px-4 py-2.5 border border-gray-100 rounded"
-                >
-                  <ChatBubbleLeftRightIcon className="w-4 h-4 mr-2" />
-                  {getDateTime(conversation.created)}
-                </button>
-              )}
-              {params.conversationid !== conversation.conversationid && (
-                <button
-                  id={conversation.conversationid}
-                  onClick={switchConversation}
-                  disabled={
-                    params.conversationid === conversation.conversationid
-                  }
-                  className="bg-gray-50 w-full inline-flex items-center mt-2 px-4 py-2.5 border border-gray-100 rounded hover:bg-gray-200"
-                >
-                  <ChatBubbleLeftRightIcon className="w-4 h-4 mr-2" />
-                  {getDateTime(conversation.created)}
-                </button>
-              )}
-            </div>
-          ))}
+        <div className="h-96 overflow-y-auto">
+          {conversation &&
+            conversation.document.conversations.map((conversation, i) => (
+              <div key={i}>
+                {params.conversationid === conversation.conversationid && (
+                  <button
+                    disabled={
+                      params.conversationid === conversation.conversationid
+                    }
+                    className="bg-gray-500 text-white w-full inline-flex items-center mt-2 px-4 py-2.5 border border-gray-100 rounded"
+                  >
+                    <ChatBubbleLeftRightIcon className="w-4 h-4 mr-2" />
+                    {getDateTime(conversation.created)}
+                  </button>
+                )}
+                {params.conversationid !== conversation.conversationid && (
+                  <button
+                    id={conversation.conversationid}
+                    onClick={switchConversation}
+                    disabled={
+                      params.conversationid === conversation.conversationid
+                    }
+                    className="bg-gray-50 w-full inline-flex items-center mt-2 px-4 py-2.5 border border-gray-100 rounded hover:bg-gray-200"
+                  >
+                    <ChatBubbleLeftRightIcon className="w-4 h-4 mr-2" />
+                    {getDateTime(conversation.created)}
+                  </button>
+                )}
+              </div>
+            ))}
+        </div>
       </div>
     </div>
   );

diff --git a/frontend/src/components/DocumentDetail.tsx b/frontend/src/components/DocumentDetail.tsx
@@ -19,6 +19,8 @@ interface DocumentDetailProps {
   onDocumentDeleted?: (document?: Document) => void;
 }
 
+const ALL_DOCUMENTS = "ALL_DOCUMENTS";
+
 const DocumentDetail: React.FC<DocumentDetailProps> = ({document, onDocumentDeleted}) => {
   const navigate = useNavigate();
   const [deleteStatus, setDeleteStatus] = useState<string>("idle");
@@ -39,7 +41,7 @@ const DocumentDetail: React.FC<DocumentDetailProps> = ({document, onDocumentDele
   return (
     <>
       <h3 className="text-center mb-3 text-lg font-bold tracking-tight text-gray-900">
-        {document.filename}
+        {document.filename === ALL_DOCUMENTS ? "All Documents" : document.filename}
       </h3>
       <div className="flex flex-col space-y-2">
         <div className="inline-flex items-center">
@@ -78,14 +80,16 @@ const DocumentDetail: React.FC<DocumentDetailProps> = ({document, onDocumentDele
                 Ready to chat
               </span>
             </div>
-            <div className="flex flex-row">
-              <button
-                onClick={deleteDocument}
-                className="text-gray-700 hover:bg-gray-700 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg p-2"
-              >
-                <TrashIcon className={`"w-4 h-4 mr-1 ${deleteStatus === "deleting" ? "animate-spin" : ""}`}/>
-              </button>
-            </div>
+            {document.filename !== ALL_DOCUMENTS && 
+              <div className="flex flex-row">
+                <button
+                  onClick={deleteDocument}
+                  className="text-gray-700 hover:bg-gray-700 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg p-2"
+                >
+                  <TrashIcon className={`"w-4 h-4 mr-1 ${deleteStatus === "deleting" ? "animate-spin" : ""}`}/>
+                </button>
+              </div>
+            }
           </div>
         )}
       </div>

diff --git a/frontend/src/components/DocumentList.tsx b/frontend/src/components/DocumentList.tsx
@@ -6,6 +6,8 @@ import { ArrowPathRoundedSquareIcon } from "@heroicons/react/24/outline";
 import { Document } from "../common/types";
 import Loading from "../../public/loading-grid.svg";
 
+const ALL_DOCUMENTS = "ALL_DOCUMENTS";
+
 const DocumentList: React.FC = () => {
   const [documents, setDocuments] = useState<Document[]>([]);
   const [listStatus, setListStatus] = useState<string>("idle");
@@ -14,7 +16,14 @@ const DocumentList: React.FC = () => {
     setListStatus("loading");
     const documents = await API.get(import.meta.env.VITE_API_NAME, "/doc", {});
     setListStatus("idle");
-    setDocuments(documents);
+
+    const sortedDocuments = documents.sort((a: Document, b:Document) => {
+      if (a.filename === ALL_DOCUMENTS) return -1;
+      if (b.filename === ALL_DOCUMENTS) return 1;
+      return 0;
+    });
+
+    setDocuments(sortedDocuments);
   };
 
   useEffect(() => {
@@ -24,7 +33,7 @@ const DocumentList: React.FC = () => {
   return (
     <div>
       <div className="flex justify-between pt-6 pb-4">
-        <h2 className="text-2xl font-bold">My documents</h2>
+        <h2 className="text-2xl font-bold text-gray-800">My documents</h2>
         <button
           onClick={fetchData}
           type="button"
@@ -37,9 +46,8 @@ const DocumentList: React.FC = () => {
           />
         </button>
       </div>
-      <div className="grid grid-cols-3 gap-4">
-        {documents &&
-          documents.length > 0 &&
+      <div className="max-h-80 grid grid-cols-3 gap-4 overflow-y-auto">
+        {documents && documents.length > 0 &&
           documents.map((document: Document) => (
             <Link
               to={`/doc/${document.documentid}/${document.conversations[0].conversationid}/`}
@@ -48,10 +56,10 @@ const DocumentList: React.FC = () => {
             >
               <DocumentDetail document={document} onDocumentDeleted={fetchData}/>
             </Link>
-          ))}
+        ))}
       </div>
       {listStatus === "idle" && documents.length === 0 && (
-        <div className="flex flex-col items-center mt-4">
+        <div className="flex flex-col items-center mt-4 text-gray-800">
           <p className="font-bold text-lg">There's nothing here yet...</p>
           <p className="mt-1">Upload your first document to get started!</p>
         </div>

diff --git a/frontend/src/components/DocumentUploader.tsx b/frontend/src/components/DocumentUploader.tsx
@@ -59,7 +59,7 @@ const DocumentUploader: React.FC<DocumentUploaderProps> = ({onDocumentUploaded})
 
   return (
     <div>
-      <h2 className="text-2xl font-bold pb-4">Add document</h2>
+      <h2 className="text-2xl font-bold pb-4 text-gray-800">Add document</h2>
       {inputStatus === "idle" && (
         <div className="flex items-center justify-center w-full">
           <label
@@ -134,7 +134,7 @@ const DocumentUploader: React.FC<DocumentUploaderProps> = ({onDocumentUploaded})
                   <button
                     onClick={uploadFile}
                     type="button"
-                    className="inline-flex items-center bg-violet-900 text-white border border-gray-300 focus:outline-none hover:bg-violet-700 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg px-3 py-2 text-sm mr-2 mb-2 "
+                    className="inline-flex items-center bg-teal-900 text-white border border-gray-300 focus:outline-none hover:bg-teal-700 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg px-3 py-2 text-sm mr-2 mb-2 "
                   >
                     <CloudArrowUpIcon className="w-5 h-5 mr-1.5" />
                     Upload document
@@ -145,7 +145,7 @@ const DocumentUploader: React.FC<DocumentUploaderProps> = ({onDocumentUploaded})
                     disabled
                     onClick={uploadFile}
                     type="button"
-                    className="inline-flex items-center bg-violet-900 text-white border border-gray-300 focus:outline-none hover:bg-violet-700 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg px-3 py-2 text-sm mr-2 mb-2 "
+                    className="inline-flex items-center bg-teal-900 text-white border border-gray-300 focus:outline-none hover:bg-teal-700 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg px-3 py-2 text-sm mr-2 mb-2 "
                   >
                     <svg
                       aria-hidden="true"
@@ -172,7 +172,7 @@ const DocumentUploader: React.FC<DocumentUploaderProps> = ({onDocumentUploaded})
                     disabled
                     onClick={uploadFile}
                     type="button"
-                    className="inline-flex items-center bg-violet-900 text-white border border-gray-300 focus:outline-none hover:bg-violet-700 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg px-3 py-2 text-sm mr-2 mb-2 "
+                    className="inline-flex items-center bg-teal-900 text-white border border-gray-300 focus:outline-none hover:bg-teal-700 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg px-3 py-2 text-sm mr-2 mb-2 "
                   >
                     <CheckCircleIcon className="w-5 h-5 mr-1.5" />
                     Upload successful!

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
@@ -3,21 +3,23 @@ import GitHub from "../../public/github.svg";
 
 const Footer: React.FC = () => {
   return (
-    <div className="bg-gray-100 mt-auto">
+    <div className="bg-teal-900 mt-auto">
       <footer className="container">
-        <div className=" flex flex-row justify-between py-3 text-sm">
-          <div className="inline-flex items-center">
+        <div className=" flex flex-row justify-between py-3 text-sm text-white">
+          <div className="inline-flex items-center hover:underline">
             <CloudIcon className="w-5 h-5 mr-1.5" />
-            Powered by Amazon Web Services
+            <a href="https://cic.ubc.ca">
+              UBC Cloud Innovation Center | Powered by Amazon Web Services
+            </a>
           </div>
           <div className="inline-flex items-center hover:underline underline-offset-2">
             <img
               src={GitHub}
-              alt="React Logo"
+              alt="Github Logo"
               width={20}
               className="mr-1.5 py-2 mx-2"
             />
-            <a href="https://github.com/aws-samples/serverless-pdf-chat">
+            <a href="https://github.com/UBC-CIC/LCI-forestry">
               Source code on GitHub
             </a>
           </div>

diff --git a/frontend/src/components/Navigation.tsx b/frontend/src/components/Navigation.tsx
@@ -18,28 +18,28 @@ const Navigation: React.FC<NavigationProps> = ({
   handleSignOutClick,
 }: NavigationProps) => {
   return (
-    <nav className="bg-violet-900">
+    <nav>
       <div className="container flex flex-wrap items-center justify-between py-3">
         <Link
           to="/"
-          className="inline-flex items-center self-center text-2xl font-semibold whitespace-nowrap text-white"
+          className="inline-flex items-center self-center text-4xl font-semibold whitespace-nowrap text-teal-900"
         >
-          <ChatBubbleLeftRightIcon className="w-6 h-6 mr-1.5" />
+          <ChatBubbleLeftRightIcon className="w-8 h-8 mr-1.5" />
           {import.meta.env.VITE_APP_NAME}
         </Link>
         <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
           <div className="relative ml-3">
             <Menu>
-              <Menu.Button className="text-center inline-flex items-center text-white text-sm underline-offset-2 hover:underline">
+              <Menu.Button className="text-center inline-flex items-center text-teal-900 text-sm underline-offset-2 hover:underline">
                 {userInfo?.attributes?.email}
-                <ChevronDownIcon className="w-3 h-3 ml-1 text-white" />
+                <ChevronDownIcon className="w-3 h-3 ml-1 text-teal-900" />
               </Menu.Button>
               <Menu.Items className="absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                 <div className="px-1 py-1 ">
                   <Menu.Item>
                     <button
                       onClick={handleSignOutClick}
-                      className="group w-full inline-flex items-center rounded-md px-2 py-2 text-sm underline-offset-2 hover:underline"
+                      className="group w-full inline-flex items-center rounded-md px-2 py-2 text-sm underline-offset-2 hover:underline text-teal-900"
                     >
                       <ArrowLeftOnRectangleIcon className="w-4 h-4 mr-1" />
                       Sign Out

diff --git a/frontend/src/routes/chat.tsx b/frontend/src/routes/chat.tsx
@@ -105,7 +105,7 @@ const Document: React.FC = () => {
         </div>
       )}
       {conversation && (
-        <div className="grid grid-cols-12 border border-gray-200 rounded-lg">
+        <div className="grid grid-cols-12 border border-gray-200 rounded-lg h-[700px]">
           <ChatSidebar
             conversation={conversation}
             params={params}