Merge branch 'arc53:main' into fix/1227-share_button

2025-11-29 16:43:16 +00:00 · 2024-10-13 14:00:16 +05:30
parent 085e1b6c41 f3ff3920d9
commit 706bd6126a
50 changed files with 1003 additions and 306 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,10 +4,10 @@ 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 sumbit new retrieval / workflow method that will analyze a Document using EU laws.
+A separate competition is available for those who submit new retrieval / workflow method that will analyze a Document using EU laws.
 With 200$, 100$, 50$ prize for 1st, 2nd and 3rd place respectively.
 You can find more information [here](https://github.com/arc53/DocsGPT/blob/main/lexeu-competition.md)

@@ -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
@@ -25,8 +25,6 @@ Say goodbye to time-consuming manual searches, and let <strong><a href="https://

 ### 🎃 [Hacktoberfest Prizes, Rules & Q&A](https://github.com/arc53/DocsGPT/blob/main/HACKTOBERFEST.md) 🎃

-### Our [Livestream to Dive into Hacktoberfest! Prizes, Rules & Q&A 🎉](https://www.youtube.com/watch?v=5QQaFFu9BC8) on 3rd of October 
-
 ### Production Support / Help for Companies:

 We're eager to provide personalized assistance when deploying your DocsGPT to a live environment.
--- a/application/api/answer/routes.py
+++ b/application/api/answer/routes.py
@@ -40,6 +40,8 @@ if settings.LLM_NAME == "openai":
    gpt_model = "gpt-3.5-turbo"
 elif settings.LLM_NAME == "anthropic":
    gpt_model = "claude-2"
+elif settings.LLM_NAME == "groq":
+    gpt_model = "llama3-8b-8192"

 if settings.MODEL_NAME:  # in case there is particular model name configured
    gpt_model = settings.MODEL_NAME
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -363,6 +363,7 @@ class UploadRemote(Resource):
                ),
                "name": fields.String(required=True, description="Job name"),
                "data": fields.String(required=True, description="Data to process"),
+                "repo_url": fields.String(description="GitHub repository URL"),
            },
        )
    )
@@ -377,11 +378,18 @@ class UploadRemote(Resource):
            return missing_fields

        try:
+            if "repo_url" in data:
+                source_data = data["repo_url"]
+                loader = "github"
+            else:
+                source_data = data["data"]
+                loader = data["source"]
+
            task = ingest_remote.delay(
-                source_data=data["data"],
+                source_data=source_data,
                job_name=data["name"],
                user=data["user"],
-                loader=data["source"],
+                loader=loader,
            )
        except Exception as err:
            return make_response(jsonify({"success": False, "error": str(err)}), 400)
--- a/application/llm/groq.py
+++ b/application/llm/groq.py
@@ -0,0 +1,45 @@
+from application.llm.base import BaseLLM
+
+
+
+class GroqLLM(BaseLLM):
+
+    def __init__(self, api_key=None, user_api_key=None, *args, **kwargs):
+        from openai import OpenAI
+
+        super().__init__(*args, **kwargs)
+        self.client = OpenAI(api_key=api_key, base_url="https://api.groq.com/openai/v1")
+        self.api_key = api_key
+        self.user_api_key = user_api_key
+
+    def _raw_gen(
+        self,
+        baseself,
+        model,
+        messages,
+        stream=False,
+        **kwargs
+    ):  
+        response = self.client.chat.completions.create(
+            model=model, messages=messages, stream=stream, **kwargs
+        )
+
+        return response.choices[0].message.content
+
+    def _raw_gen_stream(
+        self,
+        baseself,
+        model,
+        messages,
+        stream=True,
+        **kwargs
+    ):  
+        response = self.client.chat.completions.create(
+            model=model, messages=messages, stream=stream, **kwargs
+        )
+
+        for line in response:
+            # 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
--- a/application/llm/llm_creator.py
+++ b/application/llm/llm_creator.py
@@ -1,3 +1,4 @@
+from application.llm.groq import GroqLLM
 from application.llm.openai import OpenAILLM, AzureOpenAILLM
 from application.llm.sagemaker import SagemakerAPILLM
 from application.llm.huggingface import HuggingFaceLLM
@@ -17,6 +18,7 @@ class LLMCreator:
        "anthropic": AnthropicLLM,
        "docsgpt": DocsGPTAPILLM,
        "premai": PremAILLM,
+        "groq": GroqLLM
    }

    @classmethod
--- a/application/parser/file/bulk.py
+++ b/application/parser/file/bulk.py
@@ -10,13 +10,14 @@ from application.parser.file.epub_parser import EpubParser
 from application.parser.file.html_parser import HTMLParser
 from application.parser.file.markdown_parser import MarkdownParser
 from application.parser.file.rst_parser import RstParser
