Enhancements & Refactored Code (#10)

* Fix: Button loading state not reset on 'back'

* Feat: search post processing to filter by average score

* Feat: Updated api status error handling

* Feat: Updated error handling & timeout duration

* Refactored imports & moved global vars to constants.py

* Feat: Updated dockerfile to install llama-cpp-python with openblas support by default

* Add .env file and update gitignore, pipeline name, robots.txt, middleware, layout, page, sitemap, and navlink components

* Fixed Pipeline Name

* Updated Check File Size workflow

.github/workflows/check-file-size.yml

@@ -12,6 +12,8 @@ jobs:
   check-file-size:
     runs-on: ubuntu-latest
     steps:
+      - name: Checkout
+        uses: actions/checkout@v4
       - name: Check large files
         uses: ppremk/lfs-warning@v3.2
         with:

.github/workflows/pipeline.yml

@@ -1,4 +1,4 @@
-name: Test Build and Deploy
+name: Pipeline
 
 on:
   push:
@@ -6,6 +6,7 @@ on:
   # to run this workflow manually from the Actions tab
   workflow_dispatch:
 
+# Test, Build and Deploy the app
 jobs:
   check-file-size:
     uses: ./.github/workflows/check-file-size.yml

Dockerfile

@@ -5,7 +5,7 @@ FROM nvidia/cuda:${CUDA_IMAGE}
 # Set up a new user named "user" with user ID 1000
 RUN useradd -m -u 1000 user
 
-# Install the dependencies
+# Install the dependencies & clean up
 RUN apt-get update && apt-get upgrade -y \
     && apt-get install -y git build-essential \
     python3.11 gcc wget \
@@ -13,7 +13,10 @@ RUN apt-get update && apt-get upgrade -y \
     cmake protobuf-compiler pkg-config \
     libclblast-dev libopenblas-dev \
     liblapack-dev liblapacke-dev libeigen3-dev libboost-all-dev \
-    && mkdir -p /etc/OpenCL/vendors && echo "libnvidia-opencl.so.1" > /etc/OpenCL/vendors/nvidia.icd
+    && mkdir -p /etc/OpenCL/vendors && echo "libnvidia-opencl.so.1" > /etc/OpenCL/vendors/nvidia.icd \
+    # Cleaning cache:
+    && apt-get purge -y --auto-remove -o APT::AutoRemove::RecommendsImportant=false \
+    && apt-get clean -y && rm -rf /var/lib/apt/lists/*
 
 # Install pip for python 3.11
 RUN wget https://bootstrap.pypa.io/get-pip.py && \
@@ -23,21 +26,25 @@ RUN wget https://bootstrap.pypa.io/get-pip.py && \
 # Switch to the user 'user'
 USER user
 
-# Setting build related env vars
-ENV CUDA_DOCKER_ARCH=all
-ENV LLAMA_CUBLAS=1
-
-# Set home to the user's home directory and Poetry's environment variables
-ENV HOME=/home/user \
-	PATH=/home/user/.local/bin:$PATH \
+# Setting build / container related env vars
+ENV CUDA_DOCKER_ARCH=all \
+    LLAMA_CUBLAS=1 \
+    # Set home to the user's home directory and Poetry's environment variables
+    HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH \
     PYTHONUNBUFFERED=1 \
     POETRY_NO_INTERACTION=1 \
     POETRY_VIRTUALENVS_IN_PROJECT=1 \
     POETRY_VIRTUALENVS_CREATE=1 \
     POETRY_CACHE_DIR=/tmp/poetry_cache \
-    # Build llama-cpp-python with default cuda support
-    CMAKE_ARGS="-DLLAMA_CUBLAS=on"
-    # CMAKE_ARGS="-DLLAMA_BLAS=ON -DLLAMA_BLAS_VENDOR=OpenBLAS"
+    # Set the uvicorn env
+    ENVIRONMENT=prod \
+    ##########################################################
+    # Build llama-cpp-python with cuda support
+    # CMAKE_ARGS="-DLLAMA_CUBLAS=on"
+    # Build llama-cpp-python with openblas support on CPU
+    CMAKE_ARGS="-DLLAMA_BLAS=ON -DLLAMA_BLAS_VENDOR=OpenBLAS"
+    ##########################################################
 
 # Set the working directory to /app
 WORKDIR $HOME/app
@@ -61,4 +68,8 @@ RUN poetry install --without dev,torch-cpu && \
 # Change to the package directory
 WORKDIR $HOME/app/backend
 
+# Make port 8000 available to the world outside this container
+EXPOSE 8000
+
+# Run the app when the container launches
 CMD ["poetry", "run", "uvicorn", "main:app", "--host", "0.0.0.0"]

backend/.gitignore

@@ -1,2 +1,3 @@
 __pycache__
 storage
+.env

backend/backend/app/api/routers/chat.py

@@ -1,8 +1,6 @@
 import logging
 from typing import List
 
-from app.utils.index import get_index
-from app.utils.json import json_to_model
 from fastapi import APIRouter, Depends, HTTPException, Request, status
 from fastapi.responses import StreamingResponse
 from fastapi.websockets import WebSocketDisconnect
@@ -13,6 +11,9 @@ from llama_index.memory import ChatMemoryBuffer
 from llama_index.prompts import PromptTemplate
 from pydantic import BaseModel
 
+from backend.app.utils.index import get_index
+from backend.app.utils.json import json_to_model
+
 chat_router = r = APIRouter()
 
 """

backend/backend/app/api/routers/query.py

@@ -1,8 +1,6 @@
 import logging
 from typing import List
 
-from app.utils.index import get_index
-from app.utils.json import json_to_model
 from fastapi import APIRouter, Depends, HTTPException, Request, status
 from fastapi.responses import StreamingResponse
 from fastapi.websockets import WebSocketDisconnect
@@ -10,6 +8,9 @@ from llama_index import VectorStoreIndex
 from llama_index.llms.types import MessageRole
 from pydantic import BaseModel
 
+from backend.app.utils.index import get_index
+from backend.app.utils.json import json_to_model
+
 query_router = r = APIRouter()
 
 """

backend/backend/app/api/routers/search.py

@@ -1,12 +1,13 @@
 import logging
 import re
 
-from app.utils.index import get_index
 from fastapi import APIRouter, Depends, HTTPException, Request, status
 from llama_index import VectorStoreIndex
 from llama_index.postprocessor import SimilarityPostprocessor
 from llama_index.retrievers import VectorIndexRetriever
 
+from backend.app.utils.index import get_index
+
 search_router = r = APIRouter()
 
 """
@@ -36,17 +37,22 @@ async def search(
         index=index,
         similarity_top_k=10,
     )
-    # similarity postprocessor: filter nodes below 0.45 similarity score
-    node_postprocessor = SimilarityPostprocessor(similarity_cutoff=0.45)
 
     # retrieve results
     query_results = retriever.retrieve(query)
 
     query_results_scores = [result.get_score() for result in query_results]
 
+    # get average score
+    average_score = sum(query_results_scores) / len(query_results_scores)
+
     logger.info(f"Search results similarity score: {query_results_scores}")
+    logger.info(f"Average similarity score: {average_score}")
+
+    # similarity postprocessor: filter nodes below 0.45 similarity score
+    node_postprocessor = SimilarityPostprocessor(similarity_cutoff=average_score)
 
-    # postprocess results
+    # postprocess results based on average score
     filtered_results = node_postprocessor.postprocess_nodes(query_results)
 
     filtered_results_scores = [result.get_score() for result in filtered_results]
@@ -68,9 +74,7 @@ async def search(
             "^_+ | _+$", "", node_dict["text"]
         )  # remove leading and trailing underscores
         data["text"] = cleaned_text
-        data["similarity_score"] = round(
-            node.get_score(), 2
-        )  # round to 2 decimal places
+        data["similarity_score"] = node.get_score()
         response.append(data)
         id += 1
 

backend/backend/app/utils/contants.py

@@ -0,0 +1,39 @@
+########################################################################
+#                   Model Constants for the backend app                #
+########################################################################
+from pathlib import Path
+
+from torch.cuda import is_available as is_cuda_available
+
+# Model Constants
+MAX_NEW_TOKENS = 4096
+CONTEXT_SIZE = MAX_NEW_TOKENS
+DEVICE_TYPE = "cuda" if is_cuda_available() else "cpu"
+
+# Get the current directory
+CUR_DIR = Path.cwd()
+
+STORAGE_DIR = str(CUR_DIR / "storage")  # directory to cache the generated index
+DATA_DIR = str(CUR_DIR / "data")  # directory containing the documents to index
+
+# LLM Model Constants
+LLM_MODEL_URL = "https://huggingface.co/TheBloke/Llama-2-7B-Chat-GGUF/resolve/main/llama-2-7b-chat.Q4_K_M.gguf"
+# Model Kwargs
+# set to at least 1 to use GPU, adjust according to your GPU memory, but must be able to fit the model
+MODEL_KWARGS = {"n_gpu_layers": 100} if DEVICE_TYPE == "cuda" else {}
+
+# Service Context Constants
+CHUNK_SIZE = 1000
+CHUNK_OVERLAP = 100
+
+# Embedding Model Constants
+EMBED_MODEL_NAME = "sentence-transformers/all-MiniLM-L6-v2"
+EMBED_POOLING = "mean"
+
+# Prompt Helper Constants
+# set maximum input size
+CHUNK_SIZE_LIMIT = MAX_NEW_TOKENS
+# set number of output tokens
+NUM_OUTPUT = 256
+# set maximum chunk overlap
+CHUNK_OVERLAP_RATIO = 0.2

backend/backend/app/utils/index.py

@@ -1,6 +1,5 @@
 import logging
 import os
-from pathlib import Path
 
 from llama_index import (
     PromptHelper,
@@ -17,29 +16,26 @@ from llama_index.llms.llama_utils import (
     completion_to_prompt,
     messages_to_prompt,
 )
-from torch.cuda import is_available as is_cuda_available
 
-MAX_NEW_TOKENS = 4096
-CONTEXT_SIZE = MAX_NEW_TOKENS
-MODEL_ID = "TheBloke/Llama-2-7B-Chat-GGUF"
-DEVICE_TYPE = "cuda" if is_cuda_available() else "cpu"
-
-# Get the current directory
-current_directory = Path.cwd()
-
-STORAGE_DIR = str(
-    current_directory / "storage"
-)  # directory to cache the generated index
-DATA_DIR = str(
-    current_directory / "data"
-)  # directory containing the documents to index
-
-
-# set to at least 1 to use GPU, adjust according to your GPU memory, but must be able to fit the model
-model_kwargs = {"n_gpu_layers": 100} if DEVICE_TYPE == "cuda" else {}
+from backend.app.utils.contants import (
+    CHUNK_OVERLAP,
+    CHUNK_OVERLAP_RATIO,
+    CHUNK_SIZE,
+    CHUNK_SIZE_LIMIT,
+    CONTEXT_SIZE,
+    DATA_DIR,
+    DEVICE_TYPE,
+    EMBED_MODEL_NAME,
+    EMBED_POOLING,
+    LLM_MODEL_URL,
+    MAX_NEW_TOKENS,
+    MODEL_KWARGS,
+    NUM_OUTPUT,
+    STORAGE_DIR,
+)
 
 llm = LlamaCPP(
-    model_url="https://huggingface.co/TheBloke/Llama-2-7B-Chat-GGUF/resolve/main/llama-2-7b-chat.Q4_K_M.gguf",
+    model_url=LLM_MODEL_URL,
     temperature=0.1,
     max_new_tokens=MAX_NEW_TOKENS,
     # llama2 has a context window of 4096 tokens, but we set it lower to allow for some wiggle room
@@ -47,7 +43,7 @@ llm = LlamaCPP(
     # kwargs to pass to __call__()
     # generate_kwargs={},
     # kwargs to pass to __init__()
-    model_kwargs=model_kwargs,
+    model_kwargs=MODEL_KWARGS,
     # transform inputs into Llama2 format
     messages_to_prompt=messages_to_prompt,
     completion_to_prompt=completion_to_prompt,
@@ -63,22 +59,22 @@ num_output = 256
 max_chunk_overlap = 0.2
 
 embed_model = HuggingFaceEmbedding(
-    model_name="sentence-transformers/all-MiniLM-L6-v2",
-    pooling="mean",
+    model_name=EMBED_MODEL_NAME,
+    pooling=EMBED_POOLING,
     device=DEVICE_TYPE,
 )
 
 prompt_helper = PromptHelper(
-    chunk_size_limit=4096,
-    chunk_overlap_ratio=0.2,
-    num_output=256,
+    chunk_size_limit=CHUNK_SIZE_LIMIT,
+    chunk_overlap_ratio=CHUNK_OVERLAP_RATIO,
+    num_output=NUM_OUTPUT,
 )
 
 service_context = ServiceContext.from_defaults(
     llm=llm,
     embed_model=embed_model,
-    chunk_size=1000,
-    chunk_overlap=100,
+    chunk_size=CHUNK_SIZE,
+    chunk_overlap=CHUNK_OVERLAP,
     prompt_helper=prompt_helper,
 )
 

backend/backend/main.py

@@ -1,29 +1,31 @@
 import logging
 import os
 
-from app.api.routers.chat import chat_router
-from app.api.routers.healthcheck import healthcheck_router
-from app.api.routers.query import query_router
-from app.api.routers.search import search_router
-from app.utils.index import create_index
 from dotenv import load_dotenv
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 from torch.cuda import is_available as is_cuda_available
 
+from backend.app.api.routers.chat import chat_router
+from backend.app.api.routers.healthcheck import healthcheck_router
+from backend.app.api.routers.query import query_router
+from backend.app.api.routers.search import search_router
+from backend.app.utils.index import create_index
+
 load_dotenv()
 
 app = FastAPI()
 
 environment = os.getenv("ENVIRONMENT", "dev")  # Default to 'development' if not set
 
-# TODO: Add reading allowed origins from environment variables
+# Add allowed origins from environment variables
+allowed_origins = os.getenv("ALLOWED_ORIGINS", "*")
 
 if environment == "dev":
     logger = logging.getLogger("uvicorn")
     logger.warning("Running in development mode - allowing CORS for all origins")
     app.add_middleware(
-        CORSMiddleware,
+        middleware_class=CORSMiddleware,
         allow_origins=["*"],
         allow_credentials=True,
         allow_methods=["*"],
@@ -32,19 +34,15 @@ if environment == "dev":
 
 if environment == "prod":
     # In production, specify the allowed origins
-    allowed_origins = [
-        "https://your-production-domain.com",
-        "https://another-production-domain.com",
-        # Add more allowed origins as needed
-    ]
+    allowed_origins = allowed_origins.split(",") if allowed_origins != "*" else ["*"]
 
     logger = logging.getLogger("uvicorn")
     logger.info(f"Running in production mode - allowing CORS for {allowed_origins}")
     app.add_middleware(
-        CORSMiddleware,
+        middleware_class=CORSMiddleware,
         allow_origins=allowed_origins,
         allow_credentials=True,
-        allow_methods=["GET", "POST", "PUT", "DELETE"],
+        allow_methods=["GET", "POST"],
         allow_headers=["*"],
     )
 

backend/example.env

@@ -0,0 +1 @@
+ALLOWED_ORIGINS=http://localhost:3000

frontend/app/about/page.tsx

@@ -3,7 +3,7 @@
 export default function About() {
 
   return (
-    <div className="rounded-xl shadow-xl p-4 mb-8 max-w-5xl w-full">
+    <div className="rounded-xl shadow-xl p-4 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>

frontend/app/components/footer.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { FooterNavLink } from "./ui/navlink";
+import { IconGitHub } from "./ui/icons";
+import { Text, Cookie } from "lucide-react";
+
+export default function Footer() {
+    return (
+        <footer>
+            <div className="flex flex-col items-center justify-center bg-gray-800 text-white p-4 mb-4 rounded-lg shadow-xl">
+                <div className="flex flex-col items-center">
+                    <p className="text-sm text-center">
+                        © 2024 JTC DBE. All rights reserved.
+                    </p>
+                </div>
+                <div className="flex items-center mt-2 gap-4">
+                    <FooterNavLink href="https://github.com/digitalbuiltenvironment/Smart-Retrieval/" target="_blank">
+                        <div className="text-sm text-center underline">
+                            <IconGitHub className="h-5 w-5 inline mr-2 mb-1" />
+                            Github
+                        </div>
+                    </FooterNavLink>
+                    <FooterNavLink href="/terms-of-service">
+                        <div className="text-sm text-center underline">
+                            <Text className="h-5 w-5 inline mr-2 mb-1" />
+                            Terms of Service
+                        </div>
+                    </FooterNavLink>
+                    <FooterNavLink href="/privacy-policy">
+                        <div className="text-sm text-center underline">
+                            <Cookie className="h-5 w-5 inline mr-2 mb-1" />
+                            Privacy Policy
+                        </div>
+                    </FooterNavLink>
+                </div>
+            </div>
+        </footer>
+    );
+}
+

frontend/app/components/header.tsx

@@ -1,140 +1,47 @@
 "use client";
 
-import Link from 'next/link';
 import Image from 'next/image';
 import { Home, InfoIcon, MessageCircle, Search, FileQuestion, Menu, X } from 'lucide-react';
-import { usePathname } from 'next/navigation';
 import { useTheme } from "next-themes";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState } from "react";
 import { useMedia } from 'react-use';
-import useSWR from 'swr'
-import logo from '../../public/smart-retrieval-logo.webp'
-
-interface NavLinkProps {
-  href: string;
-  children: React.ReactNode;
-  onClick?: () => void; // Include onClick as an optional prop
-}
-
-interface MobileMenuProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose }) => {
-  const isLargeScreen = useMedia('(min-width: 1024px)', false);
-  const menuRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    const handleOutsideClick = (event: MouseEvent | TouchEvent) => {
-      if (
-        !isLargeScreen &&
-        isOpen &&
-        !menuRef.current?.contains(event.target as Node) &&
-        !((event.target as HTMLElement).closest('.toggle-button')) // Exclude the toggle button
-      ) {
-        onClose(); // Close the menu
-      }
-    };
-
-    if (!isLargeScreen && isOpen) {
-      // Add event listeners for both mouse and touch events
-      document.addEventListener('mousedown', handleOutsideClick);
-    }
-
-    return () => {
-      // Remove the event listener when the component unmounts
-      document.removeEventListener('mousedown', handleOutsideClick);
-    };
-  }, [isLargeScreen, isOpen, onClose]);
-
-  useEffect(() => {
-    if (isLargeScreen && isOpen) {
-      onClose();
-    }
-  }, [isLargeScreen, isOpen, onClose]);
-  return (
-    <div ref={menuRef} className={`w-full h-full p-2 bg-opacity-80 ${isOpen ? 'flex' : 'hidden'}`}>
-      <div className="flex items-center justify-center mt-2" style={{ width: '9%', height: '9%' }}>
-        <Image
-          className='rounded-full max-w-full'
-          src={logo}
-          alt="Logo"
-          style={{
-            width: 'auto',
-            height: 'auto',
-          }}
-          priority
-          sizes="100vw, 50vw, 33vw"
-        />
-      </div>
-      <div className="flex items-center justify-center h-full">
-        {/* Mobile menu content */}
-        <div className="w-64 p-4 rounded-r-md">
-          <NavLink href="/" onClick={onClose}>
-            <div className="flex items-center mb-4">
-              <Home className="mr-2 h-5 w-5" />
-              Home
-            </div>
-          </NavLink>
-          <NavLink href="/about" onClick={onClose}>
-            <div className="flex items-center mb-4">
-              <InfoIcon className="mr-2 h-5 w-5" />
-              About
-            </div>
-          </NavLink>
-          <NavLink href="/chat" onClick={onClose}>
-            <div className="flex items-center mb-4">
-              <MessageCircle className="mr-2 h-5 w-5" />
-              Chat
-            </div>
-          </NavLink>
-          <NavLink href="/query" onClick={onClose}>
-            <div className="flex items-center mb-4">
-              <FileQuestion className="mr-2 h-5 w-5" />
-              Q&A
-            </div>
-          </NavLink>
-          <NavLink href="/search" onClick={onClose}>
-            <div className="flex items-center">
-              <Search className="mr-2 h-5 w-5" />
-              Search
-            </div>
-          </NavLink>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const NavLink: React.FC<NavLinkProps> = ({ href, children, onClick }) => {
-  // Use the useRouter hook to get information about the current route
-  const pathname = usePathname();
-
-  // Determine if the current tab is active
-  const isActive = pathname === href;
-
-  const handleClick = () => {
-    if (onClick) {
-      onClick(); // Call the onClick handler if provided
-    }
-  };
-
-  return (
-    <Link href={href} passHref>
-      {/* Add a class to highlight the active tab */}
-      <div className={`flex items-center font-bold ${isActive ? 'text-blue-500' : ''}`} onClick={handleClick}>
-        {children}
-      </div>
-    </Link>
-  );
-};
+import useSWR from 'swr';
+import logo from '../../public/smart-retrieval-logo.webp';
+import { HeaderNavLink } from './ui/navlink';
+import { MobileMenu } from './ui/mobilemenu';
+
+const MobileMenuItems = [
+  {
+    href: '/',
+    icon: <Home className="mr-2 h-5 w-5" />,
+    label: 'Home',
+  },
+  {
+    href: '/about',
+    icon: <InfoIcon className="mr-2 h-5 w-5" />,
+    label: 'About',
+  },
+  {
+    href: '/chat',
+    icon: <MessageCircle className="mr-2 h-5 w-5" />,
+    label: 'Chat',
+  },
+  {
+    href: '/query',
+    icon: <FileQuestion className="mr-2 h-5 w-5" />,
+    label: 'Q&A',
+  },
+  {
+    href: '/search',
+    icon: <Search className="mr-2 h-5 w-5" />,
+    label: 'Search',
+  },
+];
 
 export default function Header() {
   const isLargeScreen = useMedia('(min-width: 1024px)', false);
   const [mounted, setMounted] = useState(false);
   const { theme, setTheme } = useTheme();
-  // const [apiStatus, setApiStatus] = useState(false);
   // Use SWR for API status fetching
   const healthcheck_api = process.env.NEXT_PUBLIC_HEALTHCHECK_API;
   const { data: apiStatus, error: apiError } = useSWR(healthcheck_api, async (url) => {
@@ -149,7 +56,7 @@ export default function Header() {
       const data = await response.json();
       return data;
     } catch (error: any) {
-      console.error('Error fetching Backend API Status:', error.message);
+      console.error('Error fetching Backend API Status');
       throw error;
     }
   }, {
@@ -158,7 +65,14 @@ export default function Header() {
     refreshInterval: 60000, // Revalidate every 60 seconds
   });
   if (apiError) {
-    console.error('[Header] Error fetching Backend API Status:', apiError.message);
+    if (apiError.name === 'AbortError') {
+      console.error('[Header] Error fetching Backend API Status: Request timed out');
+    }
+    else {
+      console.error('[Header] Error fetching Backend API Status:', apiError.message);
+    }
+  } else {
+    console.log('[Header] API Status:', apiStatus);
   }
 
   useEffect(() => {
@@ -222,43 +136,43 @@ export default function Header() {
             </button>
           </div>
           {/* Mobile menu component */}
-          <MobileMenu isOpen={isMobileMenuOpen} onClose={() => setMobileMenuOpen(false)} />
+          <MobileMenu isOpen={isMobileMenuOpen} onClose={() => setMobileMenuOpen(false)} logoSrc={logo} items={MobileMenuItems} />
           <div className={`hidden items-center gap-4 lg:flex`}>
-            <NavLink href="/">
+            <HeaderNavLink href="/">
               <div className="flex items-center transition duration-300 ease-in-out transform hover:scale-125">
                 <Home className="mr-1 h-4 w-4" />
                 Home
               </div>
-            </NavLink>
-            <NavLink href="/about">
+            </HeaderNavLink>
+            <HeaderNavLink href="/about">
               <div className="flex items-center transition duration-300 ease-in-out transform hover:scale-125">
                 <InfoIcon className="mr-1 h-4 w-4" />
                 About
               </div>
-            </NavLink>
-            <NavLink href="/chat">
+            </HeaderNavLink>
+            <HeaderNavLink href="/chat">
               <div className="flex items-center transition duration-300 ease-in-out transform hover:scale-125">
                 <MessageCircle className="mr-1 h-4 w-4" />
                 Chat
               </div>
-            </NavLink>
-            <NavLink href="/query">
+            </HeaderNavLink>
+            <HeaderNavLink href="/query">
               <div className="flex items-center transition duration-300 ease-in-out transform hover:scale-125">
                 <FileQuestion className="mr-1 h-4 w-4" />
                 Q&A
               </div>
-            </NavLink>
-            <NavLink href="/search">
+            </HeaderNavLink>
+            <HeaderNavLink href="/search">
               <div className="flex items-center transition duration-300 ease-in-out transform hover:scale-125">
                 <Search className="mr-1 h-4 w-4" />
                 Search
               </div>
-            </NavLink>
+            </HeaderNavLink>
           </div>
           <div className="flex items-center ml-auto">
             {/* Status Page Button/Indicator */}
             <span className='flex items-center mr-1'>API:</span>
-            <NavLink href='/status'>
+            <HeaderNavLink 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">
@@ -270,7 +184,7 @@ export default function Header() {
                   </span>
                 )}
               </div>
-            </NavLink>
+            </HeaderNavLink>
             <span className="lg:text-lg font-nunito">|</span>
             {/* Toggle button with icon based on the theme */}
             <button

frontend/app/components/login-buttons.tsx

@@ -1,12 +1,11 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { signIn } from 'next-auth/react'
 
 import { cn } from '@/app/components/ui/lib/utils'
 import { Button, type ButtonProps } from '@/app/components/ui/button'
 import { IconGoogle, IconSGid, IconSpinner } from '@/app/components/ui/icons'
-import { useTheme } from 'next-themes';
 
 interface LoginButtonProps extends ButtonProps {
   showIcon?: boolean;
@@ -20,7 +19,10 @@ function GoogleLoginButton({
   ...props
 }: LoginButtonProps) {
   const [isLoading, setIsLoading] = useState(false);
-  const { theme } = useTheme();
+
+  useEffect(() => {
+    setIsLoading(false);
+  }, []);
 
   return (
     <Button

frontend/app/components/ui/mobilemenu.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useEffect, useRef } from 'react';
+import Image, { StaticImageData } from 'next/image';
+import { HeaderNavLink } from '@/app/components/ui/navlink';
+import { useMedia } from 'react-use';
+
+interface MenuItem {
+    href: string;
+    icon: React.ReactNode;
+    label: string;
+}
+
+interface MobileMenuProps {
+    isOpen: boolean;
+    onClose: () => void;
+    logoSrc: StaticImageData;
+    items: MenuItem[];
+}
+
+const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose, logoSrc, items }) => {
+    const isLargeScreen = useMedia('(min-width: 1024px)', false);
+    const menuRef = useRef<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        const handleOutsideClick = (event: MouseEvent | TouchEvent) => {
+            if (
+                !isLargeScreen &&
+                isOpen &&
+                !menuRef.current?.contains(event.target as Node) &&
+                !((event.target as HTMLElement).closest('.toggle-button')) // Exclude the toggle button
+            ) {
+                onClose(); // Close the menu
+            }
+        };
+
+        if (!isLargeScreen && isOpen) {
+            // Add event listeners for both mouse and touch events
+            document.addEventListener('mousedown', handleOutsideClick);
+        }
+
+        return () => {
+            // Remove the event listener when the component unmounts
+            document.removeEventListener('mousedown', handleOutsideClick);
+        };
+    }, [isLargeScreen, isOpen, onClose]);
+
+    useEffect(() => {
+        if (isLargeScreen && isOpen) {
+            onClose();
+        }
+    }, [isLargeScreen, isOpen, onClose]);
+
+    return (
+        <div ref={menuRef} className={`w-full h-full p-2 bg-opacity-80 ${isOpen ? 'flex' : 'hidden'}`}>
+            <div className="flex items-center justify-center mt-2" style={{ width: '9%', height: '9%' }}>
+                <Image
+                    className='rounded-full max-w-full'
+                    src={logoSrc}
+                    alt="Logo"
+                    style={{
+                        width: 'auto',
+                        height: 'auto',
+                    }}
+                    priority
+                    sizes="100vw, 50vw, 33vw"
+                />
+            </div>
+            <div className="flex items-center justify-center h-full">
+                {/* Mobile menu content */}
+                <div className="w-64 p-4 rounded-r-md">
+                    {items.map((item, index) => (
+                        <HeaderNavLink key={index} href={item.href} onClick={onClose}>
+                            <div className="flex items-center mb-4">
+                                {item.icon}
+                                {item.label}
+                            </div>
+                        </HeaderNavLink>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export { MobileMenu };

frontend/app/components/ui/navlink.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+
+export interface NavLinkProps {
+    href: string;
+    children: React.ReactNode;
+    onClick?: () => void; // Include onClick as an optional prop
+    target?: string;
+}
+
+const HeaderNavLink: React.FC<NavLinkProps> = ({ href, children, onClick }) => {
+    // Use the useRouter hook to get information about the current route
+    const pathname = usePathname();
+
+    // Determine if the current tab is active
+    const isActive = pathname === href;
+
+    const handleClick = () => {
+        if (onClick) {
+            onClick(); // Call the onClick handler if provided
+        }
+    };
+
+    return (
+        <Link href={href} passHref>
+            {/* Add a class to highlight the active tab */}
+            <div className={`flex items-center font-bold ${isActive ? 'text-blue-500' : ''}`} onClick={handleClick}>
+                {children}
+            </div>
+        </Link>
+    );
+};
+
+const FooterNavLink: React.FC<NavLinkProps> = ({ href, children, onClick, target }) => {
+    const handleClick = () => {
+        if (onClick) {
+            onClick(); // Call the onClick handler if provided
+        }
+    };
+
+    return (
+        <Link href={href} passHref target={target}>
+            {/* Add a class to highlight the active tab */}
+            <div className="flex items-center font-bold" onClick={handleClick}>
+                {children}
+            </div>
+        </Link>
+    );
+}
+
+export { HeaderNavLink, FooterNavLink }

frontend/app/components/ui/search/useSearch.tsx

@@ -33,12 +33,16 @@ const useSearch = (): UseSearchResult => {
                 return;
             }
             const response = await fetch(`${search_api}?query=${query}`, {
-                signal: AbortSignal.timeout(60000), // Abort the request if it takes longer than 60 seconds
+                signal: AbortSignal.timeout(120000), // Abort the request if it takes longer than 120 seconds
                 });
             const data = await response.json();
             setSearchResults(data);
-        } catch (error) {
-            console.error("Error during search:", error);
+        } catch (error: any) {
+            if (error.name === "AbortError") {
+                console.error("Error fetching search results: Request timed out");
+            } else {
+                console.error("Error fetching search results:", error.message);
+            }
             setSearchResults([]);
         }
 

frontend/app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import { Providers } from './providers'
 import Header from "@/app/components/header";
+import Footer from "@/app/components/footer";
 import Main from "@/app/components/ui/main-container";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -33,6 +34,7 @@ export default function RootLayout({
           <Main>
             <Header />
             {children}
+            <Footer />
           </Main>
         </Providers>
       </body>

frontend/app/page.tsx

@@ -10,7 +10,7 @@ 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="rounded-xl shadow-xl p-4 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">

frontend/app/privacy-policy/page.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+const PrivacyPolicyPage: React.FC = () => {
+    return (
+        <div className="rounded-xl shadow-xl p-4 max-w-5xl w-full">
+            <div className="max-w-3xl 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">Privacy Policy</h1>
+                    <span>
+                        <p className="mb-2 gap-2">
+                            Smart-Retrieval the website (hereinafter referred to as the "Service").
+                        </p>
+                        <p className="mb-2">
+                            This page informs you of our policies regarding the collection, use, and disclosure of personal data when you use our Service and the choices you have associated with that data.
+                        </p>
+                        <p className="mb-2">
+                            Smart-Retrieval currently does not collect & store any personal data. However, we may collect your data to provide and improve the Service in the future.
+                        </p>
+                        <p>
+                            By using the Service, you agree to the collection and use of information in accordance with this policy. Unless otherwise defined in this Privacy Policy, terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, accessible from Smart-Retrieval.
+                        </p>
+                    </span>
+                    <h2 className="text-xl md:text-2xl font-bold mb-4 mt-4">Information Collection And Use</h2>
+                    <span>
+                        <p className="mb-4">
+                            We collect several different types of information for various purposes to provide and improve our Service to you.
+                        </p>
+                    </span>
+                    <h2 className="text-lg md:text-xl font-bold mb-4">Types of Data Collected</h2>
+                    <span>
+                        <h2 className="text-l md:text-xl font-bold mb-4">Personal Data</h2>
+                        <span>
+                            <p className="mb-2">
+                                While using our Service, we may ask you to provide us with certain personally identifiable information that can be used to contact or identify you ("Personal Data").
+                            </p>
+                            <p className="mb-2">
+                                Personally identifiable information may include, but is not limited to:
+                            </p>
+                            <ul className="list-disc list-inside mt-2 ml-4">
+                                <li>Email Address</li>
+                                <li>First name and last name</li>
+                                <li>Cookies and Usage Data</li>
+                            </ul>
+                        </span>
+                        <h2 className="text-l md:text-xl font-bold mb-4 mt-4">Usage Data</h2>
+                        <span>
+                            <p className="mb-2">
+                                We may also collect information how the Service is accessed and used ("Usage Data"). This Usage Data may include information such as your computer's Internet Protocol address (e.g. IP address), browser type, browser version, the pages of our Service that you visit, the time and date of your visit, the time spent on those pages, unique device identifiers and other diagnostic data.
+                            </p>
+                            <p className="mb-2">
+                                This Usage Data may be collected automatically when using the Service.
+                            </p>
+                        </span>
+                        <h2 className="text-l md:text-xl font-bold mb-4 mt-4">Tracking & Cookies Data</h2>
+                        <span>
+                            <p className="mb-2">
+                                We use cookies and similar tracking technologies to track the activity on our Service and hold certain information.
+                            </p>
+                            <p className="mb-2">
+                                Cookies are files with small amount of data which may include an anonymous unique identifier. Cookies are sent to your browser from a website and stored on your device. Tracking technologies also used are beacons, tags, and scripts to collect and track information and to improve and analyze our Service.
+                            </p>
+                            <p className="mb-2">
+                                You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent. However, if you do not accept cookies, you may not be able to use some portions of our Service.
+                            </p>
+                            <p>
+                                Examples of Cookies we use:
+                            </p>
+                            <ul className="list-disc list-inside mt-2 ml-4">
+                                <li>Session Cookies. We use Session Cookies to operate our Service.</li>
+                                <li>Preference Cookies. We use Preference Cookies to remember your preferences and various settings.</li>
+                                <li>Security Cookies. We use Security Cookies for security purposes.</li>
+                            </ul>
+                        </span>
+                        <h2 className="text-l md:text-xl font-bold mb-4 mt-4">Use of Data</h2>
+                        <span>
+                            <p className="mb-2">
+                                Smart-Retrieval uses the collected data for various purposes:
+                            </p>
+                            <ul className="list-disc list-inside mt-2 ml-4">
+                                <li>To provide and maintain the Service.</li>
+                                <li>To notify you about changes to our Service.</li>
+                                <li>To allow you to participate in interactive features of our Service when you choose to do so.</li>
+                            </ul>
+                        </span>
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default PrivacyPolicyPage;

frontend/app/sign-in/page.tsx

@@ -4,7 +4,7 @@ import { GoogleLoginButton, SGIDLoginButton } from '@/app/components/login-butto
 
 const SignInPage = () => {
   return (
-    <div className="rounded-xl shadow-xl p-4 mb-8 max-w-5xl w-full">
+    <div className="rounded-xl shadow-xl p-4 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">

frontend/app/status/page.tsx

@@ -21,7 +21,7 @@ const StatusPage = () => {
       const data = await response.json();
       return data;
     } catch (error: any) {
-      console.error('Error fetching Backend API Status:', error.message);
+      console.error('Error fetching Backend API Status');
       throw error;
     }
   }, {
@@ -30,7 +30,12 @@ const StatusPage = () => {
     refreshInterval: 60000, // Revalidate every 60 seconds
   });
   if (error) {
-    console.error('[status] Error fetching Backend API Status:', error.message);
+    if (error.name === 'AbortError') {
+      console.error('[status] Error fetching Backend API Status: Request timed out');
+    }
+    else {
+      console.error('[status] Error fetching Backend API Status:', error.message);
+    }
   }
 
   const apiStatus = error ? '❌' : '✅';
@@ -46,7 +51,7 @@ const StatusPage = () => {
   };
 
   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="rounded-xl shadow-xl p-4 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>

frontend/app/terms-of-service/page.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import React from 'react';
+
+const TermsOfServicePage: React.FC = () => {
+    return (
+        <div className="rounded-xl shadow-xl p-4 max-w-5xl w-full">
+            <div className="max-w-3xl 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">Terms of Service</h1>
+                    <span>
+                        <p className="mb-2 gap-2">
+                            Smart-Retrieval the website (hereinafter referred to as the "Service").
+                        </p>
+                        <p className="mb-2">
+                            This page informs you of our policies regarding the collection, use, and disclosure of personal data when you use our Service and the choices you have associated with that data.
+                        </p>
+                        <p className="mb-2">
+                            Smart-Retrieval currently does not collect & store any personal data. However, we may collect your data to provide and improve the Service in the future.
+                        </p>
+                        <p>
+                            By using the Service, you agree to the collection and use of information in accordance with this policy. Unless otherwise defined in this Privacy Policy, terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, accessible from Smart-Retrieval.
+                        </p>
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TermsOfServicePage;

frontend/middleware.ts

@@ -6,5 +6,5 @@ export { default } from "next-auth/middleware"
 
 // Ensure auth is required for all except the following paths
 export const config = {
-    matcher: ['/((?!api/auth|_next/static|_next/image|favicon.ico|about|sign-in).+)']
+    matcher: ['/((?!api/auth|_next/static|_next/image|favicon.ico|about|sign-in|privacy-policy|terms-of-service|sitemap.xml|robots.txt).+)']
 };

frontend/public/robots.txt

@@ -0,0 +1,14 @@
+//robots.txt
+
+# Block all crawlers for /accounts
+User-agent: *
+Disallow: /accounts
+
+# Allow all crawlers
+User-agent: *
+Allow: /
+
+# Delay between requests
+Crawl-delay: 5
+
+Sitemap: https://smart-retrieval-demo.vercel.app/sitemap.xml

frontend/public/sitemap.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+
+<url>
+  <loc>https://smart-retrieval-demo.vercel.app/</loc>
+  <lastmod>2024-01-30T06:02:15+00:00</lastmod>
+  <priority>1.00</priority>
+</url>
+<url>
+  <loc>https://smart-retrieval-demo.vercel.app/about</loc>
+  <lastmod>2024-01-30T06:02:15+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+
+
+</urlset>