Fix handling of embeddings_key in api_search() function

Fix application + script requirements.txt

.env-template

@@ -1,4 +1,5 @@
 API_KEY=<LLM api key (for example, open ai key)>
+LLM_NAME=docsgpt
 VITE_API_STREAMING=true
 
 #For Azure (you can delete it if you don't use Azure)

.github/holopin.yml

@@ -1,5 +1,5 @@
 organization: arc53
-defaultSticker: cln9dm7qz164460gk5ksrgr034
+defaultSticker: clqmdf0ed34290glbvqh0kzxd
 stickers:
-  - id: cln9dm7qz164460gk5ksrgr034
-    alias: hacktober
+  - id: clqmdf0ed34290glbvqh0kzxd
+    alias: festive

README.md

@@ -18,7 +18,7 @@ Say goodbye to time-consuming manual searches, and let <strong><a href="https://
   <a href="https://github.com/arc53/DocsGPT">![link to main GitHub showing Forks number](https://img.shields.io/github/forks/arc53/docsgpt?style=social)</a>
   <a href="https://github.com/arc53/DocsGPT/blob/main/LICENSE">![link to license file](https://img.shields.io/github/license/arc53/docsgpt)</a>
   <a href="https://discord.gg/n5BX8dh8rU">![link to discord](https://img.shields.io/discord/1070046503302877216)</a>
-  <a href="https://twitter.com/ATushynski">![X (formerly Twitter) URL](https://img.shields.io/twitter/follow/ATushynski)</a>
+  <a href="https://twitter.com/docsgptai">![X (formerly Twitter) URL](https://img.shields.io/twitter/follow/docsgptai)</a>
 
  
 </div>
@@ -83,17 +83,18 @@ On Mac OS or Linux, write:
 
 `./setup.sh`
 
-It will install all the dependencies and allow you to download the local model or use OpenAI.
+It will install all the dependencies and allow you to download the local model, use OpenAI or use our LLM API.
 
 Otherwise, refer to this Guide:
 
 1. Download and open this repository with `git clone https://github.com/arc53/DocsGPT.git`
-2. Create a `.env` file in your root directory and set the env variable `API_KEY` with your [OpenAI API key](https://platform.openai.com/account/api-keys) and `VITE_API_STREAMING` to true or false, depending on whether you want streaming answers or not.
+2. Create a `.env` file in your root directory and set the env variables and `VITE_API_STREAMING` to true or false, depending on whether you want streaming answers or not.
    It should look like this inside:
 
    ```
-   API_KEY=Yourkey
+   LLM_NAME=[docsgpt or openai or others] 
    VITE_API_STREAMING=true
+   API_KEY=[if LLM_NAME is openai]
    ```
 
    See optional environment variables in the [/.env-template](https://github.com/arc53/DocsGPT/blob/main/.env-template) and [/application/.env_sample](https://github.com/arc53/DocsGPT/blob/main/application/.env_sample) files.
@@ -123,7 +124,7 @@ docker compose -f docker-compose-dev.yaml up -d
 > Make sure you have Python 3.10 or 3.11 installed.
 
 1. Export required environment variables or prepare a `.env` file in the `/application` folder:
-   - Copy [.env_sample](https://github.com/arc53/DocsGPT/blob/main/application/.env_sample) and create `.env` with your OpenAI API token for the `API_KEY` and `EMBEDDINGS_KEY` fields.
+   - Copy [.env_sample](https://github.com/arc53/DocsGPT/blob/main/application/.env_sample) and create `.env`.
 
 (check out [`application/core/settings.py`](application/core/settings.py) if you want to see more config options.)
 
@@ -144,14 +145,22 @@ python -m venv venv
  venv/Scripts/activate
 ```
 
-3. Change to the `application/` subdir by the command `cd application/` and install dependencies for the backend:
+3. Download embedding model and save it in the `model/` folder:
+You can use the script below, or download it manually from [here](https://d3dg1063dc54p9.cloudfront.net/models/embeddings/mpnet-base-v2.zip), unzip it and save it in the `model/` folder.
 
 ```commandline
-pip install -r application/requirements.txt
+wget https://d3dg1063dc54p9.cloudfront.net/models/embeddings/mpnet-base-v2.zip
+unzip mpnet-base-v2.zip -d model
+rm mpnet-base-v2.zip
+
+4. Change to the `application/` subdir by the command `cd application/` and install dependencies for the backend:
+
+```commandline
+pip install -r requirements.txt
 ```
 
-4. Run the app using `flask --app application/app.py run --host=0.0.0.0 --port=7091`.
-5. Start worker with `celery -A application.app.celery worker -l INFO`.
+5. Run the app using `flask --app application/app.py run --host=0.0.0.0 --port=7091`.
+6. Start worker with `celery -A application.app.celery worker -l INFO`.
 
 ### Start Frontend
 

application/Dockerfile

@@ -1,19 +1,25 @@
-FROM python:3.10-slim-bullseye as builder
+FROM python:3.11-slim-bullseye as builder
 
 # Tiktoken requires Rust toolchain, so build it in a separate stage
 RUN apt-get update && apt-get install -y gcc curl
 RUN curl https://sh.rustup.rs -sSf | sh -s -- -y && apt-get install --reinstall libc6-dev -y
 ENV PATH="/root/.cargo/bin:${PATH}"
-RUN pip install --upgrade pip && pip install tiktoken==0.3.3
+RUN pip install --upgrade pip && pip install tiktoken==0.5.2
 COPY requirements.txt .
 RUN pip install -r requirements.txt
+RUN apt-get install -y wget unzip
+RUN wget https://d3dg1063dc54p9.cloudfront.net/models/embeddings/mpnet-base-v2.zip
+RUN unzip mpnet-base-v2.zip -d model
+RUN rm mpnet-base-v2.zip
 
-FROM python:3.10-slim-bullseye
+FROM python:3.11-slim-bullseye
 
 # Copy pre-built packages and binaries from builder stage
 COPY --from=builder /usr/local/ /usr/local/
 
 WORKDIR /app
+COPY --from=builder /model /app/model
+
 COPY . /app/application
 ENV FLASK_APP=app.py
 ENV FLASK_DEBUG=true

application/api/answer/routes.py

@@ -117,12 +117,9 @@ def complete_stream(question, docsearch, chat_history, api_key, prompt_id, conve
     source_log_docs = []
     for doc in docs:
         if doc.metadata:
-            data = json.dumps({"type": "source", "doc": doc.page_content, "metadata": doc.metadata})
             source_log_docs.append({"title": doc.metadata['title'].split('/')[-1], "text": doc.page_content})
         else:
-            data = json.dumps({"type": "source", "doc": doc.page_content})
             source_log_docs.append({"title": doc.page_content, "text": doc.page_content})
-        yield f"data:{data}\n\n"
 
     if len(chat_history) > 1:
         tokens_current_history = 0
@@ -343,3 +340,35 @@ def api_answer():
         traceback.print_exc()
         print(str(e))
         return bad_request(500, str(e))
+
+
+@answer.route("/api/search", methods=["POST"])
+def api_search():
+    data = request.get_json()
+    # get parameter from url question
+    question = data["question"]
+
+    if not embeddings_key_set:
+        if "embeddings_key" in data:
+            embeddings_key = data["embeddings_key"]
+        else:
+            embeddings_key = settings.EMBEDDINGS_KEY
+    else:
+        embeddings_key = settings.EMBEDDINGS_KEY
+    if "active_docs" in data:
+        vectorstore = get_vectorstore({"active_docs": data["active_docs"]})
+    else:
+        vectorstore = ""
+    docsearch = VectorCreator.create_vectorstore(settings.VECTOR_STORE, vectorstore, embeddings_key)
+
+    docs = docsearch.search(question, k=2)
+
+    source_log_docs = []
+    for doc in docs:
+        if doc.metadata:
+            source_log_docs.append({"title": doc.metadata['title'].split('/')[-1], "text": doc.page_content})
+        else:
+            source_log_docs.append({"title": doc.page_content, "text": doc.page_content})
+        #yield f"data:{data}\n\n"
+    return source_log_docs
+

application/core/settings.py

@@ -1,13 +1,14 @@
 from pathlib import Path
+from typing import Optional
 import os
 
-from pydantic import BaseSettings
+from pydantic_settings import BaseSettings
 current_dir = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
 
 
 class Settings(BaseSettings):
-    LLM_NAME: str = "openai"
-    EMBEDDINGS_NAME: str = "openai_text-embedding-ada-002"
+    LLM_NAME: str = "docsgpt"
+    EMBEDDINGS_NAME: str = "huggingface_sentence-transformers/all-mpnet-base-v2"
     CELERY_BROKER_URL: str = "redis://localhost:6379/0"
     CELERY_RESULT_BACKEND: str = "redis://localhost:6379/1"
     MONGO_URI: str = "mongodb://localhost:27017/docsgpt"
@@ -18,25 +19,25 @@ class Settings(BaseSettings):
 
     API_URL: str = "http://localhost:7091"  # backend url for celery worker
 
-    API_KEY: str = None  # LLM api key
-    EMBEDDINGS_KEY: str = None  # api key for embeddings (if using openai, just copy API_KEY)
-    OPENAI_API_BASE: str = None  # azure openai api base url
-    OPENAI_API_VERSION: str = None  # azure openai api version
-    AZURE_DEPLOYMENT_NAME: str = None  # azure deployment name for answering
-    AZURE_EMBEDDINGS_DEPLOYMENT_NAME: str = None  # azure deployment name for embeddings
+    API_KEY: Optional[str] = None  # LLM api key
+    EMBEDDINGS_KEY: Optional[str] = None  # api key for embeddings (if using openai, just copy API_KEY)
+    OPENAI_API_BASE: Optional[str] = None  # azure openai api base url
+    OPENAI_API_VERSION: Optional[str] = None  # azure openai api version
+    AZURE_DEPLOYMENT_NAME: Optional[str] = None  # azure deployment name for answering
+    AZURE_EMBEDDINGS_DEPLOYMENT_NAME: Optional[str] = None  # azure deployment name for embeddings
 
     # elasticsearch
-    ELASTIC_CLOUD_ID: str = None # cloud id for elasticsearch
-    ELASTIC_USERNAME: str = None # username for elasticsearch
-    ELASTIC_PASSWORD: str = None # password for elasticsearch
-    ELASTIC_URL: str = None # url for elasticsearch
-    ELASTIC_INDEX: str = "docsgpt" # index name for elasticsearch
+    ELASTIC_CLOUD_ID: Optional[str] = None # cloud id for elasticsearch
+    ELASTIC_USERNAME: Optional[str] = None # username for elasticsearch
+    ELASTIC_PASSWORD: Optional[str] = None # password for elasticsearch
+    ELASTIC_URL: Optional[str] = None # url for elasticsearch
+    ELASTIC_INDEX: Optional[str] = "docsgpt" # index name for elasticsearch
 
     # SageMaker config
-    SAGEMAKER_ENDPOINT: str = None # SageMaker endpoint name
-    SAGEMAKER_REGION: str = None # SageMaker region name
-    SAGEMAKER_ACCESS_KEY: str = None # SageMaker access key
-    SAGEMAKER_SECRET_KEY: str = None # SageMaker secret key
+    SAGEMAKER_ENDPOINT: Optional[str] = None # SageMaker endpoint name
+    SAGEMAKER_REGION: Optional[str] = None # SageMaker region name
+    SAGEMAKER_ACCESS_KEY: Optional[str] = None # SageMaker access key
+    SAGEMAKER_SECRET_KEY: Optional[str] = None # SageMaker secret key
 
 
 path = Path(__file__).parent.parent.absolute()

application/llm/docsgpt_provider.py

@@ -0,0 +1,49 @@
+from application.llm.base import BaseLLM
+import json
+import requests
+
+class DocsGPTAPILLM(BaseLLM):
+
+    def __init__(self, *args, **kwargs):
+        self.endpoint =  "https://llm.docsgpt.co.uk"
+
+
+    def gen(self, model, engine, messages, stream=False, **kwargs):
+        context = messages[0]['content']
+        user_question = messages[-1]['content']
+        prompt = f"### Instruction \n {user_question} \n ### Context \n {context} \n ### Answer \n"
+
+        response = requests.post(
+            f"{self.endpoint}/answer",
+            json={
+                "prompt": prompt,
+                "max_new_tokens": 30
+            }
+        )
+        response_clean = response.json()['a'].split("###")[0]
+
+        return response_clean
+
+    def gen_stream(self, model, engine, messages, stream=True, **kwargs):
+        context = messages[0]['content']
+        user_question = messages[-1]['content']
+        prompt = f"### Instruction \n {user_question} \n ### Context \n {context} \n ### Answer \n"
+
+        # send prompt to endpoint /stream
+        response = requests.post(
+            f"{self.endpoint}/stream",
+            json={
+                "prompt": prompt,
+                "max_new_tokens": 256
+            },
+            stream=True
+        )
+    
+        for line in response.iter_lines():
+            if line:
+                #data = json.loads(line)
+                data_str = line.decode('utf-8')
+                if data_str.startswith("data: "):
+                    data = json.loads(data_str[6:])
+                    yield data['a']
+                    

application/llm/llm_creator.py

@@ -3,6 +3,7 @@ from application.llm.sagemaker import SagemakerAPILLM
 from application.llm.huggingface import HuggingFaceLLM
 from application.llm.llama_cpp import LlamaCpp
 from application.llm.anthropic import AnthropicLLM
+from application.llm.docsgpt_provider import DocsGPTAPILLM
 
 
 
@@ -13,7 +14,8 @@ class LLMCreator:
         'sagemaker': SagemakerAPILLM,
         'huggingface': HuggingFaceLLM,
         'llama.cpp': LlamaCpp,
-        'anthropic': AnthropicLLM
+        'anthropic': AnthropicLLM,
+        'docsgpt': DocsGPTAPILLM
     }
 
     @classmethod

application/llm/openai.py

@@ -5,40 +5,38 @@ class OpenAILLM(BaseLLM):
 
     def __init__(self, api_key):
         global openai
-        import openai
-        openai.api_key = api_key
-        self.api_key = api_key  # Save the API key to be used later
+        from openai import OpenAI
+        
+        self.client = OpenAI(
+                api_key=api_key, 
+            )
+        self.api_key = api_key
 
     def _get_openai(self):
         # Import openai when needed
         import openai
-        # Set the API key every time you import openai
-        openai.api_key = self.api_key
+        
         return openai
 
     def gen(self, model, engine, messages, stream=False, **kwargs):
-        response = openai.ChatCompletion.create(
-            model=model,
-            engine=engine,
+        response = self.client.chat.completions.create(model=model,
             messages=messages,
             stream=stream,
-            **kwargs
-        )
+            **kwargs)
 
-        return response["choices"][0]["message"]["content"]
+        return response.choices[0].message.content
 
     def gen_stream(self, model, engine, messages, stream=True, **kwargs):
-        response = openai.ChatCompletion.create(
-            model=model,
-            engine=engine,
+        response = self.client.chat.completions.create(model=model,
             messages=messages,
             stream=stream,
-            **kwargs
-        )
+            **kwargs)
 
         for line in response:
-            if "content" in line["choices"][0]["delta"]:
-                yield line["choices"][0]["delta"]["content"]
+            # import sys
+            # print(line.choices[0].delta.content, file=sys.stderr)
+            if line.choices[0].delta.content is not None:
+                yield line.choices[0].delta.content
 
 
 class AzureOpenAILLM(OpenAILLM):
@@ -48,10 +46,15 @@ class AzureOpenAILLM(OpenAILLM):
         self.api_base = settings.OPENAI_API_BASE,
         self.api_version = settings.OPENAI_API_VERSION,
         self.deployment_name = settings.AZURE_DEPLOYMENT_NAME,
+        from openai import AzureOpenAI
+        self.client = AzureOpenAI(
+            api_key=openai_api_key,  
+            api_version=settings.OPENAI_API_VERSION,
+            api_base=settings.OPENAI_API_BASE,
+            deployment_name=settings.AZURE_DEPLOYMENT_NAME,
+        )
 
     def _get_openai(self):
         openai = super()._get_openai()
-        openai.api_base = self.api_base
-        openai.api_version = self.api_version
-        openai.api_type = "azure"
+
         return openai

application/parser/file/bulk.py

@@ -62,7 +62,6 @@ class SimpleDirectoryReader(BaseReader):
             file_extractor: Optional[Dict[str, BaseParser]] = None,
             num_files_limit: Optional[int] = None,
             file_metadata: Optional[Callable[[str], Dict]] = None,
-            chunk_size_max: int = 2048,
     ) -> None:
         """Initialize with parameters."""
         super().__init__()

application/parser/open_ai_func.py

@@ -6,9 +6,9 @@ from application.core.settings import settings
 from retry import retry
 
 
-# from langchain.embeddings import HuggingFaceEmbeddings
-# from langchain.embeddings import HuggingFaceInstructEmbeddings
-# from langchain.embeddings import CohereEmbeddings
+# from langchain_community.embeddings import HuggingFaceEmbeddings
+# from langchain_community.embeddings import HuggingFaceInstructEmbeddings
+# from langchain_community.embeddings import CohereEmbeddings
 
 
 def num_tokens_from_string(string: str, encoding_name: str) -> int:

application/requirements.txt

@@ -1,110 +1,33 @@
-aiodns==3.0.0
-aiohttp==3.8.6
-aiohttp-retry==2.8.3
-aiosignal==1.3.1
-aleph-alpha-client==2.16.1
-amqp==5.1.1
-anthropic==0.5.0
-async-timeout==4.0.2
-attrs==22.2.0
-billiard==3.6.4.0
-blobfile==2.0.1
-boto3==1.28.20
-celery==5.2.7
-cffi==1.15.1
-charset-normalizer==3.1.0
-click==8.1.3
-click-didyoumean==0.3.0
-click-plugins==1.1.1
-click-repl==0.2.0
-cryptography==41.0.4
-dataclasses-json==0.5.7
-decorator==5.1.1
+anthropic==0.12.0
+boto3==1.34.6
+celery==5.3.6
+dataclasses_json==0.6.3
 docx2txt==0.8
-dill==0.3.6
-dnspython==2.3.0
-ecdsa==0.18.0
-elasticsearch==8.9.0
-entrypoints==0.4
-faiss-cpu==1.7.3
-filelock==3.9.0
-Flask==2.2.5
-Flask-Cors==3.0.10
-frozenlist==1.3.3
-geojson==2.5.0
-gunicorn==20.1.0
-greenlet==2.0.2
-gpt4all==0.1.7
-huggingface-hub==0.15.1
-humbug==0.3.2
-idna==3.4
-itsdangerous==2.1.2
-Jinja2==3.1.2
-jmespath==1.0.1
-joblib==1.2.0
-kombu==5.2.4
-langchain==0.0.312
-loguru==0.6.0
-lxml==4.9.2
-MarkupSafe==2.1.2
-marshmallow==3.19.0
-marshmallow-enum==1.5.1
-mpmath==1.3.0
-multidict==6.0.4
-multiprocess==0.70.14
-mypy-extensions==1.0.0
-networkx==3.0
-npx
+EbookLib==0.18
+elasticsearch==8.12.0
+escodegen==1.0.11
+esprima==4.0.1
+faiss-cpu==1.7.4
+Flask==3.0.1
+gunicorn==21.2.0
+html2text==2020.1.16
+javalang==0.13.0
+langchain==0.1.4
+langchain-openai==0.0.5
 nltk==3.8.1
-numcodecs==0.11.0
-numpy==1.24.2
-openai==0.27.8
-openapi3-parser==1.1.14
-packaging==23.0
-pathos==0.3.0
-Pillow==10.0.1
-pox==0.3.2
-ppft==1.7.6.6
-prompt-toolkit==3.0.38
-py==1.11.0
-pyasn1==0.4.8
-pycares==4.3.0
-pycparser==2.21
-pycryptodomex==3.17
-pycryptodome==3.19.0
-pydantic==1.10.5
-PyJWT==2.6.0
-pymongo==4.3.3
-pyowm==3.3.0
+openapi3_parser==1.1.16
+pandas==2.2.0
+pydantic_settings==2.1.0
+pymongo==4.6.1
 PyPDF2==3.0.1
-PySocks==1.7.1
-pytest
-python-dateutil==2.8.2
-python-dotenv==1.0.0
-python-jose==3.3.0
-pytz==2022.7.1
-PyYAML==6.0
-redis==4.5.4
-regex==2022.10.31
-requests==2.31.0
+python-dotenv==1.0.1
+redis==5.0.1
+Requests==2.31.0
 retry==0.9.2
-rsa==4.9
-scikit-learn==1.2.2
-scipy==1.10.1
-sentencepiece
-six==1.16.0
-SQLAlchemy==1.4.46
-sympy==1.11.1
-tenacity==8.2.2
-threadpoolctl==3.1.0
-tiktoken
-tqdm==4.65.0
-transformers==4.30.0
-typer==0.7.0
-typing-inspect==0.8.0
-typing_extensions==4.5.0
-urllib3==1.26.18
-vine==5.0.0
-wcwidth==0.2.6
-yarl==1.8.2
-sentence-transformers==2.2.2
+sentence-transformers
+tiktoken==0.5.2
+torch==2.1.2
+tqdm==4.66.1
+transformers==4.36.2
+unstructured==0.12.2
+Werkzeug==3.0.1

application/vectorstore/base.py

@@ -1,11 +1,11 @@
 from abc import ABC, abstractmethod
 import os
-from langchain.embeddings import (
-    OpenAIEmbeddings,
+from langchain_community.embeddings import (
     HuggingFaceEmbeddings,
     CohereEmbeddings,
     HuggingFaceInstructEmbeddings,
 )
+from langchain_openai import OpenAIEmbeddings
 from application.core.settings import settings
 
 class BaseVectorStore(ABC):
@@ -44,6 +44,11 @@ class BaseVectorStore(ABC):
             embedding_instance = embeddings_factory[embeddings_name](
                 cohere_api_key=embeddings_key
             )
+        elif embeddings_name == "huggingface_sentence-transformers/all-mpnet-base-v2":
+            embedding_instance = embeddings_factory[embeddings_name](
+                #model_name="./model/all-mpnet-base-v2",
+                model_kwargs={"device": "cpu"},
+            )
         else:
             embedding_instance = embeddings_factory[embeddings_name]()
             

application/vectorstore/document_class.py

@@ -0,0 +1,8 @@
+class Document(str):
+    """Class for storing a piece of text and associated metadata."""
+
+    def __new__(cls, page_content: str, metadata: dict):
+        instance = super().__new__(cls, page_content)
+        instance.page_content = page_content
+        instance.metadata = metadata
+        return instance

application/vectorstore/elasticsearch.py

@@ -1,16 +1,8 @@
 from application.vectorstore.base import BaseVectorStore
 from application.core.settings import settings
+from application.vectorstore.document_class import Document
 import elasticsearch
 
-class Document(str):
-    """Class for storing a piece of text and associated metadata."""
-
-    def __new__(cls, page_content: str, metadata: dict):
-        instance = super().__new__(cls, page_content)
-        instance.page_content = page_content
-        instance.metadata = metadata
-        return instance
-
 
 
 

application/vectorstore/faiss.py

@@ -1,4 +1,4 @@
-from langchain.vectorstores import FAISS
+from langchain_community.vectorstores import FAISS
 from application.vectorstore.base import BaseVectorStore
 from application.core.settings import settings
 

application/vectorstore/mongodb.py

@@ -0,0 +1,126 @@
+from application.vectorstore.base import BaseVectorStore
+from application.core.settings import settings
+from application.vectorstore.document_class import Document
+
+class MongoDBVectorStore(BaseVectorStore):
+    def __init__(
+        self,
+        path: str = "",
+        embeddings_key: str = "embeddings",
+        collection: str = "documents",
+        index_name: str = "vector_search_index",
+        text_key: str = "text",
+        embedding_key: str = "embedding",
+        database: str = "docsgpt",
+    ):
+        self._index_name = index_name
+        self._text_key = text_key
+        self._embedding_key = embedding_key
+        self._embeddings_key = embeddings_key
+        self._mongo_uri = settings.MONGO_URI
+        self._path = path.replace("application/indexes/", "").rstrip("/")
+        self._embedding = self._get_embeddings(settings.EMBEDDINGS_NAME, embeddings_key)
+
+        try:
+            import pymongo
+        except ImportError:
+            raise ImportError(
+                "Could not import pymongo python package. "
+                "Please install it with `pip install pymongo`."
+            )
+
+        self._client = pymongo.MongoClient(self._mongo_uri)
+        self._database = self._client[database]
+        self._collection = self._database[collection]
+
+        
+    def search(self, question, k=2, *args, **kwargs):
+        query_vector = self._embedding.embed_query(question)
+
+        pipeline = [
+            {
+                "$vectorSearch": {
+                    "queryVector": query_vector, 
+                    "path": self._embedding_key,
+                    "limit": k, 
+                    "numCandidates": k * 10, 
+                    "index": self._index_name,
+                    "filter": {
+                        "store": {"$eq": self._path}
+                    }
+                }
+            }
+        ]
+
+        cursor = self._collection.aggregate(pipeline)
+        
+        results = []
+        for doc in cursor:
+            text = doc[self._text_key]
+            doc.pop("_id")
+            doc.pop(self._text_key)
+            doc.pop(self._embedding_key)
+            metadata = doc
+            results.append(Document(text, metadata))
+        return results
+    
+    def _insert_texts(self, texts, metadatas):
+        if not texts:
+            return []
+        embeddings = self._embedding.embed_documents(texts)
+        to_insert = [
+            {self._text_key: t, self._embedding_key: embedding, **m}
+            for t, m, embedding in zip(texts, metadatas, embeddings)
+        ]
+        # insert the documents in MongoDB Atlas
+        insert_result = self._collection.insert_many(to_insert)
+        return insert_result.inserted_ids
+    
+    def add_texts(self,
+        texts,
+        metadatas = None,
+        ids = None,
+        refresh_indices = True,
+        create_index_if_not_exists = True,
+        bulk_kwargs = None,
+        **kwargs,):
+
+
+        #dims = self._embedding.client[1].word_embedding_dimension
+        # # check if index exists
+        # if create_index_if_not_exists:
+        #     # check if index exists
+        #     info = self._collection.index_information()
+        #     if self._index_name not in info:
+        #         index_mongo = {
+        #         "fields": [{
+        #             "type": "vector",
+        #             "path": self._embedding_key,
+        #             "numDimensions": dims,
+        #             "similarity": "cosine",
+        #         },
+        #         {
+        #             "type": "filter",
+        #             "path": "store"
+        #         }]
+        #         }
+        #         self._collection.create_index(self._index_name, index_mongo)
+
+        batch_size = 100
+        _metadatas = metadatas or ({} for _ in texts)
+        texts_batch = []
+        metadatas_batch = []
+        result_ids = []
+        for i, (text, metadata) in enumerate(zip(texts, _metadatas)):
+            texts_batch.append(text)
+            metadatas_batch.append(metadata)
+            if (i + 1) % batch_size == 0:
+                result_ids.extend(self._insert_texts(texts_batch, metadatas_batch))
+                texts_batch = []
+                metadatas_batch = []
+        if texts_batch:
+            result_ids.extend(self._insert_texts(texts_batch, metadatas_batch))
+        return result_ids
+    
+    def delete_index(self, *args, **kwargs):
+        self._collection.delete_many({"store": self._path})

application/vectorstore/vector_creator.py

@@ -1,11 +1,13 @@
 from application.vectorstore.faiss import FaissStore
 from application.vectorstore.elasticsearch import ElasticsearchStore
+from application.vectorstore.mongodb import MongoDBVectorStore
 
 
 class VectorCreator:
     vectorstores = {
         'faiss': FaissStore,
-        'elasticsearch':ElasticsearchStore
+        'elasticsearch':ElasticsearchStore,
+        'mongodb': MongoDBVectorStore,
     }
 
     @classmethod

docs/package-lock.json

@@ -4,10 +4,11 @@
   "requires": true,
   "packages": {
     "": {
+      "license": "MIT",
       "dependencies": {
         "@vercel/analytics": "^1.0.2",
         "docsgpt": "^0.2.4",
-        "next": "^13.4.19",
+        "next": "^13.5.1",
         "nextra": "^2.12.3",
         "nextra-theme-docs": "^2.12.3",
         "react": "^18.2.0",
@@ -344,14 +345,14 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "13.4.19",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.19.tgz",
-      "integrity": "sha512-FsAT5x0jF2kkhNkKkukhsyYOrRqtSxrEhfliniIq0bwWbuXLgyt3Gv0Ml+b91XwjwArmuP7NxCiGd++GGKdNMQ=="
+      "version": "13.5.1",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.1.tgz",
+      "integrity": "sha512-CIMWiOTyflFn/GFx33iYXkgLSQsMQZV4jB91qaj/TfxGaGOXxn8C1j72TaUSPIyN7ziS/AYG46kGmnvuk1oOpg=="
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "13.4.19",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.19.tgz",
-      "integrity": "sha512-vv1qrjXeGbuF2mOkhkdxMDtv9np7W4mcBtaDnHU+yJG+bBwa6rYsYSCI/9Xm5+TuF5SbZbrWO6G1NfTh1TMjvQ==",
+      "version": "13.5.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.1.tgz",
+      "integrity": "sha512-Bcd0VFrLHZnMmJy6LqV1CydZ7lYaBao8YBEdQUVzV8Ypn/l5s//j5ffjfvMzpEQ4mzlAj3fIY+Bmd9NxpWhACw==",
       "cpu": [
         "arm64"
       ],
@@ -364,9 +365,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "13.4.19",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.19.tgz",
-      "integrity": "sha512-jyzO6wwYhx6F+7gD8ddZfuqO4TtpJdw3wyOduR4fxTUCm3aLw7YmHGYNjS0xRSYGAkLpBkH1E0RcelyId6lNsw==",
+      "version": "13.5.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.1.tgz",
+      "integrity": "sha512-uvTZrZa4D0bdWa1jJ7X1tBGIxzpqSnw/ATxWvoRO9CVBvXSx87JyuISY+BWsfLFF59IRodESdeZwkWM2l6+Kjg==",
       "cpu": [
         "x64"
       ],
@@ -379,9 +380,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "13.4.19",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.19.tgz",
-      "integrity": "sha512-vdlnIlaAEh6H+G6HrKZB9c2zJKnpPVKnA6LBwjwT2BTjxI7e0Hx30+FoWCgi50e+YO49p6oPOtesP9mXDRiiUg==",
+      "version": "13.5.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.1.tgz",
+      "integrity": "sha512-/52ThlqdORPQt3+AlMoO+omicdYyUEDeRDGPAj86ULpV4dg+/GCFCKAmFWT0Q4zChFwsAoZUECLcKbRdcc0SNg==",
       "cpu": [
         "arm64"
       ],
@@ -394,9 +395,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "13.4.19",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.19.tgz",
-      "integrity": "sha512-aU0HkH2XPgxqrbNRBFb3si9Ahu/CpaR5RPmN2s9GiM9qJCiBBlZtRTiEca+DC+xRPyCThTtWYgxjWHgU7ZkyvA==",
+      "version": "13.5.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.1.tgz",
+      "integrity": "sha512-L4qNXSOHeu1hEAeeNsBgIYVnvm0gg9fj2O2Yx/qawgQEGuFBfcKqlmIE/Vp8z6gwlppxz5d7v6pmHs1NB6R37w==",
       "cpu": [
         "arm64"
       ],
@@ -409,9 +410,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "13.4.19",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.19.tgz",
-      "integrity": "sha512-htwOEagMa/CXNykFFeAHHvMJeqZfNQEoQvHfsA4wgg5QqGNqD5soeCer4oGlCol6NGUxknrQO6VEustcv+Md+g==",
+      "version": "13.5.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.1.tgz",
+      "integrity": "sha512-QVvMrlrFFYvLtABk092kcZ5Mzlmsk2+SV3xYuAu8sbTuIoh0U2+HGNhVklmuYCuM3DAAxdiMQTNlRQmNH11udw==",
       "cpu": [
         "x64"
       ],
@@ -424,9 +425,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "13.4.19",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.19.tgz",
-      "integrity": "sha512-4Gj4vvtbK1JH8ApWTT214b3GwUh9EKKQjY41hH/t+u55Knxi/0wesMzwQRhppK6Ddalhu0TEttbiJ+wRcoEj5Q==",
+      "version": "13.5.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.1.tgz",
+      "integrity": "sha512-bBnr+XuWc28r9e8gQ35XBtyi5KLHLhTbEvrSgcWna8atI48sNggjIK8IyiEBO3KIrcUVXYkldAzGXPEYMnKt1g==",
       "cpu": [
         "x64"
       ],
@@ -439,9 +440,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "13.4.19",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.19.tgz",
-      "integrity": "sha512-bUfDevQK4NsIAHXs3/JNgnvEY+LRyneDN788W2NYiRIIzmILjba7LaQTfihuFawZDhRtkYCv3JDC3B4TwnmRJw==",
+      "version": "13.5.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.1.tgz",
+      "integrity": "sha512-EQGeE4S5c9v06jje9gr4UlxqUEA+zrsgPi6kg9VwR+dQHirzbnVJISF69UfKVkmLntknZJJI9XpWPB6q0Z7mTg==",
       "cpu": [
         "arm64"
       ],
@@ -454,9 +455,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "13.4.19",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.19.tgz",
-      "integrity": "sha512-Y5kikILFAr81LYIFaw6j/NrOtmiM4Sf3GtOc0pn50ez2GCkr+oejYuKGcwAwq3jiTKuzF6OF4iT2INPoxRycEA==",
+      "version": "13.5.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.1.tgz",
+      "integrity": "sha512-1y31Q6awzofVjmbTLtRl92OX3s+W0ZfO8AP8fTnITcIo9a6ATDc/eqa08fd6tSpFu6IFpxOBbdevOjwYTGx/AQ==",
       "cpu": [
         "ia32"
       ],
@@ -469,9 +470,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "13.4.19",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.19.tgz",
-      "integrity": "sha512-YzA78jBDXMYiINdPdJJwGgPNT3YqBNNGhsthsDoWHL9p24tEJn9ViQf/ZqTbwSpX/RrkPupLfuuTH2sf73JBAw==",
+      "version": "13.5.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.1.tgz",
+      "integrity": "sha512-+9XBQizy7X/GuwNegq+5QkkxAPV7SBsIwapVRQd9WSvvU20YO23B3bZUpevdabi4fsd25y9RJDDncljy/V54ww==",
       "cpu": [
         "x64"
       ],
@@ -525,9 +526,9 @@
       }
     },
     "node_modules/@swc/helpers": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz",
-      "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==",
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
+      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -4023,12 +4024,12 @@
       }
     },
     "node_modules/next": {
-      "version": "13.4.19",
-      "resolved": "https://registry.npmjs.org/next/-/next-13.4.19.tgz",
-      "integrity": "sha512-HuPSzzAbJ1T4BD8e0bs6B9C1kWQ6gv8ykZoRWs5AQoiIuqbGHHdQO7Ljuvg05Q0Z24E2ABozHe6FxDvI6HfyAw==",
+      "version": "13.5.1",
+      "resolved": "https://registry.npmjs.org/next/-/next-13.5.1.tgz",
+      "integrity": "sha512-GIudNR7ggGUZoIL79mSZcxbXK9f5pwAIPZxEM8+j2yLqv5RODg4TkmUlaKSYVqE1bPQueamXSqdC3j7axiTSEg==",
       "dependencies": {
-        "@next/env": "13.4.19",
-        "@swc/helpers": "0.5.1",
+        "@next/env": "13.5.1",
+        "@swc/helpers": "0.5.2",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001406",
         "postcss": "8.4.14",
@@ -4040,18 +4041,18 @@
         "next": "dist/bin/next"
       },
       "engines": {
-        "node": ">=16.8.0"
+        "node": ">=16.14.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "13.4.19",
-        "@next/swc-darwin-x64": "13.4.19",
-        "@next/swc-linux-arm64-gnu": "13.4.19",
-        "@next/swc-linux-arm64-musl": "13.4.19",
-        "@next/swc-linux-x64-gnu": "13.4.19",
-        "@next/swc-linux-x64-musl": "13.4.19",
-        "@next/swc-win32-arm64-msvc": "13.4.19",
-        "@next/swc-win32-ia32-msvc": "13.4.19",
-        "@next/swc-win32-x64-msvc": "13.4.19"
+        "@next/swc-darwin-arm64": "13.5.1",
+        "@next/swc-darwin-x64": "13.5.1",
+        "@next/swc-linux-arm64-gnu": "13.5.1",
+        "@next/swc-linux-arm64-musl": "13.5.1",
+        "@next/swc-linux-x64-gnu": "13.5.1",
+        "@next/swc-linux-x64-musl": "13.5.1",
+        "@next/swc-win32-arm64-msvc": "13.5.1",
+        "@next/swc-win32-ia32-msvc": "13.5.1",
+        "@next/swc-win32-x64-msvc": "13.5.1"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",

docs/package.json

@@ -8,7 +8,7 @@
   "dependencies": {
     "@vercel/analytics": "^1.0.2",
     "docsgpt": "^0.2.4",
-    "next": "^13.4.19",
+    "next": "^13.5.1",
     "nextra": "^2.12.3",
     "nextra-theme-docs": "^2.12.3",
     "react": "^18.2.0",

docs/pages/Deploying/Hosting-the-app.md

@@ -107,3 +107,4 @@ Your instance is now available at your Public IP Address on port 5173. Enjoy usi
 
 - [Deploy DocsGPT on Civo Compute Cloud](https://dev.to/rutamhere/deploying-docsgpt-on-civo-compute-c)
 - [Deploy DocsGPT on DigitalOcean Droplet](https://dev.to/rutamhere/deploying-docsgpt-on-digitalocean-droplet-50ea)
+- [Deploy DocsGPT on Kamatera Performance Cloud](https://dev.to/rutamhere/deploying-docsgpt-on-kamatera-performance-cloud-1bj)

docs/pages/Deploying/Quickstart.md

@@ -8,7 +8,7 @@ Just run the following command:
 ./setup.sh
 ```
 
-This command will install all the necessary dependencies and provide you with an option to download the local model or use OpenAI.
+This command will install all the necessary dependencies and provide you with an option to use our LLM API, download the local model or use OpenAI.
 
 If you prefer to follow manual steps, refer to this guide:
 
@@ -16,7 +16,7 @@ If you prefer to follow manual steps, refer to this guide:
    ```bash
    git clone https://github.com/arc53/DocsGPT.git
    ```
-2. Create a `.env` file in your root directory and set your `API_KEY` with your [OpenAI API key](https://platform.openai.com/account/api-keys).
+2. Create a `.env` file in your root directory and set your `API_KEY` with your [OpenAI API key](https://platform.openai.com/account/api-keys). (optional in case you want to use OpenAI)
 3. Run the following commands:
    ```bash
    docker-compose build && docker-compose up

extensions/react-widget/dist/index.es.js

@@ -1,33 +1,5 @@
 import Ne, { useState as ke, useRef as ur, useEffect as Pe } from "react";
 var ne = { exports: {} }, Y = {};
-/**
- * @license React
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var Ce;
-function cr() {
-  if (Ce)
-    return Y;
-  Ce = 1;
-  var N = Ne, w = Symbol.for("react.element"), C = Symbol.for("react.fragment"), u = Object.prototype.hasOwnProperty, E = N.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, S = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function T(b, d, v) {
-    var m, h = {}, x = null, p = null;
-    v !== void 0 && (x = "" + v), d.key !== void 0 && (x = "" + d.key), d.ref !== void 0 && (p = d.ref);
-    for (m in d)
-      u.call(d, m) && !S.hasOwnProperty(m) && (h[m] = d[m]);
-    if (b && b.defaultProps)
-      for (m in d = b.defaultProps, d)
-        h[m] === void 0 && (h[m] = d[m]);
-    return { $$typeof: w, type: b, key: x, ref: p, props: h, _owner: E.current };
-  }
-  return Y.Fragment = C, Y.jsx = T, Y.jsxs = T, Y;
-}
-var L = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -37,9 +9,9 @@ var L = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Oe;
-function fr() {
-  return Oe || (Oe = 1, process.env.NODE_ENV !== "production" && function() {
+var Ce;
+function cr() {
+  return Ce || (Ce = 1, process.env.NODE_ENV !== "production" && function() {
     var N = Ne, w = Symbol.for("react.element"), C = Symbol.for("react.portal"), u = Symbol.for("react.fragment"), E = Symbol.for("react.strict_mode"), S = Symbol.for("react.profiler"), T = Symbol.for("react.provider"), b = Symbol.for("react.context"), d = Symbol.for("react.forward_ref"), v = Symbol.for("react.suspense"), m = Symbol.for("react.suspense_list"), h = Symbol.for("react.memo"), x = Symbol.for("react.lazy"), p = Symbol.for("react.offscreen"), R = Symbol.iterator, j = "@@iterator";
     function J(e) {
       if (e === null || typeof e != "object")
@@ -366,7 +338,7 @@ function fr() {
     }
     function ye(e) {
       if (Je(e))
-        return g("The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", qe(e)), ge(e);
+        return g("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", qe(e)), ge(e);
     }
     var W = O.ReactCurrentOwner, Be = {
       key: !0,
@@ -621,10 +593,38 @@ Check the top-level render call using <` + t + ">.");
       return Se(e, r, t, !1);
     }
     var sr = or, lr = ir;
-    L.Fragment = u, L.jsx = sr, L.jsxs = lr;
-  }()), L;
+    Y.Fragment = u, Y.jsx = sr, Y.jsxs = lr;
+  }()), Y;
 }
-process.env.NODE_ENV === "production" ? ne.exports = cr() : ne.exports = fr();
+var L = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Oe;
+function fr() {
+  if (Oe)
+    return L;
+  Oe = 1;
+  var N = Ne, w = Symbol.for("react.element"), C = Symbol.for("react.fragment"), u = Object.prototype.hasOwnProperty, E = N.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, S = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function T(b, d, v) {
+    var m, h = {}, x = null, p = null;
+    v !== void 0 && (x = "" + v), d.key !== void 0 && (x = "" + d.key), d.ref !== void 0 && (p = d.ref);
+    for (m in d)
+      u.call(d, m) && !S.hasOwnProperty(m) && (h[m] = d[m]);
+    if (b && b.defaultProps)
+      for (m in d = b.defaultProps, d)
+        h[m] === void 0 && (h[m] = d[m]);
+    return { $$typeof: w, type: b, key: x, ref: p, props: h, _owner: E.current };
+  }
+  return L.Fragment = C, L.jsx = T, L.jsxs = T, L;
+}
+process.env.NODE_ENV === "production" ? ne.exports = fr() : ne.exports = cr();
 var l = ne.exports;
 function dr({
   question: N = "",

extensions/react-widget/dist/src/App.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function App(): JSX.Element;
+export default App;

extensions/react-widget/dist/src/components/index.d.ts

@@ -0,0 +1 @@
+export { DocsGPTWidget } from "./DocsGPTWidget";

extensions/react-widget/dist/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

extensions/react-widget/package.json

@@ -36,12 +36,12 @@
   "devDependencies": {
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
-    "@vitejs/plugin-react-swc": "^3.0.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.31",
     "typescript": "^4.9.3",
-    "vite": "^4.0.0",
-    "vite-plugin-dts": "^1.7.1"
+    "vite": "^5.0.12",
+    "vite-plugin-dts": "^3.7.0"
   },
   "repository": {
     "type": "git",

frontend/package.json

@@ -37,7 +37,7 @@
     "@types/react-syntax-highlighter": "^15.5.6",
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.51.0",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.33.0",
     "eslint-config-prettier": "^8.6.0",
@@ -55,7 +55,7 @@
     "prettier-plugin-tailwindcss": "^0.2.2",
     "tailwindcss": "^3.2.4",
     "typescript": "^4.9.5",
-    "vite": "^4.5.0",
-    "vite-plugin-svgr": "^2.4.0"
+    "vite": "^5.0.12",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }

frontend/public/lock-dark.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none">
+  <path d="M8.25 13.75V11C8.25 6.44875 9.625 2.75 16.5 2.75C23.375 2.75 24.75 6.44875 24.75 11V13.75" stroke="#ECECF1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M23.375 30.25H9.625C4.125 30.25 2.75 28.875 2.75 23.375V20.625C2.75 15.125 4.125 13.75 9.625 13.75H23.375C28.875 13.75 30.25 15.125 30.25 20.625V23.375C30.25 28.875 28.875 30.25 23.375 30.25Z" stroke="#ECECF1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M21.9951 22H22.0075" stroke="#ECECF1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M16.4938 22H16.5061" stroke="#ECECF1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10.9924 22H11.0048" stroke="#ECECF1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/public/message-programming-dark.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
+  <path d="M12.75 28.4551H12C6 28.4551 3 26.9551 3 19.4551V11.9551C3 5.95508 6 2.95508 12 2.95508H24C30 2.95508 33 5.95508 33 11.9551V19.4551C33 25.4551 30 28.4551 24 28.4551H23.25C22.785 28.4551 22.335 28.6801 22.05 29.0551L19.8 32.0551C18.81 33.3751 17.19 33.3751 16.2 32.0551L13.95 29.0551C13.71 28.7251 13.17 28.4551 12.75 28.4551Z" stroke="#ECECF1" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 13.05L9 16.05L12 19.05" stroke="#ECECF1" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M24 13.05L27 16.05L24 19.05" stroke="#ECECF1" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M19.5 12.5549L16.5 19.545" stroke="#ECECF1" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/public/message-programming.svg

@@ -1,6 +1,10 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.75 28.455H12C6 28.455 3 26.955 3 19.455V11.955C3 5.95496 6 2.95496 12 2.95496H24C30 2.95496 33 5.95496 33 11.955V19.455C33 25.455 30 28.455 24 28.455H23.25C22.785 28.455 22.335 28.68 22.05 29.055L19.8 32.055C18.81 33.375 17.19 33.375 16.2 32.055L13.95 29.055C13.71 28.725 13.17 28.455 12.75 28.455Z" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 13.05L9 16.05L12 19.05" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M24 13.05L27 16.05L24 19.05" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M19.5 12.5549L16.5 19.545" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<g id="vuesax/linear/message-programming">
+<g id="message-programming">
+<path id="Vector" d="M12.75 28.455H12C6 28.455 3 26.955 3 19.455V11.955C3 5.95496 6 2.95496 12 2.95496H24C30 2.95496 33 5.95496 33 11.955V19.455C33 25.455 30 28.455 24 28.455H23.25C22.785 28.455 22.335 28.68 22.05 29.055L19.8 32.055C18.81 33.375 17.19 33.375 16.2 32.055L13.95 29.055C13.71 28.725 13.17 28.455 12.75 28.455Z" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M12 13.05L9 16.05L12 19.05" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M24 13.05L27 16.05L24 19.05" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M19.5 12.555L16.5 19.545" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
 </svg>

frontend/public/message-text-dark.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
+  <path d="M10.2708 22.9584H9.66663C4.83329 22.9584 2.41663 21.7501 2.41663 15.7084V9.66675C2.41663 4.83341 4.83329 2.41675 9.66663 2.41675H19.3333C24.1666 2.41675 26.5833 4.83341 26.5833 9.66675V15.7084C26.5833 20.5417 24.1666 22.9584 19.3333 22.9584H18.7291C18.3545 22.9584 17.992 23.1397 17.7625 23.4417L15.95 25.8584C15.1525 26.9217 13.8475 26.9217 13.05 25.8584L11.2375 23.4417C11.0441 23.1759 10.597 22.9584 10.2708 22.9584Z" stroke="#ECECF1" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8.45837 9.66675H20.5417" stroke="#ECECF1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8.45837 15.7083H15.7084" stroke="#ECECF1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/src/About.tsx

@@ -5,7 +5,7 @@ import DocsGPT3 from './assets/cute_docsgpt3.svg';
 export default function About() {
   return (
     <div className="mx-5 grid min-h-screen md:mx-36">
-      <article className="place-items-left mx-auto my-auto flex w-full max-w-6xl flex-col gap-4 rounded-3xl bg-gray-100 p-6 text-jet lg:p-6 xl:p-10">
+      <article className="place-items-left mx-auto my-auto flex w-full max-w-6xl flex-col gap-4 rounded-3xl bg-gray-100 dark:bg-gun-metal p-6 text-jet dark:text-bright-gray lg:p-6 xl:p-10">
         <div className="flex items-center">
           <p className="mr-2 text-3xl">About DocsGPT</p>
           <img className="h14 mb-2" src={DocsGPT3} alt="DocsGPT" />
@@ -31,23 +31,23 @@ export default function About() {
           </p>
           <p className="mt-4 ml-2">
             1. Navigate to{' '}
-            <span className="bg-gray-200 italic"> /application</span> folder
+            <span className="bg-gray-200 dark:bg-outer-space italic"> /application</span> folder
           </p>
           <p className="mt-4 ml-2">
             2. Install dependencies from{' '}
-            <span className="bg-gray-200 italic">
+            <span className="bg-gray-200 dark:bg-outer-space italic">
               pip install -r requirements.txt
             </span>
           </p>
           <p className="mt-4 ml-2">
-            3. Prepare a <span className="bg-gray-200 italic">.env</span> file.
-            Copy <span className="bg-gray-200 italic">.env_sample</span> and
-            create <span className="bg-gray-200 italic">.env</span> with your
+            3. Prepare a <span className="bg-gray-200 dark:bg-outer-space italic">.env</span> file.
+            Copy <span className="bg-gray-200 dark:bg-outer-space italic">.env_sample</span> and
+            create <span className="bg-gray-200 dark:bg-outer-space italic">.env</span> with your
             OpenAI API token
           </p>
           <p className="mt-4 ml-2">
             4. Run the app with{' '}
-            <span className="bg-gray-200 italic">python app.py</span>
+            <span className="bg-gray-200 dark:bg-outer-space italic">python app.py</span>
           </p>
         </div>
 

frontend/src/App.tsx

@@ -5,7 +5,7 @@ import About from './About';
 import PageNotFound from './PageNotFound';
 import { inject } from '@vercel/analytics';
 import { useMediaQuery } from './hooks';
-import { useState } from 'react';
+import { useState,useEffect } from 'react';
 import Setting from './Setting';
 
 inject();
@@ -13,9 +13,17 @@ inject();
 export default function App() {
   const { isMobile } = useMediaQuery();
   const [navOpen, setNavOpen] = useState(!isMobile);
-
+  const selectedTheme = localStorage.getItem('selectedTheme');
+  useEffect(()=>{
+    if (selectedTheme === 'Dark') {
+      document.documentElement.classList.add('dark');
+      document.body.classList.add('dark:bg-raisin-black');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  },[])
   return (
-    <div className="min-h-full min-w-full">
+    <div className="min-h-full min-w-full dark:bg-raisin-black">
       <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
       <div
         className={`transition-all duration-200 ${

frontend/src/Hero.tsx

@@ -4,14 +4,16 @@ import DocsGPT3 from './assets/cute_docsgpt3.svg';
 export default function Hero({ className = '' }: { className?: string }) {
   // const isMobile = window.innerWidth <= 768;
   const { isMobile } = useMediaQuery();
+  const isDarkTheme = document.documentElement.classList.contains('dark');
+  console.log(isDarkTheme)
   return (
-    <div className={`mt-14 ${isMobile ? 'mb-2' : 'mb-12'}flex flex-col `}>
+    <div className={`mt-14 ${isMobile ? 'mb-2' : 'mb-12'}flex flex-col text-black-1000 dark:text-bright-gray`}>
       <div className=" mb-2 flex items-center justify-center sm:mb-10">
         <p className="mr-2 text-4xl font-semibold">DocsGPT</p>
         <img className="mb-2 h-14" src={DocsGPT3} alt="DocsGPT" />
       </div>
       {isMobile ? (
-        <p className="mb-3 text-center leading-6 text-black-1000">
+        <p className="mb-3 text-center leading-6">
           Welcome to <span className="font-bold ">DocsGPT</span>, your technical
           documentation assistant! Start by entering your query in the input
           field below, and we&apos;ll provide you with the most relevant
@@ -19,37 +21,35 @@ export default function Hero({ className = '' }: { className?: string }) {
         </p>
       ) : (
         <>
-          <p className="mb-3 text-center leading-6 text-black-1000">
+          <p className="mb-3 text-center leading-6">
             Welcome to DocsGPT, your technical documentation assistant!
           </p>
-          <p className="mb-3 text-center leading-6 text-black-1000">
+          <p className="mb-3 text-center leading-6">
             Enter a query related to the information in the documentation you
             selected to receive
             <br /> and we will provide you with the most relevant answers.
           </p>
-          <p className="mb-3 text-center leading-6 text-black-1000">
+          <p className="mb-3 text-center leading-6">
             Start by entering your query in the input field below and we will do
             the rest!
           </p>
         </>
       )}
       <div
-        className={`sections ${
-          isMobile ? '' : 'mt-1'
-        } flex flex-wrap items-center justify-center gap-2 sm:gap-1 md:gap-0`}
+        className={`sections ${isMobile ? '' : 'mt-1'
+          } flex flex-wrap items-center justify-center gap-2 sm:gap-1 md:gap-0`}
       >
         {/* first */}
-        <div className=" rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1  md:rounded-tr-none md:rounded-br-none">
+        <div className="h-auto md:h-60 rounded-[50px] bg-gradient-to-l  from-[#6EE7B7]/70 dark:from-[#D16FF8] via-[#3B82F6] dark:via-[#48E6E0] to-[#9333EA]/50 dark:to-[#C85EF6] p-1  md:rounded-tr-none md:rounded-br-none">
           <div
-            className={`h-full rounded-[45px] bg-white p-${
-              isMobile ? '3.5' : '6 py-8'
-            }  md:rounded-tr-none md:rounded-br-none`}
+            className={`h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${isMobile ? '3.5' : '6 py-8'
+              }  md:rounded-tr-none md:rounded-br-none`}
           >
             {/* Add Mobile check here */}
             {isMobile ? (
               <div className="flex justify-center">
                 <img
-                  src="/message-text.svg"
+                  src={isDarkTheme ? "/message-text-dark.svg" : "/message-text.svg"}
                   alt="lock"
                   className="h-[24px] w-[24px] "
                 />
@@ -60,7 +60,7 @@ export default function Hero({ className = '' }: { className?: string }) {
             ) : (
               <>
                 <img
-                  src="/message-text.svg"
+                  src={isDarkTheme ? "/message-text-dark.svg" : "/message-text.svg"}
                   alt="lock"
                   className="h-[24px] w-[24px]"
                 />
@@ -72,8 +72,8 @@ export default function Hero({ className = '' }: { className?: string }) {
             <p
               className={
                 isMobile
-                  ? `w-[250px] text-center text-xs text-gray-500`
-                  : `w-[250px] text-xs text-gray-500`
+                  ? `w-[250px] text-center text-xs text-gray-500 dark:text-bright-gray`
+                  : `w-[250px] text-xs text-gray-500 dark:text-bright-gray`
               }
             >
               DocsGPT will use your data to answer questions. Whether its
@@ -84,23 +84,22 @@ export default function Hero({ className = '' }: { className?: string }) {
           </div>
         </div>
         {/* second */}
-        <div className=" rounded-[50px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1  md:rounded-none  md:py-1 md:px-0">
+        <div className="h-auto md:h-60 rounded-[50px] bg-gradient-to-r from-[#6EE7B7]/70 dark:from-[#D16FF8] via-[#3B82F6] dark:via-[#48E6E0] to-[#9333EA]/50 dark:to-[#C85EF6] p-1  md:rounded-none  md:py-1 md:px-0">
           <div
-            className={`rounded-[45px] bg-white p-${
-              isMobile ? '3.5' : '6 py-6'
-            }  md:rounded-none`}
+            className={`h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${isMobile ? '3.5' : '6 py-6'
+              }  md:rounded-none`}
           >
             {/* Add Mobile check here */}
             {isMobile ? (
-              <div className="flex justify-center">
-                <img src="/lock.svg" alt="lock" className="h-[24px] w-[24px]" />
+              <div className="flex justify-center ">
+                <img src={isDarkTheme ? "/lock-dark.svg" : "/lock.svg"} alt="lock" className="h-[24px] w-[24px]" />
                 <h2 className="mb-0 pl-1 text-lg font-bold">
                   Secure Data Storage
                 </h2>
               </div>
             ) : (
               <>
-                <img src="/lock.svg" alt="lock" className="h-[24px] w-[24px]" />
+                <img src={isDarkTheme ? "/lock-dark.svg" : "/lock.svg"} alt="lock" className="h-[24px] w-[24px]" />
                 <h2 className="mt-2 mb-3 text-lg font-bold">
                   Secure Data Storage
                 </h2>
@@ -109,8 +108,8 @@ export default function Hero({ className = '' }: { className?: string }) {
             <p
               className={
                 isMobile
-                  ? `w-[250px] text-center text-xs text-gray-500`
-                  : `w-[250px] text-xs text-gray-500`
+                  ? `w-[250px] text-center text-xs text-gray-500 dark:text-bright-gray`
+                  : `w-[250px] text-xs text-gray-500 dark:text-bright-gray`
               }
             >
               The security of your data is our top priority. DocsGPT ensures the
@@ -121,17 +120,16 @@ export default function Hero({ className = '' }: { className?: string }) {
           </div>
         </div>
         {/* third */}
-        <div className=" rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/80 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-tl-none md:rounded-bl-none ">
+        <div className="h-auto md:h-60 rounded-[50px] bg-gradient-to-l  from-[#6EE7B7]/70 dark:from-[#D16FF8] via-[#3B82F6] dark:via-[#48E6E0] to-[#9333EA]/50 dark:to-[#C85EF6] p-1 md:rounded-tl-none md:rounded-bl-none ">
           <div
-            className={`firefox rounded-[45px] bg-white p-${
-              isMobile ? '3.5' : '6 px-6 '
-            } lg:rounded-tl-none lg:rounded-bl-none`}
+            className={`h-full firefox rounded-[45px] bg-white dark:bg-dark-charcoal p-${isMobile ? '3.5' : '6 px-6 '
+              } lg:rounded-tl-none lg:rounded-bl-none`}
           >
             {/* Add Mobile check here */}
             {isMobile ? (
               <div className="flex justify-center">
                 <img
-                  src="/message-programming.svg"
+                  src={isDarkTheme ? "message-programming-dark.svg" : "/message-programming.svg"}
                   alt="lock"
                   className="h-[24px] w-[24px]"
                 />
@@ -142,7 +140,7 @@ export default function Hero({ className = '' }: { className?: string }) {
             ) : (
               <>
                 <img
-                  src="/message-programming.svg"
+                  src={isDarkTheme ? "/message-programming-dark.svg" : "/message-programming.svg"}
                   alt="lock"
                   className="h-[24px] w-[24px]"
                 />
@@ -154,8 +152,8 @@ export default function Hero({ className = '' }: { className?: string }) {
             <p
               className={
                 isMobile
-                  ? `w-[250px] text-center text-xs text-gray-500`
-                  : `w-[250px] text-xs text-gray-500`
+                  ? `w-[250px] text-center text-xs text-gray-500 dark:text-bright-gray`
+                  : `w-[250px] text-xs text-gray-500 dark:text-bright-gray`
               }
             >
               DocsGPT is built on open source principles, promoting transparency

frontend/src/Navigation.tsx

@@ -3,14 +3,21 @@ import { useDispatch, useSelector } from 'react-redux';
 import { NavLink, useNavigate } from 'react-router-dom';
 import DocsGPT3 from './assets/cute_docsgpt3.svg';
 import Documentation from './assets/documentation.svg';
+import DocumentationDark from './assets/documentation-dark.svg';
 import Discord from './assets/discord.svg';
+import DiscordDark from './assets/discord-dark.svg';
+
 import Arrow2 from './assets/dropdown-arrow.svg';
 import Expand from './assets/expand.svg';
 import Trash from './assets/trash.svg';
 import Github from './assets/github.svg';
+import GithubDark from './assets/github-dark.svg';
 import Hamburger from './assets/hamburger.svg';
+import HamburgerDark from './assets/hamburger-dark.svg';
 import Info from './assets/info.svg';
+import InfoDark from './assets/info-dark.svg';
 import SettingGear from './assets/settingGear.svg';
+import SettingGearDark from './assets/settingGear-dark.svg';
 import Add from './assets/add.svg';
 import UploadIcon from './assets/upload.svg';
 import { ActiveState } from './models/misc';
@@ -47,7 +54,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const conversations = useSelector(selectConversations);
   const conversationId = useSelector(selectConversationId);
   const { isMobile } = useMediaQuery();
-
+  const isDarkTheme = document.documentElement.classList.contains('dark');
   const [isDocsListOpen, setIsDocsListOpen] = useState(false);
 
   const isApiKeySet = useSelector(selectApiKeyStatus);
@@ -64,7 +71,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const navRef = useRef(null);
   const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
   const embeddingsName =
-    import.meta.env.VITE_EMBEDDINGS_NAME || 'openai_text-embedding-ada-002';
+    import.meta.env.VITE_EMBEDDINGS_NAME ||
+    'huggingface_sentence-transformers/all-mpnet-base-v2';
 
   const navigate = useNavigate();
 
@@ -173,7 +181,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
     <>
       {!navOpen && (
         <button
-          className="duration-25 absolute sticky top-3 left-3 z-20 hidden transition-all md:block"
+          className="duration-25 absolute  top-3 left-3 z-20 hidden transition-all md:block"
           onClick={() => {
             setNavOpen(!navOpen);
           }}
@@ -181,20 +189,18 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           <img
             src={Expand}
             alt="menu toggle"
-            className={`${
-              !navOpen ? 'rotate-180' : 'rotate-0'
-            } m-auto transition-all duration-200`}
+            className={`${!navOpen ? 'rotate-180' : 'rotate-0'
+              } m-auto transition-all duration-200`}
           />
         </button>
       )}
       <div
         ref={navRef}
-        className={`${
-          !navOpen && '-ml-96 md:-ml-[18rem]'
-        } duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-2 bg-white transition-all`}
+        className={`${!navOpen && '-ml-96 md:-ml-[18rem]'
+          } duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-[1px] border-b-0 dark:border-r-purple-taupe bg-white dark:bg-chinese-black transition-all dark:text-white`}
       >
         <div
-          className={'visible mt-2 flex h-16 w-full justify-between md:h-12'}
+          className={'visible mt-2 flex h-[6vh] w-full justify-between md:h-12'}
         >
           <div className="my-auto mx-4 flex cursor-pointer gap-1.5">
             <img className="mb-2 h-10" src={DocsGPT3} alt="" />
@@ -209,188 +215,197 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             <img
               src={Expand}
               alt="menu toggle"
-              className={`${
-                !navOpen ? 'rotate-180' : 'rotate-0'
-              } m-auto transition-all duration-200`}
+              className={`${!navOpen ? 'rotate-180' : 'rotate-0'
+                } m-auto transition-all duration-200`}
             />
           </button>
         </div>
-        <div className="mb-auto">
-          <NavLink
-            to={'/'}
-            onClick={() => {
-              dispatch(setConversation([]));
-              dispatch(
-                updateConversationId({
-                  query: { conversationId: null },
-                }),
-              );
-            }}
-            className={({ isActive }) =>
-              `${
-                isActive ? 'bg-gray-3000' : ''
-              } group mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray hover:bg-gray-3000`
-            }
-          >
-            <img
-              src={Add}
-              alt="new"
-              className="opacity-80 group-hover:opacity-100"
-            />
-            <p className=" text-sm text-dove-gray group-hover:text-neutral-600">
-              New Chat
-            </p>
-          </NavLink>
+        <NavLink
+          to={'/'}
+          onClick={() => {
+            dispatch(setConversation([]));
+            dispatch(
+              updateConversationId({
+                query: { conversationId: null },
+              }),
+            );
+          }}
+          className={({ isActive }) =>
+            `${isActive ? 'bg-gray-3000 dark:bg-transparent' : ''
+            } group sticky mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray dark:border-purple-taupe dark:text-white dark:hover:bg-transparent hover:bg-gray-3000`
+          }
+        >
+          <img
+            src={Add}
+            alt="new"
+            className="opacity-80 group-hover:opacity-100"
+          />
+          <p className=" text-sm text-dove-gray group-hover:text-neutral-600 dark:text-chinese-silver dark:group-hover:text-bright-gray">
+            New Chat
+          </p>
+        </NavLink>
+        <div className="mb-auto h-[56vh] overflow-x-hidden dark:text-white overflow-y-scroll">
           {conversations && (
-            <div className="conversations-container max-h-[25rem] overflow-y-auto">
+            <div>
               <p className="ml-6 mt-3 text-sm font-semibold">Chats</p>
-              {conversations?.map((conversation) => (
-                <ConversationTile
-                  key={conversation.id}
-                  conversation={conversation}
-                  selectConversation={(id) => handleConversationClick(id)}
-                  onDeleteConversation={(id) => handleDeleteConversation(id)}
-                  onSave={(conversation) =>
-                    updateConversationName(conversation)
-                  }
-                />
-              ))}
+              <div className="conversations-container">
+                {conversations?.map((conversation) => (
+                  <ConversationTile
+                    key={conversation.id}
+                    conversation={conversation}
+                    selectConversation={(id) => handleConversationClick(id)}
+                    onDeleteConversation={(id) => handleDeleteConversation(id)}
+                    onSave={(conversation) =>
+                      updateConversationName(conversation)
+                    }
+                  />
+                ))}
+              </div>
             </div>
           )}
         </div>
 
-        <div className="flex flex-col-reverse border-b-2">
-          <div className="relative my-4 flex gap-2 px-2">
-            <div
-              className="flex h-12 w-5/6 cursor-pointer justify-between rounded-3xl border-2 bg-white"
-              onClick={() => setIsDocsListOpen(!isDocsListOpen)}
-            >
-              {selectedDocs && (
-                <p className="my-3 mx-4 overflow-hidden text-ellipsis whitespace-nowrap">
-                  {selectedDocs.name} {selectedDocs.version}
-                </p>
-              )}
-              <img
-                src={Arrow2}
-                alt="arrow"
-                className={`${
-                  !isDocsListOpen ? 'rotate-0' : 'rotate-180'
-                } ml-auto mr-3 w-3 transition-all`}
-              />
-            </div>
-            <img
-              className="mt-2 h-9 w-9 hover:cursor-pointer"
-              src={UploadIcon}
-              onClick={() => setUploadModalState('ACTIVE')}
-            ></img>
-            {isDocsListOpen && (
-              <div className="absolute top-12 left-0 right-6 z-10 ml-2 mr-4 max-h-52 overflow-y-scroll bg-white shadow-lg">
-                {docs ? (
-                  docs.map((doc, index) => {
-                    if (doc.model === embeddingsName) {
-                      return (
-                        <div
-                          key={index}
-                          onClick={() => {
-                            dispatch(setSelectedDocs(doc));
-                            setIsDocsListOpen(false);
-                          }}
-                          className="flex h-10 w-full cursor-pointer items-center justify-between border-x-2 border-b-2 hover:bg-gray-100"
-                        >
-                          <p className="ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
-                            {doc.name} {doc.version}
-                          </p>
-                          {doc.location === 'local' && (
-                            <img
-                              src={Trash}
-                              alt="Delete"
-                              className="mr-4 h-4 w-4 cursor-pointer hover:opacity-50"
-                              id={`img-${index}`}
-                              onClick={(event) => {
-                                event.stopPropagation();
-                                handleDeleteClick(index, doc);
-                              }}
-                            />
-                          )}
-                        </div>
-                      );
-                    }
-                  })
-                ) : (
-                  <div className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100">
-                    <p className="ml-5 py-3">No default documentation.</p>
-                  </div>
+        <div className="flex h-auto flex-col justify-end text-eerie-black dark:text-white">
+          <div className="flex flex-col-reverse border-b-[1px] dark:border-b-purple-taupe">
+            <div className="relative my-4 flex gap-2 px-2">
+              <div
+                className="flex h-12 w-5/6 cursor-pointer justify-between rounded-3xl border-2 dark:border-chinese-silver bg-white dark:bg-chinese-black"
+                onClick={() => setIsDocsListOpen(!isDocsListOpen)}
+              >
+                {selectedDocs && (
+                  <p className="my-3 mx-4 overflow-hidden text-ellipsis whitespace-nowrap">
+                    {selectedDocs.name} {selectedDocs.version}
+                  </p>
                 )}
+                <img
+                  src={Arrow2}
+                  alt="arrow"
+                  className={`${!isDocsListOpen ? 'rotate-0' : 'rotate-180'
+                    } ml-auto mr-3 w-3 transition-all`}
+                />
               </div>
-            )}
+              <img
+                className="mt-2 h-9 w-9 hover:cursor-pointer"
+                src={UploadIcon}
+                onClick={() => setUploadModalState('ACTIVE')}
+              ></img>
+              {isDocsListOpen && (
+                <div className="absolute top-12 left-0 right-6 z-10 ml-2 mr-4 max-h-52 overflow-y-scroll bg-white dark:bg-chinese-black shadow-lg">
+                  {docs ? (
+                    docs.map((doc, index) => {
+                      if (doc.model === embeddingsName) {
+                        return (
+                          <div
+                            key={index}
+                            onClick={() => {
+                              dispatch(setSelectedDocs(doc));
+                              setIsDocsListOpen(false);
+                            }}
+                            className="flex h-10 w-full cursor-pointer items-center justify-between border-x-2 border-b-[1px] dark:border-purple-taupe hover:bg-gray-100 dark:hover:bg-purple-taupe"
+                          >
+                            <p className="ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
+                              {doc.name} {doc.version}
+                            </p>
+                            {doc.location === 'local' && (
+                              <img
+                                src={Trash}
+                                alt="Delete"
+                                className="mr-4 h-4 w-4 cursor-pointer hover:opacity-50"
+                                id={`img-${index}`}
+                                onClick={(event) => {
+                                  event.stopPropagation();
+                                  handleDeleteClick(index, doc);
+                                }}
+                              />
+                            )}
+                          </div>
+                        );
+                      }
+                    })
+                  ) : (
+                    <div className="h-10 w-full cursor-pointer  border-b-[1px] dark:border-b-purple-taupe hover:bg-gray-100">
+                      <p className="ml-5 py-3">No default documentation.</p>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+            <p className="ml-6 mt-3 text-sm font-semibold">Source Docs</p>
+          </div>
+          <div className="flex flex-col gap-2 border-b-[1px] dark:border-b-purple-taupe py-2">
+            <NavLink
+              to="/settings"
+              className={({ isActive }) =>
+                `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe ${isActive ? 'bg-gray-3000 dark:bg-transparent' : ''
+                }`
+              }
+            >
+              <img
+                src={isDarkTheme ? SettingGearDark : SettingGear}
+                alt="settings"
+                className="ml-2 w-5 opacity-60"
+              />
+              <p className="my-auto text-sm text-eerie-black  dark:text-white">Settings</p>
+            </NavLink>
           </div>
-          <p className="ml-6 mt-3 text-sm font-semibold">Source Docs</p>
-        </div>
-        <div className="flex flex-col gap-2 border-b-2 py-2">
-          <NavLink
-            to="/settings"
-            className={({ isActive }) =>
-              `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${
-                isActive ? 'bg-gray-3000' : ''
-              }`
-            }
-          >
-            <img src={SettingGear} alt="info" className="ml-2 w-5 opacity-60" />
-            <p className="my-auto text-sm text-eerie-black">Settings</p>
-          </NavLink>
-        </div>
 
-        <div className="flex flex-col gap-2 border-b-2 py-2">
-          <NavLink
-            to="/about"
-            className={({ isActive }) =>
-              `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${
-                isActive ? 'bg-gray-3000' : ''
-              }`
-            }
-          >
-            <img src={Info} alt="info" className="ml-2 w-5" />
-            <p className="my-auto text-sm text-eerie-black">About</p>
-          </NavLink>
+          <div className="flex flex-col gap-2 border-b-[1.5px] dark:border-b-purple-taupe py-2">
+            <NavLink
+              to="/about"
+              className={({ isActive }) =>
+                `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe ${isActive ? 'bg-gray-3000 dark:bg-purple-taupe' : ''
+                }`
+              }
+            >
+              <img src={isDarkTheme ? InfoDark : Info} alt="info" className="ml-2 w-5" />
+              <p className="my-auto text-sm">About</p>
+            </NavLink>
 
-          <a
-            href="https://docs.docsgpt.co.uk/"
-            target="_blank"
-            rel="noreferrer"
-            className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
-          >
-            <img src={Documentation} alt="documentation" className="ml-2 w-5" />
-            <p className="my-auto text-sm text-eerie-black">Documentation</p>
-          </a>
-          <a
-            href="https://discord.gg/WHJdfbQDR4"
-            target="_blank"
-            rel="noreferrer"
-            className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
-          >
-            <img src={Discord} alt="link" className="ml-2 w-5" />
-            <p className="my-auto text-sm text-eerie-black">
-              Visit our Discord
-            </p>
-          </a>
+            <a
+              href="https://docs.docsgpt.co.uk/"
+              target="_blank"
+              rel="noreferrer"
+              className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
+            >
+              <img
+                src={isDarkTheme ? DocumentationDark : Documentation}
+                alt="documentation"
+                className="ml-2 w-5"
+              />
+              <p className="my-auto text-sm ">Documentation</p>
+            </a>
+            <a
+              href="https://discord.gg/WHJdfbQDR4"
+              target="_blank"
+              rel="noreferrer"
+              className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
+            >
+              <img src={isDarkTheme ? DiscordDark : Discord} alt="discord-link" className="ml-2 w-5" />
+              <p className="my-auto text-sm">
+                Visit our Discord
+              </p>
+            </a>
 
-          <a
-            href="https://github.com/arc53/DocsGPT"
-            target="_blank"
-            rel="noreferrer"
-            className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
-          >
-            <img src={Github} alt="link" className="ml-2 w-5" />
-            <p className="my-auto text-sm text-eerie-black">Visit our Github</p>
-          </a>
+            <a
+              href="https://github.com/arc53/DocsGPT"
+              target="_blank"
+              rel="noreferrer"
+              className="mt-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
+            >
+              <img src={isDarkTheme ? GithubDark : Github} alt="github-link" className="ml-2 w-5" />
+              <p className="my-auto text-sm">
+                Visit our Github
+              </p>
+            </a>
+          </div>
         </div>
       </div>
-      <div className="fixed z-10 h-16 w-full border-b-2 bg-gray-50 md:hidden">
+      <div className="fixed z-10 h-16 w-full border-b-2 dark:border-b-purple-taupe bg-gray-50 dark:bg-chinese-black md:hidden">
         <button
           className="mt-5 ml-6 h-6 w-6 md:hidden"
           onClick={() => setNavOpen(true)}
         >
-          <img src={Hamburger} alt="menu toggle" className="w-7" />
+          <img src={isDarkTheme ? HamburgerDark :Hamburger} alt="menu toggle" className="w-7" />
         </button>
       </div>
       <SelectDocsModal

frontend/src/Setting.tsx

@@ -10,7 +10,6 @@ import {
   selectSourceDocs,
 } from './preferences/preferenceSlice';
 import { Doc } from './preferences/preferenceApi';
-
 type PromptProps = {
   prompts: { name: string; id: string; type: string }[];
   selectedPrompt: { name: string; id: string; type: string };
@@ -97,8 +96,8 @@ const Setting: React.FC = () => {
   };
 
   return (
-    <div className="p-4 pt-20 md:p-12">
-      <p className="text-2xl font-bold text-eerie-black">Settings</p>
+    <div className="p-4 pt-20 md:p-12 wa">
+      <p className="text-2xl font-bold text-eerie-black dark:text-bright-gray">Settings</p>
       <div className="mt-6 flex flex-row items-center space-x-4 overflow-x-auto md:space-x-8 ">
         <div className="md:hidden">
           <button
@@ -113,11 +112,10 @@ const Setting: React.FC = () => {
             <button
               key={index}
               onClick={() => setActiveTab(tab)}
-              className={`h-9 rounded-3xl px-4 font-bold ${
-                activeTab === tab
-                  ? 'bg-purple-3000 text-purple-30'
+              className={`h-9 rounded-3xl px-4 font-bold ${activeTab === tab
+                  ? 'bg-purple-3000 text-purple-30 dark:bg-dark-charcoal'
                   : 'text-gray-6000'
-              }`}
+                }`}
             >
               {tab}
             </button>
@@ -187,15 +185,25 @@ const Setting: React.FC = () => {
 };
 
 const General: React.FC = () => {
-  const themes = ['Light'];
+  const themes = ['Light', 'Dark'];
   const languages = ['English'];
-  const [selectedTheme, setSelectedTheme] = useState(themes[0]);
+  const [selectedTheme, setSelectedTheme] = useState(localStorage.getItem('selectedTheme') || themes[0]);
   const [selectedLanguage, setSelectedLanguage] = useState(languages[0]);
 
+  useEffect(() => {
+    if (selectedTheme === 'Dark') {
+      document.documentElement.classList.add('dark');
+      document.documentElement.classList.add('dark:bg-raisin-black');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+    localStorage.setItem('selectedTheme', selectedTheme);
+  }, [selectedTheme]);
+
   return (
     <div className="mt-[59px]">
       <div className="mb-4">
-        <p className="font-bold text-jet">Select Theme</p>
+        <p className="font-bold text-jet dark:text-bright-gray">Select Theme</p>
         <Dropdown
           options={themes}
           selectedValue={selectedTheme}
@@ -203,7 +211,7 @@ const General: React.FC = () => {
         />
       </div>
       <div>
-        <p className="font-bold text-jet">Select Language</p>
+        <p className="font-bold text-jet dark:text-bright-gray">Select Language</p>
         <Dropdown
           options={languages}
           selectedValue={selectedLanguage}
@@ -346,7 +354,7 @@ const Prompts: React.FC<PromptProps> = ({
   return (
     <div className="mt-[59px]">
       <div className="mb-4">
-        <p className="font-semibold">Active Prompt</p>
+        <p className="font-semibold dark:text-bright-gray">Active Prompt</p>
         <DropdownPrompt
           options={prompts}
           selectedValue={selectedPrompt.name}
@@ -355,23 +363,23 @@ const Prompts: React.FC<PromptProps> = ({
       </div>
 
       <div className="mb-4">
-        <p>Prompt name </p>{' '}
-        <p className="mb-2 text-xs italic text-eerie-black text-gray-500">
+        <p className='dark:text-bright-gray'>Prompt name </p>{' '}
+        <p className="mb-2 text-xs italic text-eerie-black dark:text-bright-gray">
           start by editing name
         </p>
         <input
           type="text"
           value={newPromptName}
           placeholder="Active Prompt Name"
-          className="w-full rounded-lg border-2 p-2"
+          className="w-full rounded-lg border-2 p-2 dark:border-chinese-silver dark:bg-transparent dark:text-white"
           onChange={(e) => setNewPromptName(e.target.value)}
         />
       </div>
 
       <div className="mb-4">
-        <p className="mb-2">Prompt content</p>
+        <p className="mb-2 dark:text-bright-gray">Prompt content</p>
         <textarea
-          className="h-32 w-full rounded-lg  border-2 p-2"
+          className="h-32 w-full rounded-lg  border-2 p-2 dark:border-chinese-silver dark:text-white dark:bg-transparent"
           value={newPromptContent}
           onChange={(e) => setNewPromptContent(e.target.value)}
           placeholder="Active prompt contents"
@@ -380,33 +388,30 @@ const Prompts: React.FC<PromptProps> = ({
 
       <div className="flex justify-between">
         <button
-          className={`rounded-lg bg-green-500 px-4 py-2 font-bold text-white transition-all hover:bg-green-700 ${
-            newPromptName === selectedPrompt.name
+          className={`rounded-lg bg-green-500 px-4 py-2 font-bold text-white transition-all hover:bg-green-700 ${newPromptName === selectedPrompt.name
               ? 'cursor-not-allowed opacity-50'
               : ''
-          }`}
+            }`}
           onClick={handleAddPrompt}
           disabled={newPromptName === selectedPrompt.name}
         >
           Add New Prompt
         </button>
         <button
-          className={`rounded-lg bg-red-500 px-4 py-2 font-bold text-white transition-all hover:bg-red-700 ${
-            selectedPrompt.type === 'public'
+          className={`rounded-lg bg-red-500 px-4 py-2 font-bold text-white transition-all hover:bg-red-700 ${selectedPrompt.type === 'public'
               ? 'cursor-not-allowed opacity-50'
               : ''
-          }`}
+            }`}
           onClick={handleDeletePrompt}
           disabled={selectedPrompt.type === 'public'}
         >
           Delete Prompt
         </button>
         <button
-          className={`rounded-lg bg-blue-500 px-4 py-2 font-bold text-white transition-all hover:bg-blue-700 ${
-            selectedPrompt.type === 'public'
+          className={`rounded-lg bg-blue-500 px-4 py-2 font-bold text-white transition-all hover:bg-blue-700 ${selectedPrompt.type === 'public'
               ? 'cursor-not-allowed opacity-50'
               : ''
-          }`}
+            }`}
           onClick={handleSaveChanges}
           disabled={selectedPrompt.type === 'public'}
         >
@@ -432,25 +437,24 @@ function DropdownPrompt({
     <div className="relative mt-2 w-32">
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="flex w-full cursor-pointer items-center rounded-xl border-2 bg-white p-3"
+        className="flex w-full cursor-pointer items-center rounded-xl border-2 dark:border-chinese-silver bg-white p-3 dark:bg-transparent"
       >
-        <span className="flex-1 overflow-hidden text-ellipsis">
+        <span className="flex-1 overflow-hidden text-ellipsis dark:text-bright-gray">
           {selectedValue}
         </span>
         <img
           src={Arrow2}
           alt="arrow"
-          className={`transform ${
-            isOpen ? 'rotate-180' : 'rotate-0'
-          } h-3 w-3 transition-transform`}
+          className={`transform ${isOpen ? 'rotate-180' : 'rotate-0'
+            } h-3 w-3 transition-transform`}
         />
       </button>
       {isOpen && (
-        <div className="absolute left-0 right-0 z-50 -mt-3 rounded-b-xl border-2 bg-white shadow-lg">
+        <div className="absolute left-0 right-0 z-50 -mt-3 rounded-b-xl border-2 dark:border-chinese-silver bg-white dark:bg-dark-charcoal  shadow-lg">
           {options.map((option, index) => (
             <div
               key={index}
-              className="flex cursor-pointer items-center justify-between hover:bg-gray-100"
+              className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-purple-taupe dark:text-bright-gray "
             >
               <span
                 onClick={() => {
@@ -488,32 +492,31 @@ function Dropdown({
     <div className="relative mt-2 w-32">
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="flex w-full cursor-pointer items-center rounded-xl border-2 bg-white p-3"
+        className="flex w-full cursor-pointer items-center rounded-xl border-2 dark:border-chinese-silver bg-white p-3 dark:bg-transparent"
       >
-        <span className="flex-1 overflow-hidden text-ellipsis">
+        <span className="flex-1 overflow-hidden text-ellipsis dark:text-bright-gray">
           {selectedValue}
         </span>
         <img
           src={Arrow2}
           alt="arrow"
-          className={`transform ${
-            isOpen ? 'rotate-180' : 'rotate-0'
-          } h-3 w-3 transition-transform`}
+          className={`transform ${isOpen ? 'rotate-180' : 'rotate-0'
+            } h-3 w-3 transition-transform`}
         />
       </button>
       {isOpen && (
-        <div className="absolute left-0 right-0 z-50 -mt-3 rounded-b-xl border-2 bg-white shadow-lg">
+        <div className="absolute left-0 right-0 z-50 -mt-3 rounded-b-xl border-2 bg-white dark:border-chinese-silver dark:bg-dark-charcoal shadow-lg">
           {options.map((option, index) => (
             <div
               key={index}
-              className="flex cursor-pointer items-center justify-between hover:bg-gray-100"
+              className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-purple-taupe"
             >
               <span
                 onClick={() => {
                   onSelect(option);
                   setIsOpen(false);
                 }}
-                className="ml-2 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3"
+                className="ml-2 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3 dark:text-light-gray"
               >
                 {option}
               </span>
@@ -553,7 +556,7 @@ const AddPromptModal: React.FC<AddPromptModalProps> = ({
           placeholder="Enter Prompt Name"
           value={newPromptName}
           onChange={(e) => onNewPromptNameChange(e.target.value)}
-          className="mb-4 w-full rounded-3xl border-2 p-2"
+          className="mb-4 w-full rounded-3xl border-2 dark:border-chinese-silver p-2"
         />
         <button
           onClick={onAddPrompt}
@@ -586,28 +589,28 @@ const Documents: React.FC<DocumentsProps> = ({
       <div className="flex flex-col">
         {/* <h2 className="text-xl font-semibold">Documents</h2> */}
 
-        <div className="mt-[27px] overflow-x-auto">
-          <table className="block w-full table-auto content-center justify-center text-center">
+        <div className="mt-[27px] overflow-x-auto border dark:border-chinese-silver rounded-xl w-max">
+          <table className="block w-full table-auto content-center justify-center text-center dark:text-bright-gray" >
             <thead>
               <tr>
-                <th className="border px-4 py-2">Document Name</th>
-                <th className="border px-4 py-2">Vector Date</th>
-                <th className="border px-4 py-2">Type</th>
-                <th className="border px-4 py-2"></th>
+                <th className="border-r p-4 md:w-[244px]">Document Name</th>
+                <th className="border-r px-4 py-2 w-[244px]">Vector Date</th>
+                <th className="border-r px-4 py-2 w-[244px]">Type</th>
+                <th className="px-4 py-2"></th>
               </tr>
             </thead>
             <tbody>
               {documents &&
                 documents.map((document, index) => (
                   <tr key={index}>
-                    <td className="border px-4 py-2">{document.name}</td>
-                    <td className="border px-4 py-2">{document.date}</td>
-                    <td className="border px-4 py-2">
+                    <td className="border-r border-t px-4 py-2">{document.name}</td>
+                    <td className="border-r border-t px-4 py-2">{document.date}</td>
+                    <td className="border-r border-t px-4 py-2">
                       {document.location === 'remote'
                         ? 'Pre-loaded'
                         : 'Private'}
                     </td>
-                    <td className="border px-4 py-2">
+                    <td className="border-t px-4 py-2">
                       {document.location !== 'remote' && (
                         <img
                           src={Trash}

frontend/src/assets/copy.svg

@@ -1,3 +1,3 @@
-<svg width="14" height="17" stroke-width="1.15" viewBox="0 0 14 17" >
+<svg width="13" height="16" stroke-width="1.15" viewBox="0 0 14 17" >
 <path d="M13.8013 5.01282L8.80645 0.191795C8.67953 0.0691399 8.50734 0.000152609 8.32774 0H6.09677C5.43801 0 4.80623 0.252586 4.34041 0.702193C3.8746 1.1518 3.6129 1.7616 3.6129 2.39744V3.48718H2.48387C1.82511 3.48718 1.19332 3.73977 0.727509 4.18937C0.261693 4.63898 0 5.24878 0 5.88462V14.6026C0 15.2384 0.261693 15.8482 0.727509 16.2978C1.19332 16.7474 1.82511 17 2.48387 17H8.80645C9.46521 17 10.097 16.7474 10.5628 16.2978C11.0286 15.8482 11.2903 15.2384 11.2903 14.6026V13.5128H11.5161C12.1749 13.5128 12.8067 13.2602 13.2725 12.8106C13.7383 12.361 14 11.7512 14 11.1154V5.44872C13.9929 5.28447 13.9219 5.12884 13.8013 5.01282ZM9.03226 2.23179L11.6877 4.79487H9.03226V2.23179ZM9.93548 14.6026C9.93548 14.8916 9.81653 15.1688 9.6048 15.3731C9.39306 15.5775 9.10589 15.6923 8.80645 15.6923H2.48387C2.18443 15.6923 1.89726 15.5775 1.68552 15.3731C1.47379 15.1688 1.35484 14.8916 1.35484 14.6026V5.88462C1.35484 5.5956 1.47379 5.31842 1.68552 5.11405C1.89726 4.90968 2.18443 4.79487 2.48387 4.79487H3.6129V11.1154C3.6129 11.7512 3.8746 12.361 4.34041 12.8106C4.80623 13.2602 5.43801 13.5128 6.09677 13.5128H9.93548V14.6026ZM11.5161 12.2051H6.09677C5.79734 12.2051 5.51016 12.0903 5.29843 11.886C5.08669 11.6816 4.96774 11.4044 4.96774 11.1154V2.39744C4.96774 2.10842 5.08669 1.83124 5.29843 1.62687C5.51016 1.4225 5.79734 1.30769 6.09677 1.30769H7.67742V5.44872C7.67976 5.62143 7.75188 5.78643 7.87842 5.90856C8.00496 6.03069 8.1759 6.10031 8.35484 6.10256H12.6452V11.1154C12.6452 11.4044 12.5262 11.6816 12.3145 11.886C12.1027 12.0903 11.8156 12.2051 11.5161 12.2051Z" fill="#949494"/>
 </svg>

frontend/src/assets/discord-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 0 22 18" fill="none">
+  <path d="M18.7359 2.29769C17.4059 1.66546 15.9659 1.20658 14.4659 0.941453C14.4528 0.941024 14.4397 0.943541 14.4276 0.948827C14.4155 0.954112 14.4047 0.962038 14.3959 0.972045C14.2159 1.30856 14.0059 1.74704 13.8659 2.08355C12.2749 1.83882 10.6569 1.83882 9.06594 2.08355C8.92594 1.73684 8.71594 1.30856 8.52594 0.972045C8.51594 0.951651 8.48594 0.941453 8.45594 0.941453C6.95594 1.20658 5.52594 1.66546 4.18594 2.29769C4.17594 2.29769 4.16594 2.30789 4.15594 2.31809C1.43594 6.46839 0.685937 10.5065 1.05594 14.5039C1.05594 14.5243 1.06594 14.5447 1.08594 14.5548C2.88594 15.9009 4.61594 16.7167 6.32594 17.2571C6.35594 17.2673 6.38594 17.2571 6.39594 17.2367C6.79594 16.6759 7.15594 16.0844 7.46594 15.4624C7.48594 15.4216 7.46594 15.3808 7.42594 15.3706C6.85594 15.1463 6.31594 14.8812 5.78594 14.5752C5.74594 14.5549 5.74594 14.4937 5.77594 14.4631C5.88594 14.3815 5.99594 14.2897 6.10594 14.2081C6.12594 14.1877 6.15594 14.1877 6.17594 14.1979C9.61594 15.7989 13.3259 15.7989 16.7259 14.1979C16.7459 14.1877 16.7759 14.1877 16.7959 14.2081C16.9059 14.2999 17.0159 14.3815 17.1259 14.4733C17.1659 14.5039 17.1659 14.565 17.1159 14.5854C16.5959 14.9016 16.0459 15.1565 15.4759 15.3808C15.4359 15.391 15.4259 15.442 15.4359 15.4726C15.7559 16.0946 16.1159 16.6861 16.5059 17.2469C16.5359 17.2571 16.5659 17.2673 16.5959 17.2571C18.3159 16.7167 20.0459 15.9009 21.8459 14.5548C21.8659 14.5447 21.8759 14.5243 21.8759 14.5039C22.3159 9.88449 21.1459 5.87695 18.7759 2.31809C18.7659 2.30789 18.7559 2.29769 18.7359 2.29769ZM7.98594 12.0667C6.95594 12.0667 6.09594 11.098 6.09594 9.90488C6.09594 8.7118 6.93594 7.74305 7.98594 7.74305C9.04594 7.74305 9.88594 8.72199 9.87594 9.90488C9.87594 11.098 9.03594 12.0667 7.98594 12.0667ZM14.9559 12.0667C13.9259 12.0667 13.0659 11.098 13.0659 9.90488C13.0659 8.7118 13.9059 7.74305 14.9559 7.74305C16.0159 7.74305 16.8559 8.72199 16.8459 9.90488C16.8459 11.098 16.0159 12.0667 14.9559 12.0667Z" fill="#949494"/>
+</svg>

frontend/src/assets/dislike.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="current" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.37776 10.1001V12.9C6.37776 13.457 6.599 13.9911 6.99282 14.3849C7.38664 14.7788 7.92077 15 8.47772 15L11.2777 8.70011V1.00025H3.38181C3.04419 0.996436 2.71656 1.11477 2.45929 1.33344C2.20203 1.55212 2.03246 1.8564 1.98184 2.19023L1.01585 8.49012C0.985398 8.69076 0.998931 8.89563 1.05551 9.09053C1.1121 9.28543 1.21038 9.46569 1.34355 9.61884C1.47671 9.77198 1.64159 9.89434 1.82674 9.97744C2.01189 10.0605 2.2129 10.1024 2.41583 10.1001H6.37776ZM11.2777 1.00025H13.1466C13.5428 0.993247 13.9277 1.13195 14.2284 1.39002C14.5291 1.64809 14.7245 2.00758 14.7776 2.40023V7.30014C14.7245 7.69279 14.5291 8.05227 14.2284 8.31035C13.9277 8.56842 13.5428 8.70712 13.1466 8.70011H11.2777" fill="white"/>
+<svg width="14" height="14" viewBox="0 0 16 16" fill="current" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.37776 10.1001V12.9C6.37776 13.457 6.599 13.9911 6.99282 14.3849C7.38664 14.7788 7.92077 15 8.47772 15L11.2777 8.70011V1.00025H3.38181C3.04419 0.996436 2.71656 1.11477 2.45929 1.33344C2.20203 1.55212 2.03246 1.8564 1.98184 2.19023L1.01585 8.49012C0.985398 8.69076 0.998931 8.89563 1.05551 9.09053C1.1121 9.28543 1.21038 9.46569 1.34355 9.61884C1.47671 9.77198 1.64159 9.89434 1.82674 9.97744C2.01189 10.0605 2.2129 10.1024 2.41583 10.1001H6.37776ZM11.2777 1.00025H13.1466C13.5428 0.993247 13.9277 1.13195 14.2284 1.39002C14.5291 1.64809 14.7245 2.00758 14.7776 2.40023V7.30014C14.7245 7.69279 14.5291 8.05227 14.2284 8.31035C13.9277 8.56842 13.5428 8.70712 13.1466 8.70011H11.2777" fill="none"/>
 <path d="M11.2777 8.70011L8.47772 15C7.92077 15 7.38664 14.7788 6.99282 14.3849C6.599 13.9911 6.37776 13.457 6.37776 12.9V10.1001H2.41583C2.2129 10.1024 2.01189 10.0605 1.82674 9.97744C1.64159 9.89434 1.47671 9.77198 1.34355 9.61884C1.21038 9.46569 1.1121 9.28543 1.05551 9.09053C0.998931 8.89563 0.985398 8.69076 1.01585 8.49012L1.98184 2.19023C2.03246 1.8564 2.20203 1.55212 2.45929 1.33344C2.71656 1.11477 3.04419 0.996436 3.38181 1.00025H11.2777M11.2777 8.70011V1.00025M11.2777 8.70011H13.1466C13.5428 8.70712 13.9277 8.56842 14.2284 8.31035C14.5291 8.05227 14.7245 7.69279 14.7776 7.30014V2.40023C14.7245 2.00758 14.5291 1.64809 14.2284 1.39002C13.9277 1.13195 13.5428 0.993247 13.1466 1.00025H11.2777" stroke="current" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

frontend/src/assets/documentation-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
+    <g transform="translate(-19.2,-19.2) scale(1.15,1.15)"><g fill="#949494" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M13.172,2h-7.172c-1.1,0 -2,0.9 -2,2v16c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2v-11.172c0,-0.53 -0.211,-1.039 -0.586,-1.414l-4.828,-4.828c-0.375,-0.375 -0.884,-0.586 -1.414,-0.586zM15,18h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM15,14h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM13,9v-5.5l5.5,5.5z"></path></g></g></g>
+</svg>

frontend/src/assets/documentation.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
-    <g transform="translate(-19.2,-19.2) scale(1.15,1.15)"><g fill="black" fill-opacity="0.5" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M13.172,2h-7.172c-1.1,0 -2,0.9 -2,2v16c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2v-11.172c0,-0.53 -0.211,-1.039 -0.586,-1.414l-4.828,-4.828c-0.375,-0.375 -0.884,-0.586 -1.414,-0.586zM15,18h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM15,14h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM13,9v-5.5l5.5,5.5z"></path></g></g></g>
+    <g transform="translate(-19.2,-19.2) scale(1.15,1.15)"><g fill="black" fill-opacity="0.54" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M13.172,2h-7.172c-1.1,0 -2,0.9 -2,2v16c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2v-11.172c0,-0.53 -0.211,-1.039 -0.586,-1.414l-4.828,-4.828c-0.375,-0.375 -0.884,-0.586 -1.414,-0.586zM15,18h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM15,14h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM13,9v-5.5l5.5,5.5z"></path></g></g></g>
 </svg>

frontend/src/assets/dropdown-arrow.svg

@@ -1,3 +1,3 @@
 <svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 0L5 5L10 0H0Z" fill="black" fill-opacity="0.54"/>
+<path d="M0 0L5 5L10 0H0Z" fill="gray" fill-opacity="0.80"/>
 </svg>

frontend/src/assets/github-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="22" viewBox="0 0 21 22" fill="none">
+  <path d="M19.8155 2.09139C19.0825 1.34392 18.2005 0.970703 17.1685 0.970703H4.68155C3.64955 0.970703 2.76755 1.34392 2.03455 2.09139C1.30155 2.83885 0.935547 3.73825 0.935547 4.79061V17.524C0.935547 18.5763 1.30155 19.4757 2.03455 20.2232C2.76755 20.9707 3.64955 21.3439 4.68155 21.3439H7.59555C7.78555 21.3439 7.92855 21.3368 8.02455 21.3235C8.13624 21.3007 8.23705 21.2399 8.31055 21.1512C8.40555 21.0492 8.45355 20.9013 8.45355 20.7076L8.44655 19.8051C8.44255 19.23 8.44055 18.7752 8.44055 18.4387L8.14055 18.4917C7.95055 18.5274 7.71055 18.5427 7.41955 18.5386C7.11624 18.5329 6.81389 18.5019 6.51555 18.4458C6.19795 18.386 5.89897 18.2497 5.64355 18.0481C5.37604 17.8418 5.17652 17.5572 5.07155 17.2323L4.94155 16.9264C4.83198 16.6851 4.69432 16.4581 4.53155 16.2503C4.34555 16.0025 4.15655 15.8353 3.96555 15.7466L3.87555 15.6803C3.81279 15.6345 3.75571 15.5811 3.70555 15.5212C3.65764 15.4657 3.6182 15.4031 3.58855 15.3356C3.56255 15.2734 3.58455 15.2224 3.65355 15.1827C3.72355 15.1419 3.84855 15.1225 4.03155 15.1225L4.29155 15.1633C4.46455 15.198 4.67955 15.304 4.93455 15.4804C5.19261 15.6598 5.40818 15.8957 5.56555 16.1708C5.76555 16.5328 6.00555 16.8091 6.28755 16.9998C6.56955 17.1895 6.85355 17.2854 7.13955 17.2854C7.42555 17.2854 7.67255 17.2629 7.88155 17.2191C8.08366 17.1765 8.28005 17.1094 8.46655 17.0192C8.54455 16.4278 8.75655 15.9709 9.10355 15.6528C8.65392 15.6078 8.2083 15.5281 7.77055 15.4142C7.34334 15.2945 6.93249 15.1208 6.54755 14.8972C6.14479 14.6736 5.78905 14.3714 5.50055 14.008C5.22355 13.6541 4.99555 13.1901 4.81755 12.616C4.64055 12.0409 4.55155 11.377 4.55155 10.6255C4.55155 9.55581 4.89355 8.64519 5.57855 7.89263C5.25855 7.08908 5.28855 6.18662 5.66955 5.18831C5.92155 5.10775 6.29455 5.16791 6.78855 5.36676C7.28255 5.56561 7.64455 5.7359 7.87455 5.87662C8.10455 6.01939 8.28855 6.13869 8.42755 6.23557C9.24052 6.00486 10.0807 5.88889 10.9245 5.8909C11.7835 5.8909 12.6155 6.00613 13.4225 6.23557L13.9165 5.91741C14.2965 5.68476 14.6973 5.48946 15.1135 5.33413C15.5735 5.15669 15.9235 5.10877 16.1675 5.18831C16.5575 6.18764 16.5915 7.08908 16.2705 7.89365C16.9555 8.64519 17.2985 9.55581 17.2985 10.6265C17.2985 11.3781 17.2095 12.044 17.0315 12.6221C16.8545 13.2013 16.6245 13.6653 16.3425 14.0151C16.049 14.3739 15.6917 14.6731 15.2895 14.8972C14.8695 15.1358 14.4615 15.3081 14.0665 15.4142C13.6288 15.5284 13.1832 15.6085 12.7335 15.6538C13.1835 16.0515 13.4095 16.6786 13.4095 17.5362V20.7076C13.4095 20.8575 13.4305 20.9788 13.4745 21.0716C13.4948 21.1163 13.5236 21.1564 13.5593 21.1895C13.5951 21.2226 13.637 21.2481 13.6825 21.2643C13.7785 21.299 13.8625 21.3215 13.9365 21.3296C14.0105 21.3398 14.1165 21.3429 14.2545 21.3429H17.1685C18.2005 21.3429 19.0825 20.9696 19.8155 20.2222C20.5475 19.4757 20.9145 18.5753 20.9145 17.523V4.79061C20.9145 3.73825 20.5485 2.83885 19.8155 2.09139Z" fill="#949494"/>
+</svg>

frontend/src/assets/hamburger-dark.svg

@@ -0,0 +1,3 @@
+<svg width="600" height="450" viewBox="0 0 600 450" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25 25H575M25 225H575M25 425H575" stroke="#949494" stroke-opacity="0.54" stroke-width="50" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/src/assets/info-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none">
+  <path d="M10.9355 0.442139C5.41555 0.442139 0.935547 5.01053 0.935547 10.6394C0.935547 16.2683 5.41555 20.8367 10.9355 20.8367C16.4555 20.8367 20.9355 16.2683 20.9355 10.6394C20.9355 5.01053 16.4555 0.442139 10.9355 0.442139ZM11.9355 15.7381H9.93555V9.61971H11.9355V15.7381ZM11.9355 7.58025H9.93555V5.54079H11.9355V7.58025Z" fill="#949494"/>
+</svg>

frontend/src/assets/like.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="current" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.39995 5.89997V3.09999C9.39995 2.54304 9.1787 2.0089 8.78487 1.61507C8.39105 1.22125 7.85691 1 7.29996 1L4.49998 7.29996V14.9999H12.3959C12.7336 15.0037 13.0612 14.8854 13.3185 14.6667C13.5757 14.448 13.7453 14.1437 13.7959 13.8099L14.7619 7.50996C14.7924 7.30931 14.7788 7.10444 14.7222 6.90954C14.6657 6.71464 14.5674 6.53437 14.4342 6.38123C14.301 6.22808 14.1362 6.10572 13.951 6.02262C13.7659 5.93952 13.5649 5.89767 13.3619 5.89997H9.39995ZM4.49998 14.9999H2.39999C2.02869 14.9999 1.6726 14.8524 1.41005 14.5899C1.1475 14.3273 1 13.9712 1 13.5999V8.69995C1 8.32865 1.1475 7.97256 1.41005 7.71001C1.6726 7.44746 2.02869 7.29996 2.39999 7.29996H4.49998" fill="white"/>
+<svg width="14" height="14" viewBox="0 0 16 16" fill="current" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.39995 5.89997V3.09999C9.39995 2.54304 9.1787 2.0089 8.78487 1.61507C8.39105 1.22125 7.85691 1 7.29996 1L4.49998 7.29996V14.9999H12.3959C12.7336 15.0037 13.0612 14.8854 13.3185 14.6667C13.5757 14.448 13.7453 14.1437 13.7959 13.8099L14.7619 7.50996C14.7924 7.30931 14.7788 7.10444 14.7222 6.90954C14.6657 6.71464 14.5674 6.53437 14.4342 6.38123C14.301 6.22808 14.1362 6.10572 13.951 6.02262C13.7659 5.93952 13.5649 5.89767 13.3619 5.89997H9.39995ZM4.49998 14.9999H2.39999C2.02869 14.9999 1.6726 14.8524 1.41005 14.5899C1.1475 14.3273 1 13.9712 1 13.5999V8.69995C1 8.32865 1.1475 7.97256 1.41005 7.71001C1.6726 7.44746 2.02869 7.29996 2.39999 7.29996H4.49998" fill="none"/>
 <path d="M4.49998 7.29996L7.29996 1C7.85691 1 8.39105 1.22125 8.78487 1.61507C9.1787 2.0089 9.39995 2.54304 9.39995 3.09999V5.89997H13.3619C13.5649 5.89767 13.7659 5.93952 13.951 6.02262C14.1362 6.10572 14.301 6.22808 14.4342 6.38123C14.5674 6.53437 14.6657 6.71464 14.7223 6.90954C14.7788 7.10444 14.7924 7.30931 14.7619 7.50996L13.7959 13.8099C13.7453 14.1437 13.5757 14.448 13.3185 14.6667C13.0612 14.8854 12.7336 15.0037 12.3959 14.9999H4.49998M4.49998 7.29996V14.9999M4.49998 7.29996H2.39999C2.02869 7.29996 1.6726 7.44746 1.41005 7.71001C1.1475 7.97256 1 8.32865 1 8.69995V13.5999C1 13.9712 1.1475 14.3273 1.41005 14.5899C1.6726 14.8524 2.02869 14.9999 2.39999 14.9999H4.49998" stroke="current" stroke-width="1.39999" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

frontend/src/assets/message-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M20 4H4C2.9 4 2 4.9 2 6V24L6 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM20 18H6L4 20V6H20V18Z" fill="#949494"/>
+</svg>

frontend/src/assets/message.svg

@@ -1,3 +1,3 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 0H2C0.9 0 0 0.9 0 2V20L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM18 14H4L2 16V2H18V14Z" fill="black" fill-opacity="0.54"/>
+<path d="M18 0H2C0.9 0 0 0.9 0 2V20L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM18 14H4L2 16V2H18V14Z" fill="gray" fill-opacity="0.80"/>
 </svg>

frontend/src/assets/send_dark.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.00999999 18L21 9L0.00999999 0L0 7L15 9L0 11L0.00999999 18Z" fill="#949494"/>
+</svg>

frontend/src/assets/settingGear-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="22" viewBox="0 0 21 22" fill="none">
+  <path d="M10.5024 14.1916C9.50037 14.1916 8.5394 13.8044 7.83087 13.1152C7.12234 12.426 6.72429 11.4913 6.72429 10.5166C6.72429 9.54193 7.12234 8.60718 7.83087 7.91799C8.5394 7.22879 9.50037 6.8416 10.5024 6.8416C11.5044 6.8416 12.4654 7.22879 13.1739 7.91799C13.8824 8.60718 14.2805 9.54193 14.2805 10.5166C14.2805 11.4913 13.8824 12.426 13.1739 13.1152C12.4654 13.8044 11.5044 14.1916 10.5024 14.1916ZM18.5227 11.5351C18.5659 11.1991 18.5983 10.8631 18.5983 10.5166C18.5983 10.1701 18.5659 9.8236 18.5227 9.4666L20.8004 7.7551C21.0055 7.5976 21.0595 7.3141 20.9299 7.0831L18.771 3.4501C18.6415 3.2191 18.35 3.1246 18.1125 3.2191L15.4247 4.2691C14.8634 3.8596 14.2805 3.5026 13.6004 3.2401L13.201 0.457604C13.1791 0.333931 13.1129 0.221802 13.0141 0.141083C12.9153 0.0603633 12.7903 0.0162658 12.6613 0.0166035H8.34347C8.07361 0.0166035 7.84692 0.205604 7.80374 0.457604L7.40435 3.2401C6.72429 3.5026 6.14138 3.8596 5.58007 4.2691L2.89222 3.2191C2.65474 3.1246 2.36329 3.2191 2.23375 3.4501L0.0748404 7.0831C-0.0654889 7.3141 -0.000721403 7.5976 0.204375 7.7551L2.48203 9.4666C2.43885 9.8236 2.40647 10.1701 2.40647 10.5166C2.40647 10.8631 2.43885 11.1991 2.48203 11.5351L0.204375 13.2781C-0.000721403 13.4356 -0.0654889 13.7191 0.0748404 13.9501L2.23375 17.5831C2.36329 17.8141 2.65474 17.8981 2.89222 17.8141L5.58007 16.7536C6.14138 17.1736 6.72429 17.5306 7.40435 17.7931L7.80374 20.5756C7.84692 20.8276 8.07361 21.0166 8.34347 21.0166H12.6613C12.9312 21.0166 13.1578 20.8276 13.201 20.5756L13.6004 17.7931C14.2805 17.5201 14.8634 17.1736 15.4247 16.7536L18.1125 17.8141C18.35 17.8981 18.6415 17.8141 18.771 17.5831L20.9299 13.9501C21.0595 13.7191 21.0055 13.4356 20.8004 13.2781L18.5227 11.5351Z" fill="#949494"/>
+</svg>

frontend/src/assets/settingGear.svg

@@ -1,3 +1,3 @@
 <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.5024 14.6918C9.50037 14.6918 8.5394 14.3047 7.83087 13.6155C7.12234 12.9263 6.72429 11.9915 6.72429 11.0168C6.72429 10.0422 7.12234 9.10743 7.83087 8.41823C8.5394 7.72903 9.50037 7.34185 10.5024 7.34185C11.5044 7.34185 12.4654 7.72903 13.1739 8.41823C13.8824 9.10743 14.2805 10.0422 14.2805 11.0168C14.2805 11.9915 13.8824 12.9263 13.1739 13.6155C12.4654 14.3047 11.5044 14.6918 10.5024 14.6918ZM18.5227 12.0353C18.5659 11.6993 18.5983 11.3633 18.5983 11.0168C18.5983 10.6703 18.5659 10.3238 18.5227 9.96685L20.8004 8.25535C21.0055 8.09785 21.0595 7.81435 20.9299 7.58335L18.771 3.95035C18.6415 3.71935 18.35 3.62485 18.1125 3.71935L15.4247 4.76935C14.8634 4.35985 14.2805 4.00285 13.6004 3.74035L13.201 0.957848C13.1791 0.834176 13.1129 0.722046 13.0141 0.641327C12.9153 0.560607 12.7903 0.51651 12.6613 0.516848H8.34347C8.07361 0.516848 7.84692 0.705848 7.80374 0.957848L7.40435 3.74035C6.72429 4.00285 6.14138 4.35985 5.58007 4.76935L2.89222 3.71935C2.65474 3.62485 2.36329 3.71935 2.23375 3.95035L0.0748404 7.58335C-0.0654889 7.81435 -0.000721403 8.09785 0.204375 8.25535L2.48203 9.96685C2.43885 10.3238 2.40647 10.6703 2.40647 11.0168C2.40647 11.3633 2.43885 11.6993 2.48203 12.0353L0.204375 13.7783C-0.000721403 13.9358 -0.0654889 14.2193 0.0748404 14.4503L2.23375 18.0833C2.36329 18.3143 2.65474 18.3983 2.89222 18.3143L5.58007 17.2538C6.14138 17.6738 6.72429 18.0308 7.40435 18.2933L7.80374 21.0758C7.84692 21.3278 8.07361 21.5168 8.34347 21.5168H12.6613C12.9312 21.5168 13.1578 21.3278 13.201 21.0758L13.6004 18.2933C14.2805 18.0203 14.8634 17.6738 15.4247 17.2538L18.1125 18.3143C18.35 18.3983 18.6415 18.3143 18.771 18.0833L20.9299 14.4503C21.0595 14.2193 21.0055 13.9358 20.8004 13.7783L18.5227 12.0353Z" fill="black"/>
+<path d="M10.5024 14.6918C9.50037 14.6918 8.5394 14.3047 7.83087 13.6155C7.12234 12.9263 6.72429 11.9915 6.72429 11.0168C6.72429 10.0422 7.12234 9.10743 7.83087 8.41823C8.5394 7.72903 9.50037 7.34185 10.5024 7.34185C11.5044 7.34185 12.4654 7.72903 13.1739 8.41823C13.8824 9.10743 14.2805 10.0422 14.2805 11.0168C14.2805 11.9915 13.8824 12.9263 13.1739 13.6155C12.4654 14.3047 11.5044 14.6918 10.5024 14.6918ZM18.5227 12.0353C18.5659 11.6993 18.5983 11.3633 18.5983 11.0168C18.5983 10.6703 18.5659 10.3238 18.5227 9.96685L20.8004 8.25535C21.0055 8.09785 21.0595 7.81435 20.9299 7.58335L18.771 3.95035C18.6415 3.71935 18.35 3.62485 18.1125 3.71935L15.4247 4.76935C14.8634 4.35985 14.2805 4.00285 13.6004 3.74035L13.201 0.957848C13.1791 0.834176 13.1129 0.722046 13.0141 0.641327C12.9153 0.560607 12.7903 0.51651 12.6613 0.516848H8.34347C8.07361 0.516848 7.84692 0.705848 7.80374 0.957848L7.40435 3.74035C6.72429 4.00285 6.14138 4.35985 5.58007 4.76935L2.89222 3.71935C2.65474 3.62485 2.36329 3.71935 2.23375 3.95035L0.0748404 7.58335C-0.0654889 7.81435 -0.000721403 8.09785 0.204375 8.25535L2.48203 9.96685C2.43885 10.3238 2.40647 10.6703 2.40647 11.0168C2.40647 11.3633 2.43885 11.6993 2.48203 12.0353L0.204375 13.7783C-0.000721403 13.9358 -0.0654889 14.2193 0.0748404 14.4503L2.23375 18.0833C2.36329 18.3143 2.65474 18.3983 2.89222 18.3143L5.58007 17.2538C6.14138 17.6738 6.72429 18.0308 7.40435 18.2933L7.80374 21.0758C7.84692 21.3278 8.07361 21.5168 8.34347 21.5168H12.6613C12.9312 21.5168 13.1578 21.3278 13.201 21.0758L13.6004 18.2933C14.2805 18.0203 14.8634 17.6738 15.4247 17.2538L18.1125 18.3143C18.35 18.3983 18.6415 18.3143 18.771 18.0833L20.9299 14.4503C21.0595 14.2193 21.0055 13.9358 20.8004 13.7783L18.5227 12.0353Z" fill="black" fill-opacity="0.54"/>
 </svg>

frontend/src/assets/spinner.svg

@@ -1,5 +1,5 @@
 <svg width="30" height="33" viewBox="0 0 30 33" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<rect width="30" height="33" fill="url(#pattern0)"/>
+<rect width="30" height="33" fill="none"/>
 <defs>
 <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
 <use xlink:href="#image0_1_917" transform="scale(0.0166667 0.0151515)"/>

frontend/src/assets/upload.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19.35 6.04C18.67 2.59 15.64 0 12 0C9.11 0 6.6 1.64 5.35 4.04C2.34 4.36 0 6.91 0 10C0 13.31 2.69 16 6 16H19C21.76 16 24 13.76 24 11C24 8.36 21.95 6.22 19.35 6.04ZM14 9V13H10V9H7L12 4L17 9H14Z" fill="black" fill-opacity="0.54"/>
+<path d="M19.35 6.04C18.67 2.59 15.64 0 12 0C9.11 0 6.6 1.64 5.35 4.04C2.34 4.36 0 6.91 0 10C0 13.31 2.69 16 6 16H19C21.76 16 24 13.76 24 11C24 8.36 21.95 6.22 19.35 6.04ZM14 9V13H10V9H7L12 4L17 9H14Z" fill="gray" fill-opacity="0.85"/>
 </svg>

frontend/src/conversation/Conversation.tsx

@@ -11,6 +11,7 @@ import {
   updateQuery,
 } from './conversationSlice';
 import Send from './../assets/send.svg';
+import SendDark from './../assets/send_dark.svg'
 import Spinner from './../assets/spinner.svg';
 import { FEEDBACK, Query } from './conversationModels';
 import { sendFeedback } from './conversationApi';
@@ -22,7 +23,7 @@ export default function Conversation() {
   const dispatch = useDispatch<AppDispatch>();
   const endMessageRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLDivElement>(null);
-
+  const isDarkTheme = document.documentElement.classList.contains('dark');
   const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
 
   useEffect(() => {
@@ -121,7 +122,7 @@ export default function Conversation() {
         <button
           onClick={scrollIntoView}
           aria-label="scroll to bottom"
-          className="fixed bottom-32 right-14 z-10 flex h-7 w-7  items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 bg-opacity-50 md:h-9 md:w-9 md:bg-opacity-100 "
+          className="fixed bottom-32 right-14 z-10 flex h-7 w-7  items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 dark:bg-purple-taupe bg-opacity-50 md:h-9 md:w-9 md:bg-opacity-100 "
         >
           <img
             src={ArrowDown}
@@ -152,7 +153,7 @@ export default function Conversation() {
       {queries.length === 0 && (
         <Hero className="mt-24 h-[100vh] md:mt-52"></Hero>
       )}
-      <div className="relative bottom-0 flex w-10/12 flex-col items-end self-center bg-white pt-3 md:fixed md:w-[65%]">
+      <div className="relative bottom-0 flex w-10/12 flex-col items-end self-center bg-white dark:bg-raisin-black pt-3 md:fixed md:w-[65%]">
         <div className="flex h-full w-full">
           <div
             id="inputbox"
@@ -161,7 +162,7 @@ export default function Conversation() {
             placeholder="Type your message here..."
             contentEditable
             onPaste={handlePaste}
-            className={`border-000000 overflow-x-hidden; max-h-24 min-h-[2.6rem] w-full overflow-y-auto whitespace-pre-wrap rounded-3xl border bg-white py-2 pl-4 pr-9 text-base leading-7 opacity-100 focus:outline-none`}
+            className={`border-000000 overflow-x-hidden; max-h-24 min-h-[2.6rem] w-full overflow-y-auto whitespace-pre-wrap rounded-3xl border bg-white dark:bg-transparent dark:text-bright-gray py-2 pl-4 pr-9 text-base leading-7 opacity-100 focus:outline-none`}
             onKeyDown={(e) => {
               if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
@@ -175,24 +176,24 @@ export default function Conversation() {
           {status === 'loading' ? (
             <img
               src={Spinner}
-              className="relative right-[38px] bottom-[7px] -mr-[30px] animate-spin cursor-pointer self-end"
+              className="relative right-[38px] bottom-[7px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent"
             ></img>
           ) : (
             <div className="relative right-[43px] bottom-[7px] -mr-[35px] h-[35px] w-[35px] cursor-pointer self-end rounded-full hover:bg-gray-3000">
               <img
-                className="ml-[9px] mt-[9px]"
+                className="ml-[9px] mt-[9px] text-white"
                 onClick={() => {
                   if (inputRef.current?.textContent) {
                     handleQuestion(inputRef.current.textContent);
                     inputRef.current.textContent = '';
                   }
                 }}
-                src={Send}
+                src={isDarkTheme ? SendDark : Send}
               ></img>
             </div>
           )}
         </div>
-        <p className="text-gray-595959 w-[100vw] self-center bg-white p-5 text-center text-xs md:w-full">
+        <p className="text-gray-595959 dark:text-bright-gray w-[100vw] self-center bg-transparent p-5 text-center text-xs md:w-full">
           This is a chatbot that uses the GPT-3, Faiss and LangChain to answer
           questions.
         </p>

frontend/src/conversation/ConversationBubble.tsx

@@ -4,16 +4,15 @@ import remarkGfm from 'remark-gfm';
 import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
 import classes from './ConversationBubble.module.css';
 import Alert from './../assets/alert.svg';
-import { ReactComponent as Like } from './../assets/like.svg';
-import { ReactComponent as Dislike } from './../assets/dislike.svg';
-import { ReactComponent as Copy } from './../assets/copy.svg';
-import { ReactComponent as CheckMark } from './../assets/checkmark.svg';
+import Like from './../assets/like.svg?react';
+import Dislike from './../assets/dislike.svg?react';
+import Copy from './../assets/copy.svg?react';
+import CheckMark from './../assets/checkmark.svg?react';
 import ReactMarkdown from 'react-markdown';
 import copy from 'copy-to-clipboard';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import DocsGPT3 from '../assets/cute_docsgpt3.svg';
-
 const DisableSourceFE = import.meta.env.VITE_DISABLE_SOURCE_FE || false;
 
 const ConversationBubble = forwardRef<
@@ -64,9 +63,9 @@ const ConversationBubble = forwardRef<
     bubble = (
       <div
         ref={ref}
-        className={`flex self-start ${className} group flex-col pr-20`}
+        className={`flex self-start flex-wrap ${className} group flex-col pr-20  dark:text-bright-gray`}
       >
-        <div className="flex self-start">
+        <div className="flex self-start flex-wrap lg:flex-nowrap">
           <Avatar
             className="mt-2 h-12 w-12 text-2xl"
             avatar={
@@ -79,17 +78,16 @@ const ConversationBubble = forwardRef<
           />
 
           <div
-            className={`ml-2 mr-5 flex rounded-3xl bg-gray-1000 p-3.5 ${
-              type === 'ERROR'
-                ? 'flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000  dark:border-red-2000 dark:text-white'
-                : 'flex-col rounded-3xl'
-            }`}
+            className={`ml-2 lg:max-w-[50vw] md:max-w-[70vw] max-w-[90vw] mr-5 flex rounded-3xl bg-gray-1000 dark:bg-gun-metal p-3.5 ${type === 'ERROR'
+              ? 'flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000  dark:border-red-2000 dark:text-white'
+              : 'flex-col rounded-3xl'
+              }`}
           >
             {type === 'ERROR' && (
               <img src={Alert} alt="alert" className="mr-2 inline" />
             )}
             <ReactMarkdown
-              className="max-w-screen-md whitespace-pre-wrap break-words"
+              className="whitespace-pre-wrap break-words"
               remarkPlugins={[remarkGfm]}
               components={{
                 code({ node, inline, className, children, ...props }) {
@@ -170,21 +168,19 @@ const ConversationBubble = forwardRef<
                     {sources?.map((source, index) => (
                       <div
                         key={index}
-                        className={`max-w-fit cursor-pointer rounded-[28px] py-1 px-4 ${
-                          openSource === index
-                            ? 'bg-[#007DFF]'
-                            : 'bg-[#D7EBFD] hover:bg-[#BFE1FF]'
-                        }`}
+                        className={`max-w-fit cursor-pointer rounded-[28px] py-1 px-4 ${openSource === index
+                          ? 'bg-[#007DFF]'
+                          : 'bg-[#D7EBFD] hover:bg-[#BFE1FF]'
+                          }`}
                         onClick={() =>
                           setOpenSource(openSource === index ? null : index)
                         }
                       >
                         <p
-                          className={`truncate text-center text-base font-medium ${
-                            openSource === index
-                              ? 'text-white'
-                              : 'text-[#007DFF]'
-                          }`}
+                          className={`truncate text-center text-base font-medium ${openSource === index
+                            ? 'text-white'
+                            : 'text-[#007DFF]'
+                            }`}
                         >
                           {index + 1}. {source.title.substring(0, 45)}
                         </p>
@@ -195,125 +191,103 @@ const ConversationBubble = forwardRef<
               </>
             )}
           </div>
-          <div
-            className={`relative mr-5 flex items-center justify-center md:invisible ${
-              type !== 'ERROR' ? 'group-hover:md:visible' : ''
-            }`}
-          >
-            <div className="absolute left-2 top-4">
-              <div
-                className="flex items-center justify-center rounded-full p-2"
-                style={{
-                  backgroundColor: isCopyHovered ? '#EEEEEE' : '#ffffff',
-                }}
-              >
-                {copied ? (
-                  <CheckMark
-                    className="cursor-pointer stroke-green-2000"
-                    onMouseEnter={() => setIsCopyHovered(true)}
-                    onMouseLeave={() => setIsCopyHovered(false)}
-                  />
-                ) : (
-                  <Copy
-                    className={`cursor-pointer fill-none`}
+          <div className='flex justify-center'>
+            <div
+              className={`relative mr-5  items-center justify-center lg:invisible block 
+            ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''
+                }`}
+            >
+              <div className="absolute left-2 top-4">
+                <div
+                  className={`flex items-center justify-center rounded-full p-2 
+                ${isCopyHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
+                >
+                  {copied ? (
+                    <CheckMark
+                      className="cursor-pointer stroke-green-2000"
+                      onMouseEnter={() => setIsCopyHovered(true)}
+                      onMouseLeave={() => setIsCopyHovered(false)}
+                    />
+                  ) : (
+                    <Copy
+                      className={`cursor-pointer fill-none`}
+                      onClick={() => {
+                        handleCopyClick(message);
+                      }}
+                      onMouseEnter={() => setIsCopyHovered(true)}
+                      onMouseLeave={() => setIsCopyHovered(false)}
+                    ></Copy>
+                  )}
+                </div>
+              </div>
+            </div>
+            <div
+              className={`relative mr-5 flex items-center justify-center ${!isLikeClicked ? 'lg:invisible' : ''
+                } ${feedback === 'LIKE' || type !== 'ERROR'
+                  ? 'group-hover:lg:visible'
+                  : ''
+                }`}
+            >
+              <div className="absolute left-6 top-4">
+                <div
+                  className={`flex items-center justify-center rounded-full p-2 dark:bg-transparent ${isLikeHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
+                >
+                  <Like
+                    className={`cursor-pointer 
+                  ${isLikeClicked || feedback === 'LIKE'
+                        ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'
+                        : 'fill-none  stroke-gray-4000'
+                      }`}
                     onClick={() => {
-                      handleCopyClick(message);
+                      handleFeedback?.('LIKE');
+                      setIsLikeClicked(true);
+                      setIsDislikeClicked(false);
                     }}
-                    onMouseEnter={() => setIsCopyHovered(true)}
-                    onMouseLeave={() => setIsCopyHovered(false)}
-                  ></Copy>
-                )}
+                    onMouseEnter={() => setIsLikeHovered(true)}
+                    onMouseLeave={() => setIsLikeHovered(false)}
+                  ></Like>
+                </div>
               </div>
             </div>
-          </div>
-          <div
-            className={`relative mr-5 flex items-center justify-center ${
-              !isLikeClicked ? 'md:invisible' : ''
-            } ${
-              feedback === 'LIKE' || type !== 'ERROR'
-                ? 'group-hover:md:visible'
-                : ''
-            }`}
-          >
-            <div className="absolute left-6 top-4">
-              <div
-                className="flex items-center justify-center rounded-full p-2"
-                style={{
-                  backgroundColor: isLikeHovered
-                    ? isLikeClicked
-                      ? 'rgba(125, 84, 209, 0.3)'
-                      : '#EEEEEE'
-                    : isLikeClicked
-                    ? 'rgba(125, 84, 209, 0.3)'
-                    : '#ffffff',
-                }}
-              >
-                <Like
-                  className={`cursor-pointer ${
-                    isLikeClicked || feedback === 'LIKE'
-                      ? 'fill-white-3000 stroke-purple-30'
+            <div
+              className={`mr-13 relative flex items-center justify-center ${!isDislikeClicked ? 'lg:invisible' : ''
+                } ${feedback === 'DISLIKE' || type !== 'ERROR'
+                  ? 'group-hover:lg:visible'
+                  : ''
+                }`}
+            >
+              <div className="absolute left-10 top-4">
+                <div
+
+                  className={`flex items-center justify-center rounded-full p-2 ${isDislikeHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
+                >
+                  <Dislike
+                    className={`cursor-pointer ${isDislikeClicked || feedback === 'DISLIKE'
+                      ? 'fill-white-3000 dark:fill-transparent stroke-red-2000'
                       : 'fill-none  stroke-gray-4000'
-                  }`}
-                  onClick={() => {
-                    handleFeedback?.('LIKE');
-                    setIsLikeClicked(true);
-                    setIsDislikeClicked(false);
-                  }}
-                  onMouseEnter={() => setIsLikeHovered(true)}
-                  onMouseLeave={() => setIsLikeHovered(false)}
-                ></Like>
-              </div>
-            </div>
-          </div>
-          <div
-            className={`mr-13 relative flex items-center justify-center ${
-              !isDislikeClicked ? 'md:invisible' : ''
-            } ${
-              feedback === 'DISLIKE' || type !== 'ERROR'
-                ? 'group-hover:md:visible'
-                : ''
-            }`}
-          >
-            <div className="absolute left-10 top-4">
-              <div
-                className="flex items-center justify-center rounded-full p-2"
-                style={{
-                  backgroundColor: isDislikeHovered
-                    ? isDislikeClicked
-                      ? 'rgba(248, 113, 113, 0.3)'
-                      : '#EEEEEE'
-                    : isDislikeClicked
-                    ? 'rgba(248, 113, 113, 0.3)'
-                    : '#ffffff',
-                }}
-              >
-                <Dislike
-                  className={`cursor-pointer ${
-                    isDislikeClicked || feedback === 'DISLIKE'
-                      ? 'fill-white-3000 stroke-red-2000'
-                      : 'fill-none  stroke-gray-4000'
-                  }`}
-                  onClick={() => {
-                    handleFeedback?.('DISLIKE');
-                    setIsDislikeClicked(true);
-                    setIsLikeClicked(false);
-                  }}
-                  onMouseEnter={() => setIsDislikeHovered(true)}
-                  onMouseLeave={() => setIsDislikeHovered(false)}
-                ></Dislike>
+                      }`}
+                    onClick={() => {
+                      handleFeedback?.('DISLIKE');
+                      setIsDislikeClicked(true);
+                      setIsLikeClicked(false);
+                    }}
+                    onMouseEnter={() => setIsDislikeHovered(true)}
+                    onMouseLeave={() => setIsDislikeHovered(false)}
+                  ></Dislike>
+                </div>
               </div>
             </div>
           </div>
         </div>
 
         {sources && openSource !== null && sources[openSource] && (
-          <div className="ml-10 mt-2 max-w-[800px] rounded-xl bg-blue-200 p-2">
-            <p className="m-1 w-3/4 truncate text-xs text-gray-500">
+          <div className="ml-10 mt-12 lg:mt-2 max-w-[300px] sm:max-w-[800px] break-words rounded-xl bg-blue-200 dark:bg-gun-metal p-2">
+            <p className="m-1 w-3/4 truncate text-xs text-gray-500 dark:text-bright-gray">
               Source: {sources[openSource].title}
             </p>
 
-            <div className="m-2 rounded-xl border-2 border-gray-200 bg-white p-2">
-              <p className="text-break text-black">
+            <div className="m-2 rounded-xl border-2 border-gray-200 dark:border-chinese-silver bg-white dark:bg-dark-charcoal p-2">
+              <p className="text-break text-black dark:text-bright-gray">
                 {sources[openSource].text}
               </p>
             </div>

frontend/src/conversation/ConversationTile.tsx

@@ -3,6 +3,8 @@ import { useSelector } from 'react-redux';
 import Edit from '../assets/edit.svg';
 import Exit from '../assets/exit.svg';
 import Message from '../assets/message.svg';
+import MessageDark from '../assets/message-dark.svg';
+
 import CheckMark2 from '../assets/checkMark2.svg';
 import Trash from '../assets/trash.svg';
 
@@ -27,7 +29,7 @@ export default function ConversationTile({
 }: ConversationTileProps) {
   const conversationId = useSelector(selectConversationId);
   const tileRef = useRef<HTMLInputElement>(null);
-
+  const isDarkTheme = document.documentElement.classList.contains('dark');
   const [isEdit, setIsEdit] = useState(false);
   const [conversationName, setConversationsName] = useState('');
   // useOutsideAlerter(
@@ -67,16 +69,14 @@ export default function ConversationTile({
       onClick={() => {
         selectConversation(conversation.id);
       }}
-      className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 ${
-        conversationId === conversation.id ? 'bg-gray-100' : ''
-      }`}
+      className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe ${conversationId === conversation.id ? 'bg-gray-100 dark:bg-purple-taupe' : ''
+        }`}
     >
       <div
-        className={`flex ${
-          conversationId === conversation.id ? 'w-[75%]' : 'w-[95%]'
-        } gap-4`}
+        className={`flex ${conversationId === conversation.id ? 'w-[75%]' : 'w-[95%]'
+          } gap-4`}
       >
-        <img src={Message} className="ml-4 w-5"></img>
+        <img src={isDarkTheme ? MessageDark : Message} className="ml-4 w-5 dark:text-white" />
         {isEdit ? (
           <input
             autoFocus
@@ -86,34 +86,33 @@ export default function ConversationTile({
             onChange={(e) => setConversationsName(e.target.value)}
           />
         ) : (
-          <p className="my-auto overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-normal leading-6 text-eerie-black">
+          <p className="my-auto overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-normal leading-6 text-eerie-black dark:text-white">
             {conversationName}
           </p>
         )}
       </div>
       {conversationId === conversation.id && (
-        <div className="flex">
+        <div className="flex text-white dark:text-[#949494]">
           <img
             src={isEdit ? CheckMark2 : Edit}
             alt="Edit"
-            className="mr-2 h-4 w-4 cursor-pointer hover:opacity-50"
+            className="mr-2 h-4 w-4 cursor-pointer hover:opacity-50 text-white"
             id={`img-${conversation.id}`}
             onClick={(event) => {
               event.stopPropagation();
               isEdit
                 ? handleSaveConversation({
-                    id: conversationId,
-                    name: conversationName,
-                  })
+                  id: conversationId,
+                  name: conversationName,
+                })
                 : handleEditConversation();
             }}
           />
           <img
             src={isEdit ? Exit : Trash}
             alt="Exit"
-            className={`mr-4 ${
-              isEdit ? 'h-3 w-3' : 'h-4 w-4'
-            }mt-px  cursor-pointer hover:opacity-50`}
+            className={`mr-4 ${isEdit ? 'h-3 w-3' : 'h-4 w-4'
+              }mt-px  cursor-pointer hover:opacity-50`}
             id={`img-${conversation.id}`}
             onClick={(event) => {
               event.stopPropagation();

frontend/src/conversation/conversationApi.ts

@@ -12,20 +12,20 @@ export function fetchAnswerApi(
   promptId: string | null,
 ): Promise<
   | {
-      result: any;
-      answer: any;
-      sources: any;
-      conversationId: any;
-      query: string;
-    }
+    result: any;
+    answer: any;
+    sources: any;
+    conversationId: any;
+    query: string;
+  }
   | {
-      result: any;
-      answer: any;
-      sources: any;
-      query: string;
-      conversationId: any;
-      title: any;
-    }
+    result: any;
+    answer: any;
+    sources: any;
+    query: string;
+    conversationId: any;
+    title: any;
+  }
 > {
   let namePath = selectedDocs.name;
   if (selectedDocs.language === namePath) {
@@ -128,7 +128,6 @@ export function fetchAnswerSteaming(
       conversation_id: conversationId,
       prompt_id: promptId,
     };
-
     fetch(apiHost + '/stream', {
       method: 'POST',
       headers: {
@@ -183,7 +182,58 @@ export function fetchAnswerSteaming(
       });
   });
 }
+export function searchEndpoint(
+  question: string,
+  apiKey: string,
+  selectedDocs: Doc,
+  conversation_id: string | null,
+  history: Array<any> = [],
+) {
+  /*
+  "active_docs": "default",
+  "question": "Summarise",
+  "conversation_id": null,
+  "history": "[]" */
+  let namePath = selectedDocs.name;
+  if (selectedDocs.language === namePath) {
+    namePath = '.project';
+  }
 
+  let docPath = 'default';
+  if (selectedDocs.location === 'local') {
+    docPath = 'local' + '/' + selectedDocs.name + '/';
+  } else if (selectedDocs.location === 'remote') {
+    docPath =
+      selectedDocs.language +
+      '/' +
+      namePath +
+      '/' +
+      selectedDocs.version +
+      '/' +
+      selectedDocs.model +
+      '/';
+  }
+
+  const body = {
+    question: question,
+    active_docs: docPath,
+    conversation_id,
+    history
+  };
+  return fetch(`${apiHost}/api/search`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(
+      body
+    ),
+  }).then((response) => response.json())
+    .then((data) => {
+      return data;
+    })
+    .catch(err => console.log(err))
+}
 export function sendFeedback(
   prompt: string,
   response: string,

frontend/src/conversation/conversationSlice.ts

@@ -1,6 +1,7 @@
 import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
 import store from '../store';
 import { fetchAnswerApi, fetchAnswerSteaming } from './conversationApi';
+import { searchEndpoint } from './conversationApi';
 import { Answer, ConversationState, Query, Status } from './conversationModels';
 import { getConversations } from '../preferences/preferenceApi';
 import { setConversations } from '../preferences/preferenceSlice';
@@ -29,6 +30,7 @@ export const fetchAnswer = createAsyncThunk<Answer, { question: string }>(
           (event) => {
             const data = JSON.parse(event.data);
 
+
             // check if the 'end' event has been received
             if (data.type === 'end') {
               // set status to 'idle'
@@ -40,24 +42,22 @@ export const fetchAnswer = createAsyncThunk<Answer, { question: string }>(
                 .catch((error) => {
                   console.error('Failed to fetch conversations: ', error);
                 });
-            } else if (data.type === 'source') {
-              // check if data.metadata exists
-              let result;
-              if (data.metadata && data.metadata.title) {
-                const titleParts = data.metadata.title.split('/');
-                result = {
-                  title: titleParts[titleParts.length - 1],
-                  text: data.doc,
-                };
-              } else {
-                result = { title: data.doc, text: data.doc };
-              }
-              dispatch(
-                updateStreamingSource({
-                  index: state.conversation.queries.length - 1,
-                  query: { sources: [result] },
-                }),
-              );
+
+              searchEndpoint( //search for sources post streaming
+                question,
+                state.preference.apiKey,
+                state.preference.selectedDocs!,
+                state.conversation.conversationId,
+                state.conversation.queries
+              ).then(sources => {
+                //dispatch streaming sources
+                dispatch(
+                  updateStreamingSource({
+                    index: state.conversation.queries.length - 1,
+                    query: { sources },
+                  }),
+                );
+              });
             } else if (data.type === 'id') {
               dispatch(
                 updateConversationId({
@@ -165,9 +165,10 @@ export const conversationSlice = createSlice({
       state,
       action: PayloadAction<{ index: number; query: Partial<Query> }>,
     ) {
+
       const { index, query } = action.payload;
       if (!state.queries[index].sources) {
-        state.queries[index].sources = [query.sources![0]];
+        state.queries[index].sources = query?.sources;
       } else {
         state.queries[index].sources!.push(query.sources![0]);
       }

frontend/src/upload/Upload.tsx

@@ -175,41 +175,43 @@ export default function Upload({
   } else {
     view = (
       <>
-        <p className="text-xl text-jet">Upload New Documentation</p>
+        <p className="text-xl text-jet dark:text-bright-gray">Upload New Documentation</p>
         <p className="mb-3 text-xs text-gray-4000">
           Please upload .pdf, .txt, .rst, .docx, .md, .zip limited to 25mb
         </p>
         <input
           type="text"
-          className="h-10 w-[60%] rounded-md border-2 border-gray-5000 px-3 outline-none"
+          className="h-10 w-[60%] rounded-md border-2 border-gray-5000 dark:text-silver dark:bg-transparent px-3 outline-none"
           value={docName}
           onChange={(e) => setDocName(e.target.value)}
         ></input>
         <div className="relative bottom-12 left-2 mt-[-18.39px]">
-          <span className="bg-white px-2 text-xs text-gray-4000">Name</span>
+          <span className="bg-white px-2 text-xs text-gray-4000 dark:text-silver dark:bg-outer-space">Name</span>
         </div>
         <div {...getRootProps()}>
-          <span className="rounded-3xl border border-purple-30 px-4 py-2 font-medium text-purple-30 hover:cursor-pointer">
+          <span className="rounded-3xl border border-purple-30 dark:bg-purple-taupe px-4 py-2 font-medium text-purple-30 dark:text-silver hover:cursor-pointer">
             <input type="button" {...getInputProps()} />
             Choose Files
           </span>
         </div>
         <div className="mt-9">
-          <p className="mb-5 font-medium text-eerie-black">Uploaded Files</p>
+          <p className="mb-5 font-medium text-eerie-black dark:text-light-gray">Uploaded Files</p>
           {files.map((file) => (
             <p key={file.name} className="text-gray-6000">
               {file.name}
             </p>
           ))}
-          {files.length === 0 && <p className="text-gray-6000">None</p>}
+          {files.length === 0 && <p className="text-gray-6000 dark:text-light-gray">None</p>}
         </div>
         <div className="flex flex-row-reverse">
           <button
             onClick={uploadFile}
             className={`ml-6 rounded-3xl bg-purple-30 text-white ${
-              files.length > 0 ? '' : 'bg-opacity-75 text-opacity-80'
+              files.length > 0 && docName.trim().length > 0
+                ? ''
+                : 'bg-opacity-75 text-opacity-80'
             } py-2 px-6`}
-            disabled={files.length === 0} // Disable the button if no file is selected
+            disabled={files.length === 0 || docName.trim().length === 0} // Disable the button if no file is selected or docName is empty
           >
             Train
           </button>
@@ -219,7 +221,7 @@ export default function Upload({
               setfiles([]);
               setModalState('INACTIVE');
             }}
-            className="font-medium"
+            className="font-medium dark:text-light-gray"
           >
             Cancel
           </button>
@@ -234,7 +236,7 @@ export default function Upload({
         modalState === 'ACTIVE' ? 'visible' : 'hidden'
       } absolute z-30  h-screen w-screen  bg-gray-alpha`}
     >
-      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
+      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white dark:bg-outer-space p-6 shadow-lg">
         {view}
       </article>
     </article>

frontend/svg.d.ts

@@ -1,7 +0,0 @@
-declare module '*.svg' {
-  import * as React from 'react';
-
-  export const ReactComponent: React.FunctionComponent<
-    React.SVGProps<SVGSVGElement> & { title?: string }
-  >;
-}

frontend/tailwind.config.cjs

@@ -32,9 +32,18 @@ module.exports = {
         'green-2000': '#0FFF50',
         'light-gray': '#edeef0',
         'white-3000': '#ffffff',
+        'just-black':"#00000",
+        'purple-taupe':'#464152',
         'dove-gray': '#6c6c6c',
-        silver: '#c4c4c4',
+        'silver': '#c4c4c4',
         'rainy-gray': '#a4a4a4',
+        'raisin-black':'#222327',
+        'chinese-black':'#161616',
+        'chinese-silver':'#CDCDCD',
+        'dark-charcoal':'#2F3036',
+        'bright-gray':'#ECECF1',
+        'outer-space':'#444654',
+        'gun-metal':'#2E303E'
       },
     },
   },

frontend/tsconfig.json

@@ -12,10 +12,11 @@
     "module": "ESNext",
     "moduleResolution": "Node",
     "resolveJsonModule": true,
+    "types": ["vite-plugin-svgr/client"],
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src", "svg.d.ts"],
+  "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

scripts/code_docs_gen.py

@@ -3,7 +3,7 @@ import json
 from pathlib import Path
 
 import dotenv
-from langchain.llms import OpenAI
+from langchain_community.llms import OpenAI
 from langchain.prompts import PromptTemplate
 
 dotenv.load_dotenv()

scripts/old/ingest_rst.py

@@ -6,7 +6,7 @@ from pathlib import Path
 import dotenv
 import faiss
 import tiktoken
-from langchain.embeddings import OpenAIEmbeddings
+from langchain_openai import OpenAIEmbeddings
 from langchain.text_splitter import CharacterTextSplitter
 from langchain.vectorstores import FAISS
 

scripts/old/ingest_rst_sphinx.py

@@ -8,7 +8,7 @@ from pathlib import Path
 import dotenv
 import faiss
 import tiktoken
-from langchain.embeddings import OpenAIEmbeddings
+from langchain_openai import OpenAIEmbeddings
 from langchain.text_splitter import CharacterTextSplitter
 from langchain.vectorstores import FAISS
 from sphinx.cmd.build import main as sphinx_main

scripts/parser/file/bulk.py

@@ -61,7 +61,6 @@ class SimpleDirectoryReader(BaseReader):
             file_extractor: Optional[Dict[str, BaseParser]] = None,
             num_files_limit: Optional[int] = None,
             file_metadata: Optional[Callable[[str], Dict]] = None,
-            chunk_size_max: int = 2048,
     ) -> None:
         """Initialize with parameters."""
         super().__init__()

scripts/parser/open_ai_func.py

@@ -1,8 +1,8 @@
 import os
 
 import tiktoken
-from langchain.embeddings import OpenAIEmbeddings
-from langchain.vectorstores import FAISS
+from langchain_openai import OpenAIEmbeddings
+from langchain_community.vectorstores import FAISS
 from retry import retry
 
 

scripts/parser/py2doc.py

@@ -3,7 +3,7 @@ import os
 from pathlib import Path
 
 import tiktoken
-from langchain.llms import OpenAI
+from langchain_community.llms import OpenAI
 from langchain.prompts import PromptTemplate
 
 

scripts/requirements.txt

@@ -1,123 +1,22 @@
-aiodns==3.0.0
-aiohttp==3.8.6
-aiohttp-retry==2.8.3
-aiosignal==1.3.1
-alabaster==0.7.13
-aleph-alpha-client==3.2.0
-anyio==3.7.1
-async-timeout==4.0.2
-attrs==23.1.0
-Babel==2.12.1
-backoff==2.2.1
-blobfile==2.0.2
-boto3==1.28.20
-cffi==1.15.1
-charset-normalizer==3.2.0
-click==8.1.6
-cohere==4.19.2
-cryptography==41.0.4
-dataclasses-json==0.5.14
-decorator==5.1.1
-Deprecated==1.2.14
-dill==0.3.7
-docutils==0.20.1
+dataclasses_json==0.6.3
 docx2txt==0.8
-ecdsa==0.18.0
-entrypoints==0.4
+EbookLib==0.18
 escodegen==1.0.11
 esprima==4.0.1
-esutils==1.0.1
-et-xmlfile==1.1.0
-faiss-cpu==1.7.4
-filelock==3.12.2
-Flask==2.3.2
-frozenlist==1.4.0
-greenlet==2.0.2
-gunicorn==21.2.0
-h11==0.14.0
-httpcore==0.17.3
-httpx==0.24.1
-hub==3.0.1
-huggingface-hub==0.16.4
-humbug==0.3.2
-idna==3.4
-imagesize==1.4.1
-itsdangerous==2.1.2
+faiss_cpu==1.7.4
+html2text==2020.1.16
 javalang==0.13.0
-Jinja2==3.1.2
-jmespath==1.0.1
-joblib==1.3.1
-langchain==0.0.312
-lxml==4.9.3
-manifest-ml==0.1.8
-MarkupSafe==2.1.3
-marshmallow==3.20.1
-marshmallow-enum==1.5.1
-monotonic==1.6
-multidict==6.0.4
-multiprocess==0.70.15
-mypy-extensions==1.0.0
+langchain==0.1.4
+langchain_community==0.0.16
+langchain-openai==0.0.5
 nltk==3.8.1
-numcodecs==0.11.0
-numpy==1.25.2
-openai==0.27.8
-openapi3-parser==1.1.14
-openpyxl==3.1.2
-packaging==23.1
-pandas==2.0.3
-pathos==0.3.1
-Pillow==10.0.1
-pox==0.3.3
-ppft==1.7.6.7
-py==1.11.0
-pyasn1==0.5.0
-pycares==4.3.0
-pycparser==2.21
-pycryptodomex==3.18.0
-Pygments==2.15.1
-PyJWT==2.8.0
+openapi3_parser==1.1.16
+pandas==2.2.0
 PyPDF2==3.0.1
-python-dateutil==2.8.2
-python-docx==0.8.11
-python-dotenv==1.0.0
-python-jose==3.3.0
-python-magic==0.4.27
-python-pptx==0.6.21
-pytz==2023.3
-PyYAML==6.0.1
-redis==4.6.0
-regex==2023.6.3
-requests==2.31.0
+python-dotenv==1.0.1
 retry==0.9.2
-rfc3986==2.0.0
-rsa==4.9
-scikit-learn==1.3.0
-scipy==1.11.1
-sentence-transformers
-sentencepiece==0.1.99
-six==1.16.0
-sniffio==1.3.0
-snowballstemmer==2.2.0
-Sphinx==7.1.2
-sphinxcontrib-applehelp==1.0.4
-sphinxcontrib-devhelp==1.0.2
-sphinxcontrib-htmlhelp==2.0.1
-sphinxcontrib-jsmath==1.0.1
-sphinxcontrib-qthelp==1.0.3
-sphinxcontrib-serializinghtml==1.1.5
-SQLAlchemy==2.0.19
-sqlitedict==2.1.0
-tenacity==8.2.2
-threadpoolctl==3.2.0
-tiktoken==0.4.0
-tokenizers==0.13.3
-tqdm==4.65.0
-transformers==4.31.0
+Sphinx==7.2.6
+tiktoken==0.5.2
+tqdm==4.66.1
 typer==0.9.0
-typing-inspect==0.9.0
-typing_extensions==4.7.1
-unstructured==0.9.0
-wrapt==1.15.0
-XlsxWriter==3.1.2
-xxhash==3.3.0
-yarl==1.9.2
+unstructured==0.12.2

setup.sh

@@ -3,9 +3,10 @@
 # Function to prompt the user for their choice
 prompt_user() {
     echo "Do you want to:"
-    echo "1. Download the language model locally (12GB)"
-    echo "2. Use the OpenAI API"
-    read -p "Enter your choice (1/2): " choice
+    echo "1. Use DocsGPT public API (simple and free)"
+    echo "2. Download the language model locally (12GB)"
+    echo "3. Use the OpenAI API (requires an API key)"
+    read -p "Enter your choice (1, 2 or 3): " choice
 }
 
 # Function to handle the choice to download the model locally
@@ -67,15 +68,30 @@ use_openai() {
     echo "docker-compose down"
 }
 
+use_docsgpt() {
+    echo "LLM_NAME=docsgpt" > .env
+    echo "VITE_API_STREAMING=true" >> .env
+    echo "The .env file has been created with API_KEY set to your provided key."
+
+    docker-compose build && docker-compose up -d
+
+    echo "The application will run on http://localhost:5173"
+    echo "You can stop the application by running the following command:"
+    echo "docker-compose down"
+}
+
 # Prompt the user for their choice
 prompt_user
 
 # Handle the user's choice
 case $choice in
     1)
-        download_locally
+        use_docsgpt
         ;;
     2)
+        download_locally
+        ;;
+    3)
         use_openai
         ;;
     *)

tests/llm/test_openai.py

@@ -1,5 +1,4 @@
 import unittest
-from unittest.mock import patch
 from application.llm.openai import OpenAILLM
 
 class TestOpenAILLM(unittest.TestCase):
@@ -10,23 +9,3 @@ class TestOpenAILLM(unittest.TestCase):
 
     def test_init(self):
         self.assertEqual(self.llm.api_key, self.api_key)
-
-    @patch('application.llm.openai.openai.ChatCompletion.create')
-    def test_gen(self, mock_create):
-        model = "test_model"
-        engine = "test_engine"
-        messages = ["test_message"]
-        response = {"choices": [{"message": {"content": "test_response"}}]}
-        mock_create.return_value = response
-        result = self.llm.gen(model, engine, messages)
-        self.assertEqual(result, "test_response")
-
-    @patch('application.llm.openai.openai.ChatCompletion.create')
-    def test_gen_stream(self, mock_create):
-        model = "test_model"
-        engine = "test_engine"
-        messages = ["test_message"]
-        response = [{"choices": [{"delta": {"content": "test_response"}}]}]
-        mock_create.return_value = response
-        result = list(self.llm.gen_stream(model, engine, messages))
-        self.assertEqual(result, ["test_response"])

tests/test_vector_store.py

@@ -14,6 +14,6 @@ def test_init_local_faiss_store_huggingface():
     index.faiss file in the application/ folder results in a
     dimension mismatch error.
     """
-    settings.EMBEDDINGS_NAME = "huggingface_sentence-transformers/all-mpnet-base-v2"
+    settings.EMBEDDINGS_NAME = "openai_text-embedding-ada-002"
     with pytest.raises(ValueError):
         FaissStore("application/", "", None)