conflict fixing

2025-11-30 00:53:14 +00:00 · 2024-10-15 21:10:37 +05:30
parent 4402442e54 42185a011b
commit 590a735f99
53 changed files with 1029 additions and 295 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,10 +1,8 @@
 name: Build and push DocsGPT Docker image

 on:
-  workflow_dispatch:
-  push:
-    branches:
-      - main
+  release:
+    types: [published]

 jobs:
  deploy:
@@ -43,5 +41,7 @@ jobs:
          context: ./application
          push: true
          tags: |
-            ${{ secrets.DOCKER_USERNAME }}/docsgpt:latest
-            ghcr.io/${{ github.repository_owner }}/docsgpt:latest
+            ${{ secrets.DOCKER_USERNAME }}/docsgpt:${{ github.event.release.tag_name }},${{ secrets.DOCKER_USERNAME }}/docsgpt:latest
+            ghcr.io/${{ github.repository_owner }}/docsgpt:${{ github.event.release.tag_name }},ghcr.io/${{ github.repository_owner }}/docsgpt:latest
+          cache-from: type=registry,ref=${{ secrets.DOCKER_USERNAME }}/docsgpt:latest
+          cache-to: type=inline
--- a/.github/workflows/cife.yml
+++ b/.github/workflows/cife.yml
@@ -1,10 +1,8 @@
 name: Build and push DocsGPT-FE Docker image

 on:
-  workflow_dispatch:
-  push:
-    branches:
-      - main
+  release:
+    types: [published]

 jobs:
  deploy:
@@ -44,5 +42,7 @@ jobs:
          context: ./frontend
          push: true
          tags: |
-            ${{ secrets.DOCKER_USERNAME }}/docsgpt-fe:latest
-            ghcr.io/${{ github.repository_owner }}/docsgpt-fe:latest
+            ${{ secrets.DOCKER_USERNAME }}/docsgpt-fe:${{ github.event.release.tag_name }},${{ secrets.DOCKER_USERNAME }}/docsgpt-fe:latest
+            ghcr.io/${{ github.repository_owner }}/docsgpt-fe:${{ github.event.release.tag_name }},ghcr.io/${{ github.repository_owner }}/docsgpt-fe:latest
+          cache-from: type=registry,ref=${{ secrets.DOCKER_USERNAME }}/docsgpt-fe:latest
+          cache-to: type=inline
--- a/.github/workflows/docker-develop-build.yml
+++ b/.github/workflows/docker-develop-build.yml
@@ -0,0 +1,49 @@
+name: Build and push DocsGPT Docker image for development
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    if: github.repository == 'arc53/DocsGPT'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Login to ghcr.io
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push Docker images to docker.io and ghcr.io
+        uses: docker/build-push-action@v4
+        with:
+          file: './application/Dockerfile'
+          platforms: linux/amd64
+          context: ./application
+          push: true
+          tags: |
+            ${{ secrets.DOCKER_USERNAME }}/docsgpt:develop
+            ghcr.io/${{ github.repository_owner }}/docsgpt:develop
+          cache-from: type=registry,ref=${{ secrets.DOCKER_USERNAME }}/docsgpt:develop
+          cache-to: type=inline
--- a/.github/workflows/docker-develop-fe-build.yml
+++ b/.github/workflows/docker-develop-fe-build.yml
@@ -0,0 +1,49 @@
+name: Build and push DocsGPT FE Docker image for development
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    if: github.repository == 'arc53/DocsGPT'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Login to ghcr.io
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push Docker images to docker.io and ghcr.io
+        uses: docker/build-push-action@v4
+        with:
+          file: './frontend/Dockerfile'
+          platforms: linux/amd64
+          context: ./frontend
+          push: true
+          tags: |
+            ${{ secrets.DOCKER_USERNAME }}/docsgpt-fe:develop
+            ghcr.io/${{ github.repository_owner }}/docsgpt-fe:develop
+          cache-from: type=registry,ref=${{ secrets.DOCKER_USERNAME }}/docsgpt-fe:develop
+          cache-to: type=inline
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -6,7 +6,7 @@ Thank you for choosing to contribute to DocsGPT! We are all very grateful!

 📣 **Discussions** - Engage in conversations, start new topics, or help answer questions.

-🐞 **Issues** - This is where we keep track of tasks. It could be bugs,fixes or suggestions for new features.
+🐞 **Issues** - This is where we keep track of tasks. It could be bugs, fixes or suggestions for new features.

 🛠️ **Pull requests** - Suggest changes to our repository, either by working on existing issues or adding new features.

@@ -21,8 +21,9 @@ Thank you for choosing to contribute to DocsGPT! We are all very grateful!
 - If you're interested in contributing code, here are some important things to know:

 - We have a frontend built on React (Vite) and a backend in Python.