-from application.parser.file.tabular_parser import PandasCSVParser
+from application.parser.file.tabular_parser import PandasCSVParser,ExcelParser
 from application.parser.schema.base import Document

 DEFAULT_FILE_EXTRACTOR: Dict[str, BaseParser] = {
    ".pdf": PDFParser(),
    ".docx": DocxParser(),
    ".csv": PandasCSVParser(),
+    ".xlsx":ExcelParser(),
    ".epub": EpubParser(),
    ".md": MarkdownParser(),
    ".rst": RstParser(),
--- a/application/parser/file/tabular_parser.py
+++ b/application/parser/file/tabular_parser.py
@@ -113,3 +113,68 @@ class PandasCSVParser(BaseParser):
            return (self._row_joiner).join(text_list)
        else:
            return text_list
+
+
+class ExcelParser(BaseParser):
+    r"""Excel (.xlsx) parser.
+
+    Parses Excel files using Pandas `read_excel` function.
+    If special parameters are required, use the `pandas_config` dict.
+
+    Args:
+        concat_rows (bool): whether to concatenate all rows into one document.
+            If set to False, a Document will be created for each row.
+            True by default.
+
+        col_joiner (str): Separator to use for joining cols per row.
+            Set to ", " by default.
+
+        row_joiner (str): Separator to use for joining each row.
+            Only used when `concat_rows=True`.
+            Set to "\n" by default.
+
+        pandas_config (dict): Options for the `pandas.read_excel` function call.
+            Refer to https://pandas.pydata.org/docs/reference/api/pandas.read_excel.html
+            for more information.
+            Set to empty dict by default, this means pandas will try to figure
+            out the table structure on its own.
+
+    """
+
+    def __init__(
+            self,
+            *args: Any,
+            concat_rows: bool = True,
+            col_joiner: str = ", ",
+            row_joiner: str = "\n",
+            pandas_config: dict = {},
+            **kwargs: Any
+    ) -> None:
+        """Init params."""
+        super().__init__(*args, **kwargs)
+        self._concat_rows = concat_rows
+        self._col_joiner = col_joiner
+        self._row_joiner = row_joiner
+        self._pandas_config = pandas_config
+
+    def _init_parser(self) -> Dict:
+        """Init parser."""
+        return {}
+
+    def parse_file(self, file: Path, errors: str = "ignore") -> Union[str, List[str]]:
+        """Parse file."""
+        try:
+            import pandas as pd
+        except ImportError:
+            raise ValueError("pandas module is required to read Excel files.")
+
+        df = pd.read_excel(file, **self._pandas_config)
+
+        text_list = df.apply(
+            lambda row: (self._col_joiner).join(row.astype(str).tolist()), axis=1
+        ).tolist()
+
+        if self._concat_rows:
+            return (self._row_joiner).join(text_list)
+        else:
+            return text_list
--- a/application/parser/remote/github_loader.py
+++ b/application/parser/remote/github_loader.py
@@ -0,0 +1,53 @@
+import base64
+import requests
+from typing import List
+from application.parser.remote.base import BaseRemote
+from langchain_core.documents import Document
+
+class GitHubLoader(BaseRemote):
+    def __init__(self):
+        self.access_token = None
+        self.headers = {
+            "Authorization": f"token {self.access_token}"
+        } if self.access_token else {}
+        return
+
+    def fetch_file_content(self, repo_url: str, file_path: str) -> str:
+        url = f"https://api.github.com/repos/{repo_url}/contents/{file_path}"
+        response = requests.get(url, headers=self.headers)
+
+        if response.status_code == 200:
+            content = response.json()
+            if content.get("encoding") == "base64":
+                try:
+                    decoded_content = base64.b64decode(content["content"]).decode("utf-8")
+                    return f"Filename: {file_path}\n\n{decoded_content}"
+                except Exception as e:
+                    print(f"Error decoding content for {file_path}: {e}")
+                    raise
+            else:
+                return f"Filename: {file_path}\n\n{content['content']}"
+        else:
+            response.raise_for_status()
+
+    def fetch_repo_files(self, repo_url: str, path: str = "") -> List[str]:
+        url = f"https://api.github.com/repos/{repo_url}/contents/{path}"
+        response = requests.get(url, headers={**self.headers, "Accept": "application/vnd.github.v3.raw"})
+        contents = response.json()
+        files = []
+        for item in contents:
+            if item["type"] == "file":
+                files.append(item["path"])
+            elif item["type"] == "dir":
+                files.extend(self.fetch_repo_files(repo_url, item["path"]))
+        return files
+
+    def load_data(self, repo_url: str) -> List[Document]:
+        repo_name = repo_url.split("github.com/")[-1]
+        files = self.fetch_repo_files(repo_name)
+        documents = []
+        for file_path in files:
+            content = self.fetch_file_content(repo_name, file_path)
+            documents.append(Document(page_content=content, metadata={"title": file_path, 
+            "source": f"https://github.com/{repo_name}/blob/main/{file_path}"}))
+        return documents
--- a/application/parser/remote/remote_creator.py
+++ b/application/parser/remote/remote_creator.py
@@ -2,6 +2,7 @@ from application.parser.remote.sitemap_loader import SitemapLoader
 from application.parser.remote.crawler_loader import CrawlerLoader
 from application.parser.remote.web_loader import WebLoader
 from application.parser.remote.reddit_loader import RedditPostsLoaderRemote
+from application.parser.remote.github_loader import GitHubLoader


 class RemoteCreator:
@@ -10,6 +11,7 @@ class RemoteCreator:
        "sitemap": SitemapLoader,
        "crawler": CrawlerLoader,
        "reddit": RedditPostsLoaderRemote,
+        "github": GitHubLoader,
    }

    @classmethod
--- a/application/requirements.txt
+++ b/application/requirements.txt
@@ -49,6 +49,7 @@ openapi3-parser==1.1.18
 orjson==3.10.7
 packaging==24.1
 pandas==2.2.3
+openpyxl==3.1.5
 pathable==0.4.3
 pillow==10.4.0
 portalocker==2.10.1
--- a/application/vectorstore/faiss.py
+++ b/application/vectorstore/faiss.py
@@ -22,7 +22,7 @@ class FaissStore(BaseVectorStore):
            else:
                self.docsearch = FAISS.load_local(self.path, embeddings, allow_dangerous_deserialization=True)
        except Exception:
-            raise  # Just re-raise the exception without assigning to e
+            raise

        self.assert_embedding_dimensions(embeddings)

