Spaces:

VTechAI
/

ChatUI

Runtime error

App Files Files Community

VTechAI commited on Jan 30, 2024

Commit

fed832e

1 Parent(s): 8f04dcf

add

Browse files

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

.env.development +3 -0
.env.production +1 -0
.eslintignore +17 -0
.eslintrc.cjs +44 -0
.husky/pre-commit +6 -0
.prettierignore +17 -0
Dockerfile +11 -0
index.html +13 -0
package-lock.json +0 -0
package.json +61 -0
postcss.config.cjs +6 -0
prettier.config.cjs +7 -0
public/favicon.ico +0 -0
public/lock-dark.svg +7 -0
public/lock.svg +7 -0
public/message-programming-dark.svg +6 -0
public/message-programming.svg +10 -0
public/message-text-dark.svg +5 -0
public/message-text.svg +5 -0
public/vite.svg +1 -0
src/About.tsx +88 -0
src/App.tsx +44 -0
src/Hero.tsx +169 -0
src/Modal/index.tsx +47 -0
src/Navigation.tsx +427 -0
src/PageNotFound.tsx +15 -0
src/Setting.tsx +827 -0
src/assets/add.svg +10 -0
src/assets/alert.svg +3 -0
src/assets/arrow-down.svg +3 -0
src/assets/arrow-left.svg +3 -0
src/assets/arrow-right.svg +3 -0
src/assets/arrow.svg +3 -0
src/assets/checkMark2.svg +3 -0
src/assets/checkmark.svg +1 -0
src/assets/copy.svg +3 -0
src/assets/cute_docsgpt3.svg +0 -0
src/assets/discord-dark.svg +3 -0
src/assets/discord.svg +1 -0
src/assets/dislike.svg +4 -0
src/assets/documentation-dark.svg +3 -0
src/assets/documentation.svg +3 -0
src/assets/dropdown-arrow.svg +3 -0
src/assets/edit.svg +3 -0
src/assets/exit.svg +10 -0
src/assets/expand.svg +4 -0
src/assets/github-dark.svg +3 -0
src/assets/github.svg +5 -0
src/assets/hamburger-dark.svg +3 -0
src/assets/hamburger.svg +3 -0

.env.development ADDED Viewed

	@@ -0,0 +1,3 @@

+# Please put appropriate value
+VITE_API_HOST=http://0.0.0.0:7091
+VITE_API_STREAMING=true

.env.production ADDED Viewed

	@@ -0,0 +1 @@


1	+ VITE_API_HOST = https://gptcloud.arc53.com

.eslintignore ADDED Viewed

	@@ -0,0 +1,17 @@

+node_modules/
+dist/
+prettier.config.cjs
+.eslintrc.cjs
+env.d.ts
+public/
+assets/
+vite-env.d.ts
+.prettierignore
+package-lock.json
+package.json
+postcss.config.cjs
+prettier.config.cjs
+tailwind.config.cjs
+tsconfig.json
+tsconfig.node.json
+vite.config.ts

.eslintrc.cjs ADDED Viewed

	@@ -0,0 +1,44 @@