-=======
-Before creating issues, please check out how the latest version of our app looks and works by launching it via [Quickstart](https://github.com/arc53/DocsGPT#quickstart) the version on our live demo is slightly modified with login. Your issues should relate to the version that you can launch via [Quickstart](https://github.com/arc53/DocsGPT#quickstart).
+
+  
+Before creating issues, please check out how the latest version of our app looks and works by launching it via [Quickstart](https://github.com/arc53/DocsGPT#quickstart) the version on our live demo is slightly modified with login. Your issues should relate to the version you can launch via [Quickstart](https://github.com/arc53/DocsGPT#quickstart).

 ### 👨‍💻 If you're interested in contributing code, here are some important things to know:

@@ -43,7 +44,7 @@ Please try to follow the guidelines.

 ### 🖥 If you are looking to contribute to Backend (🐍 Python):

- Review our issues and contribute to [`/application`](https://github.com/arc53/DocsGPT/tree/main/application) or [`/scripts`](https://github.com/arc53/DocsGPT/tree/main/scripts) (please disregard old [`ingest_rst.py`](https://github.com/arc53/DocsGPT/blob/main/scripts/old/ingest_rst.py) [`ingest_rst_sphinx.py`](https://github.com/arc53/DocsGPT/blob/main/scripts/old/ingest_rst_sphinx.py) files; they will be deprecated soon).
+- Review our issues and contribute to [`/application`](https://github.com/arc53/DocsGPT/tree/main/application) or [`/scripts`](https://github.com/arc53/DocsGPT/tree/main/scripts) (please disregard old [`ingest_rst.py`](https://github.com/arc53/DocsGPT/blob/main/scripts/old/ingest_rst.py) [`ingest_rst_sphinx.py`](https://github.com/arc53/DocsGPT/blob/main/scripts/old/ingest_rst_sphinx.py) files; these will be deprecated soon).
 - All new code should be covered with unit tests ([pytest](https://github.com/pytest-dev/pytest)). Please find tests under [`/tests`](https://github.com/arc53/DocsGPT/tree/main/tests) folder.
 - Before submitting your Pull Request, ensure it can be queried after ingesting some test data.
  
@@ -125,4 +126,4 @@ Thank you for considering contributing to DocsGPT! 🙏

 ## Questions/collaboration
 Feel free to join our [Discord](https://discord.gg/n5BX8dh8rU). We're very friendly and welcoming to new contributors, so don't hesitate to reach out.
-# Thank you so much for considering to contribute DocsGPT!🙏
+# Thank you so much for considering to contributing DocsGPT!🙏
--- a/HACKTOBERFEST.md
+++ b/HACKTOBERFEST.md
@@ -4,7 +4,7 @@ Welcome, contributors! We're excited to announce that DocsGPT is participating i

 All contributors with accepted PRs will receive a cool Holopin! 🤩 (Watch out for a reply in your PR to collect it).

-### 🏆 Top 50 contributors will recieve a special T-shirt
+### 🏆 Top 50 contributors will receive a special T-shirt

 ### 🏆 [LLM Document analysis by LexEU competition](https://github.com/arc53/DocsGPT/blob/main/lexeu-competition.md): 
 A separate competition is available for those who submit new retrieval / workflow method that will analyze a Document using EU laws.
@@ -16,14 +16,14 @@ You can find more information [here](https://github.com/arc53/DocsGPT/blob/main/
 🛠️ Code: This is the golden ticket! Make meaningful contributions through PRs.

 🧩 API extension: Build an app utilising DocsGPT API. We prefer submissions that showcase original ideas and turn the API into an AI agent.
-They can be a completely separate repo. 
+They can be a completely separate repos. 
 For example: 
 https://github.com/arc53/tg-bot-docsgpt-extenstion or 
 https://github.com/arc53/DocsGPT-cli

 Non-Code Contributions:

-📚 Wiki: Improve our documentation, Create a guide or change existing documentation.
+📚 Wiki: Improve our documentation, create a guide or change existing documentation.

 🖥️ Design: Improve the UI/UX or design a new feature.

@@ -37,5 +37,5 @@ Non-Code Contributions:
 - Refer to the [Documentation](https://docs.docsgpt.cloud/).
 - Feel free to join our [Discord](https://discord.gg/n5BX8dh8rU) server. We're here to help newcomers, so don't hesitate to jump in! Join us [here](https://discord.gg/n5BX8dh8rU).
  
-Thank you very much for considering contributing to DocsGPT during Hacktoberfest! 🙏 Your contributions (not just simple typo) could earn you a stylish new t-shirt and other prizes as a token of our appreciation. 🎁 Join us, and let's code together! 🚀
+Thank you very much for considering contributing to DocsGPT during Hacktoberfest! 🙏 Your contributions (not just simple typos) could earn you a stylish new t-shirt and other prizes as a token of our appreciation. 🎁 Join us, and let's code together! 🚀

--- a/README.md
+++ b/README.md
@@ -35,7 +35,8 @@ We're eager to provide personalized assistance when deploying your DocsGPT to a

 [Send Email :email:](mailto:contact@arc53.com?subject=DocsGPT%20support%2Fsolutions)

-![video-example-of-docs-gpt](https://d3dg1063dc54p9.cloudfront.net/videos/demov3.gif)
+
+<img src="https://github.com/user-attachments/assets/9a1f21de-7a15-4e42-9424-70d22ba5a913" alt="video-example-of-docs-gpt" width="1000" height="500">

 ## Roadmap

--- a/application/api/answer/routes.py
+++ b/application/api/answer/routes.py
@@ -292,6 +292,7 @@ class Stream(Resource):
    def post(self):
        data = request.get_json()
        required_fields = ["question"]
+
        missing_fields = check_required_fields(data, required_fields)
        if missing_fields:
            return missing_fields
@@ -422,7 +423,7 @@ class Answer(Resource):
    @api.doc(description="Provide an answer based on the question and retriever")
    def post(self):
        data = request.get_json()
-        required_fields = ["question"]
+        required_fields = ["question"]       
        missing_fields = check_required_fields(data, required_fields)
        if missing_fields:
            return missing_fields
--- a/application/cache.py
+++ b/application/cache.py
@@ -0,0 +1,93 @@
+import redis
+import time
+import json
+import logging
+from threading import Lock
+from application.core.settings import settings
+from application.utils import get_hash
+
+logger = logging.getLogger(__name__)
+
+_redis_instance = None
+_instance_lock = Lock()
+
+def get_redis_instance():
+    global _redis_instance
+    if _redis_instance is None:
+        with _instance_lock:
+            if _redis_instance is None:
+                try:
+                    _redis_instance = redis.Redis.from_url(settings.CACHE_REDIS_URL, socket_connect_timeout=2)
+                except redis.ConnectionError as e:
+                    logger.error(f"Redis connection error: {e}")
+                    _redis_instance = None
+    return _redis_instance
+
+def gen_cache_key(*messages, model="docgpt"):
+    if not all(isinstance(msg, dict) for msg in messages):
+        raise ValueError("All messages must be dictionaries.")
+    messages_str = json.dumps(list(messages), sort_keys=True)
+    combined = f"{model}_{messages_str}"
+    cache_key = get_hash(combined)
+    return cache_key
+
+def gen_cache(func):
+    def wrapper(self, model, messages, *args, **kwargs):
+        try:
+            cache_key = gen_cache_key(*messages)
+            redis_client = get_redis_instance()
+            if redis_client:
+                try:
+                    cached_response = redis_client.get(cache_key)
+                    if cached_response:
+                        return cached_response.decode('utf-8')
+                except redis.ConnectionError as e:
+                    logger.error(f"Redis connection error: {e}")
+
+            result = func(self, model, messages, *args, **kwargs)
+            if redis_client:
+                try:
+                    redis_client.set(cache_key, result, ex=1800)
+                except redis.ConnectionError as e:
+                    logger.error(f"Redis connection error: {e}")
+
+            return result
+        except ValueError as e:
+            logger.error(e)
+            return "Error: No user message found in the conversation to generate a cache key."
+    return wrapper
+
+def stream_cache(func):
+    def wrapper(self, model, messages, stream, *args, **kwargs):
+        cache_key = gen_cache_key(*messages)
+        logger.info(f"Stream cache key: {cache_key}")
+        
+        redis_client = get_redis_instance()
+        if redis_client:
+            try:
+                cached_response = redis_client.get(cache_key)
+                if cached_response:
+                    logger.info(f"Cache hit for stream key: {cache_key}")
+                    cached_response = json.loads(cached_response.decode('utf-8'))
+                    for chunk in cached_response:
+                        yield chunk
+                        time.sleep(0.03)
+                    return
+            except redis.ConnectionError as e:
+                logger.error(f"Redis connection error: {e}")
+
+        result = func(self, model, messages, stream, *args, **kwargs)
+        stream_cache_data = []
+        
+        for chunk in result:
+            stream_cache_data.append(chunk)
+            yield chunk
+        
+        if redis_client:
+            try:
+                redis_client.set(cache_key, json.dumps(stream_cache_data), ex=1800)
+                logger.info(f"Stream cache saved for key: {cache_key}")
+            except redis.ConnectionError as e:
+                logger.error(f"Redis connection error: {e}")
+        
+    return wrapper
--- a/application/core/settings.py
+++ b/application/core/settings.py
@@ -21,6 +21,9 @@ class Settings(BaseSettings):
    VECTOR_STORE: str = "faiss"  # "faiss" or "elasticsearch" or "qdrant" or "milvus"
    RETRIEVERS_ENABLED: list = ["classic_rag", "duckduck_search"] # also brave_search

+    # LLM Cache
+    CACHE_REDIS_URL: str = "redis://localhost:6379/2"
+
    API_URL: str = "http://localhost:7091"  # backend url for celery worker

    API_KEY: Optional[str] = None  # LLM api key
--- a/application/llm/base.py
+++ b/application/llm/base.py
@@ -1,28 +1,29 @@
 from abc import ABC, abstractmethod
 from application.usage import gen_token_usage, stream_token_usage
+from application.cache import stream_cache, gen_cache


 class BaseLLM(ABC):
    def __init__(self):
        self.token_usage = {"prompt_tokens": 0, "generated_tokens": 0}

-    def _apply_decorator(self, method, decorator, *args, **kwargs):
-        return decorator(method, *args, **kwargs)
+    def _apply_decorator(self, method, decorators, *args, **kwargs):
+        for decorator in decorators:
+            method = decorator(method)
+        return method(self, *args, **kwargs)

    @abstractmethod
    def _raw_gen(self, model, messages, stream, *args, **kwargs):
        pass

    def gen(self, model, messages, stream=False, *args, **kwargs):
-        return self._apply_decorator(self._raw_gen, gen_token_usage)(
-            self, model=model, messages=messages, stream=stream, *args, **kwargs
-        )
+        decorators = [gen_token_usage, gen_cache]
+        return self._apply_decorator(self._raw_gen, decorators=decorators, model=model, messages=messages, stream=stream, *args, **kwargs)

    @abstractmethod
    def _raw_gen_stream(self, model, messages, stream, *args, **kwargs):
        pass

    def gen_stream(self, model, messages, stream=True, *args, **kwargs):
-        return self._apply_decorator(self._raw_gen_stream, stream_token_usage)(
-            self, model=model, messages=messages, stream=stream, *args, **kwargs
-        )
+        decorators = [stream_cache, stream_token_usage]
+        return self._apply_decorator(self._raw_gen_stream, decorators=decorators, model=model, messages=messages, stream=stream, *args, **kwargs)
--- a/application/requirements.txt
+++ b/application/requirements.txt
@@ -4,7 +4,7 @@ beautifulsoup4==4.12.3
 celery==5.3.6
 dataclasses-json==0.6.7
 docx2txt==0.8
-duckduckgo-search==6.2.6
+duckduckgo-search==6.3.0
 ebooklib==0.18
 elastic-transport==8.15.0
 elasticsearch==8.15.1
@@ -54,7 +54,7 @@ pathable==0.4.3
 pillow==10.4.0
 portalocker==2.10.1
 prance==23.6.21.0
-primp==0.6.2
+primp==0.6.3
 prompt-toolkit==3.0.47
 protobuf==5.28.2
 py==1.11.0
--- a/application/utils.py
+++ b/application/utils.py
@@ -1,6 +1,8 @@
 import tiktoken
+import hashlib
 from flask import jsonify, make_response

+
 _encoding = None


@@ -39,3 +41,8 @@ def check_required_fields(data, required_fields):
            400,
        )
    return None
+
+
+def get_hash(data):
+    return hashlib.md5(data.encode()).hexdigest()
+
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -20,6 +20,7 @@ services:
      - CELERY_BROKER_URL=redis://redis:6379/0
      - CELERY_RESULT_BACKEND=redis://redis:6379/1
      - MONGO_URI=mongodb://mongo:27017/docsgpt
+      - CACHE_REDIS_URL=redis://redis:6379/2
    ports:
      - "7091:7091"
    volumes:
@@ -41,6 +42,7 @@ services:
      - CELERY_RESULT_BACKEND=redis://redis:6379/1
      - MONGO_URI=mongodb://mongo:27017/docsgpt
      - API_URL=http://backend:7091
+      - CACHE_REDIS_URL=redis://redis:6379/2
    depends_on:
      - redis
      - mongo
--- a/docs/README.md
+++ b/docs/README.md
@@ -46,6 +46,6 @@ yarn install
 yarn dev
 ```

- Now, you should be able to view the docs on your local environment by visiting `http://localhost:5000`. You can explore the different markdown files and make changes as you see fit.
+- Now, you should be able to view the docs on your local environment by visiting `http://localhost:3000`. You can explore the different markdown files and make changes as you see fit.

 - **Footnotes:** This guide assumes you have Node.js and npm installed. The guide involves running a local server using yarn, and viewing the documentation offline. If you encounter any issues, it may be worth verifying your Node.js and npm installations and whether you have installed yarn correctly.
--- a/docs/pages/Guides/How-to-train-on-other-documentation.mdx
+++ b/docs/pages/Guides/How-to-train-on-other-documentation.mdx
@@ -28,15 +28,15 @@ Navigate to the sidebar where you will find `Source Docs` option,here you will f


 ### Step 2
-Click on the `Upload icon` just beside the source docs options,now borwse and upload the document which you want to train on or select the `remote` option if you have to insert the link of the documentation.
+Click on the `Upload icon` just beside the source docs options,now browse and upload the document which you want to train on or select the `remote` option if you have to insert the link of the documentation.


 ### Step 3
-Now you will be able to see the name of the file uploaded under the Uploaded Files ,now click on `Train`,once you click on train it might take some time to train on the document. You will be able to see the `Training progress` and once the training is completed you can click the `finish` button and there you go your docuemnt is uploaded.
+Now you will be able to see the name of the file uploaded under the Uploaded Files ,now click on `Train`,once you click on train it might take some time to train on the document. You will be able to see the `Training progress` and once the training is completed you can click the `finish` button and there you go your document is uploaded.


 ### Step 4
-Go to `New chat`  and from the side bar select the document  you uploaded  under the `Source Docs` and go ahead with your chat, now you can ask qestions regarding the document you uploaded and you will get the effective answer based on it.
+Go to `New chat`  and from the side bar select the document  you uploaded  under the `Source Docs` and go ahead with your chat, now you can ask questions regarding the document you uploaded and you will get the effective answer based on it.

 </Steps>

--- a/docs/pages/Guides/How-to-use-different-LLM.mdx
+++ b/docs/pages/Guides/How-to-use-different-LLM.mdx
@@ -33,7 +33,7 @@ For open source you  have to edit .env file with LLM_NAME with their desired LLM
 All the supported LLM providers are here application/llm and you  can check what env variable are needed for each
 List of latest supported LLMs are https://github.com/arc53/DocsGPT/blob/main/application/llm/llm_creator.py
 ### Step 3
-Visit application/llm and select the file of your selected llm and there you will find the speicifc requirements needed to be filled in order to use it,i.e API key of that llm.
+Visit application/llm and select the file of your selected llm and there you will find the specific requirements needed to be filled in order to use it,i.e API key of that llm.
 </Steps>

 ### For OpenAI-Compatible Endpoints:
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1675,7 +1675,7 @@
      "version": "18.3.0",
      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
-      "devOptional": true,
+      "dev": true,
      "dependencies": {
        "@types/react": "*"
      }
--- a/frontend/signal-desktop-keyring.gpg
+++ b/frontend/signal-desktop-keyring.gpg
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -32,7 +32,10 @@ function MainLayout() {
 }

 export default function App() {
-  useDarkTheme();
+  const [, , componentMounted] = useDarkTheme();
+  if (!componentMounted) {
+    return <div />;
+  }
  return (
    <div className="h-full relative overflow-auto">
      <Routes>
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -11,7 +11,6 @@ import Discord from './assets/discord.svg';
 import Expand from './assets/expand.svg';
 import Github from './assets/github.svg';
 import Hamburger from './assets/hamburger.svg';
-import Info from './assets/info.svg';
 import SettingGear from './assets/settingGear.svg';
 import Twitter from './assets/TwitterX.svg';
 import UploadIcon from './assets/upload.svg';
@@ -41,6 +40,7 @@ import {
  setSourceDocs,
 } from './preferences/preferenceSlice';
 import Upload from './upload/Upload';
+import Help from './components/Help';

 interface NavigationProps {
  navOpen: boolean;
@@ -275,7 +275,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
            {t('newChat')}
          </p>
        </NavLink>
-        <div className="mb-auto h-[78vh] overflow-y-auto overflow-x-hidden dark:text-white">
+        <div
+          id="conversationsMainDiv"
+          className="mb-auto h-[78vh] overflow-y-auto overflow-x-hidden dark:text-white"
+        >
          {conversations && conversations.length > 0 ? (
            <div>
              <div className=" my-auto mx-4 mt-2 flex h-6 items-center justify-between gap-4 rounded-3xl">
@@ -304,7 +307,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
            <></>
          )}
        </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 mx-4 flex gap-2">
@@ -359,68 +361,51 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
              </p>
            </NavLink>
          </div>
-          <div className="flex justify-between gap-2 border-b-[1.5px] py-2 dark:border-b-purple-taupe">
-            <NavLink
-              onClick={() => {
-                if (isMobile) {
-                  setNavOpen(!navOpen);
-                }
-                resetConversation();
-              }}
-              to="/about"
-              className={({ isActive }) =>
-                `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
-                  isActive ? 'bg-gray-3000 dark:bg-[#28292E]' : ''
-                }`
-              }
-            >
-              <img
-                src={Info}
-                alt="icon"
-                className="ml-2 w-5 filter dark:invert"
-              />
-              <p className="my-auto pr-1 text-sm">{t('about')}</p>
-            </NavLink>
-            <div className="flex items-center justify-evenly gap-1 px-1">
-              <NavLink
-                target="_blank"
-                to={'https://discord.gg/WHJdfbQDR4'}
-                className={
-                  'rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]'
-                }
-              >
-                <img
-                  src={Discord}
-                  alt="discord"
-                  className="m-2 w-6 self-center filter dark:invert"
-                />
-              </NavLink>
-              <NavLink
-                target="_blank"
-                to={'https://twitter.com/docsgptai'}
-                className={
-                  'rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]'
-                }
-              >
-                <img
-                  src={Twitter}
-                  alt="x"
-                  className="m-2 w-5 self-center filter dark:invert"
-                />
-              </NavLink>
-              <NavLink
-                target="_blank"
-                to={'https://github.com/arc53/docsgpt'}
-                className={
-                  'rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]'
-                }
-              >
-                <img
-                  src={Github}
-                  alt="github"
-                  className="m-2 w-6 self-center filter dark:invert"
-                />
-              </NavLink>
+          <div className="flex flex-col justify-end text-eerie-black dark:text-white">
+            <div className="flex justify-between items-center px-1 py-1">
+              <Help />
+
+              <div className="flex items-center gap-1">
+                <NavLink
+                  target="_blank"
+                  to={'https://discord.gg/WHJdfbQDR4'}
+                  className={
+                    'rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]'
+                  }
+                >
+                  <img
+                    src={Discord}
+                    alt="discord"
+                    className="m-2 w-6 self-center filter dark:invert"
+                  />
+                </NavLink>
+                <NavLink
+                  target="_blank"
+                  to={'https://twitter.com/docsgptai'}
+                  className={
+                    'rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]'
+                  }
+                >
+                  <img
+                    src={Twitter}
+                    alt="x"
+                    className="m-2 w-5 self-center filter dark:invert"
+                  />
+                </NavLink>
+                <NavLink
+                  target="_blank"
+                  to={'https://github.com/arc53/docsgpt'}
+                  className={
+                    'rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]'
+                  }
+                >
+                  <img
+                    src={Github}
+                    alt="github"
+                    className="m-2 w-6 self-center filter dark:invert"
+                  />
+                </NavLink>
+              </div>
            </div>
          </div>
        </div>
@@ -450,6 +435,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
      <Upload
        modalState={uploadModalState}
        setModalState={setUploadModalState}
+        isOnboarding={false}
      ></Upload>
    </>
  );
--- a/frontend/src/assets/documentation-dark.svg
+++ b/frontend/src/assets/documentation-dark.svg
@@ -1,3 +1,4 @@
-<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 width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.25 8.64258V16.25C16.25 16.7473 16.0525 17.2242 15.7008 17.5758C15.3492 17.9275 14.8723 18.125 14.375 18.125H5.625C5.12772 18.125 4.65081 17.9275 4.29917 17.5758C3.94754 17.2242 3.75 16.7473 3.75 16.25V3.75C3.75 3.25272 3.94754 2.77581 4.29917 2.42417C4.65081 2.07254 5.12772 1.875 5.625 1.875H9.48242C9.81383 1.87505 10.1316 2.0067 10.366 2.24102L15.884 7.75898C16.1183 7.99335 16.2499 8.31117 16.25 8.64258Z" stroke="#ECECF1" stroke-width="1.11111" stroke-linejoin="round"/>
+<path d="M10 2.1875V6.875C10 7.20652 10.1317 7.52446 10.3661 7.75888C10.6005 7.9933 10.9185 8.125 11.25 8.125H15.9375M6.875 11.25H13.125M6.875 14.375H13.125" stroke="#ECECF1" stroke-width="1.11111" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
--- a/frontend/src/assets/documentation.svg
+++ b/frontend/src/assets/documentation.svg
@@ -1,3 +1,4 @@
-<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.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 width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.25 8.64258V16.25C16.25 16.7473 16.0525 17.2242 15.7008 17.5758C15.3492 17.9275 14.8723 18.125 14.375 18.125H5.625C5.12772 18.125 4.65081 17.9275 4.29917 17.5758C3.94754 17.2242 3.75 16.7473 3.75 16.25V3.75C3.75 3.25272 3.94754 2.77581 4.29917 2.42417C4.65081 2.07254 5.12772 1.875 5.625 1.875H9.48242C9.81383 1.87505 10.1316 2.0067 10.366 2.24102L15.884 7.75898C16.1183 7.99335 16.2499 8.31117 16.25 8.64258Z" stroke="#6E6E6E" stroke-width="1.11111" stroke-linejoin="round"/>
+<path d="M10 2.1875V6.875C10 7.20652 10.1317 7.52446 10.3661 7.75888C10.6005 7.9933 10.9185 8.125 11.25 8.125H15.9375M6.875 11.25H13.125M6.875 14.375H13.125" stroke="#6E6E6E" stroke-width="1.11111" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
--- a/frontend/src/assets/envelope-dark.svg
+++ b/frontend/src/assets/envelope-dark.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.04867 15.49H15.1775C16.5339 15.49 17.3172 14.7067 17.3172 13.1548V4.83755C17.3172 3.29309 16.5265 2.50977 14.9515 2.50977H2.82302C1.47463 2.50977 0.683594 3.28569 0.683594 4.83755V13.1545C0.683594 14.7138 1.48138 15.49 3.04867 15.49ZM8.10441 9.3803L2.41609 3.76816C2.58163 3.70034 2.77738 3.66273 3.01106 3.66273H14.9971C15.2305 3.66273 15.434 3.70034 15.6072 3.78327L9.92692 9.38062C9.60291 9.7043 9.31652 9.84766 9.01534 9.84766C8.71384 9.84766 8.42841 9.70398 8.10441 9.3803ZM1.83559 13.1548V4.76234L6.16717 9.01162L1.84331 13.2824C1.83592 13.2448 1.83559 13.1998 1.83559 13.1548ZM16.1646 4.84494V13.2599L11.8629 9.0113L16.1649 4.78516L16.1646 4.84494ZM3.01106 14.3377C2.79249 14.3377 2.61184 14.3075 2.4537 14.2397L6.95852 9.78723L7.44838 10.2694C7.97552 10.7891 8.48017 11.0077 9.01534 11.0077C9.54249 11.0077 10.0548 10.7891 10.5823 10.2694L11.0718 9.78723L15.5696 14.2319C15.4111 14.3075 15.2154 14.3374 14.9968 14.3374L3.01106 14.3377Z" fill="#ECECF1"/>
+</svg>
--- a/frontend/src/assets/envelope.svg
+++ b/frontend/src/assets/envelope.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.04867 15.49H15.1775C16.5339 15.49 17.3172 14.7067 17.3172 13.1548V4.83755C17.3172 3.29309 16.5265 2.50977 14.9515 2.50977H2.82302C1.47463 2.50977 0.683594 3.28569 0.683594 4.83755V13.1545C0.683594 14.7138 1.48138 15.49 3.04867 15.49ZM8.10441 9.3803L2.41609 3.76816C2.58163 3.70034 2.77738 3.66273 3.01106 3.66273H14.9971C15.2305 3.66273 15.434 3.70034 15.6072 3.78327L9.92692 9.38062C9.60291 9.7043 9.31652 9.84766 9.01534 9.84766C8.71384 9.84766 8.42841 9.70398 8.10441 9.3803ZM1.83559 13.1548V4.76234L6.16717 9.01162L1.84331 13.2824C1.83592 13.2448 1.83559 13.1998 1.83559 13.1548ZM16.1646 4.84494V13.2599L11.8629 9.0113L16.1649 4.78516L16.1646 4.84494ZM3.01106 14.3377C2.79249 14.3377 2.61184 14.3075 2.4537 14.2397L6.95852 9.78723L7.44838 10.2694C7.97552 10.7891 8.48017 11.0077 9.01534 11.0077C9.54249 11.0077 10.0548 10.7891 10.5823 10.2694L11.0718 9.78723L15.5696 14.2319C15.4111 14.3075 15.2154 14.3374 14.9968 14.3374L3.01106 14.3377Z" fill="#6F6F6F"/>
+</svg>
--- a/frontend/src/assets/file_upload.svg
+++ b/frontend/src/assets/file_upload.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 26.0003H18C19.1 26.0003 20 25.1003 20 24.0003V14.0003H23.18C24.96 14.0003 25.86 11.8403 24.6 10.5803L15.42 1.40032C15.235 1.21491 15.0152 1.06782 14.7732 0.967453C14.5313 0.86709 14.2719 0.81543 14.01 0.81543C13.7481 0.81543 13.4887 0.86709 13.2468 0.967453C13.0048 1.06782 12.785 1.21491 12.6 1.40032L3.42 10.5803C2.16 11.8403 3.04 14.0003 4.82 14.0003H8V24.0003C8 25.1003 8.9 26.0003 10 26.0003ZM2 30.0003H26C27.1 30.0003 28 30.9003 28 32.0003C28 33.1003 27.1 34.0003 26 34.0003H2C0.9 34.0003 0 33.1003 0 32.0003C0 30.9003 0.9 30.0003 2 30.0003Z" fill="#828282"/>
+</svg>
--- a/frontend/src/assets/website_collect.svg
+++ b/frontend/src/assets/website_collect.svg
@@ -0,0 +1,6 @@
+<svg width="58" height="49" viewBox="0 0 58 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.0002 45.3337H6.3335C5.27263 45.3337 4.25521 44.9122 3.50507 44.1621C2.75492 43.4119 2.3335 42.3945 2.3335 41.3337V6.66699C2.3335 5.60613 2.75492 4.58871 3.50507 3.83856C4.25521 3.08842 5.27263 2.66699 6.3335 2.66699H51.6668C52.7277 2.66699 53.7451 3.08842 54.4953 3.83856C55.2454 4.58871 55.6668 5.60613 55.6668 6.66699V24.0003M42.3335 40.0003L49.0002 46.667M49.0002 46.667L55.6668 40.0003M49.0002 46.667V30.667" stroke="#626262" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.3335 6.66699C2.3335 5.60613 2.75492 4.58871 3.50507 3.83856C4.25521 3.08842 5.27263 2.66699 6.3335 2.66699H51.6668C52.7277 2.66699 53.7451 3.08842 54.4953 3.83856C55.2454 4.58871 55.6668 5.60613 55.6668 6.66699V18.667H2.3335V6.66699Z" stroke="#626262" stroke-width="4"/>
+<path d="M7.66667 10.6673C7.66667 9.19456 8.86057 8.00065 10.3333 8.00065C11.8061 8.00065 13 9.19456 13 10.6673C13 12.1401 11.8061 13.334 10.3333 13.334C8.86057 13.334 7.66667 12.1401 7.66667 10.6673Z" fill="#626262"/>
+<path d="M15.6667 10.6673C15.6667 9.19456 16.8606 8.00065 18.3333 8.00065C19.8061 8.00065 21 9.19456 21 10.6673C21 12.1401 19.8061 13.334 18.3333 13.334C16.8606 13.334 15.6667 12.1401 15.6667 10.6673Z" fill="#626262"/>
+</svg>
--- a/frontend/src/components/Help.tsx
+++ b/frontend/src/components/Help.tsx
@@ -0,0 +1,80 @@
+import { useState, useRef, useEffect } from 'react';
+import Info from '../assets/info.svg';
+import PageIcon from '../assets/documentation.svg';
+import EmailIcon from '../assets/envelope.svg';
+import { useTranslation } from 'react-i18next';
+const Help = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const { t } = useTranslation();
+
+  const toggleDropdown = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node) &&
+      buttonRef.current &&
+      !buttonRef.current.contains(event.target as Node)
+    ) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="relative inline-block text-sm" ref={dropdownRef}>
+      <button
+        ref={buttonRef}
+        onClick={toggleDropdown}
+        className="my-auto mx-4 w-full flex items-center h-9 gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E]"
+      >
+        <img src={Info} alt="info" className="ml-1 w-5 filter dark:invert" />
+        {t('help')}
+      </button>
+      {isOpen && (
+        <div
+          className={`absolute translate-x-4 -translate-y-28 z-10 w-48 shadow-lg bg-white dark:bg-[#444654] rounded-xl`}
+        >
+          <a
+            href="https://docs.docsgpt.cloud/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-start gap-4 px-4 py-2 text-black dark:text-white hover:bg-bright-gray dark:hover:bg-[#545561] rounded-t-xl"
+          >
+            <img
+              src={PageIcon}
+              alt="Documentation"
+              className="filter dark:invert"
+              width={20}
+            />
+            {t('documentation')}
+          </a>
+          <a
+            href="mailto:contact@arc53.com"
+            className="flex items-start gap-4 px-4 py-2 text-black dark:text-white hover:bg-bright-gray dark:hover:bg-[#545561] rounded-b-xl"
+          >
+            <img
+              src={EmailIcon}
+              alt="Email Us"
+              className="filter dark:invert p-0.5"
+              width={20}
+            />
+            {t('emailUs')}
+          </a>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Help;
--- a/frontend/src/components/RetryIcon.tsx
+++ b/frontend/src/components/RetryIcon.tsx
@@ -4,10 +4,11 @@ const RetryIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlSpace="preserve"
-    width={16}
-    height={16}
+    width={props.width ? props.width : 16}
+    height={props.height ? props.height : 16}
    fill={props.fill}
-    stroke={props.stroke}
+    stroke={props.stroke ? props.stroke : 'none'}
+    strokeWidth={props.strokeWidth ? props.strokeWidth : 10}
    viewBox="0 0 383.748 383.748"
    {...props}
  >
--- a/frontend/src/components/SettingsBar.tsx
+++ b/frontend/src/components/SettingsBar.tsx
@@ -71,9 +71,9 @@ const SettingsBar = ({ setActiveTab, activeTab }: SettingsBarProps) => {
          <button
            key={index}
            onClick={() => setActiveTab(tab)}
-            className={`snap-start h-9 rounded-3xl px-4 font-bold ${
+            className={`snap-start h-9 rounded-3xl px-4 font-bold hover:text-neutral-600 dark:hover:text-white/60 ${
              activeTab === tab
-                ? 'bg-purple-3000 text-purple-30 dark:bg-dark-charcoal'
+                ? 'bg-neutral-100 text-neutral-600  dark:bg-dark-charcoal dark:text-white/60'
                : 'text-gray-6000'
            }`}
          >
--- a/frontend/src/components/SkeletonLoader.tsx
+++ b/frontend/src/components/SkeletonLoader.tsx
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -10,7 +10,7 @@ import SpinnerDark from '../assets/spinner-dark.svg';
 import Spinner from '../assets/spinner.svg';
 import RetryIcon from '../components/RetryIcon';
 import Hero from '../Hero';
-import { useDarkTheme } from '../hooks';
+import { useDarkTheme, useMediaQuery } from '../hooks';
 import { ShareConversationModal } from '../modals/ShareConversationModal';
 import { selectConversationId } from '../preferences/preferenceSlice';
 import { AppDispatch } from '../store';
@@ -39,6 +39,7 @@ export default function Conversation() {
  const [lastQueryReturnedErr, setLastQueryReturnedErr] = useState(false);
  const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
  const { t } = useTranslation();
+  const { isMobile } = useMediaQuery();

  const handleUserInterruption = () => {
    if (!eventInterrupt && status === 'loading') setEventInterrupt(true);
@@ -139,7 +140,7 @@ export default function Conversation() {
    } else if (query.error) {
      const retryBtn = (
        <button
-          className="flex items-center justify-center gap-3 self-center rounded-full border border-silver py-3 px-5  text-lg text-gray-500 transition-colors delay-100 hover:border-gray-500 disabled:cursor-not-allowed dark:text-bright-gray"
+          className="flex items-center justify-center gap-3 self-center rounded-full py-3 px-5  text-lg text-gray-500 transition-colors delay-100 hover:border-gray-500 disabled:cursor-not-allowed dark:text-bright-gray"
          disabled={status === 'loading'}
          onClick={() => {
            handleQuestion({
@@ -149,10 +150,12 @@ export default function Conversation() {
          }}
        >
          <RetryIcon
+            width={isMobile ? 12 : 12} // change the width and height according to device size if necessary
+            height={isMobile ? 12 : 12}
            fill={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
            stroke={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
+            strokeWidth={10}
          />
-          Retry
        </button>
      );
      responseView = (
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -8,7 +8,6 @@ import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import 'katex/dist/katex.min.css';

-import Alert from '../assets/alert.svg';
 import DocsGPT3 from '../assets/cute_docsgpt3.svg';
 import Dislike from '../assets/dislike.svg?react';
 import Document from '../assets/document.svg';
@@ -238,14 +237,6 @@ const ConversationBubble = forwardRef<
                : 'flex-col rounded-3xl'
            }`}
          >
-            {type === 'ERROR' && (
-              <>
-                <img src={Alert} alt="alert" className="mr-2 inline" />
-                <div className="absolute right-0 lg:-right-32 top-1/2 translate-y-full lg:-translate-y-1/2">
-                  {retryBtn}
-                </div>
-              </>
-            )}
            <ReactMarkdown
              className="whitespace-pre-wrap break-normal leading-normal"
              remarkPlugins={[remarkGfm, remarkMath]}
@@ -339,12 +330,17 @@ const ConversationBubble = forwardRef<
        <div className="my-2 ml-2 flex justify-start">
          <div
            className={`relative mr-5  block items-center justify-center lg:invisible 
-            ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''}`}
+            ${type !== 'ERROR' ? 'group-hover:lg:visible' : 'hidden'}`}
          >
            <div>
              <CopyButton text={message} />
            </div>
          </div>
+          {type === 'ERROR' && (
+            <div className="relative mr-5 block items-center justify-center">
+              <div>{retryBtn}</div>
+            </div>
+          )}
          {handleFeedback && (
            <>
              <div
--- a/frontend/src/conversation/ConversationTile.tsx
+++ b/frontend/src/conversation/ConversationTile.tsx
@@ -1,9 +1,13 @@
-import { SyntheticEvent, useEffect, useRef, useState } from 'react';
+import {
+  SyntheticEvent,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+} from 'react';
 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 { useDarkTheme } from '../hooks';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import CheckMark2 from '../assets/checkMark2.svg';
@@ -77,6 +81,36 @@ export default function ConversationTile({
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);
+
+  const preventScroll = useCallback((event: WheelEvent | TouchEvent) => {
+    event.preventDefault();
+  }, []);
+
+  useEffect(() => {
+    const conversationsMainDiv = document.getElementById(
+      'conversationsMainDiv',
+    );
+
+    if (conversationsMainDiv) {
+      if (isOpen) {
+        conversationsMainDiv.addEventListener('wheel', preventScroll, {
+          passive: false,
+        });
+        conversationsMainDiv.addEventListener('touchmove', preventScroll, {
+          passive: false,
+        });
+      } else {
+        conversationsMainDiv.removeEventListener('wheel', preventScroll);
+        conversationsMainDiv.removeEventListener('touchmove', preventScroll);
+      }
+
+      return () => {
+        conversationsMainDiv.removeEventListener('wheel', preventScroll);
+        conversationsMainDiv.removeEventListener('touchmove', preventScroll);
+      };
+    }
+  }, [isOpen]);
+
  function onClear() {
    setConversationsName(conversation.name);
    setIsEdit(false);
@@ -96,17 +130,13 @@ export default function ConversationTile({
          conversationId !== conversation.id &&
            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 dark:hover:bg-[#28292E] ${
+        className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between pl-4 gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
          conversationId === conversation.id || isOpen || isHovered
            ? 'bg-gray-100 dark:bg-[#28292E]'
            : ''
        }`}
      >
        <div className={`flex w-10/12 gap-4`}>
-          <img
-            src={isDarkTheme ? MessageDark : Message}
-            className="ml-4 w-5 dark:text-white"
-          />
          {isEdit ? (
            <input
              autoFocus
@@ -153,7 +183,7 @@ export default function ConversationTile({
              <button
                onClick={(event: SyntheticEvent) => {
                  event.stopPropagation();
-                  setOpen(true);
+                  setOpen(!isOpen);
                }}
                className="mr-2 flex w-4 justify-center"
              >
--- a/frontend/src/conversation/conversationHandlers.ts
+++ b/frontend/src/conversation/conversationHandlers.ts
@@ -38,9 +38,11 @@ export function handleFetchAnswer(
    prompt_id: promptId,
    chunks: chunks,
    token_limit: token_limit,
+    isNoneDoc: selectedDocs === null,
  };
-  if (selectedDocs && 'id' in selectedDocs)
+  if (selectedDocs && 'id' in selectedDocs) {
    payload.active_docs = selectedDocs.id as string;
+  }
  payload.retriever = selectedDocs?.retriever as string;
  return conversationService
    .answer(payload, signal)
@@ -84,26 +86,16 @@ export function handleFetchAnswerSteaming(
    prompt_id: promptId,
    chunks: chunks,
    token_limit: token_limit,
+    isNoneDoc: selectedDocs === null,
  };
-  if (selectedDocs && 'id' in selectedDocs)
+  if (selectedDocs && 'id' in selectedDocs) {
    payload.active_docs = selectedDocs.id as string;
+  }
  payload.retriever = selectedDocs?.retriever as string;

  return new Promise<Answer>((resolve, reject) => {
    conversationService
-      .answerStream(
-        {
-          question: question,
-          active_docs: selectedDocs?.id as string,
-          history: JSON.stringify(history),
-          conversation_id: conversationId,
-          prompt_id: promptId,
-          chunks: chunks,
-          token_limit: token_limit,
-          isNoneDoc: selectedDocs === null,
-        },
-        signal,
-      )
+      .answerStream(payload, signal)
      .then((response) => {
        if (!response.body) throw Error('No response body');

@@ -169,20 +161,13 @@ export function handleSearch(
    conversation_id: conversation_id,
    chunks: chunks,
    token_limit: token_limit,
+    isNoneDoc: selectedDocs === null,
  };
  if (selectedDocs && 'id' in selectedDocs)
    payload.active_docs = selectedDocs.id as string;
  payload.retriever = selectedDocs?.retriever as string;
  return conversationService
-    .search({
-      question: question,
-      active_docs: selectedDocs?.id as string,
-      conversation_id,
-      history,
-      chunks: chunks,
-      token_limit: token_limit,
-      isNoneDoc: selectedDocs === null,
-    })
+    .search(payload)
    .then((response) => response.json())
    .then((data) => {
      return data;
--- a/frontend/src/conversation/conversationModels.ts
+++ b/frontend/src/conversation/conversationModels.ts
@@ -40,4 +40,5 @@ export interface RetrievalPayload {
  prompt_id?: string | null;
  chunks: string;
  token_limit: number;
+  isNoneDoc: boolean;
 }
--- a/frontend/src/hooks/index.ts
+++ b/frontend/src/hooks/index.ts
@@ -82,6 +82,7 @@ export function useDarkTheme() {
  };

  const [isDarkTheme, setIsDarkTheme] = useState<boolean>(getInitialTheme());
+  const [componentMounted, setComponentMounted] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
@@ -102,11 +103,12 @@ export function useDarkTheme() {
    } else {
      document.body?.classList.remove('dark');
    }
+    setComponentMounted(true);
  }, [isDarkTheme]);

  const toggleTheme = () => {
    setIsDarkTheme(!isDarkTheme);
  };

-  return [isDarkTheme, toggleTheme] as const;
+  return [isDarkTheme, toggleTheme, componentMounted] as const;
 }
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -7,9 +7,12 @@
  "about": "About",
  "inputPlaceholder": "Type your message here...",
  "tagline": "DocsGPT uses GenAI, please review critical information using sources.",
-  "sourceDocs": "Source Docs",
+  "sourceDocs": "Source",
  "none": "None",
  "cancel": "Cancel",
+  "help":"Help",
+  "emailUs":"Email us",
+  "documentation":"documentation",
  "demo": [
    {
      "header": "Learn about DocsGPT",
@@ -75,8 +78,12 @@
  "modals": {
    "uploadDoc": {
      "label": "Upload New Documentation",
-      "file": "From File",
-      "remote": "Remote",
+      "select": "Choose how to upload your document to DocsGPT",
+      "file": "Upload from device",
+      "back": "Back",
+      "wait": "Please wait ...",
+      "remote": "Collect from a website",
+      "start": "Start Chatting",
      "name": "Name",
      "choose": "Choose Files",
      "info": "Please upload .pdf, .txt, .rst, .csv, .xlsx, .docx, .md, .zip limited to 25mb",
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -7,9 +7,12 @@
  "about": "Acerca de",
  "inputPlaceholder": "Escribe tu mensaje aquí...",
  "tagline": "DocsGPT utiliza GenAI, por favor revisa información crítica utilizando fuentes.",
-  "sourceDocs": "Documentos Fuente",
+  "sourceDocs": "Fuente",
  "none": "Nada",
  "cancel": "Cancelar",
+  "help":"Asistencia",
+  "emailUs": "Envíanos un correo",
+  "documentation": "documentación",
  "demo": [
    {
      "header": "Aprende sobre DocsGPT",
@@ -75,8 +78,12 @@
  "modals": {
    "uploadDoc": {
      "label": "Subir Nueva Documentación",
-      "file": "Desde Archivo",
-      "remote": "Remota",
+      "select": "Elija cómo cargar su documento en DocsGPT",
+      "file": "Subir desde el dispositivo",
+      "back": "Atrás",
+      "wait": "Espere por favor ...",
+      "remote": "Recoger desde un sitio web",
+      "start": "Empezar a chatear",
      "name": "Nombre",
      "choose": "Seleccionar Archivos",
      "info": "Por favor, suba archivos .pdf, .txt, .rst, .docx, .md, .zip limitados a 25 MB",
--- a/frontend/src/locale/i18n.ts
+++ b/frontend/src/locale/i18n.ts
@@ -6,6 +6,7 @@ import en from './en.json'; //English
 import es from './es.json'; //Spanish
 import jp from './jp.json'; //Japanese
 import zh from './zh.json'; //Mandarin
+import zhTW from './zh-TW.json'; //Traditional Chinese

 i18n
  .use(LanguageDetector)
@@ -24,6 +25,9 @@ i18n
      zh: {
        translation: zh,
      },
+      'zh-TW': {
+        translation: zhTW,
+      },
    },
    fallbackLng: 'en',
    detection: {
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -7,9 +7,12 @@
  "about": "について",
  "inputPlaceholder": "ここにメッセージを入力してください...",
  "tagline": "DocsGPTはGenAIを使用しています。重要な情報はソースで確認してください。",
-  "sourceDocs": "ソースドキュメント",
+  "sourceDocs": "ソース",
  "none": "なし",
  "cancel": "キャンセル",
+  "help":"ヘルプ",
+  "emailUs": "メールを送る",
+  "documentation": "ドキュメント",
  "demo": [
    {
      "header": "DocsGPTについて学ぶ",
@@ -75,8 +78,12 @@
  "modals": {
    "uploadDoc": {
      "label": "新規書類のアップロード",
-      "file": "ファイルから",
-      "remote": "リモート",
+      "select": "ドキュメントを DocsGPT にアップロードする方法を選択します",
+      "file": "デバイスからアップロード",
+      "back": "戻る",
+      "wait": "お待ちください ...",
+      "remote": "ウェブサイトから収集する",
+      "start": "チャットを開始する",
      "name": "名前",
      "choose": "ファイルを選択",
      "info": ".pdf, .txt, .rst, .docx, .md, .zipファイルを25MBまでアップロードしてください",
--- a/frontend/src/locale/zh-TW.json
+++ b/frontend/src/locale/zh-TW.json
@@ -0,0 +1,133 @@
+{
+  "language": "繁體中文（臺灣）",
+  "chat": "對話",
+  "chats": "對話",
+  "newChat": "新對話",
+  "myPlan": "我的方案",
+  "about": "關於",
+  "inputPlaceholder": "在此輸入您的訊息...",
+  "tagline": "DocsGPT 使用生成式 AI，請使用原始資料來源審閱重要資訊。",
+  "sourceDocs": "原始文件",
+  "none": "無",
+  "cancel": "取消",
+  "help":"聯繫支援",
+  "emailUs": "寄送電子郵件給我們",
+  "documentation": "文件",
+  "demo": [
+    {
+      "header": "了解 DocsGPT",
+      "query": "什麼是 DocsGPT？"
+    },
+    {
+      "header": "摘要文件",
+      "query": "摘要目前的內容"
+    },
+    {
+      "header": "撰寫程式碼",
+      "query": "為 /api/answer 撰寫 API 請求程式碼"
+    },
+    {
+      "header": "學習輔助",
+      "query": "為此內容撰寫可能的問題"
+    }
+  ],
+  "settings": {
+    "label": "設定",
+    "general": {
+      "label": "一般",
+      "selectTheme": "選擇主題",
+      "light": "淺色",
+      "dark": "深色",
+      "selectLanguage": "選擇語言",
+      "chunks": "每次查詢處理的區塊數",
+      "prompt": "使用中的提示",
+      "deleteAllLabel": "刪除所有對話",
+      "deleteAllBtn": "全部刪除",
+      "addNew": "新增",
+      "convHistory": "對話歷史記錄",
+      "none": "無",
+      "low": "低",
+      "medium": "中",
+      "high": "高",
+      "unlimited": "無限制",
+      "default": "預設"
+    },
+    "documents": {
+      "label": "文件",
+      "name": "文件名稱",
+      "date": "向量日期",
+      "type": "類型",
+      "tokenUsage": "Token 使用量"
+    },
+    "apiKeys": {
+      "label": "API 金鑰",
+      "name": "名稱",
+      "key": "API 金鑰",
+      "sourceDoc": "來源文件",
+      "createNew": "新增"
+    },
+    "analytics": {
+      "label": "分析"
+    },
+    "logs": {
+      "label": "日誌"
+    }
+  },
+  "modals": {
+    "uploadDoc": {
+      "label": "上傳新文件",
+      "file": "從檔案",
+      "remote": "遠端",
+      "name": "名稱",
+      "choose": "選擇檔案",
+      "info": "請上傳 .pdf, .txt, .rst, .docx, .md, .zip 檔案，大小限制為 25MB",
+      "uploadedFiles": "已上傳的檔案",
+      "cancel": "取消",
+      "train": "訓練",
+      "link": "連結",
+      "urlLink": "URL 連結",
+      "reddit": {
+        "id": "用戶端 ID",
+        "secret": "用戶端金鑰",
+        "agent": "使用者代理(User-Agent)",
+        "searchQueries": "搜尋查詢",
+        "numberOfPosts": "貼文數量"
+      }
+    },
+    "createAPIKey": {
+      "label": "建立新的 API 金鑰",
+      "apiKeyName": "API 金鑰名稱",
+      "chunks": "每次查詢處理的區塊數",
+      "prompt": "選擇使用中的提示",
+      "sourceDoc": "來源文件",
+      "create": "建立"
+    },
+    "saveKey": {
+      "note": "請儲存您的金鑰",
+      "disclaimer": "這是唯一一次顯示您的金鑰。",
+      "copy": "複製",
+      "copied": "已複製",
+      "confirm": "我已儲存金鑰"
+    },
+    "deleteConv": {
+      "confirm": "您確定要刪除所有對話嗎？",
+      "delete": "刪除"
+    },
+    "shareConv": {
+      "label": "建立公開頁面以分享",
+      "note": "來源文件、個人資訊和後續對話將保持私密",
+      "create": "建立"
+    }
+  },
+  "sharedConv": {
+    "subtitle": "使用以下工具建立",
+    "button": "開始使用 DocsGPT",
+    "meta": "DocsGPT 使用生成式 AI，請使用原始資料來源審閱重要資訊。"
+  },
+  "convTile": {
+    "share": "分享",
+    "delete": "刪除",
+    "rename": "重新命名",
+    "deleteWarning": "您確定要刪除這個對話嗎？"
+  }
+}
--- a/frontend/src/locale/zh.json
+++ b/frontend/src/locale/zh.json
@@ -7,9 +7,12 @@
  "about": "关于",
  "inputPlaceholder": "在这里输入您的消息...",
  "tagline": "DocsGPT 使用 GenAI, 请使用来源审核关键信息.",
-  "sourceDocs": "来源文档",
+  "sourceDocs": "源",
  "none": "无",
  "cancel": "取消",
+  "help":"联系支持",
+  "emailUs": "给我们发邮件",
+  "documentation": "文档",
  "demo": [
    {
      "header": "了解 DocsGPT",
@@ -75,8 +78,12 @@
  "modals": {
    "uploadDoc": {
      "label": "上传新文档资料",
-      "file": "从文件",
-      "remote": "远程",
+      "select": "选择如何将文档上传到 DocsGPT",
+      "file": "从设备上传",
+      "back": "后退",
+      "wait": "请稍等 ...",
+      "remote": "从网站收集",
+      "start": "开始聊天",
      "name": "名称",
      "choose": "选择文件",
      "info": "请上传 .pdf, .txt, .rst, .docx, .md, .zip 文件，限 25MB",
--- a/frontend/src/settings/APIKeys.tsx
+++ b/frontend/src/settings/APIKeys.tsx
@@ -6,7 +6,7 @@ import Trash from '../assets/trash.svg';
 import CreateAPIKeyModal from '../modals/CreateAPIKeyModal';
 import SaveAPIKeyModal from '../modals/SaveAPIKeyModal';
 import { APIKeyData } from './types';
-import SkeletonLoader from '../utils/loader';
+import SkeletonLoader from '../components/SkeletonLoader';

 export default function APIKeys() {
  const { t } = useTranslation();
--- a/frontend/src/settings/Analytics.tsx
+++ b/frontend/src/settings/Analytics.tsx
@@ -17,7 +17,7 @@ import { formatDate } from '../utils/dateTimeUtils';
 import { APIKeyData } from './types';

 import type { ChartData } from 'chart.js';
-import SkeletonLoader from '../utils/loader';
+import SkeletonLoader from '../components/SkeletonLoader';

 ChartJS.register(
  CategoryScale,
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -7,7 +7,7 @@ import userService from '../api/services/userService';
 import SyncIcon from '../assets/sync.svg';
 import Trash from '../assets/trash.svg';
 import DropdownMenu from '../components/DropdownMenu';
-import SkeletonLoader from '../utils/loader';
+import SkeletonLoader from '../components/SkeletonLoader';
 import { Doc, DocumentsProps } from '../models/misc';
 import { getDocs } from '../preferences/preferenceApi';
 import { setSourceDocs } from '../preferences/preferenceSlice';
--- a/frontend/src/settings/Logs.tsx
+++ b/frontend/src/settings/Logs.tsx
@@ -3,7 +3,7 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
 import userService from '../api/services/userService';
 import ChevronRight from '../assets/chevron-right.svg';
 import Dropdown from '../components/Dropdown';
-import SkeletonLoader from '../utils/loader';
+import SkeletonLoader from '../components/SkeletonLoader';
 import { APIKeyData, LogData } from './types';
 import CoppyButton from '../components/CopyButton';

--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -4,6 +4,10 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';

 import userService from '../api/services/userService';
+import Exit from '../assets/exit.svg';
+import ArrowLeft from '../assets/arrow-left.svg';
+import FileUpload from '../assets/file_upload.svg';
+import WebsiteCollect from '../assets/website_collect.svg';
 import Dropdown from '../components/Dropdown';
 import Input from '../components/Input';
 import { ActiveState, Doc } from '../models/misc';
@@ -17,9 +21,11 @@ import {
 function Upload({
  modalState,
  setModalState,
+  isOnboarding,
 }: {
  modalState: ActiveState;
  setModalState: (state: ActiveState) => void;
+  isOnboarding: boolean;
 }) {
  const [docName, setDocName] = useState('');
  const [urlName, setUrlName] = useState('');
@@ -32,7 +38,7 @@ function Upload({
    search_queries: [''],
    number_posts: 10,
  });
-  const [activeTab, setActiveTab] = useState<string>('file');
+  const [activeTab, setActiveTab] = useState<string | null>(null);
  const [files, setfiles] = useState<File[]>([]);
  const [progress, setProgress] = useState<{
    type: 'UPLOAD' | 'TRAINING';
@@ -66,18 +72,24 @@ function Upload({

  function ProgressBar({ progressPercent }: { progressPercent: number }) {
    return (
-      <div className="my-5 w-[50%]">
-        <div
-          className={`h-8 overflow-hidden rounded-xl border border-purple-30 text-xs text-bright-gray outline-none `}
-        >
+      <div className="flex items-center justify-center h-full w-full my-8">
+        <div className="relative w-32 h-32 rounded-full">
+          <div className="absolute inset-0 rounded-full shadow-[0_0_10px_2px_rgba(0,0,0,0.3)_inset] dark:shadow-[0_0_10px_2px_rgba(0,0,0,0.3)_inset]"></div>
          <div
-            className={`h-full border-none text-xl w-${
-              progress || 0
-            }%  flex items-center justify-center bg-purple-30 outline-none transition-all`}
-            style={{ width: `${progressPercent || 0}%` }}
-          >
-            {progressPercent >= 5 && `${progressPercent}%`}
+            className={`absolute inset-0 rounded-full ${progressPercent === 100 ? 'shadow-xl shadow-lime-300/50 dark:shadow-lime-300/50 bg-gradient-to-r from-white to-gray-400 dark:bg-gradient-to-br dark:from-gray-500 dark:to-gray-300' : 'shadow-[0_2px_0_#FF3D00_inset] dark:shadow-[0_2px_0_#FF3D00_inset]'}`}
+            style={{
+              animation: `${progressPercent === 100 ? 'none' : 'rotate 2s linear infinite'}`,
+            }}
+          ></div>
+          <div className="absolute inset-0 flex items-center justify-center">
+            <span className="text-2xl font-bold">{progressPercent}%</span>
          </div>
+          <style>
+            {`@keyframes rotate {
+                0% { transform: rotate(0deg); }
+                100%{ transform: rotate(360deg); }
+              }`}
+          </style>
        </div>
      </div>
    );
@@ -87,20 +99,47 @@ function Upload({
    title,
    isCancellable = false,
    isFailed = false,
+    isTraining = false,
  }: {
    title: string;
    isCancellable?: boolean;
    isFailed?: boolean;
+    isTraining?: boolean;
  }) {
    return (
      <div className="mt-5 flex flex-col items-center gap-2 text-gray-2000 dark:text-bright-gray">
-        <p className="text-gra text-xl tracking-[0.15px]">{title}...</p>
+        <p className="text-gra text-xl tracking-[0.15px]">
+          {isTraining &&
+            (progress?.percentage === 100 ? 'Training completed' : title)}
+          {!isTraining && title}
+        </p>
        <p className="text-sm">This may take several minutes</p>
        <p className={`ml-5 text-xl text-red-400 ${isFailed ? '' : 'hidden'}`}>
          Over the token limit, please consider uploading smaller document
        </p>
        {/* <p className="mt-10 text-2xl">{progress?.percentage || 0}%</p> */}
-        <ProgressBar progressPercent={progress?.percentage as number} />
+        <ProgressBar progressPercent={progress?.percentage || 0} />
+        {isTraining &&
+          (progress?.percentage === 100 ? (
+            <button
+              onClick={() => {
+                setDocName('');
+                setfiles([]);
+                setProgress(undefined);
+                setModalState('INACTIVE');
+              }}
+              className="cursor-pointer rounded-3xl text-sm h-[42px] px-[28px] py-[6px] bg-[#7D54D1] text-white hover:bg-[#6F3FD1] shadow-lg"
+            >
+              {t('modals.uploadDoc.start')}
+            </button>
+          ) : (
+            <button
+              className="ml-2 cursor-pointer rounded-3xl text-sm h-[42px] px-[28px] py-[6px] bg-[#7D54D14D] text-white shadow-lg"
+              disabled
+            >
+              {t('modals.uploadDoc.wait')}
+            </button>
+          ))}
      </div>
    );
  }
@@ -191,6 +230,7 @@ function Upload({
        title="Training is in progress"
        isCancellable={progress?.percentage === 100}
        isFailed={progress?.failed === true}
+        isTraining={true}
      ></Progress>
    );
  }
@@ -305,32 +345,39 @@ function Upload({
    view = <TrainingProgress></TrainingProgress>;
  } else {
    view = (
-      <>
-        <p className="text-xl text-jet dark:text-bright-gray">
+      <div className="flex flex-col gap-4 w-full">
+        <p className="text-xl text-jet dark:text-bright-gray text-center font-semibold">
          {t('modals.uploadDoc.label')}
        </p>
-        <div>
-          <button
-            onClick={() => setActiveTab('file')}
-            className={`${
-              activeTab === 'file'
-                ? 'bg-soap text-purple-30 dark:bg-independence dark:text-purple-400'
-                : 'text-sonic-silver  hover:text-purple-30'
-            } mr-4 rounded-full px-[20px] py-[5px] text-sm font-semibold`}
-          >
-            {t('modals.uploadDoc.file')}
-          </button>
-          <button
-            onClick={() => setActiveTab('remote')}
-            className={`${
-              activeTab === 'remote'
-                ? 'bg-soap text-purple-30 dark:bg-independence dark:text-purple-400'
-                : 'text-sonic-silver  hover:text-purple-30'
-            } mr-4 rounded-full px-[20px] py-[5px] text-sm font-semibold`}
-          >
-            {t('modals.uploadDoc.remote')}
-          </button>
-        </div>
+        {!activeTab && (
+          <div>
+            <p className="text-gray-6000 dark:text-light-gray text-sm text-center">
+              {t('modals.uploadDoc.select')}
+            </p>
+            <div className="w-full gap-4 h-full p-4 flex flex-col md:flex-row md:gap-4 justify-center items-center">
+              <button
+                onClick={() => setActiveTab('file')}
+                className="rounded-3xl text-md font-medium border flex flex-col items-center justify-center hover:shadow-lg dark:hover:shadow-lg p-8 dark:active:shadow-lg gap-4 bg-white dark:bg-outer-space dark:text-light-gray hover:bg-gray-100 dark:hover:bg-[#767183]/50 hover:text-purple-30 dark:hover:text-gray-30 border-purple-30 dark:border-gray-700 h-40 w-40 md:w-52 md:h-52"
+              >
+                <img
+                  src={FileUpload}
+                  className="w-8 h-8 mr-2 dark:filter dark:invert"
+                />
+                {t('modals.uploadDoc.file')}
+              </button>
+              <button
+                onClick={() => setActiveTab('remote')}
+                className="rounded-3xl text-md font-medium border flex flex-col items-center justify-center hover:shadow-lg dark:hover:shadow-lg p-8 dark:active:shadow-lg gap-4 bg-white dark:bg-outer-space dark:text-light-gray hover:bg-gray-100 dark:hover:bg-[#767183]/50 hover:text-purple-30 dark:hover:text-gray-30 border-purple-30 dark:border-gray-700 h-40 w-40 md:w-52 md:h-52"
+              >
+                <img
+                  src={WebsiteCollect}
+                  className="w-8 h-8 mr-2 dark:filter dark:invert"
+                />
+                {t('modals.uploadDoc.remote')}
+              </button>
+            </div>
+          </div>
+        )}

        {activeTab === 'file' && (
          <>
@@ -519,43 +566,48 @@ function Upload({
            )}
          </>
        )}
-
-        <div className="flex flex-row-reverse">
-          {activeTab === 'file' ? (
+        {activeTab && (
+          <div className="flex w-full justify-between flex-row-reverse">
+            {activeTab === 'file' ? (
+              <button
+                onClick={uploadFile}
+                className={`ml-2 cursor-pointer rounded-3xl bg-purple-30 text-sm text-white ${
+                  files.length > 0 && docName.trim().length > 0
+                    ? 'hover:bg-[#6F3FD1]'
+                    : 'bg-opacity-75 text-opacity-80'
+                } py-2 px-6`}
+                disabled={
+                  (files.length === 0 || docName.trim().length === 0) &&
+                  activeTab === 'file'
+                }
+              >
+                {t('modals.uploadDoc.train')}
+              </button>
+            ) : (
+              <button
+                onClick={uploadRemote}
+                className={`ml-2 cursor-pointer rounded-3xl bg-purple-30 py-2 px-6 text-sm text-white hover:bg-[#6F3FD1]`}
+              >
+                {t('modals.uploadDoc.train')}
+              </button>
+            )}
            <button
-              onClick={uploadFile}
-              className={`ml-2 cursor-pointer rounded-3xl bg-purple-30 text-sm text-white ${
-                files.length > 0 && docName.trim().length > 0
-                  ? 'hover:bg-[#6F3FD1]'
-                  : 'bg-opacity-75 text-opacity-80'
-              } py-2 px-6`}
-              disabled={
-                (files.length === 0 || docName.trim().length === 0) &&
-                activeTab === 'file'
-              }
+              onClick={() => {
+                setDocName('');
+                setfiles([]);
+                setActiveTab(null);
+              }}
+              className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50 flex items-center gap-1"
            >
-              {t('modals.uploadDoc.train')}
+              <img
+                src={ArrowLeft}
+                className="w-[10px] h-[10px] dark:filter dark:invert"
+              />
+              {t('modals.uploadDoc.back')}
            </button>
-          ) : (
-            <button
-              onClick={uploadRemote}
-              className={`ml-2 cursor-pointer rounded-3xl bg-purple-30 py-2 px-6 text-sm text-white hover:bg-[#6F3FD1]`}
-            >
-              {t('modals.uploadDoc.train')}
-            </button>
-          )}
-          <button
-            onClick={() => {
-              setDocName('');
-              setfiles([]);
-              setModalState('INACTIVE');
-            }}
-            className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
-          >
-            {t('modals.uploadDoc.cancel')}
-          </button>
-        </div>
-      </>
+          </div>
+        )}
+      </div>
    );
  }

@@ -563,9 +615,22 @@ function Upload({
    <article
      className={`${
        modalState === 'ACTIVE' ? 'visible' : 'hidden'
-      } absolute z-30  h-screen w-screen  bg-gray-alpha`}
+      } absolute z-30 bg-gray-alpha flex items-center justify-center h-[calc(100vh-4rem)] md:h-screen w-full`}
    >
-      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg dark:bg-outer-space">
+      <article className="relative mx-auto flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg dark:bg-outer-space h-fit-content">
+        {!isOnboarding && !progress && (
+          <button
+            className="absolute top-4 right-4 m-1 w-3"
+            onClick={() => {
+              setDocName('');
+              setfiles([]);
+              setModalState('INACTIVE');
+              setActiveTab(null);
+            }}
+          >
+            <img className="filter dark:invert" src={Exit} />
+          </button>
+        )}
        {view}
      </article>
    </article>
--- a/lexeu-competition.md
+++ b/lexeu-competition.md
@@ -22,8 +22,8 @@ Participants are required to analyze a given test contract by scraping EU law da
 ### Steps to Participate:

 1. **Download Test Contract:** You can download it via this [link](https://docs.google.com/document/d/198d7gFJbVWttkIS9ZRUs_PTKIjhsOUeR/edit?usp=sharing&ouid=107667025862106683614&rtpof=true&sd=true).
-2. **Ingest EU Law Data:** Gathe and store data in any format, its available [here](https://eur-lex.europa.eu/browse/directories/legislation.html?displayProfile=lastConsDocProfile&classification=in-force).
-3. **Optimized Data Retrieval:** Implement methods to retrieve only small, relevant portions of the law data for efficient analysis of the test contract. Try to create a custom retriever and parser
+2. **Ingest EU Law Data:** Gather and store data in any format, it's available [here](https://eur-lex.europa.eu/browse/directories/legislation.html?displayProfile=lastConsDocProfile&classification=in-force).
+3. **Optimized Data Retrieval:** Implement methods to retrieve only small, relevant portions of the law data for efficient analysis of the test contract. Try to create a custom retriever and a parser.
 4. **Analyze the Contract:** Use your optimized retrieval method to analyze the test contract against the EU law data.
 5. **Submission Criteria:** Your solution will be judged based on:
   - Amount of corrections/inconsistencies found
@@ -41,7 +41,7 @@ Participants are required to analyze a given test contract by scraping EU law da
 - **Documentation:** Refer to our [Documentation](https://docs.docsgpt.cloud/) for guidance.
 - **Discord Support:** Join our [Discord](https://discord.gg/n5BX8dh8rU) server for support and discussions related to the competition.
 - Try looking at existing [retrievers](https://github.com/arc53/DocsGPT/tree/main/application/retriever) and maybe creating a custom one
- Try looking at [worker.py](https://github.com/arc53/DocsGPT/blob/main/application/worker.py) which ingests data and creating a custom one for EU law ingestion 
+- Try looking at [worker.py](https://github.com/arc53/DocsGPT/blob/main/application/worker.py) which ingests data and creating a custom one for ingesting EU law

 ## 👥 Community and Support:

--- a/setup.sh
+++ b/setup.sh
@@ -9,6 +9,39 @@ prompt_user() {
    read -p "Enter your choice (1, 2 or 3): " choice
 }

+check_and_start_docker() {
+    # Check if Docker is running
+    if ! docker info > /dev/null 2>&1; then
+        echo "Docker is not running. Starting Docker..."
+
+        # Check the operating system
+        case "$(uname -s)" in
+            Darwin)
+                open -a Docker
+                ;;
+            Linux)
+                sudo systemctl start docker
+                ;;
+            *)
+                echo "Unsupported platform. Please start Docker manually."
+                exit 1
+                ;;
+        esac
+
+        # Wait for Docker to be fully operational with animated dots
+        echo -n "Waiting for Docker to start"
+        while ! docker system info > /dev/null 2>&1; do
+            for i in {1..3}; do
+                echo -n "."
+                sleep 1
+            done
+            echo -ne "\rWaiting for Docker to start   " # Reset to overwrite previous dots
+        done
+
+        echo -e "\nDocker has started!"
+    fi
+}
+
 # Function to handle the choice to download the model locally
 download_locally() {
    echo "LLM_NAME=llama.cpp" > .env
@@ -30,6 +63,9 @@ download_locally() {
        echo "Model already exists."
    fi
   
+    # Call the function to check and start Docker if needed
+    check_and_start_docker
+
    docker-compose -f docker-compose-local.yaml build && docker-compose -f docker-compose-local.yaml up -d
    #python -m venv venv
    #source venv/bin/activate
@@ -59,10 +95,11 @@ use_openai() {
    echo "VITE_API_STREAMING=true" >> .env
    echo "The .env file has been created with API_KEY set to your provided key."

+    # Call the function to check and start Docker if needed
+    check_and_start_docker
+    
    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"
@@ -73,6 +110,9 @@ use_docsgpt() {
    echo "VITE_API_STREAMING=true" >> .env
    echo "The .env file has been created with API_KEY set to your provided key."

+    # Call the function to check and start Docker if needed
+    check_and_start_docker
+
    docker-compose build && docker-compose up -d

    echo "The application will run on http://localhost:5173"
--- a/tests/llm/test_anthropic.py
+++ b/tests/llm/test_anthropic.py
@@ -22,17 +22,23 @@ class TestAnthropicLLM(unittest.TestCase):
        mock_response = Mock()
        mock_response.completion = "test completion"

-        with patch.object(self.llm.anthropic.completions, "create", return_value=mock_response) as mock_create:
-            response = self.llm.gen("test_model", messages)
-            self.assertEqual(response, "test completion")
+        with patch("application.cache.get_redis_instance") as mock_make_redis:
+            mock_redis_instance = mock_make_redis.return_value
+            mock_redis_instance.get.return_value = None
+            mock_redis_instance.set = Mock()

-            prompt_expected = "### Context \n context \n ### Question \n question"
-            mock_create.assert_called_with(
-                model="test_model",
-                max_tokens_to_sample=300,
-                stream=False,
-                prompt=f"{self.llm.HUMAN_PROMPT} {prompt_expected}{self.llm.AI_PROMPT}"
-            )
+            with patch.object(self.llm.anthropic.completions, "create", return_value=mock_response) as mock_create:
+                response = self.llm.gen("test_model", messages)
+                self.assertEqual(response, "test completion")
+
+                prompt_expected = "### Context \n context \n ### Question \n question"
+                mock_create.assert_called_with(
+                    model="test_model",
+                    max_tokens_to_sample=300,
+                    stream=False,
+                    prompt=f"{self.llm.HUMAN_PROMPT} {prompt_expected}{self.llm.AI_PROMPT}"
+                )
+            mock_redis_instance.set.assert_called_once()

    def test_gen_stream(self):
        messages = [
@@ -41,17 +47,23 @@ class TestAnthropicLLM(unittest.TestCase):
        ]
        mock_responses = [Mock(completion="response_1"), Mock(completion="response_2")]

-        with patch.object(self.llm.anthropic.completions, "create", return_value=iter(mock_responses)) as mock_create:
-            responses = list(self.llm.gen_stream("test_model", messages))
-            self.assertListEqual(responses, ["response_1", "response_2"])
+        with patch("application.cache.get_redis_instance") as mock_make_redis:
+            mock_redis_instance = mock_make_redis.return_value
+            mock_redis_instance.get.return_value = None
+            mock_redis_instance.set = Mock()

-            prompt_expected = "### Context \n context \n ### Question \n question"
-            mock_create.assert_called_with(
-                model="test_model",
-                prompt=f"{self.llm.HUMAN_PROMPT} {prompt_expected}{self.llm.AI_PROMPT}",
-                max_tokens_to_sample=300,
-                stream=True
-            )
+            with patch.object(self.llm.anthropic.completions, "create", return_value=iter(mock_responses)) as mock_create:
+                responses = list(self.llm.gen_stream("test_model", messages))
+                self.assertListEqual(responses, ["response_1", "response_2"])
+
+                prompt_expected = "### Context \n context \n ### Question \n question"
+                mock_create.assert_called_with(
+                    model="test_model",
+                    prompt=f"{self.llm.HUMAN_PROMPT} {prompt_expected}{self.llm.AI_PROMPT}",
+                    max_tokens_to_sample=300,
+                    stream=True
+                )
+            mock_redis_instance.set.assert_called_once()

 if __name__ == "__main__":
    unittest.main()
--- a/tests/llm/test_sagemaker.py
+++ b/tests/llm/test_sagemaker.py
@@ -52,28 +52,38 @@ class TestSagemakerAPILLM(unittest.TestCase):
        self.response['Body'].read.return_value.decode.return_value = json.dumps(self.result)
        
    def test_gen(self):
-        with patch.object(self.sagemaker.runtime, 'invoke_endpoint', 
-                          return_value=self.response) as mock_invoke_endpoint:
-            output = self.sagemaker.gen(None, self.messages)
-            mock_invoke_endpoint.assert_called_once_with(
-                EndpointName=self.sagemaker.endpoint,
-                ContentType='application/json',
-                Body=self.body_bytes
-            )
-            self.assertEqual(output, 
-                             self.result[0]['generated_text'][len(self.prompt):])
+        with patch('application.cache.get_redis_instance') as mock_make_redis:
+            mock_redis_instance = mock_make_redis.return_value
+            mock_redis_instance.get.return_value = None
+
+            with patch.object(self.sagemaker.runtime, 'invoke_endpoint', 
+                            return_value=self.response) as mock_invoke_endpoint:
+                output = self.sagemaker.gen(None, self.messages)
+                mock_invoke_endpoint.assert_called_once_with(
+                    EndpointName=self.sagemaker.endpoint,
+                    ContentType='application/json',
+                    Body=self.body_bytes
+                )
+                self.assertEqual(output, 
+                                self.result[0]['generated_text'][len(self.prompt):])
+            mock_make_redis.assert_called_once()
+            mock_redis_instance.set.assert_called_once()
    
    def test_gen_stream(self):
-        with patch.object(self.sagemaker.runtime, 'invoke_endpoint_with_response_stream', 
-                          return_value=self.response) as mock_invoke_endpoint:
-            output = list(self.sagemaker.gen_stream(None, self.messages))
-            mock_invoke_endpoint.assert_called_once_with(
-                EndpointName=self.sagemaker.endpoint,
-                ContentType='application/json',
-                Body=self.body_bytes_stream
-            )
-            self.assertEqual(output, [])
-            
+        with patch('application.cache.get_redis_instance') as mock_make_redis:
+            mock_redis_instance = mock_make_redis.return_value
+            mock_redis_instance.get.return_value = None
+
+            with patch.object(self.sagemaker.runtime, 'invoke_endpoint_with_response_stream', 
+                            return_value=self.response) as mock_invoke_endpoint:
+                output = list(self.sagemaker.gen_stream(None, self.messages))
+                mock_invoke_endpoint.assert_called_once_with(
+                    EndpointName=self.sagemaker.endpoint,
+                    ContentType='application/json',
+                    Body=self.body_bytes_stream
+                )
+                self.assertEqual(output, [])
+            mock_redis_instance.set.assert_called_once()
 class TestLineIterator(unittest.TestCase):
    
    def setUp(self):
--- a/tests/test_cache.py
+++ b/tests/test_cache.py
@@ -0,0 +1,131 @@
+import unittest
+import json
+from unittest.mock import patch, MagicMock
+from application.cache import gen_cache_key, stream_cache, gen_cache
+from application.utils import get_hash
+
+
+# Test for gen_cache_key function
+def test_make_gen_cache_key():
+    messages = [
+        {'role': 'user', 'content': 'test_user_message'},
+        {'role': 'system', 'content': 'test_system_message'},
+    ]
+    model = "test_docgpt"
+    
+    # Manually calculate the expected hash
+    expected_combined = f"{model}_{json.dumps(messages, sort_keys=True)}"
+    expected_hash = get_hash(expected_combined)
+    cache_key = gen_cache_key(*messages, model=model)
+
+    assert cache_key == expected_hash
+
+def test_gen_cache_key_invalid_message_format():
+    # Test when messages is not a list
+    with unittest.TestCase.assertRaises(unittest.TestCase, ValueError) as context:
+        gen_cache_key("This is not a list", model="docgpt")
+    assert str(context.exception) == "All messages must be dictionaries."
+
+# Test for gen_cache decorator
+@patch('application.cache.get_redis_instance')  # Mock the Redis client
+def test_gen_cache_hit(mock_make_redis):
+    # Arrange
+    mock_redis_instance = MagicMock()
+    mock_make_redis.return_value = mock_redis_instance
+    mock_redis_instance.get.return_value = b"cached_result"  # Simulate a cache hit
+
+    @gen_cache
+    def mock_function(self, model, messages):
+        return "new_result"
+
+    messages = [{'role': 'user', 'content': 'test_user_message'}]
+    model = "test_docgpt"
+
+    # Act
+    result = mock_function(None, model, messages)
+
+    # Assert
+    assert result == "cached_result"  # Should return cached result
+    mock_redis_instance.get.assert_called_once()  # Ensure Redis get was called
+    mock_redis_instance.set.assert_not_called()  # Ensure the function result is not cached again
+
+
+@patch('application.cache.get_redis_instance')  # Mock the Redis client
+def test_gen_cache_miss(mock_make_redis):
+    # Arrange
+    mock_redis_instance = MagicMock()
+    mock_make_redis.return_value = mock_redis_instance
+    mock_redis_instance.get.return_value = None  # Simulate a cache miss
+
+    @gen_cache
+    def mock_function(self, model, messages):
+        return "new_result"
+
+    messages = [
+        {'role': 'user', 'content': 'test_user_message'},
+        {'role': 'system', 'content': 'test_system_message'},
+    ]
+    model = "test_docgpt"
+    # Act
+    result = mock_function(None, model, messages)
+
+    # Assert
+    assert result == "new_result"
+    mock_redis_instance.get.assert_called_once() 
+
+@patch('application.cache.get_redis_instance')  
+def test_stream_cache_hit(mock_make_redis):
+    # Arrange
+    mock_redis_instance = MagicMock()
+    mock_make_redis.return_value = mock_redis_instance
+
+    cached_chunk = json.dumps(["chunk1", "chunk2"]).encode('utf-8')
+    mock_redis_instance.get.return_value = cached_chunk
+
+    @stream_cache
+    def mock_function(self, model, messages, stream):
+        yield "new_chunk"
+
+    messages = [{'role': 'user', 'content': 'test_user_message'}]
+    model = "test_docgpt"
+
+    # Act
+    result = list(mock_function(None, model, messages, stream=True))
+
+    # Assert
+    assert result == ["chunk1", "chunk2"]  # Should return cached chunks
+    mock_redis_instance.get.assert_called_once()
+    mock_redis_instance.set.assert_not_called()
+
+
+@patch('application.cache.get_redis_instance')
+def test_stream_cache_miss(mock_make_redis):
+    # Arrange
+    mock_redis_instance = MagicMock()
+    mock_make_redis.return_value = mock_redis_instance
+    mock_redis_instance.get.return_value = None  # Simulate a cache miss
+
+    @stream_cache
+    def mock_function(self, model, messages, stream):
+        yield "new_chunk"
+
+    messages = [
+        {'role': 'user', 'content': 'This is the context'},
+        {'role': 'system', 'content': 'Some other message'},
+        {'role': 'user', 'content': 'What is the answer?'}
+    ]
+    model = "test_docgpt"
+
+    # Act
+    result = list(mock_function(None, model, messages, stream=True))
+
+    # Assert
+    assert result == ["new_chunk"]
+    mock_redis_instance.get.assert_called_once()  
+    mock_redis_instance.set.assert_called_once()  
+
+
+
+    
+
+