Spaces:

SmartRetrieval
/

Smart-Retrieval-Demo-API

Build error

App Files Files Community

khronoz commited on Jan 23, 2024

Commit

af5678c

1 Parent(s): 7d16a49

Moved 'Header' & 'Main' component to layout

Browse files

Files changed (9) hide show

frontend/app/about/page.tsx +17 -23
frontend/app/chat/page.tsx +1 -6
frontend/app/components/header.tsx +1 -1
frontend/app/layout.tsx +8 -1
frontend/app/page.tsx +34 -39
frontend/app/query/page.tsx +1 -6
frontend/app/search/page.tsx +1 -6
frontend/app/sign-in/page.tsx +25 -30
frontend/app/status/page.tsx +22 -27

frontend/app/about/page.tsx CHANGED Viewed

@@ -1,32 +1,26 @@
 "use client";
-import Header from "@/app/components/header";
-import Main from "@/app/components/ui/main-container";
 export default function About() {
   return (
-    <Main>
-      <Header />
-      <div className="rounded-xl shadow-xl p-4 mb-8 max-w-5xl w-full">
-        <div className="max-w-2xl mx-auto p-4">
-          <div className="bg-gradient-to-r from-blue-500 to-indigo-500 text-white p-8 rounded-lg shadow-lg">
-            <h1 className="text-2xl md:text-4xl font-bold mb-4">About Smart Retrieval</h1>
-            <p className="text-l mb-4">
-              Welcome to Smart Retrieval, your go-to platform for efficient and streamlined information retrieval,
-              especially in the realm of legal and compliance documents.
-            </p>
-            <p className="text-l mb-4">
-              Our mission is to enhance user experiences at JTC by addressing key challenges such as manual search
-              inefficiencies and rigid file naming conventions.
-            </p>
-            <p className="text-l mb-4">
-              With cutting-edge technology, including Large Language Models (LLM) like GPT, BERT, and advanced chatbot
-              integration, we aim to revolutionize the way JTC employees access and comprehend crucial documents.
-            </p>
-          </div>
         </div>
       </div>
-    </Main>
   );
 }

 "use client";
 export default function About() {
   return (
+    <div className="rounded-xl shadow-xl p-4 mb-8 max-w-5xl w-full">
+      <div className="max-w-2xl mx-auto p-4">
+        <div className="bg-gradient-to-r from-blue-500 to-indigo-500 text-white p-8 rounded-lg shadow-lg">
+          <h1 className="text-2xl md:text-4xl font-bold mb-4">About Smart Retrieval</h1>
+          <p className="text-l mb-4">
+            Welcome to Smart Retrieval, your go-to platform for efficient and streamlined information retrieval,
+            especially in the realm of legal and compliance documents.
+          </p>
+          <p className="text-l mb-4">
+            Our mission is to enhance user experiences at JTC by addressing key challenges such as manual search
+            inefficiencies and rigid file naming conventions.
+          </p>
+          <p className="text-l mb-4">
+            With cutting-edge technology, including Large Language Models (LLM) like GPT, BERT, and advanced chatbot
+            integration, we aim to revolutionize the way JTC employees access and comprehend crucial documents.
+          </p>
         </div>
       </div>
+    </div>
   );
 }

frontend/app/chat/page.tsx CHANGED Viewed

@@ -1,15 +1,10 @@
 "use client";
-import Header from "@/app/components/header";
-import Main from "@/app/components/ui/main-container";
 import ChatSection from "@/app/components/chat-section";
 export default function Chat() {
   return (
-    <Main>
-      <Header />
-      <ChatSection />
-    </Main>
   );
 }

 "use client";
 import ChatSection from "@/app/components/chat-section";
 export default function Chat() {
   return (
+    <ChatSection />
   );
 }

frontend/app/components/header.tsx CHANGED Viewed