+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+  ],
+  overrides: [],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react', 'unused-imports'],
+  rules: {
+    'unused-imports/no-unused-imports': 'error',
+    'react/react-in-jsx-scope': 'off',
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
+  },
+  settings: {
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+    react: {
+      version: 'detect',
+    },
+    'import/resolver': {
+      node: {
+        paths: ['src'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  },
+};

.husky/pre-commit ADDED Viewed

	@@ -0,0 +1,6 @@

+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+# npm test
+cd frontend
+npx lint-staged

.prettierignore ADDED Viewed

	@@ -0,0 +1,17 @@

+node_modules/
+dist/
+prettier.config.cjs
+.eslintrc.cjs
+env.d.ts
+public/
+assets/
+vite-env.d.ts
+.prettierignore
+package-lock.json
+package.json
+postcss.config.cjs
+prettier.config.cjs
+tailwind.config.cjs
+tsconfig.json
+tsconfig.node.json
+vite.config.ts

Dockerfile ADDED Viewed

	@@ -0,0 +1,11 @@

+FROM node:20.6.1-bullseye-slim
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+EXPOSE 5173
+CMD [ "npm", "run", "dev", "--" , "--host"]

index.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DocsGPT 🦖</title>
+      <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
+  </head>
+  <body>
+    <div id="root" class="h-screen"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,61 @@

+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint ./src --ext .jsx,.js,.ts,.tsx",
+    "lint-fix": "eslint ./src --ext .jsx,.js,.ts,.tsx --fix",
+    "format": "prettier ./src --write",
+    "prepare": "cd .. && husky install frontend/.husky"
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "npm run lint-fix",
+      "npm run format"
+    ]
+  },
+  "dependencies": {
+    "@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",
+    "remark-gfm": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@types/react-syntax-highlighter": "^15.5.6",
+    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@typescript-eslint/parser": "^5.51.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.13",
+    "eslint": "^8.33.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-standard-with-typescript": "^34.0.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-n": "^15.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "husky": "^8.0.0",
+    "lint-staged": "^13.1.1",
+    "postcss": "^8.4.31",
+    "prettier": "^2.8.4",
+    "prettier-plugin-tailwindcss": "^0.2.2",
+    "tailwindcss": "^3.2.4",
+    "typescript": "^4.9.5",
+    "vite": "^5.0.12",
+    "vite-plugin-svgr": "^4.2.0"
+  }
+}

postcss.config.cjs ADDED Viewed

	@@ -0,0 +1,6 @@

+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

prettier.config.cjs ADDED Viewed

	@@ -0,0 +1,7 @@

+module.exports = {
+  trailingComma: 'all',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  printWidth: 80,
+}

public/favicon.ico ADDED Viewed

public/lock-dark.svg ADDED Viewed

public/lock.svg ADDED Viewed

public/message-programming-dark.svg ADDED Viewed

public/message-programming.svg ADDED Viewed

public/message-text-dark.svg ADDED Viewed

public/message-text.svg ADDED Viewed

public/vite.svg ADDED Viewed

src/About.tsx ADDED Viewed

	@@ -0,0 +1,88 @@

+//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-4 rounded-3xl bg-gray-100 dark:bg-gun-metal p-6 text-jet dark:text-bright-gray lg:p-6 xl:p-10">
+        <div className="flex items-center">
+          <p className="mr-2 text-3xl">About DocsGPT</p>
+          <img className="h14 mb-2" src={DocsGPT3} alt="DocsGPT" />
+        </div>
+        <p className="mt-4">
+          Find the information in your documentation through AI-powered
+          <a
+            className="text-blue-500"
+            href="https://github.com/arc53/DocsGPT"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {' '}
+            open-source{' '}
+          </a>
+          chatbot. Powered by GPT-3, Faiss and LangChain.
+        </p>
+        <div>
+          <p>
+            If you want to add your own documentation, please follow the
+            instruction below:
+          </p>
+          <p className="mt-4 ml-2">
+            1. Navigate to{' '}
+            <span className="bg-gray-200 dark:bg-outer-space italic"> /application</span> folder
+          </p>
+          <p className="mt-4 ml-2">
+            2. Install dependencies from{' '}
+            <span className="bg-gray-200 dark:bg-outer-space italic">
+              pip install -r requirements.txt
+            </span>
+          </p>
+          <p className="mt-4 ml-2">
+            3. Prepare a <span className="bg-gray-200 dark:bg-outer-space italic">.env</span> file.
+            Copy <span className="bg-gray-200 dark:bg-outer-space italic">.env_sample</span> and
+            create <span className="bg-gray-200 dark:bg-outer-space italic">.env</span> with your
+            OpenAI API token
+          </p>
+          <p className="mt-4 ml-2">
+            4. Run the app with{' '}
+            <span className="bg-gray-200 dark:bg-outer-space italic">python app.py</span>
+          </p>
+        </div>
+        <p>
+          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"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {' '}
+            this guide
+          </a>
+          .
+        </p>
+        <p className="mt-4 text-left">
+          If you want to launch it on your own server - follow
+          <a
+            className="text-blue-500"
+            href="https://github.com/arc53/DocsGPT/wiki/Hosting-the-app"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {' '}
+            this guide
+          </a>
+          .
+        </p>
+      </article>
+    </div>
+  );
+}

