Revert "Merge pull request #797 from arc53/fix_boxes_hero"

This reverts commit 0bf020a1b4, reversing
changes made to a62566e8fb.

.env-template

@@ -1,8 +1,7 @@
-OPENAI_API_KEY=<LLM api key (for example, open ai key)>
-SELF_HOSTED_MODEL=false
+API_KEY=<LLM api key (for example, open ai key)>
 VITE_API_STREAMING=true
 
-#For Azure
+#For Azure (you can delete it if you don't use Azure)
 OPENAI_API_BASE=
 OPENAI_API_VERSION=
 AZURE_DEPLOYMENT_NAME=

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,138 @@
+name: "🐛 Bug Report"
+description: "Submit a bug report to help us improve"
+title: "🐛 Bug Report: "
+labels: ["type: bug"]
+body:
+  - type: markdown
+    attributes:
+      value: We value your time and your efforts to submit this bug report is appreciated. 🙏
+
+  - type: textarea
+    id: description
+    validations:
+      required: true
+    attributes:
+      label: "📜 Description"
+      description: "A clear and concise description of what the bug is."
+      placeholder: "It bugs out when ..."
+
+  - type: textarea
+    id: steps-to-reproduce
+    validations:
+      required: true
+    attributes:
+      label: "👟 Reproduction steps"
+      description: "How do you trigger this bug? Please walk us through it step by step."
+      placeholder: "1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error"
+
+  - type: textarea
+    id: expected-behavior
+    validations:
+      required: true
+    attributes:
+      label: "👍 Expected behavior"
+      description: "What did you think should happen?"
+      placeholder: "It should ..."
+
+  - type: textarea
+    id: actual-behavior
+    validations:
+      required: true
+    attributes:
+      label: "👎 Actual Behavior with Screenshots"
+      description: "What did actually happen? Add screenshots, if applicable."
+      placeholder: "It actually ..."
+
+  - type: dropdown
+    id: operating-system
+    attributes:
+      label: "💻 Operating system"
+      description: "What OS is your app running on?"
+      options:
+        - Linux
+        - MacOS
+        - Windows
+        - Something else
+    validations:
+      required: true
+
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browsers are you seeing the problem on?
+      multiple: true
+      options:
+        - Firefox
+        - Chrome
+        - Safari
+        - Microsoft Edge
+        - Something else
+
+  - type: dropdown
+    id: dev-environment
+    validations:
+      required: true
+    attributes:
+      label: "🤖 What development environment are you experiencing this bug on?"
+      options:
+        - Docker
+        - Local dev server
+
+  - type: textarea
+    id: env-vars
+    validations:
+      required: false
+    attributes:
+      label: "🔒 Did you set the correct environment variables in the right path? List the environment variable names (not values please!)"
+      description: "Please refer to the [Project setup instructions](https://github.com/arc53/DocsGPT#quickstart) if you are unsure."
+      placeholder: "It actually ..."
+
+  - type: textarea
+    id: additional-context
+    validations:
+      required: false
+    attributes:
+      label: "📃 Provide any additional context for the Bug."
+      description: "Add any other context about the problem here."
+      placeholder: "It actually ..."
+
+  - type: textarea
+    id: logs
+    validations:
+      required: false
+    attributes:
+      label: 📖 Relevant log output
+      description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
+      render: shell
+
+  - type: checkboxes
+    id: no-duplicate-issues
+    attributes:
+      label: "👀 Have you spent some time to check if this bug has been raised before?"
+      options:
+        - label: "I checked and didn't find similar issue"
+          required: true
+
+  - type: dropdown
+    id: willing-to-submit-pr
+    attributes:
+      label: 🔗 Are you willing to submit PR?
+      description: This is absolutely not required, but we are happy to guide you in the contribution process.
+      options: # Added options key
+        - "Yes, I am willing to submit a PR!"
+        - "No"
+    validations:
+      required: false
+
+
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: 🧑‍⚖️ Code of Conduct
+      description: By submitting this issue, you agree to follow our [Code of Conduct](https://github.com/arc53/DocsGPT/blob/main/CODE_OF_CONDUCT.md)
+      options:
+        - label: I agree to follow this project's Code of Conduct
+          required: true

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,54 @@
+name: 🚀 Feature
+description: "Submit a proposal for a new feature"
+title: "🚀 Feature: "
+labels: [feature]
+body:
+  - type: markdown
+    attributes:
+      value: We value your time and your efforts to submit this bug report is appreciated. 🙏
+  - type: textarea
+    id: feature-description
+    validations:
+      required: true
+    attributes:
+      label: "🔖 Feature description"
+      description: "A clear and concise description of what the feature is."
+      placeholder: "You should add ..."
+  - type: textarea
+    id: pitch
+    validations:
+      required: true
+    attributes:
+      label: "🎤 Why is this feature needed ?"
+      description: "Please explain why this feature should be implemented and how it would be used. Add examples, if applicable."
+      placeholder: "In my use-case, ..."
+  - type: textarea
+    id: solution
+    validations:
+      required: true
+    attributes:
+      label: "✌️ How do you aim to achieve this?"
+      description: "A clear and concise description of what you want to happen."
+      placeholder: "I want this feature to, ..."
+  - type: textarea
+    id: alternative
+    validations:
+      required: false
+    attributes:
+      label: "🔄️ Additional Information"
+      description: "A clear and concise description of any alternative solutions or additional solutions you've considered."
+      placeholder: "I tried, ..."
+  - type: checkboxes
+    id: no-duplicate-issues
+    attributes:
+      label: "👀 Have you spent some time to check if this feature request has been raised before?"
+      options:
+        - label: "I checked and didn't find similar issue"
+          required: true
+  - type: dropdown
+    id: willing-to-submit-pr
+    attributes:
+      label: Are you willing to submit PR?
+      description: This is absolutely not required, but we are happy to guide you in the contribution process.
+      options:
+        - "Yes I am willing to submit a PR!"

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,5 @@
+- **What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...)
+
+- **Why was this change needed?** (You can also link to an open issue here)
+
+- **Other information**:

.github/holopin.yml

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

.github/labeler.yml

@@ -0,0 +1,23 @@
+repo:
+  - '*'
+
+github:
+  - .github/**/*
+
+application:
+  - application/**/*
+
+docs:
+  - docs/**/*
+
+extensions:
+  - extensions/**/*
+
+frontend:
+  - frontend/**/*
+
+scripts:
+  - scripts/**/*
+
+tests:
+  - tests/**/*

.github/workflows/labeler.yml

@@ -0,0 +1,15 @@
+# https://github.com/actions/labeler
+name: Pull Request Labeler
+on:
+  - pull_request_target
+jobs:
+  triage:
+    permissions:
+      contents: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/labeler@v4
+        with:
+          repo-token: "${{ secrets.GITHUB_TOKEN }}"
+          sync-labels: true

CODE_OF_CONDUCT.md

@@ -2,58 +2,58 @@
 
 ## Our Pledge
 
-We as members, contributors, and leaders pledge to make participation in our
-community a harassment-free experience for everyone, regardless of age, body
+We as members, contributors and leaders pledge to make participation in our
+community, a harassment-free experience for everyone, regardless of age, body
 size, visible or invisible disability, ethnicity, sex characteristics, gender
 identity and expression, level of experience, education, socio-economic status,
-nationality, personal appearance, race, religion, or sexual identity
+nationality, personal appearance, race, religion or sexual identity
 and orientation.
 
 We pledge to act and interact in ways that contribute to an open, welcoming,
-diverse, inclusive, and healthy community.
+diverse, inclusive and a healthy community.
 
 ## Our Standards
 
-Examples of behavior that contributes to a positive environment for our
+Examples of behavior that contribute to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
-  and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
-  overall community
+## Demonstrating empathy and kindness towards other people
+1. Being respectful and open to differing opinions, viewpoints, and experiences
+2. Giving and gracefully accepting constructive feedback
+3. Taking accountability and offering apologies to those who have been impacted by our errors,
+  while also gaining insights from the situation
+4. Focusing on what is best not just for us as individuals but for the
+  community as a whole
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+1. The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+2. Trolling, insulting or derogatory comments, and personal or political attacks
+3. Public or private harassment
+4. Publishing other's private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+5. Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
 
 Community leaders are responsible for clarifying and enforcing our standards of
 acceptable behavior and will take appropriate and fair corrective action in
-response to any behavior that they deem inappropriate, threatening, offensive,
+response to any behavior that they deem inappropriate, threatening, offensive
 or harmful.
 
 Community leaders have the right and responsibility to remove, edit, or reject
 comments, commits, code, wiki edits, issues, and other contributions that are
-not aligned to this Code of Conduct, and will communicate reasons for moderation
+not aligned to this Code of Conduct and will communicate reasons for moderation
 decisions when appropriate.
 
 ## Scope
 
-This Code of Conduct applies within all community spaces, and also applies when
+This Code of Conduct applies within all community spaces and also applies when
 an individual is officially representing the community in public spaces.
 Examples of representing our community include using an official e-mail address,
-posting via an official social media account, or acting as an appointed
+posting via an official social media account or acting as an appointed
 representative at an online or offline event.
 
 ## Enforcement
@@ -63,29 +63,27 @@ reported to the community leaders responsible for enforcement at
 contact@arc53.com.
 All complaints will be reviewed and investigated promptly and fairly.
 
-All community leaders are obligated to respect the privacy and security of the
+All community leaders are obligated to be respectful towards the privacy and security of the
 reporter of any incident.
 
 ## Enforcement Guidelines
 
 Community leaders will follow these Community Impact Guidelines in determining
-the consequences for any action they deem in violation of this Code of Conduct:
+the consequences for any action that they deem in violation of this Code of Conduct:
 
 ### 1. Correction
+* **Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community space.
 
-**Community Impact**: Use of inappropriate language or other behavior deemed
-unprofessional or unwelcome in the community.
-
-**Consequence**: A private, written warning from community leaders, providing
+* **Consequence**: A private, written warning from community leaders, providing
 clarity around the nature of the violation and an explanation of why the
 behavior was inappropriate. A public apology may be requested.
 
 ### 2. Warning
-
-**Community Impact**: A violation through a single incident or series
+* **Community Impact**: A violation through a single incident or series
 of actions.
 
-**Consequence**: A warning with consequences for continued behavior. No
+* **Consequence**: A warning with consequences for continued behavior. No
 interaction with the people involved, including unsolicited interaction with
 those enforcing the Code of Conduct, for a specified period of time. This
 includes avoiding interactions in community spaces as well as external channels
@@ -93,23 +91,21 @@ like social media. Violating these terms may lead to a temporary or
 permanent ban.
 
 ### 3. Temporary Ban
-
-**Community Impact**: A serious violation of community standards, including
+* **Community Impact**: A serious violation of community standards, including
 sustained inappropriate behavior.
 
-**Consequence**: A temporary ban from any sort of interaction or public
+* **Consequence**: A temporary ban from any sort of interaction or public
 communication with the community for a specified period of time. No public or
 private interaction with the people involved, including unsolicited interaction
 with those enforcing the Code of Conduct, is allowed during this period.
 Violating these terms may lead to a permanent ban.
 
 ### 4. Permanent Ban
+* **Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,harassment of an
+individual or aggression towards or disparagement of classes of individuals.
 
-**Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
-individual, or aggression toward or disparagement of classes of individuals.
-
-**Consequence**: A permanent ban from any sort of public interaction within
+* **Consequence**: A permanent ban from any sort of public interaction within
 the community.
 
 ## Attribution

CONTRIBUTING.md

@@ -1,44 +1,128 @@
-# Welcome to DocsGPT Contributing guideline
+# Welcome to DocsGPT Contributing Guidelines
 
-Thank you for choosing this project to contribute to, we are all very grateful!
+Thank you for choosing to contribute to DocsGPT! We are all very grateful! 
 
 # We accept different types of contributions
 
-📣 Discussions - where you can start a new topic or answer some questions
+📣 **Discussions** - Engage in conversations, start new topics, or help answer questions.
 
-🐞 Issues - This is how we track tasks, sometimes it is bugs that need fixing, and sometimes it is new features
+🐞 **Issues** - This is where we keep track of tasks. It could be bugs,fixes or suggestions for new features.
 
-🛠️ Pull requests - This is how you can suggest changes to our repository, to work on existing issues or add new features
+🛠️ **Pull requests** - Suggest changes to our repository, either by working on existing issues or adding new features.
 
-📚 Wiki - where we have our documentation
+📚 **Wiki** - This is where our documentation resides.
 
 
 ## 🐞 Issues and Pull requests
 
