Autofill Prompt (#16)

* Minor Backend Changes

Added PSSCOC docs downloader script.
Redirect / to /docs for swagger docs.
Updated poetry dependencies.
Updated torch-cuda dependency as optional, defaulting to torch-cpu.

* Updated README.md

* Added Autofill Prompt Component

Added a base component to autofill the prompt message selected by the user.

* Update Dockerfile & workflow in line with updated poetry

* Moved login-buttons into ui components

* Updated transitions for autofill dialog

* Added autofill dialog to query page

* Usability improvements to search function

* Added a few todo

* Added loading spinner to status icon

* Update Search to use interface

* Added Autofill Prompt for Search

* Updated Package Ver

* Updated pyproject.toml, README, Dockerfile & test

* Updated poetry.lock

* Updated poetry lock and pyproject.toml

* Commented out cpu torch, to install cuda version only.

* Updated python test workflow to not install torch package

* Updated README

.github/workflows/python-tests.yml

@@ -33,7 +33,7 @@ jobs:
       run: |
         # python -m pip install --upgrade pip setuptools wheel
         # python -m pip install poetry
-        poetry install --without torch-cuda
+        poetry install --with dev
     - name: Lint with flake8
       working-directory: ./backend
       run: |

Dockerfile

@@ -40,8 +40,9 @@ ENV CUDA_DOCKER_ARCH=all \
     # Set the uvicorn env
     ENVIRONMENT=prod \
     ##########################################################
-    # Build llama-cpp-python with cuda support
+    # # 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"
     ##########################################################
@@ -62,7 +63,7 @@ COPY --chown=user ./backend/pyproject.toml ./backend/poetry.lock $HOME/app/
 COPY --chown=user ./backend $HOME/app
 
 # Install the dependencies
-RUN poetry install --without dev,torch-cpu && \
+RUN poetry install --with torch-cuda && \
     rm -rf /tmp/poetry_cache
 
 # Change to the package directory

README.md

@@ -50,8 +50,6 @@ pinned: false
 Smart Retrieval is a platform for efficient and streamlined information retrieval, especially in the realm of legal and compliance documents.
 With the power of Open-Source Large Language Models (LLM) and Retrieval Augmented Generation (RAG), it aims to enhance user experiences at JTC by addressing key challenges such as manual search inefficiencies and rigid file naming conventions, revolutionizing the way JTC employees access and comprehend crucial documents
 
-Project files bootstrapped with [`create-llama`](https://github.com/run-llama/LlamaIndexTS/tree/main/packages/create-llama).
-
 ## 🏁 Getting Started <a name = "getting_started"></a>
 
 These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See [deployment](#deployment) for notes on how to deploy the project on a live system.
@@ -76,6 +74,7 @@ For more information, see the [DEPLOYMENT.md](./DEPLOYMENT.md).
 - [Python](https://python.org/) - Backend Server Environment
 - [FastAPI](https://fastapi.tiangolo.com/) - Backend API Web Framework
 - [LlamaIndex](https://www.llamaindex.ai/) - Data Framework for LLM
+- [`create-llama`](https://github.com/run-llama/LlamaIndexTS/tree/main/packages/create-llama) - LlamaIndex Application Bootstrap Tool
 
 ## 📑 Contributing <a name = "contributing"></a>
 

backend/README.md

@@ -2,6 +2,8 @@
 
 The backend is built using Python & [FastAPI](https://fastapi.tiangolo.com/) bootstrapped with [`create-llama`](https://github.com/run-llama/LlamaIndexTS/tree/main/packages/create-llama).
 
+To get started, you must first install the required dependencies in `Requirements` section below, then follow the `Getting Started` section.
+
 ## Requirements
 
 1. Python >= 3.11
@@ -21,9 +23,14 @@ The backend is built using Python & [FastAPI](https://fastapi.tiangolo.com/) boo
 
 ## Getting Started
 
-First, ensure if you want to use the cuda version of pytorch, you have the correct version `cuda > 12.1` of cuda installed. You can check this by running `nvcc --version or nvidia-smi` in your terminal. If you do not have cuda installed, you can install it from [here](https://developer.nvidia.com/cuda-downloads).
+First, ensure if you want to use the cuda version of pytorch, you have the correct version `cuda > 12.1` of cuda installed. You can check this by running `nvcc --version or nvidia-smi` in your terminal, nvcc --version should correctly chow whether you have installed cuda properly or not. If you do not have cuda installed, you can install it from [here](https://developer.nvidia.com/cuda-downloads).
+
+- You may need to add cuda to your path, which can be found online.
+
+Ensure you have followed the steps in the `requirements` section above.
 
-Ensure you have followed the steps in the requirements section above.
+- If on windows, make sure you are running the commands in powershell.
+- Add conda to your path, which can be found [here](https://stackoverflow.com/questions/64149680/how-can-i-activate-a-conda-environment-from-powershell)
 
 Then activate the conda environment:
 
@@ -33,24 +40,29 @@ conda activate SmartRetrieval
 
 Second, setup the environment:
 
-```bash
-# Only run one of the following commands:
+```powershell
+# Only choose one of the options below depending on if you have CUDA enabled GPU or not:
+# If running on windows, make sure you are running the commands in powershell.
 -----------------------------------------------
 # Install dependencies and torch (cpu version)
+# Go to the backend directory and edit the pyproject.toml file to uncomment the `torch-cpu` poetry section
+-----------------------------------------------
 # Windows: Set env for llama-cpp-python with openblas support on cpu
 $env:CMAKE_ARGS = "-DLLAMA_BLAS=ON -DLLAMA_BLAS_VENDOR=OpenBLAS"
 # Linux: Set env for llama-cpp-python with openblas support on cpu
 CMAKE_ARGS="-DLLAMA_BLAS=ON -DLLAMA_BLAS_VENDOR=OpenBLAS"
 # Then:
-poetry install --without torch-cuda
+poetry install --with torch-cpu
 -----------------------------------------------
 # Install dependencies and torch (cuda version)
+# Installing torch with cuda support on a system without cuda support is also possible.
+-----------------------------------------------
 # Windows: Set env for llama-cpp-python with cuda support on gpu
 $env:CMAKE_ARGS = "-DLLAMA_CUBLAS=on"
 # Linux: Set env for llama-cpp-python with cuda support on gpu
 CMAKE_ARGS="-DLLAMA_CUBLAS=on"
 # Then:
-poetry install --without torch-cpu
+poetry install --with torch-cuda
 ```
 
 ```bash

backend/backend/app/utils/contants.py

@@ -7,7 +7,7 @@ from torch.cuda import is_available as is_cuda_available
 
 # Model Constants
 MAX_NEW_TOKENS = 4096
-CONTEXT_SIZE = MAX_NEW_TOKENS
+CONTEXT_SIZE = 3900  # llama2 has a context window of 4096 tokens, but we set it lower to allow for some wiggle room
 DEVICE_TYPE = "cuda" if is_cuda_available() else "cpu"
 
 # Get the current directory
@@ -18,6 +18,7 @@ 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"
+LLM_TEMPERATURE = 0.1
 # 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 {}

backend/backend/app/utils/index.py

@@ -28,6 +28,7 @@ from backend.app.utils.contants import (
     EMBED_MODEL_NAME,
     EMBED_POOLING,
     LLM_MODEL_URL,
+    LLM_TEMPERATURE,
     MAX_NEW_TOKENS,
     MODEL_KWARGS,
     NUM_OUTPUT,
@@ -36,12 +37,11 @@ from backend.app.utils.contants import (
 
 llm = LlamaCPP(
     model_url=LLM_MODEL_URL,
-    temperature=0.1,
+    temperature=LLM_TEMPERATURE,
     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
     context_window=CONTEXT_SIZE,
     # kwargs to pass to __call__()
-    # generate_kwargs={},
+    generate_kwargs={},
     # kwargs to pass to __init__()
     model_kwargs=MODEL_KWARGS,
     # transform inputs into Llama2 format
@@ -50,14 +50,6 @@ llm = LlamaCPP(
     verbose=True,
 )
 
-# define prompt helper
-# set maximum input size
-max_input_size = 4096
-# set number of output tokens
-num_output = 256
-# set maximum chunk overlap
-max_chunk_overlap = 0.2
-
 embed_model = HuggingFaceEmbedding(
     model_name=EMBED_MODEL_NAME,
     pooling=EMBED_POOLING,

backend/backend/get_PSSCOC_docs.py

@@ -0,0 +1,186 @@
+import json
+import os
+
+import requests
+from bs4 import BeautifulSoup
+from doc2docx import convert as convert_doc2docx
+
+"""
+A web scraping script to download the Public Sector Standard Conditions of Contract (PSSCOC) documents from the BCA website.
+The script will create a folder for each category and download the documents into the respective category folder.
+The script will also convert doc files to docx files.
+The script will also get the About PSSCOC page info and saves to a json file.
+"""
+
+# Website URL
+base_url = "https://www1.bca.gov.sg"
+docs_endpoint = "/procurement/post-tender-stage/public-sector-standard-conditions-of-contract-psscoc"
+
+# Source Documents Folder
+source_doc_dir = "data"
+# PSSCOC Page Info Folder
+psscoc_page_info_dir = "About PSSCOC"
+
+
+# Get the PSSCOC documents
+def get_psscoc_docs():
+    """
+    Downloads the PSSCOC documents.
+    """
+    # Send a GET request to the website URL
+    response = requests.get(base_url + docs_endpoint, timeout=10)
+    response.raise_for_status()  # Check for HTTP errors
+
+    # Parse the HTML content of the response
+    soup = BeautifulSoup(response.content, "html.parser")
+
+    # Find the table element that contains the  Conditions of Contract & Downloads link
+    table = soup.find("table")
+
+    # Loop through each row of the table element, skipping the first row
+    for row in table.find_all("tr")[1:]:
+        # Find the first cell of the row that contains the category name
+        first_cell = row.find("td", attrs={"scope": "row"})
+        category_name = first_cell.find("strong").text.strip()
+        print("Category:", category_name)
+
+        # Create a folder for each category if it doesn't exist
+        category_folder = os.path.join(source_doc_dir, category_name)
+        if not os.path.exists(category_folder):
+            os.makedirs(category_folder)
+
+        # Find the second cell of the row that contains the href links
+        second_cell = row.find("ol")
+        # Loop through each list item in the second cell
+        for li in second_cell.find_all("li"):
+            # Find the href link
+            href_link = li.find("a")["href"]
+            # if starts with /docs, then it is a relative link
+            if href_link.startswith("/docs"):
+                href_link = base_url + href_link
+
+            # Get the filename from the href link
+            filename = os.path.basename(href_link).split("?")[0]
+            print("Downloading:", filename)
+            # Send a GET request to the href link
+            response = requests.get(href_link, timeout=10)
+            # Write the response content to a file
+            with open(os.path.join(category_folder, filename), "wb") as f:
+                f.write(response.content)
+                print("Saved to:", os.path.join(category_folder, filename))
+            # convert doc to docx
+            if filename.endswith(".doc"):
+                print("Converting to docx...")
+                convert_doc2docx(os.path.join(category_folder, filename))
+                print(
+                    "Converted to:",
+                    os.path.join(category_folder, filename + "x"),
+                )
+                # remove the original doc file
+                os.remove(os.path.join(category_folder, filename))
+        # line break
+        print("-" * 100)
+
+
+def get_psscoc_page_info():
+    """
+    Get the About PSSCOC page info and saves to a json file.
+    """
+    print("Getting PSSCOC Page Info...")
+    # Send a GET request to the website URL
+    response = requests.get(base_url + docs_endpoint, timeout=10)
+    response.raise_for_status()  # Check for HTTP errors
+
+    # Parse the HTML content of the response
+    soup = BeautifulSoup(response.content, "html.parser")
+
+    # Extract the necessary HTML elements
+    mid_body = soup.find("div", attrs={"class": "mid"})
+
+    cleaned_results = {}
+
+    # Extract title from the mid_body
+    title = mid_body.find("div", attrs={"class": "title"}).text.strip()
+    cleaned_results["Title"] = title
+
+    # Extract the flow content from the mid_body
+    flow_content = mid_body.find("ul", attrs={"class": "rsmFlow rsmLevel rsmOneLevel"})
+    flow = [li.text.strip() for li in flow_content.find_all("li")]
+    cleaned_results["Stage of PSSCOC"] = " > ".join(flow[1:])
+
+    # Extract sfContentBlock from the mid_body
+    sf_content_block = mid_body.find("div", attrs={"class": "sfContentBlock"})
+
+    # Extract all the paragraphs from the sfContentBlock but not nested paragraphs
+    paragraphs = sf_content_block.find_all("p", recursive=False)
+    paragraphs_text = [p.text.strip() for p in paragraphs]
+    cleaned_results["About"] = paragraphs_text[0]
+    more_about = {}
+    more_about[paragraphs_text[1]] = (
+        paragraphs_text[2]
+        .replace("\n", " ")
+        .replace("\r", " ")
+        .replace("\u00a0", " ")
+        .strip()
+    )
+
+    # Extract ul from the sfContentBlock
+    ul_content = sf_content_block.find("ul")
+    ul_li = [li.text.strip() for li in ul_content.find_all("li")]
+    more_about[paragraphs_text[3]] = ul_li  # title for 3rd paragraph
+
+    cleaned_results["More About"] = more_about
+
+    # Extract the table from the sfContentBlock
+    table = sf_content_block.find("table")
+    table_rows = table.find_all("tr")
+    header_row = [td.text.strip() for td in table_rows[0].find_all("td")]
+    header_row = ["Category Name", "Category File Names"]
+    table_data_list = []
+    for row in table_rows[1:]:
+        row_data = [td.text.strip() for td in row.find_all("td")]
+        row_data[-1] = row_data[-1].split("\n")
+        # remove empty string
+        row_data[-1] = [x.strip() for x in row_data[-1] if x]
+        table_data = dict(zip(header_row, row_data))
+        table_data_list.append(table_data)
+    cleaned_results["Categories of PSSCOC"] = table_data_list
+
+    # Extract all the divs from the sfContentBlock but not nested divs
+    # divs = sf_content_block.find_all("div", recursive=False)
+
+    # Save the json results content to a file
+    page_info_folder = os.path.join(source_doc_dir, psscoc_page_info_dir)
+    file_name = "About PSSCOC.json"
+    # Create a folder for page info if it doesn't exist
+    if not os.path.exists(page_info_folder):
+        os.makedirs(page_info_folder)
+    # Save the results content to a file
+    with open(os.path.join(page_info_folder, file_name), "wb") as f:
+        f.write(json.dumps(cleaned_results, indent=4).encode("utf-8"))
+        print(
+            "Saved to:",
+            os.path.join(page_info_folder, file_name),
+        )
+
+
+# Main function
+def main():
+    """
+    Main function.
+    """
+    try:
+        # Get the PSSCOC documents
+        get_psscoc_docs()
+        # Get the About PSSCOC page info
+        get_psscoc_page_info()
+    except requests.exceptions.RequestException as e:
+        print("Error: Failed to make a request to the website.")
+        print(e)
+    except Exception as e:
+        print("An unexpected error occurred:")
+        print(e)
+
+
+if __name__ == "__main__":
+    main()

backend/backend/main.py

@@ -4,6 +4,7 @@ import os
 from dotenv import load_dotenv
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import RedirectResponse
 from torch.cuda import is_available as is_cuda_available
 
 from backend.app.api.routers.chat import chat_router
@@ -55,3 +56,9 @@ app.include_router(healthcheck_router, prefix="/api/healthcheck")
 
 # Try to create the index first on startup
 create_index()
+
+
+# Redirect to the /docs endpoint
+@app.get("/")
+async def docs_redirect():
+    return RedirectResponse(url="/docs")

backend/pyproject.toml

@@ -10,26 +10,34 @@ packages = [{ include = "backend" }]
 python = "^3.11,<3.12"
 fastapi = "^0.104.1"
 uvicorn = { extras = ["standard"], version = "^0.23.2" }
-llama-index = "^0.9.4"
-pypdf = "^3.17.0"
+llama-index = "^0.9.48"
+pypdf = "^3.17.4"
 python-dotenv = "^1.0.0"
-llama-cpp-python = "^0.2.18"
-transformers = "^4.35.2"
+llama-cpp-python = "^0.2.52"
+transformers = "^4.38.1"
 docx2txt = "^0.8"
+doc2docx = "^0.2.4"
 
-# Dev Dependencies here
+[tool.poetry.group.dev]
+optional = true
 [tool.poetry.group.dev.dependencies]
+# Dev Dependencies here
 flake8 = "^7.0.0"
-pytest = "^7.4.4"
+pytest = "^8.0.2"
 
 # For CPU torch version: Windows and Linux
-[tool.poetry.group.torch-cpu.dependencies]
-torch = [
-    { url = "https://download.pytorch.org/whl/cpu/torch-2.1.1%2Bcpu-cp311-cp311-win_amd64.whl", markers = "sys_platform == 'win32'" },
-    { url = "https://download.pytorch.org/whl/cpu/torch-2.1.1%2Bcpu-cp311-cp311-linux_x86_64.whl", markers = "sys_platform == 'linux'" },
-]
+# NOTE: To uncomment out the following lines, should you need to use the CPU version of torch
+# [tool.poetry.group.torch-cpu]
+# optional = true
+# [tool.poetry.group.torch-cpu.dependencies]
+# torch = [
+#     { url = "https://download.pytorch.org/whl/cpu/torch-2.1.1%2Bcpu-cp311-cp311-win_amd64.whl", markers = "sys_platform == 'win32'" },
+#     { url = "https://download.pytorch.org/whl/cpu/torch-2.1.1%2Bcpu-cp311-cp311-linux_x86_64.whl", markers = "sys_platform == 'linux'" },
+# ]
 
-## For Cuda torch version: Windows and Linux
+# For Cuda torch version: Windows and Linux
+[tool.poetry.group.torch-cuda]
+optional = true
 [tool.poetry.group.torch-cuda.dependencies]
 torch = [
     { url = "https://download.pytorch.org/whl/cu121/torch-2.1.1%2Bcu121-cp311-cp311-win_amd64.whl", markers = "sys_platform == 'win32'" },

frontend/app/components/chat-section.tsx

@@ -2,6 +2,7 @@
 
 import { useChat } from "ai/react";
 import { ChatInput, ChatMessages } from "@/app/components/ui/chat";
+import AutofillQuestion from "@/app/components/ui/autofill-prompt/autofill-prompt-dialog";
 
 export default function ChatSection() {
   const {
@@ -15,13 +16,20 @@ export default function ChatSection() {
   } = useChat({ api: process.env.NEXT_PUBLIC_CHAT_API });
 
   return (
-    <div className="space-y-4 max-w-5xl w-full">
+    <div className="space-y-4 max-w-5xl w-full relative">
       <ChatMessages
         messages={messages}
         isLoading={isLoading}
         reload={reload}
         stop={stop}
       />
+      <AutofillQuestion
+        messages={messages}
+        isLoading={isLoading}
+        handleSubmit={handleSubmit}
+        handleInputChange={handleInputChange}
+        input={input}
+      />
       <ChatInput
         input={input}
         handleSubmit={handleSubmit}

frontend/app/components/header.tsx

@@ -9,6 +9,7 @@ import useSWR from 'swr';
 import logo from '@/public/smart-retrieval-logo.webp';
 import { HeaderNavLink } from '@/app/components/ui/navlink';
 import { MobileMenu } from '@/app/components/ui/mobilemenu';
+import { IconSpinner } from '@/app/components/ui/icons'
 
 const MobileMenuItems = [
   {
@@ -44,7 +45,7 @@ export default function Header() {
   const { theme, setTheme } = useTheme();
   // Use SWR for API status fetching
   const healthcheck_api = process.env.NEXT_PUBLIC_HEALTHCHECK_API;
-  const { data, error: apiError } = useSWR(healthcheck_api, async (url) => {
+  const { data, error: apiError, isLoading } = useSWR(healthcheck_api, async (url) => {
     try {
       // Fetch the data
       const response = await fetch(url, {
@@ -170,15 +171,18 @@ export default function Header() {
             <span className='flex items-center mr-1'>API:</span>
             <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">
-                    🔴
-                  </span>
-                ) : (
-                  <span role="img" aria-label="green circle">
-                    🟢
-                  </span>
-                )}
+                {isLoading ? (
+                  <IconSpinner className="mr-2 animate-spin" />
+                ) :
+                  apiError ? (
+                    <span role="img" aria-label="red circle">
+                      🔴
+                    </span>
+                  ) : (
+                    <span role="img" aria-label="green circle">
+                      🟢
+                    </span>
+                  )}
               </div>
             </HeaderNavLink>
             <span className="lg:text-lg font-nunito">|</span>
@@ -198,10 +202,11 @@ export default function Header() {
               )}
             </button>
           </div>
-        </div>
+        </div >
         {/* Mobile menu component */}
-        <MobileMenu isOpen={isMobileMenuOpen} onClose={() => setMobileMenuOpen(false)} logoSrc={logo} items={MobileMenuItems} />
-      </nav>
-    </div>
+        < MobileMenu isOpen={isMobileMenuOpen} onClose={() => setMobileMenuOpen(false)
+        } logoSrc={logo} items={MobileMenuItems} />
+      </nav >
+    </div >
   );
 }

frontend/app/components/query-section.tsx

@@ -2,6 +2,7 @@
 
 import { useChat } from "ai/react";
 import { ChatInput, ChatMessages } from "@/app/components/ui/chat";
+import AutofillQuestion from "@/app/components/ui/autofill-prompt/autofill-prompt-dialog";
 
 export default function QuerySection() {
     const {
@@ -22,6 +23,13 @@ export default function QuerySection() {
                 reload={reload}
                 stop={stop}
             />
+            <AutofillQuestion
+                messages={messages}
+                isLoading={isLoading}
+                handleSubmit={handleSubmit}
+                handleInputChange={handleInputChange}
+                input={input}
+            />
             <ChatInput
                 input={input}
                 handleSubmit={handleSubmit}

frontend/app/components/search-section.tsx

@@ -5,17 +5,22 @@ import { useState, ChangeEvent, FormEvent } from "react";
 import useSearch from "@/app/components/ui/search/useSearch";
 import SearchResults from "@/app/components/ui/search/search-results";
 import SearchInput from "@/app/components/ui/search/search-input";
+import AutofillSearchQuery from "@/app/components/ui/autofill-prompt/autofill-search-prompt-dialog";
 
 const SearchSection: React.FC = () => {
   const [query, setQuery] = useState("");
   const { searchResults, isLoading, handleSearch } = useSearch();
+  const [searchButtonPressed, setSearchButtonPressed] = useState(false);
+
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     setQuery(e.target.value);
+    setSearchButtonPressed(false);
   };
 
   const handleSearchSubmit = (e: FormEvent) => {
     e.preventDefault();
+    setSearchButtonPressed(true);
     handleSearch(query);
   };
 
@@ -24,10 +29,18 @@ const SearchSection: React.FC = () => {
       <SearchInput
         query={query}
         isLoading={isLoading}
+        results={searchResults}
+        onInputChange={handleInputChange}
+        onSearchSubmit={handleSearchSubmit}
+      />
+      <AutofillSearchQuery
+        query={query}
+        isLoading={isLoading}
+        results={searchResults}
         onInputChange={handleInputChange}
         onSearchSubmit={handleSearchSubmit}
       />
-      <SearchResults results={searchResults} isLoading={isLoading} />
+      <SearchResults query={query} results={searchResults} isLoading={isLoading} searchButtonPressed={searchButtonPressed} />
     </div>
   );
 };

frontend/app/components/ui/autofill-prompt/autofill-prompt-dialog.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useState } from "react";
+import { QuestionsBankProp, questionsBank } from "@/app/components/ui/autofill-prompt/autofill-prompt.interface";
+import { ChatHandler } from "@/app/components/ui/chat/chat.interface";
+
+export default function AutofillQuestion(
+  props: Pick<
+    ChatHandler,
+    "messages" | "isLoading" | "handleSubmit" | "handleInputChange" | "input"
+  >,
+) {
+  // Keep track of whether to show the overlay
+  const [showOverlay, setShowOverlay] = useState(true);
+  // Randomly select a subset of questions
+  const [randomQuestions, setRandomQuestions] = useState<QuestionsBankProp[]>([]);
+  // Keep track of the current question index
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+
+  // Shuffle the array using Fisher-Yates algorithm
+  function shuffleArray(array: any[]) {
+    for (let i = array.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [array[i], array[j]] = [array[j], array[i]];
+    }
+    return array;
+  }
+
+  // TODO: To load the questionsbank from a database in the future
+
+  // Randomly select a subset of 3-4 questions
+  useEffect(() => {
+    // Shuffle the questionsBank array
+    const shuffledQuestions = shuffleArray(questionsBank);
+    // Get a random subset of 3-4 questions
+    const subsetSize = Math.floor(Math.random() * 2) + 3; // Randomly choose between 3 and 4
+    const selectedQuestions = shuffledQuestions.slice(0, subsetSize);
+    // Do a short delay before setting the state to show the animation
+    setTimeout(() => {
+      setRandomQuestions(selectedQuestions);
+    }, 300);
+  }, []);
+
+
+  // Hide overlay when there are messages
+  useEffect(() => {
+    if (props.messages.length > 0) {
+      setShowOverlay(false);
+    }
+    else {
+      setShowOverlay(true);
+    }
+  }, [props.messages, props.input]);
+
+  // Automatically advance to the next question after a delay
+  useEffect(() => {
+    const timer = setInterval(() => {
+      if (currentQuestionIndex < randomQuestions.length - 1) {
+        setCurrentQuestionIndex((prevIndex) => prevIndex + 1);
+      }
+      else {
+        clearInterval(timer); // Stop the timer when all questions have been displayed
+      }
+    }, 100); // Adjust the delay time as needed (e.g., 5000 milliseconds = 5 seconds)
+
+    return () => clearInterval(timer); // Cleanup the timer on component unmount
+  }, [currentQuestionIndex, randomQuestions]);
+
+  // Handle autofill questions click
+  const handleAutofillQuestionClick = (questionInput: string) => {
+    props.handleInputChange({ target: { name: "message", value: questionInput } } as React.ChangeEvent<HTMLInputElement>);
+  };
+
+  return (
+    <>
+      {showOverlay && (
+        <div className="fixed inset-0 flex items-center justify-center">
+          <div className="rounded-lg pt-5 pr-10 pl-10 flex h-[50vh] flex-col divide-y overflow-y-auto pb-4">
+            <h2 className="text-lg text-center font-semibold mb-4">How can I help you today?</h2>
+            {randomQuestions.map((question, index) => (
+              <ul>
+                <li key={index} className={`p-2 mb-2 border border-zinc-500/30 dark:border-white rounded-lg hover:bg-zinc-500/30 transition duration-300 ease-in-out transform cursor-pointer ${index <= currentQuestionIndex ? 'opacity-100 duration-500' : 'opacity-0'}`}>
+                  <button
+                    className="text-blue-500 w-full text-left"
+                    onClick={() => handleAutofillQuestionClick(question.title)}
+                  >
+                    {question.title}
+                  </button>
+                </li>
+              </ul>
+            ))}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

frontend/app/components/ui/autofill-prompt/autofill-prompt.interface.tsx

@@ -0,0 +1,14 @@
+export interface QuestionsBankProp {
+    title: string;
+}
+
+export const questionsBank: QuestionsBankProp[] = [
+    { title: "Under PSSCOC, what are the differences between the role of the SO Rep and SO?" },
+    { title: "Who has the authority to appoint SO Rep assistants and what can the SO Rep assistants be authorized to do?" },
+    { title: "What are the general obligations of the contractor and consultant?" },
+    { title: "In which situations can the client claim for liquidated damages?" },
+    { title: "What are the requirements for the contractor to claim for extension of time?" },
+    { title: "What are the requirements for the contractor to claim for loss and expense?" },
+    { title: "Under PSSCOC, briefly describe the proper payment claim process prescribed." },
+    // Add more common questions as needed
+];

frontend/app/components/ui/autofill-prompt/autofill-search-prompt-dialog.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from "react";
+import { QuestionsBankProp, questionsBank } from "@/app/components/ui/autofill-prompt/autofill-prompt.interface";
+import { SearchHandler } from "@/app/components/ui/search/search.interface";
+
+export default function AutofillSearchQuery(
+  props: Pick<
+    SearchHandler,
+    "query" | "isLoading" | "onSearchSubmit" | "onInputChange" | "results" | "searchButtonPressed"
+  >,
+) {
+  // Keep track of whether to show the overlay
+  const [showOverlay, setShowOverlay] = useState(true);
+  // Randomly select a subset of questions
+  const [randomQuestions, setRandomQuestions] = useState<QuestionsBankProp[]>([]);
+  // Keep track of the current question index
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+
+  // Shuffle the array using Fisher-Yates algorithm
+  function shuffleArray(array: any[]) {
+    for (let i = array.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [array[i], array[j]] = [array[j], array[i]];
+    }
+    return array;
+  }
+
+  // TODO: To load the questionsbank from a database in the future
+
+  // Randomly select a subset of 3-4 questions
+  useEffect(() => {
+    // Shuffle the questionsBank array
+    const shuffledQuestions = shuffleArray(questionsBank);
+    // Get a random subset of 3-4 questions
+    const subsetSize = Math.floor(Math.random() * 2) + 3; // Randomly choose between 3 and 4
+    const selectedQuestions = shuffledQuestions.slice(0, subsetSize);
+    // Do a short delay before setting the state to show the animation
+    setTimeout(() => {
+      setRandomQuestions(selectedQuestions);
+    }, 300);
+  }, []);
+
+
+  // Hide overlay when there are query
+  useEffect(() => {
+    if (props.query.length > 0) {
+      setShowOverlay(false);
+    }
+    else {
+      setShowOverlay(true);
+    }
+  }, [props.results, props.query]);
+
+  // Automatically advance to the next question after a delay
+  useEffect(() => {
+    const timer = setInterval(() => {
+      if (currentQuestionIndex < randomQuestions.length - 1) {
+        setCurrentQuestionIndex((prevIndex) => prevIndex + 1);
+      }
+      else {
+        clearInterval(timer); // Stop the timer when all questions have been displayed
+      }
+    }, 100); // Adjust the delay time as needed (e.g., 5000 milliseconds = 5 seconds)
+
+    return () => clearInterval(timer); // Cleanup the timer on component unmount
+  }, [currentQuestionIndex, randomQuestions]);
+
+  // Handle autofill questions click
+  const handleAutofillQuestionClick = (questionInput: string) => {
+    if (props.onInputChange) {
+      props.onInputChange({ target: { name: "message", value: questionInput } } as React.ChangeEvent<HTMLInputElement>);
+    }
+  };
+
+  return (
+    <>
+      {showOverlay && (
+        <div className="relative mx-auto">
+          <div className="rounded-lg pt-5 pr-10 pl-10 flex flex-col divide-y overflow-y-auto pb-4 bg-white dark:bg-zinc-700/30 shadow-xl">
+            <h2 className="text-lg text-center font-semibold mb-4">How can I help you today?</h2>
+            {randomQuestions.map((question, index) => (
+              <ul>
+                <li key={index} className={`p-2 mb-2 border border-zinc-500/30 dark:border-white rounded-lg hover:bg-zinc-500/30 transition duration-300 ease-in-out transform cursor-pointer ${index <= currentQuestionIndex ? 'opacity-100 duration-500' : 'opacity-0'}`}>
+                  <button
+                    className="text-blue-500 w-full text-left"
+                    onClick={() => handleAutofillQuestionClick(question.title)}
+                  >
+                    {question.title}
+                  </button>
+                </li>
+              </ul>
+            ))}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

frontend/app/components/ui/chat/chat-input.tsx

@@ -1,6 +1,6 @@
-import { Button } from "../button";
-import { Input } from "../input";
-import { ChatHandler } from "./chat.interface";
+import { Button } from "@/app/components/ui/button";
+import { Input } from "@/app/components/ui/input";
+import { ChatHandler } from "@/app/components/ui/chat/chat.interface";
 import { Send } from "lucide-react";
 
 export default function ChatInput(
@@ -9,6 +9,7 @@ export default function ChatInput(
     "isLoading" | "handleSubmit" | "handleInputChange" | "input"
   >,
 ) {
+
   return (
     <form
       onSubmit={props.handleSubmit}
@@ -18,7 +19,7 @@ export default function ChatInput(
         autoFocus
         name="message"
         placeholder="Type a Message"
-        className="flex-1 bg-white dark:bg-zinc-500/30"
+        className="flex-1 bg-white dark:bg-zinc-500/30 z-10"
         value={props.input}
         onChange={props.handleInputChange}
       />
@@ -27,7 +28,7 @@ export default function ChatInput(
         <Send className="h-5 w-5" />
       </Button>
       <Button type="submit" disabled={props.isLoading} className="md:hidden"> {/* Hide on larger screens */}
-        <Send className="h-5 w-5"/>
+        <Send className="h-5 w-5" />
       </Button>
     </form>
   );

frontend/app/components/{login-buttons.tsx → ui/login-buttons.tsx}

@@ -1,8 +1,7 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState } 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'
@@ -20,20 +19,16 @@ function GoogleLoginButton({
 }: LoginButtonProps) {
   const [isLoading, setIsLoading] = useState(false);
 
-  useEffect(() => {
-    setIsLoading(false);
-  }, []);
-
   return (
     <Button
       variant="outline"
       onClick={() => {
         setIsLoading(true);
-        signIn('google', { callbackUrl: `/chat` });
+        signIn('google');
       }}
-      disabled={isLoading}
       className={cn(className)}
       {...props}
+      disabled={isLoading}
     >
       {isLoading ? (
         <IconSpinner className="mr-2 animate-spin" />
@@ -58,11 +53,11 @@ function SGIDLoginButton({
       variant="outline"
       onClick={() => {
         setIsLoading(true);
-        signIn('sgid', { callbackUrl: `/chat` });
+        signIn('sgid');
       }}
-      disabled={isLoading}
       className={cn(className)}
       {...props}
+      disabled={isLoading}
     >
       {isLoading ? (
         <IconSpinner className="mr-2 animate-spin" />

frontend/app/components/ui/main-container.tsx

@@ -9,7 +9,7 @@ interface ContainerProps {
 
 const Main: React.FC<ContainerProps> = ({ children }) => {
     return (
-        <main className={cn("flex min-h-screen flex-col items-center gap-10 background-gradient dark:background-gradient-dark pt-10 px-4")}>
+        <main className={cn("flex min-h-screen flex-col items-center gap-10 background-gradient dark:background-gradient-dark pt-10 px-4 transition duration-300 ease-in-out transform")}>
             {children}
         </main>
     );

frontend/app/components/ui/search/search-input.tsx

@@ -1,18 +1,11 @@
 // SearchInput.tsx
 
-import { ChangeEvent, FormEvent } from "react";
 import { Button } from "@/app/components/ui/button";
 import { Input } from "@/app/components/ui/input";
 import { Search } from "lucide-react";
+import { SearchHandler } from "@/app/components/ui/search/search.interface";
 
-interface SearchInputProps {
-    query: string;
-    isLoading: boolean;
-    onInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
-    onSearchSubmit: (e: FormEvent) => void;
-}
-
-const SearchInput: React.FC<SearchInputProps> = ({
+const SearchInput: React.FC<SearchHandler> = ({
     query,
     isLoading,
     onInputChange,

frontend/app/components/ui/search/search-results.tsx

@@ -1,24 +1,71 @@
-import { SearchResult } from "@/app/components/ui/search/search-types"
 import { IconSpinner } from "@/app/components/ui/icons";
-import { Fragment, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { ArrowDownFromLine, ArrowUpFromLine, Copy } from "lucide-react";
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { SearchHandler, SearchResult } from "@/app/components/ui/search/search.interface";
 
-interface SearchResultsProps {
-    results: SearchResult[];
-    isLoading: boolean;
-}
+const SearchResults: React.FC<SearchHandler> = ({ query, results, isLoading, searchButtonPressed }) => {
+    const [sortedResults, setSortedResults] = useState<SearchResult[]>([]);
+    const [expandedResult, setExpandedResult] = useState<number | null>(null);
 
+    // Sort results by similarity score whenever results or query change
+    useEffect(() => {
+        if (query.trim() === "" && !searchButtonPressed){
+            // Reset sortedResults when query is empty
+            setSortedResults([]);
+        } else if (query.trim() !== "" && searchButtonPressed) {
+            // Sort results by similarity score
+            const sorted = results.slice().sort((a, b) => b.similarity_score - a.similarity_score);
+            // Update sortedResults state
+            setSortedResults(sorted);
+        }
+    }, [query, results]);
 
-const SearchResults: React.FC<SearchResultsProps> = ({ results, isLoading }) => {
-    const sortedResults = results.slice().sort((a, b) => b.similarity_score - a.similarity_score);
-    const [expandedResult, setExpandedResult] = useState<number | null>(null);
+    // Log sortedResults outside of useEffect to ensure you're getting the updated state
+    // console.log("Sorted results:", sortedResults);
 
+    // Handle expand/collapse of search results
     const handleToggleExpand = (resultId: number) => {
         setExpandedResult((prevId) => (prevId === resultId ? null : resultId));
     };
 
+    // TODO: Add a collapse all/ expand all button
+
+    // TODO: Add a button to clear search results & not on query change to empty string
+
+    // Handle Reseting the expanded result when the search button is pressed
+    useEffect(() => {
+        if (searchButtonPressed) {
+            setExpandedResult(null);
+        }
+    }, [searchButtonPressed]);
+
+    // Handle when there are no search results and search button is not pressed
+    if (sortedResults.length === 0 && !searchButtonPressed) {
+        return (
+            null
+        );
+    }
+
+    if (isLoading) {
+        return (
+            <div className="flex w-full items-center justify-center rounded-xl bg-white dark:bg-zinc-700/30 p-4 shadow-xl">
+                <IconSpinner className="mr-2 animate-spin" />
+                <p>Loading...</p>
+            </div>
+        );
+    }
+
+    // Handle when there are no search results
+    if (sortedResults.length === 0 && query.trim() !== "" && searchButtonPressed) {
+        return (
+            <div className="flex w-full items-center justify-center rounded-xl bg-white dark:bg-zinc-700/30 p-4 shadow-xl">
+                <p>No results found.</p>
+            </div>
+        );
+    }
+
     const showToastMessage = () => {
         toast.success("Text copied to clipboard!", {
             position: "top-center",
@@ -35,64 +82,55 @@ const SearchResults: React.FC<SearchResultsProps> = ({ results, isLoading }) =>
     return (
         <div className="flex w-full items-center justify-between rounded-xl bg-white dark:bg-zinc-700/30 p-4 shadow-xl">
             <ToastContainer />
-            {isLoading ? (
-                <div className="flex items-center">
-                    <IconSpinner className="mr-2 animate-spin" />
-                    <p>Loading...</p>
-                </div>
-            ) : null}
-            {!isLoading && sortedResults.length === 0 && <p>No results found.</p>}
             <div className="relative overflow-x-auto">
-                {!isLoading && sortedResults.length > 0 && (
-                    <table className="w-full text-xl text-left rtl:text-right text-gray-500 dark:text-gray-400 p-4">
-                        <thead className="text-sm text-center text-gray-700 uppercase bg-gray-400 dark:bg-gray-700 dark:text-gray-400">
-                            <tr>
-                                <th scope="col" className="px-6 py-3">ID</th>
-                                <th scope="col" className="px-6 py-3">File Name</th>
-                                <th scope="col" className="px-6 py-3">Page</th>
-                                <th scope="col" className="px-6 py-3">Text</th>
-                                <th scope="col" className="px-6 py-3">Score</th>
-                                <th scope="col" className="px-6 py-3">Action</th>
-                                <th scope="col" className="px-6 py-3">Expand</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {sortedResults.map((result) => (
-                                <Fragment key={result.id}>
-                                    <tr
-                                        className="text-sm text-center item-center bg-gray-100 border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer"
-                                    >
-                                        <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white" onClick={() => handleToggleExpand(result.id)}>{result.id}</th>
-                                        <td className="px-6 py-4" onClick={() => handleToggleExpand(result.id)}>{result.file_name}</td>
-                                        <td className="px-6 py-4" onClick={() => handleToggleExpand(result.id)}>{result.page_no}</td>
-                                        <td className="px-6 py-4" onClick={() => handleToggleExpand(result.id)}>
+                <table className="w-full text-xl text-left rtl:text-right text-gray-500 dark:text-gray-400 p-4">
+                    <thead className="text-sm text-center text-gray-700 uppercase bg-gray-400 dark:bg-gray-700 dark:text-gray-400">
+                        <tr>
+                            <th scope="col" className="px-6 py-3">ID</th>
+                            <th scope="col" className="px-6 py-3">File Name</th>
+                            <th scope="col" className="px-6 py-3">Page</th>
+                            <th scope="col" className="px-6 py-3">Text</th>
+                            <th scope="col" className="px-6 py-3">Score</th>
+                            <th scope="col" className="px-6 py-3">Action</th>
+                            <th scope="col" className="px-6 py-3">Expand</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {sortedResults.map((result) => (
+                            <Fragment key={result.id}>
+                                <tr
+                                    className="text-sm text-center item-center bg-gray-100 border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer"
+                                >
+                                    <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white" onClick={() => handleToggleExpand(result.id)}>{result.id}</th>
+                                    <td className="px-6 py-4" onClick={() => handleToggleExpand(result.id)}>{result.file_name}</td>
+                                    <td className="px-6 py-4" onClick={() => handleToggleExpand(result.id)}>{result.page_no}</td>
+                                    <td className="px-6 py-4" onClick={() => handleToggleExpand(result.id)}>
+                                        {expandedResult === result.id ? (
+                                            <span>{result.text}</span>
+                                        ) : (
+                                            <span>{result.text.slice(0, 50)}...</span>
+                                        )}
+                                    </td>
+                                    <td className="px-6 py-4" onClick={() => handleToggleExpand(result.id)}>{result.similarity_score.toFixed(2)}</td>
+                                    <td className="px-6 py-4 hover:bg-green-300 transition duration-300 ease-in-out transform hover:scale-105" onClick={() => handleCopyText(result.text)}>
+                                        <div role="img" aria-label="copy text icon" className="flex items-center justify-center">
+                                            <Copy />
+                                        </div>
+                                    </td>
+                                    <td className="px-6 py-4" onClick={() => handleToggleExpand(result.id)}>
+                                        <div role="img" aria-label="expand icon" className="flex items-center justify-center">
                                             {expandedResult === result.id ? (
-                                                <span>{result.text}</span>
+                                                <ArrowUpFromLine />
                                             ) : (
-                                                <span>{result.text.slice(0, 50)}...</span>
+                                                <ArrowDownFromLine />
                                             )}
-                                        </td>
-                                        <td className="px-6 py-4" onClick={() => handleToggleExpand(result.id)}>{result.similarity_score.toFixed(2)}</td>
-                                        <td className="px-6 py-4 hover:bg-green-300 transition duration-300 ease-in-out transform hover:scale-105" onClick={() => handleCopyText(result.text)}>
-                                            <div role="img" aria-label="copy text icon" className="flex items-center justify-center">
-                                                <Copy />
-                                            </div>
-                                        </td>
-                                        <td className="px-6 py-4" onClick={() => handleToggleExpand(result.id)}>
-                                            <div role="img" aria-label="expand icon" className="flex items-center justify-center">
-                                                {expandedResult === result.id ? (
-                                                    <ArrowUpFromLine />
-                                                ) : (
-                                                    <ArrowDownFromLine />
-                                                )}
-                                            </div>
-                                        </td>
-                                    </tr>
-                                </Fragment>
-                            ))}
-                        </tbody>
-                    </table>
-                )}
+                                        </div>
+                                    </td>
+                                </tr>
+                            </Fragment>
+                        ))}
+                    </tbody>
+                </table>
             </div>
         </div>
     );

frontend/app/components/ui/search/{search-types.tsx → search.interface.ts}

@@ -1,4 +1,14 @@
-// SearchTypes.tsx
+import { ChangeEvent, FormEvent } from "react";
+
+export interface SearchHandler {
+    query: string;
+    isLoading: boolean;
+    onInputChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onSearchSubmit?: (e: FormEvent) => void;
+    results: SearchResult[];
+    searchButtonPressed?: boolean;
+}
+
 export interface SearchResult {
     id: number;
     file_name: string;

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { SearchResult } from "@/app/components/ui/search/search-types";
+import { SearchResult } from "@/app/components/ui/search/search.interface";
 
 interface UseSearchResult {
     searchResults: SearchResult[];
@@ -14,27 +14,31 @@ const search_api = process.env.NEXT_PUBLIC_SEARCH_API;
 const useSearch = (): UseSearchResult => {
     const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
     const [isLoading, setIsLoading] = useState(false);
+    const [isSearchButtonPressed, setIsSearchButtonPressed] = useState(false);
 
     const handleSearch = async (query: string): Promise<void> => {
+        setIsSearchButtonPressed(isSearchButtonPressed);
         setIsLoading(true);
 
+        // Check if search API is defined
         if (!search_api) {
             console.error("Search API is not defined");
             setIsLoading(false);
             return;
         }
+
         // Perform search logic here
         try {
             console.log("Searching for:", query);
             // check if query is empty
-            if (query === "") {
+            if (query.trim() === "") { // Trim whitespace from query and check if it's empty
                 setSearchResults([]);
                 setIsLoading(false);
                 return;
             }
             const response = await fetch(`${search_api}?query=${query}`, {
                 signal: AbortSignal.timeout(120000), // Abort the request if it takes longer than 120 seconds
-                });
+            });
             const data = await response.json();
             setSearchResults(data);
         } catch (error: any) {

frontend/app/sign-in/page.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import { GoogleLoginButton, SGIDLoginButton } from '@/app/components/login-buttons';
+import { GoogleLoginButton, SGIDLoginButton } from '@/app/components/ui/login-buttons';
+import { useRouter } from 'next/navigation';
 
 const SignInPage = () => {
+  const router = useRouter();
   return (
     <div className="rounded-xl shadow-xl p-4 max-w-5xl w-full">
       <div className="max-w-2xl mx-auto text-center">
@@ -16,7 +18,7 @@ const SignInPage = () => {
               <GoogleLoginButton />
               <SGIDLoginButton />
               <p className="text-gray-200 text-sm">
-                Note: SGID login is only available via SingPass.
+                Note: SGID login is only available via SingPass App.
               </p>
               <div className="flex items-center justify-center gap-4">
                 <div className="w-full h-px bg-gray-300"></div>
@@ -24,8 +26,8 @@ const SignInPage = () => {
               <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 = '/';
+                  // Redirect back to the last page
+                  router.back();
                 }}
               >
                 Cancel

frontend/public/sitemap.xml

@@ -1,20 +1,27 @@
 <?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>
-
-
+  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-02-06T06:15:09+00:00</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>
+      https://smart-retrieval-demo.vercel.app/about</loc>
+    <lastmod>2024-02-06T06:15:09+00:00</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://smart-retrieval-demo.vercel.app/terms-of-service</loc>
+    <lastmod>2024-02-06T06:15:09+00:00</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://smart-retrieval-demo.vercel.app/privacy-policy</loc>
+    <lastmod>2024-02-06T06:15:09+00:00</lastmod>
+    <priority>0.80</priority>
+  </url>
 </urlset>