src/App.tsx ADDED Viewed

	@@ -0,0 +1,44 @@

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

src/Hero.tsx ADDED Viewed

	@@ -0,0 +1,169 @@

+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();
+  const isDarkTheme = document.documentElement.classList.contains('dark');
+  console.log(isDarkTheme)
+  return (
+    <div className={`mt-14 ${isMobile ? 'mb-2' : 'mb-12'}flex flex-col text-black-1000 dark:text-bright-gray`}>
+      <div className=" mb-2 flex items-center justify-center sm:mb-10">
+        <p className="mr-2 text-4xl font-semibold">DocsGPT</p>
+        <img className="mb-2 h-14" src={DocsGPT3} alt="DocsGPT" />
+      </div>
+      {isMobile ? (
+        <p className="mb-3 text-center leading-6">
+          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">
+            Welcome to DocsGPT, your technical documentation assistant!
+          </p>
+          <p className="mb-3 text-center leading-6">
+            Enter a query related to the information in the documentation you
+            selected to receive
+            <br /> and we will provide you with the most relevant answers.
+          </p>
+          <p className="mb-3 text-center leading-6">
+            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="h-auto md:h-60 rounded-[50px] bg-gradient-to-l  from-[#6EE7B7]/70 dark:from-[#D16FF8] via-[#3B82F6] dark:via-[#48E6E0] to-[#9333EA]/50 dark:to-[#C85EF6] p-1  md:rounded-tr-none md:rounded-br-none">
+          <div
+            className={`h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${isMobile ? '3.5' : '6 py-8'
+              }  md:rounded-tr-none md:rounded-br-none`}
+          >
+            {/* Add Mobile check here */}
+            {isMobile ? (
+              <div className="flex justify-center">
+                <img
+                  src={isDarkTheme ? "/message-text-dark.svg" : "/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={isDarkTheme ? "/message-text-dark.svg" : "/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 dark:text-bright-gray`
+                  : `w-[250px] text-xs text-gray-500 dark:text-bright-gray`
+              }
+            >
+              DocsGPT will use your data to answer questions. Whether its
+              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="h-auto md:h-60 rounded-[50px] bg-gradient-to-r from-[#6EE7B7]/70 dark:from-[#D16FF8] via-[#3B82F6] dark:via-[#48E6E0] to-[#9333EA]/50 dark:to-[#C85EF6] p-1  md:rounded-none  md:py-1 md:px-0">
+          <div
+            className={`h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${isMobile ? '3.5' : '6 py-6'
+              }  md:rounded-none`}
+          >
+            {/* Add Mobile check here */}
+            {isMobile ? (
+              <div className="flex justify-center ">
+                <img src={isDarkTheme ? "/lock-dark.svg" : "/lock.svg"} alt="lock" className="h-[24px] w-[24px]" />
+                <h2 className="mb-0 pl-1 text-lg font-bold">
+                  Secure Data Storage
+                </h2>
+              </div>
+            ) : (
+              <>
+                <img src={isDarkTheme ? "/lock-dark.svg" : "/lock.svg"} alt="lock" className="h-[24px] w-[24px]" />
+                <h2 className="mt-2 mb-3 text-lg font-bold">
+                  Secure Data Storage
+                </h2>
+              </>
+            )}
+            <p
+              className={
+                isMobile
+                  ? `w-[250px] text-center text-xs text-gray-500 dark:text-bright-gray`
+                  : `w-[250px] text-xs text-gray-500 dark:text-bright-gray`
+              }
+            >
+              The security of your data is our top priority. DocsGPT ensures the
+              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="h-auto md:h-60 rounded-[50px] bg-gradient-to-l  from-[#6EE7B7]/70 dark:from-[#D16FF8] via-[#3B82F6] dark:via-[#48E6E0] to-[#9333EA]/50 dark:to-[#C85EF6] p-1 md:rounded-tl-none md:rounded-bl-none ">
+          <div
+            className={`h-full firefox rounded-[45px] bg-white dark:bg-dark-charcoal p-${isMobile ? '3.5' : '6 px-6 '
+              } lg:rounded-tl-none lg:rounded-bl-none`}
+          >
+            {/* Add Mobile check here */}
+            {isMobile ? (
+              <div className="flex justify-center">
+                <img
+                  src={isDarkTheme ? "message-programming-dark.svg" : "/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={isDarkTheme ? "/message-programming-dark.svg" : "/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 dark:text-bright-gray`
+                  : `w-[250px] text-xs text-gray-500 dark:text-bright-gray`
+              }
+            >
+              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>
+    </div>
+  );
+}

src/Modal/index.tsx ADDED Viewed

	@@ -0,0 +1,47 @@

+import * as React from 'react';
+interface ModalProps {
+  handleSubmit: () => void;
+  isCancellable: boolean;
+  handleCancel?: () => void;
+  render: () => JSX.Element;
+  modalState: string;
+  isError: boolean;
+  errorMessage?: string;
+}
+const Modal = (props: ModalProps) => {
+  return (
+    <div
+      className={`${
+        props.modalState === 'ACTIVE' ? 'visible' : 'hidden'
+      } absolute z-30  h-screen w-screen  bg-gray-alpha`}
+    >
+      {props.render()}
+      <div className=" mx-auto flex w-[90vw] max-w-lg flex-row-reverse rounded-b-lg bg-white pb-5 pr-5  shadow-lg">
+        <div>
+          <button
+            onClick={() => props.handleSubmit()}
+            className="ml-auto h-10 w-20 rounded-3xl bg-violet-800 text-white transition-all hover:bg-violet-700"
+          >
+            Save
+          </button>
+          {props.isCancellable && (
+            <button
+              onClick={() => props.handleCancel && props.handleCancel()}
+              className="ml-5 h-10 w-20 rounded-lg border border-violet-700 bg-white text-violet-800 transition-all hover:bg-violet-700 hover:text-white"
+            >
+              Cancel
+            </button>
+          )}
+        </div>
+        {props.isError && (
+          <p className="mx-auto mt-2 mr-auto text-sm text-red-500">
+            {props.errorMessage}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};
+export default Modal;

src/Navigation.tsx ADDED Viewed

	@@ -0,0 +1,427 @@

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

src/PageNotFound.tsx ADDED Viewed

	@@ -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>
+  );
+}

src/Setting.tsx ADDED Viewed

	@@ -0,0 +1,827 @@

+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 wa">
+      <p className="text-2xl font-bold text-eerie-black dark:text-bright-gray">Settings</p>
+      <div className="mt-6 flex flex-row items-center space-x-4 overflow-x-auto md:space-x-8 ">
+        <div className="md:hidden">
+          <button
+            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 dark:bg-dark-charcoal'
+                  : 'text-gray-6000'
+                }`}
+            >
+              {tab}
+            </button>
+          ))}
+        </div>
+        <div className="md:hidden">
+          <button
+            onClick={() => scrollTabs(1)}
+            className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-purple-30 hover:bg-gray-100"
+          >
+            <img src={ArrowRight} alt="right-arrow" className="h-6 w-6" />
+          </button>
+        </div>
+      </div>
+      {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', 'Dark'];
+  const languages = ['English'];
+  const [selectedTheme, setSelectedTheme] = useState(localStorage.getItem('selectedTheme') || themes[0]);
+  const [selectedLanguage, setSelectedLanguage] = useState(languages[0]);
+  useEffect(() => {
+    if (selectedTheme === 'Dark') {
+      document.documentElement.classList.add('dark');
+      document.documentElement.classList.add('dark:bg-raisin-black');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+    localStorage.setItem('selectedTheme', selectedTheme);
+  }, [selectedTheme]);
+  return (
+    <div className="mt-[59px]">
+      <div className="mb-4">
+        <p className="font-bold text-jet dark:text-bright-gray">Select Theme</p>
+        <Dropdown
+          options={themes}
+          selectedValue={selectedTheme}
+          onSelect={setSelectedTheme}
+        />
+      </div>
+      <div>
+        <p className="font-bold text-jet dark:text-bright-gray">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 dark:text-bright-gray">Active Prompt</p>
+        <DropdownPrompt
+          options={prompts}
+          selectedValue={selectedPrompt.name}
+          onSelect={handleSelectPrompt}
+        />
+      </div>
+      <div className="mb-4">
+        <p className='dark:text-bright-gray'>Prompt name </p>{' '}
+        <p className="mb-2 text-xs italic text-eerie-black dark:text-bright-gray">
+          start by editing name
+        </p>
+        <input
+          type="text"
+          value={newPromptName}
+          placeholder="Active Prompt Name"
+          className="w-full rounded-lg border-2 p-2 dark:border-chinese-silver dark:bg-transparent dark:text-white"
+          onChange={(e) => setNewPromptName(e.target.value)}
+        />
+      </div>
+      <div className="mb-4">
+        <p className="mb-2 dark:text-bright-gray">Prompt content</p>
+        <textarea
+          className="h-32 w-full rounded-lg  border-2 p-2 dark:border-chinese-silver dark:text-white dark:bg-transparent"
+          value={newPromptContent}
+          onChange={(e) => setNewPromptContent(e.target.value)}
+          placeholder="Active prompt contents"
+        />
+      </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 dark:border-chinese-silver bg-white p-3 dark:bg-transparent"
+      >
+        <span className="flex-1 overflow-hidden text-ellipsis dark:text-bright-gray">
+          {selectedValue}
+        </span>
+        <img
+          src={Arrow2}
+          alt="arrow"
+          className={`transform ${isOpen ? 'rotate-180' : 'rotate-0'
+            } h-3 w-3 transition-transform`}
+        />
+      </button>
+      {isOpen && (
+        <div className="absolute left-0 right-0 z-50 -mt-3 rounded-b-xl border-2 dark:border-chinese-silver bg-white dark:bg-dark-charcoal  shadow-lg">
+          {options.map((option, index) => (
+            <div
+              key={index}
+              className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-purple-taupe dark:text-bright-gray "
+            >
+              <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 dark:border-chinese-silver bg-white p-3 dark:bg-transparent"
+      >
+        <span className="flex-1 overflow-hidden text-ellipsis dark:text-bright-gray">
+          {selectedValue}
+        </span>
+        <img
+          src={Arrow2}
+          alt="arrow"
+          className={`transform ${isOpen ? 'rotate-180' : 'rotate-0'
+            } h-3 w-3 transition-transform`}
+        />
+      </button>
+      {isOpen && (
+        <div className="absolute left-0 right-0 z-50 -mt-3 rounded-b-xl border-2 bg-white dark:border-chinese-silver dark:bg-dark-charcoal shadow-lg">
+          {options.map((option, index) => (
+            <div
+              key={index}
+              className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-purple-taupe"
+            >
+              <span
+                onClick={() => {
+                  onSelect(option);
+                  setIsOpen(false);
+                }}
+                className="ml-2 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3 dark:text-light-gray"
+              >
+                {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 dark:border-chinese-silver 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 border dark:border-chinese-silver rounded-xl w-max">
+          <table className="block w-full table-auto content-center justify-center text-center dark:text-bright-gray" >
+            <thead>
+              <tr>
+                <th className="border-r p-4 md:w-[244px]">Document Name</th>
+                <th className="border-r px-4 py-2 w-[244px]">Vector Date</th>
+                <th className="border-r px-4 py-2 w-[244px]">Type</th>
+                <th className="px-4 py-2"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {documents &&
+                documents.map((document, index) => (
+                  <tr key={index}>
+                    <td className="border-r border-t px-4 py-2">{document.name}</td>
+                    <td className="border-r border-t px-4 py-2">{document.date}</td>
+                    <td className="border-r border-t px-4 py-2">
+                      {document.location === 'remote'
+                        ? 'Pre-loaded'
+                        : 'Private'}
+                    </td>
+                    <td className="border-t 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>
+  );
+};