--- a/application/worker.py
+++ b/application/worker.py
@@ -131,10 +131,10 @@ def ingest_worker(

    logging.info(f"Ingest file: {full_path}", extra={"user": user, "job": name_job})
    file_data = {"name": name_job, "file": filename, "user": user}
-    download_file(urljoin(settings.API_URL, "/api/download"), file_data, os.path.join(full_path, filename))

    if not os.path.exists(full_path):
        os.makedirs(full_path)
+    download_file(urljoin(settings.API_URL, "/api/download"), file_data, os.path.join(full_path, filename))

    # check if file is .zip and extract it
    if filename.endswith(".zip"):
--- 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
@@ -9,7 +9,6 @@
      "version": "0.0.0",
      "dependencies": {
        "@reduxjs/toolkit": "^2.2.7",
-        "@vercel/analytics": "^1.3.1",
        "chart.js": "^4.4.4",
        "i18next": "^23.15.1",
        "i18next-browser-languagedetector": "^8.0.0",
@@ -2089,26 +2088,6 @@
      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
    },
-    "node_modules/@vercel/analytics": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-1.3.1.tgz",
-      "integrity": "sha512-xhSlYgAuJ6Q4WQGkzYTLmXwhYl39sWjoMA3nHxfkvG+WdBT25c563a7QhwwKivEOZtPJXifYHR1m2ihoisbWyA==",
-      "dependencies": {
-        "server-only": "^0.0.1"
-      },
-      "peerDependencies": {
-        "next": ">= 13",
-        "react": "^18 || ^19"
-      },
-      "peerDependenciesMeta": {
-        "next": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/@vitejs/plugin-react": {
      "version": "4.3.1",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.1.tgz",
@@ -8451,11 +8430,6 @@
        "semver": "bin/semver.js"
      }
    },
-    "node_modules/server-only": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz",
-      "integrity": "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA=="
-    },
    "node_modules/set-function-length": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,7 +20,6 @@
  },
  "dependencies": {
    "@reduxjs/toolkit": "^2.2.7",
-    "@vercel/analytics": "^1.3.1",
    "chart.js": "^4.4.4",
    "i18next": "^23.15.1",
    "i18next-browser-languagedetector": "^8.0.0",
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,7 +3,6 @@ import Navigation from './Navigation';
 import Conversation from './conversation/Conversation';
 import About from './About';
 import PageNotFound from './PageNotFound';
-import { inject } from '@vercel/analytics';
 import { useMediaQuery } from './hooks';
 import { useState } from 'react';
 import Setting from './settings';
@@ -11,7 +10,6 @@ import './locale/i18n';
 import { Outlet } from 'react-router-dom';
 import { SharedConversation } from './conversation/SharedConversation';
 import { useDarkTheme } from './hooks';
-inject();

 function MainLayout() {
  const { isMobile } = useMediaQuery();
@@ -34,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/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -37,7 +37,7 @@ export default function Hero({
              <Fragment key={key}>
                <button
                  onClick={() => handleQuestion({ question: demo.query })}
-                  className="w-full rounded-full border-2 border-silver px-6 py-4 text-left hover:border-gray-4000 dark:hover:border-gray-3000 xl:min-w-[24vw]"
+                  className="w-full rounded-full border border-silver px-6 py-4 text-left hover:border-gray-4000 dark:hover:border-gray-3000 xl:min-w-[24vw]"
                >
                  <p className="mb-1 font-semibold text-black dark:text-silver">
                    {demo.header}
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -119,6 +119,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
      .delete(id, {})
      .then(() => {
        fetchConversations();
+        resetConversation();
      })
      .catch((error) => console.error(error));
  };
@@ -155,6 +156,15 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
      });
  };

