From 1377384402e7c1c94f8ad50d1331b33669f3d202 Mon Sep 17 00:00:00 2001 From: x0oo0x Date: Wed, 5 Jul 2023 05:55:30 -0400 Subject: [PATCH] first commit --- .dockerignore | 4 + .env | 8 + .eslintrc.json | 3 + .github/workflows/deploy-docker-image.yaml | 69 + .github/workflows/run-test-suite.yml | 24 + .gitignore | 40 + CONTRIBUTING.md | 45 + Dockerfile | 29 + Makefile | 18 + README.md | 105 + SECURITY.md | 53 + __tests__/utils/app/importExports.test.ts | 264 + .../SidebarActionButton.tsx | 17 + .../Buttons/SidebarActionButton/index.ts | 1 + components/Chat/AudioRecorder.tsx | 194 + components/Chat/Chat.tsx | 514 + components/Chat/ChatInput.tsx | 414 + components/Chat/ChatLoader.tsx | 20 + components/Chat/ChatMessage.tsx | 291 + components/Chat/ErrorMessageDiv.tsx | 28 + components/Chat/MemoizedChatMessage.tsx | 9 + components/Chat/ModelSelect.tsx | 66 + components/Chat/PluginSelect.tsx | 103 + components/Chat/PromptList.tsx | 45 + components/Chat/Regenerate.tsx | 26 + components/Chat/SystemPrompt.tsx | 243 + components/Chat/Temperature.tsx | 67 + components/Chat/VariableModal.tsx | 124 + components/Chatbar/Chatbar.context.tsx | 25 + components/Chatbar/Chatbar.state.tsx | 11 + components/Chatbar/Chatbar.tsx | 241 + components/Chatbar/components/ChatFolders.tsx | 64 + .../Chatbar/components/ChatbarSettings.tsx | 73 + .../Chatbar/components/ClearConversations.tsx | 57 + .../Chatbar/components/Conversation.tsx | 168 + .../Chatbar/components/Conversations.tsx | 21 + components/Chatbar/components/PluginKeys.tsx | 235 + components/Folder/Folder.tsx | 192 + components/Folder/index.ts | 1 + components/Markdown/CodeBlock.tsx | 94 + components/Markdown/MemoizedReactMarkdown.tsx | 9 + components/Mobile/Navbar.tsx | 29 + components/Promptbar/PromptBar.context.tsx | 19 + components/Promptbar/Promptbar.state.tsx | 11 + components/Promptbar/Promptbar.tsx | 152 + components/Promptbar/components/Prompt.tsx | 130 + .../Promptbar/components/PromptFolders.tsx | 64 + .../Promptbar/components/PromptModal.tsx | 130 + .../components/PromptbarSettings.tsx | 7 + components/Promptbar/components/Prompts.tsx | 22 + components/Promptbar/index.ts | 1 + components/Search/Search.tsx | 43 + components/Search/index.ts | 1 + components/Settings/Import.tsx | 51 + components/Settings/Key.tsx | 79 + components/Settings/SettingDialog.tsx | 105 + components/Sidebar/Sidebar.tsx | 123 + components/Sidebar/SidebarButton.tsx | 19 + .../Sidebar/components/OpenCloseButton.tsx | 42 + components/Sidebar/index.ts | 1 + components/Spinner/Spinner.tsx | 34 + components/Spinner/index.ts | 1 + docker-compose.yml | 9 + docs/google_search.md | 21 + hooks/useCreateReducer.ts | 30 + hooks/useFetch.ts | 88 + k8s/chatbot-ui.yaml | 60 + license | 21 + next-i18next.config.js | 33 + next.config.js | 18 + package-lock.json | 17413 ++++++++++++++++ package.json | 71 + pages/_app.tsx | 25 + pages/_document.tsx | 24 + pages/api/chat.ts | 68 + pages/api/google.ts | 149 + pages/api/home/home.context.tsx | 27 + pages/api/home/home.state.tsx | 54 + pages/api/home/home.tsx | 431 + pages/api/home/index.ts | 1 + pages/api/models.ts | 73 + pages/api/whisper.ts | 43 + pages/index.tsx | 1 + postcss.config.js | 6 + prettier.config.js | 25 + public/favicon.ico | Bin 0 -> 15406 bytes public/locales/ar/chat.json | 32 + public/locales/ar/common.json | 1 + public/locales/ar/markdown.json | 5 + public/locales/ar/promptbar.json | 12 + public/locales/ar/settings.json | 4 + public/locales/ar/sidebar.json | 13 + public/locales/bn/chat.json | 29 + public/locales/bn/common.json | 1 + public/locales/bn/markdown.json | 5 + public/locales/bn/promptbar.json | 12 + public/locales/bn/settings.json | 4 + public/locales/bn/sidebar.json | 11 + public/locales/ca/chat.json | 29 + public/locales/ca/common.json | 1 + public/locales/ca/markdown.json | 5 + public/locales/ca/promptbar.json | 12 + public/locales/ca/sidebar.json | 13 + public/locales/de/chat.json | 29 + public/locales/de/common.json | 1 + public/locales/de/markdown.json | 5 + public/locales/de/promptbar.json | 12 + public/locales/de/settings.json | 4 + public/locales/de/sidebar.json | 11 + public/locales/en/common.json | 1 + public/locales/es/chat.json | 29 + public/locales/es/common.json | 1 + public/locales/es/markdown.json | 5 + public/locales/es/promptbar.json | 12 + public/locales/es/settings.json | 4 + public/locales/es/sidebar.json | 11 + public/locales/fi/chat.json | 35 + public/locales/fi/common.json | 1 + public/locales/fi/markdown.json | 5 + public/locales/fi/promptbar.json | 12 + public/locales/fi/settings.json | 7 + public/locales/fi/sidebar.json | 13 + public/locales/fr/chat.json | 28 + public/locales/fr/common.json | 1 + public/locales/fr/markdown.json | 5 + public/locales/fr/promptbar.json | 12 + public/locales/fr/settings.json | 4 + public/locales/fr/sidebar.json | 11 + public/locales/he/chat.json | 28 + public/locales/he/common.json | 1 + public/locales/he/markdown.json | 5 + public/locales/he/promptbar.json | 12 + public/locales/he/settings.json | 4 + public/locales/he/sidebar.json | 11 + public/locales/id/chat.json | 28 + public/locales/id/common.json | 1 + public/locales/id/markdown.json | 5 + public/locales/id/promptbar.json | 12 + public/locales/id/settings.json | 4 + public/locales/id/sidebar.json | 11 + public/locales/it/chat.json | 29 + public/locales/it/common.json | 1 + public/locales/it/markdown.json | 5 + public/locales/it/promptbar.json | 12 + public/locales/it/settings.json | 4 + public/locales/it/sidebar.json | 11 + public/locales/ja/chat.json | 29 + public/locales/ja/common.json | 1 + public/locales/ja/markdown.json | 5 + public/locales/ja/promptbar.json | 12 + public/locales/ja/settings.json | 7 + public/locales/ja/sidebar.json | 14 + public/locales/ko/chat.json | 29 + public/locales/ko/common.json | 1 + public/locales/ko/markdown.json | 5 + public/locales/ko/promptbar.json | 12 + public/locales/ko/settings.json | 4 + public/locales/ko/sidebar.json | 11 + public/locales/pl/chat.json | 28 + public/locales/pl/common.json | 1 + public/locales/pl/markdown.json | 5 + public/locales/pl/promptbar.json | 12 + public/locales/pl/settings.json | 4 + public/locales/pl/sidebar.json | 11 + public/locales/pt/chat.json | 29 + public/locales/pt/common.json | 1 + public/locales/pt/markdown.json | 5 + public/locales/pt/promptbar.json | 12 + public/locales/pt/settings.json | 4 + public/locales/pt/sidebar.json | 11 + public/locales/ro/chat.json | 30 + public/locales/ro/common.json | 1 + public/locales/ro/markdown.json | 5 + public/locales/ro/promptbar.json | 12 + public/locales/ro/settings.json | 4 + public/locales/ro/sidebar.json | 11 + public/locales/ru/chat.json | 29 + public/locales/ru/common.json | 1 + public/locales/ru/markdown.json | 5 + public/locales/ru/promptbar.json | 12 + public/locales/ru/settings.json | 4 + public/locales/ru/sidebar.json | 11 + public/locales/si/chat.json | 29 + public/locales/si/common.json | 1 + public/locales/si/markdown.json | 5 + public/locales/si/promptbar.json | 12 + public/locales/si/settings.json | 4 + public/locales/si/sidebar.json | 11 + public/locales/sv/chat.json | 29 + public/locales/sv/common.json | 1 + public/locales/sv/markdown.json | 5 + public/locales/sv/promptbar.json | 12 + public/locales/sv/settings.json | 4 + public/locales/sv/sidebar.json | 11 + public/locales/te/chat.json | 29 + public/locales/te/common.json | 1 + public/locales/te/markdown.json | 5 + public/locales/te/promptbar.json | 12 + public/locales/te/settings.json | 4 + public/locales/te/sidebar.json | 11 + public/locales/tr/chat.json | 28 + public/locales/tr/common.json | 1 + public/locales/tr/markdown.json | 5 + public/locales/tr/promptbar.json | 12 + public/locales/tr/sidebar.json | 14 + public/locales/vi/chat.json | 29 + public/locales/vi/common.json | 1 + public/locales/vi/markdown.json | 5 + public/locales/vi/promptbar.json | 12 + public/locales/vi/settings.json | 4 + public/locales/vi/sidebar.json | 11 + public/locales/zh/chat.json | 36 + public/locales/zh/common.json | 1 + public/locales/zh/markdown.json | 5 + public/locales/zh/promptbar.json | 13 + public/locales/zh/settings.json | 7 + public/locales/zh/sidebar.json | 14 + public/screenshot.png | Bin 0 -> 376883 bytes public/screenshots/screenshot-0402023.jpg | Bin 0 -> 110723 bytes services/errorService.ts | 35 + services/useApiService.ts | 46 + styles/globals.css | 43 + tailwind.config.js | 18 + tsconfig.json | 25 + types/chat.ts | 26 + types/data.ts | 4 + types/env.ts | 7 + types/error.ts | 5 + types/export.ts | 45 + types/folder.ts | 7 + types/google.ts | 19 + types/index.ts | 1 + types/openai.ts | 45 + types/plugin.ts | 39 + types/prompt.ts | 10 + types/settings.ts | 3 + types/storage.ts | 21 + utils/app/api.ts | 14 + utils/app/clean.ts | 99 + utils/app/codeblock.ts | 39 + utils/app/const.ts | 21 + utils/app/conversation.ts | 30 + utils/app/folders.ts | 5 + utils/app/importExport.ts | 164 + utils/app/prompts.ts | 22 + utils/app/settings.ts | 23 + utils/data/throttle.ts | 22 + utils/server/google.ts | 9 + utils/server/index.ts | 117 + vitest.config.ts | 10 + 250 files changed, 26138 insertions(+) create mode 100644 .dockerignore create mode 100644 .env create mode 100644 .eslintrc.json create mode 100644 .github/workflows/deploy-docker-image.yaml create mode 100644 .github/workflows/run-test-suite.yml create mode 100644 .gitignore create mode 100644 CONTRIBUTING.md create mode 100644 Dockerfile create mode 100644 Makefile create mode 100644 README.md create mode 100644 SECURITY.md create mode 100644 __tests__/utils/app/importExports.test.ts create mode 100644 components/Buttons/SidebarActionButton/SidebarActionButton.tsx create mode 100644 components/Buttons/SidebarActionButton/index.ts create mode 100644 components/Chat/AudioRecorder.tsx create mode 100644 components/Chat/Chat.tsx create mode 100644 components/Chat/ChatInput.tsx create mode 100644 components/Chat/ChatLoader.tsx create mode 100644 components/Chat/ChatMessage.tsx create mode 100644 components/Chat/ErrorMessageDiv.tsx create mode 100644 components/Chat/MemoizedChatMessage.tsx create mode 100644 components/Chat/ModelSelect.tsx create mode 100644 components/Chat/PluginSelect.tsx create mode 100644 components/Chat/PromptList.tsx create mode 100644 components/Chat/Regenerate.tsx create mode 100644 components/Chat/SystemPrompt.tsx create mode 100644 components/Chat/Temperature.tsx create mode 100644 components/Chat/VariableModal.tsx create mode 100644 components/Chatbar/Chatbar.context.tsx create mode 100644 components/Chatbar/Chatbar.state.tsx create mode 100644 components/Chatbar/Chatbar.tsx create mode 100644 components/Chatbar/components/ChatFolders.tsx create mode 100644 components/Chatbar/components/ChatbarSettings.tsx create mode 100644 components/Chatbar/components/ClearConversations.tsx create mode 100644 components/Chatbar/components/Conversation.tsx create mode 100644 components/Chatbar/components/Conversations.tsx create mode 100644 components/Chatbar/components/PluginKeys.tsx create mode 100644 components/Folder/Folder.tsx create mode 100644 components/Folder/index.ts create mode 100644 components/Markdown/CodeBlock.tsx create mode 100644 components/Markdown/MemoizedReactMarkdown.tsx create mode 100644 components/Mobile/Navbar.tsx create mode 100644 components/Promptbar/PromptBar.context.tsx create mode 100644 components/Promptbar/Promptbar.state.tsx create mode 100644 components/Promptbar/Promptbar.tsx create mode 100644 components/Promptbar/components/Prompt.tsx create mode 100644 components/Promptbar/components/PromptFolders.tsx create mode 100644 components/Promptbar/components/PromptModal.tsx create mode 100644 components/Promptbar/components/PromptbarSettings.tsx create mode 100644 components/Promptbar/components/Prompts.tsx create mode 100644 components/Promptbar/index.ts create mode 100644 components/Search/Search.tsx create mode 100644 components/Search/index.ts create mode 100644 components/Settings/Import.tsx create mode 100644 components/Settings/Key.tsx create mode 100644 components/Settings/SettingDialog.tsx create mode 100644 components/Sidebar/Sidebar.tsx create mode 100644 components/Sidebar/SidebarButton.tsx create mode 100644 components/Sidebar/components/OpenCloseButton.tsx create mode 100644 components/Sidebar/index.ts create mode 100644 components/Spinner/Spinner.tsx create mode 100644 components/Spinner/index.ts create mode 100644 docker-compose.yml create mode 100644 docs/google_search.md create mode 100644 hooks/useCreateReducer.ts create mode 100644 hooks/useFetch.ts create mode 100644 k8s/chatbot-ui.yaml create mode 100644 license create mode 100644 next-i18next.config.js create mode 100644 next.config.js create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 pages/_app.tsx create mode 100644 pages/_document.tsx create mode 100644 pages/api/chat.ts create mode 100644 pages/api/google.ts create mode 100644 pages/api/home/home.context.tsx create mode 100644 pages/api/home/home.state.tsx create mode 100644 pages/api/home/home.tsx create mode 100644 pages/api/home/index.ts create mode 100644 pages/api/models.ts create mode 100644 pages/api/whisper.ts create mode 100644 pages/index.tsx create mode 100644 postcss.config.js create mode 100644 prettier.config.js create mode 100644 public/favicon.ico create mode 100644 public/locales/ar/chat.json create mode 100644 public/locales/ar/common.json create mode 100644 public/locales/ar/markdown.json create mode 100644 public/locales/ar/promptbar.json create mode 100644 public/locales/ar/settings.json create mode 100644 public/locales/ar/sidebar.json create mode 100644 public/locales/bn/chat.json create mode 100644 public/locales/bn/common.json create mode 100644 public/locales/bn/markdown.json create mode 100644 public/locales/bn/promptbar.json create mode 100644 public/locales/bn/settings.json create mode 100644 public/locales/bn/sidebar.json create mode 100644 public/locales/ca/chat.json create mode 100644 public/locales/ca/common.json create mode 100644 public/locales/ca/markdown.json create mode 100644 public/locales/ca/promptbar.json create mode 100644 public/locales/ca/sidebar.json create mode 100644 public/locales/de/chat.json create mode 100644 public/locales/de/common.json create mode 100644 public/locales/de/markdown.json create mode 100644 public/locales/de/promptbar.json create mode 100644 public/locales/de/settings.json create mode 100644 public/locales/de/sidebar.json create mode 100644 public/locales/en/common.json create mode 100644 public/locales/es/chat.json create mode 100644 public/locales/es/common.json create mode 100644 public/locales/es/markdown.json create mode 100644 public/locales/es/promptbar.json create mode 100644 public/locales/es/settings.json create mode 100644 public/locales/es/sidebar.json create mode 100644 public/locales/fi/chat.json create mode 100644 public/locales/fi/common.json create mode 100644 public/locales/fi/markdown.json create mode 100644 public/locales/fi/promptbar.json create mode 100644 public/locales/fi/settings.json create mode 100644 public/locales/fi/sidebar.json create mode 100644 public/locales/fr/chat.json create mode 100644 public/locales/fr/common.json create mode 100644 public/locales/fr/markdown.json create mode 100644 public/locales/fr/promptbar.json create mode 100644 public/locales/fr/settings.json create mode 100644 public/locales/fr/sidebar.json create mode 100644 public/locales/he/chat.json create mode 100644 public/locales/he/common.json create mode 100644 public/locales/he/markdown.json create mode 100644 public/locales/he/promptbar.json create mode 100644 public/locales/he/settings.json create mode 100644 public/locales/he/sidebar.json create mode 100644 public/locales/id/chat.json create mode 100644 public/locales/id/common.json create mode 100644 public/locales/id/markdown.json create mode 100644 public/locales/id/promptbar.json create mode 100644 public/locales/id/settings.json create mode 100644 public/locales/id/sidebar.json create mode 100644 public/locales/it/chat.json create mode 100644 public/locales/it/common.json create mode 100644 public/locales/it/markdown.json create mode 100644 public/locales/it/promptbar.json create mode 100644 public/locales/it/settings.json create mode 100644 public/locales/it/sidebar.json create mode 100644 public/locales/ja/chat.json create mode 100644 public/locales/ja/common.json create mode 100644 public/locales/ja/markdown.json create mode 100644 public/locales/ja/promptbar.json create mode 100644 public/locales/ja/settings.json create mode 100644 public/locales/ja/sidebar.json create mode 100644 public/locales/ko/chat.json create mode 100644 public/locales/ko/common.json create mode 100644 public/locales/ko/markdown.json create mode 100644 public/locales/ko/promptbar.json create mode 100644 public/locales/ko/settings.json create mode 100644 public/locales/ko/sidebar.json create mode 100644 public/locales/pl/chat.json create mode 100644 public/locales/pl/common.json create mode 100644 public/locales/pl/markdown.json create mode 100644 public/locales/pl/promptbar.json create mode 100644 public/locales/pl/settings.json create mode 100644 public/locales/pl/sidebar.json create mode 100644 public/locales/pt/chat.json create mode 100644 public/locales/pt/common.json create mode 100644 public/locales/pt/markdown.json create mode 100644 public/locales/pt/promptbar.json create mode 100644 public/locales/pt/settings.json create mode 100644 public/locales/pt/sidebar.json create mode 100644 public/locales/ro/chat.json create mode 100644 public/locales/ro/common.json create mode 100644 public/locales/ro/markdown.json create mode 100644 public/locales/ro/promptbar.json create mode 100644 public/locales/ro/settings.json create mode 100644 public/locales/ro/sidebar.json create mode 100644 public/locales/ru/chat.json create mode 100644 public/locales/ru/common.json create mode 100644 public/locales/ru/markdown.json create mode 100644 public/locales/ru/promptbar.json create mode 100644 public/locales/ru/settings.json create mode 100644 public/locales/ru/sidebar.json create mode 100644 public/locales/si/chat.json create mode 100644 public/locales/si/common.json create mode 100644 public/locales/si/markdown.json create mode 100644 public/locales/si/promptbar.json create mode 100644 public/locales/si/settings.json create mode 100644 public/locales/si/sidebar.json create mode 100644 public/locales/sv/chat.json create mode 100644 public/locales/sv/common.json create mode 100644 public/locales/sv/markdown.json create mode 100644 public/locales/sv/promptbar.json create mode 100644 public/locales/sv/settings.json create mode 100644 public/locales/sv/sidebar.json create mode 100644 public/locales/te/chat.json create mode 100644 public/locales/te/common.json create mode 100644 public/locales/te/markdown.json create mode 100644 public/locales/te/promptbar.json create mode 100644 public/locales/te/settings.json create mode 100644 public/locales/te/sidebar.json create mode 100644 public/locales/tr/chat.json create mode 100644 public/locales/tr/common.json create mode 100644 public/locales/tr/markdown.json create mode 100644 public/locales/tr/promptbar.json create mode 100644 public/locales/tr/sidebar.json create mode 100644 public/locales/vi/chat.json create mode 100644 public/locales/vi/common.json create mode 100644 public/locales/vi/markdown.json create mode 100644 public/locales/vi/promptbar.json create mode 100644 public/locales/vi/settings.json create mode 100644 public/locales/vi/sidebar.json create mode 100644 public/locales/zh/chat.json create mode 100644 public/locales/zh/common.json create mode 100644 public/locales/zh/markdown.json create mode 100644 public/locales/zh/promptbar.json create mode 100644 public/locales/zh/settings.json create mode 100644 public/locales/zh/sidebar.json create mode 100644 public/screenshot.png create mode 100644 public/screenshots/screenshot-0402023.jpg create mode 100644 services/errorService.ts create mode 100644 services/useApiService.ts create mode 100644 styles/globals.css create mode 100644 tailwind.config.js create mode 100644 tsconfig.json create mode 100644 types/chat.ts create mode 100644 types/data.ts create mode 100644 types/env.ts create mode 100644 types/error.ts create mode 100644 types/export.ts create mode 100644 types/folder.ts create mode 100644 types/google.ts create mode 100644 types/index.ts create mode 100644 types/openai.ts create mode 100644 types/plugin.ts create mode 100644 types/prompt.ts create mode 100644 types/settings.ts create mode 100644 types/storage.ts create mode 100644 utils/app/api.ts create mode 100644 utils/app/clean.ts create mode 100644 utils/app/codeblock.ts create mode 100644 utils/app/const.ts create mode 100644 utils/app/conversation.ts create mode 100644 utils/app/folders.ts create mode 100644 utils/app/importExport.ts create mode 100644 utils/app/prompts.ts create mode 100644 utils/app/settings.ts create mode 100644 utils/data/throttle.ts create mode 100644 utils/server/google.ts create mode 100644 utils/server/index.ts create mode 100644 vitest.config.ts diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..38bb57c --- /dev/null +++ b/.dockerignore @@ -0,0 +1,4 @@ +.env +.env.local +node_modules +test-results diff --git a/.env b/.env new file mode 100644 index 0000000..c771982 --- /dev/null +++ b/.env @@ -0,0 +1,8 @@ +# Chatbot UI +DEFAULT_MODEL=gpt-3.5-turbo-0613 +NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT=You are ChatGPT, a large language model trained by OpenAI. Follow the user''s instructions carefully. Respond using markdown. +OPENAI_API_KEY=YOUR_API_KEY + +# Google +#GOOGLE_API_KEY=YOUR_API_KEY +#GOOGLE_CSE_ID=YOUR_ENGINE_ID diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/.github/workflows/deploy-docker-image.yaml b/.github/workflows/deploy-docker-image.yaml new file mode 100644 index 0000000..3e7ad3c --- /dev/null +++ b/.github/workflows/deploy-docker-image.yaml @@ -0,0 +1,69 @@ +name: Docker + +# This workflow uses actions that are not certified by GitHub. +# They are provided by a third-party and are governed by +# separate terms of service, privacy policy, and support +# documentation. + +on: + push: + branches: ['main'] + +env: + # Use docker.io for Docker Hub if empty + REGISTRY: ghcr.io + # github.repository as / + IMAGE_NAME: ${{ github.repository }} + +jobs: + build: + runs-on: ubuntu-latest + permissions: + contents: read + packages: write + # This is used to complete the identity challenge + # with sigstore/fulcio when running outside of PRs. + id-token: write + + steps: + - name: Checkout repository + uses: actions/checkout@v3 + + - name: Set up QEMU + uses: docker/setup-qemu-action@v2.1.0 + + # Workaround: https://github.com/docker/build-push-action/issues/461 + - name: Setup Docker buildx + uses: docker/setup-buildx-action@79abd3f86f79a9d68a23c75a09a9a85889262adf + + # Login against a Docker registry except on PR + # https://github.com/docker/login-action + - name: Log into registry ${{ env.REGISTRY }} + if: github.event_name != 'pull_request' + uses: docker/login-action@28218f9b04b4f3f62068d7b6ce6ca5b26e35336c + with: + registry: ${{ env.REGISTRY }} + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + + # Extract metadata (tags, labels) for Docker + # https://github.com/docker/metadata-action + - name: Extract Docker metadata + id: meta + uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38 + with: + images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }} + + # Build and push Docker image with Buildx (don't push on PR) + # https://github.com/docker/build-push-action + - name: Build and push Docker image + id: build-and-push + uses: docker/build-push-action@ac9327eae2b366085ac7f6a2d02df8aa8ead720a + with: + context: . + platforms: "linux/amd64,linux/arm64" + push: ${{ github.event_name != 'pull_request' }} + tags: ${{ steps.meta.outputs.tags }} + labels: ${{ steps.meta.outputs.labels }} + cache-from: type=gha + cache-to: type=gha,mode=max diff --git a/.github/workflows/run-test-suite.yml b/.github/workflows/run-test-suite.yml new file mode 100644 index 0000000..c0914db --- /dev/null +++ b/.github/workflows/run-test-suite.yml @@ -0,0 +1,24 @@ +name: Run Unit Tests +on: + push: + branches: + - main + pull_request: + branches: + - main + +jobs: + test: + runs-on: ubuntu-latest + container: + image: node:16 + + steps: + - name: Checkout code + uses: actions/checkout@v2 + + - name: Install dependencies + run: npm ci + + - name: Run Vitest Suite + run: npm test diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5be3dc7 --- /dev/null +++ b/.gitignore @@ -0,0 +1,40 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage +/test-results + +# next.js +/.next/ +/out/ +/dist + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts +.idea +pnpm-lock.yaml diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..2fc8637 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,45 @@ +# Contributing Guidelines + +**Welcome to Chatbot UI!** + +We appreciate your interest in contributing to our project. + +Before you get started, please read our guidelines for contributing. + +## Types of Contributions + +We welcome the following types of contributions: + +- Bug fixes +- New features +- Documentation improvements +- Code optimizations +- Translations +- Tests + +## Getting Started + +To get started, fork the project on GitHub and clone it locally on your machine. Then, create a new branch to work on your changes. + +``` +git clone https://github.com/mckaywrigley/chatbot-ui.git +cd chatbot-ui +git checkout -b my-branch-name + +``` + +Before submitting your pull request, please make sure your changes pass our automated tests and adhere to our code style guidelines. + +## Pull Request Process + +1. Fork the project on GitHub. +2. Clone your forked repository locally on your machine. +3. Create a new branch from the main branch. +4. Make your changes on the new branch. +5. Ensure that your changes adhere to our code style guidelines and pass our automated tests. +6. Commit your changes and push them to your forked repository. +7. Submit a pull request to the main branch of the main repository. + +## Contact + +If you have any questions or need help getting started, feel free to reach out to me on [Twitter](https://twitter.com/mckaywrigley). diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..6a79faf --- /dev/null +++ b/Dockerfile @@ -0,0 +1,29 @@ +# ---- Base Node ---- +FROM node:19-alpine AS base +WORKDIR /app +COPY package*.json ./ + +# ---- Dependencies ---- +FROM base AS dependencies +RUN npm ci + +# ---- Build ---- +FROM dependencies AS build +COPY . . +RUN npm run build + +# ---- Production ---- +FROM node:19-alpine AS production +WORKDIR /app +COPY --from=dependencies /app/node_modules ./node_modules +COPY --from=build /app/.next ./.next +COPY --from=build /app/public ./public +COPY --from=build /app/package*.json ./ +COPY --from=build /app/next.config.js ./next.config.js +COPY --from=build /app/next-i18next.config.js ./next-i18next.config.js + +# Expose the port the app will run on +EXPOSE 3000 + +# Start the application +CMD ["npm", "start"] diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..8dc4e12 --- /dev/null +++ b/Makefile @@ -0,0 +1,18 @@ +include .env + +.PHONY: all + +build: + docker build -t chatbot-ui . + +run: + export $(cat .env | xargs) + docker stop chatbot-ui || true && docker rm chatbot-ui || true + docker run --name chatbot-ui --rm -e OPENAI_API_KEY=${OPENAI_API_KEY} -p 3000:3000 chatbot-ui + +logs: + docker logs -f chatbot-ui + +push: + docker tag chatbot-ui:latest ${DOCKER_USER}/chatbot-ui:${DOCKER_TAG} + docker push ${DOCKER_USER}/chatbot-ui:${DOCKER_TAG} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..0a7352e --- /dev/null +++ b/README.md @@ -0,0 +1,105 @@ +# Chatbot UI + +Chatbot UI is an open source chat UI for AI models. + +See a [demo](https://twitter.com/mckaywrigley/status/1640380021423603713?s=46&t=AowqkodyK6B4JccSOxSPew). + +![Chatbot UI](./public/screenshots/screenshot-0402023.jpg) + +## Updates + +Chatbot UI will be updated over time. + +Expect frequent improvements. + +**Next up:** + +- [ ] Sharing +- [ ] "Bots" + +## Deploy + +**Vercel** + +Host your own live version of Chatbot UI with Vercel. + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fmckaywrigley%2Fchatbot-ui) + +**Docker** + +Build locally: + +```shell +docker build -t chatgpt-ui . +docker run -e OPENAI_API_KEY=xxxxxxxx -p 3000:3000 chatgpt-ui +``` + +Pull from ghcr: + +``` +docker run -e OPENAI_API_KEY=xxxxxxxx -p 3000:3000 ghcr.io/mckaywrigley/chatbot-ui:main +``` + +## Running Locally + +**1. Clone Repo** + +```bash +git clone https://github.com/mckaywrigley/chatbot-ui.git +``` + +**2. Install Dependencies** + +```bash +npm i +``` + +**3. Provide OpenAI API Key** + +Create a .env.local file in the root of the repo with your OpenAI API Key: + +```bash +OPENAI_API_KEY=YOUR_KEY +``` + +> You can set `OPENAI_API_HOST` where access to the official OpenAI host is restricted or unavailable, allowing users to configure an alternative host for their specific needs. + +> Additionally, if you have multiple OpenAI Organizations, you can set `OPENAI_ORGANIZATION` to specify one. + +**4. Run App** + +```bash +npm run dev +``` + +**5. Use It** + +You should be able to start chatting. + +## Configuration + +When deploying the application, the following environment variables can be set: + +| Environment Variable | Default value | Description | +| --------------------------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- | +| OPENAI_API_KEY | | The default API key used for authentication with OpenAI | +| OPENAI_API_HOST | `https://api.openai.com` | The base url, for Azure use `https://.openai.azure.com` | +| OPENAI_API_TYPE | `openai` | The API type, options are `openai` or `azure` | +| OPENAI_API_VERSION | `2023-03-15-preview` | Only applicable for Azure OpenAI | +| AZURE_DEPLOYMENT_ID | | Needed when Azure OpenAI, Ref [Azure OpenAI API](https://learn.microsoft.com/zh-cn/azure/cognitive-services/openai/reference#completions) | +| OPENAI_ORGANIZATION | | Your OpenAI organization ID | +| DEFAULT_MODEL | `gpt-3.5-turbo` | The default model to use on new conversations, for Azure use `gpt-35-turbo` | +| NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT | [see here](utils/app/const.ts) | The default system prompt to use on new conversations | +| NEXT_PUBLIC_DEFAULT_TEMPERATURE | 1 | The default temperature to use on new conversations | +| GOOGLE_API_KEY | | See [Custom Search JSON API documentation][GCSE] | +| GOOGLE_CSE_ID | | See [Custom Search JSON API documentation][GCSE] | + +If you do not provide an OpenAI API key with `OPENAI_API_KEY`, users will have to provide their own key. + +If you don't have an OpenAI API key, you can get one [here](https://platform.openai.com/account/api-keys). + +## Contact + +If you have any questions, feel free to reach out to Mckay on [Twitter](https://twitter.com/mckaywrigley). + +[GCSE]: https://developers.google.com/custom-search/v1/overview diff --git a/SECURITY.md b/SECURITY.md new file mode 100644 index 0000000..42f7994 --- /dev/null +++ b/SECURITY.md @@ -0,0 +1,53 @@ +# Security Policy + + +This security policy outlines the process for reporting vulnerabilities and secrets found within this GitHub repository. It is essential that all contributors and users adhere to this policy in order to maintain a secure and stable environment. + +## Reporting a Vulnerability + +If you discover a vulnerability within the code, dependencies, or any other component of this repository, please follow these steps: + +1. **Do not disclose the vulnerability publicly.** Publicly disclosing a vulnerability may put the project at risk and could potentially harm other users. + +2. **Contact the repository maintainer(s) privately.** Send a private message or email to the maintainer(s) with a detailed description of the vulnerability. Include the following information: + + - The affected component(s) + - Steps to reproduce the issue + - Potential impact of the vulnerability + - Any possible mitigations or workarounds + +3. **Wait for a response from the maintainer(s).** Please be patient, as they may need time to investigate and verify the issue. The maintainer(s) should acknowledge receipt of your report and provide an estimated time frame for addressing the vulnerability. + +4. **Cooperate with the maintainer(s).** If requested, provide additional information or assistance to help resolve the issue. + +5. **Do not disclose the vulnerability until the maintainer(s) have addressed it.** Once the issue has been resolved, the maintainer(s) may choose to publicly disclose the vulnerability and credit you for the discovery. + +## Reporting Secrets + +If you discover any secrets, such as API keys or passwords, within the repository, follow these steps: + +1. **Do not share the secret or use it for unauthorized purposes.** Misusing a secret could have severe consequences for the project and its users. + +2. **Contact the repository maintainer(s) privately.** Notify them of the discovered secret, its location, and any potential risks associated with it. + +3. **Wait for a response and further instructions.** + +## Responsible Disclosure + +We encourage responsible disclosure of vulnerabilities and secrets. If you follow the steps outlined in this policy, we will work with you to understand and address the issue. We will not take legal action against individuals who discover and report vulnerabilities or secrets in accordance with this policy. + +## Patching and Updates + +We are committed to maintaining the security of our project. When vulnerabilities are reported and confirmed, we will: + +1. Work diligently to develop and apply a patch or implement a mitigation strategy. +2. Keep the reporter informed about the progress of the fix. +3. Update the repository with the necessary patches and document the changes in the release notes or changelog. +4. Credit the reporter for the discovery, if they wish to be acknowledged. + +## Contributing to Security + +We welcome contributions that help improve the security of our project. If you have suggestions or want to contribute code to address security issues, please follow the standard contribution guidelines for this repository. When submitting a pull request related to security, please mention that it addresses a security issue and provide any necessary context. + +By adhering to this security policy, you contribute to the overall security and stability of the project. Thank you for your cooperation and responsible handling of vulnerabilities and secrets. + diff --git a/__tests__/utils/app/importExports.test.ts b/__tests__/utils/app/importExports.test.ts new file mode 100644 index 0000000..aa51cbc --- /dev/null +++ b/__tests__/utils/app/importExports.test.ts @@ -0,0 +1,264 @@ +import { DEFAULT_SYSTEM_PROMPT, DEFAULT_TEMPERATURE } from '@/utils/app/const'; +import { + cleanData, + isExportFormatV1, + isExportFormatV2, + isExportFormatV3, + isExportFormatV4, + isLatestExportFormat, +} from '@/utils/app/importExport'; + +import { ExportFormatV1, ExportFormatV2, ExportFormatV4 } from '@/types/export'; +import { OpenAIModelID, OpenAIModels } from '@/types/openai'; + +import { describe, expect, it } from 'vitest'; + +describe('Export Format Functions', () => { + describe('isExportFormatV1', () => { + it('should return true for v1 format', () => { + const obj = [{ id: 1 }]; + expect(isExportFormatV1(obj)).toBe(true); + }); + + it('should return false for non-v1 formats', () => { + const obj = { version: 3, history: [], folders: [] }; + expect(isExportFormatV1(obj)).toBe(false); + }); + }); + + describe('isExportFormatV2', () => { + it('should return true for v2 format', () => { + const obj = { history: [], folders: [] }; + expect(isExportFormatV2(obj)).toBe(true); + }); + + it('should return false for non-v2 formats', () => { + const obj = { version: 3, history: [], folders: [] }; + expect(isExportFormatV2(obj)).toBe(false); + }); + }); + + describe('isExportFormatV3', () => { + it('should return true for v3 format', () => { + const obj = { version: 3, history: [], folders: [] }; + expect(isExportFormatV3(obj)).toBe(true); + }); + + it('should return false for non-v3 formats', () => { + const obj = { version: 4, history: [], folders: [] }; + expect(isExportFormatV3(obj)).toBe(false); + }); + }); + + describe('isExportFormatV4', () => { + it('should return true for v4 format', () => { + const obj = { version: 4, history: [], folders: [], prompts: [] }; + expect(isExportFormatV4(obj)).toBe(true); + }); + + it('should return false for non-v4 formats', () => { + const obj = { version: 5, history: [], folders: [], prompts: [] }; + expect(isExportFormatV4(obj)).toBe(false); + }); + }); +}); + +describe('cleanData Functions', () => { + describe('cleaning v1 data', () => { + it('should return the latest format', () => { + const data = [ + { + id: 1, + name: 'conversation 1', + messages: [ + { + role: 'user', + content: "what's up ?", + }, + { + role: 'assistant', + content: 'Hi', + }, + ], + }, + ] as ExportFormatV1; + const obj = cleanData(data); + expect(isLatestExportFormat(obj)).toBe(true); + expect(obj).toEqual({ + version: 4, + history: [ + { + id: 1, + name: 'conversation 1', + messages: [ + { + role: 'user', + content: "what's up ?", + }, + { + role: 'assistant', + content: 'Hi', + }, + ], + model: OpenAIModels[OpenAIModelID.GPT_3_5], + prompt: DEFAULT_SYSTEM_PROMPT, + temperature: DEFAULT_TEMPERATURE, + folderId: null, + }, + ], + folders: [], + prompts: [], + }); + }); + }); + + describe('cleaning v2 data', () => { + it('should return the latest format', () => { + const data = { + history: [ + { + id: '1', + name: 'conversation 1', + messages: [ + { + role: 'user', + content: "what's up ?", + }, + { + role: 'assistant', + content: 'Hi', + }, + ], + }, + ], + folders: [ + { + id: 1, + name: 'folder 1', + }, + ], + } as ExportFormatV2; + const obj = cleanData(data); + expect(isLatestExportFormat(obj)).toBe(true); + expect(obj).toEqual({ + version: 4, + history: [ + { + id: '1', + name: 'conversation 1', + messages: [ + { + role: 'user', + content: "what's up ?", + }, + { + role: 'assistant', + content: 'Hi', + }, + ], + model: OpenAIModels[OpenAIModelID.GPT_3_5], + prompt: DEFAULT_SYSTEM_PROMPT, + temperature: DEFAULT_TEMPERATURE, + folderId: null, + }, + ], + folders: [ + { + id: '1', + name: 'folder 1', + type: 'chat', + }, + ], + prompts: [], + }); + }); + }); + + describe('cleaning v4 data', () => { + it('should return the latest format', () => { + const data = { + version: 4, + history: [ + { + id: '1', + name: 'conversation 1', + messages: [ + { + role: 'user', + content: "what's up ?", + }, + { + role: 'assistant', + content: 'Hi', + }, + ], + model: OpenAIModels[OpenAIModelID.GPT_3_5], + prompt: DEFAULT_SYSTEM_PROMPT, + temperature: DEFAULT_TEMPERATURE, + folderId: null, + }, + ], + folders: [ + { + id: '1', + name: 'folder 1', + type: 'chat', + }, + ], + prompts: [ + { + id: '1', + name: 'prompt 1', + description: '', + content: '', + model: OpenAIModels[OpenAIModelID.GPT_3_5], + folderId: null, + }, + ], + } as ExportFormatV4; + + const obj = cleanData(data); + expect(isLatestExportFormat(obj)).toBe(true); + expect(obj).toEqual({ + version: 4, + history: [ + { + id: '1', + name: 'conversation 1', + messages: [ + { + role: 'user', + content: "what's up ?", + }, + { + role: 'assistant', + content: 'Hi', + }, + ], + model: OpenAIModels[OpenAIModelID.GPT_3_5], + prompt: DEFAULT_SYSTEM_PROMPT, + temperature: DEFAULT_TEMPERATURE, + folderId: null, + }, + ], + folders: [ + { + id: '1', + name: 'folder 1', + type: 'chat', + }, + ], + prompts: [ + { + id: '1', + name: 'prompt 1', + description: '', + content: '', + model: OpenAIModels[OpenAIModelID.GPT_3_5], + folderId: null, + }, + ], + }); + }); + }); +}); diff --git a/components/Buttons/SidebarActionButton/SidebarActionButton.tsx b/components/Buttons/SidebarActionButton/SidebarActionButton.tsx new file mode 100644 index 0000000..2fdc79d --- /dev/null +++ b/components/Buttons/SidebarActionButton/SidebarActionButton.tsx @@ -0,0 +1,17 @@ +import { MouseEventHandler, ReactElement } from 'react'; + +interface Props { + handleClick: MouseEventHandler; + children: ReactElement; +} + +const SidebarActionButton = ({ handleClick, children }: Props) => ( + +); + +export default SidebarActionButton; diff --git a/components/Buttons/SidebarActionButton/index.ts b/components/Buttons/SidebarActionButton/index.ts new file mode 100644 index 0000000..1fce00e --- /dev/null +++ b/components/Buttons/SidebarActionButton/index.ts @@ -0,0 +1 @@ +export { default } from './SidebarActionButton'; diff --git a/components/Chat/AudioRecorder.tsx b/components/Chat/AudioRecorder.tsx new file mode 100644 index 0000000..93e07d7 --- /dev/null +++ b/components/Chat/AudioRecorder.tsx @@ -0,0 +1,194 @@ +import { + + IconCircleDotFilled, + IconCircleDotted, + IconHeadset, + IconPlayerPlayFilled, + +} from '@tabler/icons-react'; +import React, { useRef, useState, useEffect, useContext } from 'react'; +import HomeContext from '@/pages/api/home/home.context'; + + +const mimeType = 'audio/webm'; + +interface Note { + Text: string; + Time: string; + Duration: number; +} + +type Props = { + setAudioText: (value: string) => void; +}; + + +const AudioRecorder: React.FC = ({ setAudioText }) => { + + const { + state: { + apiKey, + } + } = useContext(HomeContext); + const [permission, setPermission] = useState(false); + const mediaRecorder = useRef(null); + const [recordingStatus, setRecordingStatus] = useState(false); + const [stream, setStream] = useState(null); + + const [audio, setAudio] = useState(null); + const [audioChunks, setAudioChunks] = useState([]); + const [audioNote, setAudioNote] = useState({ Text: '', Time: '', Duration: 0 }); + + const [formData, setFormData] = useState(null); + const [isTranslating, setIsTranslating] = useState(false); + + useEffect(() => { + if (formData) { + sendToTranslate(); + } + }, [formData]); + + + const getMicrophonePermission = async () => { + if ('MediaRecorder' in window) { + try { + const mediaStream: MediaStream = await navigator.mediaDevices.getUserMedia({ + audio: true, + video: false + }); + setPermission(true); + setStream(mediaStream); + } catch (err) { + alert(err); + } + } else { + alert('The MediaRecorder API is not supported in your browser.'); + } + }; + + const toggleRecording = async () => { + if (!recordingStatus) { + startRecording(); + console.log("start recording"); + } else { + stopRecording(); + console.log("stop recording"); + } + setRecordingStatus(!recordingStatus); + } + + const startRecording = async () => { + if (!stream) { + console.error('Stream is undefined'); + return; + } + const media = new MediaRecorder(stream, { mimeType }); + + mediaRecorder.current = media; + + mediaRecorder.current.start(); + + const localAudioChunks: Blob[] = []; + + mediaRecorder.current.ondataavailable = event => { + if (typeof event.data === 'undefined') { + return; + } + if (event.data.size === 0) { + return; + } + localAudioChunks.push(event.data); + }; + + mediaRecorder.current.onstop = () => { + + const audioBlob = new Blob(localAudioChunks, { type: mimeType }); + const audioUrl = URL.createObjectURL(audioBlob); + + setAudio(audioUrl); + setAudioChunks([]); + + const data = new FormData(); + data.append('file', audioBlob, 'audio.webm'); + setFormData(data); + if (audioBlob.size > 25 * 1024 * 1024) { + alert('The recorded audio is too large'); + } + + const audioElement = new Audio(); + audioElement.src = audioUrl; + + audioElement.addEventListener('loadedmetadata', () => { + const date = new Date(); + const note: Note = { + Text: '', + Time: date.toLocaleTimeString(), + Duration: audioElement.duration + }; + setAudioNote(note); + }); + } + + setAudioChunks(localAudioChunks); + }; + + const stopRecording = () => { + mediaRecorder.current?.stop(); + }; + + const sendToTranslate = async () => { + setIsTranslating(true); + + if (!formData) { + console.log("no form data"); + return; + } else { + console.log(formData); + } + + // const res = await fetch('https://api.openai.com/v1/audio/transcriptions', { + // headers: { + // Authorization: `Bearer ${apiKey}` + // }, + // method: 'POST', + // body: formData + // }); + const res = await fetch('api/whisper', { + method: 'POST', + body: formData + }); + + const data = await res.json(); + if (!data.text) { + console.error(`Fetch operation completed, but no text was returned`); + setIsTranslating(false); + return; + } + setAudioText(data.text); + audioNote.Text = data.text; + console.log(`Translation: ${data.text}`); + setIsTranslating(false); + + }; + + return ( +
+
+ {!permission ? ( + + ) : null} + {permission ? ( + < button + onClick={toggleRecording} type="button"> + {recordingStatus ? : } + + ) : null} +
+
+ ); +}; + +export default AudioRecorder; \ No newline at end of file diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx new file mode 100644 index 0000000..6c3b47f --- /dev/null +++ b/components/Chat/Chat.tsx @@ -0,0 +1,514 @@ +import { IconClearAll, IconSettings } from '@tabler/icons-react'; +import { + MutableRefObject, + memo, + useCallback, + useContext, + useEffect, + useRef, + useState, +} from 'react'; +import toast from 'react-hot-toast'; + +import { useTranslation } from 'next-i18next'; + +import { getEndpoint } from '@/utils/app/api'; +import { + saveConversation, + saveConversations, + updateConversation, +} from '@/utils/app/conversation'; +import { throttle } from '@/utils/data/throttle'; + +import { ChatBody, Conversation, Message } from '@/types/chat'; +import { Plugin } from '@/types/plugin'; + +import HomeContext from '@/pages/api/home/home.context'; + +import Spinner from '../Spinner'; +import { ChatInput } from './ChatInput'; +import { ChatLoader } from './ChatLoader'; +import { ErrorMessageDiv } from './ErrorMessageDiv'; +import { ModelSelect } from './ModelSelect'; +import { SystemPrompt } from './SystemPrompt'; +import { TemperatureSlider } from './Temperature'; +import { MemoizedChatMessage } from './MemoizedChatMessage'; + +interface Props { + stopConversationRef: MutableRefObject; +} + +export const Chat = memo(({ stopConversationRef }: Props) => { + const { t } = useTranslation('chat'); + + const { + state: { + selectedConversation, + conversations, + models, + apiKey, + pluginKeys, + serverSideApiKeyIsSet, + messageIsStreaming, + modelError, + loading, + prompts, + }, + handleUpdateConversation, + dispatch: homeDispatch, + } = useContext(HomeContext); + + const [currentMessage, setCurrentMessage] = useState(); + const [autoScrollEnabled, setAutoScrollEnabled] = useState(true); + const [showSettings, setShowSettings] = useState(false); + const [showScrollDownButton, setShowScrollDownButton] = + useState(false); + + const messagesEndRef = useRef(null); + const chatContainerRef = useRef(null); + const textareaRef = useRef(null); + + const handleSend = useCallback( + async (message: Message, deleteCount = 0, plugin: Plugin | null = null) => { + if (selectedConversation) { + let updatedConversation: Conversation; + if (deleteCount) { + const updatedMessages = [...selectedConversation.messages]; + for (let i = 0; i < deleteCount; i++) { + updatedMessages.pop(); + } + updatedConversation = { + ...selectedConversation, + messages: [...updatedMessages, message], + }; + } else { + updatedConversation = { + ...selectedConversation, + messages: [...selectedConversation.messages, message], + }; + } + homeDispatch({ + field: 'selectedConversation', + value: updatedConversation, + }); + homeDispatch({ field: 'loading', value: true }); + homeDispatch({ field: 'messageIsStreaming', value: true }); + const chatBody: ChatBody = { + model: updatedConversation.model, + messages: updatedConversation.messages, + key: apiKey, + prompt: updatedConversation.prompt, + temperature: updatedConversation.temperature, + }; + const endpoint = getEndpoint(plugin); + let body; + if (!plugin) { + body = JSON.stringify(chatBody); + } else { + body = JSON.stringify({ + ...chatBody, + googleAPIKey: pluginKeys + .find((key) => key.pluginId === 'google-search') + ?.requiredKeys.find((key) => key.key === 'GOOGLE_API_KEY')?.value, + googleCSEId: pluginKeys + .find((key) => key.pluginId === 'google-search') + ?.requiredKeys.find((key) => key.key === 'GOOGLE_CSE_ID')?.value, + }); + } + const controller = new AbortController(); + const response = await fetch(endpoint, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + signal: controller.signal, + body, + }); + + + if (!response.ok) { + homeDispatch({ field: 'loading', value: false }); + homeDispatch({ field: 'messageIsStreaming', value: false }); + toast.error(response.statusText); + return; + } + const data = response.body; + if (!data) { + homeDispatch({ field: 'loading', value: false }); + homeDispatch({ field: 'messageIsStreaming', value: false }); + return; + } + if (!plugin) { + if (updatedConversation.messages.length === 1) { + const { content } = message; + const customName = + content.length > 30 ? content.substring(0, 30) + '...' : content; + updatedConversation = { + ...updatedConversation, + name: customName, + }; + } + homeDispatch({ field: 'loading', value: false }); + const reader = data.getReader(); + const decoder = new TextDecoder(); + let done = false; + let isFirst = true; + let text = ''; + while (!done) { + if (stopConversationRef.current === true) { + controller.abort(); + done = true; + break; + } + const { value, done: doneReading } = await reader.read(); + done = doneReading; + const chunkValue = decoder.decode(value); + text += chunkValue; + if (isFirst) { + isFirst = false; + const updatedMessages: Message[] = [ + ...updatedConversation.messages, + { role: 'assistant', content: chunkValue }, + ]; + updatedConversation = { + ...updatedConversation, + messages: updatedMessages, + }; + homeDispatch({ + field: 'selectedConversation', + value: updatedConversation, + }); + } else { + const updatedMessages: Message[] = + updatedConversation.messages.map((message, index) => { + if (index === updatedConversation.messages.length - 1) { + return { + ...message, + content: text, + }; + } + return message; + }); + updatedConversation = { + ...updatedConversation, + messages: updatedMessages, + }; + homeDispatch({ + field: 'selectedConversation', + value: updatedConversation, + }); + } + } + saveConversation(updatedConversation); + const updatedConversations: Conversation[] = conversations.map( + (conversation) => { + if (conversation.id === selectedConversation.id) { + return updatedConversation; + } + return conversation; + }, + ); + if (updatedConversations.length === 0) { + updatedConversations.push(updatedConversation); + } + homeDispatch({ field: 'conversations', value: updatedConversations }); + saveConversations(updatedConversations); + homeDispatch({ field: 'messageIsStreaming', value: false }); + } else { + const { answer } = await response.json(); + const updatedMessages: Message[] = [ + ...updatedConversation.messages, + { role: 'assistant', content: answer }, + ]; + updatedConversation = { + ...updatedConversation, + messages: updatedMessages, + }; + homeDispatch({ + field: 'selectedConversation', + value: updateConversation, + }); + saveConversation(updatedConversation); + const updatedConversations: Conversation[] = conversations.map( + (conversation) => { + if (conversation.id === selectedConversation.id) { + return updatedConversation; + } + return conversation; + }, + ); + if (updatedConversations.length === 0) { + updatedConversations.push(updatedConversation); + } + homeDispatch({ field: 'conversations', value: updatedConversations }); + saveConversations(updatedConversations); + homeDispatch({ field: 'loading', value: false }); + homeDispatch({ field: 'messageIsStreaming', value: false }); + } + } + }, + [ + apiKey, + conversations, + pluginKeys, + selectedConversation, + stopConversationRef, + ], + ); + + const scrollToBottom = useCallback(() => { + if (autoScrollEnabled) { + messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); + textareaRef.current?.focus(); + } + }, [autoScrollEnabled]); + + const handleScroll = () => { + if (chatContainerRef.current) { + const { scrollTop, scrollHeight, clientHeight } = + chatContainerRef.current; + const bottomTolerance = 30; + + if (scrollTop + clientHeight < scrollHeight - bottomTolerance) { + setAutoScrollEnabled(false); + setShowScrollDownButton(true); + } else { + setAutoScrollEnabled(true); + setShowScrollDownButton(false); + } + } + }; + + const handleScrollDown = () => { + chatContainerRef.current?.scrollTo({ + top: chatContainerRef.current.scrollHeight, + behavior: 'smooth', + }); + }; + + const handleSettings = () => { + setShowSettings(!showSettings); + }; + + const onClearAll = () => { + if ( + confirm(t('Are you sure you want to clear all messages?')) && + selectedConversation + ) { + handleUpdateConversation(selectedConversation, { + key: 'messages', + value: [], + }); + } + }; + + const scrollDown = () => { + if (autoScrollEnabled) { + messagesEndRef.current?.scrollIntoView(true); + } + }; + const throttledScrollDown = throttle(scrollDown, 250); + + // useEffect(() => { + // console.log('currentMessage', currentMessage); + // if (currentMessage) { + // handleSend(currentMessage); + // homeDispatch({ field: 'currentMessage', value: undefined }); + // } + // }, [currentMessage]); + + useEffect(() => { + throttledScrollDown(); + selectedConversation && + setCurrentMessage( + selectedConversation.messages[selectedConversation.messages.length - 2], + ); + }, [selectedConversation, throttledScrollDown]); + + useEffect(() => { + const observer = new IntersectionObserver( + ([entry]) => { + setAutoScrollEnabled(entry.isIntersecting); + if (entry.isIntersecting) { + textareaRef.current?.focus(); + } + }, + { + root: null, + threshold: 0.5, + }, + ); + const messagesEndElement = messagesEndRef.current; + if (messagesEndElement) { + observer.observe(messagesEndElement); + } + return () => { + if (messagesEndElement) { + observer.unobserve(messagesEndElement); + } + }; + }, [messagesEndRef]); + + return ( +
+ {!(apiKey || serverSideApiKeyIsSet) ? ( +
+
+ Welcome to Chatbot UI +
+
+
{`Chatbot UI is an open source clone of OpenAI's ChatGPT UI.`}
+
+ Important: Chatbot UI is 100% unaffiliated with OpenAI. +
+
+
+
+ Chatbot UI allows you to plug in your API key to use this UI with + their API. +
+
+ It is only used to communicate + with their API. +
+
+ {t( + 'Please set your OpenAI API key in the bottom left of the sidebar.', + )} +
+
+ {t("If you don't have an OpenAI API key, you can get one here: ")} + + openai.com + +
+
+
+ ) : modelError ? ( + + ) : ( + <> +
+ {selectedConversation?.messages.length === 0 ? ( + <> +
+
+ {models.length === 0 ? ( +
+ +
+ ) : ( + 'Chatbot UI' + )} +
+ + {models.length > 0 && ( +
+ + + + handleUpdateConversation(selectedConversation, { + key: 'prompt', + value: prompt, + }) + } + /> + + + handleUpdateConversation(selectedConversation, { + key: 'temperature', + value: temperature, + }) + } + /> +
+ )} +
+ + ) : ( + <> +
+ {t('Model')}: {selectedConversation?.model.name} | {t('Temp')} + : {selectedConversation?.temperature} | + + +
+ {showSettings && ( +
+
+ +
+
+ )} + + {selectedConversation?.messages.map((message, index) => ( + { + setCurrentMessage(editedMessage); + // discard edited message and the ones that come after then resend + handleSend( + editedMessage, + selectedConversation?.messages.length - index, + ); + }} + /> + ))} + + {loading && } + +
+ + )} +
+ + { + setCurrentMessage(message); + handleSend(message, 0, plugin); + }} + onScrollDownClick={handleScrollDown} + onRegenerate={() => { + if (currentMessage) { + handleSend(currentMessage, 2, null); + } + }} + showScrollDownButton={showScrollDownButton} + /> + + )} +
+ ); +}); +Chat.displayName = 'Chat'; diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx new file mode 100644 index 0000000..3ef4c51 --- /dev/null +++ b/components/Chat/ChatInput.tsx @@ -0,0 +1,414 @@ +import { + IconArrowDown, + IconBolt, + IconBrandGoogle, + IconPlayerStop, + IconRepeat, + IconSend, + IconMicrophone, +} from '@tabler/icons-react'; +import { + KeyboardEvent, + MutableRefObject, + useCallback, + useContext, + useEffect, + useRef, + useState, +} from 'react'; + +import { useTranslation } from 'next-i18next'; + +import { Message } from '@/types/chat'; +import { Plugin } from '@/types/plugin'; +import { Prompt } from '@/types/prompt'; + +import HomeContext from '@/pages/api/home/home.context'; + +import { PluginSelect } from './PluginSelect'; +import { PromptList } from './PromptList'; +import { VariableModal } from './VariableModal'; +import AudioRecorder from './AudioRecorder'; + +interface Props { + onSend: (message: Message, plugin: Plugin | null) => void; + onRegenerate: () => void; + onScrollDownClick: () => void; + stopConversationRef: MutableRefObject; + textareaRef: MutableRefObject; + showScrollDownButton: boolean; +} + +export const ChatInput = ({ + onSend, + onRegenerate, + onScrollDownClick, + stopConversationRef, + textareaRef, + showScrollDownButton, +}: Props) => { + const { t } = useTranslation('chat'); + + const { + state: { selectedConversation, messageIsStreaming, prompts }, + + dispatch: homeDispatch, + } = useContext(HomeContext); + + const [content, setContent] = useState(); + const [isTyping, setIsTyping] = useState(false); + const [showPromptList, setShowPromptList] = useState(false); + const [activePromptIndex, setActivePromptIndex] = useState(0); + const [promptInputValue, setPromptInputValue] = useState(''); + const [variables, setVariables] = useState([]); + const [isModalVisible, setIsModalVisible] = useState(false); + const [showPluginSelect, setShowPluginSelect] = useState(false); + const [plugin, setPlugin] = useState(null); + + const promptListRef = useRef(null); + + const [audioText, setAudioText] = useState(""); + + useEffect(() => { + if (audioText) { + setContent(audioText); + } + }, [audioText]); + + useEffect(() => { + if (content === audioText) { + handleSend(); + } + }, [content, audioText]); + + const filteredPrompts = prompts.filter((prompt) => + prompt.name.toLowerCase().includes(promptInputValue.toLowerCase()), + ); + + const handleChange = (e: React.ChangeEvent) => { + const value = e.target.value; + const maxLength = selectedConversation?.model.maxLength; + + if (maxLength && value.length > maxLength) { + alert( + t( + `Message limit is {{maxLength}} characters. You have entered {{valueLength}} characters.`, + { maxLength, valueLength: value.length }, + ), + ); + return; + } + + setContent(value); + updatePromptListVisibility(value); + }; + + const handleSend = () => { + if (messageIsStreaming) { + return; + } + + if (!content) { + alert(t('Please enter a message')); + return; + } + + onSend({ role: 'user', content }, plugin); + setContent(''); + setAudioText(""); + setPlugin(null); + + if (window.innerWidth < 640 && textareaRef && textareaRef.current) { + textareaRef.current.blur(); + } + }; + + const handleStopConversation = () => { + stopConversationRef.current = true; + setTimeout(() => { + stopConversationRef.current = false; + }, 1000); + }; + + const isMobile = () => { + const userAgent = + typeof window.navigator === 'undefined' ? '' : navigator.userAgent; + const mobileRegex = + /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i; + return mobileRegex.test(userAgent); + }; + + const handleInitModal = () => { + const selectedPrompt = filteredPrompts[activePromptIndex]; + if (selectedPrompt) { + setContent((prevContent) => { + const newContent = prevContent?.replace( + /\/\w*$/, + selectedPrompt.content, + ); + return newContent; + }); + handlePromptSelect(selectedPrompt); + } + setShowPromptList(false); + }; + + const handleKeyDown = (e: KeyboardEvent) => { + if (showPromptList) { + if (e.key === 'ArrowDown') { + e.preventDefault(); + setActivePromptIndex((prevIndex) => + prevIndex < prompts.length - 1 ? prevIndex + 1 : prevIndex, + ); + } else if (e.key === 'ArrowUp') { + e.preventDefault(); + setActivePromptIndex((prevIndex) => + prevIndex > 0 ? prevIndex - 1 : prevIndex, + ); + } else if (e.key === 'Tab') { + e.preventDefault(); + setActivePromptIndex((prevIndex) => + prevIndex < prompts.length - 1 ? prevIndex + 1 : 0, + ); + } else if (e.key === 'Enter') { + e.preventDefault(); + handleInitModal(); + } else if (e.key === 'Escape') { + e.preventDefault(); + setShowPromptList(false); + } else { + setActivePromptIndex(0); + } + } else if (e.key === 'Enter' && !isTyping && !isMobile() && !e.shiftKey) { + e.preventDefault(); + handleSend(); + } else if (e.key === '/' && e.metaKey) { + e.preventDefault(); + setShowPluginSelect(!showPluginSelect); + } + }; + + const parseVariables = (content: string) => { + const regex = /{{(.*?)}}/g; + const foundVariables = []; + let match; + + while ((match = regex.exec(content)) !== null) { + foundVariables.push(match[1]); + } + + return foundVariables; + }; + + const updatePromptListVisibility = useCallback((text: string) => { + const match = text.match(/\/\w*$/); + + if (match) { + setShowPromptList(true); + setPromptInputValue(match[0].slice(1)); + } else { + setShowPromptList(false); + setPromptInputValue(''); + } + }, []); + + const handlePromptSelect = (prompt: Prompt) => { + const parsedVariables = parseVariables(prompt.content); + setVariables(parsedVariables); + + if (parsedVariables.length > 0) { + setIsModalVisible(true); + } else { + setContent((prevContent) => { + const updatedContent = prevContent?.replace(/\/\w*$/, prompt.content); + return updatedContent; + }); + updatePromptListVisibility(prompt.content); + } + }; + + const handleSubmit = (updatedVariables: string[]) => { + const newContent = content?.replace(/{{(.*?)}}/g, (match, variable) => { + const index = variables.indexOf(variable); + return updatedVariables[index]; + }); + + setContent(newContent); + + if (textareaRef && textareaRef.current) { + textareaRef.current.focus(); + } + }; + + useEffect(() => { + if (promptListRef.current) { + promptListRef.current.scrollTop = activePromptIndex * 30; + } + }, [activePromptIndex]); + + useEffect(() => { + if (textareaRef && textareaRef.current) { + textareaRef.current.style.height = 'inherit'; + textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`; + textareaRef.current.style.overflow = `${textareaRef?.current?.scrollHeight > 400 ? 'auto' : 'hidden' + }`; + } + }, [content]); + + useEffect(() => { + const handleOutsideClick = (e: MouseEvent) => { + if ( + promptListRef.current && + !promptListRef.current.contains(e.target as Node) + ) { + setShowPromptList(false); + } + }; + + window.addEventListener('click', handleOutsideClick); + + return () => { + window.removeEventListener('click', handleOutsideClick); + }; + }, []); + + return ( +
+
+ {messageIsStreaming && ( + + + )} + + {!messageIsStreaming && + selectedConversation && + selectedConversation.messages.length > 0 && ( + + )} + +
+ + + {showPluginSelect && ( + +
+ { + if (e.key === 'Escape') { + e.preventDefault(); + setShowPluginSelect(false); + textareaRef.current?.focus(); + } + }} + onPluginChange={(plugin: Plugin) => { + setPlugin(plugin); + setShowPluginSelect(false); + + if (textareaRef && textareaRef.current) { + textareaRef.current.focus(); + } + }} + /> +
+ )} + +