-We value contributions to our issues in the form of discussion or suggestion, we recommend that you check out existing issues and our [Roadmap](https://github.com/orgs/arc53/projects/2)
+- We value contributions in the form of discussions or suggestions. We recommend taking a look at existing issues and our [roadmap](https://github.com/orgs/arc53/projects/2).
 
-If you want to contribute by writing code there are a few things that you should know before doing it:
-We have frontend (React, Vite) and Backend (python)
 
-### If you are looking to contribute to Frontend (⚛️React, Vite):
-The current frontend is being migrated from /application to /frontend with a new design, so please contribute to the new one. Check out this [Milestone](https://github.com/arc53/DocsGPT/milestone/1) and its issues also [Figma](https://www.figma.com/file/OXLtrl1EAy885to6S69554/DocsGPT?node-id=0%3A1&t=hjWVuxRg9yi5YkJ9-1)
+- 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).
+
+### 👨‍💻 If you're interested in contributing code, here are some important things to know:
+
+
+Tech Stack Overview:
+
+- 🌐 Frontend: Built with React (Vite) ⚛️,
+
+- 🖥 Backend: Developed in Python 🐍
+
+### 🌐 If you are looking to contribute to frontend (⚛️React, Vite):
+
+- The current frontend is being migrated from [`/application`](https://github.com/arc53/DocsGPT/tree/main/application) to [`/frontend`](https://github.com/arc53/DocsGPT/tree/main/frontend) with a new design, so please contribute to the new one.
+- Check out this [milestone](https://github.com/arc53/DocsGPT/milestone/1) and its issues.
+- The updated Figma design can be found [here](https://www.figma.com/file/OXLtrl1EAy885to6S69554/DocsGPT?node-id=0%3A1&t=hjWVuxRg9yi5YkJ9-1).
+
 Please try to follow the guidelines.
 
-### If you are looking to contribute to Backend (🐍Python):
-* Check out our issues, and contribute to /application or /scripts (ignore old  ingest_rst.py ingest_rst_sphinx.py files, they 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 PR make sure that after you ingested some test data it is queryable.
+### 🖥 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).
+- 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.
+  
 ### Testing
-To run unit tests, from the root of the repository execute:
+
+To run unit tests from the root of the repository, execute:
 ```
 python -m pytest
 ```
 
-### Workflow:
-Create a fork, make changes on your forked repository, and submit changes in the form of a pull request.
+## Workflow 📈
+
+Here's a step-by-step guide on how to contribute to DocsGPT:
+
+1. **Fork the Repository:**
+   - Click the "Fork" button at the top-right of this repository to create your fork.
+
+2. **Clone the Forked Repository:**
+   - Clone the repository using:
+      ``` shell
+      git clone https://github.com/<your-github-username>/DocsGPT.git
+      ```
+
+3. **Keep your Fork in Sync:**
+   - Before you make any changes, make sure that your fork is in sync to avoid merge conflicts using:
+     ```shell
+     git remote add upstream https://github.com/arc53/DocsGPT.git
+     git pull upstream main
+     ```
+
+4. **Create and Switch to a New Branch:**
+   - Create a new branch for your contribution using:
+     ```shell
+     git checkout -b your-branch-name
+     ```
+
+5. **Make Changes:**
+   - Make the required changes in your branch.
+
+6. **Add Changes to the Staging Area:**
+   - Add your changes to the staging area using:
+     ```shell
+     git add .
+     ```
+
+7. **Commit Your Changes:**
+   - Commit your changes with a descriptive commit message using:
+     ```shell
+     git commit -m "Your descriptive commit message"
+     ```
+
+8. **Push Your Changes to the Remote Repository:**
+   - Push your branch with changes to your fork on GitHub using:
+     ```shell
+     git push origin your-branch-name
+     ```
+
+9. **Submit a Pull Request (PR):**
+   - Create a Pull Request from your branch to the main repository. Make sure to include a detailed description of your changes and reference any related issues.
+
+10. **Collaborate:**
+   - Be responsive to comments and feedback on your PR.
+   - Make necessary updates as suggested.
+   - Once your PR is approved, it will be merged into the main repository.
+
+11. **Testing:**
+   - Before submitting a Pull Request, ensure your code passes all unit tests.
+   - To run unit tests from the root of the repository, execute:
+     ```shell
+     python -m pytest
+     ```
+
+*Note: You should run the unit test only after making the changes to the backend code.*
+
+12. **Questions and Collaboration:**
+    - Feel free to join our Discord. We're very friendly and welcoming to new contributors, so don't hesitate to reach out.
+
+Thank you for considering contributing to DocsGPT! 🙏
 
 ## Questions/collaboration
-Please join our [Discord](https://discord.gg/n5BX8dh8rU) don't hesitate, we are very friendly and welcoming to new contributors.
-
-# Thank you so much for considering contributing to DocsGPT!🙏
+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!🙏

HACKTOBERFEST.md

@@ -1,31 +0,0 @@
-🎉 Join the Hacktoberfest with DocsGPT and Earn a Free T-shirt! 🎉
-
-Welcome, contributors! We're excited to announce that DocsGPT is participating in Hacktoberfest. Get involved by submitting a **meaningful** pull request, and earn a free shirt in return!
-📜 Here's How to Contribute:
-
-    🛠️ Code: This is the golden ticket! Make meaningful contributions through PRs.
-    📚 Wiki: Improve our documentation, Create a guide or change existing documentation.
-    🖥️ Design: Improve the UI/UX, or design a new feature.
-
-📝 Guidelines for Pull Requests:
-
-Familiarize yourself with the current contributions and our [Roadmap](https://github.com/orgs/arc53/projects/2).
-
-Deciding to contribute with code? Here are some insights based on the area of your interest:
-
-Frontend (⚛️React, Vite):
-    Most of the code is located in /frontend folder. You can also check out our React extension in /extensions/react-widget.
-    For design references, here's the [Figma](https://www.figma.com/file/OXLtrl1EAy885to6S69554/DocsGPT?node-id=0%3A1&t=hjWVuxRg9yi5YkJ9-1).
-    Ensure you adhere to the established guidelines.
-
-Backend (🐍Python):
-    Focus on /application or /scripts. However, avoid the files ingest_rst.py and ingest_rst_sphinx.py as they are soon to be deprecated.
-    Newly added code should come with relevant unit tests (pytest).
-    Refer to the /tests folder for test suites.
-
-Check out [Contributing Guidelines](https://github.com/arc53/DocsGPT/blob/main/CONTRIBUTING.md)
-
-
-Don't be shy! Hop into our [Discord](https://discord.gg/n5BX8dh8rU) Server. We're a friendly bunch and eager to assist newcomers.
-
-Big thanks for considering contributing to DocsGPT during Hacktoberfest! 🙏 Your effort can earn you a swanky new t-shirt. 🎁 Let's code together! 🚀

README.md

@@ -7,150 +7,184 @@
 </p>
 
 <p align="left">
-  <strong>DocsGPT</strong> is a cutting-edge open-source solution that streamlines the process of finding information in project documentation. With its integration of the powerful <strong>GPT</strong> models, developers can easily ask questions about a project and receive accurate answers.
+  <strong><a href="https://docsgpt.arc53.com/">DocsGPT</a></strong> is a cutting-edge open-source solution that streamlines the process of finding information in the project documentation. With its integration of the powerful <strong>GPT</strong> models, developers can easily ask questions about a project and receive accurate answers.
   
-Say goodbye to time-consuming manual searches, and let <strong>DocsGPT</strong> help you quickly find the information you need. Try it out and see how it revolutionizes your project documentation experience. Contribute to its development and be a part of the future of AI-powered assistance.
+Say goodbye to time-consuming manual searches, and let <strong><a href="https://docsgpt.arc53.com/">DocsGPT</a></strong> help you quickly find the information you need. Try it out and see how it revolutionizes your project documentation experience. Contribute to its development and be a part of the future of AI-powered assistance.
 </p>
 
 <div align="center">
   
-  <a href="https://discord.gg/n5BX8dh8rU">![example1](https://img.shields.io/github/stars/arc53/docsgpt?style=social)</a>
-  <a href="https://discord.gg/n5BX8dh8rU">![example2](https://img.shields.io/github/forks/arc53/docsgpt?style=social)</a>
-  <a href="https://discord.gg/n5BX8dh8rU">![example3](https://img.shields.io/github/license/arc53/docsgpt)</a>
-  <a href="https://discord.gg/n5BX8dh8rU">![example3](https://img.shields.io/discord/1070046503302877216)</a>
+  <a href="https://github.com/arc53/DocsGPT">![link to main GitHub showing Stars number](https://img.shields.io/github/stars/arc53/docsgpt?style=social)</a>
+  <a href="https://github.com/arc53/DocsGPT">![link to main GitHub showing Forks number](https://img.shields.io/github/forks/arc53/docsgpt?style=social)</a>
+  <a href="https://github.com/arc53/DocsGPT/blob/main/LICENSE">![link to license file](https://img.shields.io/github/license/arc53/docsgpt)</a>
+  <a href="https://discord.gg/n5BX8dh8rU">![link to discord](https://img.shields.io/discord/1070046503302877216)</a>
+  <a href="https://twitter.com/ATushynski">![X (formerly Twitter) URL](https://img.shields.io/twitter/follow/ATushynski)</a>
 
-
-  
+ 
 </div>
 
-### Enterprise Solutions: 
+### Production Support / Help for Companies:
 
-When deploying your DocsGPT to a live environment, we're eager to provide personalized assistance. Reach out to us via email [here]( mailto:contact@arc53.com?subject=DocsGPT%20Enterprise&body=Hi%20we%20are%20%3CCompany%20name%3E%20and%20we%20want%20to%20build%20%3CSolution%3E%20with%20DocsGPT) to discuss your project further, and our team will connect with you shortly.
+We're eager to provide personalized assistance when deploying your DocsGPT to a live environment.
 
-### [🎉 Join the Hacktoberfest with DocsGPT and Earn a Free T-shirt! 🎉](https://github.com/arc53/DocsGPT/blob/main/HACKTOBERFEST.md)
+- [Book Demo :wave:](https://airtable.com/appdeaL0F1qV8Bl2C/shrrJF1Ll7btCJRbP)
+- [Send Email :email:](mailto:contact@arc53.com?subject=DocsGPT%20support%2Fsolutions)
 
 ![video-example-of-docs-gpt](https://d3dg1063dc54p9.cloudfront.net/videos/demov3.gif)
 
-
 ## Roadmap
 
-You can find our [Roadmap](https://github.com/orgs/arc53/projects/2) here. Please don't hesitate to contribute or create issues, it helps us make DocsGPT better!
+You can find our roadmap [here](https://github.com/orgs/arc53/projects/2). Please don't hesitate to contribute or create issues, it helps us improve DocsGPT!
 
-## Our open source models optimised for DocsGPT:
+## Our Open-Source Models Optimized for DocsGPT:
 
-| Name              | Base Model | Requirements (or similar)                        |
-|-------------------|------------|----------------------------------------------------------|
-| [Docsgpt-7b-falcon](https://huggingface.co/Arc53/docsgpt-7b-falcon)  | Falcon-7b  |  1xA10G gpu   |
-| [Docsgpt-14b](https://huggingface.co/Arc53/docsgpt-14b)              | llama-2-14b    | 2xA10 gpu's   |
-| [Docsgpt-40b-falcon](https://huggingface.co/Arc53/docsgpt-40b-falcon)       | falcon-40b     | 8xA10G gpu's  |
-
-
-If you don't have enough resources to run it you can use bitsnbytes to quantize
+| Name                                                                  | Base Model  | Requirements (or similar) |
+| --------------------------------------------------------------------- | ----------- | ------------------------- |
+| [Docsgpt-7b-falcon](https://huggingface.co/Arc53/docsgpt-7b-falcon)   | Falcon-7b   | 1xA10G gpu                |
+| [Docsgpt-14b](https://huggingface.co/Arc53/docsgpt-14b)               | llama-2-14b | 2xA10 gpu's               |
+| [Docsgpt-40b-falcon](https://huggingface.co/Arc53/docsgpt-40b-falcon) | falcon-40b  | 8xA10G gpu's              |
 
+If you don't have enough resources to run it, you can use bitsnbytes to quantize.
 
 ## Features
 
-![Group 9](https://user-images.githubusercontent.com/17906039/220427472-2644cff4-7666-46a5-819f-fc4a521f63c7.png)
+![Main features of DocsGPT showcasing six main features](https://user-images.githubusercontent.com/17906039/220427472-2644cff4-7666-46a5-819f-fc4a521f63c7.png)
 
+## Useful Links
 
-## Useful links
- [Live preview](https://docsgpt.arc53.com/)
- 
- [Join Our Discord](https://discord.gg/n5BX8dh8rU)
- 
- [Guides](https://docs.docsgpt.co.uk/)
+- :mag: :fire: [Live preview](https://docsgpt.arc53.com/)
 
- [Interested in contributing?](https://github.com/arc53/DocsGPT/blob/main/CONTRIBUTING.md)
+- :speech_balloon: :tada: [Join our Discord](https://discord.gg/n5BX8dh8rU)
 
- [How to use any other documentation](https://docs.docsgpt.co.uk/Guides/How-to-train-on-other-documentation)
+- :books: :sunglasses: [Guides](https://docs.docsgpt.co.uk/)
 
- [How to host it locally (so all data will stay on-premises)](https://docs.docsgpt.co.uk/Guides/How-to-use-different-LLM)
+- :couple: [Interested in contributing?](https://github.com/arc53/DocsGPT/blob/main/CONTRIBUTING.md)
 
+- :file_folder: :rocket: [How to use any other documentation](https://docs.docsgpt.co.uk/Guides/How-to-train-on-other-documentation)
 
-## Project structure
-- Application - Flask app (main application)
+- :house: :closed_lock_with_key: [How to host it locally (so all data will stay on-premises)](https://docs.docsgpt.co.uk/Guides/How-to-use-different-LLM)
 
-- Extensions - Chrome extension
+## Project Structure
 
-- Scripts - Script that creates similarity search index and store for other libraries. 
+- Application - Flask app (main application).
 
-- Frontend - Frontend uses Vite and React
+- Extensions - Chrome extension.
+
+- Scripts - Script that creates similarity search index for other libraries.
+
+- Frontend - Frontend uses <a href="https://vitejs.dev/">Vite</a> and <a href="https://react.dev/">React</a>.
 
 ## QuickStart
 
-Note: Make sure you have Docker installed
+> [!Note]
+> Make sure you have [Docker](https://docs.docker.com/engine/install/) installed
 
-On Mac OS or Linux just write:
+On Mac OS or Linux, write:
 
 `./setup.sh`
 
-It will install all the dependencies and give you an option to download local model or use OpenAI
+It will install all the dependencies and allow you to download the local model or use OpenAI.
 
-Otherwise refer to this Guide:
+Otherwise, refer to this Guide:
 
 1. Download and open this repository with `git clone https://github.com/arc53/DocsGPT.git`
-2. Create a .env file in your root directory and set the env variable OPENAI_API_KEY with your OpenAI API key and  VITE_API_STREAMING to true or false, depending on if you want streaming answers or not
+2. Create a `.env` file in your root directory and set the env variable `API_KEY` with your [OpenAI API key](https://platform.openai.com/account/api-keys) and `VITE_API_STREAMING` to true or false, depending on whether you want streaming answers or not.
    It should look like this inside:
-   
+
    ```
-   OPENAI_API_KEY=Yourkey
+   API_KEY=Yourkey
    VITE_API_STREAMING=true
-   SELF_HOSTED_MODEL=false
    ```
-   See optional environment variables in the `/.env-template` and `/application/.env_sample` files.
-3. Run `./run-with-docker-compose.sh`
-4. Navigate to http://localhost:5173/
 
-To stop just run Ctrl + C
+   See optional environment variables in the [/.env-template](https://github.com/arc53/DocsGPT/blob/main/.env-template) and [/application/.env_sample](https://github.com/arc53/DocsGPT/blob/main/application/.env_sample) files.
 
-## Development environments
+3. Run [./run-with-docker-compose.sh](https://github.com/arc53/DocsGPT/blob/main/run-with-docker-compose.sh).
+4. Navigate to http://localhost:5173/.
 
-### Spin up mongo and redis
-For development only 2 containers are used from docker-compose.yaml (by deleting all services except for Redis and Mongo). 
+To stop, just run `Ctrl + C`.
+
+## Development Environments
+
+### Spin up Mongo and Redis
+
+For development, only two containers are used from [docker-compose.yaml](https://github.com/arc53/DocsGPT/blob/main/docker-compose.yaml) (by deleting all services except for Redis and Mongo).
 See file [docker-compose-dev.yaml](./docker-compose-dev.yaml).
 
 Run
+
 ```
 docker compose -f docker-compose-dev.yaml build
 docker compose -f docker-compose-dev.yaml up -d
 ```
 
-### Run the backend
+### Run the Backend
 
-Make sure you have Python 3.10 or 3.11 installed.
+> [!Note]
+> Make sure you have Python 3.10 or 3.11 installed.
+
+1. Export required environment variables or prepare a `.env` file in the `/application` folder:
+   - Copy [.env_sample](https://github.com/arc53/DocsGPT/blob/main/application/.env_sample) and create `.env` with your OpenAI API token for the `API_KEY` and `EMBEDDINGS_KEY` fields.
+
+(check out [`application/core/settings.py`](application/core/settings.py) if you want to see more config options.)
+
+2. (optional) Create a Python virtual environment:
+   You can follow the [Python official documentation](https://docs.python.org/3/tutorial/venv.html) for virtual environments.
+
+a) On Mac OS and Linux
 
-1. Export required environment variables
-```commandline
-export CELERY_BROKER_URL=redis://localhost:6379/0   
-export CELERY_RESULT_BACKEND=redis://localhost:6379/1
-export MONGO_URI=mongodb://localhost:27017/docsgpt
-export FLASK_APP=application/app.py
-export FLASK_DEBUG=true
-```
-2. Prepare .env file
-Copy `.env_sample` and create `.env` with your OpenAI API token
-3. (optional) Create a Python virtual environment
 ```commandline
 python -m venv venv
 . venv/bin/activate
 ```
-4. Change to `application/` subdir and install dependencies for the backend
+
+b) On Windows
+
+```commandline
+python -m venv venv
+ venv/Scripts/activate
+```
+
+3. Change to the `application/` subdir by the command `cd application/` and install dependencies for the backend:
+
 ```commandline
 pip install -r application/requirements.txt
 ```
-5. Run the app `flask run --host=0.0.0.0 --port=7091`
-6. Start worker with `celery -A application.app.celery worker -l INFO`
 
-### Start frontend 
-Make sure you have Node version 16 or higher.
+4. Run the app using `flask --app application/app.py run --host=0.0.0.0 --port=7091`.
+5. Start worker with `celery -A application.app.celery worker -l INFO`.
 
-1. Navigate to `/frontend` folder
-2. Install dependencies
-`npm install`
-3. Run the app 
-`npm run dev`
+### Start Frontend
 
+> [!Note]
+> Make sure you have Node version 16 or higher.
 
+1. Navigate to the [/frontend](https://github.com/arc53/DocsGPT/tree/main/frontend) folder.
+2. Install the required packages `husky` and `vite` (ignore if already installed).
 
-Built with [🦜️🔗 LangChain](https://github.com/hwchase17/langchain)
+```commandline
+npm install husky -g
+npm install vite -g
+```
 
+3. Install dependencies by running `npm install --include=dev`.
+4. Run the app using `npm run dev`.
+
+## Contributing
+
+Please refer to the [CONTRIBUTING.md](CONTRIBUTING.md) file for information about how to get involved. We welcome issues, questions, and pull requests.
+
+## Code Of Conduct
+
+We as members, contributors, and leaders, pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. Please refer to the [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) file for more information about contributing.
+
+## Many Thanks To Our Contributors⚡
+
+<a href="https://github.com/arc53/DocsGPT/graphs/contributors" alt="View Contributors">
+  <img src="https://contrib.rocks/image?repo=arc53/DocsGPT" alt="Contributors" />
+</a>
+
+## License
+
+The source code license is [MIT](https://opensource.org/license/mit/), as described in the [LICENSE](LICENSE) file.
+
+Built with [:bird: :link: LangChain](https://github.com/hwchase17/langchain)

application/.env_sample

@@ -1,9 +1,8 @@
 API_KEY=your_api_key
 EMBEDDINGS_KEY=your_api_key
-CELERY_BROKER_URL=redis://localhost:6379/0
-CELERY_RESULT_BACKEND=redis://localhost:6379/1
-MONGO_URI=mongodb://localhost:27017/docsgpt
 API_URL=http://localhost:7091
+FLASK_APP=application/app.py
+FLASK_DEBUG=true
 
 #For OPENAI on Azure
 OPENAI_API_BASE=

application/api/answer/routes.py

@@ -25,30 +25,30 @@ mongo = MongoClient(settings.MONGO_URI)
 db = mongo["docsgpt"]
 conversations_collection = db["conversations"]
 vectors_collection = db["vectors"]
+prompts_collection = db["prompts"]
 answer = Blueprint('answer', __name__)
 
 if settings.LLM_NAME == "gpt4":
     gpt_model = 'gpt-4'
+elif settings.LLM_NAME == "anthropic":
+    gpt_model = 'claude-2'
 else:
     gpt_model = 'gpt-3.5-turbo'
 
 # load the prompts
 current_dir = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
-with open(os.path.join(current_dir, "prompts", "combine_prompt.txt"), "r") as f:
-    template = f.read()
-
-with open(os.path.join(current_dir, "prompts", "combine_prompt_hist.txt"), "r") as f:
-    template_hist = f.read()
-
-with open(os.path.join(current_dir, "prompts", "question_prompt.txt"), "r") as f:
-    template_quest = f.read()
-
-with open(os.path.join(current_dir, "prompts", "chat_combine_prompt.txt"), "r") as f:
+with open(os.path.join(current_dir, "prompts", "chat_combine_default.txt"), "r") as f:
     chat_combine_template = f.read()
 
 with open(os.path.join(current_dir, "prompts", "chat_reduce_prompt.txt"), "r") as f:
     chat_reduce_template = f.read()
 
+with open(os.path.join(current_dir, "prompts", "chat_combine_creative.txt"), "r") as f:
+    chat_combine_creative = f.read()
+
+with open(os.path.join(current_dir, "prompts", "chat_combine_strict.txt"), "r") as f:
+    chat_combine_strict = f.read()    
+
 api_key_set = settings.API_KEY is not None
 embeddings_key_set = settings.EMBEDDINGS_KEY is not None
 
@@ -77,11 +77,10 @@ def run_async_chain(chain, question, chat_history):
 
 def get_vectorstore(data):
     if "active_docs" in data:
-        if data["active_docs"].split("/")[0] == "local":
-            if data["active_docs"].split("/")[1] == "default":
+        if data["active_docs"].split("/")[0] == "default":
                 vectorstore = ""
-            else:
-                vectorstore = "indexes/" + data["active_docs"]
+        elif data["active_docs"].split("/")[0] == "local":
+            vectorstore = "indexes/" + data["active_docs"]
         else:
             vectorstore = "vectors/" + data["active_docs"]
         if data["active_docs"] == "default":
@@ -92,37 +91,28 @@ def get_vectorstore(data):
     return vectorstore
 
 
-# def get_docsearch(vectorstore, embeddings_key):
-#     if settings.EMBEDDINGS_NAME == "openai_text-embedding-ada-002":
-#         if is_azure_configured():
-#             os.environ["OPENAI_API_TYPE"] = "azure"
-#             openai_embeddings = OpenAIEmbeddings(model=settings.AZURE_EMBEDDINGS_DEPLOYMENT_NAME)
-#         else:
-#             openai_embeddings = OpenAIEmbeddings(openai_api_key=embeddings_key)
-#         docsearch = FAISS.load_local(vectorstore, openai_embeddings)
-#     elif settings.EMBEDDINGS_NAME == "huggingface_sentence-transformers/all-mpnet-base-v2":
-#         docsearch = FAISS.load_local(vectorstore, HuggingFaceHubEmbeddings())
-#     elif settings.EMBEDDINGS_NAME == "huggingface_hkunlp/instructor-large":
-#         docsearch = FAISS.load_local(vectorstore, HuggingFaceInstructEmbeddings())
-#     elif settings.EMBEDDINGS_NAME == "cohere_medium":
-#         docsearch = FAISS.load_local(vectorstore, CohereEmbeddings(cohere_api_key=embeddings_key))
-#     return docsearch
-
-
 def is_azure_configured():
     return settings.OPENAI_API_BASE and settings.OPENAI_API_VERSION and settings.AZURE_DEPLOYMENT_NAME
 
 
-def complete_stream(question, docsearch, chat_history, api_key, conversation_id):
+def complete_stream(question, docsearch, chat_history, api_key, prompt_id, conversation_id):
     llm = LLMCreator.create_llm(settings.LLM_NAME, api_key=api_key)
-    
+
+    if prompt_id == 'default':
+        prompt = chat_combine_template
+    elif prompt_id == 'creative':
+        prompt = chat_combine_creative
+    elif prompt_id == 'strict':
+        prompt = chat_combine_strict
+    else:
+        prompt = prompts_collection.find_one({"_id": ObjectId(prompt_id)})["content"]
 
     docs = docsearch.search(question, k=2)
     if settings.LLM_NAME == "llama.cpp":
         docs = [docs[0]]
     # join all page_content together with a newline
     docs_together = "\n".join([doc.page_content for doc in docs])
-    p_chat_combine = chat_combine_template.replace("{summaries}", docs_together)
+    p_chat_combine = prompt.replace("{summaries}", docs_together)
     messages_combine = [{"role": "system", "content": p_chat_combine}]
     source_log_docs = []
     for doc in docs:
@@ -199,6 +189,10 @@ def stream():
     # history to json object from string
     history = json.loads(history)
     conversation_id = data["conversation_id"]
+    if 'prompt_id' in data:
+        prompt_id = data["prompt_id"]
+    else:
+        prompt_id = 'default'
 
     # check if active_docs is set
 
@@ -219,6 +213,7 @@ def stream():
     return Response(
         complete_stream(question, docsearch,
                         chat_history=history, api_key=api_key,
+                        prompt_id=prompt_id,
                         conversation_id=conversation_id), mimetype="text/event-stream"
     )
 
@@ -241,6 +236,19 @@ def api_answer():
         embeddings_key = data["embeddings_key"]
     else:
         embeddings_key = settings.EMBEDDINGS_KEY
+    if 'prompt_id' in data:
+        prompt_id = data["prompt_id"]
+    else:
+        prompt_id = 'default'
+
+    if prompt_id == 'default':
+        prompt = chat_combine_template
+    elif prompt_id == 'creative':
+        prompt = chat_combine_creative
+    elif prompt_id == 'strict':
+        prompt = chat_combine_strict
+    else:
+        prompt = prompts_collection.find_one({"_id": ObjectId(prompt_id)})["content"]
 
     # use try and except  to check for exception
     try:
@@ -258,7 +266,7 @@ def api_answer():
         docs = docsearch.search(question, k=2)
         # join all page_content together with a newline
         docs_together = "\n".join([doc.page_content for doc in docs])
-        p_chat_combine = chat_combine_template.replace("{summaries}", docs_together)
+        p_chat_combine = prompt.replace("{summaries}", docs_together)
         messages_combine = [{"role": "system", "content": p_chat_combine}]
         source_log_docs = []
         for doc in docs:

application/api/user/routes.py

@@ -1,11 +1,9 @@
 import os
 from flask import Blueprint, request, jsonify
 import requests
-import json
 from pymongo import MongoClient
 from bson.objectid import ObjectId
 from werkzeug.utils import secure_filename
-import http.client
 
 from application.api.user.tasks import ingest
 
@@ -16,6 +14,8 @@ mongo = MongoClient(settings.MONGO_URI)
 db = mongo["docsgpt"]
 conversations_collection = db["conversations"]
 vectors_collection = db["vectors"]
+prompts_collection = db["prompts"]
+feedback_collection = db["feedback"]
 user = Blueprint('user', __name__)
 
 current_dir = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
@@ -53,6 +53,15 @@ def get_single_conversation():
     conversation = conversations_collection.find_one({"_id": ObjectId(conversation_id)})
     return jsonify(conversation['queries'])
 
+@user.route("/api/update_conversation_name", methods=["POST"])
+def update_conversation_name():
+    # update data for a conversation
+    data = request.get_json()
+    id = data["id"]
+    name = data["name"]
+    conversations_collection.update_one({"_id": ObjectId(id)},{"$set":{"name":name}})
+    return {"status": "ok"}
+
 
 @user.route("/api/feedback", methods=["POST"])
 def api_feedback():
@@ -61,20 +70,29 @@ def api_feedback():
     answer = data["answer"]
     feedback = data["feedback"]
 
-    print("-" * 5)
-    print("Question: " + question)
-    print("Answer: " + answer)
-    print("Feedback: " + feedback)
-    print("-" * 5)
-    response = requests.post(
-        url="https://86x89umx77.execute-api.eu-west-2.amazonaws.com/docsgpt-feedback",
-        headers={
-            "Content-Type": "application/json; charset=utf-8",
-        },
-        data=json.dumps({"answer": answer, "question": question, "feedback": feedback}),
-    )
-    return {"status": http.client.responses.get(response.status_code, "ok")}
 
+    feedback_collection.insert_one(
+        {
+            "question": question,
+            "answer": answer,
+            "feedback": feedback,
+        }
+    )
+    return {"status": "ok"}
+
+@user.route("/api/delete_by_ids", methods=["get"])
+def delete_by_ids():
+    """Delete by ID. These are the IDs in the vectorstore"""
+
+    ids = request.args.get("path")
+    if not ids:
+        return {"status": "error"}
+
+    if settings.VECTOR_STORE == "faiss":
+        result = vectors_collection.delete_index(ids=ids)
+        if result:
+            return {"status": "ok"}
+    return {"status": "error"}
 
 @user.route("/api/delete_old", methods=["get"])
 def delete_old():
@@ -84,13 +102,14 @@ def delete_old():
     path = request.args.get("path")
     dirs = path.split("/")
     dirs_clean = []
-    for i in range(1, len(dirs)):
+    for i in range(0, len(dirs)):
         dirs_clean.append(secure_filename(dirs[i]))
     # check that path strats with indexes or vectors
-    if dirs[0] not in ["indexes", "vectors"]:
+
+    if dirs_clean[0] not in ["indexes", "vectors"]:
         return {"status": "error"}
-    path_clean = "/".join(dirs)
-    vectors_collection.delete_one({"location": path})
+    path_clean = "/".join(dirs_clean)
+    vectors_collection.delete_one({"name": dirs_clean[-1], 'user': dirs_clean[-2]})
     if settings.VECTOR_STORE == "faiss":
         try:
             shutil.rmtree(os.path.join(current_dir, path_clean))
@@ -130,7 +149,9 @@ def upload_file():
             os.makedirs(save_dir)
 
         file.save(os.path.join(save_dir, filename))
-        task = ingest.delay(settings.UPLOAD_FOLDER, [".rst", ".md", ".pdf", ".txt"], job_name, filename, user)
+        task = ingest.delay(settings.UPLOAD_FOLDER, [".rst", ".md", ".pdf", ".txt", ".docx", 
+        ".csv", ".epub", ".html", ".mdx"],
+         job_name, filename, user)
         # task id
         task_id = task.id
         return {"status": "ok", "task_id": task_id}
@@ -163,7 +184,7 @@ def combined_json():
             "date": "default",
             "docLink": "default",
             "model": settings.EMBEDDINGS_NAME,
-            "location": "local",
+            "location": "remote",
         }
     ]
     # structure: name, language, version, description, fullName, date, docLink
@@ -220,6 +241,80 @@ def check_docs():
 
         return {"status": "loaded"}
 
+@user.route("/api/create_prompt", methods=["POST"])
+def create_prompt():
+    data = request.get_json()
+    content = data["content"]
+    name = data["name"]
+    if name == "":
+        return {"status": "error"}
+    user = "local"
+    resp = prompts_collection.insert_one(
+        {
+            "name": name,
+            "content": content,
+            "user": user,
+        }
+    )
+    new_id = str(resp.inserted_id)
+    return {"id": new_id}
+
+@user.route("/api/get_prompts", methods=["GET"])
+def get_prompts():
+    user = "local"
+    prompts = prompts_collection.find({"user": user})
+    list_prompts = []
+    list_prompts.append({"id": "default", "name": "default", "type": "public"})
+    list_prompts.append({"id": "creative", "name": "creative", "type": "public"})
+    list_prompts.append({"id": "strict", "name": "strict", "type": "public"})
+    for prompt in prompts:
+        list_prompts.append({"id": str(prompt["_id"]), "name": prompt["name"], "type": "private"})
+
+    return jsonify(list_prompts)
+
+@user.route("/api/get_single_prompt", methods=["GET"])
+def get_single_prompt():
+    prompt_id = request.args.get("id")
+    if prompt_id == 'default':
+        with open(os.path.join(current_dir, "prompts", "chat_combine_default.txt"), "r") as f:
+            chat_combine_template = f.read()
+        return jsonify({"content": chat_combine_template})
+    elif prompt_id == 'creative':
+        with open(os.path.join(current_dir, "prompts", "chat_combine_creative.txt"), "r") as f:
+            chat_reduce_creative = f.read()
+        return jsonify({"content": chat_reduce_creative})
+    elif prompt_id == 'strict':
+        with open(os.path.join(current_dir, "prompts", "chat_combine_strict.txt"), "r") as f:
+            chat_reduce_strict = f.read()   
+        return jsonify({"content": chat_reduce_strict})
+
+
+    prompt = prompts_collection.find_one({"_id": ObjectId(prompt_id)})
+    return jsonify({"content": prompt["content"]})
+
+@user.route("/api/delete_prompt", methods=["POST"])
+def delete_prompt():
+    data = request.get_json()
+    id = data["id"]
+    prompts_collection.delete_one(
+        {
+            "_id": ObjectId(id),
+        }
+    )
+    return {"status": "ok"}
+
+@user.route("/api/update_prompt", methods=["POST"])
+def update_prompt_name():
+    data = request.get_json()
+    id = data["id"]
+    name = data["name"]
+    content = data["content"]
+    # check if name is null
+    if name == "":
+        return {"status": "error"}
+    prompts_collection.update_one({"_id": ObjectId(id)},{"$set":{"name":name, "content": content}})
+    return {"status": "ok"}
+
 
 
 

application/app.py

@@ -1,68 +1,44 @@
 import platform
-
-
 import dotenv
 from application.celery import celery
 from flask import Flask, request, redirect
-
-
 from application.core.settings import settings
 from application.api.user.routes import user
 from application.api.answer.routes import answer
 from application.api.internal.routes import internal
 
-
-
-# Redirect PosixPath to WindowsPath on Windows
-
 if platform.system() == "Windows":
     import pathlib
-
-    temp = pathlib.PosixPath
     pathlib.PosixPath = pathlib.WindowsPath
 
-# loading the .env file
 dotenv.load_dotenv()
 
-
-
 app = Flask(__name__)
 app.register_blueprint(user)
 app.register_blueprint(answer)
 app.register_blueprint(internal)
-app.config["UPLOAD_FOLDER"] = UPLOAD_FOLDER = "inputs"
-app.config["CELERY_BROKER_URL"] = settings.CELERY_BROKER_URL
-app.config["CELERY_RESULT_BACKEND"] = settings.CELERY_RESULT_BACKEND
-app.config["MONGO_URI"] = settings.MONGO_URI
+app.config.update(
+    UPLOAD_FOLDER="inputs",
+    CELERY_BROKER_URL=settings.CELERY_BROKER_URL,
+    CELERY_RESULT_BACKEND=settings.CELERY_RESULT_BACKEND,
+    MONGO_URI=settings.MONGO_URI
+)
 celery.config_from_object("application.celeryconfig")
 
-
-
 @app.route("/")
 def home():
-    """
-    The frontend source code lives in the /frontend directory of the repository.
-    """
     if request.remote_addr in ('0.0.0.0', '127.0.0.1', 'localhost', '172.18.0.1'):
-        # If users locally try to access DocsGPT running in Docker,
-        # they will be redirected to the Frontend application.
         return redirect('http://localhost:5173')
     else:
-        # Handle other cases or render the default page
         return 'Welcome to DocsGPT Backend!'
 
-
-
-
-# handling CORS
 @app.after_request
 def after_request(response):
     response.headers.add("Access-Control-Allow-Origin", "*")
     response.headers.add("Access-Control-Allow-Headers", "Content-Type,Authorization")
     response.headers.add("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS")
-    # response.headers.add("Access-Control-Allow-Credentials", "true")
     return response
 
-
 if __name__ == "__main__":
     app.run(debug=True, port=7091)
+

application/core/settings.py

@@ -19,7 +19,7 @@ class Settings(BaseSettings):
     API_URL: str = "http://localhost:7091"  # backend url for celery worker
 
     API_KEY: str = None  # LLM api key
-    EMBEDDINGS_KEY: str = None  # api key for embeddings (if using openai, just copy API_KEY
+    EMBEDDINGS_KEY: str = None  # api key for embeddings (if using openai, just copy API_KEY)
     OPENAI_API_BASE: str = None  # azure openai api base url
     OPENAI_API_VERSION: str = None  # azure openai api version
     AZURE_DEPLOYMENT_NAME: str = None  # azure deployment name for answering
@@ -32,6 +32,12 @@ class Settings(BaseSettings):
     ELASTIC_URL: str = None # url for elasticsearch
     ELASTIC_INDEX: str = "docsgpt" # index name for elasticsearch
 
+    # SageMaker config
+    SAGEMAKER_ENDPOINT: str = None # SageMaker endpoint name
+    SAGEMAKER_REGION: str = None # SageMaker region name
+    SAGEMAKER_ACCESS_KEY: str = None # SageMaker access key
+    SAGEMAKER_SECRET_KEY: str = None # SageMaker secret key
+
 
 path = Path(__file__).parent.parent.absolute()
 settings = Settings(_env_file=path.joinpath(".env"), _env_file_encoding="utf-8")

application/llm/anthropic.py

@@ -0,0 +1,40 @@
+from application.llm.base import BaseLLM
+from application.core.settings import settings
+
+class AnthropicLLM(BaseLLM):
+
+    def __init__(self, api_key=None):
+        from anthropic import Anthropic, HUMAN_PROMPT, AI_PROMPT
+        self.api_key = api_key or settings.ANTHROPIC_API_KEY  # If not provided, use a default from settings
+        self.anthropic = Anthropic(api_key=self.api_key)
+        self.HUMAN_PROMPT = HUMAN_PROMPT
+        self.AI_PROMPT = AI_PROMPT
+
+    def gen(self, model, messages, engine=None, max_tokens=300, stream=False, **kwargs):
+        context = messages[0]['content']
+        user_question = messages[-1]['content']
+        prompt = f"### Context \n {context} \n ### Question \n {user_question}"
+        if stream:
+            return self.gen_stream(model, prompt, max_tokens, **kwargs)
+
+        completion = self.anthropic.completions.create(
+            model=model,
+            max_tokens_to_sample=max_tokens,
+            stream=stream,
+            prompt=f"{self.HUMAN_PROMPT} {prompt}{self.AI_PROMPT}",
+        )
+        return completion.completion
+
+    def gen_stream(self, model, messages, engine=None, max_tokens=300, **kwargs):
+        context = messages[0]['content']
+        user_question = messages[-1]['content']
+        prompt = f"### Context \n {context} \n ### Question \n {user_question}"
+        stream_response = self.anthropic.completions.create(
+            model=model,
+            prompt=f"{self.HUMAN_PROMPT} {prompt}{self.AI_PROMPT}",
+            max_tokens_to_sample=max_tokens,
+            stream=True,
+        )
+
+        for completion in stream_response:
+            yield completion.completion

application/llm/huggingface.py

@@ -2,13 +2,26 @@ from application.llm.base import BaseLLM
 
 class HuggingFaceLLM(BaseLLM):
 
-    def __init__(self, api_key, llm_name='Arc53/DocsGPT-7B'):
+    def __init__(self, api_key, llm_name='Arc53/DocsGPT-7B',q=False):
         global hf
-
+        
         from langchain.llms import HuggingFacePipeline
-        from transformers import AutoModelForCausalLM, AutoTokenizer, pipeline
-        tokenizer = AutoTokenizer.from_pretrained(llm_name)
-        model = AutoModelForCausalLM.from_pretrained(llm_name)
+        if q:
+            import torch
+            from transformers import AutoModelForCausalLM, AutoTokenizer, pipeline, BitsAndBytesConfig
+            tokenizer = AutoTokenizer.from_pretrained(llm_name)
+            bnb_config = BitsAndBytesConfig(
+                            load_in_4bit=True,
+                            bnb_4bit_use_double_quant=True,
+                            bnb_4bit_quant_type="nf4",
+                            bnb_4bit_compute_dtype=torch.bfloat16
+                        )
+            model = AutoModelForCausalLM.from_pretrained(llm_name,quantization_config=bnb_config)
+        else:
+            from transformers import AutoModelForCausalLM, AutoTokenizer, pipeline
+            tokenizer = AutoTokenizer.from_pretrained(llm_name)
+            model = AutoModelForCausalLM.from_pretrained(llm_name)
+        
         pipe = pipeline(
             "text-generation", model=model,
             tokenizer=tokenizer, max_new_tokens=2000,

application/llm/llm_creator.py

@@ -2,6 +2,7 @@ from application.llm.openai import OpenAILLM, AzureOpenAILLM
 from application.llm.sagemaker import SagemakerAPILLM
 from application.llm.huggingface import HuggingFaceLLM
 from application.llm.llama_cpp import LlamaCpp
+from application.llm.anthropic import AnthropicLLM
 
 
 
@@ -11,7 +12,8 @@ class LLMCreator:
         'azure_openai': AzureOpenAILLM,
         'sagemaker': SagemakerAPILLM,
         'huggingface': HuggingFaceLLM,
-        'llama.cpp': LlamaCpp
+        'llama.cpp': LlamaCpp,
+        'anthropic': AnthropicLLM
     }
 
     @classmethod

application/llm/sagemaker.py

@@ -1,27 +1,139 @@
 from application.llm.base import BaseLLM
 from application.core.settings import settings
-import requests
 import json
+import io
+
+
+
+class LineIterator:
+    """
+    A helper class for parsing the byte stream input. 
+    
+    The output of the model will be in the following format:
+    ```
+    b'{"outputs": [" a"]}\n'
+    b'{"outputs": [" challenging"]}\n'
+    b'{"outputs": [" problem"]}\n'
+    ...
+    ```
+    
+    While usually each PayloadPart event from the event stream will contain a byte array 
+    with a full json, this is not guaranteed and some of the json objects may be split across
+    PayloadPart events. For example:
+    ```
+    {'PayloadPart': {'Bytes': b'{"outputs": '}}
+    {'PayloadPart': {'Bytes': b'[" problem"]}\n'}}
+    ```
+    
+    This class accounts for this by concatenating bytes written via the 'write' function
+    and then exposing a method which will return lines (ending with a '\n' character) within
+    the buffer via the 'scan_lines' function. It maintains the position of the last read 
+    position to ensure that previous bytes are not exposed again. 
+    """
+    
+    def __init__(self, stream):
+        self.byte_iterator = iter(stream)
+        self.buffer = io.BytesIO()
+        self.read_pos = 0
+
+    def __iter__(self):
+        return self
+
+    def __next__(self):
+        while True:
+            self.buffer.seek(self.read_pos)
+            line = self.buffer.readline()
+            if line and line[-1] == ord('\n'):
+                self.read_pos += len(line)
+                return line[:-1]
+            try:
+                chunk = next(self.byte_iterator)
+            except StopIteration:
+                if self.read_pos < self.buffer.getbuffer().nbytes:
+                    continue
+                raise
+            if 'PayloadPart' not in chunk:
+                print('Unknown event type:' + chunk)
+                continue
+            self.buffer.seek(0, io.SEEK_END)
+            self.buffer.write(chunk['PayloadPart']['Bytes'])
 
 class SagemakerAPILLM(BaseLLM):
 
     def __init__(self, *args, **kwargs):
-        self.url = settings.SAGEMAKER_API_URL
+        import boto3
+        runtime = boto3.client(
+            'runtime.sagemaker',
+            aws_access_key_id='xxx',
+            aws_secret_access_key='xxx',
+            region_name='us-west-2'
+        )
+
+        
+        self.endpoint =  settings.SAGEMAKER_ENDPOINT
+        self.runtime = runtime
+
 
     def gen(self, model, engine, messages, stream=False, **kwargs):
         context = messages[0]['content']
         user_question = messages[-1]['content']
         prompt = f"### Instruction \n {user_question} \n ### Context \n {context} \n ### Answer \n"
+    
 
-        response = requests.post(
-                    url=self.url,
-                    headers={
-                        "Content-Type": "application/json; charset=utf-8",
-                    },
-                    data=json.dumps({"input": prompt})
-        )
+        # Construct payload for endpoint
+        payload = {
+            "inputs": prompt,
+            "stream": False,
+            "parameters": {
+                "do_sample": True,
+                "temperature": 0.1,
+                "max_new_tokens": 30,
+                "repetition_penalty": 1.03,
+                "stop": ["</s>", "###"]
+            }
+        }
+        body_bytes = json.dumps(payload).encode('utf-8')
 
-        return response.json()['answer']
+        # Invoke the endpoint
+        response = self.runtime.invoke_endpoint(EndpointName=self.endpoint,
+                                        ContentType='application/json',
+                                        Body=body_bytes)
+        result = json.loads(response['Body'].read().decode())
+        import sys
+        print(result[0]['generated_text'], file=sys.stderr)
+        return result[0]['generated_text'][len(prompt):]
 
     def gen_stream(self, model, engine, messages, stream=True, **kwargs):
-        raise NotImplementedError("Sagemaker does not support streaming")
+        context = messages[0]['content']
+        user_question = messages[-1]['content']
+        prompt = f"### Instruction \n {user_question} \n ### Context \n {context} \n ### Answer \n"
+    
+
+        # Construct payload for endpoint
+        payload = {
+            "inputs": prompt,
+            "stream": True,
+            "parameters": {
+                "do_sample": True,
+                "temperature": 0.1,
+                "max_new_tokens": 512,
+                "repetition_penalty": 1.03,
+                "stop": ["</s>", "###"]
+            }
+        }
+        body_bytes = json.dumps(payload).encode('utf-8')
+
+        # Invoke the endpoint
+        response = self.runtime.invoke_endpoint_with_response_stream(EndpointName=self.endpoint,
+                                        ContentType='application/json',
+                                        Body=body_bytes)
+        #result = json.loads(response['Body'].read().decode())
+        event_stream = response['Body']
+        start_json = b'{'
+        for line in LineIterator(event_stream):
+            if line != b'' and start_json in line:
+                #print(line)
+                data = json.loads(line[line.find(start_json):].decode('utf-8'))
+                if data['token']['text'] not in ["</s>", "###"]:
+                    print(data['token']['text'],end='')
+                    yield data['token']['text']

application/package.json

@@ -1,5 +0,0 @@
-{
-  "devDependencies": {
-    "tailwindcss": "^3.2.4"
-  }
-}

application/parser/file/html_parser.py

@@ -57,7 +57,7 @@ class HTMLParser(BaseParser):
         title_indexes = [i for i, isd_el in enumerate(isd) if isd_el['type'] == 'Title']
 
         # Creating 'Chunks' - List of lists of strings 
-        # each list starting with with isd_el['type'] = 'Title' and all the data till the next 'Title'
+        # each list starting with isd_el['type'] = 'Title' and all the data till the next 'Title'
         # Each Chunk can be thought of as an individual set of data, which can be sent to the model
         # Where Each Title is grouped together with the data under it
 

application/parser/file/openapi3_parser.py

@@ -0,0 +1,51 @@
+from urllib.parse import urlparse
+
+from openapi_parser import parse
+
+try:
+    from application.parser.file.base_parser import BaseParser
+except ModuleNotFoundError:
+    from base_parser import BaseParser
+
+
+class OpenAPI3Parser(BaseParser):
+    def init_parser(self) -> None:
+        return super().init_parser()
+
+    def get_base_urls(self, urls):
+        base_urls = []
+        for i in urls:
+            parsed_url = urlparse(i)
+            base_url = parsed_url.scheme + "://" + parsed_url.netloc
+            if base_url not in base_urls:
+                base_urls.append(base_url)
+        return base_urls
+
+    def get_info_from_paths(self, path):
+        info = ""
+        if path.operations:
+            for operation in path.operations:
+                info += (
+                    f"\n{operation.method.value}="
+                    f"{operation.responses[0].description}"
+                )
+        return info
+
+    def parse_file(self, file_path):
+        data = parse(file_path)
+        results = ""
+        base_urls = self.get_base_urls(link.url for link in data.servers)
+        base_urls = ",".join([base_url for base_url in base_urls])
+        results += f"Base URL:{base_urls}\n"
+        i = 1
+        for path in data.paths:
+            info = self.get_info_from_paths(path)
+            results += (
+                f"Path{i}: {path.url}\n"
+                f"description: {path.description}\n"
+                f"parameters: {path.parameters}\nmethods: {info}\n"
+            )
+            i += 1
+        with open("results.txt", "w") as f:
+            f.write(results)
+        return results

application/prompts/chat_combine_default.txt

@@ -0,0 +1,9 @@
+You are a helpful AI assistant, DocsGPT, specializing in document assistance, designed to offer detailed and informative responses. 
+If appropriate, your answers can include code examples, formatted as follows:
+```(language)
+(code)
+```
+You effectively utilize chat history, ensuring relevant and tailored responses. 
+If a question doesn't align with your context, you provide friendly and helpful replies.
+----------------
+{summaries}

application/prompts/chat_combine_strict.txt

@@ -0,0 +1,13 @@
+You are an AI Assistant, DocsGPT, adept at offering document assistance. 
+Your expertise lies in providing answer on top of provided context. 
+You can leverage the chat history if needed.
+Answer the question based on the context below. 
+Keep the answer concise. Respond "Irrelevant context" if not sure about the answer.
+If question is not related to the context, respond "Irrelevant context".
+When using code examples, use the following format:
+```(language)
+(code)
+```
+ ----------------
+ Context:
+ {summaries}

application/prompts/combine_prompt.txt

@@ -1,25 +0,0 @@
-You are a DocsGPT, friendly and helpful AI assistant by Arc53 that provides help with documents. You give thorough answers with code examples if possible.
-
-QUESTION: How to merge tables in pandas?
-=========
-Content: pandas provides various facilities for easily combining together Series or DataFrame with various kinds of set logic for the indexes and relational algebra functionality in the case of join / merge-type operations.
-Source: 28-pl
-Content: pandas provides a single function, merge(), as the entry point for all standard database join operations between DataFrame or named Series objects: \n\npandas.merge(left, right, how='inner', on=None, left_on=None, right_on=None, left_index=False, right_index=False, sort=False, suffixes=('_x', '_y'), copy=True, indicator=False, validate=None)
-Source: 30-pl
-=========
-FINAL ANSWER: To merge two tables in pandas, you can use the pd.merge() function. The basic syntax is: \n\npd.merge(left, right, on, how) \n\nwhere left and right are the two tables to merge, on is the column to merge on, and how is the type of merge to perform. \n\nFor example, to merge the two tables df1 and df2 on the column 'id', you can use: \n\npd.merge(df1, df2, on='id', how='inner')
-SOURCES: 28-pl 30-pl
-
-QUESTION: How are you?
-=========
-CONTENT:
-SOURCE:
-=========
-FINAL ANSWER: I am fine, thank you. How are you?
-SOURCES:
-
-QUESTION: {{ question }}
-=========
-{{ summaries }}
-=========
-FINAL ANSWER:

application/prompts/combine_prompt_hist.txt

@@ -1,33 +0,0 @@
-You are a DocsGPT, friendly and helpful AI assistant by Arc53 that provides help with documents. You give thorough answers with code examples if possible.
-
-QUESTION: How to merge tables in pandas?
-=========
-Content: pandas provides various facilities for easily combining together Series or DataFrame with various kinds of set logic for the indexes and relational algebra functionality in the case of join / merge-type operations.
-Source: 28-pl
-Content: pandas provides a single function, merge(), as the entry point for all standard database join operations between DataFrame or named Series objects: \n\npandas.merge(left, right, how='inner', on=None, left_on=None, right_on=None, left_index=False, right_index=False, sort=False, suffixes=('_x', '_y'), copy=True, indicator=False, validate=None)
-Source: 30-pl
-=========
-FINAL ANSWER: To merge two tables in pandas, you can use the pd.merge() function. The basic syntax is: \n\npd.merge(left, right, on, how) \n\nwhere left and right are the two tables to merge, on is the column to merge on, and how is the type of merge to perform. \n\nFor example, to merge the two tables df1 and df2 on the column 'id', you can use: \n\npd.merge(df1, df2, on='id', how='inner')
-SOURCES: 28-pl 30-pl
-
-QUESTION: How are you?
-=========
-CONTENT:
-SOURCE:
-=========
-FINAL ANSWER: I am fine, thank you. How are you?
-SOURCES:
-
-QUESTION: {{ historyquestion }}
-=========
-CONTENT:
-SOURCE:
-=========
-FINAL ANSWER: {{ historyanswer }}
-SOURCES:
-
-QUESTION: {{ question }}
-=========
-{{ summaries }}
-=========
-FINAL ANSWER:

application/prompts/question_prompt.txt

@@ -1,4 +0,0 @@
-Use the following portion of a long document to see if any of the text is relevant to answer the question.
-{{ context }}
-Question: {{ question }}
-Provide all relevant text to the question verbatim. Summarize if needed. If nothing relevant return "-".

application/requirements.txt

@@ -1,9 +1,10 @@
 aiodns==3.0.0
-aiohttp==3.8.5
+aiohttp==3.8.6
 aiohttp-retry==2.8.3
 aiosignal==1.3.1
 aleph-alpha-client==2.16.1
 amqp==5.1.1
+anthropic==0.5.0
 async-timeout==4.0.2
 attrs==22.2.0
 billiard==3.6.4.0
@@ -16,9 +17,10 @@ click==8.1.3
 click-didyoumean==0.3.0
 click-plugins==1.1.1
 click-repl==0.2.0
-cryptography==41.0.3
+cryptography==41.0.4
 dataclasses-json==0.5.7
 decorator==5.1.1
+docx2txt==0.8
 dill==0.3.6
 dnspython==2.3.0
 ecdsa==0.18.0
@@ -41,7 +43,7 @@ Jinja2==3.1.2
 jmespath==1.0.1
 joblib==1.2.0
 kombu==5.2.4
-langchain==0.0.263
+langchain==0.0.312
 loguru==0.6.0
 lxml==4.9.2
 MarkupSafe==2.1.2
@@ -57,9 +59,10 @@ nltk==3.8.1
 numcodecs==0.11.0
 numpy==1.24.2
 openai==0.27.8
+openapi3-parser==1.1.14
 packaging==23.0
 pathos==0.3.0
-Pillow==9.4.0
+Pillow==10.0.1
 pox==0.3.2
 ppft==1.7.6.6
 prompt-toolkit==3.0.38
@@ -100,7 +103,8 @@ transformers==4.30.0
 typer==0.7.0
 typing-inspect==0.8.0
 typing_extensions==4.5.0
-urllib3==1.26.14
+urllib3==1.26.18
 vine==5.0.0
 wcwidth==0.2.6
 yarl==1.8.2
+sentence-transformers==2.2.2

application/tailwind.config.js

@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./templates/**/*.html", "./static/src/**/*.js"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}

application/vectorstore/elasticsearch.py

@@ -114,7 +114,7 @@ class ElasticsearchStore(BaseVectorStore):
             "rank": {"rrf": {}},
         }
         resp = self.docsearch.search(index=self.index_name, query=full_query['query'], size=k, knn=full_query['knn'])
-        # create Documnets objects from the results page_content ['_source']['text'], metadata ['_source']['metadata']
+        # create Documents objects from the results page_content ['_source']['text'], metadata ['_source']['metadata']
         doc_list = []
         for hit in resp['hits']['hits']:
             

application/vectorstore/faiss.py

@@ -1,5 +1,5 @@
+from langchain.vectorstores import FAISS
 from application.vectorstore.base import BaseVectorStore
-from langchain import FAISS
 from application.core.settings import settings
 
 class FaissStore(BaseVectorStore):
@@ -7,20 +7,40 @@ class FaissStore(BaseVectorStore):
     def __init__(self, path, embeddings_key, docs_init=None):
         super().__init__()
         self.path = path
+        embeddings = self._get_embeddings(settings.EMBEDDINGS_NAME, embeddings_key)
         if docs_init:
             self.docsearch = FAISS.from_documents(
-                docs_init, self._get_embeddings(settings.EMBEDDINGS_NAME, embeddings_key)
+                docs_init, embeddings
             )
         else:
             self.docsearch = FAISS.load_local(
-                self.path, self._get_embeddings(settings.EMBEDDINGS_NAME, settings.EMBEDDINGS_KEY)
+                self.path, embeddings
             )
+        self.assert_embedding_dimensions(embeddings)
 
     def search(self, *args, **kwargs):
         return self.docsearch.similarity_search(*args, **kwargs)
 
     def add_texts(self, *args, **kwargs):
         return self.docsearch.add_texts(*args, **kwargs)
-    
+
     def save_local(self, *args, **kwargs):
         return self.docsearch.save_local(*args, **kwargs)
+
+    def delete_index(self, *args, **kwargs):
+        return self.docsearch.delete(*args, **kwargs)
+
+    def assert_embedding_dimensions(self, embeddings):
+        """
+        Check that the word embedding dimension of the docsearch index matches
+        the dimension of the word embeddings used 
+        """
+        if settings.EMBEDDINGS_NAME == "huggingface_sentence-transformers/all-mpnet-base-v2":
+            try:
+                word_embedding_dimension = embeddings.client[1].word_embedding_dimension
+            except AttributeError as e:
+                raise AttributeError("word_embedding_dimension not found in embeddings.client[1]") from e
+            docsearch_index_dimension = self.docsearch.index.d
+            if word_embedding_dimension != docsearch_index_dimension:
+                raise ValueError(f"word_embedding_dimension ({word_embedding_dimension}) " +
+                                 f"!= docsearch_index_word_embedding_dimension ({docsearch_index_dimension})")

application/worker.py

@@ -20,18 +20,34 @@ except FileExistsError:
     pass
 
 
+# Define a function to extract metadata from a given filename.
 def metadata_from_filename(title):
-    store = title.split('/')
-    store = store[1] + '/' + store[2]
+    store = '/'.join(title.split('/')[1:3])
     return {'title': title, 'store': store}
 
 
+# Define a function to generate a random string of a given length.
 def generate_random_string(length):
     return ''.join([string.ascii_letters[i % 52] for i in range(length)])
 
 current_dir = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
 
+# Define the main function for ingesting and processing documents.
 def ingest_worker(self, directory, formats, name_job, filename, user):
+    """
+    Ingest and process documents.
+
+    Args:
+        self: Reference to the instance of the task.
+        directory (str): Specifies the directory for ingesting ('inputs' or 'temp').
+        formats (list of str): List of file extensions to consider for ingestion (e.g., [".rst", ".md"]).
+        name_job (str): Name of the job for this ingestion task.
+        filename (str): Name of the file to be ingested.
+        user (str): Identifier for the user initiating the ingestion.
+
+    Returns:
+        dict: Information about the completed ingestion task, including input parameters and a "limited" flag.
+    """
     # directory = 'inputs' or 'temp'
     # formats = [".rst", ".md"]
     input_files = None

codecov.yml

@@ -1,2 +1,2 @@
 ignore:
-  - "*/tests/*”
+  - "*/tests/*"

docker-compose-mock.yaml

@@ -0,0 +1,22 @@
+version: "3.9"
+
+services:
+  frontend:
+    build: ./frontend
+    environment:
+      - VITE_API_HOST=http://localhost:7091
+      - VITE_API_STREAMING=$VITE_API_STREAMING
+    ports:
+      - "5173:5173"
+    depends_on:
+      - mock-backend
+
+  mock-backend:
+    build: ./mock-backend
+    ports:
+      - "7091:7091"
+
+  redis:
+    image: redis:6-alpine
+    ports:
+      - 6379:6379

docker-compose.yaml

@@ -14,12 +14,12 @@ services:
   backend:
     build: ./application
     environment:
-      - API_KEY=$OPENAI_API_KEY
-      - EMBEDDINGS_KEY=$OPENAI_API_KEY
+      - API_KEY=$API_KEY
+      - EMBEDDINGS_KEY=$API_KEY
+      - LLM_NAME=$LLM_NAME
       - CELERY_BROKER_URL=redis://redis:6379/0
       - CELERY_RESULT_BACKEND=redis://redis:6379/1
       - MONGO_URI=mongodb://mongo:27017/docsgpt
-      - SELF_HOSTED_MODEL=$SELF_HOSTED_MODEL
     ports:
       - "7091:7091"
     volumes:
@@ -34,8 +34,9 @@ services:
     build: ./application
     command: celery -A application.app.celery worker -l INFO
     environment:
-      - API_KEY=$OPENAI_API_KEY
-      - EMBEDDINGS_KEY=$OPENAI_API_KEY
+      - API_KEY=$API_KEY
+      - EMBEDDINGS_KEY=$API_KEY
+      - LLM_NAME=$LLM_NAME
       - CELERY_BROKER_URL=redis://redis:6379/0
       - CELERY_RESULT_BACKEND=redis://redis:6379/1
       - MONGO_URI=mongodb://mongo:27017/docsgpt

docs/README.md

@@ -1 +1,51 @@
-# nextra-docsgpt
+# nextra-docsgpt
+
+## Setting Up Docs Folder of DocsGPT Locally
+
+### 1. Clone the DocsGPT repository:
+
+```bash
+git clone https://github.com/arc53/DocsGPT.git
+```
+### 2. Navigate to the docs folder:
+
+```bash
+cd DocsGPT/docs
+```
+
+The docs folder contains the markdown files that make up the documentation. The majority of the files are in the pages directory. Some notable files in this folder include:
+
+`index.mdx`: The main documentation file.
+`_app.js`: This file is used to customize the default Next.js application shell.
+`theme.config.jsx`: This file is for configuring the Nextra theme for the documentation.
+
+### 3. Verify that you have Node.js and npm installed in your system. You can check by running:
+
+```bash
+node --version
+npm --version
+```
+
+### 4. If not installed, download Node.js and npm from the respective official websites.
+
+### 5. Once you have Node.js and npm running, proceed to install yarn - another package manager that helps to manage project dependencies:
+
+```bash
+npm install --global yarn
+```
+
+### 6. Install the project dependencies using yarn:
+
+```bash
+yarn install
+```
+
+### 7. After the successful installation of the project dependencies, start the local server:
+
+```bash
+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.
+
+- **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.

docs/package.json

@@ -1,4 +1,10 @@
 {
+"scripts":{
+      "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+    "license": "MIT",
   "dependencies": {
     "@vercel/analytics": "^1.0.2",
     "docsgpt": "^0.2.4",
@@ -8,4 +14,4 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
-}
+}

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

@@ -1,54 +1,47 @@
 # Self-hosting DocsGPT on Amazon Lightsail
 
-Here's a step-by-step guide on how to setup an Amazon Lightsail instance to host DocsGPT.
+Here's a step-by-step guide on how to set up an Amazon Lightsail instance to host DocsGPT.
 
 ## Configuring your instance
 
-(If you know how to create a Lightsail instance, you can skip to the recommended configuration part by clicking here)
+(If you know how to create a Lightsail instance, you can skip to the recommended configuration part by clicking [here](#connecting-to-your-newly-created-instance)).
 
-### 1. Create an account or login to https://lightsail.aws.amazon.com
+### 1. Create an AWS Account: 
+If you haven't already, create or log in to your AWS account at https://lightsail.aws.amazon.com.
 
-### 2. Click on "Create instance"
+### 2. Create an Instance: 
 
-### 3. Create your instance
+a. Click "Create Instance."
 
-The first step is to select the "Instance location". In most cases there's no need to switch locations as the default one will work well.
+b. Select the "Instance location." In most cases, the default location works fine.
 
-After that it is time to pick your Instance Image. We recommend using "Linux/Unix" as the image and "Ubuntu 20.04 LTS" for Operating System.
+c. Choose "Linux/Unix" as the image and "Ubuntu 20.04 LTS" as the Operating System.
 
-As for instance plan, it'll vary depending on your unique demands, but a "1 GB, 1vCPU, 40GB SSD and 2TB transfer" setup should cover most scenarios.
+d. Configure the instance plan based on your requirements. A "1 GB, 1vCPU, 40GB SSD, and 2TB transfer" setup is recommended for most scenarios.
 
-Lastly, Identify your instance by giving it a unique name and then hit "Create instance".
+e. Give your instance a unique name and click "Create Instance."
 
-PS: Once you create your instance, it'll likely take a few minutes for the setup to be completed.
+PS: It may take a few minutes for the instance setup to complete.
 
-#### The recommended configuration is as follows:
+### Connecting to Your newly created Instance
 
-- Ubuntu 20.04 LTS
-- 1GB RAM
-- 1vCPU
-- 40GB SSD Hard Drive
-- 2TB transfer
+Your instance will be ready a few minutes after creation. To access it, open the instance and click "Connect using SSH."
 
-### Connecting to your the newly created instance
+#### Clone the DocsGPT Repository
 
-Your instance will be ready for use a few minutes after being created. To access, just open it up and click on "Connect using SSH".
-
-#### Clone the repository
-
-A terminal window will pop up, and the first step will be to clone DocsGPT git repository.
+A terminal window will pop up, and the first step will be to clone the DocsGPT Git repository:
 
 `git clone https://github.com/arc53/DocsGPT.git`
 
 #### Download the package information
 
-Once it has finished cloning the repository, it is time to download the package information from all sources. To do so simply enter the following command:
+Once it has finished cloning the repository, it is time to download the package information from all sources. To do so, simply enter the following command:
 
 `sudo apt update`
 
 #### Install Docker and Docker Compose
 
-DocsGPT backend and worker use python, Frontend is written on React and the whole application is containerized using Docker. To install Docker and Docker Compose, enter the following commands:
+DocsGPT backend and worker use Python, Frontend is written on React and the whole application is containerized using Docker. To install Docker and Docker Compose, enter the following commands:
 
 `sudo apt install docker.io`
 
@@ -56,19 +49,19 @@ And now install docker-compose:
 
 `sudo apt install docker-compose`
 
-#### Access the DocsGPT folder
+#### Access the DocsGPT Folder
 
-Enter the following command to access the folder in which DocsGPT docker-compose file is.
+Enter the following command to access the folder in which the DocsGPT docker-compose file is present.
 
 `cd DocsGPT/`
 
-#### Prepare the environment
+#### Prepare the Environment
 
-Inside the DocsGPT folder create a .env file and copy the contents of .env_sample into it.
+Inside the DocsGPT folder create a `.env` file and copy the contents of `.env_sample` into it.
 
 `nano .env`
 
-Make sure your .env file looks like this:
+Make sure your `.env` file looks like this:
 
 ```
 OPENAI_API_KEY=(Your OpenAI API key)
@@ -76,37 +69,41 @@ VITE_API_STREAMING=true
 SELF_HOSTED_MODEL=false
 ```
 
-To save the file, press CTRL+X, then Y and then ENTER.
+To save the file, press CTRL+X, then Y, and then ENTER.
 
-Next we need to set a correct IP for our Backend. To do so, open the docker-compose.yml file:
+Next, set the correct IP for the Backend by opening the docker-compose.yml file:
 
 `nano docker-compose.yml`
 
-And change this line 7 `VITE_API_HOST=http://localhost:7091`
+And Change line 7 to: `VITE_API_HOST=http://localhost:7091`
 to this `VITE_API_HOST=http://<your instance public IP>:7091`
 
 This will allow the frontend to connect to the backend.
 
-#### Running the app
+#### Running the Application
 
 You're almost there! Now that all the necessary bits and pieces have been installed, it is time to run the application. To do so, use the following command:
 
 `sudo docker-compose up -d`
 
-If you launch it for the first time it will take a few minutes to download all the necessary dependencies and build.
+Launching it for the first time will take a few minutes to download all the necessary dependencies and build.
 
 Once this is done you can go ahead and close the terminal window.
 
-#### Enabling ports 
+#### Enabling Ports 
 
-Before you being able to access your live instance, you must first enable the port which it is using.
+a. Before you are able to access your live instance, you must first enable the port that it is using.
 
-Open your Lightsail instance and head to "Networking".
+b. Open your Lightsail instance and head to "Networking".
 
-Then click on "Add rule" under "IPv4 Firewall", enter 5173 as your your port and hit "Create". 
-Repeat the process for port 7091.
+c. Then click on "Add rule" under "IPv4 Firewall", enter `5173` as your port, and hit "Create". 
+Repeat the process for port `7091`.
 
 #### Access your instance
 
-Your instance will now be available under your Public IP Address and port 5173. Enjoy!
+Your instance is now available at your Public IP Address on port 5173. Enjoy using DocsGPT!
 
+## Other Deployment Options
+
+- [Deploy DocsGPT on Civo Compute Cloud](https://dev.to/rutamhere/deploying-docsgpt-on-civo-compute-c)
+- [Deploy DocsGPT on DigitalOcean Droplet](https://dev.to/rutamhere/deploying-docsgpt-on-digitalocean-droplet-50ea)

docs/pages/Deploying/Quickstart.md

@@ -1,23 +1,128 @@
 ## Launching Web App
-Note: Make sure you have docker installed
+**Note**: Make sure you have Docker installed
 
-1. Open download this repository with `git clone https://github.com/arc53/DocsGPT.git`
-2. Create .env file in your root directory and set your `OPENAI_API_KEY` with your openai api key
-3. Run `docker-compose build && docker-compose up`
-4. Navigate to `http://localhost:5173/`
+**On macOS or Linux:**
+Just run the following command:
+
+```bash
+./setup.sh
+```
+
+This command will install all the necessary dependencies and provide you with an option to download the local model or use OpenAI.
+
+If you prefer to follow manual steps, refer to this guide:
+
+1. Open and download this repository with 
+   ```bash
+   git clone https://github.com/arc53/DocsGPT.git
+   ```
+2. Create a `.env` file in your root directory and set your `API_KEY` with your [OpenAI API key](https://platform.openai.com/account/api-keys).
+3. Run the following commands:
+   ```bash
+   docker-compose build && docker-compose up
+   ```
+4. Navigate to http://localhost:5173/.
+
+To stop, simply press **Ctrl + C**.
+
+**For WINDOWS:**
+
+To run the setup on Windows, you have two options: using the Windows Subsystem for Linux (WSL) or using Git Bash or Command Prompt.
+
+**Option 1: Using Windows Subsystem for Linux (WSL):**
+
+1. Install WSL if you haven't already. You can follow the official Microsoft documentation for installation: (https://learn.microsoft.com/en-us/windows/wsl/install).
+2. After setting up WSL, open the WSL terminal.
+3. Clone the repository and create the `.env` file:
+   ```bash
+   git clone https://github.com/arc53/DocsGPT.git
+   cd DocsGPT
+   echo "API_KEY=Yourkey" > .env
+   echo "VITE_API_STREAMING=true" >> .env
+   ```
+4. Run the following command to start the setup with Docker Compose:
+   ```bash
+   ./run-with-docker-compose.sh
+   ```
+6. Open your web browser and navigate to http://localhost:5173/.
+7. To stop the setup, just press **Ctrl + C** in the WSL terminal
+
+**Option 2: Using Git Bash or Command Prompt (CMD):**
+
+1. Install Git for Windows if you haven't already. Download it from the official website: (https://gitforwindows.org/).
+2. Open Git Bash or Command Prompt.
+3. Clone the repository and create the `.env` file:
+   ```bash
+   git clone https://github.com/arc53/DocsGPT.git
+   cd DocsGPT
+   echo "API_KEY=Yourkey" > .env
+   echo "VITE_API_STREAMING=true" >> .env
+   ```
+4. Run the following command to start the setup with Docker Compose:
+   ```bash
+   ./run-with-docker-compose.sh
+   ```
+5. Open your web browser and navigate to http://localhost:5173/.
+6. To stop the setup, just press **Ctrl + C** in the Git Bash or Command Prompt terminal.
+
+These steps should help you set up and run the project on Windows using either WSL or Git Bash/Command Prompt. 
+**Important:** Ensure that Docker is installed and properly configured on your Windows system for these steps to work.
+
+
+For WINDOWS:
+
+To run the given setup on Windows, you can use the Windows Subsystem for Linux (WSL) or a Git Bash terminal to execute similar commands. Here are the steps adapted for Windows:
+
+Option 1: Using Windows Subsystem for Linux (WSL):
+
+1. Install WSL if you haven't already. You can follow the official Microsoft documentation for installation: (https://learn.microsoft.com/en-us/windows/wsl/install).
+2. After setting up WSL, open the WSL terminal.
+3. Clone the repository and create the `.env` file:
+   ```bash
+   git clone https://github.com/arc53/DocsGPT.git
+   cd DocsGPT
+   echo "API_KEY=Yourkey" > .env
+   echo "VITE_API_STREAMING=true" >> .env
+   ```
+4. Run the following command to start the setup with Docker Compose:
+    ```bash
+    ./run-with-docker-compose.sh
+    ```
+5. Open your web browser and navigate to http://localhost:5173/.
+6. To stop the setup, just press **Ctrl + C** in the WSL terminal.
+
+Option 2: Using Git Bash or Command Prompt (CMD):
+
+1. Install Git for Windows if you haven't already. You can download it from the official website: (https://gitforwindows.org/).
+2. Open Git Bash or Command Prompt.
+3. Clone the repository and create the `.env` file:
+   ```bash
+   git clone https://github.com/arc53/DocsGPT.git
+   cd DocsGPT
+   echo "API_KEY=Yourkey" > .env
+   echo "VITE_API_STREAMING=true" >> .env
+   ```
+4. Run the following command to start the setup with Docker Compose:
+   ```bash
+   ./run-with-docker-compose.sh
+   ```
+5. Open your web browser and navigate to http://localhost:5173/.
+6. To stop the setup, just press **Ctrl + C** in the Git Bash or Command Prompt terminal.
+
+These steps should help you set up and run the project on Windows using either WSL or Git Bash/Command Prompt. Make sure you have Docker installed and properly configured on your Windows system for this to work.
 
-To stop just run Ctrl + C
 
 ### Chrome Extension
 
-To install the Chrome extension:
+#### Installing the Chrome extension:
+To enhance your DocsGPT experience, you can install the DocsGPT Chrome extension. Here's how:
 
-1. In the DocsGPT GitHub repository, click on the "Code" button and select Download ZIP
-2. Unzip the downloaded file to a location you can easily access
-3. Open the Google Chrome browser and click on the three dots menu (upper right corner)
-4. Select "More Tools" and then "Extensions"
-5. Turn on the "Developer mode" switch in the top right corner of the Extensions page
-6. Click on the "Load unpacked" button
-7. Select the "Chrome" folder where the DocsGPT files have been unzipped (docsgpt-main > extensions > chrome)
-8. The extension should now be added to Google Chrome and can be managed on the Extensions page
-9. To disable or remove the extension, simply turn off the toggle switch on the extension card or click the "Remove" button.
+1. In the DocsGPT GitHub repository, click on the **Code** button and select **Download ZIP**.
+2. Unzip the downloaded file to a location you can easily access.
+3. Open the Google Chrome browser and click on the three dots menu (upper right corner).
+4. Select **More Tools** and then **Extensions**.
+5. Turn on the **Developer mode** switch in the top right corner of the **Extensions page**.
+6. Click on the **Load unpacked** button.
+7. Select the **Chrome** folder where the DocsGPT files have been unzipped (docsgpt-main > extensions > chrome).
+8. The extension should now be added to Google Chrome and can be managed on the Extensions page.
+9. To disable or remove the extension, simply turn off the toggle switch on the extension card or click the **Remove** button.

docs/pages/Deploying/Railway-Deploying.md

@@ -0,0 +1,254 @@
+
+# Self-hosting DocsGPT on Railway
+
+  
+
+Here's a step-by-step guide on how to host DocsGPT on Railway App.
+
+  
+
+At first Clone and set up the project locally to run , test and Modify.
+
+  
+
+### 1. Clone and GitHub SetUp
+
+a. Open Terminal (Windows Shell or Git bash(recommended)).
+
+  
+
+b. Type `git clone https://github.com/arc53/DocsGPT.git`
+
+  
+
+#### Download the package information
+
+  
+
+Once it has finished cloning the repository, it is time to download the package information from all sources. To do so, simply enter the following command:
+
+  
+
+`sudo apt update`
+
+  
+
+#### Install Docker and Docker Compose
+
+  
+
+DocsGPT backend and worker use Python, Frontend is written on React and the whole application is containerized using Docker. To install Docker and Docker Compose, enter the following commands:
+
+  
+
+`sudo apt install docker.io`
+
+  
+
+And now install docker-compose:
+
+  
+
+`sudo apt install docker-compose`
+
+  
+
+#### Access the DocsGPT Folder
+
+  
+
+Enter the following command to access the folder in which the DocsGPT docker-compose file is present.
+
+  
+
+`cd DocsGPT/`
+
+  
+
+#### Prepare the Environment
+
+  
+
+Inside the DocsGPT folder create a `.env` file and copy the contents of `.env_sample` into it.
+
+  
+
+`nano .env`
+
+  
+
+Make sure your `.env` file looks like this:
+
+  
+
+```
+
+OPENAI_API_KEY=(Your OpenAI API key)
+
+VITE_API_STREAMING=true
+
+SELF_HOSTED_MODEL=false
+
+```
+
+  
+
+To save the file, press CTRL+X, then Y, and then ENTER.
+
+  
+
+Next, set the correct IP for the Backend by opening the docker-compose.yml file:
+
+  
+
+`nano docker-compose.yml`
+
+  
+
+And Change line 7 to: `VITE_API_HOST=http://localhost:7091`
+
+to this `VITE_API_HOST=http://<your instance public IP>:7091`
+
+  
+
+This will allow the frontend to connect to the backend.
+
+  
+
+#### Running the Application
+
+  
+
+You're almost there! Now that all the necessary bits and pieces have been installed, it is time to run the application. To do so, use the following command:
+
+  
+
+`sudo docker-compose up -d`
+
+  
+
+Launching it for the first time will take a few minutes to download all the necessary dependencies and build.
+
+  
+
+Once this is done you can go ahead and close the terminal window.
+
+  
+
+### 2. Pushing it to your own Repository
+
+  
+
+a. Create a Repository on your GitHub.
+
+  
+
+b. Open Terminal in the same directory of the Cloned project.
+
+  
+
+c. Type `git init`
+
+  
+
+d. `git add .`
+
+  
+
+e. `git commit -m "first-commit"`
+
+  
+
+f. `git remote add origin <your  repository  link>`
+
+  
+
+g. `git push git push --set-upstream origin master`
+
+Your local files will now be pushed to your GitHub Account. :)
+  
+
+### 3. Create a Railway Account:
+
+  
+
+If you haven't already, create or log in to your railway account do it by visiting [Railway](https://railway.app/)
+
+  
+
+Signup via **GitHub** [Recommended].
+
+  
+
+### 4. Start New Project:
+
+  
+
+a. Open Railway app and Click on "Start New Project."
+
+  
+
+b. Choose any from the list of options available (Recommended "**Deploy from GitHub Repo**")
+
+  
+
+c. Choose the required Repository from your GitHub.
+
+  
+
+d. Configure and allow access to modify your GitHub content from the pop-up window.
+
+  
+
+e. Agree to all the terms and conditions.
+
+  
+
+PS: It may take a few minutes for the account setup to complete.
+
+  
+
+#### You will get A free trial of $5 (use it for trial and then purchase if satisfied and needed)
+
+  
+
+### 5. Connecting to Your newly Railway app with GitHub
+
+  
+
+a. Choose DocsGPT repo from the list of your GitHub repository that you want to deploy now.
+
+  
+
+b. Click on Deploy now.
+
+  
+
+![Three Tabs will be there](/Railway-selection.png)
+
+  
+
+c. Select Variables Tab.
+
+  
+
+d. Upload the env file here that you used for local setup.
+
+  
+
+e. Go to Settings Tab now.
+
+  
+
+f. Go to "Networking" and click on Generate Domain Name, to get the URL of your hosted project.
+
+  
+
+g. You can update the Root directory, build command, installation command as per need.
+
+*[However recommended not the disturb these options and leave them as default if not that needed.]*
+
+  
+  
+
+Your own DocsGPT is now available at the Generated domain URl. :)

docs/pages/Deploying/_meta.json

@@ -6,5 +6,9 @@
   "Quickstart": {
     "title": "⚡️Quickstart",
     "href": "/Deploying/Quickstart"
+  },
+  "Railway-Deploying": {
+    "title": "🚂Deploying on Railway",
+    "href": "/Deploying/Railway-Deploying"
   }
-}
+}

docs/pages/Developing/API-docs.md

@@ -1,9 +1,27 @@
-App currently has two main api endpoints:
+# API Endpoints Documentation
 
-### /api/answer 
-Its a POST request that sends a JSON in body with 4 values. Here is a JavaScript fetch example
-It will receive an answer for a user provided question
+*Currently, the application provides the following main API endpoints:*
 
+
+### 1. /api/answer 
+**Description:**
+
+This endpoint is used to request answers to user-provided questions.
+
+**Request:**
+
+**Method**: `POST`
+
+**Headers**: Content-Type should be set to `application/json; charset=utf-8`
+
+**Request Body**: JSON object with the following fields:
+* `question` — The user's question.
+* `history`  —  (Optional) Previous conversation history.
+* `api_key`— Your API key.
+* `embeddings_key`  —  Your embeddings key.
+* `active_docs` — The location of active documentation.
+
+Here is a JavaScript Fetch Request example:
 ```js
 // answer (POST http://127.0.0.1:5000/api/answer)
 fetch("http://127.0.0.1:5000/api/answer", {
@@ -18,22 +36,33 @@ fetch("http://127.0.0.1:5000/api/answer", {
 .then(console.log.bind(console))
 ```
 
-In response you will get a json document like this one:
+**Response**
 
+In response, you will get a JSON document containing the `answer`, `query` and `result`:
 ```json
 {
-  "answer": " Hi there! How can I help you?\n",
+  "answer": "Hi there! How can I help you?\n",
   "query": "Hi",
-  "result": " Hi there! How can I help you?\nSOURCES:"
+  "result": "Hi there! How can I help you?\nSOURCES:"
 }
 ```
 
-### /api/docs_check
-It will make sure documentation is loaded on a server (just run it every time user is switching between libraries (documentations)
-Its a POST request that sends a JSON in body with 1 value. Here is a JavaScript fetch example
+### 2. /api/docs_check
 
+**Description:**
+
+This endpoint will make sure documentation is loaded on the server (just run it every time user is switching between libraries (documentations)).
+
+**Request:**
+
+**Method**: `POST`
+
+**Headers**: Content-Type should be set to `application/json; charset=utf-8`
+
+**Request Body**: JSON object with the field:
+* `docs` — The location of the documentation:
 ```js
-// answer (POST http://127.0.0.1:5000/api/docs_check)
+// docs_check (POST http://127.0.0.1:5000/api/docs_check)
 fetch("http://127.0.0.1:5000/api/docs_check", {
       "method": "POST",
       "headers": {
@@ -45,7 +74,9 @@ fetch("http://127.0.0.1:5000/api/docs_check", {
 .then(console.log.bind(console))
 ```
 
-In response you will get a json document like this one:
+**Response:**
+
+In response, you will get a JSON document like this one indicating whether the documentation exists or not:
 ```json
 {
   "status": "exists"
@@ -53,47 +84,77 @@ In response you will get a json document like this one:
 ```
 
 
-### /api/combine
-Provides json that tells UI which vectors are available and where they are located with a simple get request
+### 3. /api/combine
+**Description:**
 
-Respsonse will include:
-date, description, docLink, fullName, language, location (local or docshub), model, name, version
+This endpoint provides information about available vectors and their locations with a simple GET request.
+
+**Request:**
+
+**Method**: `GET`
+
+**Response:**
+
+Response will include:
+* `date`
+* `description`
+* `docLink`
+* `fullName`
+* `language`
+* `location` (local or docshub)
+* `model`
+* `name`
+* `version`
+
+Example of JSON in Docshub and local:
 
-Example of json in Docshub and local:
 <img width="295" alt="image" src="https://user-images.githubusercontent.com/15183589/224714085-f09f51a4-7a9a-4efb-bd39-798029bb4273.png">
 
+### 4. /api/upload
+**Description:**
+
+This endpoint is used to upload a file that needs to be trained, response is JSON with task ID, which can be used to check on task's progress.
+
+**Request:**
+
+**Method**: `POST`
+
+**Request Body**: A multipart/form-data form with file upload and additional fields, including `user` and `name`.
 
-### /api/upload
-Uploads file that needs to be trained, response is json with task id, which can be used to check on tasks progress
 HTML example:
 
 ```html
 <form action="/api/upload" method="post" enctype="multipart/form-data" class="mt-2">
-                <input type="file" name="file" class="py-4" id="file-upload">
-                <input type="text" name="user" value="local" hidden>
-                <input type="text" name="name" placeholder="Name:">
-
-
-              <button type="submit" class="py-2 px-4 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                Upload
-              </button>
-            </form>
+    <input type="file" name="file" class="py-4" id="file-upload">
+    <input type="text" name="user" value="local" hidden>
+    <input type="text" name="name" placeholder="Name:">
+    
+    <button type="submit" class="py-2 px-4 text-white bg-purple-30 rounded-md hover:bg-purple-30 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-30">
+        Upload
+    </button>
+</form>
 ```
 
-Response:
-```json
-{
-  "status": "ok",
-  "task_id": "b2684988-9047-428b-bd47-08518679103c"
-}
+**Response:**
 
-```
+JSON response with a status and a task ID that can be used to check the task's progress.
 
-### /api/task_status
-Gets task status (task_id) from /api/upload
+
+### 5. /api/task_status
+**Description:**
+
+This endpoint is used to get the status of a task (`task_id`) from `/api/upload`
+
+**Request:**
+
+**Method**: `GET`
+
+**Query Parameter**: `task_id` (task ID to check)
+
+**Sample JavaScript Fetch Request:**
 ```js
 // Task status (Get http://127.0.0.1:5000/api/task_status)
-fetch("http://localhost:5001/api/task_status?task_id=b2d2a0f4-387c-44fd-a443-e4fe2e7454d1", {
+fetch("http://localhost:5001/api/task_status?task_id=YOUR_TASK_ID", {
       "method": "GET",
       "headers": {
             "Content-Type": "application/json; charset=utf-8"
@@ -103,41 +164,53 @@ fetch("http://localhost:5001/api/task_status?task_id=b2d2a0f4-387c-44fd-a443-e4f
 .then(console.log.bind(console))
 ```
 
-Responses:
+**Response:**
+
 There are two types of responses:
-1. while task it still running, where "current" will show progress from 0 - 100
-```json
-{
-  "result": {
-    "current": 1
-  },
-  "status": "PROGRESS"
-}
-```
 
-2. When task is completed
-```json
-{
-  "result": {
-    "directory": "temp",
-    "filename": "install.rst",
-    "formats": [
-      ".rst",
-      ".md",
-      ".pdf"
-    ],
-    "name_job": "somename",
-    "user": "local"
-  },
-  "status": "SUCCESS"
-}
-```
+1. While the task is still running, the 'current' value will show progress from 0 to 100.
+   ```json
+   {
+     "result": {
+       "current": 1
+     },
+     "status": "PROGRESS"
+   }
+   ```
 
-### /api/delete_old
-deletes old vecotstores
+2. When task is completed:
+   ```json
+   {
+     "result": {
+       "directory": "temp",
+       "filename": "install.rst",
+       "formats": [
+         ".rst",
+         ".md",
+         ".pdf"
+       ],
+       "name_job": "somename",
+       "user": "local"
+     },
+     "status": "SUCCESS"
+   }
+   ```
+
+### 6. /api/delete_old
+**Description:**
+
+This endpoint is used to delete old Vector Stores.
+
+**Request:**
+
+**Method**: `GET`
+
+**Query Parameter**: `task_id`
+
+**Sample JavaScript Fetch Request:**
 ```js
-// Task status (GET http://127.0.0.1:5000/api/docs_check)
-fetch("http://localhost:5001/api/task_status?task_id=b2d2a0f4-387c-44fd-a443-e4fe2e7454d1", {
+// delete_old (GET http://127.0.0.1:5000/api/delete_old)
+fetch("http://localhost:5001/api/delete_old?task_id=YOUR_TASK_ID", {
       "method": "GET",
       "headers": {
             "Content-Type": "application/json; charset=utf-8"
@@ -145,8 +218,11 @@ fetch("http://localhost:5001/api/task_status?task_id=b2d2a0f4-387c-44fd-a443-e4f
 })
 .then((res) => res.text())
 .then(console.log.bind(console))
+
 ```
-response:
+**Response:**
+
+JSON response indicating the status of the operation:
 
 ```json
 { "status": "ok" }

docs/pages/Extensions/Chatwoot-extension.md

@@ -1,29 +1,44 @@
-### To start chatwoot extension:
-1. Prepare and start the DocsGPT itself (load your documentation too) 
-Follow our [wiki](https://github.com/arc53/DocsGPT/wiki) to start it and to [ingest](https://github.com/arc53/DocsGPT/wiki/How-to-train-on-other-documentation) data
-2. Go to chatwoot, Navigate to your profile (bottom left), click on profile settings, scroll to the bottom and copy Access Token 
-2. Navigate to `/extensions/chatwoot`. Copy .env_sample and create .env file
-3. Fill in the values
+## Chatwoot Extension Setup Guide
 
-```
-docsgpt_url=<docsgpt_api_url>
-chatwoot_url=<chatwoot_url>
-docsgpt_key=<openai_api_key or other llm key>
-chatwoot_token=<from part 2>
+### Step 1: Prepare and Start DocsGPT
+
+- **Launch DocsGPT**: Follow the instructions in our [DocsGPT Wiki](https://github.com/arc53/DocsGPT/wiki) to start DocsGPT. Make sure to load your documentation.
+
+### Step 2: Get Access Token from Chatwoot
+
+- Go to Chatwoot.
+- In your profile settings (located at the bottom left), scroll down and copy the **Access Token**.
+
+### Step 3: Set Up Chatwoot Extension
+
+- Navigate to `/extensions/chatwoot`.
+- Copy the `.env_sample` file and create a new file named `.env`.
+- Fill in the values in the `.env` file as follows:
+
+```env
+docsgpt_url=<Docsgpt_API_URL>
+chatwoot_url=<Chatwoot_URL>
+docsgpt_key=<OpenAI_API_Key or Other_LLM_Key>
+chatwoot_token=<Token from Step 2>
 ```
 
-4. start with `flask run` command
+### Step 4: Start the Extension
 
-If you want for bot to stop responding to questions for a specific user or session just add label `human-requested` in your conversation
+- Use the command `flask run` to start the extension.
 
+### Step 5: Optional - Extra Validation
 
-### Optional (extra validation)
-In app.py uncomment lines 12-13 and 71-75
+- In app.py, uncomment lines 12-13 and 71-75.
+- Add the following lines to your .env file:
+```account_id=(optional) 1
+assignee_id=(optional) 1
+```
+These Chatwoot values help ensure you respond to the correct widget and handle questions assigned to a specific user.
 
-in your .env file add:
+### Stopping Bot Responses for Specific User or Session
 
-`account_id=(optional) 1 `
+- If you want the bot to stop responding to questions for a specific user or session, add a label `human-requested` in your conversation.
 
-`assignee_id=(optional) 1`
+### Additional Notes
 
-Those are chatwoot values and will allow you to check if you are responding to correct widget and responding to questions assigned to specific user
+- For further details on training on other documentation, refer to our [wiki](https://github.com/arc53/DocsGPT/wiki/How-to-train-on-other-documentation).

docs/pages/Extensions/react-widget.md

@@ -1,25 +1,34 @@
-### How to set up react docsGPT widget on your website:
+### Setting up the DocsGPT Widget in Your React Project
+
+### Introduction:
+The DocsGPT Widget is a powerful tool that allows you to integrate AI-powered documentation assistance into your web applications. This guide will walk you through the installation and usage of the DocsGPT Widget in your React project. Whether you're building a web app or a knowledge base, this widget can enhance your user experience.
 
 ### Installation
-Got to your project and install a new dependency: `npm install docsgpt`
+First, make sure you have Node.js and npm installed in your project. Then go to your project and install a new dependency: `npm install docsgpt`.
 
 ### Usage
-Go to your project and in the file where you want to use the widget import it: 
+In the file where you want to use the widget, import it and include the CSS file:
 ```js
 import { DocsGPTWidget } from "docsgpt";
 import "docsgpt/dist/style.css";
 ```
 
 
-Then you can use it like this: `<DocsGPTWidget />`
-
-DocsGPTWidget takes 3 props:
-- `apiHost` - url of your DocsGPT API
-- `selectDocs` - documentation that you want to use for your widget (eg. `default` or `local/docs1.zip`)
-- `apiKey` - usually its empty
+Now, you can use the widget in your component like this :
+```jsx
+<DocsGPTWidget
+  apiHost="https://your-docsgpt-api.com"
+  selectDocs="local/docs.zip"
+  apiKey=""
+/>
+```
+DocsGPTWidget takes 3 **props**:
+1. `apiHost` — The URL of your DocsGPT API.
+2. `selectDocs` — The documentation source that you want to use for your widget (e.g. `default` or `local/docs1.zip`).
+3. `apiKey` — Usually, it's empty.
 
 ### How to use DocsGPTWidget with [Nextra](https://nextra.site/) (Next.js + MDX)
-Install you widget as described above and then go to your `pages/` folder and create a new file `_app.js` with the following content:
+Install your widget as described above and then go to your `pages/` folder and create a new file `_app.js` with the following content:
 ```js
 import { DocsGPTWidget } from "docsgpt";
 import "docsgpt/dist/style.css";
@@ -32,6 +41,7 @@ export default function MyApp({ Component, pageProps }) {
         </>
     )
 }
-```
+```  
 
+For more information about React, refer to this [link here](https://react.dev/learn)
 

docs/pages/Guides/Customising-prompts.md

@@ -1,4 +1,27 @@
-## To customise a main prompt navigate to `/application/prompt/combine_prompt.txt`
+# Customizing the Main Prompt
 
-You can try editing it to see how the model responds.
+Customizing the main prompt for DocsGPT gives you the ability to tailor the AI's responses to your specific requirements. By modifying the prompt text, you can achieve more accurate and relevant answers. Here's how you can do it:
+
+1. Navigate to `/application/prompts/combine_prompt.txt`.
+
+2. Open the `combine_prompt.txt` file and modify the prompt text to suit your needs. You can experiment with different phrasings and structures to observe how the model responds. The main prompt serves as guidance to the AI model on how to generate responses.
+
+## Example Prompt Modification
+
+**Original Prompt:**
+```markdown
+You are a DocsGPT, friendly and helpful AI assistant by Arc53 that provides help with documents. You give thorough answers with code examples if possible.
+Use the following pieces of context to help answer the users question. If it's not relevant to the question, provide friendly responses.
+You have access to chat history, and can use it to help answer the question.
+When using code examples, use the following format:
+
+(code)
+{summaries}
+```
+
+Feel free to customize the prompt to align it with your specific use case or the kind of responses you want from the AI. For example, you can focus on specific document types, industries, or topics to get more targeted results.
+
+## Conclusion
+
+Customizing the main prompt for DocsGPT allows you to tailor the AI's responses to your unique requirements. Whether you need in-depth explanations, code examples, or specific insights, you can achieve it by modifying the main prompt. Remember to experiment and fine-tune your prompts to get the best results.
 

docs/pages/Guides/How-to-train-on-other-documentation.md

@@ -1,48 +1,51 @@
 ## How to train on other documentation
-This AI can use any documentation, but first it needs to be prepared for similarity search. 
 
+This AI can utilize any documentation, but it requires preparation for similarity search. Follow these steps to get your documentation ready:
+
+**Step 1: Prepare Your Documentation**
 ![video-example-of-how-to-do-it](https://d3dg1063dc54p9.cloudfront.net/videos/how-to-vectorise.gif)
 
-Start by going to 
-`/scripts/` folder
+Start by going to `/scripts/` folder.
 
-If you open this file you will see that it uses RST files from the folder to create a `index.faiss` and `index.pkl`. 
+If you open this file, you will see that it uses RST files from the folder to create a `index.faiss` and `index.pkl`. 
 
-It currently uses OPEN_AI to create vector store, so make sure your documentation is not too big. Pandas cost me around 3-4$
+It currently uses OPENAI to create the vector store, so make sure your documentation is not too large. Using Pandas cost me around $3-$4.
 
-You can usually find documentation on github in docs/ folder for most open-source projects.
+You can typically find documentation on GitHub in the `docs/` folder for most open-source projects.
 
-### 1. Find documentation in .rst/.md and create a folder with it in your scripts directory
-Name it `inputs/`  
-Put all your .rst/.md files in there  
-The search is recursive, so you don't need to flatten them
+### 1. Find documentation in .rst/.md format and create a folder with it in your scripts directory.
+- Name it `inputs/`.
+- Put all your .rst/.md files in there.  
+- The search is recursive, so you don't need to flatten them.
 
-If there are no .rst/.md files just convert whatever you find to txt and feed it. (don't forget to change the extension in script)
+If there are no .rst/.md files, convert whatever you find to a .txt file and feed it. (Don't forget to change the extension in the script).
 
-### 2. Create .env file in `scripts/` folder
-And write your OpenAI API key inside
-`OPENAI_API_KEY=<your-api-key>`
+### Step 2: Configure Your OpenAI API Key
+1. Create a .env file in the scripts/ folder.
+  - Add your OpenAI API key inside: OPENAI_API_KEY=<your-api-key>.
 
-### 3. Run scripts/ingest.py
+### Step 3: Run the Ingestion Script
 
 `python ingest.py ingest`
 
-It will tell you how much it will cost
+It will provide you with the estimated cost.
 
-### 4. Move `index.faiss` and `index.pkl` generated in `scripts/output` to `application/` folder. 
+### Step 4: Move `index.faiss` and `index.pkl` generated in `scripts/output` to `application/` folder. 
 
 
-### 5. Run web app
-Once you run it will use new context that is relevant to your documentation
-Make sure you select default in the dropdown in the UI
+### Step 5: Run the Web App
+Once you run it, it will use new context relevant to your documentation.Make sure you select default in the dropdown in the UI.
 
-## Customisation 
+## Customization 
 You can learn more about options while running ingest.py by running:
+  - Make sure you select 'default' from the dropdown in the UI.
 
+## Customization
+You can learn more about options while running ingest.py by executing:
 `python ingest.py --help`
 |              Options             |                                                                                                                                |
 |:--------------------------------:|:------------------------------------------------------------------------------------------------------------------------------:|
-|            **ingest**            | Runs 'ingest' function converting documentation to to Faiss plus Index format                                                  |
+|            **ingest**            | Runs 'ingest' function, converting documentation to Faiss plus Index format                                                  |
 | --dir TEXT                       | List of paths to directory for index creation. E.g. --dir inputs --dir inputs2 [default: inputs]                               |
 | --file TEXT                      | File paths to use (Optional; overrides directory) E.g. --files inputs/1.md --files inputs/2.md                                 |
 | --recursive / --no-recursive     | Whether to recursively search in subdirectories [default: recursive]                                                           |
@@ -57,4 +60,4 @@ You can learn more about options while running ingest.py by running:
 |                                  |                                                                                                                                |
 |            **convert**           | Creates documentation in .md format from source code                                                                           |
 | --dir TEXT                       | Path to a directory with source code. E.g. --dir inputs [default: inputs]                                                      |
-| --formats TEXT                   | Source code language from which to create documentation. Supports py, js and java.  E.g. --formats py [default: py]            |
+| --formats TEXT                   | Source code language from which to create documentation. Supports py, js and java.  E.g. --formats py [default: py]            |

docs/pages/Guides/How-to-use-different-LLM.md

@@ -1,32 +1,48 @@
-Fortunately there are many providers for LLM's and some of them can even be ran locally
+# Setting Up Local Language Models for Your App
 
-There are two models used in the app:
-1. Embeddings
-2. Text generation
+Your app relies on two essential models: Embeddings and Text Generation. While OpenAI's default models work seamlessly, you have the flexibility to switch providers or even run the models locally.
 
-By default we use OpenAI's models but if you want to change it or even run it locally, its very simple!
+## Step 1: Configure Environment Variables
 
-### Go to .env file or set environment variables:
+Navigate to the `.env` file or set the following environment variables:
 
-`LLM_NAME=<your Text generation>`
+```env
+LLM_NAME=<your Text Generation model>
+API_KEY=<API key for Text Generation>
+EMBEDDINGS_NAME=<LLM for Embeddings>
+EMBEDDINGS_KEY=<API key for Embeddings>
+VITE_API_STREAMING=<true or false>
+```
 
-`API_KEY=<api_key for Text generation>`
+You can omit the keys if users provide their own. Ensure you set `LLM_NAME` and `EMBEDDINGS_NAME`.
 
-`EMBEDDINGS_NAME=<llm for embeddings>`
+## Step 2: Choose Your Models
 
-`EMBEDDINGS_KEY=<api_key for embeddings>`
+**Options for `LLM_NAME`:**
+- openai ([More details](https://platform.openai.com/docs/models))
+- anthropic ([More details](https://docs.anthropic.com/claude/reference/selecting-a-model))
+- manifest ([More details](https://python.langchain.com/docs/integrations/llms/manifest))
+- cohere ([More details](https://docs.cohere.com/docs/llmu))
+- llama.cpp ([More details](https://python.langchain.com/docs/integrations/llms/llamacpp))
+- huggingface (Arc53/DocsGPT-7B by default)
+- sagemaker ([Mode details](https://aws.amazon.com/sagemaker/))
 
-`VITE_API_STREAMING=<true or false (true if using openai, false for all others)>`
 
-You dont need to provide keys if you are happy with users providing theirs, so make sure you set LLM_NAME and EMBEDDINGS_NAME
+Note: for huggingface you can choose any model inside application/llm/huggingface.py or pass llm_name on init, loads   
 
-Options:  
-LLM_NAME (openai, manifest, cohere, Arc53/docsgpt-14b, Arc53/docsgpt-7b-falcon)  
-EMBEDDINGS_NAME (openai_text-embedding-ada-002, huggingface_sentence-transformers/all-mpnet-base-v2, huggingface_hkunlp/instructor-large, cohere_medium)
+**Options for `EMBEDDINGS_NAME`:**
+- openai_text-embedding-ada-002
+- huggingface_sentence-transformers/all-mpnet-base-v2
+- huggingface_hkunlp/instructor-large
+- cohere_medium
 
-That's it!
+If you want to be completely local, set `EMBEDDINGS_NAME` to `huggingface_sentence-transformers/all-mpnet-base-v2`. 
 
-### Hosting everything locally and privately (for using our optimised open-source models)
-If you are working with important data and dont want anything to leave your premises.
+For llama.cpp Download the required model and place it in the `models/` folder.
 
-Make sure you set SELF_HOSTED_MODEL as true in you .env variable and for your LLM_NAME you can use anything that's on Huggingface 
+Alternatively, for local Llama setup, run `setup.sh` and choose option 1. The script handles the DocsGPT model addition.
+
+## Step 3: Local Hosting for Privacy
+
+If working with sensitive data, host everything locally by setting `LLM_NAME`, llama.cpp or huggingface, use any model available on Hugging Face, for llama.cpp you need to convert it into gguf format.
+That's it! Your app is now configured for local and private hosting, ensuring optimal security for critical data.

docs/pages/Guides/My-AI-answers-questions-using-external-knowledge.md

@@ -1,10 +1,12 @@
-If your AI uses external knowledge and is not explicit enough it is ok, because we try to make docsgpt friendly.
+# Avoiding hallucinations
 
-But if you want to adjust it, here is a simple way.
+If your AI uses external knowledge and is not explicit enough, it is ok, because we try to make DocsGPT friendly.
 
-Got to `application/prompts/chat_combine_prompt.txt`
+But if you want to adjust it, here is a simple way:-
 
-And change it to
+- Got to `application/prompts/chat_combine_prompt.txt`
+
+- And change it to
 
 
 ```

docs/pages/index.mdx

@@ -11,19 +11,19 @@ import mainGuides from './Guides/_meta.json';
 
 
 export const allGuides = {
-  ...mainGuides,
-  ...developingGuides,
   ...deployingGuides,
+  ...developingGuides,
   ...extensionGuides,
+  ...mainGuides,
 };
 
 ###  **DocsGPT 🦖**
 
 DocsGPT 🦖 is an innovative open-source tool designed to simplify the retrieval of information from project documentation using advanced GPT models 🤖. Eliminate lengthy manual searches 🔍 and enhance your documentation experience with DocsGPT, and consider contributing to its AI-powered future 🚀.
 
-Our demo: [https://docsgpt.arc53.com/](https://docsgpt.arc53.com/)
+![video-example-of-docs-gpt](https://d3dg1063dc54p9.cloudfront.net/videos/demov3.gif)
 
-Want to earn a cool shirt by submitting a **meaningful** PR, check out [Hacktoberfest](https://github.com/arc53/DocsGPT/blob/main/HACKTOBERFEST.md) guide.
+Try it yourself: [https://docsgpt.arc53.com/](https://docsgpt.arc53.com/)
 
 <Cards
       num={3}

extensions/chrome/package-lock.json

@@ -1,9 +1,12 @@
 {
   "name": "doc-ext",
+  "version": "0.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
+      "version": "0.0.1",
+      "license": "MIT",
       "devDependencies": {
         "tailwindcss": "^3.2.4"
       }
@@ -407,10 +410,16 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -470,9 +479,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.21",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
-      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "dev": true,
       "funding": [
         {
@@ -482,10 +491,14 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -1094,9 +1107,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
       "dev": true
     },
     "normalize-path": {
@@ -1136,12 +1149,12 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.4.21",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
-      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "dev": true,
       "requires": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       }

extensions/chrome/popup.html

@@ -20,7 +20,7 @@
               <div class="bg-indigo-500 text-white p-2 rounded-lg mb-2 self-start">
                 <p class="text-sm">Hello, ask me anything about this library. Im here to help</p>
               </div>
-              <div class="bg-blue-500 text-white p-2 rounded-lg mb-2 self-end">
+              <div class="bg-purple-30 text-white p-2 rounded-lg mb-2 self-end">
                 <p class="text-sm">How to create API key for Api gateway?</p>
               </div>
               <div class="bg-indigo-500 text-white p-2 rounded-lg mb-2 self-start">
@@ -46,7 +46,7 @@
         <div class=" flex mt-4 mb-2">
         <form id="message-form">
           <input id="message-input" class="bg-white p-2 rounded-lg ml-2 w-[26rem]" type="text" placeholder="Type your message here...">
-          <button class="bg-blue-500 text-white p-2 rounded-lg ml-2 mr-2 ml-2" type="submit">Send</button>
+          <button class="bg-purple-30 text-white p-2 rounded-lg ml-2 mr-2 ml-2" type="submit">Send</button>
         </form>
         </div>
 

extensions/chrome/popup.js

@@ -3,7 +3,7 @@ document.getElementById("message-form").addEventListener("submit", function(even
     var message = document.getElementById("message-input").value;
     chrome.runtime.sendMessage({msg: "sendMessage", message: message}, function(response) {
       console.log(response.response);
-      msg_html = '<div class="bg-blue-500 text-white p-2 rounded-lg mb-2 self-end"><p class="text-sm">'
+      msg_html = '<div class="bg-purple-30 text-white p-2 rounded-lg mb-2 self-end"><p class="text-sm">'
       msg_html += message
       msg_html += '</p></div>'
       document.getElementById("messages").innerHTML += msg_html;

extensions/react-widget/README.md

@@ -1,7 +1,7 @@
 # DocsGPT react widget
 
 
-THis widget will allow you to embed a DocsGPT assistant in your react app.
+This widget will allow you to embed a DocsGPT assistant in your React app.
 
 ## Installation
 

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

@@ -366,7 +366,7 @@ function fr() {
     }
     function ye(e) {
       if (Je(e))
-        return g("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", qe(e)), ge(e);
+        return g("The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", qe(e)), ge(e);
     }
     var W = O.ReactCurrentOwner, Be = {
       key: !0,
@@ -812,7 +812,7 @@ const pr = ({ apiHost: N = "https://gptcloud.arc53.com", selectDocs: w = "defaul
                   placeholder: "What do you want to do?"
                 }
               ),
-              /* @__PURE__ */ l.jsx("button", { className: "absolute text-gray-400 dark:text-gray-500 text-sm inset-y-0 right-2 -mx-2 px-2", type: "submit", children: "Sumbit" })
+              /* @__PURE__ */ l.jsx("button", { className: "absolute text-gray-400 dark:text-gray-500 text-sm inset-y-0 right-2 -mx-2 px-2", type: "submit", children: "Submit" })
             ]
           }
         ),

extensions/react-widget/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "docsgpt",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "docsgpt",
-      "version": "0.2.3",
+      "version": "0.2.4",
       "license": "Apache-2.0",
       "dependencies": {
         "postcss-cli": "^10.1.0",
@@ -19,7 +19,7 @@
         "@types/react-dom": "^18.0.9",
         "@vitejs/plugin-react-swc": "^3.0.0",
         "autoprefixer": "^10.4.13",
-        "postcss": "^8.4.20",
+        "postcss": "^8.4.31",
         "typescript": "^4.9.3",
         "vite": "^4.0.0",
         "vite-plugin-dts": "^1.7.1"
@@ -1784,9 +1784,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.29",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",
-      "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "funding": [
         {
           "type": "opencollective",

extensions/react-widget/package.json

@@ -38,7 +38,7 @@
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react-swc": "^3.0.0",
     "autoprefixer": "^10.4.13",
-    "postcss": "^8.4.20",
+    "postcss": "^8.4.31",
     "typescript": "^4.9.3",
     "vite": "^4.0.0",
     "vite-plugin-dts": "^1.7.1"

extensions/react-widget/src/components/DocsGPTWidget.tsx

@@ -232,7 +232,7 @@ export const DocsGPTWidget = ({ apiHost = 'https://gptcloud.arc53.com', selectDo
                 className="relative w-full m-0" style={{ opacity: 1 }}>
               <input type="text"
                      className="w-full bg-transparent px-5 py-3 pr-8 text-sm text-gray-700 dark:text-white focus:outline-none" placeholder="What do you want to do?" />
-              <button className="absolute text-gray-400 dark:text-gray-500 text-sm inset-y-0 right-2 -mx-2 px-2" type="submit" >Sumbit</button>
+              <button className="absolute text-gray-400 dark:text-gray-500 text-sm inset-y-0 right-2 -mx-2 px-2" type="submit" >Submit</button>
             </form>
           )}
           <p className={`${chatState !== 'processing' ? 'hidden' : ''} flex w-full justify-center px-5 py-3 text-sm text-gray-800 font-bold dark:text-white transition duration-300 rounded-b`}>
@@ -244,4 +244,4 @@ export const DocsGPTWidget = ({ apiHost = 'https://gptcloud.arc53.com', selectDo
 
     </>
   )
-}
+}

extensions/web-widget/package-lock.json

@@ -620,9 +620,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.23",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
-      "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "dev": true,
       "funding": [
         {

frontend/.env.development

@@ -1,3 +1,3 @@
 # Please put appropriate value
-VITE_API_HOST=http://localhost:7091
+VITE_API_HOST=http://0.0.0.0:7091
 VITE_API_STREAMING=true

frontend/package.json

@@ -22,12 +22,14 @@
     "@reduxjs/toolkit": "^1.9.2",
     "@vercel/analytics": "^0.1.10",
     "react": "^18.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-markdown": "^8.0.7",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.8.1",
-    "react-syntax-highlighter": "^15.5.0"
+    "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^3.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.27",
@@ -48,12 +50,12 @@
     "eslint-plugin-unused-imports": "^2.0.0",
     "husky": "^8.0.0",
     "lint-staged": "^13.1.1",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.31",
     "prettier": "^2.8.4",
     "prettier-plugin-tailwindcss": "^0.2.2",
     "tailwindcss": "^3.2.4",
     "typescript": "^4.9.5",
-    "vite": "^4.1.5",
+    "vite": "^4.5.0",
     "vite-plugin-svgr": "^2.4.0"
   }
 }

frontend/public/lock.svg

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

frontend/public/message-programming.svg

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

frontend/public/message-text.svg

@@ -0,0 +1,5 @@
+<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.2708 22.9583H9.66663C4.83329 22.9583 2.41663 21.75 2.41663 15.7083V9.66663C2.41663 4.83329 4.83329 2.41663 9.66663 2.41663H19.3333C24.1666 2.41663 26.5833 4.83329 26.5833 9.66663V15.7083C26.5833 20.5416 24.1666 22.9583 19.3333 22.9583H18.7291C18.3545 22.9583 17.992 23.1395 17.7625 23.4416L15.95 25.8583C15.1525 26.9216 13.8475 26.9216 13.05 25.8583L11.2375 23.4416C11.0441 23.1758 10.597 22.9583 10.2708 22.9583Z" stroke="#363A3F" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.45837 9.66663H20.5417" stroke="#363A3F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.45837 15.7084H15.7084" stroke="#363A3F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/src/About.tsx

@@ -1,13 +1,14 @@
 //TODO - Add hyperlinks to text
 //TODO - Styling
+import DocsGPT3 from './assets/cute_docsgpt3.svg';
 
 export default function About() {
   return (
     <div className="mx-5 grid min-h-screen md:mx-36">
-      <article className=" place-items-left mx-auto my-auto flex w-full max-w-6xl flex-col gap-6 rounded-3xl bg-gray-100 p-6 pt-14 pb-14 text-jet lg:p-10 xl:p-16">
+      <article className="place-items-left mx-auto my-auto flex w-full max-w-6xl flex-col gap-4 rounded-3xl bg-gray-100 p-6 text-jet lg:p-6 xl:p-10">
         <div className="flex items-center">
           <p className="mr-2 text-3xl">About DocsGPT</p>
-          <p className="text-[21px]">🦖</p>
+          <img className="h14 mb-2" src={DocsGPT3} alt="DocsGPT" />
         </div>
         <p className="mt-4">
           Find the information in your documentation through AI-powered
@@ -51,9 +52,11 @@ export default function About() {
         </div>
 
         <p>
-          Currently It uses DocsGPT documentation, so it will respond to
-          information relevant to DocsGPT. If you want to train it on different
-          documentation - please follow
+          Currently It uses{' '}
+          <span className="text-blue-950 font-medium">DocsGPT</span>{' '}
+          documentation, so it will respond to information relevant to{' '}
+          <span className="text-blue-950 font-medium">DocsGPT</span>. If you
+          want to train it on different documentation - please follow
           <a
             className="text-blue-500"
             href="https://github.com/arc53/DocsGPT/wiki/How-to-train-on-other-documentation"

frontend/src/App.tsx

@@ -2,29 +2,33 @@ import { Routes, Route } from 'react-router-dom';
 import Navigation from './Navigation';
 import Conversation from './conversation/Conversation';
 import About from './About';
-import { useState } from 'react';
-import { ActiveState } from './models/misc';
+import PageNotFound from './PageNotFound';
 import { inject } from '@vercel/analytics';
+import { useMediaQuery } from './hooks';
+import { useState } from 'react';
+import Setting from './Setting';
 
 inject();
 
 export default function App() {
-  //TODO : below media query is disjoint from tailwind. Please wire it together.
-  const [navState, setNavState] = useState<ActiveState>(
-    window.matchMedia('(min-width: 768px)').matches ? 'ACTIVE' : 'INACTIVE',
-  );
+  const { isMobile } = useMediaQuery();
+  const [navOpen, setNavOpen] = useState(!isMobile);
 
   return (
     <div className="min-h-full min-w-full">
-      <Navigation navState={navState} setNavState={setNavState} />
+      <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
       <div
         className={`transition-all duration-200 ${
-          navState === 'ACTIVE' ? 'ml-0 md:ml-72 lg:ml-60' : 'ml-0 md:ml-16'
+          !isMobile
+            ? `ml-0 ${!navOpen ? '-mt-5 md:mx-auto lg:mx-auto' : 'md:ml-72'}`
+            : 'ml-0 md:ml-16'
         }`}
       >
         <Routes>
           <Route path="/" element={<Conversation />} />
           <Route path="/about" element={<About />} />
+          <Route path="*" element={<PageNotFound />} />
+          <Route path="/settings" element={<Setting />} />
         </Routes>
       </div>
     </div>

frontend/src/Avatar.tsx

@@ -1,18 +0,0 @@
-export default function Avatar({
-  avatar,
-  size,
-  className,
-}: {
-  avatar: string;
-  size?: 'SMALL' | 'MEDIUM' | 'LARGE';
-  className: string;
-}) {
-  const styles = {
-    transform: 'scale(-1, 1)',
-  };
-  return (
-    <div style={styles} className={className}>
-      {avatar}
-    </div>
-  );
-}

frontend/src/Hero.tsx

@@ -1,22 +1,171 @@
+import { useMediaQuery } from './hooks';
+import DocsGPT3 from './assets/cute_docsgpt3.svg';
+
 export default function Hero({ className = '' }: { className?: string }) {
+  // const isMobile = window.innerWidth <= 768;
+  const { isMobile } = useMediaQuery();
   return (
-    <div className={`flex flex-col ${className}`}>
-      <div className="mb-10 flex items-center justify-center">
+    <div className={`mt-14 ${isMobile ? 'mb-2' : 'mb-12'}flex flex-col `}>
+      <div className=" mb-2 flex items-center justify-center sm:mb-10">
         <p className="mr-2 text-4xl font-semibold">DocsGPT</p>
-        <p className="text-[27px]">🦖</p>
+        <img className="mb-2 h-14" src={DocsGPT3} alt="DocsGPT" />
+      </div>
+      {isMobile ? (
+        <p className="mb-3 text-center leading-6 text-black-1000">
+          Welcome to <span className="font-bold ">DocsGPT</span>, your technical
+          documentation assistant! Start by entering your query in the input
+          field below, and we&apos;ll provide you with the most relevant
+          answers.
+        </p>
+      ) : (
+        <>
+          <p className="mb-3 text-center leading-6 text-black-1000">
+            Welcome to DocsGPT, your technical documentation assistant!
+          </p>
+          <p className="mb-3 text-center leading-6 text-black-1000">
+            Enter a query related to the information in the documentation you
+            selected to receive
+            <br /> and we will provide you with the most relevant answers.
+          </p>
+          <p className="mb-3 text-center leading-6 text-black-1000">
+            Start by entering your query in the input field below and we will do
+            the rest!
+          </p>
+        </>
+      )}
+      <div
+        className={`sections ${
+          isMobile ? '' : 'mt-1'
+        } flex flex-wrap items-center justify-center gap-2 sm:gap-1 md:gap-0`}
+      >
+        {/* first */}
+        <div className=" rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1  md:rounded-tr-none md:rounded-br-none">
+          <div
+            className={`h-full rounded-[45px] bg-white p-${
+              isMobile ? '3.5' : '6 py-8'
+            }  md:rounded-tr-none md:rounded-br-none`}
+          >
+            {/* Add Mobile check here */}
+            {isMobile ? (
+              <div className="flex justify-center">
+                <img
+                  src="/message-text.svg"
+                  alt="lock"
+                  className="h-[24px] w-[24px] "
+                />
+                <h2 className="mb-0 pl-1 text-lg font-bold">
+                  Chat with Your Data
+                </h2>
+              </div>
+            ) : (
+              <>
+                <img
+                  src="/message-text.svg"
+                  alt="lock"
+                  className="h-[24px] w-[24px]"
+                />
+                <h2 className="mt-2 mb-3 text-lg font-bold">
+                  Chat with Your Data
+                </h2>
+              </>
+            )}
+            <p
+              className={
+                isMobile
+                  ? `w-[250px] text-center text-xs text-gray-500`
+                  : `w-[250px] text-xs text-gray-500`
+              }
+            >
+              DocsGPT will use your data to answer questions. Whether its
+              documentation, source code, or Microsoft files, DocsGPT allows you
+              to have interactive conversations and find answers based on the
+              provided data.
+            </p>
+          </div>
+        </div>
+        {/* second */}
+        <div className=" rounded-[50px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1  md:rounded-none  md:py-1 md:px-0">
+          <div
+            className={`rounded-[45px] bg-white p-${
+              isMobile ? '3.5' : '6 py-6'
+            }  md:rounded-none`}
+          >
+            {/* Add Mobile check here */}
+            {isMobile ? (
+              <div className="flex justify-center">
+                <img src="/lock.svg" alt="lock" className="h-[24px] w-[24px]" />
+                <h2 className="mb-0 pl-1 text-lg font-bold">
+                  Secure Data Storage
+                </h2>
+              </div>
+            ) : (
+              <>
+                <img src="/lock.svg" alt="lock" className="h-[24px] w-[24px]" />
+                <h2 className="mt-2 mb-3 text-lg font-bold">
+                  Secure Data Storage
+                </h2>
+              </>
+            )}
+            <p
+              className={
+                isMobile
+                  ? `w-[250px] text-center text-xs text-gray-500`
+                  : `w-[250px] text-xs text-gray-500`
+              }
+            >
+              The security of your data is our top priority. DocsGPT ensures the
+              utmost protection for your sensitive information. With secure data
+              storage and privacy measures in place, you can trust that your
+              data is kept safe and confidential.
+            </p>
+          </div>
+        </div>
+        {/* third */}
+        <div className=" rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/80 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-tl-none md:rounded-bl-none ">
+          <div
+            className={`firefox rounded-[45px] bg-white p-${
+              isMobile ? '3.5' : '6 px-6 '
+            } lg:rounded-tl-none lg:rounded-bl-none`}
+          >
+            {/* Add Mobile check here */}
+            {isMobile ? (
+              <div className="flex justify-center">
+                <img
+                  src="/message-programming.svg"
+                  alt="lock"
+                  className="h-[24px] w-[24px]"
+                />
+                <h2 className="mb-0 pl-1 text-lg font-bold">
+                  Open Source Code
+                </h2>
+              </div>
+            ) : (
+              <>
+                <img
+                  src="/message-programming.svg"
+                  alt="lock"
+                  className="h-[24px] w-[24px]"
+                />
+                <h2 className="mt-2 mb-3 text-lg font-bold">
+                  Open Source Code
+                </h2>
+              </>
+            )}
+            <p
+              className={
+                isMobile
+                  ? `w-[250px] text-center text-xs text-gray-500`
+                  : `w-[250px] text-xs text-gray-500`
+              }
+            >
+              DocsGPT is built on open source principles, promoting transparency
+              and collaboration. The source code is freely available, enabling
+              developers to contribute, enhance, and customize the app to meet
+              their specific needs.
+            </p>
+          </div>
+        </div>
       </div>
-      <p className="mb-3 text-center leading-6 text-black-1000">
-        Welcome to DocsGPT, your technical documentation assistant!
-      </p>
-      <p className="mb-3 text-center leading-6 text-black-1000">
-        Enter a query related to the information in the documentation you
-        selected to receive and we will provide you with the most relevant
-        answers.
-      </p>
-      <p className="mb-3 text-center leading-6 text-black-1000">
-        Start by entering your query in the input field below and we will do the
-        rest!
-      </p>
     </div>
   );
 }

frontend/src/Navigation.tsx

@@ -1,17 +1,20 @@
 import { useEffect, useRef, useState } from 'react';
-import { NavLink } from 'react-router-dom';
-import Arrow1 from './assets/arrow.svg';
+import { useDispatch, useSelector } from 'react-redux';
+import { NavLink, useNavigate } from 'react-router-dom';
+import DocsGPT3 from './assets/cute_docsgpt3.svg';
+import Documentation from './assets/documentation.svg';
+import Discord from './assets/discord.svg';
 import Arrow2 from './assets/dropdown-arrow.svg';
-import Exit from './assets/exit.svg';
-import Message from './assets/message.svg';
+import Expand from './assets/expand.svg';
+import Trash from './assets/trash.svg';
+import Github from './assets/github.svg';
 import Hamburger from './assets/hamburger.svg';
-import Key from './assets/key.svg';
 import Info from './assets/info.svg';
-import Link from './assets/link.svg';
+import SettingGear from './assets/settingGear.svg';
+import Add from './assets/add.svg';
 import UploadIcon from './assets/upload.svg';
 import { ActiveState } from './models/misc';
 import APIKeyModal from './preferences/APIKeyModal';
-import { useDispatch, useSelector } from 'react-redux';
 import {
   selectApiKeyStatus,
   selectSelectedDocs,
@@ -26,23 +29,24 @@ import {
   setConversation,
   updateConversationId,
 } from './conversation/conversationSlice';
-import { useOutsideAlerter } from './hooks';
+import { useMediaQuery, useOutsideAlerter } from './hooks';
 import Upload from './upload/Upload';
 import { Doc, getConversations } from './preferences/preferenceApi';
 import SelectDocsModal from './preferences/SelectDocsModal';
+import ConversationTile from './conversation/ConversationTile';
 
-export default function Navigation({
-  navState,
-  setNavState,
-}: {
-  navState: ActiveState;
-  setNavState: React.Dispatch<React.SetStateAction<ActiveState>>;
-}) {
+interface NavigationProps {
+  navOpen: boolean;
+  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const dispatch = useDispatch();
   const docs = useSelector(selectSourceDocs);
   const selectedDocs = useSelector(selectSelectedDocs);
   const conversations = useSelector(selectConversations);
   const conversationId = useSelector(selectConversationId);
+  const { isMobile } = useMediaQuery();
 
   const [isDocsListOpen, setIsDocsListOpen] = useState(false);
 
@@ -59,31 +63,33 @@ export default function Navigation({
 
   const navRef = useRef(null);
   const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
-  const embeddingsName = import.meta.env.VITE_EMBEDDINGS_NAME || 'openai_text-embedding-ada-002';
+  const embeddingsName =
+    import.meta.env.VITE_EMBEDDINGS_NAME || 'openai_text-embedding-ada-002';
+
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (!conversations) {
-      getConversations()
-        .then((fetchedConversations) => {
-          dispatch(setConversations(fetchedConversations));
-        })
-        .catch((error) => {
-          console.error('Failed to fetch conversations: ', error);
-        });
+      fetchConversations();
     }
   }, [conversations, dispatch]);
 
+  async function fetchConversations() {
+    return await getConversations()
+      .then((fetchedConversations) => {
+        dispatch(setConversations(fetchedConversations));
+      })
+      .catch((error) => {
+        console.error('Failed to fetch conversations: ', error);
+      });
+  }
+
   const handleDeleteConversation = (id: string) => {
     fetch(`${apiHost}/api/delete_conversation?id=${id}`, {
       method: 'POST',
     })
       .then(() => {
-        // remove the image element from the DOM
-        const imageElement = document.querySelector(
-          `#img-${id}`,
-        ) as HTMLElement;
-        const parentElement = imageElement.parentNode as HTMLElement;
-        parentElement.parentNode?.removeChild(parentElement);
+        fetchConversations();
       })
       .catch((error) => console.error(error));
   };
@@ -112,6 +118,7 @@ export default function Navigation({
     })
       .then((response) => response.json())
       .then((data) => {
+        navigate('/');
         dispatch(setConversation(data));
         dispatch(
           updateConversationId({
@@ -120,120 +127,146 @@ export default function Navigation({
         );
       });
   };
+
+  async function updateConversationName(updatedConversation: {
+    name: string;
+    id: string;
+  }) {
+    await fetch(`${apiHost}/api/update_conversation_name`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(updatedConversation),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        if (data) {
+          navigate('/');
+          fetchConversations();
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }
   useOutsideAlerter(
     navRef,
     () => {
-      if (
-        window.matchMedia('(max-width: 768px)').matches &&
-        navState === 'ACTIVE' &&
-        apiKeyModalState === 'INACTIVE'
-      ) {
-        setNavState('INACTIVE');
+      if (isMobile && navOpen && apiKeyModalState === 'INACTIVE') {
+        setNavOpen(false);
         setIsDocsListOpen(false);
       }
     },
-    [navState, isDocsListOpen, apiKeyModalState],
+    [navOpen, isDocsListOpen, apiKeyModalState],
   );
 
   /*
     Needed to fix bug where if mobile nav was closed and then window was resized to desktop, nav would still be closed but the button to open would be gone, as per #1 on issue #146
   */
+
   useEffect(() => {
-    window.addEventListener('resize', () => {
-      if (window.matchMedia('(min-width: 768px)').matches) {
-        setNavState('ACTIVE');
-      } else {
-        setNavState('INACTIVE');
-      }
-    });
-  }, []);
+    setNavOpen(!isMobile);
+  }, [isMobile]);
 
   return (
     <>
+      {!navOpen && (
+        <button
+          className="duration-25 absolute sticky top-3 left-3 z-20 hidden transition-all md:block"
+          onClick={() => {
+            setNavOpen(!navOpen);
+          }}
+        >
+          <img
+            src={Expand}
+            alt="menu toggle"
+            className={`${
+              !navOpen ? 'rotate-180' : 'rotate-0'
+            } m-auto transition-all duration-200`}
+          />
+        </button>
+      )}
       <div
         ref={navRef}
         className={`${
-          navState === 'INACTIVE' && '-ml-96 md:-ml-[14rem]'
-        } duration-20 fixed z-20 flex h-full w-72 flex-col border-r-2 bg-gray-50 transition-all`}
+          !navOpen && '-ml-96 md:-ml-[18rem]'
+        } duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-2 bg-white transition-all`}
       >
-        <div className={'visible h-16 w-full border-b-2 md:hidden'}>
+        <div
+          className={'visible mt-2 flex h-16 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>
           <button
-            className="float-right mr-5 mt-5 h-5 w-5"
-            onClick={() =>
-              setNavState(navState === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE')
-            }
+            className="float-right mr-5"
+            onClick={() => {
+              setNavOpen(!navOpen);
+            }}
           >
             <img
-              src={Arrow1}
+              src={Expand}
               alt="menu toggle"
               className={`${
-                navState === 'INACTIVE' ? 'rotate-180' : 'rotate-0'
-              } m-auto w-3 transition-all duration-200`}
+                !navOpen ? 'rotate-180' : 'rotate-0'
+              } m-auto transition-all duration-200`}
             />
           </button>
         </div>
-        <NavLink
-          to={'/'}
-          onClick={() => {
-            dispatch(setConversation([]));
-            dispatch(updateConversationId({ query: { conversationId: null } }));
-          }}
-          className={({ isActive }) =>
-            `${
-              isActive && conversationId === null ? 'bg-gray-3000' : ''
-            } my-auto mx-4 mt-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100`
-          }
-        >
-          <img src={Message} className="ml-4 w-5"></img>
-          <p className="my-auto text-eerie-black">New Chat</p>
-        </NavLink>
-        <div className="conversations-container max-h-[25rem] overflow-y-auto">
-          {conversations
-            ? conversations.map((conversation) => {
-                return (
-                  <div
-                    key={conversation.id}
-                    onClick={() => {
-                      handleConversationClick(conversation.id);
-                    }}
-                    className={`my-auto mx-4 mt-4 flex h-12 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 ${
-                      conversationId === conversation.id ? 'bg-gray-100' : ''
-                    }`}
-                  >
-                    <div className="flex gap-4">
-                      <img src={Message} className="ml-2 w-5"></img>
-                      <p className="my-auto text-eerie-black">
-                        {conversation.name}
-                      </p>
-                    </div>
-
-                    {conversationId === conversation.id ? (
-                      <img
-                        src={Exit}
-                        alt="Exit"
-                        className="mr-4 h-3 w-3 cursor-pointer hover:opacity-50"
-                        id={`img-${conversation.id}`}
-                        onClick={(event) => {
-                          event.stopPropagation();
-                          handleDeleteConversation(conversation.id);
-                        }}
-                      />
-                    ) : null}
-                  </div>
-                );
-              })
-            : null}
+        <div className="mb-auto">
+          <NavLink
+            to={'/'}
+            onClick={() => {
+              dispatch(setConversation([]));
+              dispatch(
+                updateConversationId({
+                  query: { conversationId: null },
+                }),
+              );
+            }}
+            className={({ isActive }) =>
+              `${
+                isActive ? 'bg-gray-3000' : ''
+              } group mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray hover:bg-gray-3000`
+            }
+          >
+            <img
+              src={Add}
+              alt="new"
+              className="opacity-80 group-hover:opacity-100"
+            />
+            <p className=" text-sm text-dove-gray group-hover:text-neutral-600">
+              New Chat
+            </p>
+          </NavLink>
+          {conversations && (
+            <div className="conversations-container max-h-[25rem] overflow-y-auto">
+              <p className="ml-6 mt-3 text-sm font-semibold">Chats</p>
+              {conversations?.map((conversation) => (
+                <ConversationTile
+                  key={conversation.id}
+                  conversation={conversation}
+                  selectConversation={(id) => handleConversationClick(id)}
+                  onDeleteConversation={(id) => handleDeleteConversation(id)}
+                  onSave={(conversation) =>
+                    updateConversationName(conversation)
+                  }
+                />
+              ))}
+            </div>
+          )}
         </div>
 
-        <div className="flex-grow border-b-2 border-gray-100"></div>
         <div className="flex flex-col-reverse border-b-2">
           <div className="relative my-4 flex gap-2 px-2">
             <div
-              className="flex h-12 w-full cursor-pointer justify-between rounded-3xl rounded-md border-2 bg-white"
+              className="flex h-12 w-5/6 cursor-pointer justify-between rounded-3xl border-2 bg-white"
               onClick={() => setIsDocsListOpen(!isDocsListOpen)}
             >
               {selectedDocs && (
-                <p className="my-3 mx-4">
+                <p className="my-3 mx-4 overflow-hidden text-ellipsis whitespace-nowrap">
                   {selectedDocs.name} {selectedDocs.version}
                 </p>
               )}
@@ -241,7 +274,7 @@ export default function Navigation({
                 src={Arrow2}
                 alt="arrow"
                 className={`${
-                  isDocsListOpen ? 'rotate-0' : 'rotate-180'
+                  !isDocsListOpen ? 'rotate-0' : 'rotate-180'
                 } ml-auto mr-3 w-3 transition-all`}
               />
             </div>
@@ -251,7 +284,7 @@ export default function Navigation({
               onClick={() => setUploadModalState('ACTIVE')}
             ></img>
             {isDocsListOpen && (
-              <div className="absolute top-12 left-0 right-6 ml-2 mr-4 max-h-52 overflow-y-scroll bg-white shadow-lg">
+              <div className="absolute top-12 left-0 right-6 z-10 ml-2 mr-4 max-h-52 overflow-y-scroll bg-white shadow-lg">
                 {docs ? (
                   docs.map((doc, index) => {
                     if (doc.model === embeddingsName) {
@@ -267,18 +300,18 @@ export default function Navigation({
                           <p className="ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
                             {doc.name} {doc.version}
                           </p>
-                          {doc.location === 'local' ? (
+                          {doc.location === 'local' && (
                             <img
-                              src={Exit}
-                              alt="Exit"
-                              className="mr-4 h-3 w-3 cursor-pointer hover:opacity-50"
+                              src={Trash}
+                              alt="Delete"
+                              className="mr-4 h-4 w-4 cursor-pointer hover:opacity-50"
                               id={`img-${index}`}
                               onClick={(event) => {
                                 event.stopPropagation();
                                 handleDeleteClick(index, doc);
                               }}
                             />
-                          ) : null}
+                          )}
                         </div>
                       );
                     }
@@ -291,58 +324,71 @@ export default function Navigation({
               </div>
             )}
           </div>
-          <p className="ml-6 mt-3 font-bold text-jet">Source Docs</p>
+          <p className="ml-6 mt-3 text-sm font-semibold">Source Docs</p>
         </div>
         <div className="flex flex-col gap-2 border-b-2 py-2">
-          <div
-            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
-            onClick={() => {
-              setApiKeyModalState('ACTIVE');
-            }}
+          <NavLink
+            to="/settings"
+            className={({ isActive }) =>
+              `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${
+                isActive ? 'bg-gray-3000' : ''
+              }`
+            }
           >
-            <img src={Key} alt="key" className="ml-2 w-6" />
-            <p className="my-auto text-eerie-black">Reset Key</p>
-          </div>
+            <img src={SettingGear} alt="info" className="ml-2 w-5 opacity-60" />
+            <p className="my-auto text-sm text-eerie-black">Settings</p>
+          </NavLink>
         </div>
 
         <div className="flex flex-col gap-2 border-b-2 py-2">
           <NavLink
             to="/about"
             className={({ isActive }) =>
-              `my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${
+              `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${
                 isActive ? 'bg-gray-3000' : ''
               }`
             }
           >
             <img src={Info} alt="info" className="ml-2 w-5" />
-            <p className="my-auto text-eerie-black">About</p>
+            <p className="my-auto text-sm text-eerie-black">About</p>
           </NavLink>
 
+          <a
+            href="https://docs.docsgpt.co.uk/"
+            target="_blank"
+            rel="noreferrer"
+            className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
+          >
+            <img src={Documentation} alt="documentation" className="ml-2 w-5" />
+            <p className="my-auto text-sm text-eerie-black">Documentation</p>
+          </a>
           <a
             href="https://discord.gg/WHJdfbQDR4"
             target="_blank"
             rel="noreferrer"
-            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
+            className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
           >
-            <img src={Link} alt="link" className="ml-2 w-5" />
-            <p className="my-auto text-eerie-black">Discord</p>
+            <img src={Discord} alt="link" className="ml-2 w-5" />
+            <p className="my-auto text-sm text-eerie-black">
+              Visit our Discord
+            </p>
           </a>
 
           <a
             href="https://github.com/arc53/DocsGPT"
             target="_blank"
             rel="noreferrer"
-            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
+            className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
           >
-            <img src={Link} alt="link" className="ml-2 w-5" />
-            <p className="my-auto text-eerie-black">Github</p>
+            <img src={Github} alt="link" className="ml-2 w-5" />
+            <p className="my-auto text-sm text-eerie-black">Visit our Github</p>
           </a>
         </div>
       </div>
-      <div className="fixed h-16 w-full border-b-2 bg-gray-50 md:hidden">
+      <div className="fixed z-10 h-16 w-full border-b-2 bg-gray-50 md:hidden">
         <button
           className="mt-5 ml-6 h-6 w-6 md:hidden"
-          onClick={() => setNavState('ACTIVE')}
+          onClick={() => setNavOpen(true)}
         >
           <img src={Hamburger} alt="menu toggle" className="w-7" />
         </button>

frontend/src/PageNotFound.tsx

@@ -0,0 +1,15 @@
+import { Link } from 'react-router-dom';
+
+export default function PageNotFound() {
+  return (
+    <div className="mx-5 grid min-h-screen md:mx-36">
+      <p className="mx-auto my-auto mt-20 flex w-full max-w-6xl flex-col place-items-center gap-6 rounded-3xl bg-gray-100 p-6 text-jet lg:p-10 xl:p-16">
+        <h1>404</h1>
+        <p>The page you are looking for does not exist.</p>
+        <button className="pointer-cursor mr-4 flex cursor-pointer items-center justify-center rounded-full bg-blue-1000 py-2 px-4 text-white hover:bg-blue-3000">
+          <Link to="/">Go Back Home</Link>
+        </button>
+      </p>
+    </div>
+  );
+}

frontend/src/Setting.tsx

@@ -0,0 +1,824 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import Arrow2 from './assets/dropdown-arrow.svg';
+import ArrowLeft from './assets/arrow-left.svg';
+import ArrowRight from './assets/arrow-right.svg';
+import Trash from './assets/trash.svg';
+import {
+  selectPrompt,
+  setPrompt,
+  selectSourceDocs,
+} from './preferences/preferenceSlice';
+import { Doc } from './preferences/preferenceApi';
+
+type PromptProps = {
+  prompts: { name: string; id: string; type: string }[];
+  selectedPrompt: { name: string; id: string; type: string };
+  onSelectPrompt: (name: string, id: string, type: string) => void;
+  setPrompts: (prompts: { name: string; id: string; type: string }[]) => void;
+  apiHost: string;
+};
+
+const Setting: React.FC = () => {
+  const tabs = ['General', 'Prompts', 'Documents'];
+  //const tabs = ['General', 'Prompts', 'Documents', 'Widgets'];
+
+  const [activeTab, setActiveTab] = useState('General');
+  const [prompts, setPrompts] = useState<
+    { name: string; id: string; type: string }[]
+  >([]);
+  const selectedPrompt = useSelector(selectPrompt);
+  const [isAddPromptModalOpen, setAddPromptModalOpen] = useState(false);
+  const documents = useSelector(selectSourceDocs);
+  const [isAddDocumentModalOpen, setAddDocumentModalOpen] = useState(false);
+
+  const dispatch = useDispatch();
+
+  const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
+  const [widgetScreenshot, setWidgetScreenshot] = useState<File | null>(null);
+
+  const updateWidgetScreenshot = (screenshot: File | null) => {
+    setWidgetScreenshot(screenshot);
+  };
+
+  useEffect(() => {
+    const fetchPrompts = async () => {
+      try {
+        const response = await fetch(`${apiHost}/api/get_prompts`);
+        if (!response.ok) {
+          throw new Error('Failed to fetch prompts');
+        }
+        const promptsData = await response.json();
+        setPrompts(promptsData);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    fetchPrompts();
+  }, []);
+
+  const onDeletePrompt = (name: string, id: string) => {
+    setPrompts(prompts.filter((prompt) => prompt.id !== id));
+
+    fetch(`${apiHost}/api/delete_prompt`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      // send id in body only
+      body: JSON.stringify({ id: id }),
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error('Failed to delete prompt');
+        }
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+
+  const handleDeleteClick = (index: number, doc: Doc) => {
+    const docPath = 'indexes/' + 'local' + '/' + doc.name;
+
+    fetch(`${apiHost}/api/delete_old?path=${docPath}`, {
+      method: 'GET',
+    })
+      .then(() => {
+        // remove the image element from the DOM
+        const imageElement = document.querySelector(
+          `#img-${index}`,
+        ) as HTMLElement;
+        const parentElement = imageElement.parentNode as HTMLElement;
+        parentElement.parentNode?.removeChild(parentElement);
+      })
+      .catch((error) => console.error(error));
+  };
+
+  return (
+    <div className="p-4 pt-20 md:p-12">
+      <p className="text-2xl font-bold text-eerie-black">Settings</p>
+      <div className="mt-6 flex flex-row items-center space-x-4 overflow-x-auto md:space-x-8 ">
+        <div className="md:hidden">
+          <button
+            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 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'
+                  : '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>
+      {renderActiveTab()}
+
+      {/* {activeTab === 'Widgets' && (
+        <Widgets
+          widgetScreenshot={widgetScreenshot}
+          onWidgetScreenshotChange={updateWidgetScreenshot}
+        />
+      )} */}
+    </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 'General':
+        return <General />;
+      case 'Prompts':
+        return (
+          <Prompts
+            prompts={prompts}
+            selectedPrompt={selectedPrompt}
+            onSelectPrompt={(name, id, type) =>
+              dispatch(setPrompt({ name: name, id: id, type: type }))
+            }
+            setPrompts={setPrompts}
+            apiHost={apiHost}
+          />
+        );
+      case 'Documents':
+        return (
+          <Documents
+            documents={documents}
+            handleDeleteDocument={handleDeleteClick}
+          />
+        );
+      case 'Widgets':
+        return (
+          <Widgets
+            widgetScreenshot={widgetScreenshot} // Add this line
+            onWidgetScreenshotChange={updateWidgetScreenshot} // Add this line
+          />
+        );
+      default:
+        return null;
+    }
+  }
+};
+
+const General: React.FC = () => {
+  const themes = ['Light'];
+  const languages = ['English'];
+  const [selectedTheme, setSelectedTheme] = useState(themes[0]);
+  const [selectedLanguage, setSelectedLanguage] = useState(languages[0]);
+
+  return (
+    <div className="mt-[59px]">
+      <div className="mb-4">
+        <p className="font-bold text-jet">Select Theme</p>
+        <Dropdown
+          options={themes}
+          selectedValue={selectedTheme}
+          onSelect={setSelectedTheme}
+        />
+      </div>
+      <div>
+        <p className="font-bold text-jet">Select Language</p>
+        <Dropdown
+          options={languages}
+          selectedValue={selectedLanguage}
+          onSelect={setSelectedLanguage}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Setting;
+
+const Prompts: React.FC<PromptProps> = ({
+  prompts,
+  selectedPrompt,
+  onSelectPrompt,
+  setPrompts,
+  apiHost,
+}) => {
+  const handleSelectPrompt = ({
+    name,
+    id,
+    type,
+  }: {
+    name: string;
+    id: string;
+    type: string;
+  }) => {
+    setNewPromptName(name);
+    onSelectPrompt(name, id, type);
+  };
+  const [newPromptName, setNewPromptName] = useState(selectedPrompt.name);
+  const [newPromptContent, setNewPromptContent] = useState('');
+
+  const handleAddPrompt = async () => {
+    try {
+      const response = await fetch(`${apiHost}/api/create_prompt`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name: newPromptName,
+          content: newPromptContent,
+        }),
+      });
+      if (!response.ok) {
+        throw new Error('Failed to add prompt');
+      }
+      const newPrompt = await response.json();
+      if (setPrompts) {
+        setPrompts([
+          ...prompts,
+          { name: newPromptName, id: newPrompt.id, type: 'private' },
+        ]);
+      }
+      onSelectPrompt(newPromptName, newPrompt.id, newPromptContent);
+      setNewPromptName(newPromptName);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleDeletePrompt = () => {
+    setPrompts(prompts.filter((prompt) => prompt.id !== selectedPrompt.id));
+    console.log('selectedPrompt.id', selectedPrompt.id);
+
+    fetch(`${apiHost}/api/delete_prompt`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ id: selectedPrompt.id }),
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error('Failed to delete prompt');
+        }
+        // get 1st prompt and set it as selected
+        if (prompts.length > 0) {
+          onSelectPrompt(prompts[0].name, prompts[0].id, prompts[0].type);
+          setNewPromptName(prompts[0].name);
+        }
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+
+  useEffect(() => {
+    const fetchPromptContent = async () => {
+      console.log('fetching prompt content');
+      try {
+        const response = await fetch(
+          `${apiHost}/api/get_single_prompt?id=${selectedPrompt.id}`,
+          {
+            method: 'GET',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          },
+        );
+        if (!response.ok) {
+          throw new Error('Failed to fetch prompt content');
+        }
+        const promptContent = await response.json();
+        setNewPromptContent(promptContent.content);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    fetchPromptContent();
+  }, [selectedPrompt]);
+
+  const handleSaveChanges = () => {
+    fetch(`${apiHost}/api/update_prompt`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        id: selectedPrompt.id,
+        name: newPromptName,
+        content: newPromptContent,
+      }),
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error('Failed to update prompt');
+        }
+        onSelectPrompt(newPromptName, selectedPrompt.id, selectedPrompt.type);
+        setNewPromptName(newPromptName);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+
+  return (
+    <div className="mt-[59px]">
+      <div className="mb-4">
+        <p className="font-semibold">Active Prompt</p>
+        <DropdownPrompt
+          options={prompts}
+          selectedValue={selectedPrompt.name}
+          onSelect={handleSelectPrompt}
+        />
+      </div>
+
+      <div className="mb-4">
+        <p>Prompt name </p>{' '}
+        <p className="mb-2 text-xs italic text-eerie-black text-gray-500">
+          start by editing name
+        </p>
+        <input
+          type="text"
+          value={newPromptName}
+          placeholder="Active Prompt Name"
+          className="w-full rounded-lg border-2 p-2"
+          onChange={(e) => setNewPromptName(e.target.value)}
+        />
+      </div>
+
+      <div className="mb-4">
+        <p className="mb-2">Prompt content</p>
+        <textarea
+          className="h-32 w-full rounded-lg  border-2 p-2"
+          value={newPromptContent}
+          onChange={(e) => setNewPromptContent(e.target.value)}
+          placeholder="Active prompt contents"
+        />
+      </div>
+
+      <div className="flex justify-between">
+        <button
+          className={`rounded-lg bg-green-500 px-4 py-2 font-bold text-white transition-all hover:bg-green-700 ${
+            newPromptName === selectedPrompt.name
+              ? 'cursor-not-allowed opacity-50'
+              : ''
+          }`}
+          onClick={handleAddPrompt}
+          disabled={newPromptName === selectedPrompt.name}
+        >
+          Add New Prompt
+        </button>
+        <button
+          className={`rounded-lg bg-red-500 px-4 py-2 font-bold text-white transition-all hover:bg-red-700 ${
+            selectedPrompt.type === 'public'
+              ? 'cursor-not-allowed opacity-50'
+              : ''
+          }`}
+          onClick={handleDeletePrompt}
+          disabled={selectedPrompt.type === 'public'}
+        >
+          Delete Prompt
+        </button>
+        <button
+          className={`rounded-lg bg-blue-500 px-4 py-2 font-bold text-white transition-all hover:bg-blue-700 ${
+            selectedPrompt.type === 'public'
+              ? 'cursor-not-allowed opacity-50'
+              : ''
+          }`}
+          onClick={handleSaveChanges}
+          disabled={selectedPrompt.type === 'public'}
+        >
+          Save Changes
+        </button>
+      </div>
+    </div>
+  );
+};
+
+function DropdownPrompt({
+  options,
+  selectedValue,
+  onSelect,
+}: {
+  options: { name: string; id: string; type: string }[];
+  selectedValue: string;
+  onSelect: (value: { name: string; id: string; type: string }) => void;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="relative mt-2 w-32">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex w-full cursor-pointer items-center rounded-xl border-2 bg-white p-3"
+      >
+        <span className="flex-1 overflow-hidden text-ellipsis">
+          {selectedValue}
+        </span>
+        <img
+          src={Arrow2}
+          alt="arrow"
+          className={`transform ${
+            isOpen ? 'rotate-180' : 'rotate-0'
+          } h-3 w-3 transition-transform`}
+        />
+      </button>
+      {isOpen && (
+        <div className="absolute left-0 right-0 z-50 -mt-3 rounded-b-xl border-2 bg-white shadow-lg">
+          {options.map((option, index) => (
+            <div
+              key={index}
+              className="flex cursor-pointer items-center justify-between hover:bg-gray-100"
+            >
+              <span
+                onClick={() => {
+                  onSelect(option);
+                  setIsOpen(false);
+                }}
+                className="ml-2 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3"
+              >
+                {option.name}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Dropdown({
+  options,
+  selectedValue,
+  onSelect,
+  showDelete,
+  onDelete,
+}: {
+  options: string[];
+  selectedValue: string;
+  onSelect: (value: string) => void;
+  showDelete?: boolean; // optional
+  onDelete?: (value: string) => void; // optional
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="relative mt-2 w-32">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex w-full cursor-pointer items-center rounded-xl border-2 bg-white p-3"
+      >
+        <span className="flex-1 overflow-hidden text-ellipsis">
+          {selectedValue}
+        </span>
+        <img
+          src={Arrow2}
+          alt="arrow"
+          className={`transform ${
+            isOpen ? 'rotate-180' : 'rotate-0'
+          } h-3 w-3 transition-transform`}
+        />
+      </button>
+      {isOpen && (
+        <div className="absolute left-0 right-0 z-50 -mt-3 rounded-b-xl border-2 bg-white shadow-lg">
+          {options.map((option, index) => (
+            <div
+              key={index}
+              className="flex cursor-pointer items-center justify-between hover:bg-gray-100"
+            >
+              <span
+                onClick={() => {
+                  onSelect(option);
+                  setIsOpen(false);
+                }}
+                className="ml-2 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3"
+              >
+                {option}
+              </span>
+              {showDelete && onDelete && (
+                <button onClick={() => onDelete(option)} className="p-2">
+                  {/* Icon or text for delete button */}
+                  Delete
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+type AddPromptModalProps = {
+  newPromptName: string;
+  onNewPromptNameChange: (name: string) => void;
+  onAddPrompt: () => void;
+  onClose: () => void;
+};
+
+const AddPromptModal: React.FC<AddPromptModalProps> = ({
+  newPromptName,
+  onNewPromptNameChange,
+  onAddPrompt,
+  onClose,
+}) => {
+  return (
+    <div className="fixed top-0 left-0 flex h-screen w-screen items-center justify-center bg-gray-900 bg-opacity-50">
+      <div className="rounded-3xl bg-white p-4">
+        <p className="mb-2 text-2xl font-bold text-jet">Add New Prompt</p>
+        <input
+          type="text"
+          placeholder="Enter Prompt Name"
+          value={newPromptName}
+          onChange={(e) => onNewPromptNameChange(e.target.value)}
+          className="mb-4 w-full rounded-3xl border-2 p-2"
+        />
+        <button
+          onClick={onAddPrompt}
+          className="rounded-3xl bg-purple-300 px-4 py-2 font-bold text-white transition-all hover:bg-purple-600"
+        >
+          Save
+        </button>
+        <button
+          onClick={onClose}
+          className="mt-4 rounded-3xl px-4 py-2 font-bold text-red-500"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+};
+
+type DocumentsProps = {
+  documents: Doc[] | null;
+  handleDeleteDocument: (index: number, document: Doc) => void;
+};
+
+const Documents: React.FC<DocumentsProps> = ({
+  documents,
+  handleDeleteDocument,
+}) => {
+  return (
+    <div className="mt-8">
+      <div className="flex flex-col">
+        {/* <h2 className="text-xl font-semibold">Documents</h2> */}
+
+        <div className="mt-[27px] overflow-x-auto">
+          <table className="block w-full table-auto content-center justify-center text-center">
+            <thead>
+              <tr>
+                <th className="border px-4 py-2">Document Name</th>
+                <th className="border px-4 py-2">Vector Date</th>
+                <th className="border px-4 py-2">Type</th>
+                <th className="border px-4 py-2"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {documents &&
+                documents.map((document, index) => (
+                  <tr key={index}>
+                    <td className="border px-4 py-2">{document.name}</td>
+                    <td className="border px-4 py-2">{document.date}</td>
+                    <td className="border px-4 py-2">
+                      {document.location === 'remote'
+                        ? 'Pre-loaded'
+                        : 'Private'}
+                    </td>
+                    <td className="border px-4 py-2">
+                      {document.location !== 'remote' && (
+                        <img
+                          src={Trash}
+                          alt="Delete"
+                          className="h-4 w-4 cursor-pointer hover:opacity-50"
+                          id={`img-${index}`}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            handleDeleteDocument(index, document);
+                          }}
+                        />
+                      )}
+                    </td>
+                  </tr>
+                ))}
+            </tbody>
+          </table>
+        </div>
+        {/* <button
+          onClick={toggleAddDocumentModal}
+          className="mt-10 w-32 rounded-lg bg-purple-300 px-4 py-2 font-bold text-white transition-all hover:bg-purple-600"
+        >
+          Add New
+        </button> */}
+      </div>
+
+      {/* {isAddDocumentModalOpen && (
+        <AddDocumentModal
+          newDocument={newDocument}
+          onNewDocumentChange={setNewDocument}
+          onAddDocument={addDocument}
+          onClose={toggleAddDocumentModal}
+        />
+      )} */}
+    </div>
+  );
+};
+
+type Document = {
+  name: string;
+  vectorDate: string;
+  vectorLocation: string;
+};
+
+// Modal for adding a new document
+type AddDocumentModalProps = {
+  newDocument: Document;
+  onNewDocumentChange: (document: Document) => void;
+  onAddDocument: () => void;
+  onClose: () => void;
+};
+
+const AddDocumentModal: React.FC<AddDocumentModalProps> = ({
+  newDocument,
+  onNewDocumentChange,
+  onAddDocument,
+  onClose,
+}) => {
+  return (
+    <div className="fixed top-0 left-0 flex h-screen w-screen items-center justify-center bg-gray-900 bg-opacity-50">
+      <div className="w-[50%] rounded-lg bg-white p-4">
+        <p className="mb-2 text-2xl font-bold text-jet">Add New Document</p>
+        <input
+          type="text"
+          placeholder="Document Name"
+          value={newDocument.name}
+          onChange={(e) =>
+            onNewDocumentChange({ ...newDocument, name: e.target.value })
+          }
+          className="mb-4 w-full rounded-lg border-2 p-2"
+        />
+        <input
+          type="text"
+          placeholder="Vector Date"
+          value={newDocument.vectorDate}
+          onChange={(e) =>
+            onNewDocumentChange({ ...newDocument, vectorDate: e.target.value })
+          }
+          className="mb-4 w-full rounded-lg border-2 p-2"
+        />
+        <input
+          type="text"
+          placeholder="Vector Location"
+          value={newDocument.vectorLocation}
+          onChange={(e) =>
+            onNewDocumentChange({
+              ...newDocument,
+              vectorLocation: e.target.value,
+            })
+          }
+          className="mb-4 w-full rounded-lg border-2 p-2"
+        />
+        <button
+          onClick={onAddDocument}
+          className="rounded-lg bg-purple-300 px-4 py-2 font-bold text-white transition-all hover:bg-purple-600"
+        >
+          Save
+        </button>
+        <button
+          onClick={onClose}
+          className="mt-4 rounded-lg px-4 py-2 font-bold text-red-500"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+};
+
+const Widgets: React.FC<{
+  widgetScreenshot: File | null;
+  onWidgetScreenshotChange: (screenshot: File | null) => void;
+}> = ({ widgetScreenshot, onWidgetScreenshotChange }) => {
+  const widgetSources = ['Source 1', 'Source 2', 'Source 3'];
+  const widgetMethods = ['Method 1', 'Method 2', 'Method 3'];
+  const widgetTypes = ['Type 1', 'Type 2', 'Type 3'];
+
+  const [selectedWidgetSource, setSelectedWidgetSource] = useState(
+    widgetSources[0],
+  );
+  const [selectedWidgetMethod, setSelectedWidgetMethod] = useState(
+    widgetMethods[0],
+  );
+  const [selectedWidgetType, setSelectedWidgetType] = useState(widgetTypes[0]);
+
+  // const [widgetScreenshot, setWidgetScreenshot] = useState<File | null>(null);
+  const [widgetCode, setWidgetCode] = useState<string>(''); // Your widget code state
+
+  const handleScreenshotChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const files = event.target.files;
+
+    if (files && files.length > 0) {
+      const selectedScreenshot = files[0];
+      onWidgetScreenshotChange(selectedScreenshot); // Update the screenshot in the parent component
+    }
+  };
+
+  const handleCopyToClipboard = () => {
+    // Create a new textarea element to select the text
+    const textArea = document.createElement('textarea');
+    textArea.value = widgetCode;
+    document.body.appendChild(textArea);
+
+    // Select and copy the text
+    textArea.select();
+    document.execCommand('copy');
+
+    // Clean up the textarea element
+    document.body.removeChild(textArea);
+  };
+
+  return (
+    <div>
+      <div className="mt-[59px]">
+        <p className="font-bold text-jet">Widget Source</p>
+        <Dropdown
+          options={widgetSources}
+          selectedValue={selectedWidgetSource}
+          onSelect={setSelectedWidgetSource}
+        />
+      </div>
+      <div className="mt-5">
+        <p className="font-bold text-jet">Widget Method</p>
+        <Dropdown
+          options={widgetMethods}
+          selectedValue={selectedWidgetMethod}
+          onSelect={setSelectedWidgetMethod}
+        />
+      </div>
+      <div className="mt-5">
+        <p className="font-bold text-jet">Widget Type</p>
+        <Dropdown
+          options={widgetTypes}
+          selectedValue={selectedWidgetType}
+          onSelect={setSelectedWidgetType}
+        />
+      </div>
+      <div className="mt-6">
+        <p className="font-bold text-jet">Widget Code Snippet</p>
+        <textarea
+          rows={4}
+          value={widgetCode}
+          onChange={(e) => setWidgetCode(e.target.value)}
+          className="mt-3 w-full rounded-lg border-2 p-2"
+        />
+      </div>
+      <div className="mt-1">
+        <button
+          onClick={handleCopyToClipboard}
+          className="rounded-lg bg-blue-400 px-2 py-2 font-bold text-white transition-all hover:bg-blue-600"
+        >
+          Copy
+        </button>
+      </div>
+
+      <div className="mt-4">
+        <p className="text-lg font-semibold">Widget Screenshot</p>
+        <input type="file" accept="image/*" onChange={handleScreenshotChange} />
+      </div>
+
+      {widgetScreenshot && (
+        <div className="mt-4">
+          <img
+            src={URL.createObjectURL(widgetScreenshot)}
+            alt="Widget Screenshot"
+            className="max-w-full rounded-lg border border-gray-300"
+          />
+        </div>
+      )}
+    </div>
+  );
+};

frontend/src/assets/add.svg

@@ -0,0 +1,10 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2494_3464)">
+<path d="M7.43717 14.1667C7.43717 14.4485 7.54912 14.7187 7.74837 14.918C7.94763 15.1172 8.21788 15.2292 8.49967 15.2292C8.78147 15.2292 9.05172 15.1172 9.25098 14.918C9.45023 14.7187 9.56217 14.4485 9.56217 14.1667V9.56249H14.1663C14.4481 9.56249 14.7184 9.45055 14.9176 9.2513C15.1169 9.05204 15.2288 8.78179 15.2288 8.49999C15.2288 8.2182 15.1169 7.94795 14.9176 7.74869C14.7184 7.54944 14.4481 7.43749 14.1663 7.43749H9.56217V2.83333C9.56217 2.55154 9.45023 2.28128 9.25098 2.08203C9.05172 1.88277 8.78147 1.77083 8.49967 1.77083C8.21788 1.77083 7.94763 1.88277 7.74837 2.08203C7.54912 2.28128 7.43717 2.55154 7.43717 2.83333V7.43749H2.83301C2.55122 7.43749 2.28096 7.54944 2.08171 7.74869C1.88245 7.94795 1.77051 8.2182 1.77051 8.49999C1.77051 8.78179 1.88245 9.05204 2.08171 9.2513C2.28096 9.45055 2.55122 9.56249 2.83301 9.56249H7.43717V14.1667Z" fill="#5D5D5D" />
+</g>
+<defs>
+<clipPath id="clip0_2494_3464">
+<rect width="17" height="17" fill="white"/>
+</clipPath>
+</defs>
+</svg>

frontend/src/assets/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+  <path d="M440-800v487L216-537l-56 57 320 320 320-320-56-57-224 224v-487h-80Z" />
+</svg>

frontend/src/assets/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="23" viewBox="0 0 13 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.3183 20.8523C12.4198 20.9597 12.4991 21.0861 12.5518 21.2242C12.6044 21.3622 12.6294 21.5093 12.6252 21.657C12.621 21.8047 12.5878 21.9502 12.5274 22.0851C12.467 22.2199 12.3807 22.3416 12.2733 22.4431C12.1659 22.5446 12.0395 22.6239 11.9014 22.6766C11.7634 22.7293 11.6163 22.7542 11.4686 22.75C11.3208 22.7459 11.1754 22.7126 11.0405 22.6522C10.9057 22.5919 10.784 22.5055 10.6825 22.3981L1.12001 12.2731C0.922533 12.0642 0.812501 11.7877 0.812501 11.5002C0.812501 11.2128 0.922533 10.9362 1.12001 10.7273L10.6825 0.601207C10.7833 0.49145 10.905 0.40282 11.0403 0.340468C11.1757 0.278115 11.3221 0.243281 11.4711 0.23799C11.62 0.232697 11.7685 0.257054 11.908 0.309644C12.0474 0.362231 12.175 0.442004 12.2834 0.544328C12.3917 0.646653 12.4787 0.769488 12.5392 0.9057C12.5997 1.04191 12.6325 1.18878 12.6357 1.33779C12.639 1.48679 12.6126 1.63495 12.5581 1.77367C12.5036 1.91238 12.4221 2.03889 12.3183 2.14583L3.48476 11.5002L12.3183 20.8523Z" fill="#7D54D1"/>
+</svg>

frontend/src/assets/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="23" viewBox="0 0 13 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.681741 20.8523C0.580245 20.9597 0.500899 21.0861 0.448232 21.2242C0.395564 21.3622 0.370607 21.5093 0.374785 21.657C0.378964 21.8047 0.412197 21.9502 0.472586 22.0851C0.532974 22.2199 0.619336 22.3416 0.726741 22.4431C0.834146 22.5446 0.96049 22.6239 1.09856 22.6766C1.23663 22.7293 1.38372 22.7542 1.53144 22.75C1.67915 22.7459 1.8246 22.7126 1.95947 22.6522C2.09434 22.5919 2.216 22.5055 2.31749 22.3981L11.88 12.2731C12.0775 12.0642 12.1875 11.7877 12.1875 11.5002C12.1875 11.2128 12.0775 10.9362 11.88 10.7273L2.31749 0.601207C2.21666 0.49145 2.09503 0.40282 1.95967 0.340468C1.8243 0.278115 1.67789 0.243281 1.52895 0.23799C1.38 0.232697 1.23149 0.257054 1.09204 0.309644C0.95259 0.362231 0.824978 0.442004 0.716618 0.544328C0.608256 0.646653 0.521307 0.769488 0.46082 0.9057C0.400333 1.04191 0.367515 1.18878 0.364269 1.33779C0.361025 1.48679 0.387418 1.63495 0.441917 1.77367C0.496417 1.91238 0.577936 2.03889 0.681739 2.14583L9.51524 11.5002L0.681741 20.8523Z" fill="#7D54D1"/>
+</svg>

frontend/src/assets/checkMark2.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="11" viewBox="0 0 14 11" fill="none">
+  <path d="M4.95919 10.1906C4.84318 10.1902 4.72847 10.166 4.62222 10.1194C4.51596 10.0729 4.42041 10.0049 4.34152 9.91985L0.229353 5.54538C0.0756344 5.38157 -0.00671208 5.1634 0.000428491 4.93886C0.00756906 4.71433 0.103612 4.50183 0.267428 4.34812C0.431245 4.1944 0.649417 4.11205 0.873948 4.11919C1.09848 4.12633 1.31098 4.22238 1.4647 4.38619L4.95073 8.10068L12.0666 0.316329C12.1389 0.226405 12.2287 0.152193 12.3306 0.0982513C12.4326 0.0443098 12.5445 0.0117775 12.6594 0.00265255C12.7744 -0.00647237 12.89 0.00800286 12.9992 0.045189C13.1084 0.082375 13.2088 0.141487 13.2943 0.218894C13.3798 0.296301 13.4485 0.390369 13.4964 0.49532C13.5442 0.600272 13.57 0.713891 13.5723 0.829198C13.5746 0.944506 13.5534 1.05907 13.5098 1.16585C13.4662 1.27263 13.4012 1.36937 13.3189 1.45014L5.58533 9.91139C5.50718 9.998 5.41197 10.0675 5.30567 10.1156C5.19938 10.1636 5.0843 10.1892 4.96766 10.1906H4.95919Z" fill="#747474"/>
+</svg>

frontend/src/assets/checkmark.svg

@@ -0,0 +1 @@
+<svg width="16px" height="16px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#11ee1c" stroke="#11ee1c" stroke-width="83.96799999999999"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M866.133333 258.133333L362.666667 761.6l-204.8-204.8L98.133333 618.666667 362.666667 881.066667l563.2-563.2z" fill="#11ee1c"></path></g></svg>

frontend/src/assets/copy.svg

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

frontend/src/assets/discord.svg

@@ -0,0 +1 @@
+<svg fill="none" width="20" height="20" viewBox="0 0 22 20" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M18.942 5.556a16.299 16.299 0 0 0-4.126-1.297c-.178.321-.385.754-.529 1.097a15.175 15.175 0 0 0-4.573 0 11.583 11.583 0 0 0-.535-1.097 16.274 16.274 0 0 0-4.129 1.3c-2.611 3.946-3.319 7.794-2.965 11.587a16.494 16.494 0 0 0 5.061 2.593 12.65 12.65 0 0 0 1.084-1.785 10.689 10.689 0 0 1-1.707-.831c.143-.106.283-.217.418-.331 3.291 1.539 6.866 1.539 10.118 0 .137.114.277.225.418.331-.541.326-1.114.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595c.415-4.396-.709-8.209-2.973-11.589zM8.678 14.813c-.988 0-1.798-.922-1.798-2.045s.793-2.047 1.798-2.047 1.815.922 1.798 2.047c.001 1.123-.793 2.045-1.798 2.045zm6.644 0c-.988 0-1.798-.922-1.798-2.045s.793-2.047 1.798-2.047 1.815.922 1.798 2.047c0 1.123-.793 2.045-1.798 2.045z" fill="black" fill-opacity="0.54"/></svg>

frontend/src/assets/documentation.svg

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

frontend/src/assets/edit.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none">
+  <path d="M10.0588 2.74568L12.5294 5.15732M8.41176 14H15M1.82353 10.7845L1 14L4.29412 13.1961L13.8355 3.88237C14.1443 3.58087 14.3178 3.172 14.3178 2.74568C14.3178 2.31936 14.1443 1.9105 13.8355 1.609L13.6939 1.47073C13.385 1.16932 12.9662 1 12.5294 1C12.0927 1 11.6738 1.16932 11.3649 1.47073L1.82353 10.7845Z" stroke="#747474" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/src/assets/expand.svg

@@ -0,0 +1,4 @@
+<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.03371 5.27275L4.1915 20.9162C4.20021 21.7802 4.90766 22.4735 5.77162 22.4648L21.4151 22.307C22.2791 22.2983 22.9724 21.5909 22.9637 20.7269L22.8059 5.0834C22.7972 4.21944 22.0897 3.52612 21.2258 3.53483L5.58228 3.69262C4.71831 3.70134 4.02499 4.40878 4.03371 5.27275Z" stroke="#949494" stroke-width="2.08591" stroke-linejoin="round"/>
+<path d="M9.42289 22.428L9.23354 3.65585M17.6924 15.0436L15.5856 12.9788L17.6504 10.872M6.29419 22.4596L12.5516 22.3965M6.10484 3.68741L12.3622 3.62429" stroke="#949494" stroke-width="2.08591" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/src/assets/github.svg

@@ -0,0 +1,5 @@
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>github</title>
+  <rect width="24" height="24" fill="none"/>
+  <path d="M12,2A10,10,0,0,0,8.84,21.5c.5.08.66-.23.66-.5V19.31C6.73,19.91,6.14,18,6.14,18A2.69,2.69,0,0,0,5,16.5c-.91-.62.07-.6.07-.6a2.1,2.1,0,0,1,1.53,1,2.15,2.15,0,0,0,2.91.83,2.16,2.16,0,0,1,.63-1.34C8,16.17,5.62,15.31,5.62,11.5a3.87,3.87,0,0,1,1-2.71,3.58,3.58,0,0,1,.1-2.64s.84-.27,2.75,1a9.63,9.63,0,0,1,5,0c1.91-1.29,2.75-1,2.75-1a3.58,3.58,0,0,1,.1,2.64,3.87,3.87,0,0,1,1,2.71c0,3.82-2.34,4.66-4.57,4.91a2.39,2.39,0,0,1,.69,1.85V21c0,.27.16.59.67.5A10,10,0,0,0,12,2Z" fill="black" fill-opacity="0.54"/>
+</svg>

frontend/src/assets/settingGear.svg

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

frontend/src/assets/trash.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="15" viewBox="0 0 12 15" fill="none">
+  <path d="M0.857143 13.3333C0.857143 13.7754 1.03775 14.1993 1.35925 14.5118C1.68074 14.8244 2.11677 15 2.57143 15H9.42857C9.88323 15 10.3193 14.8244 10.6408 14.5118C10.9622 14.1993 11.1429 13.7754 11.1429 13.3333V3.33333H0.857143V13.3333ZM2.57143 5H9.42857V13.3333H2.57143V5ZM9 0.833333L8.14286 0H3.85714L3 0.833333H0V2.5H12V0.833333H9Z" fill="#747474"/>
+</svg>

frontend/src/components/Avatar.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+export default function Avatar({
+  avatar,
+  size,
+  className,
+}: {
+  avatar: string | ReactNode;
+  size?: 'SMALL' | 'MEDIUM' | 'LARGE';
+  className: string;
+}) {
+  return <div className={`${className} flex-shrink-0`}>{avatar}</div>;
+}

frontend/src/conversation/Conversation.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useRef } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import Hero from '../Hero';
 import { AppDispatch } from '../store';
@@ -14,6 +14,7 @@ import Send from './../assets/send.svg';
 import Spinner from './../assets/spinner.svg';
 import { FEEDBACK, Query } from './conversationModels';
 import { sendFeedback } from './conversationApi';
+import ArrowDown from './../assets/arrow-down.svg';
 
 export default function Conversation() {
   const queries = useSelector(selectQueries);
@@ -22,12 +23,49 @@ export default function Conversation() {
   const endMessageRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLDivElement>(null);
 
-  useEffect(
-    () => endMessageRef?.current?.scrollIntoView({ behavior: 'smooth' }),
-    [queries.length, queries[queries.length - 1]],
-  );
+  const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
+
+  useEffect(() => {
+    scrollIntoView();
+  }, [queries.length, queries[queries.length - 1]]);
+
+  useEffect(() => {
+    const element = document.getElementById('inputbox') as HTMLInputElement;
+    if (element) {
+      element.focus();
+    }
+  }, []);
+
+  useEffect(() => {
+    const observerCallback: IntersectionObserverCallback = (entries) => {
+      entries.forEach((entry) => {
+        setHasScrolledToLast(entry.isIntersecting);
+      });
+    };
+
+    const observer = new IntersectionObserver(observerCallback, {
+      root: null,
+      threshold: [1, 0.8],
+    });
+    if (endMessageRef.current) {
+      observer.observe(endMessageRef.current);
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [endMessageRef.current]);
+
+  const scrollIntoView = () => {
+    endMessageRef?.current?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+    });
+  };
 
   const handleQuestion = (question: string) => {
+    question = question.trim();
+    if (question === '') return;
     dispatch(addQuery({ prompt: question }));
     dispatch(fetchAnswer({ question }));
   };
@@ -46,7 +84,7 @@ export default function Conversation() {
       responseView = (
         <ConversationBubble
           ref={endMessageRef}
-          className={`${index === queries.length - 1 ? 'mb-24' : 'mb-7'}`}
+          className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'}`}
           key={`${index}ERROR`}
           message={query.error}
           type="ERROR"
@@ -56,7 +94,7 @@ export default function Conversation() {
       responseView = (
         <ConversationBubble
           ref={endMessageRef}
-          className={`${index === queries.length - 1 ? 'mb-24' : 'mb-7'}`}
+          className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'}`}
           key={`${index}ANSWER`}
           message={query.response}
           type={'ANSWER'}
@@ -78,15 +116,28 @@ export default function Conversation() {
   };
 
   return (
-    <div className="flex justify-center p-4">
+    <div className="flex flex-col justify-center p-4 md:flex-row">
+      {queries.length > 0 && !hasScrolledToLast && (
+        <button
+          onClick={scrollIntoView}
+          aria-label="scroll to bottom"
+          className="fixed bottom-32 right-14 z-10 flex h-7 w-7  items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 bg-opacity-50 md:h-9 md:w-9 md:bg-opacity-100 "
+        >
+          <img
+            src={ArrowDown}
+            alt="arrow down"
+            className="h4- w-4 opacity-50 md:h-5 md:w-5"
+          />
+        </button>
+      )}
+
       {queries.length > 0 && (
         <div className="mt-20 flex flex-col transition-all md:w-3/4">
           {queries.map((query, index) => {
             return (
               <Fragment key={index}>
                 <ConversationBubble
-                  ref={endMessageRef}
-                  className={'mb-7'}
+                  className={'last:mb-27 mb-7'}
                   key={`${index}QUESTION`}
                   message={query.prompt}
                   type="QUESTION"
@@ -98,14 +149,19 @@ export default function Conversation() {
           })}
         </div>
       )}
-      {queries.length === 0 && <Hero className="mt-24 md:mt-52"></Hero>}
-      <div className="fixed bottom-0 flex w-10/12 flex-col items-end self-center md:w-[50%]">
-        <div className="flex w-full">
+      {queries.length === 0 && (
+        <Hero className="mt-24 h-[100vh] md:mt-52"></Hero>
+      )}
+      <div className="relative bottom-0 flex w-10/12 flex-col items-end self-center bg-white pt-3 md:fixed md:w-[65%]">
+        <div className="flex h-full w-full">
           <div
+            id="inputbox"
             ref={inputRef}
+            tabIndex={1}
+            placeholder="Type your message here..."
             contentEditable
             onPaste={handlePaste}
-            className={`border-000000 overflow-x-hidden; max-h-24 min-h-[2.6rem] w-full overflow-y-auto whitespace-pre-wrap rounded-xl border bg-white py-2 pl-4 pr-9 leading-7 opacity-100 focus:outline-none`}
+            className={`border-000000 overflow-x-hidden; max-h-24 min-h-[2.6rem] w-full overflow-y-auto whitespace-pre-wrap rounded-3xl border bg-white py-2 pl-4 pr-9 text-base leading-7 opacity-100 focus:outline-none`}
             onKeyDown={(e) => {
               if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
@@ -136,7 +192,7 @@ export default function Conversation() {
             </div>
           )}
         </div>
-        <p className="w-[100vw] self-center bg-white p-5 text-center text-xs text-gray-2000">
+        <p className="text-gray-595959 w-[100vw] self-center bg-white p-5 text-center text-xs md:w-full">
           This is a chatbot that uses the GPT-3, Faiss and LangChain to answer
           questions.
         </p>

frontend/src/conversation/ConversationBubble.module.css

@@ -0,0 +1,11 @@
+.list p {
+  display: inline;
+}
+
+.list li:not(:first-child) {
+  margin-top: 1em;
+}
+
+.list li > .list {
+  margin-top: 1em;
+}

frontend/src/conversation/ConversationBubble.tsx

@@ -1,12 +1,18 @@
 import { forwardRef, useState } from 'react';
-import Avatar from '../Avatar';
+import Avatar from '../components/Avatar';
+import remarkGfm from 'remark-gfm';
 import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
+import classes from './ConversationBubble.module.css';
 import Alert from './../assets/alert.svg';
 import { ReactComponent as Like } from './../assets/like.svg';
 import { ReactComponent as Dislike } from './../assets/dislike.svg';
+import { ReactComponent as Copy } from './../assets/copy.svg';
+import { ReactComponent as CheckMark } from './../assets/checkmark.svg';
 import ReactMarkdown from 'react-markdown';
+import copy from 'copy-to-clipboard';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import DocsGPT3 from '../assets/cute_docsgpt3.svg';
 
 const DisableSourceFE = import.meta.env.VITE_DISABLE_SOURCE_FE || false;
 
@@ -24,26 +30,31 @@ const ConversationBubble = forwardRef<
   { message, type, className, feedback, handleFeedback, sources },
   ref,
 ) {
-  const [showFeedback, setShowFeedback] = useState(false);
   const [openSource, setOpenSource] = useState<number | null>(null);
-  const List = ({
-    ordered,
-    children,
-  }: {
-    ordered?: boolean;
-    children: React.ReactNode;
-  }) => {
-    const Tag = ordered ? 'ol' : 'ul';
-    return <Tag className="list-inside list-disc">{children}</Tag>;
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyClick = (text: string) => {
+    copy(text);
+    setCopied(true);
+    // Reset copied to false after a few seconds
+    setTimeout(() => {
+      setCopied(false);
+    }, 3000);
   };
+  const [isCopyHovered, setIsCopyHovered] = useState(false);
+  const [isLikeHovered, setIsLikeHovered] = useState(false);
+  const [isDislikeHovered, setIsDislikeHovered] = useState(false);
+  const [isLikeClicked, setIsLikeClicked] = useState(false);
+  const [isDislikeClicked, setIsDislikeClicked] = useState(false);
+
   let bubble;
 
   if (type === 'QUESTION') {
     bubble = (
       <div ref={ref} className={`flex flex-row-reverse self-end ${className}`}>
         <Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
-        <div className="mr-2 ml-10 flex items-center rounded-3xl bg-blue-1000 p-3.5 text-white">
-          <ReactMarkdown className="whitespace-pre-wrap break-words">
+        <div className="mr-2 ml-10 flex items-center rounded-3xl bg-purple-30 p-3.5 text-white">
+          <ReactMarkdown className="whitespace-pre-wrap break-all">
             {message}
           </ReactMarkdown>
         </div>
@@ -53,24 +64,33 @@ const ConversationBubble = forwardRef<
     bubble = (
       <div
         ref={ref}
-        className={`flex self-start ${className} flex-col`}
-        onMouseEnter={() => setShowFeedback(true)}
-        onMouseLeave={() => setShowFeedback(false)}
+        className={`flex self-start ${className} group flex-col pr-20`}
       >
         <div className="flex self-start">
-          <Avatar className="mt-2 text-2xl" avatar="🦖"></Avatar>
+          <Avatar
+            className="mt-2 h-12 w-12 text-2xl"
+            avatar={
+              <img
+                src={DocsGPT3}
+                alt="DocsGPT"
+                className="h-full w-full object-cover"
+              />
+            }
+          />
+
           <div
-            className={`ml-2 mr-5 flex items-center rounded-3xl bg-gray-1000 p-3.5 ${
+            className={`ml-2 mr-5 flex rounded-3xl bg-gray-1000 p-3.5 ${
               type === 'ERROR'
-                ? ' rounded-lg border border-red-2000 bg-red-1000 p-2 text-red-3000'
-                : ''
+                ? 'flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000  dark:border-red-2000 dark:text-white'
+                : 'flex-col rounded-3xl'
             }`}
           >
             {type === 'ERROR' && (
               <img src={Alert} alt="alert" className="mr-2 inline" />
             )}
             <ReactMarkdown
-              className="whitespace-pre-wrap break-words"
+              className="max-w-screen-md whitespace-pre-wrap break-words"
+              remarkPlugins={[remarkGfm]}
               components={{
                 code({ node, inline, className, children, ...props }) {
                   const match = /language-(\w+)/.exec(className || '');
@@ -90,76 +110,210 @@ const ConversationBubble = forwardRef<
                     </code>
                   );
                 },
-                ul({ node, children }) {
-                  return <List>{children}</List>;
+                ul({ children }) {
+                  return (
+                    <ul
+                      className={`list-inside list-disc whitespace-normal pl-4 ${classes.list}`}
+                    >
+                      {children}
+                    </ul>
+                  );
                 },
-                ol({ node, children }) {
-                  return <List ordered>{children}</List>;
+                ol({ children }) {
+                  return (
+                    <ol
+                      className={`list-inside list-decimal whitespace-normal pl-4 ${classes.list}`}
+                    >
+                      {children}
+                    </ol>
+                  );
+                },
+                table({ children }) {
+                  return (
+                    <div className="relative overflow-x-auto rounded-lg border">
+                      <table className="w-full text-left text-sm text-gray-700">
+                        {children}
+                      </table>
+                    </div>
+                  );
+                },
+                thead({ children }) {
+                  return (
+                    <thead className="text-xs uppercase text-gray-900 [&>.table-row]:bg-gray-50">
+                      {children}
+                    </thead>
+                  );
+                },
+                tr({ children }) {
+                  return (
+                    <tr className="table-row border-b odd:bg-white even:bg-gray-50">
+                      {children}
+                    </tr>
+                  );
+                },
+                td({ children }) {
+                  return <td className="px-6 py-3">{children}</td>;
+                },
+                th({ children }) {
+                  return <th className="px-6 py-3">{children}</th>;
                 },
               }}
             >
               {message}
             </ReactMarkdown>
-          </div>
-          <div
-            className={`mr-2 flex items-center justify-center ${
-              feedback === 'LIKE' || (type !== 'ERROR' && showFeedback)
-                ? ''
-                : 'md:invisible'
-            }`}
-          >
-            <Like
-              className={`cursor-pointer ${
-                feedback === 'LIKE'
-                  ? 'fill-blue-1000 stroke-blue-1000'
-                  : 'fill-none  stroke-gray-4000 hover:fill-gray-4000'
-              }`}
-              onClick={() => handleFeedback?.('LIKE')}
-            ></Like>
-          </div>
-          <div
-            className={`mr-10 flex items-center justify-center ${
-              feedback === 'DISLIKE' || (type !== 'ERROR' && showFeedback)
-                ? ''
-                : 'md:invisible'
-            }`}
-          >
-            <Dislike
-              className={`cursor-pointer ${
-                feedback === 'DISLIKE'
-                  ? 'fill-red-2000 stroke-red-2000'
-                  : 'fill-none  stroke-gray-4000 hover:fill-gray-4000'
-              }`}
-              onClick={() => handleFeedback?.('DISLIKE')}
-            ></Dislike>
-          </div>
-        </div>
-        <div className="ml-8 mt-2 grid w-1/2 grid-cols-3 gap-2">
-          {DisableSourceFE
-            ? null
-            : sources?.map((source, index) => (
-                <div
-                  key={index}
-                  className="w-26 cursor-pointer rounded-xl border border-gray-200 py-1 px-2 hover:bg-gray-100"
-                  onClick={() =>
-                    setOpenSource(openSource === index ? null : index)
-                  }
-                >
-                  <p className="truncate text-xs text-gray-500">
-                    {index + 1}. {source.title}
-                  </p>
+            {DisableSourceFE || type === 'ERROR' ? null : (
+              <>
+                <span className="mt-3 h-px w-full bg-[#DEDEDE]"></span>
+                <div className="mt-3 flex w-full flex-row flex-wrap items-center justify-start gap-2">
+                  <div className="py-1 text-base font-semibold">Sources:</div>
+                  <div className="flex flex-row flex-wrap items-center justify-start gap-2">
+                    {sources?.map((source, index) => (
+                      <div
+                        key={index}
+                        className={`max-w-fit cursor-pointer rounded-[28px] py-1 px-4 ${
+                          openSource === index
+                            ? 'bg-[#007DFF]'
+                            : 'bg-[#D7EBFD] hover:bg-[#BFE1FF]'
+                        }`}
+                        onClick={() =>
+                          setOpenSource(openSource === index ? null : index)
+                        }
+                      >
+                        <p
+                          className={`truncate text-center text-base font-medium ${
+                            openSource === index
+                              ? 'text-white'
+                              : 'text-[#007DFF]'
+                          }`}
+                        >
+                          {index + 1}. {source.title.substring(0, 45)}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
                 </div>
-              ))}
+              </>
+            )}
+          </div>
+          <div
+            className={`relative mr-5 flex items-center justify-center md:invisible ${
+              type !== 'ERROR' ? 'group-hover:md:visible' : ''
+            }`}
+          >
+            <div className="absolute left-2 top-4">
+              <div
+                className="flex items-center justify-center rounded-full p-2"
+                style={{
+                  backgroundColor: isCopyHovered ? '#EEEEEE' : '#ffffff',
+                }}
+              >
+                {copied ? (
+                  <CheckMark
+                    className="cursor-pointer stroke-green-2000"
+                    onMouseEnter={() => setIsCopyHovered(true)}
+                    onMouseLeave={() => setIsCopyHovered(false)}
+                  />
+                ) : (
+                  <Copy
+                    className={`cursor-pointer fill-none`}
+                    onClick={() => {
+                      handleCopyClick(message);
+                    }}
+                    onMouseEnter={() => setIsCopyHovered(true)}
+                    onMouseLeave={() => setIsCopyHovered(false)}
+                  ></Copy>
+                )}
+              </div>
+            </div>
+          </div>
+          <div
+            className={`relative mr-5 flex items-center justify-center ${
+              !isLikeClicked ? 'md:invisible' : ''
+            } ${
+              feedback === 'LIKE' || type !== 'ERROR'
+                ? 'group-hover:md:visible'
+                : ''
+            }`}
+          >
+            <div className="absolute left-6 top-4">
+              <div
+                className="flex items-center justify-center rounded-full p-2"
+                style={{
+                  backgroundColor: isLikeHovered
+                    ? isLikeClicked
+                      ? 'rgba(125, 84, 209, 0.3)'
+                      : '#EEEEEE'
+                    : isLikeClicked
+                    ? 'rgba(125, 84, 209, 0.3)'
+                    : '#ffffff',
+                }}
+              >
+                <Like
+                  className={`cursor-pointer ${
+                    isLikeClicked || feedback === 'LIKE'
+                      ? 'fill-white-3000 stroke-purple-30'
+                      : 'fill-none  stroke-gray-4000'
+                  }`}
+                  onClick={() => {
+                    handleFeedback?.('LIKE');
+                    setIsLikeClicked(true);
+                    setIsDislikeClicked(false);
+                  }}
+                  onMouseEnter={() => setIsLikeHovered(true)}
+                  onMouseLeave={() => setIsLikeHovered(false)}
+                ></Like>
+              </div>
+            </div>
+          </div>
+          <div
+            className={`mr-13 relative flex items-center justify-center ${
+              !isDislikeClicked ? 'md:invisible' : ''
+            } ${
+              feedback === 'DISLIKE' || type !== 'ERROR'
+                ? 'group-hover:md:visible'
+                : ''
+            }`}
+          >
+            <div className="absolute left-10 top-4">
+              <div
+                className="flex items-center justify-center rounded-full p-2"
+                style={{
+                  backgroundColor: isDislikeHovered
+                    ? isDislikeClicked
+                      ? 'rgba(248, 113, 113, 0.3)'
+                      : '#EEEEEE'
+                    : isDislikeClicked
+                    ? 'rgba(248, 113, 113, 0.3)'
+                    : '#ffffff',
+                }}
+              >
+                <Dislike
+                  className={`cursor-pointer ${
+                    isDislikeClicked || feedback === 'DISLIKE'
+                      ? 'fill-white-3000 stroke-red-2000'
+                      : 'fill-none  stroke-gray-4000'
+                  }`}
+                  onClick={() => {
+                    handleFeedback?.('DISLIKE');
+                    setIsDislikeClicked(true);
+                    setIsLikeClicked(false);
+                  }}
+                  onMouseEnter={() => setIsDislikeHovered(true)}
+                  onMouseLeave={() => setIsDislikeHovered(false)}
+                ></Dislike>
+              </div>
+            </div>
+          </div>
         </div>
 
         {sources && openSource !== null && sources[openSource] && (
-          <div className="ml-8 mt-2 w-3/4 rounded-xl bg-blue-200 p-2">
-            <p className="w-3/4 truncate text-xs text-gray-500">
+          <div className="ml-10 mt-2 max-w-[800px] rounded-xl bg-blue-200 p-2">
+            <p className="m-1 w-3/4 truncate text-xs text-gray-500">
               Source: {sources[openSource].title}
             </p>
 
-            <div className="rounded-xl border-2 border-gray-200 bg-white p-2">
-              <p className="text-xs text-gray-500 ">
+            <div className="m-2 rounded-xl border-2 border-gray-200 bg-white p-2">
+              <p className="text-break text-black">
                 {sources[openSource].text}
               </p>
             </div>