+  const resetConversation = () => {
+    dispatch(setConversation([]));
+    dispatch(
+      updateConversationId({
+        query: { conversationId: null },
+      }),
+    );
+  };
+
  async function updateConversationName(updatedConversation: {
    name: string;
    id: string;
@@ -214,9 +224,18 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
        <div
          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="" />
-            <p className="my-auto text-2xl font-semibold">DocsGPT</p>
+          <div
+            className="my-auto mx-4 flex cursor-pointer gap-1.5"
+            onClick={() => {
+              if (isMobile) {
+                setNavOpen(!navOpen);
+              }
+            }}
+          >
+            <a href="/" className="flex gap-1.5">
+              <img className="mb-2 h-10" src={DocsGPT3} alt="" />
+              <p className="my-auto text-2xl font-semibold">DocsGPT</p>
+            </a>
          </div>
          <button
            className="float-right mr-5"
@@ -236,12 +255,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
        <NavLink
          to={'/'}
          onClick={() => {
-            dispatch(setConversation([]));
-            dispatch(
-              updateConversationId({
-                query: { conversationId: null },
-              }),
-            );
+            if (isMobile) {
+              setNavOpen(!navOpen);
+            }
+            resetConversation();
          }}
          className={({ isActive }) =>
            `${
@@ -270,6 +287,11 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                    key={conversation.id}
                    conversation={conversation}
                    selectConversation={(id) => handleConversationClick(id)}
+                    onCoversationClick={() => {
+                      if (isMobile) {
+                        setNavOpen(false);
+                      }
+                    }}
                    onDeleteConversation={(id) => handleDeleteConversation(id)}
                    onSave={(conversation) =>
                      updateConversationName(conversation)
@@ -293,17 +315,33 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                isDocsListOpen={isDocsListOpen}
                setIsDocsListOpen={setIsDocsListOpen}
                handleDeleteClick={handleDeleteClick}
+                handlePostDocumentSelect={(option?: string) => {
+                  if (isMobile) {
+                    setNavOpen(!navOpen);
+                  }
+                }}
              />
              <img
                className="mt-2 h-9 w-9 hover:cursor-pointer"
                src={UploadIcon}
-                onClick={() => setUploadModalState('ACTIVE')}
+                onClick={() => {
+                  setUploadModalState('ACTIVE');
+                  if (isMobile) {
+                    setNavOpen(!navOpen);
+                  }
+                }}
              ></img>
            </div>
            <p className="ml-5 mt-3 text-sm font-semibold">{t('sourceDocs')}</p>
          </div>
          <div className="flex flex-col gap-2 border-b-[1px] py-2 dark:border-b-purple-taupe">
            <NavLink
+              onClick={() => {
+                if (isMobile) {
+                  setNavOpen(!navOpen);
+                }
+                resetConversation();
+              }}
              to="/settings"
              className={({ isActive }) =>
                `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
@@ -323,6 +361,12 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
          </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] ${
@@ -437,6 +481,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
      <Upload
        modalState={uploadModalState}
        setModalState={setUploadModalState}
+        isOnboarding={false}
      ></Upload>
    </>
  );
--- 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/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
@@ -0,0 +1,96 @@
+import React, { useCallback, useRef, useState } from 'react';
+import ArrowLeft from '../assets/arrow-left.svg';
+import ArrowRight from '../assets/arrow-right.svg';
+import { useTranslation } from 'react-i18next';
+
+type HiddenGradientType = 'left' | 'right' | undefined;
+
+const useTabs = () => {
+  const { t } = useTranslation();
+  const tabs = [
+    t('settings.general.label'),
+    t('settings.documents.label'),
+    t('settings.apiKeys.label'),
+    t('settings.analytics.label'),
+    t('settings.logs.label'),
+  ];
+  return tabs;
+};
+
+interface SettingsBarProps {
+  setActiveTab: React.Dispatch<React.SetStateAction<string>>;
+  activeTab: string;
+}
+
+const SettingsBar = ({ setActiveTab, activeTab }: SettingsBarProps) => {
+  const [hiddenGradient, setHiddenGradient] =
+    useState<HiddenGradientType>('left');
+  const containerRef = useRef<null | HTMLDivElement>(null);
+  const tabs = useTabs();
+  const scrollTabs = useCallback(
+    (direction: number) => {
+      if (containerRef.current) {
+        const container = containerRef.current;
+        container.scrollLeft += direction * 100; // Adjust the scroll amount as needed
+        if (container.scrollLeft === 0) {
+          setHiddenGradient('left');
+        } else if (
+          container.scrollLeft + container.offsetWidth ===
+          container.scrollWidth
+        ) {
+          setHiddenGradient('right');
+        } else {
+          setHiddenGradient(undefined);
+        }
+      }
+    },
+    [containerRef.current],
+  );
+  return (
+    <div className="relative mt-6 flex flex-row items-center space-x-1 md:space-x-0 overflow-auto">
+      <div
+        className={`${hiddenGradient === 'left' ? 'hidden' : ''} md:hidden absolute inset-y-0 left-6 w-14 bg-gradient-to-r from-white dark:from-raisin-black pointer-events-none`}
+      ></div>
+      <div
+        className={`${hiddenGradient === 'right' ? 'hidden' : ''} md:hidden absolute inset-y-0 right-6 w-14 bg-gradient-to-l from-white dark:from-raisin-black pointer-events-none`}
+      ></div>
+
+      <div className="md:hidden z-10">
+        <button
+          onClick={() => scrollTabs(-1)}
+          className="flex h-6 w-6 items-center rounded-full justify-center transition-all hover:bg-gray-100"
+        >
+          <img src={ArrowLeft} alt="left-arrow" className="h-3" />
+        </button>
+      </div>
+      <div
+        ref={containerRef}
+        className="flex flex-nowrap overflow-x-auto no-scrollbar md:space-x-4 scroll-smooth snap-x"
+      >
+        {tabs.map((tab, index) => (
+          <button
+            key={index}
+            onClick={() => setActiveTab(tab)}
+            className={`snap-start h-9 rounded-3xl px-4 font-bold hover:text-neutral-600 dark:hover:text-white/60 ${
+              activeTab === tab
+                ? 'bg-neutral-100 text-neutral-600  dark:bg-dark-charcoal dark:text-white/60'
+                : 'text-gray-6000'
+            }`}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
+      <div className="md:hidden z-10">
+        <button
+          onClick={() => scrollTabs(1)}
+          className="flex h-6 w-6 rounded-full items-center justify-center hover:bg-gray-100"
+        >
+          <img src={ArrowRight} alt="right-arrow" className="h-3" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SettingsBar;
--- a/frontend/src/components/SourceDropdown.tsx
+++ b/frontend/src/components/SourceDropdown.tsx
@@ -11,6 +11,7 @@ type Props = {
  isDocsListOpen: boolean;
  setIsDocsListOpen: React.Dispatch<React.SetStateAction<boolean>>;
  handleDeleteClick: any;
+  handlePostDocumentSelect: any;
 };

 function SourceDropdown({
@@ -20,6 +21,7 @@ function SourceDropdown({
  setIsDocsListOpen,
  isDocsListOpen,
  handleDeleteClick,
+  handlePostDocumentSelect, // Callback function fired after a document is selected
 }: Props) {
  const dispatch = useDispatch();
  const { t } = useTranslation();
@@ -85,6 +87,7 @@ function SourceDropdown({
                    onClick={() => {
                      dispatch(setSelectedDocs(option));
                      setIsDocsListOpen(false);
+                      handlePostDocumentSelect(option);
                    }}
                  >
                    <span
@@ -118,7 +121,9 @@ function SourceDropdown({
            className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:text-bright-gray dark:hover:bg-purple-taupe"
            onClick={handleEmptyDocumentSelect}
          >
-            <span className="ml-4 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
+            <span className="ml-4 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3" onClick = {() => {
+              handlePostDocumentSelect(null);
+            }}>
              {t('none')}
            </span>
          </div>
--- 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);
@@ -54,10 +55,6 @@ export default function Conversation() {
    }
  }, []);

-  useEffect(() => {
-    fetchStream.current && fetchStream.current.abort();
-  }, [conversationId]);
-
  useEffect(() => {
    if (queries.length) {
      queries[queries.length - 1].error && setLastQueryReturnedErr(true);
@@ -143,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({
@@ -153,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';
@@ -59,7 +58,12 @@ const ConversationBubble = forwardRef<
        className={`flex flex-row-reverse self-end flex-wrap ${className}`}
      >
        <Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
-        <div className="ml-10 mr-2 flex items-center rounded-[28px] bg-purple-30 py-[14px] px-[19px] text-white max-w-full whitespace-pre-wrap leading-normal break-normal">
+        <div
+          style={{
+            wordBreak: 'break-word',
+          }}
+          className="ml-10 mr-2 flex items-center rounded-[28px] bg-purple-30 py-[14px] px-[19px] text-white max-w-full whitespace-pre-wrap leading-normal"
+        >
          {message}
        </div>
      </div>
@@ -233,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]}
@@ -334,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
@@ -2,8 +2,6 @@ import { SyntheticEvent, useEffect, useRef, useState } 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';
@@ -22,6 +20,7 @@ interface ConversationProps {
 interface ConversationTileProps {
  conversation: ConversationProps;
  selectConversation: (arg1: string) => void;
+  onCoversationClick: () => void; //Callback to handle click on conversation tile regardless of selected or not
  onDeleteConversation: (arg1: string) => void;
  onSave: ({ name, id }: ConversationProps) => void;
 }
@@ -29,6 +28,7 @@ interface ConversationTileProps {
 export default function ConversationTile({
  conversation,
  selectConversation,
+  onCoversationClick,
  onDeleteConversation,
  onSave,
 }: ConversationTileProps) {
@@ -90,20 +90,17 @@ export default function ConversationTile({
          setIsHovered(false);
        }}
        onClick={() => {
+          onCoversationClick();
          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
@@ -158,7 +155,12 @@ export default function ConversationTile({
              </button>
            )}
            {isOpen && (
-              <div className="flex-start absolute z-30 flex w-32 translate-x-1 translate-y-5 flex-col rounded-xl bg-stone-100 text-sm text-black shadow-xl dark:bg-chinese-black dark:text-chinese-silver md:w-36">
+              <div
+                className="flex-start absolute z-30 flex w-32 translate-x-1 translate-y-5 flex-col rounded-xl bg-stone-100 text-sm text-black shadow-xl dark:bg-chinese-black dark:text-chinese-silver md:w-36"
+                style={{
+                  top: `${(tileRef.current?.getBoundingClientRect().top ?? 0) + window.scrollY + 8}px`,
+                }}
+              >
                <button
                  onClick={(event: SyntheticEvent) => {
                    event.stopPropagation();
--- a/frontend/src/conversation/conversationSlice.ts
+++ b/frontend/src/conversation/conversationSlice.ts
@@ -151,6 +151,7 @@ export const conversationSlice = createSlice({
      state,
      action: PayloadAction<{ index: number; query: Partial<Query> }>,
    ) {
+      if (state.status === 'idle') return;
      const { index, query } = action.payload;
      if (query.response != undefined) {
        state.queries[index].response =
@@ -167,6 +168,7 @@ export const conversationSlice = createSlice({
      action: PayloadAction<{ query: Partial<Query> }>,
    ) {
      state.conversationId = action.payload.query.conversationId ?? null;
+      state.status = 'idle';
    },
    updateStreamingSource(
      state,
--- 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/index.css
+++ b/frontend/src/index.css
@@ -47,6 +47,28 @@ body.dark {
  }
 }

+@layer components {
+  .table-default {
+    @apply block w-max table-auto content-center justify-center rounded-xl border border-silver dark:border-silver/40 text-center dark:text-bright-gray;
+  }
+
+  .table-default th {
+    @apply border-r border-silver dark:border-silver/40 p-4 w-[244px];
+  }
+
+  .table-default th:last-child {
+    @apply w-[auto] border-r-0;
+  }
+
+  .table-default td {
+    @apply border-r border-t border-silver dark:border-silver/40 px-4 py-2;
+  }
+
+  .table-default td:last-child {
+    @apply border-r-0;
+  }
+}
+
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

 /* Document
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -7,7 +7,7 @@
  "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",
  "demo": [
@@ -75,16 +75,21 @@
  "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, .docx, .md, .zip limited to 25mb",
+      "info": "Please upload .pdf, .txt, .rst, .csv, .xlsx, .docx, .md, .zip limited to 25mb",
      "uploadedFiles": "Uploaded Files",
      "cancel": "Cancel",
      "train": "Train",
      "link": "Link",
      "urlLink": "URL Link",
+      "repoUrl": "Repository URL",
      "reddit": {
        "id": "Client ID",
        "secret": "Client Secret",
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -7,7 +7,7 @@
  "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",
  "demo": [
@@ -75,8 +75,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",
@@ -85,6 +89,7 @@
      "train": "Entrenar",
      "link": "Enlace",
      "urlLink": "Enlace URL",
+      "repoUrl": "URL del Repositorio",
      "reddit": {
        "id": "ID de Cliente",
        "secret": "Secreto de Cliente",
--- 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,7 +7,7 @@
  "about": "について",
  "inputPlaceholder": "ここにメッセージを入力してください...",
  "tagline": "DocsGPTはGenAIを使用しています。重要な情報はソースで確認してください。",
-  "sourceDocs": "ソースドキュメント",
+  "sourceDocs": "ソース",
  "none": "なし",
  "cancel": "キャンセル",
  "demo": [
@@ -75,8 +75,12 @@
  "modals": {
    "uploadDoc": {
      "label": "新規書類のアップロード",
-      "file": "ファイルから",
-      "remote": "リモート",
+      "select": "ドキュメントを DocsGPT にアップロードする方法を選択します",
+      "file": "デバイスからアップロード",
+      "back": "戻る",
+      "wait": "お待ちください ...",
+      "remote": "ウェブサイトから収集する",
+      "start": "チャットを開始する",
      "name": "名前",
      "choose": "ファイルを選択",
      "info": ".pdf, .txt, .rst, .docx, .md, .zipファイルを25MBまでアップロードしてください",
@@ -85,6 +89,7 @@
      "train": "トレーニング",
      "link": "リンク",
      "urlLink": "URLリンク",
+      "repoUrl": "リポジトリURL",
      "reddit": {
        "id": "クライアントID",
        "secret": "クライアントシークレット",
--- a/frontend/src/locale/zh-TW.json
+++ b/frontend/src/locale/zh-TW.json
@@ -0,0 +1,130 @@
+{
+  "language": "繁體中文（臺灣）",
+  "chat": "對話",
+  "chats": "對話",
+  "newChat": "新對話",
+  "myPlan": "我的方案",
+  "about": "關於",
+  "inputPlaceholder": "在此輸入您的訊息...",
+  "tagline": "DocsGPT 使用生成式 AI，請使用原始資料來源審閱重要資訊。",
+  "sourceDocs": "原始文件",
+  "none": "無",
+  "cancel": "取消",
+  "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,7 +7,7 @@
  "about": "关于",
  "inputPlaceholder": "在这里输入您的消息...",
  "tagline": "DocsGPT 使用 GenAI, 请使用来源审核关键信息.",
-  "sourceDocs": "来源文档",
+  "sourceDocs": "源",
  "none": "无",
  "cancel": "取消",
  "demo": [
@@ -75,8 +75,12 @@
  "modals": {
    "uploadDoc": {
      "label": "上传新文档资料",
-      "file": "从文件",
-      "remote": "远程",
+      "select": "选择如何将文档上传到 DocsGPT",
+      "file": "从设备上传",
+      "back": "后退",
+      "wait": "请稍等 ...",
+      "remote": "从网站收集",
+      "start": "开始聊天",
      "name": "名称",
      "choose": "选择文件",
      "info": "请上传 .pdf, .txt, .rst, .docx, .md, .zip 文件，限 25MB",
@@ -85,6 +89,7 @@
      "train": "训练",
      "link": "链接",
      "urlLink": "URL 链接",
+      "repoUrl": "存储库 URL",
      "reddit": {
        "id": "客户端 ID",
        "secret": "客户端密钥",
--- a/frontend/src/settings/APIKeys.tsx
+++ b/frontend/src/settings/APIKeys.tsx
@@ -100,35 +100,29 @@ export default function APIKeys() {
        )}
        <div className="mt-[27px] w-full">
          <div className="w-full overflow-x-auto">
-            <table className="block w-max table-auto content-center justify-center rounded-xl border text-center dark:border-chinese-silver dark:text-bright-gray">
+            <table className="table-default">
              <thead>
                <tr>
-                  <th className="w-[244px] border-r p-4">
-                    {t('settings.apiKeys.name')}
-                  </th>
-                  <th className="w-[244px] border-r px-4 py-2">
-                    {t('settings.apiKeys.sourceDoc')}
-                  </th>
-                  <th className="w-[244px] border-r px-4 py-2">
-                    {t('settings.apiKeys.key')}
-                  </th>
-                  <th className="px-4 py-2"></th>
+                  <th>{t('settings.apiKeys.name')}</th>
+                  <th>{t('settings.apiKeys.sourceDoc')}</th>
+                  <th>{t('settings.apiKeys.key')}</th>
+                  <th></th>
                </tr>
              </thead>
              <tbody>
                {!apiKeys?.length && (
                  <tr>
-                    <td colSpan={4} className="border-t p-4">
+                    <td colSpan={4} className="!p-4">
                      {t('settings.apiKeys.noData')}
                    </td>
                  </tr>
                )}
                {apiKeys?.map((element, index) => (
                  <tr key={index}>
-                    <td className="border-r border-t p-4">{element.name}</td>
-                    <td className="border-r border-t p-4">{element.source}</td>
-                    <td className="border-r border-t p-4">{element.key}</td>
-                    <td className="border-t p-4">
+                    <td>{element.name}</td>
+                    <td>{element.source}</td>
+                    <td>{element.key}</td>
+                    <td>
                      <img
                        src={Trash}
                        alt="Delete"
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -55,28 +55,20 @@ const Documents: React.FC<DocumentsProps> = ({
    <div className="mt-8">
      <div className="flex flex-col relative">
        <div className="z-10 w-full overflow-x-auto">
-          <table className="block w-max table-auto content-center justify-center rounded-xl border text-center dark:border-chinese-silver dark:text-bright-gray">
+          <table className="table-default">
            <thead>
              <tr>
-                <th className="border-r p-4 md:w-[244px]">
-                  {t('settings.documents.name')}
-                </th>
-                <th className="w-[244px] border-r px-4 py-2">
-                  {t('settings.documents.date')}
-                </th>
-                <th className="w-[244px] border-r px-4 py-2">
-                  {t('settings.documents.tokenUsage')}
-                </th>
-                <th className="w-[244px] border-r px-4 py-2">
-                  {t('settings.documents.type')}
-                </th>
-                <th className="px-4 py-2"></th>
+                <th>{t('settings.documents.name')}</th>
+                <th>{t('settings.documents.date')}</th>
+                <th>{t('settings.documents.tokenUsage')}</th>
+                <th>{t('settings.documents.type')}</th>
+                <th></th>
              </tr>
            </thead>
            <tbody>
              {!documents?.length && (
                <tr>
-                  <td colSpan={5} className="border-t p-4">
+                  <td colSpan={5} className="!p-4">
                    {t('settings.documents.noData')}
                  </td>
                </tr>
@@ -84,19 +76,15 @@ const Documents: React.FC<DocumentsProps> = ({
              {documents &&
                documents.map((document, index) => (
                  <tr key={index}>
-                    <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">
+                    <td>{document.name}</td>
+                    <td>{document.date}</td>
+                    <td>
                      {document.tokens ? formatTokens(+document.tokens) : ''}
                    </td>
-                    <td className="border-r border-t px-4 py-2">
+                    <td>
                      {document.type === 'remote' ? 'Pre-loaded' : 'Private'}
                    </td>
-                    <td className="border-t px-4 py-2">
+                    <td>
                      <div className="flex flex-row items-center">
                        {document.type !== 'remote' && (
                          <img
--- a/frontend/src/settings/index.tsx
+++ b/frontend/src/settings/index.tsx
@@ -3,8 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';

 import userService from '../api/services/userService';
-import ArrowLeft from '../assets/arrow-left.svg';
-import ArrowRight from '../assets/arrow-right.svg';
+import SettingsBar from '../components/SettingsBar';
 import i18n from '../locale/i18n';
 import { Doc } from '../models/misc';
 import {
@@ -21,13 +20,6 @@ import Widgets from './Widgets';
 export default function Settings() {
  const dispatch = useDispatch();
  const { t } = useTranslation();
-  const tabs = [
-    t('settings.general.label'),
-    t('settings.documents.label'),
-    t('settings.apiKeys.label'),
-    t('settings.analytics.label'),
-    t('settings.logs.label'),
-  ];
  const [activeTab, setActiveTab] = React.useState(t('settings.general.label'));
  const [widgetScreenshot, setWidgetScreenshot] = React.useState<File | null>(
    null,
@@ -61,39 +53,7 @@ export default function Settings() {
      <p className="text-2xl font-bold text-eerie-black dark:text-bright-gray">
        {t('settings.label')}
      </p>
-      <div className="mt-6 flex flex-row items-center space-x-4 overflow-auto md:space-x-8 ">
-        <div className="md:hidden">
-          <button
-            onClick={() => scrollTabs(-1)}
-            className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-purple-30 transition-all hover:bg-gray-100"
-          >
-            <img src={ArrowLeft} alt="left-arrow" className="h-6 w-6" />
-          </button>
-        </div>
-        <div className="flex flex-nowrap space-x-4 overflow-x-auto no-scrollbar md:space-x-8">
-          {tabs.map((tab, index) => (
-            <button
-              key={index}
-              onClick={() => setActiveTab(tab)}
-              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>
-          ))}
-        </div>
-        <div className="md:hidden">
-          <button
-            onClick={() => scrollTabs(1)}
-            className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-purple-30 hover:bg-gray-100"
-          >
-            <img src={ArrowRight} alt="right-arrow" className="h-6 w-6" />
-          </button>
-        </div>
-      </div>
+      <SettingsBar activeTab={activeTab} setActiveTab={setActiveTab} />
      {renderActiveTab()}

      {/* {activeTab === 'Widgets' && (
@@ -105,13 +65,6 @@ export default function Settings() {
    </div>
  );

-  function scrollTabs(direction: number) {
-    const container = document.querySelector('.flex-nowrap');
-    if (container) {
-      container.scrollLeft += direction * 100; // Adjust the scroll amount as needed
-    }
-  }
-
  function renderActiveTab() {
    switch (activeTab) {
      case t('settings.general.label'):
--- 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,13 +21,16 @@ import {
 function Upload({
  modalState,
  setModalState,
+  isOnboarding,
 }: {
  modalState: ActiveState;
  setModalState: (state: ActiveState) => void;
+  isOnboarding: boolean;
 }) {
  const [docName, setDocName] = useState('');
  const [urlName, setUrlName] = useState('');
  const [url, setUrl] = useState('');
+  const [repoUrl, setRepoUrl] = useState(''); // P3f93
  const [redditData, setRedditData] = useState({
    client_id: '',
    client_secret: '',
@@ -31,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';
@@ -48,6 +55,7 @@ function Upload({
    // { label: 'Sitemap', value: 'sitemap' },
    { label: 'Link', value: 'url' },
    { label: 'Reddit', value: 'reddit' },
+    { label: 'GitHub', value: 'github' }, // P3f93
  ];

  const [urlType, setUrlType] = useState<{ label: string; value: string }>({
@@ -64,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>
    );
@@ -85,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>
    );
  }
@@ -189,6 +230,7 @@ function Upload({
        title="Training is in progress"
        isCancellable={progress?.percentage === 100}
        isFailed={progress?.failed === true}
+        isTraining={true}
      ></Progress>
    );
  }
@@ -238,6 +280,9 @@ function Upload({
      formData.set('name', 'other');
      formData.set('data', JSON.stringify(redditData));
    }
+    if (urlType.value === 'github') {
+      formData.append('repo_url', repoUrl); // Pdeac
+    }
    const apiHost = import.meta.env.VITE_API_HOST;
    const xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', (event) => {
@@ -270,6 +315,9 @@ function Upload({
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
        ['.docx'],
      'text/csv': ['.csv'],
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': [
+        '.xlsx',
+      ],
    },
  });

@@ -297,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' && (
          <>
@@ -376,7 +431,7 @@ function Upload({
              size="w-full"
              rounded="3xl"
            />
-            {urlType.label !== 'Reddit' ? (
+            {urlType.label !== 'Reddit' && urlType.label !== 'GitHub' ? (
              <>
                <Input
                  placeholder={`Enter ${t('modals.uploadDoc.name')}`}
@@ -403,6 +458,33 @@ function Upload({
                  </span>
                </div>
              </>
+            ) : urlType.label === 'GitHub' ? ( // P3f93
+              <>
+                <Input
+                  placeholder={`Enter ${t('modals.uploadDoc.name')}`}
+                  type="text"
+                  value={urlName}
+                  onChange={(e) => setUrlName(e.target.value)}
+                  borderVariant="thin"
+                ></Input>
+                <div className="relative bottom-12 left-2 mt-[-20px]">
+                  <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
+                    {t('modals.uploadDoc.name')}
+                  </span>
+                </div>
+                <Input
+                  placeholder={t('modals.uploadDoc.repoUrl')}
+                  type="text"
+                  value={repoUrl}
+                  onChange={(e) => setRepoUrl(e.target.value)}
+                  borderVariant="thin"
+                ></Input>
+                <div className="relative bottom-12 left-2 mt-[-20px]">
+                  <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
+                    {t('modals.uploadDoc.repoUrl')}
+                  </span>
+                </div>
+              </>
            ) : (
              <div className="flex flex-col gap-1 mt-2">
                <div>
@@ -484,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>
    );
  }

@@ -528,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/scripts/migrate_to_v1_vectorstore.py
+++ b/scripts/migrate_to_v1_vectorstore.py
@@ -1,13 +1,35 @@
 import pymongo
 import os
+import shutil
+import logging
+from tqdm import tqdm
+
+# Configure logging
+logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
+logger = logging.getLogger()
+
+# Configuration
+MONGO_URI = "mongodb://localhost:27017/"
+MONGO_ATLAS_URI = "mongodb+srv://<username>:<password>@<cluster>/<dbname>?retryWrites=true&w=majority"
+DB_NAME = "docsgpt"
+
+def backup_collection(collection, backup_collection_name):
+    logger.info(f"Backing up collection {collection.name} to {backup_collection_name}")
+    collection.aggregate([{"$out": backup_collection_name}])
+    logger.info("Backup completed")

 def migrate_to_v1_vectorstore_mongo():
-    client = pymongo.MongoClient("mongodb://localhost:27017/")
-    db = client["docsgpt"]
+    client = pymongo.MongoClient(MONGO_URI)
+    db = client[DB_NAME]
    vectors_collection = db["vectors"]
    sources_collection = db["sources"]

-    for vector in vectors_collection.find():
+    # Backup collections before migration
+    backup_collection(vectors_collection, "vectors_backup")
+    backup_collection(sources_collection, "sources_backup")
+
+    vectors = list(vectors_collection.find())
+    for vector in tqdm(vectors, desc="Updating vectors"):
        if "location" in vector:
            del vector["location"]
        if "retriever" not in vector:
@@ -15,41 +37,53 @@ def migrate_to_v1_vectorstore_mongo():
            vector["remote_data"] = None
        vectors_collection.update_one({"_id": vector["_id"]}, {"$set": vector})

-    # move data from vectors_collection to sources_collection
-    for vector in vectors_collection.find():
+    # Move data from vectors_collection to sources_collection
+    for vector in tqdm(vectors, desc="Moving to sources"):
        sources_collection.insert_one(vector)

    vectors_collection.drop()
-
    client.close()
+    logger.info("Migration completed")

 def migrate_faiss_to_v1_vectorstore():
-    client = pymongo.MongoClient("mongodb://localhost:27017/")
-    db = client["docsgpt"]
+    client = pymongo.MongoClient(MONGO_URI)
+    db = client[DB_NAME]
    vectors_collection = db["vectors"]

-    for vector in vectors_collection.find():
+    vectors = list(vectors_collection.find())
+    for vector in tqdm(vectors, desc="Migrating FAISS vectors"):
        old_path = f"./application/indexes/{vector['user']}/{vector['name']}"
        new_path = f"./application/indexes/{vector['_id']}"
        try:
-            os.rename(old_path, new_path)
+            os.makedirs(os.path.dirname(new_path), exist_ok=True)
+            shutil.move(old_path, new_path)
        except OSError as e:
-            print(f"Error moving {old_path} to {new_path}: {e}")
+            logger.error(f"Error moving {old_path} to {new_path}: {e}")

    client.close()
+    logger.info("FAISS migration completed")

 def migrate_mongo_atlas_vector_to_v1_vectorstore():
-    client = pymongo.MongoClient("mongodb+srv://<username>:<password>@<cluster>/<dbname>?retryWrites=true&w=majority")
-    db = client["docsgpt"]
+    client = pymongo.MongoClient(MONGO_ATLAS_URI)
+    db = client[DB_NAME]
    vectors_collection = db["vectors"]
-
-    # mongodb atlas collection
    documents_collection = db["documents"]

-    for vector in vectors_collection.find():
-        documents_collection.update_many({"store": vector["user"] + "/" + vector["name"]}, {"$set": {"source_id": str(vector["_id"])}})
+    # Backup collections before migration
+    backup_collection(vectors_collection, "vectors_backup")
+    backup_collection(documents_collection, "documents_backup")
+
+    vectors = list(vectors_collection.find())
+    for vector in tqdm(vectors, desc="Updating Mongo Atlas vectors"):
+        documents_collection.update_many(
+            {"store": vector["user"] + "/" + vector["name"]},
+            {"$set": {"source_id": str(vector["_id"])}}
+        )

    client.close()
+    logger.info("Mongo Atlas migration completed")

-migrate_faiss_to_v1_vectorstore()
-migrate_to_v1_vectorstore_mongo()
+if __name__ == "__main__":
+    migrate_faiss_to_v1_vectorstore()
+    migrate_to_v1_vectorstore_mongo()
+    migrate_mongo_atlas_vector_to_v1_vectorstore()
--- 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"