@@ -257,7 +257,7 @@ export default function Header() {
             {/* Status Page Button/Indicator */}
             <span className='flex items-center mr-1'>API:</span>
             <NavLink href='/status'>
-              <div className="flex items-center mr-2 text-l transition duration-300 ease-in-out transform hover:scale-125">
                 {apiError ? (
                   <span role="img" aria-label="red circle">
                     🔴

             {/* Status Page Button/Indicator */}
             <span className='flex items-center mr-1'>API:</span>
             <NavLink href='/status'>
+              <div className="flex items-center mr-2 text-xl transition duration-300 ease-in-out transform hover:scale-125">
                 {apiError ? (
                   <span role="img" aria-label="red circle">
                     🔴

frontend/app/layout.tsx CHANGED Viewed

@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { Providers } from './providers'
 const inter = Inter({ subsets: ["latin"] });
@@ -27,7 +29,12 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <Providers>{children}</Providers>
       </body>
     </html>
   );

 import { Inter } from "next/font/google";
 import "./globals.css";
 import { Providers } from './providers'
+import Header from "@/app/components/header";
+import Main from "@/app/components/ui/main-container";
 const inter = Inter({ subsets: ["latin"] });
   return (
     <html lang="en">
       <body className={inter.className}>
+        <Providers>
+          <Main>
+            <Header />
+            {children}
+          </Main>
+        </Providers>
       </body>
     </html>
   );

frontend/app/page.tsx CHANGED Viewed

@@ -1,54 +1,49 @@
 "use client";
-import Header from "@/app/components/header";
 import Image from 'next/image';
 import Link from 'next/link';
-import { useState } from 'react'
-import { IconSpinner } from '@/app/components/ui/icons'
-import logo from '../public/smart-retrieval-logo.webp'
-import Main from "@/app/components/ui/main-container";
 export default function Home() {
   const [isLoading, setIsLoading] = useState(false);
   return (
-    <Main>
-      <Header />
-      <div className="rounded-xl shadow-xl p-4 mb-8 max-w-5xl w-full">
-        <div className="max-w-2xl mx-auto p-4 text-center">
-          <div className="flex flex-col items-center mb-4 bg-gradient-to-r from-blue-500 to-indigo-500 text-white p-8 rounded-lg shadow-lg">
-            <div className="flex flex-col md:flex-row items-center md:items-start">
-              <Image
-                src={logo}
-                alt="Smart Retrieval Logo"
-                width={150}
-                height={150}
-                priority
-                className="rounded-lg mb-4 md:mb-0 md:mr-4"
-              />
-              <div className='flex flex-col mt-4'>
-                <h1 className="text-4xl font-bold mb-2 md:text-5xl">Smart Retrieval</h1>
-                <p className="text-lg md:text-xl text-gray-200">
-                  Your intelligent solution for quick and accurate information retrieval.
-                </p>
-              </div>
             </div>
           </div>
-          <div className="flex flex-col mt-8 text-center items-center max-w-full">
-            <p id='get-started-paragraph' className="text-xl text-gray-700 dark:text-gray-200 mb-4">
-              Experience the power of Smart Retrieval today!
-            </p>
-            <Link href="/chat" onClick={() => { setIsLoading(true); }}>
-              <div className="flex text-center items-center text-xl bg-blue-500 text-white px-6 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:scale-125">
-                {isLoading ? (
-                  <IconSpinner className="mr-2 animate-spin" />
-                ) : null}
-                Get Started
-              </div>
-            </Link>
-          </div>
         </div>
       </div>
-    </Main>
   );
 }

 "use client";
 import Image from 'next/image';
 import Link from 'next/link';
+import { useState } from 'react';
+import { IconSpinner } from '@/app/components/ui/icons';
+import logo from '../public/smart-retrieval-logo.webp';
 export default function Home() {
   const [isLoading, setIsLoading] = useState(false);
   return (
+    <div className="rounded-xl shadow-xl p-4 mb-8 max-w-5xl w-full">
+      <div className="max-w-2xl mx-auto p-4 text-center">
+        <div className="flex flex-col items-center mb-4 bg-gradient-to-r from-blue-500 to-indigo-500 text-white p-8 rounded-lg shadow-lg">
+          <div className="flex flex-col md:flex-row items-center md:items-start">
+            <Image
+              src={logo}
+              alt="Smart Retrieval Logo"
+              width={150}
+              height={150}
+              priority
+              className="rounded-lg mb-4 md:mb-0 md:mr-4"
+            />
+            <div className='flex flex-col mt-4'>
+              <h1 className="text-4xl font-bold mb-2 md:text-5xl">Smart Retrieval</h1>
+              <p className="text-lg md:text-xl text-gray-200">
+                Your intelligent solution for quick and accurate information retrieval.
+              </p>
             </div>
           </div>
+        </div>
+        <div className="flex flex-col mt-8 text-center items-center max-w-full">
+          <p id='get-started-paragraph' className="text-xl text-gray-700 dark:text-gray-200 mb-4">
+            Experience the power of Smart Retrieval today!
+          </p>
+          <Link href="/chat" onClick={() => { setIsLoading(true); }}>
+            <div className="flex text-center items-center text-xl bg-blue-500 text-white px-6 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:scale-125">
+              {isLoading ? (
+                <IconSpinner className="mr-2 animate-spin" />
+              ) : null}
+              Get Started
+            </div>
+          </Link>
         </div>
       </div>
+    </div>
   );
 }

frontend/app/query/page.tsx CHANGED Viewed

@@ -1,15 +1,10 @@
 "use client";
-import Header from "@/app/components/header";
-import Main from "@/app/components/ui/main-container";
 import QuerySection from "@/app/components/query-section";
 export default function Query() {
   return (
-    <Main>
-      <Header />
-      <QuerySection />
-    </Main>
   );
 }

 "use client";
 import QuerySection from "@/app/components/query-section";
 export default function Query() {
   return (
+    <QuerySection />
   );
 }

frontend/app/search/page.tsx CHANGED Viewed

@@ -1,15 +1,10 @@
 "use client";
-import Header from "@/app/components/header";
-import Main from "@/app/components/ui/main-container";
 import SearchSection from "@/app/components/search-section";
 export default function Search() {
   return (
-    <Main>
-      <Header />
-      <SearchSection />
-    </Main>
   );
 }

 "use client";
 import SearchSection from "@/app/components/search-section";
 export default function Search() {
   return (
+    <SearchSection />
   );
 }

frontend/app/sign-in/page.tsx CHANGED Viewed

@@ -1,45 +1,40 @@
 "use client";
 import { GoogleLoginButton, SGIDLoginButton } from '@/app/components/login-buttons';
-import Header from "@/app/components/header";
-import Main from "@/app/components/ui/main-container";
 const SignInPage = () => {
   return (
-    <Main>
-      <Header />
-      <div className="rounded-xl shadow-xl p-4 mb-8 max-w-5xl w-full">
-        <div className="max-w-2xl mx-auto text-center">
-          <div className="flex flex-col items-center justify-center py-10 space-y-4">
-            <div className="bg-blue-500 text-white px-8 py-6 rounded-lg shadow-lg">
-              <h1 className="text-4xl font-bold mb-4">Sign in to Smart Retrieval!</h1>
-              <p className="text-lg text-gray-200 mb-4">
-                Your intelligent solution for quick and accurate information retrieval.
               </p>
-              <div className="flex flex-col gap-4">
-                <GoogleLoginButton />
-                <SGIDLoginButton />
-                <p className="text-gray-200 text-sm">
-                  Note: SGID login is only available via SingPass.
-                </p>
-                <div className="flex items-center justify-center gap-4">
-                  <div className="w-full h-px bg-gray-300"></div>
-                </div>
-                <button
-                  className="text-white font-bold hover:underline mt-4 rounded-md shadow-lg py-2 bg-gray-500 hover:bg-gray-300"
-                  onClick={() => {
-                    // Redirect back to the home page
-                    window.location.href = '/';
-                  }}
-                >
-                  Cancel
-                </button>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </Main>
   );
 };

 "use client";
 import { GoogleLoginButton, SGIDLoginButton } from '@/app/components/login-buttons';
 const SignInPage = () => {
   return (
+    <div className="rounded-xl shadow-xl p-4 mb-8 max-w-5xl w-full">
+      <div className="max-w-2xl mx-auto text-center">
+        <div className="flex flex-col items-center justify-center py-10 space-y-4">
+          <div className="bg-blue-500 text-white px-8 py-6 rounded-lg shadow-lg">
+            <h1 className="text-4xl font-bold mb-4">Sign in to Smart Retrieval!</h1>
+            <p className="text-lg text-gray-200 mb-4">
+              Your intelligent solution for quick and accurate information retrieval.
+            </p>
+            <div className="flex flex-col gap-4">
+              <GoogleLoginButton />
+              <SGIDLoginButton />
+              <p className="text-gray-200 text-sm">
+                Note: SGID login is only available via SingPass.
               </p>
+              <div className="flex items-center justify-center gap-4">
+                <div className="w-full h-px bg-gray-300"></div>
               </div>
+              <button
+                className="text-white font-bold hover:underline mt-4 rounded-md shadow-lg py-2 bg-gray-500 hover:bg-gray-300"
+                onClick={() => {
+                  // Redirect back to the home page
+                  window.location.href = '/';
+                }}
+              >
+                Cancel
+              </button>
             </div>
           </div>
         </div>
       </div>
+    </div>
   );
 };

frontend/app/status/page.tsx CHANGED Viewed

@@ -3,8 +3,6 @@
 import useSWR from 'swr';
 import { Button } from "@nextui-org/react";
 import { IconSpinner } from '@/app/components/ui/icons';
-import Header from "@/app/components/header";
-import Main from "@/app/components/ui/main-container";
 // Define the API endpoint
 const healthcheck_api = process.env.NEXT_PUBLIC_HEALTHCHECK_API;
@@ -46,33 +44,30 @@ const StatusPage = () => {
   };
   return (
-    <Main>
-      <Header />
-      <div className="rounded-xl shadow-xl p-4 mb-8 max-w-5xl w-full">
-        <div className="max-w-2xl space-y-2 p-4">
-          <h1 className="text-xl font-bold">Backend API Status</h1>
-          <p>
-            <span className="font-bold">Status: </span>
-            <span>{isValidating ? (
-              <IconSpinner className="inline ml-2 animate-spin" />
-            ) : apiStatus}</span>
-          </p>
-          <p><span className="font-bold">Response Data: </span>{isValidating ? (
             <IconSpinner className="inline ml-2 animate-spin" />
-          ) : apiResponse}</p>
-          <Button
-            onClick={checkApiStatus}
-            disabled={isValidating}  // Disable the button when isValidating is true
-            className="flex text-center items-center text-l disabled:bg-orange-400 bg-blue-500 text-white px-6 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:scale-105"
-          >
-            {isValidating ? (
-              <IconSpinner className="mr-2 animate-spin" />
-            ) : null}
-            Refresh Status
-          </Button>
-        </div>
       </div>
-    </Main>
   );
 };

 import useSWR from 'swr';
 import { Button } from "@nextui-org/react";
 import { IconSpinner } from '@/app/components/ui/icons';
 // Define the API endpoint
 const healthcheck_api = process.env.NEXT_PUBLIC_HEALTHCHECK_API;
   };
   return (
+    <div className="rounded-xl shadow-xl p-4 mb-8 max-w-5xl w-full bg-white dark:bg-zinc-700/30">
+      <div className="max-w-2xl space-y-2 p-4">
+        <h1 className="text-xl font-bold">Backend API Status</h1>
+        <p>
+          <span className="font-bold">Status: </span>
+          <span>{isValidating ? (
             <IconSpinner className="inline ml-2 animate-spin" />
+          ) : apiStatus}</span>
+        </p>
+        <p><span className="font-bold">Response Data: </span>{isValidating ? (
+          <IconSpinner className="inline ml-2 animate-spin" />
+        ) : apiResponse}</p>
+        <Button
+          onClick={checkApiStatus}
+          disabled={isValidating}  // Disable the button when isValidating is true
+          className="flex text-center items-center text-l disabled:bg-orange-400 bg-blue-500 text-white px-6 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:scale-105"
+        >
+          {isValidating ? (
+            <IconSpinner className="mr-2 animate-spin" />
+          ) : null}
+          Refresh Status
+        </Button>
       </div>
+    </div>
   );
 };