matthoffner commited on
Commit
13095e0
0 Parent(s):

Duplicate from matthoffner/chatbot

Browse files
This view is limited to 50 files because it contains too many changes.   See raw diff
Files changed (50) hide show
  1. .gitattributes +34 -0
  2. CONTRIBUTING.md +45 -0
  3. Dockerfile +63 -0
  4. Makefile +18 -0
  5. README.md +117 -0
  6. SECURITY.md +53 -0
  7. __tests__/utils/app/importExports.test.ts +264 -0
  8. components/Buttons/SidebarActionButton/SidebarActionButton.tsx +17 -0
  9. components/Buttons/SidebarActionButton/index.ts +1 -0
  10. components/Chat/Chat.tsx +487 -0
  11. components/Chat/ChatInput.tsx +394 -0
  12. components/Chat/ChatLoader.tsx +20 -0
  13. components/Chat/ChatMessage.tsx +291 -0
  14. components/Chat/ErrorMessageDiv.tsx +28 -0
  15. components/Chat/MemoizedChatMessage.tsx +9 -0
  16. components/Chat/ModelSelect.tsx +66 -0
  17. components/Chat/PluginSelect.tsx +103 -0
  18. components/Chat/PromptList.tsx +45 -0
  19. components/Chat/Regenerate.tsx +26 -0
  20. components/Chat/SystemPrompt.tsx +243 -0
  21. components/Chat/Temperature.tsx +67 -0
  22. components/Chat/VariableModal.tsx +124 -0
  23. components/Chatbar/Chatbar.context.tsx +25 -0
  24. components/Chatbar/Chatbar.state.tsx +11 -0
  25. components/Chatbar/Chatbar.tsx +241 -0
  26. components/Chatbar/components/ChatFolders.tsx +64 -0
  27. components/Chatbar/components/ChatbarSettings.tsx +73 -0
  28. components/Chatbar/components/ClearConversations.tsx +57 -0
  29. components/Chatbar/components/Conversation.tsx +168 -0
  30. components/Chatbar/components/Conversations.tsx +21 -0
  31. components/Chatbar/components/PluginKeys.tsx +235 -0
  32. components/Folder/Folder.tsx +192 -0
  33. components/Folder/index.ts +1 -0
  34. components/Markdown/CodeBlock.tsx +94 -0
  35. components/Markdown/MemoizedReactMarkdown.tsx +9 -0
  36. components/Mobile/Navbar.tsx +29 -0
  37. components/Promptbar/PromptBar.context.tsx +19 -0
  38. components/Promptbar/Promptbar.state.tsx +11 -0
  39. components/Promptbar/Promptbar.tsx +152 -0
  40. components/Promptbar/components/Prompt.tsx +130 -0
  41. components/Promptbar/components/PromptFolders.tsx +64 -0
  42. components/Promptbar/components/PromptModal.tsx +130 -0
  43. components/Promptbar/components/PromptbarSettings.tsx +7 -0
  44. components/Promptbar/components/Prompts.tsx +22 -0
  45. components/Promptbar/index.ts +1 -0
  46. components/Search/Search.tsx +43 -0
  47. components/Search/index.ts +1 -0
  48. components/Settings/Import.tsx +51 -0
  49. components/Settings/Key.tsx +15 -0
  50. components/Settings/SettingDialog.tsx +105 -0
.gitattributes ADDED
@@ -0,0 +1,34 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ *.7z filter=lfs diff=lfs merge=lfs -text
2
+ *.arrow filter=lfs diff=lfs merge=lfs -text
3
+ *.bin filter=lfs diff=lfs merge=lfs -text
4
+ *.bz2 filter=lfs diff=lfs merge=lfs -text
5
+ *.ckpt filter=lfs diff=lfs merge=lfs -text
6
+ *.ftz filter=lfs diff=lfs merge=lfs -text
7
+ *.gz filter=lfs diff=lfs merge=lfs -text
8
+ *.h5 filter=lfs diff=lfs merge=lfs -text
9
+ *.joblib filter=lfs diff=lfs merge=lfs -text
10
+ *.lfs.* filter=lfs diff=lfs merge=lfs -text
11
+ *.mlmodel filter=lfs diff=lfs merge=lfs -text
12
+ *.model filter=lfs diff=lfs merge=lfs -text
13
+ *.msgpack filter=lfs diff=lfs merge=lfs -text
14
+ *.npy filter=lfs diff=lfs merge=lfs -text
15
+ *.npz filter=lfs diff=lfs merge=lfs -text
16
+ *.onnx filter=lfs diff=lfs merge=lfs -text
17
+ *.ot filter=lfs diff=lfs merge=lfs -text
18
+ *.parquet filter=lfs diff=lfs merge=lfs -text
19
+ *.pb filter=lfs diff=lfs merge=lfs -text
20
+ *.pickle filter=lfs diff=lfs merge=lfs -text
21
+ *.pkl filter=lfs diff=lfs merge=lfs -text
22
+ *.pt filter=lfs diff=lfs merge=lfs -text
23
+ *.pth filter=lfs diff=lfs merge=lfs -text
24
+ *.rar filter=lfs diff=lfs merge=lfs -text
25
+ *.safetensors filter=lfs diff=lfs merge=lfs -text
26
+ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
27
+ *.tar.* filter=lfs diff=lfs merge=lfs -text
28
+ *.tflite filter=lfs diff=lfs merge=lfs -text
29
+ *.tgz filter=lfs diff=lfs merge=lfs -text
30
+ *.wasm filter=lfs diff=lfs merge=lfs -text
31
+ *.xz filter=lfs diff=lfs merge=lfs -text
32
+ *.zip filter=lfs diff=lfs merge=lfs -text
33
+ *.zst filter=lfs diff=lfs merge=lfs -text
34
+ *tfevents* filter=lfs diff=lfs merge=lfs -text
CONTRIBUTING.md ADDED
@@ -0,0 +1,45 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Contributing Guidelines
2
+
3
+ **Welcome to Chatbot UI!**
4
+
5
+ We appreciate your interest in contributing to our project.
6
+
7
+ Before you get started, please read our guidelines for contributing.
8
+
9
+ ## Types of Contributions
10
+
11
+ We welcome the following types of contributions:
12
+
13
+ - Bug fixes
14
+ - New features
15
+ - Documentation improvements
16
+ - Code optimizations
17
+ - Translations
18
+ - Tests
19
+
20
+ ## Getting Started
21
+
22
+ 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.
23
+
24
+ ```
25
+ git clone https://github.com/mckaywrigley/chatbot-ui.git
26
+ cd chatbot-ui
27
+ git checkout -b my-branch-name
28
+
29
+ ```
30
+
31
+ Before submitting your pull request, please make sure your changes pass our automated tests and adhere to our code style guidelines.
32
+
33
+ ## Pull Request Process
34
+
35
+ 1. Fork the project on GitHub.
36
+ 2. Clone your forked repository locally on your machine.
37
+ 3. Create a new branch from the main branch.
38
+ 4. Make your changes on the new branch.
39
+ 5. Ensure that your changes adhere to our code style guidelines and pass our automated tests.
40
+ 6. Commit your changes and push them to your forked repository.
41
+ 7. Submit a pull request to the main branch of the main repository.
42
+
43
+ ## Contact
44
+
45
+ If you have any questions or need help getting started, feel free to reach out to me on [Twitter](https://twitter.com/mckaywrigley).
Dockerfile ADDED
@@ -0,0 +1,63 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ FROM node:18-alpine AS base
2
+
3
+ # Install dependencies only when needed
4
+ FROM base AS deps
5
+ # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
6
+ RUN apk add --no-cache libc6-compat
7
+ WORKDIR /app
8
+
9
+ # Install dependencies based on the preferred package manager
10
+ COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
11
+ RUN \
12
+ if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
13
+ elif [ -f package-lock.json ]; then npm ci; \
14
+ elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
15
+ else echo "Lockfile not found." && exit 1; \
16
+ fi
17
+
18
+ # Uncomment the following lines if you want to use a secret at buildtime,
19
+ # for example to access your private npm packages
20
+ # RUN --mount=type=secret,id=HF_EXAMPLE_SECRET,mode=0444,required=true \
21
+ # $(cat /run/secrets/HF_EXAMPLE_SECRET)
22
+
23
+ # Rebuild the source code only when needed
24
+ FROM base AS builder
25
+ WORKDIR /app
26
+ COPY --from=deps /app/node_modules ./node_modules
27
+ COPY . .
28
+
29
+ # Next.js collects completely anonymous telemetry data about general usage.
30
+ # Learn more here: https://nextjs.org/telemetry
31
+ # Uncomment the following line in case you want to disable telemetry during the build.
32
+ # ENV NEXT_TELEMETRY_DISABLED 1
33
+
34
+ # RUN yarn build
35
+
36
+ # If you use yarn, comment out this line and use the line above
37
+ RUN npm run build
38
+
39
+ # Production image, copy all the files and run next
40
+ FROM base AS runner
41
+ WORKDIR /app
42
+
43
+ ENV NODE_ENV production
44
+ # Uncomment the following line in case you want to disable telemetry during runtime.
45
+ # ENV NEXT_TELEMETRY_DISABLED 1
46
+
47
+ RUN addgroup --system --gid 1001 nodejs
48
+ RUN adduser --system --uid 1001 nextjs
49
+
50
+ COPY --from=builder /app/public ./public
51
+
52
+ # Automatically leverage output traces to reduce image size
53
+ # https://nextjs.org/docs/advanced-features/output-file-tracing
54
+ COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
55
+ COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
56
+
57
+ USER nextjs
58
+
59
+ EXPOSE 3000
60
+
61
+ ENV PORT 3000
62
+
63
+ CMD ["node", "server.js"]
Makefile ADDED
@@ -0,0 +1,18 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ include .env
2
+
3
+ .PHONY: all
4
+
5
+ build:
6
+ docker build -t chatbot-ui .
7
+
8
+ run:
9
+ export $(cat .env | xargs)
10
+ docker stop chatbot-ui || true && docker rm chatbot-ui || true
11
+ docker run --name chatbot-ui --rm -e OPENAI_API_KEY=${OPENAI_API_KEY} -p 3000:3000 chatbot-ui
12
+
13
+ logs:
14
+ docker logs -f chatbot-ui
15
+
16
+ push:
17
+ docker tag chatbot-ui:latest ${DOCKER_USER}/chatbot-ui:${DOCKER_TAG}
18
+ docker push ${DOCKER_USER}/chatbot-ui:${DOCKER_TAG}
README.md ADDED
@@ -0,0 +1,117 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ sdk: docker
3
+ app_port: 3000
4
+ title: Chatbot UI
5
+ emoji: 💭🤷‍♀️
6
+ colorFrom: pink
7
+ colorTo: blue
8
+ duplicated_from: matthoffner/chatbot
9
+ ---
10
+
11
+ Forked chat-bot
12
+
13
+ # Chatbot UI
14
+
15
+ Chatbot UI is an open source chat UI for AI models.
16
+
17
+ See a [demo](https://twitter.com/mckaywrigley/status/1640380021423603713?s=46&t=AowqkodyK6B4JccSOxSPew).
18
+
19
+ ![Chatbot UI](./public/screenshots/screenshot-0402023.jpg)
20
+
21
+ ## Updates
22
+
23
+ Chatbot UI will be updated over time.
24
+
25
+ Expect frequent improvements.
26
+
27
+ **Next up:**
28
+
29
+ - [ ] Sharing
30
+ - [ ] "Bots"
31
+
32
+ ## Deploy
33
+
34
+ **Vercel**
35
+
36
+ Host your own live version of Chatbot UI with Vercel.
37
+
38
+ [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fmckaywrigley%2Fchatbot-ui)
39
+
40
+ **Docker**
41
+
42
+ Build locally:
43
+
44
+ ```shell
45
+ docker build -t chatgpt-ui .
46
+ docker run -e OPENAI_API_KEY=xxxxxxxx -p 3000:3000 chatgpt-ui
47
+ ```
48
+
49
+ Pull from ghcr:
50
+
51
+ ```
52
+ docker run -e OPENAI_API_KEY=xxxxxxxx -p 3000:3000 ghcr.io/mckaywrigley/chatbot-ui:main
53
+ ```
54
+
55
+ ## Running Locally
56
+
57
+ **1. Clone Repo**
58
+
59
+ ```bash
60
+ git clone https://github.com/mckaywrigley/chatbot-ui.git
61
+ ```
62
+
63
+ **2. Install Dependencies**
64
+
65
+ ```bash
66
+ npm i
67
+ ```
68
+
69
+ **3. Provide OpenAI API Key**
70
+
71
+ Create a .env.local file in the root of the repo with your OpenAI API Key:
72
+
73
+ ```bash
74
+ OPENAI_API_KEY=YOUR_KEY
75
+ ```
76
+
77
+ > 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.
78
+
79
+ > Additionally, if you have multiple OpenAI Organizations, you can set `OPENAI_ORGANIZATION` to specify one.
80
+
81
+ **4. Run App**
82
+
83
+ ```bash
84
+ npm run dev
85
+ ```
86
+
87
+ **5. Use It**
88
+
89
+ You should be able to start chatting.
90
+
91
+ ## Configuration
92
+
93
+ When deploying the application, the following environment variables can be set:
94
+
95
+ | Environment Variable | Default value | Description |
96
+ | --------------------------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
97
+ | OPENAI_API_KEY | | The default API key used for authentication with OpenAI |
98
+ | OPENAI_API_HOST | `https://api.openai.com` | The base url, for Azure use `https://<endpoint>.openai.azure.com` |
99
+ | OPENAI_API_TYPE | `openai` | The API type, options are `openai` or `azure` |
100
+ | OPENAI_API_VERSION | `2023-03-15-preview` | Only applicable for Azure OpenAI |
101
+ | AZURE_DEPLOYMENT_ID | | Needed when Azure OpenAI, Ref [Azure OpenAI API](https://learn.microsoft.com/zh-cn/azure/cognitive-services/openai/reference#completions) |
102
+ | OPENAI_ORGANIZATION | | Your OpenAI organization ID |
103
+ | DEFAULT_MODEL | `gpt-3.5-turbo` | The default model to use on new conversations, for Azure use `gpt-35-turbo` |
104
+ | NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT | [see here](utils/app/const.ts) | The default system prompt to use on new conversations |
105
+ | NEXT_PUBLIC_DEFAULT_TEMPERATURE | 1 | The default temperature to use on new conversations |
106
+ | GOOGLE_API_KEY | | See [Custom Search JSON API documentation][GCSE] |
107
+ | GOOGLE_CSE_ID | | See [Custom Search JSON API documentation][GCSE] |
108
+
109
+ If you do not provide an OpenAI API key with `OPENAI_API_KEY`, users will have to provide their own key.
110
+
111
+ If you don't have an OpenAI API key, you can get one [here](https://platform.openai.com/account/api-keys).
112
+
113
+ ## Contact
114
+
115
+ If you have any questions, feel free to reach out to Mckay on [Twitter](https://twitter.com/mckaywrigley).
116
+
117
+ [GCSE]: https://developers.google.com/custom-search/v1/overview
SECURITY.md ADDED
@@ -0,0 +1,53 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Security Policy
2
+
3
+
4
+ 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.
5
+
6
+ ## Reporting a Vulnerability
7
+
8
+ If you discover a vulnerability within the code, dependencies, or any other component of this repository, please follow these steps:
9
+
10
+ 1. **Do not disclose the vulnerability publicly.** Publicly disclosing a vulnerability may put the project at risk and could potentially harm other users.
11
+
12
+ 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:
13
+
14
+ - The affected component(s)
15
+ - Steps to reproduce the issue
16
+ - Potential impact of the vulnerability
17
+ - Any possible mitigations or workarounds
18
+
19
+ 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.
20
+
21
+ 4. **Cooperate with the maintainer(s).** If requested, provide additional information or assistance to help resolve the issue.
22
+
23
+ 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.
24
+
25
+ ## Reporting Secrets
26
+
27
+ If you discover any secrets, such as API keys or passwords, within the repository, follow these steps:
28
+
29
+ 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.
30
+
31
+ 2. **Contact the repository maintainer(s) privately.** Notify them of the discovered secret, its location, and any potential risks associated with it.
32
+
33
+ 3. **Wait for a response and further instructions.**
34
+
35
+ ## Responsible Disclosure
36
+
37
+ 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.
38
+
39
+ ## Patching and Updates
40
+
41
+ We are committed to maintaining the security of our project. When vulnerabilities are reported and confirmed, we will:
42
+
43
+ 1. Work diligently to develop and apply a patch or implement a mitigation strategy.
44
+ 2. Keep the reporter informed about the progress of the fix.
45
+ 3. Update the repository with the necessary patches and document the changes in the release notes or changelog.
46
+ 4. Credit the reporter for the discovery, if they wish to be acknowledged.
47
+
48
+ ## Contributing to Security
49
+
50
+ 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.
51
+
52
+ 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.
53
+
__tests__/utils/app/importExports.test.ts ADDED
@@ -0,0 +1,264 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { DEFAULT_SYSTEM_PROMPT, DEFAULT_TEMPERATURE } from '@/utils/app/const';
2
+ import {
3
+ cleanData,
4
+ isExportFormatV1,
5
+ isExportFormatV2,
6
+ isExportFormatV3,
7
+ isExportFormatV4,
8
+ isLatestExportFormat,
9
+ } from '@/utils/app/importExport';
10
+
11
+ import { ExportFormatV1, ExportFormatV2, ExportFormatV4 } from '@/types/export';
12
+ import { OpenAIModelID, OpenAIModels } from '@/types/openai';
13
+
14
+ import { describe, expect, it } from 'vitest';
15
+
16
+ describe('Export Format Functions', () => {
17
+ describe('isExportFormatV1', () => {
18
+ it('should return true for v1 format', () => {
19
+ const obj = [{ id: 1 }];
20
+ expect(isExportFormatV1(obj)).toBe(true);
21
+ });
22
+
23
+ it('should return false for non-v1 formats', () => {
24
+ const obj = { version: 3, history: [], folders: [] };
25
+ expect(isExportFormatV1(obj)).toBe(false);
26
+ });
27
+ });
28
+
29
+ describe('isExportFormatV2', () => {
30
+ it('should return true for v2 format', () => {
31
+ const obj = { history: [], folders: [] };
32
+ expect(isExportFormatV2(obj)).toBe(true);
33
+ });
34
+
35
+ it('should return false for non-v2 formats', () => {
36
+ const obj = { version: 3, history: [], folders: [] };
37
+ expect(isExportFormatV2(obj)).toBe(false);
38
+ });
39
+ });
40
+
41
+ describe('isExportFormatV3', () => {
42
+ it('should return true for v3 format', () => {
43
+ const obj = { version: 3, history: [], folders: [] };
44
+ expect(isExportFormatV3(obj)).toBe(true);
45
+ });
46
+
47
+ it('should return false for non-v3 formats', () => {
48
+ const obj = { version: 4, history: [], folders: [] };
49
+ expect(isExportFormatV3(obj)).toBe(false);
50
+ });
51
+ });
52
+
53
+ describe('isExportFormatV4', () => {
54
+ it('should return true for v4 format', () => {
55
+ const obj = { version: 4, history: [], folders: [], prompts: [] };
56
+ expect(isExportFormatV4(obj)).toBe(true);
57
+ });
58
+
59
+ it('should return false for non-v4 formats', () => {
60
+ const obj = { version: 5, history: [], folders: [], prompts: [] };
61
+ expect(isExportFormatV4(obj)).toBe(false);
62
+ });
63
+ });
64
+ });
65
+
66
+ describe('cleanData Functions', () => {
67
+ describe('cleaning v1 data', () => {
68
+ it('should return the latest format', () => {
69
+ const data = [
70
+ {
71
+ id: 1,
72
+ name: 'conversation 1',
73
+ messages: [
74
+ {
75
+ role: 'user',
76
+ content: "what's up ?",
77
+ },
78
+ {
79
+ role: 'assistant',
80
+ content: 'Hi',
81
+ },
82
+ ],
83
+ },
84
+ ] as ExportFormatV1;
85
+ const obj = cleanData(data);
86
+ expect(isLatestExportFormat(obj)).toBe(true);
87
+ expect(obj).toEqual({
88
+ version: 4,
89
+ history: [
90
+ {
91
+ id: 1,
92
+ name: 'conversation 1',
93
+ messages: [
94
+ {
95
+ role: 'user',
96
+ content: "what's up ?",
97
+ },
98
+ {
99
+ role: 'assistant',
100
+ content: 'Hi',
101
+ },
102
+ ],
103
+ model: OpenAIModels[OpenAIModelID.GPT_3_5],
104
+ prompt: DEFAULT_SYSTEM_PROMPT,
105
+ temperature: DEFAULT_TEMPERATURE,
106
+ folderId: null,
107
+ },
108
+ ],
109
+ folders: [],
110
+ prompts: [],
111
+ });
112
+ });
113
+ });
114
+
115
+ describe('cleaning v2 data', () => {
116
+ it('should return the latest format', () => {
117
+ const data = {
118
+ history: [
119
+ {
120
+ id: '1',
121
+ name: 'conversation 1',
122
+ messages: [
123
+ {
124
+ role: 'user',
125
+ content: "what's up ?",
126
+ },
127
+ {
128
+ role: 'assistant',
129
+ content: 'Hi',
130
+ },
131
+ ],
132
+ },
133
+ ],
134
+ folders: [
135
+ {
136
+ id: 1,
137
+ name: 'folder 1',
138
+ },
139
+ ],
140
+ } as ExportFormatV2;
141
+ const obj = cleanData(data);
142
+ expect(isLatestExportFormat(obj)).toBe(true);
143
+ expect(obj).toEqual({
144
+ version: 4,
145
+ history: [
146
+ {
147
+ id: '1',
148
+ name: 'conversation 1',
149
+ messages: [
150
+ {
151
+ role: 'user',
152
+ content: "what's up ?",
153
+ },
154
+ {
155
+ role: 'assistant',
156
+ content: 'Hi',
157
+ },
158
+ ],
159
+ model: OpenAIModels[OpenAIModelID.GPT_3_5],
160
+ prompt: DEFAULT_SYSTEM_PROMPT,
161
+ temperature: DEFAULT_TEMPERATURE,
162
+ folderId: null,
163
+ },
164
+ ],
165
+ folders: [
166
+ {
167
+ id: '1',
168
+ name: 'folder 1',
169
+ type: 'chat',
170
+ },
171
+ ],
172
+ prompts: [],
173
+ });
174
+ });
175
+ });
176
+
177
+ describe('cleaning v4 data', () => {
178
+ it('should return the latest format', () => {
179
+ const data = {
180
+ version: 4,
181
+ history: [
182
+ {
183
+ id: '1',
184
+ name: 'conversation 1',
185
+ messages: [
186
+ {
187
+ role: 'user',
188
+ content: "what's up ?",
189
+ },
190
+ {
191
+ role: 'assistant',
192
+ content: 'Hi',
193
+ },
194
+ ],
195
+ model: OpenAIModels[OpenAIModelID.GPT_3_5],
196
+ prompt: DEFAULT_SYSTEM_PROMPT,
197
+ temperature: DEFAULT_TEMPERATURE,
198
+ folderId: null,
199
+ },
200
+ ],
201
+ folders: [
202
+ {
203
+ id: '1',
204
+ name: 'folder 1',
205
+ type: 'chat',
206
+ },
207
+ ],
208
+ prompts: [
209
+ {
210
+ id: '1',
211
+ name: 'prompt 1',
212
+ description: '',
213
+ content: '',
214
+ model: OpenAIModels[OpenAIModelID.GPT_3_5],
215
+ folderId: null,
216
+ },
217
+ ],
218
+ } as ExportFormatV4;
219
+
220
+ const obj = cleanData(data);
221
+ expect(isLatestExportFormat(obj)).toBe(true);
222
+ expect(obj).toEqual({
223
+ version: 4,
224
+ history: [
225
+ {
226
+ id: '1',
227
+ name: 'conversation 1',
228
+ messages: [
229
+ {
230
+ role: 'user',
231
+ content: "what's up ?",
232
+ },
233
+ {
234
+ role: 'assistant',
235
+ content: 'Hi',
236
+ },
237
+ ],
238
+ model: OpenAIModels[OpenAIModelID.GPT_3_5],
239
+ prompt: DEFAULT_SYSTEM_PROMPT,
240
+ temperature: DEFAULT_TEMPERATURE,
241
+ folderId: null,
242
+ },
243
+ ],
244
+ folders: [
245
+ {
246
+ id: '1',
247
+ name: 'folder 1',
248
+ type: 'chat',
249
+ },
250
+ ],
251
+ prompts: [
252
+ {
253
+ id: '1',
254
+ name: 'prompt 1',
255
+ description: '',
256
+ content: '',
257
+ model: OpenAIModels[OpenAIModelID.GPT_3_5],
258
+ folderId: null,
259
+ },
260
+ ],
261
+ });
262
+ });
263
+ });
264
+ });
components/Buttons/SidebarActionButton/SidebarActionButton.tsx ADDED
@@ -0,0 +1,17 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { MouseEventHandler, ReactElement } from 'react';
2
+
3
+ interface Props {
4
+ handleClick: MouseEventHandler<HTMLButtonElement>;
5
+ children: ReactElement;
6
+ }
7
+
8
+ const SidebarActionButton = ({ handleClick, children }: Props) => (
9
+ <button
10
+ className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
11
+ onClick={handleClick}
12
+ >
13
+ {children}
14
+ </button>
15
+ );
16
+
17
+ export default SidebarActionButton;
components/Buttons/SidebarActionButton/index.ts ADDED
@@ -0,0 +1 @@
 
 
1
+ export { default } from './SidebarActionButton';
components/Chat/Chat.tsx ADDED
@@ -0,0 +1,487 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { IconClearAll, IconSettings } from '@tabler/icons-react';
2
+ import {
3
+ MutableRefObject,
4
+ memo,
5
+ useCallback,
6
+ useContext,
7
+ useEffect,
8
+ useRef,
9
+ useState,
10
+ } from 'react';
11
+ import toast from 'react-hot-toast';
12
+
13
+ import { useTranslation } from 'next-i18next';
14
+
15
+ import { getEndpoint } from '@/utils/app/api';
16
+ import {
17
+ saveConversation,
18
+ saveConversations,
19
+ updateConversation,
20
+ } from '@/utils/app/conversation';
21
+ import { throttle } from '@/utils/data/throttle';
22
+
23
+ import { ChatBody, Conversation, Message } from '@/types/chat';
24
+ import { Plugin } from '@/types/plugin';
25
+
26
+ import HomeContext from '@/pages/api/home/home.context';
27
+
28
+ import { ChatInput } from './ChatInput';
29
+ import { ChatLoader } from './ChatLoader';
30
+ import { ErrorMessageDiv } from './ErrorMessageDiv';
31
+ import { ModelSelect } from './ModelSelect';
32
+ import { SystemPrompt } from './SystemPrompt';
33
+ import { TemperatureSlider } from './Temperature';
34
+ import { MemoizedChatMessage } from './MemoizedChatMessage';
35
+
36
+ interface Props {
37
+ stopConversationRef: MutableRefObject<boolean>;
38
+ }
39
+
40
+ export const Chat = memo(({ stopConversationRef }: Props) => {
41
+ const { t } = useTranslation('chat');
42
+
43
+ const {
44
+ state: {
45
+ selectedConversation,
46
+ conversations,
47
+ models,
48
+ apiKey,
49
+ pluginKeys,
50
+ serverSideApiKeyIsSet,
51
+ messageIsStreaming,
52
+ modelError,
53
+ loading,
54
+ prompts,
55
+ },
56
+ handleUpdateConversation,
57
+ dispatch: homeDispatch,
58
+ } = useContext(HomeContext);
59
+
60
+ const [currentMessage, setCurrentMessage] = useState<Message>();
61
+ const [autoScrollEnabled, setAutoScrollEnabled] = useState<boolean>(true);
62
+ const [showSettings, setShowSettings] = useState<boolean>(false);
63
+ const [showScrollDownButton, setShowScrollDownButton] =
64
+ useState<boolean>(false);
65
+
66
+ const messagesEndRef = useRef<HTMLDivElement>(null);
67
+ const chatContainerRef = useRef<HTMLDivElement>(null);
68
+ const textareaRef = useRef<HTMLTextAreaElement>(null);
69
+
70
+ const handleSend = useCallback(
71
+ async (message: Message, deleteCount = 0, plugin: Plugin | null = null) => {
72
+ if (selectedConversation) {
73
+ let updatedConversation: Conversation;
74
+ if (deleteCount) {
75
+ const updatedMessages = [...selectedConversation.messages];
76
+ for (let i = 0; i < deleteCount; i++) {
77
+ updatedMessages.pop();
78
+ }
79
+ updatedConversation = {
80
+ ...selectedConversation,
81
+ messages: [...updatedMessages, message],
82
+ };
83
+ } else {
84
+ updatedConversation = {
85
+ ...selectedConversation,
86
+ messages: [...selectedConversation.messages, message],
87
+ };
88
+ }
89
+ homeDispatch({
90
+ field: 'selectedConversation',
91
+ value: updatedConversation,
92
+ });
93
+ homeDispatch({ field: 'loading', value: true });
94
+ homeDispatch({ field: 'messageIsStreaming', value: true });
95
+ const chatBody: ChatBody = {
96
+ model: updatedConversation.model,
97
+ messages: updatedConversation.messages,
98
+ key: apiKey,
99
+ prompt: updatedConversation.prompt,
100
+ temperature: updatedConversation.temperature,
101
+ };
102
+ const endpoint = getEndpoint(plugin);
103
+ let body;
104
+ if (!plugin) {
105
+ body = JSON.stringify(chatBody);
106
+ } else {
107
+ body = JSON.stringify({
108
+ ...chatBody,
109
+ googleAPIKey: pluginKeys
110
+ .find((key) => key.pluginId === 'google-search')
111
+ ?.requiredKeys.find((key) => key.key === 'GOOGLE_API_KEY')?.value,
112
+ googleCSEId: pluginKeys
113
+ .find((key) => key.pluginId === 'google-search')
114
+ ?.requiredKeys.find((key) => key.key === 'GOOGLE_CSE_ID')?.value,
115
+ });
116
+ }
117
+ const controller = new AbortController();
118
+ const response = await fetch(endpoint, {
119
+ method: 'POST',
120
+ headers: {
121
+ 'Content-Type': 'application/json',
122
+ },
123
+ signal: controller.signal,
124
+ body,
125
+ });
126
+ if (!response.ok) {
127
+ homeDispatch({ field: 'loading', value: false });
128
+ homeDispatch({ field: 'messageIsStreaming', value: false });
129
+ toast.error(response.statusText);
130
+ return;
131
+ }
132
+ const data = response.body;
133
+ if (!data) {
134
+ homeDispatch({ field: 'loading', value: false });
135
+ homeDispatch({ field: 'messageIsStreaming', value: false });
136
+ return;
137
+ }
138
+ if (!plugin) {
139
+ if (updatedConversation.messages.length === 1) {
140
+ const { content } = message;
141
+ const customName =
142
+ content.length > 30 ? content.substring(0, 30) + '...' : content;
143
+ updatedConversation = {
144
+ ...updatedConversation,
145
+ name: customName,
146
+ };
147
+ }
148
+ homeDispatch({ field: 'loading', value: false });
149
+ const reader = data.getReader();
150
+ const decoder = new TextDecoder();
151
+ let done = false;
152
+ let isFirst = true;
153
+ let text = '';
154
+ while (!done) {
155
+ if (stopConversationRef.current === true) {
156
+ controller.abort();
157
+ done = true;
158
+ break;
159
+ }
160
+ const { value, done: doneReading } = await reader.read();
161
+ done = doneReading;
162
+ const chunkValue = decoder.decode(value);
163
+ text += chunkValue;
164
+ if (isFirst) {
165
+ isFirst = false;
166
+ const updatedMessages: Message[] = [
167
+ ...updatedConversation.messages,
168
+ { role: 'assistant', content: chunkValue },
169
+ ];
170
+ updatedConversation = {
171
+ ...updatedConversation,
172
+ messages: updatedMessages,
173
+ };
174
+ homeDispatch({
175
+ field: 'selectedConversation',
176
+ value: updatedConversation,
177
+ });
178
+ } else {
179
+ const updatedMessages: Message[] =
180
+ updatedConversation.messages.map((message, index) => {
181
+ if (index === updatedConversation.messages.length - 1) {
182
+ return {
183
+ ...message,
184
+ content: text,
185
+ };
186
+ }
187
+ return message;
188
+ });
189
+ updatedConversation = {
190
+ ...updatedConversation,
191
+ messages: updatedMessages,
192
+ };
193
+ homeDispatch({
194
+ field: 'selectedConversation',
195
+ value: updatedConversation,
196
+ });
197
+ }
198
+ }
199
+ saveConversation(updatedConversation);
200
+ const updatedConversations: Conversation[] = conversations.map(
201
+ (conversation) => {
202
+ if (conversation.id === selectedConversation.id) {
203
+ return updatedConversation;
204
+ }
205
+ return conversation;
206
+ },
207
+ );
208
+ if (updatedConversations.length === 0) {
209
+ updatedConversations.push(updatedConversation);
210
+ }
211
+ homeDispatch({ field: 'conversations', value: updatedConversations });
212
+ saveConversations(updatedConversations);
213
+ homeDispatch({ field: 'messageIsStreaming', value: false });
214
+ } else {
215
+ const { answer } = await response.json();
216
+ const updatedMessages: Message[] = [
217
+ ...updatedConversation.messages,
218
+ { role: 'assistant', content: answer },
219
+ ];
220
+ updatedConversation = {
221
+ ...updatedConversation,
222
+ messages: updatedMessages,
223
+ };
224
+ homeDispatch({
225
+ field: 'selectedConversation',
226
+ value: updateConversation,
227
+ });
228
+ saveConversation(updatedConversation);
229
+ const updatedConversations: Conversation[] = conversations.map(
230
+ (conversation) => {
231
+ if (conversation.id === selectedConversation.id) {
232
+ return updatedConversation;
233
+ }
234
+ return conversation;
235
+ },
236
+ );
237
+ if (updatedConversations.length === 0) {
238
+ updatedConversations.push(updatedConversation);
239
+ }
240
+ homeDispatch({ field: 'conversations', value: updatedConversations });
241
+ saveConversations(updatedConversations);
242
+ homeDispatch({ field: 'loading', value: false });
243
+ homeDispatch({ field: 'messageIsStreaming', value: false });
244
+ }
245
+ }
246
+ },
247
+ [
248
+ apiKey,
249
+ conversations,
250
+ pluginKeys,
251
+ selectedConversation,
252
+ stopConversationRef,
253
+ ],
254
+ );
255
+
256
+ const scrollToBottom = useCallback(() => {
257
+ if (autoScrollEnabled) {
258
+ messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
259
+ textareaRef.current?.focus();
260
+ }
261
+ }, [autoScrollEnabled]);
262
+
263
+ const handleScroll = () => {
264
+ if (chatContainerRef.current) {
265
+ const { scrollTop, scrollHeight, clientHeight } =
266
+ chatContainerRef.current;
267
+ const bottomTolerance = 30;
268
+
269
+ if (scrollTop + clientHeight < scrollHeight - bottomTolerance) {
270
+ setAutoScrollEnabled(false);
271
+ setShowScrollDownButton(true);
272
+ } else {
273
+ setAutoScrollEnabled(true);
274
+ setShowScrollDownButton(false);
275
+ }
276
+ }
277
+ };
278
+
279
+ const handleScrollDown = () => {
280
+ chatContainerRef.current?.scrollTo({
281
+ top: chatContainerRef.current.scrollHeight,
282
+ behavior: 'smooth',
283
+ });
284
+ };
285
+
286
+ const handleSettings = () => {
287
+ setShowSettings(!showSettings);
288
+ };
289
+
290
+ const onClearAll = () => {
291
+ if (
292
+ confirm(t<string>('Are you sure you want to clear all messages?')) &&
293
+ selectedConversation
294
+ ) {
295
+ handleUpdateConversation(selectedConversation, {
296
+ key: 'messages',
297
+ value: [],
298
+ });
299
+ }
300
+ };
301
+
302
+ const scrollDown = () => {
303
+ if (autoScrollEnabled) {
304
+ messagesEndRef.current?.scrollIntoView(true);
305
+ }
306
+ };
307
+ const throttledScrollDown = throttle(scrollDown, 250);
308
+
309
+ // useEffect(() => {
310
+ // console.log('currentMessage', currentMessage);
311
+ // if (currentMessage) {
312
+ // handleSend(currentMessage);
313
+ // homeDispatch({ field: 'currentMessage', value: undefined });
314
+ // }
315
+ // }, [currentMessage]);
316
+
317
+ useEffect(() => {
318
+ throttledScrollDown();
319
+ selectedConversation &&
320
+ setCurrentMessage(
321
+ selectedConversation.messages[selectedConversation.messages.length - 2],
322
+ );
323
+ }, [selectedConversation, throttledScrollDown]);
324
+
325
+ useEffect(() => {
326
+ const observer = new IntersectionObserver(
327
+ ([entry]) => {
328
+ setAutoScrollEnabled(entry.isIntersecting);
329
+ if (entry.isIntersecting) {
330
+ textareaRef.current?.focus();
331
+ }
332
+ },
333
+ {
334
+ root: null,
335
+ threshold: 0.5,
336
+ },
337
+ );
338
+ const messagesEndElement = messagesEndRef.current;
339
+ if (messagesEndElement) {
340
+ observer.observe(messagesEndElement);
341
+ }
342
+ return () => {
343
+ if (messagesEndElement) {
344
+ observer.unobserve(messagesEndElement);
345
+ }
346
+ };
347
+ }, [messagesEndRef]);
348
+
349
+ return (
350
+ <div className="relative flex-1 overflow-hidden bg-white dark:bg-[#343541]">
351
+ {!(apiKey || serverSideApiKeyIsSet) ? (
352
+ <div className="mx-auto flex h-full w-[300px] flex-col justify-center space-y-6 sm:w-[600px]">
353
+ <div className="text-center text-4xl font-bold text-black dark:text-white">
354
+ Welcome to Chatbot UI
355
+ </div>
356
+ <div className="text-center text-lg text-black dark:text-white">
357
+ <div className="mb-8">{`Chatbot UI is an open source clone of OpenAI's ChatGPT UI.`}</div>
358
+ <div className="mb-2 font-bold">
359
+ Important: Chatbot UI is 100% unaffiliated with OpenAI.
360
+ </div>
361
+ </div>
362
+ <div className="text-center text-gray-500 dark:text-gray-400">
363
+ <div className="mb-2">
364
+ Chatbot UI allows you to plug in your base url to use this UI with
365
+ your API.
366
+ </div>
367
+ <div className="mb-2">
368
+ It is <span className="italic">only</span> used to communicate
369
+ with your API.
370
+ </div>
371
+ </div>
372
+ </div>
373
+ ) : modelError ? (
374
+ <ErrorMessageDiv error={modelError} />
375
+ ) : (
376
+ <>
377
+ <div
378
+ className="max-h-full overflow-x-hidden"
379
+ ref={chatContainerRef}
380
+ onScroll={handleScroll}
381
+ >
382
+ {selectedConversation?.messages.length === 0 ? (
383
+ <>
384
+ <div className="mx-auto flex flex-col space-y-5 md:space-y-10 px-3 pt-5 md:pt-12 sm:max-w-[600px]">
385
+ <div className="text-center text-3xl font-semibold text-gray-800 dark:text-gray-100">
386
+ Chatbot UI
387
+ </div>
388
+
389
+ {models.length > 0 && (
390
+ <div className="flex h-full flex-col space-y-4 rounded-lg border border-neutral-200 p-4 dark:border-neutral-600">
391
+ <ModelSelect />
392
+
393
+ <SystemPrompt
394
+ conversation={selectedConversation}
395
+ prompts={prompts}
396
+ onChangePrompt={(prompt) =>
397
+ handleUpdateConversation(selectedConversation, {
398
+ key: 'prompt',
399
+ value: prompt,
400
+ })
401
+ }
402
+ />
403
+
404
+ <TemperatureSlider
405
+ label={t('Temperature')}
406
+ onChangeTemperature={(temperature) =>
407
+ handleUpdateConversation(selectedConversation, {
408
+ key: 'temperature',
409
+ value: temperature,
410
+ })
411
+ }
412
+ />
413
+ </div>
414
+ )}
415
+ </div>
416
+ </>
417
+ ) : (
418
+ <>
419
+ <div className="sticky top-0 z-10 flex justify-center border border-b-neutral-300 bg-neutral-100 py-2 text-sm text-neutral-500 dark:border-none dark:bg-[#444654] dark:text-neutral-200">
420
+ <button
421
+ className="ml-2 cursor-pointer hover:opacity-50"
422
+ onClick={handleSettings}
423
+ >
424
+ <IconSettings size={18} />
425
+ </button>
426
+ <button
427
+ className="ml-2 cursor-pointer hover:opacity-50"
428
+ onClick={onClearAll}
429
+ >
430
+ <IconClearAll size={18} />
431
+ </button>
432
+ </div>
433
+ {showSettings && (
434
+ <div className="flex flex-col space-y-10 md:mx-auto md:max-w-xl md:gap-6 md:py-3 md:pt-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
435
+ <div className="flex h-full flex-col space-y-4 border-b border-neutral-200 p-4 dark:border-neutral-600 md:rounded-lg md:border">
436
+ <ModelSelect />
437
+ </div>
438
+ </div>
439
+ )}
440
+
441
+ {selectedConversation?.messages.map((message, index) => (
442
+ <MemoizedChatMessage
443
+ key={index}
444
+ message={message}
445
+ messageIndex={index}
446
+ onEdit={(editedMessage) => {
447
+ setCurrentMessage(editedMessage);
448
+ // discard edited message and the ones that come after then resend
449
+ handleSend(
450
+ editedMessage,
451
+ selectedConversation?.messages.length - index,
452
+ );
453
+ }}
454
+ />
455
+ ))}
456
+
457
+ {loading && <ChatLoader />}
458
+
459
+ <div
460
+ className="h-[162px] bg-white dark:bg-[#343541]"
461
+ ref={messagesEndRef}
462
+ />
463
+ </>
464
+ )}
465
+ </div>
466
+
467
+ <ChatInput
468
+ stopConversationRef={stopConversationRef}
469
+ textareaRef={textareaRef}
470
+ onSend={(message, plugin) => {
471
+ setCurrentMessage(message);
472
+ handleSend(message, 0, plugin);
473
+ }}
474
+ onScrollDownClick={handleScrollDown}
475
+ onRegenerate={() => {
476
+ if (currentMessage) {
477
+ handleSend(currentMessage, 2, null);
478
+ }
479
+ }}
480
+ showScrollDownButton={showScrollDownButton}
481
+ />
482
+ </>
483
+ )}
484
+ </div>
485
+ );
486
+ });
487
+ Chat.displayName = 'Chat';
components/Chat/ChatInput.tsx ADDED
@@ -0,0 +1,394 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import {
2
+ IconArrowDown,
3
+ IconBolt,
4
+ IconBrandGoogle,
5
+ IconPlayerStop,
6
+ IconRepeat,
7
+ IconSend,
8
+ } from '@tabler/icons-react';
9
+ import {
10
+ KeyboardEvent,
11
+ MutableRefObject,
12
+ useCallback,
13
+ useContext,
14
+ useEffect,
15
+ useRef,
16
+ useState,
17
+ } from 'react';
18
+
19
+ import { useTranslation } from 'next-i18next';
20
+
21
+ import { Message } from '@/types/chat';
22
+ import { Plugin } from '@/types/plugin';
23
+ import { Prompt } from '@/types/prompt';
24
+
25
+ import HomeContext from '@/pages/api/home/home.context';
26
+
27
+ import { PluginSelect } from './PluginSelect';
28
+ import { PromptList } from './PromptList';
29
+ import { VariableModal } from './VariableModal';
30
+
31
+ interface Props {
32
+ onSend: (message: Message, plugin: Plugin | null) => void;
33
+ onRegenerate: () => void;
34
+ onScrollDownClick: () => void;
35
+ stopConversationRef: MutableRefObject<boolean>;
36
+ textareaRef: MutableRefObject<HTMLTextAreaElement | null>;
37
+ showScrollDownButton: boolean;
38
+ }
39
+
40
+ export const ChatInput = ({
41
+ onSend,
42
+ onRegenerate,
43
+ onScrollDownClick,
44
+ stopConversationRef,
45
+ textareaRef,
46
+ showScrollDownButton,
47
+ }: Props) => {
48
+ const { t } = useTranslation('chat');
49
+
50
+ const {
51
+ state: { selectedConversation, messageIsStreaming, prompts },
52
+
53
+ dispatch: homeDispatch,
54
+ } = useContext(HomeContext);
55
+
56
+ const [content, setContent] = useState<string>();
57
+ const [isTyping, setIsTyping] = useState<boolean>(false);
58
+ const [showPromptList, setShowPromptList] = useState(false);
59
+ const [activePromptIndex, setActivePromptIndex] = useState(0);
60
+ const [promptInputValue, setPromptInputValue] = useState('');
61
+ const [variables, setVariables] = useState<string[]>([]);
62
+ const [isModalVisible, setIsModalVisible] = useState(false);
63
+ const [showPluginSelect, setShowPluginSelect] = useState(false);
64
+ const [plugin, setPlugin] = useState<Plugin | null>(null);
65
+
66
+ const promptListRef = useRef<HTMLUListElement | null>(null);
67
+
68
+ const filteredPrompts = prompts.filter((prompt) =>
69
+ prompt.name.toLowerCase().includes(promptInputValue.toLowerCase()),
70
+ );
71
+
72
+ const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
73
+ const value = e.target.value;
74
+ const maxLength = selectedConversation?.model.maxLength;
75
+
76
+ if (maxLength && value.length > maxLength) {
77
+ alert(
78
+ t(
79
+ `Message limit is {{maxLength}} characters. You have entered {{valueLength}} characters.`,
80
+ { maxLength, valueLength: value.length },
81
+ ),
82
+ );
83
+ return;
84
+ }
85
+
86
+ setContent(value);
87
+ updatePromptListVisibility(value);
88
+ };
89
+
90
+ const handleSend = () => {
91
+ if (messageIsStreaming) {
92
+ return;
93
+ }
94
+
95
+ if (!content) {
96
+ alert(t('Please enter a message'));
97
+ return;
98
+ }
99
+
100
+ onSend({ role: 'user', content }, plugin);
101
+ setContent('');
102
+ setPlugin(null);
103
+
104
+ if (window.innerWidth < 640 && textareaRef && textareaRef.current) {
105
+ textareaRef.current.blur();
106
+ }
107
+ };
108
+
109
+ const handleStopConversation = () => {
110
+ stopConversationRef.current = true;
111
+ setTimeout(() => {
112
+ stopConversationRef.current = false;
113
+ }, 1000);
114
+ };
115
+
116
+ const isMobile = () => {
117
+ const userAgent =
118
+ typeof window.navigator === 'undefined' ? '' : navigator.userAgent;
119
+ const mobileRegex =
120
+ /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i;
121
+ return mobileRegex.test(userAgent);
122
+ };
123
+
124
+ const handleInitModal = () => {
125
+ const selectedPrompt = filteredPrompts[activePromptIndex];
126
+ if (selectedPrompt) {
127
+ setContent((prevContent) => {
128
+ const newContent = prevContent?.replace(
129
+ /\/\w*$/,
130
+ selectedPrompt.content,
131
+ );
132
+ return newContent;
133
+ });
134
+ handlePromptSelect(selectedPrompt);
135
+ }
136
+ setShowPromptList(false);
137
+ };
138
+
139
+ const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
140
+ if (showPromptList) {
141
+ if (e.key === 'ArrowDown') {
142
+ e.preventDefault();
143
+ setActivePromptIndex((prevIndex) =>
144
+ prevIndex < prompts.length - 1 ? prevIndex + 1 : prevIndex,
145
+ );
146
+ } else if (e.key === 'ArrowUp') {
147
+ e.preventDefault();
148
+ setActivePromptIndex((prevIndex) =>
149
+ prevIndex > 0 ? prevIndex - 1 : prevIndex,
150
+ );
151
+ } else if (e.key === 'Tab') {
152
+ e.preventDefault();
153
+ setActivePromptIndex((prevIndex) =>
154
+ prevIndex < prompts.length - 1 ? prevIndex + 1 : 0,
155
+ );
156
+ } else if (e.key === 'Enter') {
157
+ e.preventDefault();
158
+ handleInitModal();
159
+ } else if (e.key === 'Escape') {
160
+ e.preventDefault();
161
+ setShowPromptList(false);
162
+ } else {
163
+ setActivePromptIndex(0);
164
+ }
165
+ } else if (e.key === 'Enter' && !isTyping && !isMobile() && !e.shiftKey) {
166
+ e.preventDefault();
167
+ handleSend();
168
+ } else if (e.key === '/' && e.metaKey) {
169
+ e.preventDefault();
170
+ setShowPluginSelect(!showPluginSelect);
171
+ }
172
+ };
173
+
174
+ const parseVariables = (content: string) => {
175
+ const regex = /{{(.*?)}}/g;
176
+ const foundVariables = [];
177
+ let match;
178
+
179
+ while ((match = regex.exec(content)) !== null) {
180
+ foundVariables.push(match[1]);
181
+ }
182
+
183
+ return foundVariables;
184
+ };
185
+
186
+ const updatePromptListVisibility = useCallback((text: string) => {
187
+ const match = text.match(/\/\w*$/);
188
+
189
+ if (match) {
190
+ setShowPromptList(true);
191
+ setPromptInputValue(match[0].slice(1));
192
+ } else {
193
+ setShowPromptList(false);
194
+ setPromptInputValue('');
195
+ }
196
+ }, []);
197
+
198
+ const handlePromptSelect = (prompt: Prompt) => {
199
+ const parsedVariables = parseVariables(prompt.content);
200
+ setVariables(parsedVariables);
201
+
202
+ if (parsedVariables.length > 0) {
203
+ setIsModalVisible(true);
204
+ } else {
205
+ setContent((prevContent) => {
206
+ const updatedContent = prevContent?.replace(/\/\w*$/, prompt.content);
207
+ return updatedContent;
208
+ });
209
+ updatePromptListVisibility(prompt.content);
210
+ }
211
+ };
212
+
213
+ const handleSubmit = (updatedVariables: string[]) => {
214
+ const newContent = content?.replace(/{{(.*?)}}/g, (match, variable) => {
215
+ const index = variables.indexOf(variable);
216
+ return updatedVariables[index];
217
+ });
218
+
219
+ setContent(newContent);
220
+
221
+ if (textareaRef && textareaRef.current) {
222
+ textareaRef.current.focus();
223
+ }
224
+ };
225
+
226
+ useEffect(() => {
227
+ if (promptListRef.current) {
228
+ promptListRef.current.scrollTop = activePromptIndex * 30;
229
+ }
230
+ }, [activePromptIndex]);
231
+
232
+ useEffect(() => {
233
+ if (textareaRef && textareaRef.current) {
234
+ textareaRef.current.style.height = 'inherit';
235
+ textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`;
236
+ textareaRef.current.style.overflow = `${
237
+ textareaRef?.current?.scrollHeight > 400 ? 'auto' : 'hidden'
238
+ }`;
239
+ }
240
+ }, [content]);
241
+
242
+ useEffect(() => {
243
+ const handleOutsideClick = (e: MouseEvent) => {
244
+ if (
245
+ promptListRef.current &&
246
+ !promptListRef.current.contains(e.target as Node)
247
+ ) {
248
+ setShowPromptList(false);
249
+ }
250
+ };
251
+
252
+ window.addEventListener('click', handleOutsideClick);
253
+
254
+ return () => {
255
+ window.removeEventListener('click', handleOutsideClick);
256
+ };
257
+ }, []);
258
+
259
+ return (
260
+ <div className="absolute bottom-0 left-0 w-full border-transparent bg-gradient-to-b from-transparent via-white to-white pt-6 dark:border-white/20 dark:via-[#343541] dark:to-[#343541] md:pt-2">
261
+ <div className="stretch mx-2 mt-4 flex flex-row gap-3 last:mb-2 md:mx-4 md:mt-[52px] md:last:mb-6 lg:mx-auto lg:max-w-3xl">
262
+ {messageIsStreaming && (
263
+ <button
264
+ className="absolute top-0 left-0 right-0 mx-auto mb-3 flex w-fit items-center gap-3 rounded border border-neutral-200 bg-white py-2 px-4 text-black hover:opacity-50 dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:mb-0 md:mt-2"
265
+ onClick={handleStopConversation}
266
+ >
267
+ <IconPlayerStop size={16} /> {t('Stop Generating')}
268
+ </button>
269
+ )}
270
+
271
+ {!messageIsStreaming &&
272
+ selectedConversation &&
273
+ selectedConversation.messages.length > 0 && (
274
+ <button
275
+ className="absolute top-0 left-0 right-0 mx-auto mb-3 flex w-fit items-center gap-3 rounded border border-neutral-200 bg-white py-2 px-4 text-black hover:opacity-50 dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:mb-0 md:mt-2"
276
+ onClick={onRegenerate}
277
+ >
278
+ <IconRepeat size={16} /> {t('Regenerate response')}
279
+ </button>
280
+ )}
281
+
282
+ <div className="relative mx-2 flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-[#40414F] dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] sm:mx-4">
283
+ <button
284
+ className="absolute left-2 top-2 rounded-sm p-1 text-neutral-800 opacity-60 hover:bg-neutral-200 hover:text-neutral-900 dark:bg-opacity-50 dark:text-neutral-100 dark:hover:text-neutral-200"
285
+ onClick={() => setShowPluginSelect(!showPluginSelect)}
286
+ onKeyDown={(e) => {}}
287
+ >
288
+ {plugin ? <IconBrandGoogle size={20} /> : <IconBolt size={20} />}
289
+ </button>
290
+
291
+ {showPluginSelect && (
292
+ <div className="absolute left-0 bottom-14 rounded bg-white dark:bg-[#343541]">
293
+ <PluginSelect
294
+ plugin={plugin}
295
+ onKeyDown={(e: any) => {
296
+ if (e.key === 'Escape') {
297
+ e.preventDefault();
298
+ setShowPluginSelect(false);
299
+ textareaRef.current?.focus();
300
+ }
301
+ }}
302
+ onPluginChange={(plugin: Plugin) => {
303
+ setPlugin(plugin);
304
+ setShowPluginSelect(false);
305
+
306
+ if (textareaRef && textareaRef.current) {
307
+ textareaRef.current.focus();
308
+ }
309
+ }}
310
+ />
311
+ </div>
312
+ )}
313
+
314
+ <textarea
315
+ ref={textareaRef}
316
+ className="m-0 w-full resize-none border-0 bg-transparent p-0 py-2 pr-8 pl-10 text-black dark:bg-transparent dark:text-white md:py-3 md:pl-10"
317
+ style={{
318
+ resize: 'none',
319
+ bottom: `${textareaRef?.current?.scrollHeight}px`,
320
+ maxHeight: '400px',
321
+ overflow: `${
322
+ textareaRef.current && textareaRef.current.scrollHeight > 400
323
+ ? 'auto'
324
+ : 'hidden'
325
+ }`,
326
+ }}
327
+ placeholder={
328
+ t('Type a message or type "/" to select a prompt...') || ''
329
+ }
330
+ value={content}
331
+ rows={1}
332
+ onCompositionStart={() => setIsTyping(true)}
333
+ onCompositionEnd={() => setIsTyping(false)}
334
+ onChange={handleChange}
335
+ onKeyDown={handleKeyDown}
336
+ />
337
+
338
+ <button
339
+ className="absolute right-2 top-2 rounded-sm p-1 text-neutral-800 opacity-60 hover:bg-neutral-200 hover:text-neutral-900 dark:bg-opacity-50 dark:text-neutral-100 dark:hover:text-neutral-200"
340
+ onClick={handleSend}
341
+ >
342
+ {messageIsStreaming ? (
343
+ <div className="h-4 w-4 animate-spin rounded-full border-t-2 border-neutral-800 opacity-60 dark:border-neutral-100"></div>
344
+ ) : (
345
+ <IconSend size={18} />
346
+ )}
347
+ </button>
348
+
349
+ {showScrollDownButton && (
350
+ <div className="absolute bottom-12 right-0 lg:bottom-0 lg:-right-10">
351
+ <button
352
+ className="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-300 text-gray-800 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-neutral-200"
353
+ onClick={onScrollDownClick}
354
+ >
355
+ <IconArrowDown size={18} />
356
+ </button>
357
+ </div>
358
+ )}
359
+
360
+ {showPromptList && filteredPrompts.length > 0 && (
361
+ <div className="absolute bottom-12 w-full">
362
+ <PromptList
363
+ activePromptIndex={activePromptIndex}
364
+ prompts={filteredPrompts}
365
+ onSelect={handleInitModal}
366
+ onMouseOver={setActivePromptIndex}
367
+ promptListRef={promptListRef}
368
+ />
369
+ </div>
370
+ )}
371
+
372
+ {isModalVisible && (
373
+ <VariableModal
374
+ prompt={filteredPrompts[activePromptIndex]}
375
+ variables={variables}
376
+ onSubmit={handleSubmit}
377
+ onClose={() => setIsModalVisible(false)}
378
+ />
379
+ )}
380
+ </div>
381
+ </div>
382
+ <div className="px-3 pt-2 pb-3 text-center text-[12px] text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">
383
+ <a
384
+ href="https://erichartford.com/meet-samantha"
385
+ target="_blank"
386
+ rel="noreferrer"
387
+ className="underline"
388
+ >
389
+ Chatting with Samantha-GGML-7B
390
+ </a> running on a <a target="_blank" rel="noreferrer" className="underline" href="https://huggingface.co/spaces/matthoffner/ggml-llm-api">CPU upgrade space</a> using <a target="_blank" rel="noreferrer" className="underline" href="https://github.com/mckaywrigley/chatbot-ui">chatbot-ui</a>
391
+ </div>
392
+ </div>
393
+ );
394
+ };
components/Chat/ChatLoader.tsx ADDED
@@ -0,0 +1,20 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { IconRobot } from '@tabler/icons-react';
2
+ import { FC } from 'react';
3
+
4
+ interface Props { }
5
+
6
+ export const ChatLoader: FC<Props> = () => {
7
+ return (
8
+ <div
9
+ className="group border-b border-black/10 bg-gray-50 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100"
10
+ style={{ overflowWrap: 'anywhere' }}
11
+ >
12
+ <div className="m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
13
+ <div className="min-w-[40px] items-end">
14
+ <IconRobot size={30} />
15
+ </div>
16
+ <span className="animate-pulse cursor-default mt-1">▍</span>
17
+ </div>
18
+ </div>
19
+ );
20
+ };
components/Chat/ChatMessage.tsx ADDED
@@ -0,0 +1,291 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import {
2
+ IconCheck,
3
+ IconCopy,
4
+ IconEdit,
5
+ IconRobot,
6
+ IconTrash,
7
+ IconUser,
8
+ } from '@tabler/icons-react';
9
+ import { FC, memo, useContext, useEffect, useRef, useState } from 'react';
10
+
11
+ import { useTranslation } from 'next-i18next';
12
+
13
+ import { updateConversation } from '@/utils/app/conversation';
14
+
15
+ import { Message } from '@/types/chat';
16
+
17
+ import HomeContext from '@/pages/api/home/home.context';
18
+
19
+ import { CodeBlock } from '../Markdown/CodeBlock';
20
+ import { MemoizedReactMarkdown } from '../Markdown/MemoizedReactMarkdown';
21
+
22
+ import rehypeMathjax from 'rehype-mathjax';
23
+ import remarkGfm from 'remark-gfm';
24
+ import remarkMath from 'remark-math';
25
+
26
+ export interface Props {
27
+ message: Message;
28
+ messageIndex: number;
29
+ onEdit?: (editedMessage: Message) => void
30
+ }
31
+
32
+ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) => {
33
+ const { t } = useTranslation('chat');
34
+
35
+ const {
36
+ state: { selectedConversation, conversations, currentMessage, messageIsStreaming },
37
+ dispatch: homeDispatch,
38
+ } = useContext(HomeContext);
39
+
40
+ const [isEditing, setIsEditing] = useState<boolean>(false);
41
+ const [isTyping, setIsTyping] = useState<boolean>(false);
42
+ const [messageContent, setMessageContent] = useState(message.content);
43
+ const [messagedCopied, setMessageCopied] = useState(false);
44
+
45
+ const textareaRef = useRef<HTMLTextAreaElement>(null);
46
+
47
+ const toggleEditing = () => {
48
+ setIsEditing(!isEditing);
49
+ };
50
+
51
+ const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
52
+ setMessageContent(event.target.value);
53
+ if (textareaRef.current) {
54
+ textareaRef.current.style.height = 'inherit';
55
+ textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
56
+ }
57
+ };
58
+
59
+ const handleEditMessage = () => {
60
+ if (message.content != messageContent) {
61
+ if (selectedConversation && onEdit) {
62
+ onEdit({ ...message, content: messageContent });
63
+ }
64
+ }
65
+ setIsEditing(false);
66
+ };
67
+
68
+ const handleDeleteMessage = () => {
69
+ if (!selectedConversation) return;
70
+
71
+ const { messages } = selectedConversation;
72
+ const findIndex = messages.findIndex((elm) => elm === message);
73
+
74
+ if (findIndex < 0) return;
75
+
76
+ if (
77
+ findIndex < messages.length - 1 &&
78
+ messages[findIndex + 1].role === 'assistant'
79
+ ) {
80
+ messages.splice(findIndex, 2);
81
+ } else {
82
+ messages.splice(findIndex, 1);
83
+ }
84
+ const updatedConversation = {
85
+ ...selectedConversation,
86
+ messages,
87
+ };
88
+
89
+ const { single, all } = updateConversation(
90
+ updatedConversation,
91
+ conversations,
92
+ );
93
+ homeDispatch({ field: 'selectedConversation', value: single });
94
+ homeDispatch({ field: 'conversations', value: all });
95
+ };
96
+
97
+ const handlePressEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
98
+ if (e.key === 'Enter' && !isTyping && !e.shiftKey) {
99
+ e.preventDefault();
100
+ handleEditMessage();
101
+ }
102
+ };
103
+
104
+ const copyOnClick = () => {
105
+ if (!navigator.clipboard) return;
106
+
107
+ navigator.clipboard.writeText(message.content).then(() => {
108
+ setMessageCopied(true);
109
+ setTimeout(() => {
110
+ setMessageCopied(false);
111
+ }, 2000);
112
+ });
113
+ };
114
+
115
+ useEffect(() => {
116
+ setMessageContent(message.content);
117
+ }, [message.content]);
118
+
119
+
120
+ useEffect(() => {
121
+ if (textareaRef.current) {
122
+ textareaRef.current.style.height = 'inherit';
123
+ textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
124
+ }
125
+ }, [isEditing]);
126
+
127
+ return (
128
+ <div
129
+ className={`group md:px-4 ${
130
+ message.role === 'assistant'
131
+ ? 'border-b border-black/10 bg-gray-50 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100'
132
+ : 'border-b border-black/10 bg-white text-gray-800 dark:border-gray-900/50 dark:bg-[#343541] dark:text-gray-100'
133
+ }`}
134
+ style={{ overflowWrap: 'anywhere' }}
135
+ >
136
+ <div className="relative m-auto flex p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
137
+ <div className="min-w-[40px] text-right font-bold">
138
+ {message.role === 'assistant' ? (
139
+ <IconRobot size={30} />
140
+ ) : (
141
+ <IconUser size={30} />
142
+ )}
143
+ </div>
144
+
145
+ <div className="prose mt-[-2px] w-full dark:prose-invert">
146
+ {message.role === 'user' ? (
147
+ <div className="flex w-full">
148
+ {isEditing ? (
149
+ <div className="flex w-full flex-col">
150
+ <textarea
151
+ ref={textareaRef}
152
+ className="w-full resize-none whitespace-pre-wrap border-none dark:bg-[#343541]"
153
+ value={messageContent}
154
+ onChange={handleInputChange}
155
+ onKeyDown={handlePressEnter}
156
+ onCompositionStart={() => setIsTyping(true)}
157
+ onCompositionEnd={() => setIsTyping(false)}
158
+ style={{
159
+ fontFamily: 'inherit',
160
+ fontSize: 'inherit',
161
+ lineHeight: 'inherit',
162
+ padding: '0',
163
+ margin: '0',
164
+ overflow: 'hidden',
165
+ }}
166
+ />
167
+
168
+ <div className="mt-10 flex justify-center space-x-4">
169
+ <button
170
+ className="h-[40px] rounded-md bg-blue-500 px-4 py-1 text-sm font-medium text-white enabled:hover:bg-blue-600 disabled:opacity-50"
171
+ onClick={handleEditMessage}
172
+ disabled={messageContent.trim().length <= 0}
173
+ >
174
+ {t('Save & Submit')}
175
+ </button>
176
+ <button
177
+ className="h-[40px] rounded-md border border-neutral-300 px-4 py-1 text-sm font-medium text-neutral-700 hover:bg-neutral-100 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800"
178
+ onClick={() => {
179
+ setMessageContent(message.content);
180
+ setIsEditing(false);
181
+ }}
182
+ >
183
+ {t('Cancel')}
184
+ </button>
185
+ </div>
186
+ </div>
187
+ ) : (
188
+ <div className="prose whitespace-pre-wrap dark:prose-invert flex-1">
189
+ {message.content}
190
+ </div>
191
+ )}
192
+
193
+ {!isEditing && (
194
+ <div className="md:-mr-8 ml-1 md:ml-0 flex flex-col md:flex-row gap-4 md:gap-1 items-center md:items-start justify-end md:justify-start">
195
+ <button
196
+ className="invisible group-hover:visible focus:visible text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
197
+ onClick={toggleEditing}
198
+ >
199
+ <IconEdit size={20} />
200
+ </button>
201
+ <button
202
+ className="invisible group-hover:visible focus:visible text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
203
+ onClick={handleDeleteMessage}
204
+ >
205
+ <IconTrash size={20} />
206
+ </button>
207
+ </div>
208
+ )}
209
+ </div>
210
+ ) : (
211
+ <div className="flex flex-row">
212
+ <MemoizedReactMarkdown
213
+ className="prose dark:prose-invert flex-1"
214
+ remarkPlugins={[remarkGfm, remarkMath]}
215
+ rehypePlugins={[rehypeMathjax]}
216
+ components={{
217
+ code({ node, inline, className, children, ...props }) {
218
+ if (children.length) {
219
+ if (children[0] == '▍') {
220
+ return <span className="animate-pulse cursor-default mt-1">▍</span>
221
+ }
222
+
223
+ children[0] = (children[0] as string).replace("`▍`", "▍")
224
+ }
225
+
226
+ const match = /language-(\w+)/.exec(className || '');
227
+
228
+ return !inline ? (
229
+ <CodeBlock
230
+ key={Math.random()}
231
+ language={(match && match[1]) || ''}
232
+ value={String(children).replace(/\n$/, '')}
233
+ {...props}
234
+ />
235
+ ) : (
236
+ <code className={className} {...props}>
237
+ {children}
238
+ </code>
239
+ );
240
+ },
241
+ table({ children }) {
242
+ return (
243
+ <table className="border-collapse border border-black px-3 py-1 dark:border-white">
244
+ {children}
245
+ </table>
246
+ );
247
+ },
248
+ th({ children }) {
249
+ return (
250
+ <th className="break-words border border-black bg-gray-500 px-3 py-1 text-white dark:border-white">
251
+ {children}
252
+ </th>
253
+ );
254
+ },
255
+ td({ children }) {
256
+ return (
257
+ <td className="break-words border border-black px-3 py-1 dark:border-white">
258
+ {children}
259
+ </td>
260
+ );
261
+ },
262
+ }}
263
+ >
264
+ {`${message.content}${
265
+ messageIsStreaming && messageIndex == (selectedConversation?.messages.length ?? 0) - 1 ? '`▍`' : ''
266
+ }`}
267
+ </MemoizedReactMarkdown>
268
+
269
+ <div className="md:-mr-8 ml-1 md:ml-0 flex flex-col md:flex-row gap-4 md:gap-1 items-center md:items-start justify-end md:justify-start">
270
+ {messagedCopied ? (
271
+ <IconCheck
272
+ size={20}
273
+ className="text-green-500 dark:text-green-400"
274
+ />
275
+ ) : (
276
+ <button
277
+ className="invisible group-hover:visible focus:visible text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
278
+ onClick={copyOnClick}
279
+ >
280
+ <IconCopy size={20} />
281
+ </button>
282
+ )}
283
+ </div>
284
+ </div>
285
+ )}
286
+ </div>
287
+ </div>
288
+ </div>
289
+ );
290
+ });
291
+ ChatMessage.displayName = 'ChatMessage';
components/Chat/ErrorMessageDiv.tsx ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { IconCircleX } from '@tabler/icons-react';
2
+ import { FC } from 'react';
3
+
4
+ import { ErrorMessage } from '@/types/error';
5
+
6
+ interface Props {
7
+ error: ErrorMessage;
8
+ }
9
+
10
+ export const ErrorMessageDiv: FC<Props> = ({ error }) => {
11
+ return (
12
+ <div className="mx-6 flex h-full flex-col items-center justify-center text-red-500">
13
+ <div className="mb-5">
14
+ <IconCircleX size={36} />
15
+ </div>
16
+ <div className="mb-3 text-2xl font-medium">{error.title}</div>
17
+ {error.messageLines.map((line, index) => (
18
+ <div key={index} className="text-center">
19
+ {' '}
20
+ {line}{' '}
21
+ </div>
22
+ ))}
23
+ <div className="mt-4 text-xs opacity-50 dark:text-red-400">
24
+ {error.code ? <i>Code: {error.code}</i> : ''}
25
+ </div>
26
+ </div>
27
+ );
28
+ };
components/Chat/MemoizedChatMessage.tsx ADDED
@@ -0,0 +1,9 @@
 
 
 
 
 
 
 
 
 
 
1
+ import { FC, memo } from "react";
2
+ import { ChatMessage, Props } from "./ChatMessage";
3
+
4
+ export const MemoizedChatMessage: FC<Props> = memo(
5
+ ChatMessage,
6
+ (prevProps, nextProps) => (
7
+ prevProps.message.content === nextProps.message.content
8
+ )
9
+ );
components/Chat/ModelSelect.tsx ADDED
@@ -0,0 +1,66 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { IconExternalLink } from '@tabler/icons-react';
2
+ import { useContext } from 'react';
3
+
4
+ import { useTranslation } from 'next-i18next';
5
+
6
+ import { OpenAIModel } from '@/types/openai';
7
+
8
+ import HomeContext from '@/pages/api/home/home.context';
9
+
10
+ export const ModelSelect = () => {
11
+ const { t } = useTranslation('chat');
12
+
13
+ const {
14
+ state: { selectedConversation, models, defaultModelId },
15
+ handleUpdateConversation,
16
+ dispatch: homeDispatch,
17
+ } = useContext(HomeContext);
18
+
19
+ const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
20
+ selectedConversation &&
21
+ handleUpdateConversation(selectedConversation, {
22
+ key: 'model',
23
+ value: models.find(
24
+ (model) => model.id === e.target.value,
25
+ ) as OpenAIModel,
26
+ });
27
+ };
28
+
29
+ return (
30
+ <div className="flex flex-col">
31
+ <label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
32
+ {t('Model')}
33
+ </label>
34
+ <div className="w-full rounded-lg border border-neutral-200 bg-transparent pr-2 text-neutral-900 dark:border-neutral-600 dark:text-white">
35
+ <select
36
+ className="w-full bg-transparent p-2"
37
+ placeholder={t('Select a model') || ''}
38
+ value={selectedConversation?.model?.id || defaultModelId}
39
+ onChange={handleChange}
40
+ >
41
+ {models.map((model) => (
42
+ <option
43
+ key={model.id}
44
+ value={model.id}
45
+ className="dark:bg-[#343541] dark:text-white"
46
+ >
47
+ {model.id === defaultModelId
48
+ ? `Default (${model.name})`
49
+ : model.name}
50
+ </option>
51
+ ))}
52
+ </select>
53
+ </div>
54
+ <div className="w-full mt-3 text-left text-neutral-700 dark:text-neutral-400 flex items-center">
55
+ <a
56
+ href="https://platform.openai.com/account/usage"
57
+ target="_blank"
58
+ className="flex items-center"
59
+ >
60
+ <IconExternalLink size={18} className={'inline mr-1'} />
61
+ {t('View Account Usage')}
62
+ </a>
63
+ </div>
64
+ </div>
65
+ );
66
+ };
components/Chat/PluginSelect.tsx ADDED
@@ -0,0 +1,103 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { FC, useEffect, useRef } from 'react';
2
+
3
+ import { useTranslation } from 'next-i18next';
4
+
5
+ import { Plugin, PluginList } from '@/types/plugin';
6
+
7
+ interface Props {
8
+ plugin: Plugin | null;
9
+ onPluginChange: (plugin: Plugin) => void;
10
+ onKeyDown: (e: React.KeyboardEvent<HTMLSelectElement>) => void;
11
+ }
12
+
13
+ export const PluginSelect: FC<Props> = ({
14
+ plugin,
15
+ onPluginChange,
16
+ onKeyDown,
17
+ }) => {
18
+ const { t } = useTranslation('chat');
19
+
20
+ const selectRef = useRef<HTMLSelectElement>(null);
21
+
22
+ const handleKeyDown = (e: React.KeyboardEvent<HTMLSelectElement>) => {
23
+ const selectElement = selectRef.current;
24
+ const optionCount = selectElement?.options.length || 0;
25
+
26
+ if (e.key === '/' && e.metaKey) {
27
+ e.preventDefault();
28
+ if (selectElement) {
29
+ selectElement.selectedIndex =
30
+ (selectElement.selectedIndex + 1) % optionCount;
31
+ selectElement.dispatchEvent(new Event('change'));
32
+ }
33
+ } else if (e.key === '/' && e.shiftKey && e.metaKey) {
34
+ e.preventDefault();
35
+ if (selectElement) {
36
+ selectElement.selectedIndex =
37
+ (selectElement.selectedIndex - 1 + optionCount) % optionCount;
38
+ selectElement.dispatchEvent(new Event('change'));
39
+ }
40
+ } else if (e.key === 'Enter') {
41
+ e.preventDefault();
42
+ if (selectElement) {
43
+ selectElement.dispatchEvent(new Event('change'));
44
+ }
45
+
46
+ onPluginChange(
47
+ PluginList.find(
48
+ (plugin) =>
49
+ plugin.name === selectElement?.selectedOptions[0].innerText,
50
+ ) as Plugin,
51
+ );
52
+ } else {
53
+ onKeyDown(e);
54
+ }
55
+ };
56
+
57
+ useEffect(() => {
58
+ if (selectRef.current) {
59
+ selectRef.current.focus();
60
+ }
61
+ }, []);
62
+
63
+ return (
64
+ <div className="flex flex-col">
65
+ <div className="mb-1 w-full rounded border border-neutral-200 bg-transparent pr-2 text-neutral-900 dark:border-neutral-600 dark:text-white">
66
+ <select
67
+ ref={selectRef}
68
+ className="w-full cursor-pointer bg-transparent p-2"
69
+ placeholder={t('Select a plugin') || ''}
70
+ value={plugin?.id || ''}
71
+ onChange={(e) => {
72
+ onPluginChange(
73
+ PluginList.find(
74
+ (plugin) => plugin.id === e.target.value,
75
+ ) as Plugin,
76
+ );
77
+ }}
78
+ onKeyDown={(e) => {
79
+ handleKeyDown(e);
80
+ }}
81
+ >
82
+ <option
83
+ key="chatgpt"
84
+ value="chatgpt"
85
+ className="dark:bg-[#343541] dark:text-white"
86
+ >
87
+ ChatGPT
88
+ </option>
89
+
90
+ {PluginList.map((plugin) => (
91
+ <option
92
+ key={plugin.id}
93
+ value={plugin.id}
94
+ className="dark:bg-[#343541] dark:text-white"
95
+ >
96
+ {plugin.name}
97
+ </option>
98
+ ))}
99
+ </select>
100
+ </div>
101
+ </div>
102
+ );
103
+ };
components/Chat/PromptList.tsx ADDED
@@ -0,0 +1,45 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { FC, MutableRefObject } from 'react';
2
+
3
+ import { Prompt } from '@/types/prompt';
4
+
5
+ interface Props {
6
+ prompts: Prompt[];
7
+ activePromptIndex: number;
8
+ onSelect: () => void;
9
+ onMouseOver: (index: number) => void;
10
+ promptListRef: MutableRefObject<HTMLUListElement | null>;
11
+ }
12
+
13
+ export const PromptList: FC<Props> = ({
14
+ prompts,
15
+ activePromptIndex,
16
+ onSelect,
17
+ onMouseOver,
18
+ promptListRef,
19
+ }) => {
20
+ return (
21
+ <ul
22
+ ref={promptListRef}
23
+ className="z-10 max-h-52 w-full overflow-scroll rounded border border-black/10 bg-white shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-neutral-500 dark:bg-[#343541] dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]"
24
+ >
25
+ {prompts.map((prompt, index) => (
26
+ <li
27
+ key={prompt.id}
28
+ className={`${
29
+ index === activePromptIndex
30
+ ? 'bg-gray-200 dark:bg-[#202123] dark:text-black'
31
+ : ''
32
+ } cursor-pointer px-3 py-2 text-sm text-black dark:text-white`}
33
+ onClick={(e) => {
34
+ e.preventDefault();
35
+ e.stopPropagation();
36
+ onSelect();
37
+ }}
38
+ onMouseEnter={() => onMouseOver(index)}
39
+ >
40
+ {prompt.name}
41
+ </li>
42
+ ))}
43
+ </ul>
44
+ );
45
+ };
components/Chat/Regenerate.tsx ADDED
@@ -0,0 +1,26 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { IconRefresh } from '@tabler/icons-react';
2
+ import { FC } from 'react';
3
+
4
+ import { useTranslation } from 'next-i18next';
5
+
6
+ interface Props {
7
+ onRegenerate: () => void;
8
+ }
9
+
10
+ export const Regenerate: FC<Props> = ({ onRegenerate }) => {
11
+ const { t } = useTranslation('chat');
12
+ return (
13
+ <div className="fixed bottom-4 left-0 right-0 ml-auto mr-auto w-full px-2 sm:absolute sm:bottom-8 sm:left-[280px] sm:w-1/2 lg:left-[200px]">
14
+ <div className="mb-4 text-center text-red-500">
15
+ {t('Sorry, there was an error.')}
16
+ </div>
17
+ <button
18
+ className="flex h-12 gap-2 w-full items-center justify-center rounded-lg border border-b-neutral-300 bg-neutral-100 text-sm font-semibold text-neutral-500 dark:border-none dark:bg-[#444654] dark:text-neutral-200"
19
+ onClick={onRegenerate}
20
+ >
21
+ <IconRefresh />
22
+ <div>{t('Regenerate response')}</div>
23
+ </button>
24
+ </div>
25
+ );
26
+ };
components/Chat/SystemPrompt.tsx ADDED
@@ -0,0 +1,243 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import {
2
+ FC,
3
+ KeyboardEvent,
4
+ useCallback,
5
+ useEffect,
6
+ useRef,
7
+ useState,
8
+ } from 'react';
9
+
10
+ import { useTranslation } from 'next-i18next';
11
+
12
+ import { DEFAULT_SYSTEM_PROMPT } from '@/utils/app/const';
13
+
14
+ import { Conversation } from '@/types/chat';
15
+ import { Prompt } from '@/types/prompt';
16
+
17
+ import { PromptList } from './PromptList';
18
+ import { VariableModal } from './VariableModal';
19
+
20
+ interface Props {
21
+ conversation: Conversation;
22
+ prompts: Prompt[];
23
+ onChangePrompt: (prompt: string) => void;
24
+ }
25
+
26
+ export const SystemPrompt: FC<Props> = ({
27
+ conversation,
28
+ prompts,
29
+ onChangePrompt,
30
+ }) => {
31
+ const { t } = useTranslation('chat');
32
+
33
+ const [value, setValue] = useState<string>('');
34
+ const [activePromptIndex, setActivePromptIndex] = useState(0);
35
+ const [showPromptList, setShowPromptList] = useState(false);
36
+ const [promptInputValue, setPromptInputValue] = useState('');
37
+ const [variables, setVariables] = useState<string[]>([]);
38
+ const [isModalVisible, setIsModalVisible] = useState(false);
39
+
40
+ const textareaRef = useRef<HTMLTextAreaElement>(null);
41
+ const promptListRef = useRef<HTMLUListElement | null>(null);
42
+
43
+ const filteredPrompts = prompts.filter((prompt) =>
44
+ prompt.name.toLowerCase().includes(promptInputValue.toLowerCase()),
45
+ );
46
+
47
+ const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
48
+ const value = e.target.value;
49
+ const maxLength = conversation.model.maxLength;
50
+
51
+ if (value.length > maxLength) {
52
+ alert(
53
+ t(
54
+ `Prompt limit is {{maxLength}} characters. You have entered {{valueLength}} characters.`,
55
+ { maxLength, valueLength: value.length },
56
+ ),
57
+ );
58
+ return;
59
+ }
60
+
61
+ setValue(value);
62
+ updatePromptListVisibility(value);
63
+
64
+ if (value.length > 0) {
65
+ onChangePrompt(value);
66
+ }
67
+ };
68
+
69
+ const handleInitModal = () => {
70
+ const selectedPrompt = filteredPrompts[activePromptIndex];
71
+ setValue((prevVal) => {
72
+ const newContent = prevVal?.replace(/\/\w*$/, selectedPrompt.content);
73
+ return newContent;
74
+ });
75
+ handlePromptSelect(selectedPrompt);
76
+ setShowPromptList(false);
77
+ };
78
+
79
+ const parseVariables = (content: string) => {
80
+ const regex = /{{(.*?)}}/g;
81
+ const foundVariables = [];
82
+ let match;
83
+
84
+ while ((match = regex.exec(content)) !== null) {
85
+ foundVariables.push(match[1]);
86
+ }
87
+
88
+ return foundVariables;
89
+ };
90
+
91
+ const updatePromptListVisibility = useCallback((text: string) => {
92
+ const match = text.match(/\/\w*$/);
93
+
94
+ if (match) {
95
+ setShowPromptList(true);
96
+ setPromptInputValue(match[0].slice(1));
97
+ } else {
98
+ setShowPromptList(false);
99
+ setPromptInputValue('');
100
+ }
101
+ }, []);
102
+
103
+ const handlePromptSelect = (prompt: Prompt) => {
104
+ const parsedVariables = parseVariables(prompt.content);
105
+ setVariables(parsedVariables);
106
+
107
+ if (parsedVariables.length > 0) {
108
+ setIsModalVisible(true);
109
+ } else {
110
+ const updatedContent = value?.replace(/\/\w*$/, prompt.content);
111
+
112
+ setValue(updatedContent);
113
+ onChangePrompt(updatedContent);
114
+
115
+ updatePromptListVisibility(prompt.content);
116
+ }
117
+ };
118
+
119
+ const handleSubmit = (updatedVariables: string[]) => {
120
+ const newContent = value?.replace(/{{(.*?)}}/g, (match, variable) => {
121
+ const index = variables.indexOf(variable);
122
+ return updatedVariables[index];
123
+ });
124
+
125
+ setValue(newContent);
126
+ onChangePrompt(newContent);
127
+
128
+ if (textareaRef && textareaRef.current) {
129
+ textareaRef.current.focus();
130
+ }
131
+ };
132
+
133
+ const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
134
+ if (showPromptList) {
135
+ if (e.key === 'ArrowDown') {
136
+ e.preventDefault();
137
+ setActivePromptIndex((prevIndex) =>
138
+ prevIndex < prompts.length - 1 ? prevIndex + 1 : prevIndex,
139
+ );
140
+ } else if (e.key === 'ArrowUp') {
141
+ e.preventDefault();
142
+ setActivePromptIndex((prevIndex) =>
143
+ prevIndex > 0 ? prevIndex - 1 : prevIndex,
144
+ );
145
+ } else if (e.key === 'Tab') {
146
+ e.preventDefault();
147
+ setActivePromptIndex((prevIndex) =>
148
+ prevIndex < prompts.length - 1 ? prevIndex + 1 : 0,
149
+ );
150
+ } else if (e.key === 'Enter') {
151
+ e.preventDefault();
152
+ handleInitModal();
153
+ } else if (e.key === 'Escape') {
154
+ e.preventDefault();
155
+ setShowPromptList(false);
156
+ } else {
157
+ setActivePromptIndex(0);
158
+ }
159
+ }
160
+ };
161
+
162
+ useEffect(() => {
163
+ if (textareaRef && textareaRef.current) {
164
+ textareaRef.current.style.height = 'inherit';
165
+ textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`;
166
+ }
167
+ }, [value]);
168
+
169
+ useEffect(() => {
170
+ if (conversation.prompt) {
171
+ setValue(conversation.prompt);
172
+ } else {
173
+ setValue(DEFAULT_SYSTEM_PROMPT);
174
+ }
175
+ }, [conversation]);
176
+
177
+ useEffect(() => {
178
+ const handleOutsideClick = (e: MouseEvent) => {
179
+ if (
180
+ promptListRef.current &&
181
+ !promptListRef.current.contains(e.target as Node)
182
+ ) {
183
+ setShowPromptList(false);
184
+ }
185
+ };
186
+
187
+ window.addEventListener('click', handleOutsideClick);
188
+
189
+ return () => {
190
+ window.removeEventListener('click', handleOutsideClick);
191
+ };
192
+ }, []);
193
+
194
+ return (
195
+ <div className="flex flex-col">
196
+ <label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
197
+ {t('System Prompt')}
198
+ </label>
199
+ <textarea
200
+ ref={textareaRef}
201
+ className="w-full rounded-lg border border-neutral-200 bg-transparent px-4 py-3 text-neutral-900 dark:border-neutral-600 dark:text-neutral-100"
202
+ style={{
203
+ resize: 'none',
204
+ bottom: `${textareaRef?.current?.scrollHeight}px`,
205
+ maxHeight: '300px',
206
+ overflow: `${
207
+ textareaRef.current && textareaRef.current.scrollHeight > 400
208
+ ? 'auto'
209
+ : 'hidden'
210
+ }`,
211
+ }}
212
+ placeholder={
213
+ t(`Enter a prompt or type "/" to select a prompt...`) || ''
214
+ }
215
+ value={t(value) || ''}
216
+ rows={1}
217
+ onChange={handleChange}
218
+ onKeyDown={handleKeyDown}
219
+ />
220
+
221
+ {showPromptList && filteredPrompts.length > 0 && (
222
+ <div>
223
+ <PromptList
224
+ activePromptIndex={activePromptIndex}
225
+ prompts={filteredPrompts}
226
+ onSelect={handleInitModal}
227
+ onMouseOver={setActivePromptIndex}
228
+ promptListRef={promptListRef}
229
+ />
230
+ </div>
231
+ )}
232
+
233
+ {isModalVisible && (
234
+ <VariableModal
235
+ prompt={prompts[activePromptIndex]}
236
+ variables={variables}
237
+ onSubmit={handleSubmit}
238
+ onClose={() => setIsModalVisible(false)}
239
+ />
240
+ )}
241
+ </div>
242
+ );
243
+ };
components/Chat/Temperature.tsx ADDED
@@ -0,0 +1,67 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { FC, useContext, useState } from 'react';
2
+
3
+ import { useTranslation } from 'next-i18next';
4
+
5
+ import { DEFAULT_TEMPERATURE } from '@/utils/app/const';
6
+
7
+ import HomeContext from '@/pages/api/home/home.context';
8
+
9
+ interface Props {
10
+ label: string;
11
+ onChangeTemperature: (temperature: number) => void;
12
+ }
13
+
14
+ export const TemperatureSlider: FC<Props> = ({
15
+ label,
16
+ onChangeTemperature,
17
+ }) => {
18
+ const {
19
+ state: { conversations },
20
+ } = useContext(HomeContext);
21
+ const lastConversation = conversations[conversations.length - 1];
22
+ const [temperature, setTemperature] = useState(
23
+ lastConversation?.temperature ?? DEFAULT_TEMPERATURE,
24
+ );
25
+ const { t } = useTranslation('chat');
26
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
27
+ const newValue = parseFloat(event.target.value);
28
+ setTemperature(newValue);
29
+ onChangeTemperature(newValue);
30
+ };
31
+
32
+ return (
33
+ <div className="flex flex-col">
34
+ <label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
35
+ {label}
36
+ </label>
37
+ <span className="text-[12px] text-black/50 dark:text-white/50 text-sm">
38
+ {t(
39
+ 'Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic.',
40
+ )}
41
+ </span>
42
+ <span className="mt-2 mb-1 text-center text-neutral-900 dark:text-neutral-100">
43
+ {temperature.toFixed(1)}
44
+ </span>
45
+ <input
46
+ className="cursor-pointer"
47
+ type="range"
48
+ min={0}
49
+ max={1}
50
+ step={0.1}
51
+ value={temperature}
52
+ onChange={handleChange}
53
+ />
54
+ <ul className="w mt-2 pb-8 flex justify-between px-[24px] text-neutral-900 dark:text-neutral-100">
55
+ <li className="flex justify-center">
56
+ <span className="absolute">{t('Precise')}</span>
57
+ </li>
58
+ <li className="flex justify-center">
59
+ <span className="absolute">{t('Neutral')}</span>
60
+ </li>
61
+ <li className="flex justify-center">
62
+ <span className="absolute">{t('Creative')}</span>
63
+ </li>
64
+ </ul>
65
+ </div>
66
+ );
67
+ };
components/Chat/VariableModal.tsx ADDED
@@ -0,0 +1,124 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
2
+
3
+ import { Prompt } from '@/types/prompt';
4
+
5
+ interface Props {
6
+ prompt: Prompt;
7
+ variables: string[];
8
+ onSubmit: (updatedVariables: string[]) => void;
9
+ onClose: () => void;
10
+ }
11
+
12
+ export const VariableModal: FC<Props> = ({
13
+ prompt,
14
+ variables,
15
+ onSubmit,
16
+ onClose,
17
+ }) => {
18
+ const [updatedVariables, setUpdatedVariables] = useState<
19
+ { key: string; value: string }[]
20
+ >(
21
+ variables
22
+ .map((variable) => ({ key: variable, value: '' }))
23
+ .filter(
24
+ (item, index, array) =>
25
+ array.findIndex((t) => t.key === item.key) === index,
26
+ ),
27
+ );
28
+
29
+ const modalRef = useRef<HTMLDivElement>(null);
30
+ const nameInputRef = useRef<HTMLTextAreaElement>(null);
31
+
32
+ const handleChange = (index: number, value: string) => {
33
+ setUpdatedVariables((prev) => {
34
+ const updated = [...prev];
35
+ updated[index].value = value;
36
+ return updated;
37
+ });
38
+ };
39
+
40
+ const handleSubmit = () => {
41
+ if (updatedVariables.some((variable) => variable.value === '')) {
42
+ alert('Please fill out all variables');
43
+ return;
44
+ }
45
+
46
+ onSubmit(updatedVariables.map((variable) => variable.value));
47
+ onClose();
48
+ };
49
+
50
+ const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
51
+ if (e.key === 'Enter' && !e.shiftKey) {
52
+ e.preventDefault();
53
+ handleSubmit();
54
+ } else if (e.key === 'Escape') {
55
+ onClose();
56
+ }
57
+ };
58
+
59
+ useEffect(() => {
60
+ const handleOutsideClick = (e: MouseEvent) => {
61
+ if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
62
+ onClose();
63
+ }
64
+ };
65
+
66
+ window.addEventListener('click', handleOutsideClick);
67
+
68
+ return () => {
69
+ window.removeEventListener('click', handleOutsideClick);
70
+ };
71
+ }, [onClose]);
72
+
73
+ useEffect(() => {
74
+ if (nameInputRef.current) {
75
+ nameInputRef.current.focus();
76
+ }
77
+ }, []);
78
+
79
+ return (
80
+ <div
81
+ className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
82
+ onKeyDown={handleKeyDown}
83
+ >
84
+ <div
85
+ ref={modalRef}
86
+ className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
87
+ role="dialog"
88
+ >
89
+ <div className="mb-4 text-xl font-bold text-black dark:text-neutral-200">
90
+ {prompt.name}
91
+ </div>
92
+
93
+ <div className="mb-4 text-sm italic text-black dark:text-neutral-200">
94
+ {prompt.description}
95
+ </div>
96
+
97
+ {updatedVariables.map((variable, index) => (
98
+ <div className="mb-4" key={index}>
99
+ <div className="mb-2 text-sm font-bold text-neutral-200">
100
+ {variable.key}
101
+ </div>
102
+
103
+ <textarea
104
+ ref={index === 0 ? nameInputRef : undefined}
105
+ className="mt-1 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
106
+ style={{ resize: 'none' }}
107
+ placeholder={`Enter a value for ${variable.key}...`}
108
+ value={variable.value}
109
+ onChange={(e) => handleChange(index, e.target.value)}
110
+ rows={3}
111
+ />
112
+ </div>
113
+ ))}
114
+
115
+ <button
116
+ className="mt-6 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow hover:bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-white dark:text-black dark:hover:bg-neutral-300"
117
+ onClick={handleSubmit}
118
+ >
119
+ Submit
120
+ </button>
121
+ </div>
122
+ </div>
123
+ );
124
+ };
components/Chatbar/Chatbar.context.tsx ADDED
@@ -0,0 +1,25 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { Dispatch, createContext } from 'react';
2
+
3
+ import { ActionType } from '@/hooks/useCreateReducer';
4
+
5
+ import { Conversation } from '@/types/chat';
6
+ import { SupportedExportFormats } from '@/types/export';
7
+ import { PluginKey } from '@/types/plugin';
8
+
9
+ import { ChatbarInitialState } from './Chatbar.state';
10
+
11
+ export interface ChatbarContextProps {
12
+ state: ChatbarInitialState;
13
+ dispatch: Dispatch<ActionType<ChatbarInitialState>>;
14
+ handleDeleteConversation: (conversation: Conversation) => void;
15
+ handleClearConversations: () => void;
16
+ handleExportData: () => void;
17
+ handleImportConversations: (data: SupportedExportFormats) => void;
18
+ handlePluginKeyChange: (pluginKey: PluginKey) => void;
19
+ handleClearPluginKey: (pluginKey: PluginKey) => void;
20
+ handleApiKeyChange: (apiKey: string) => void;
21
+ }
22
+
23
+ const ChatbarContext = createContext<ChatbarContextProps>(undefined!);
24
+
25
+ export default ChatbarContext;
components/Chatbar/Chatbar.state.tsx ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { Conversation } from '@/types/chat';
2
+
3
+ export interface ChatbarInitialState {
4
+ searchTerm: string;
5
+ filteredConversations: Conversation[];
6
+ }
7
+
8
+ export const initialState: ChatbarInitialState = {
9
+ searchTerm: '',
10
+ filteredConversations: [],
11
+ };
components/Chatbar/Chatbar.tsx ADDED
@@ -0,0 +1,241 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { useCallback, useContext, useEffect } from 'react';
2
+
3
+ import { useTranslation } from 'next-i18next';
4
+
5
+ import { useCreateReducer } from '@/hooks/useCreateReducer';
6
+
7
+ import { DEFAULT_SYSTEM_PROMPT, DEFAULT_TEMPERATURE } from '@/utils/app/const';
8
+ import { saveConversation, saveConversations } from '@/utils/app/conversation';
9
+ import { saveFolders } from '@/utils/app/folders';
10
+ import { exportData, importData } from '@/utils/app/importExport';
11
+
12
+ import { Conversation } from '@/types/chat';
13
+ import { LatestExportFormat, SupportedExportFormats } from '@/types/export';
14
+ import { OpenAIModels } from '@/types/openai';
15
+ import { PluginKey } from '@/types/plugin';
16
+
17
+ import HomeContext from '@/pages/api/home/home.context';
18
+
19
+ import { ChatFolders } from './components/ChatFolders';
20
+ import { ChatbarSettings } from './components/ChatbarSettings';
21
+ import { Conversations } from './components/Conversations';
22
+
23
+ import Sidebar from '../Sidebar';
24
+ import ChatbarContext from './Chatbar.context';
25
+ import { ChatbarInitialState, initialState } from './Chatbar.state';
26
+
27
+ import { v4 as uuidv4 } from 'uuid';
28
+
29
+ export const Chatbar = () => {
30
+ const { t } = useTranslation('sidebar');
31
+
32
+ const chatBarContextValue = useCreateReducer<ChatbarInitialState>({
33
+ initialState,
34
+ });
35
+
36
+ const {
37
+ state: { conversations, showChatbar, defaultModelId, folders, pluginKeys },
38
+ dispatch: homeDispatch,
39
+ handleCreateFolder,
40
+ handleNewConversation,
41
+ handleUpdateConversation,
42
+ } = useContext(HomeContext);
43
+
44
+ const {
45
+ state: { searchTerm, filteredConversations },
46
+ dispatch: chatDispatch,
47
+ } = chatBarContextValue;
48
+
49
+ const handleApiKeyChange = useCallback(
50
+ (apiKey: string) => {
51
+ homeDispatch({ field: 'apiKey', value: apiKey });
52
+
53
+ localStorage.setItem('apiKey', apiKey);
54
+ },
55
+ [homeDispatch],
56
+ );
57
+
58
+ const handlePluginKeyChange = (pluginKey: PluginKey) => {
59
+ if (pluginKeys.some((key) => key.pluginId === pluginKey.pluginId)) {
60
+ const updatedPluginKeys = pluginKeys.map((key) => {
61
+ if (key.pluginId === pluginKey.pluginId) {
62
+ return pluginKey;
63
+ }
64
+
65
+ return key;
66
+ });
67
+
68
+ homeDispatch({ field: 'pluginKeys', value: updatedPluginKeys });
69
+
70
+ localStorage.setItem('pluginKeys', JSON.stringify(updatedPluginKeys));
71
+ } else {
72
+ homeDispatch({ field: 'pluginKeys', value: [...pluginKeys, pluginKey] });
73
+
74
+ localStorage.setItem(
75
+ 'pluginKeys',
76
+ JSON.stringify([...pluginKeys, pluginKey]),
77
+ );
78
+ }
79
+ };
80
+
81
+ const handleClearPluginKey = (pluginKey: PluginKey) => {
82
+ const updatedPluginKeys = pluginKeys.filter(
83
+ (key) => key.pluginId !== pluginKey.pluginId,
84
+ );
85
+
86
+ if (updatedPluginKeys.length === 0) {
87
+ homeDispatch({ field: 'pluginKeys', value: [] });
88
+ localStorage.removeItem('pluginKeys');
89
+ return;
90
+ }
91
+
92
+ homeDispatch({ field: 'pluginKeys', value: updatedPluginKeys });
93
+
94
+ localStorage.setItem('pluginKeys', JSON.stringify(updatedPluginKeys));
95
+ };
96
+
97
+ const handleExportData = () => {
98
+ exportData();
99
+ };
100
+
101
+ const handleImportConversations = (data: SupportedExportFormats) => {
102
+ const { history, folders, prompts }: LatestExportFormat = importData(data);
103
+ homeDispatch({ field: 'conversations', value: history });
104
+ homeDispatch({
105
+ field: 'selectedConversation',
106
+ value: history[history.length - 1],
107
+ });
108
+ homeDispatch({ field: 'folders', value: folders });
109
+ homeDispatch({ field: 'prompts', value: prompts });
110
+
111
+ window.location.reload();
112
+ };
113
+
114
+ const handleClearConversations = () => {
115
+ defaultModelId &&
116
+ homeDispatch({
117
+ field: 'selectedConversation',
118
+ value: {
119
+ id: uuidv4(),
120
+ name: t('New Conversation'),
121
+ messages: [],
122
+ model: OpenAIModels[defaultModelId],
123
+ prompt: DEFAULT_SYSTEM_PROMPT,
124
+ temperature: DEFAULT_TEMPERATURE,
125
+ folderId: null,
126
+ },
127
+ });
128
+
129
+ homeDispatch({ field: 'conversations', value: [] });
130
+
131
+ localStorage.removeItem('conversationHistory');
132
+ localStorage.removeItem('selectedConversation');
133
+
134
+ const updatedFolders = folders.filter((f) => f.type !== 'chat');
135
+
136
+ homeDispatch({ field: 'folders', value: updatedFolders });
137
+ saveFolders(updatedFolders);
138
+ };
139
+
140
+ const handleDeleteConversation = (conversation: Conversation) => {
141
+ const updatedConversations = conversations.filter(
142
+ (c) => c.id !== conversation.id,
143
+ );
144
+
145
+ homeDispatch({ field: 'conversations', value: updatedConversations });
146
+ chatDispatch({ field: 'searchTerm', value: '' });
147
+ saveConversations(updatedConversations);
148
+
149
+ if (updatedConversations.length > 0) {
150
+ homeDispatch({
151
+ field: 'selectedConversation',
152
+ value: updatedConversations[updatedConversations.length - 1],
153
+ });
154
+
155
+ saveConversation(updatedConversations[updatedConversations.length - 1]);
156
+ } else {
157
+ defaultModelId &&
158
+ homeDispatch({
159
+ field: 'selectedConversation',
160
+ value: {
161
+ id: uuidv4(),
162
+ name: t('New Conversation'),
163
+ messages: [],
164
+ model: OpenAIModels[defaultModelId],
165
+ prompt: DEFAULT_SYSTEM_PROMPT,
166
+ temperature: DEFAULT_TEMPERATURE,
167
+ folderId: null,
168
+ },
169
+ });
170
+
171
+ localStorage.removeItem('selectedConversation');
172
+ }
173
+ };
174
+
175
+ const handleToggleChatbar = () => {
176
+ homeDispatch({ field: 'showChatbar', value: !showChatbar });
177
+ localStorage.setItem('showChatbar', JSON.stringify(!showChatbar));
178
+ };
179
+
180
+ const handleDrop = (e: any) => {
181
+ if (e.dataTransfer) {
182
+ const conversation = JSON.parse(e.dataTransfer.getData('conversation'));
183
+ handleUpdateConversation(conversation, { key: 'folderId', value: 0 });
184
+ chatDispatch({ field: 'searchTerm', value: '' });
185
+ e.target.style.background = 'none';
186
+ }
187
+ };
188
+
189
+ useEffect(() => {
190
+ if (searchTerm) {
191
+ chatDispatch({
192
+ field: 'filteredConversations',
193
+ value: conversations.filter((conversation) => {
194
+ const searchable =
195
+ conversation.name.toLocaleLowerCase() +
196
+ ' ' +
197
+ conversation.messages.map((message) => message.content).join(' ');
198
+ return searchable.toLowerCase().includes(searchTerm.toLowerCase());
199
+ }),
200
+ });
201
+ } else {
202
+ chatDispatch({
203
+ field: 'filteredConversations',
204
+ value: conversations,
205
+ });
206
+ }
207
+ }, [searchTerm, conversations]);
208
+
209
+ return (
210
+ <ChatbarContext.Provider
211
+ value={{
212
+ ...chatBarContextValue,
213
+ handleDeleteConversation,
214
+ handleClearConversations,
215
+ handleImportConversations,
216
+ handleExportData,
217
+ handlePluginKeyChange,
218
+ handleClearPluginKey,
219
+ handleApiKeyChange,
220
+ }}
221
+ >
222
+ <Sidebar<Conversation>
223
+ side={'left'}
224
+ isOpen={showChatbar}
225
+ addItemButtonTitle={t('New chat')}
226
+ itemComponent={<Conversations conversations={filteredConversations} />}
227
+ folderComponent={<ChatFolders searchTerm={searchTerm} />}
228
+ items={filteredConversations}
229
+ searchTerm={searchTerm}
230
+ handleSearchTerm={(searchTerm: string) =>
231
+ chatDispatch({ field: 'searchTerm', value: searchTerm })
232
+ }
233
+ toggleOpen={handleToggleChatbar}
234
+ handleCreateItem={handleNewConversation}
235
+ handleCreateFolder={() => handleCreateFolder(t('New folder'), 'chat')}
236
+ handleDrop={handleDrop}
237
+ footerComponent={<ChatbarSettings />}
238
+ />
239
+ </ChatbarContext.Provider>
240
+ );
241
+ };
components/Chatbar/components/ChatFolders.tsx ADDED
@@ -0,0 +1,64 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { useContext } from 'react';
2
+
3
+ import { FolderInterface } from '@/types/folder';
4
+
5
+ import HomeContext from '@/pages/api/home/home.context';
6
+
7
+ import Folder from '@/components/Folder';
8
+
9
+ import { ConversationComponent } from './Conversation';
10
+
11
+ interface Props {
12
+ searchTerm: string;
13
+ }
14
+
15
+ export const ChatFolders = ({ searchTerm }: Props) => {
16
+ const {
17
+ state: { folders, conversations },
18
+ handleUpdateConversation,
19
+ } = useContext(HomeContext);
20
+
21
+ const handleDrop = (e: any, folder: FolderInterface) => {
22
+ if (e.dataTransfer) {
23
+ const conversation = JSON.parse(e.dataTransfer.getData('conversation'));
24
+ handleUpdateConversation(conversation, {
25
+ key: 'folderId',
26
+ value: folder.id,
27
+ });
28
+ }
29
+ };
30
+
31
+ const ChatFolders = (currentFolder: FolderInterface) => {
32
+ return (
33
+ conversations &&
34
+ conversations
35
+ .filter((conversation) => conversation.folderId)
36
+ .map((conversation, index) => {
37
+ if (conversation.folderId === currentFolder.id) {
38
+ return (
39
+ <div key={index} className="ml-5 gap-2 border-l pl-2">
40
+ <ConversationComponent conversation={conversation} />
41
+ </div>
42
+ );
43
+ }
44
+ })
45
+ );
46
+ };
47
+
48
+ return (
49
+ <div className="flex w-full flex-col pt-2">
50
+ {folders
51
+ .filter((folder) => folder.type === 'chat')
52
+ .sort((a, b) => a.name.localeCompare(b.name))
53
+ .map((folder, index) => (
54
+ <Folder
55
+ key={index}
56
+ searchTerm={searchTerm}
57
+ currentFolder={folder}
58
+ handleDrop={handleDrop}
59
+ folderComponent={ChatFolders(folder)}
60
+ />
61
+ ))}
62
+ </div>
63
+ );
64
+ };
components/Chatbar/components/ChatbarSettings.tsx ADDED
@@ -0,0 +1,73 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { IconFileExport, IconSettings } from '@tabler/icons-react';
2
+ import { useContext, useState } from 'react';
3
+
4
+ import { useTranslation } from 'next-i18next';
5
+
6
+ import HomeContext from '@/pages/api/home/home.context';
7
+
8
+ import { SettingDialog } from '@/components/Settings/SettingDialog';
9
+
10
+ import { Import } from '../../Settings/Import';
11
+ import { Key } from '../../Settings/Key';
12
+ import { SidebarButton } from '../../Sidebar/SidebarButton';
13
+ import ChatbarContext from '../Chatbar.context';
14
+ import { ClearConversations } from './ClearConversations';
15
+ import { PluginKeys } from './PluginKeys';
16
+
17
+ export const ChatbarSettings = () => {
18
+ const { t } = useTranslation('sidebar');
19
+ const [isSettingDialogOpen, setIsSettingDialog] = useState<boolean>(false);
20
+
21
+ const {
22
+ state: {
23
+ apiKey,
24
+ lightMode,
25
+ serverSideApiKeyIsSet,
26
+ serverSidePluginKeysSet,
27
+ conversations,
28
+ },
29
+ dispatch: homeDispatch,
30
+ } = useContext(HomeContext);
31
+
32
+ const {
33
+ handleClearConversations,
34
+ handleImportConversations,
35
+ handleExportData,
36
+ handleApiKeyChange,
37
+ } = useContext(ChatbarContext);
38
+
39
+ return (
40
+ <div className="flex flex-col items-center space-y-1 border-t border-white/20 pt-1 text-sm">
41
+ {conversations.length > 0 ? (
42
+ <ClearConversations onClearConversations={handleClearConversations} />
43
+ ) : null}
44
+
45
+ <Import onImport={handleImportConversations} />
46
+
47
+ <SidebarButton
48
+ text={t('Export data')}
49
+ icon={<IconFileExport size={18} />}
50
+ onClick={() => handleExportData()}
51
+ />
52
+
53
+ <SidebarButton
54
+ text={t('Settings')}
55
+ icon={<IconSettings size={18} />}
56
+ onClick={() => setIsSettingDialog(true)}
57
+ />
58
+
59
+ {!serverSideApiKeyIsSet ? (
60
+ <Key apiKey={apiKey} onApiKeyChange={handleApiKeyChange} />
61
+ ) : null}
62
+
63
+ {!serverSidePluginKeysSet ? <PluginKeys /> : null}
64
+
65
+ <SettingDialog
66
+ open={isSettingDialogOpen}
67
+ onClose={() => {
68
+ setIsSettingDialog(false);
69
+ }}
70
+ />
71
+ </div>
72
+ );
73
+ };
components/Chatbar/components/ClearConversations.tsx ADDED
@@ -0,0 +1,57 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { IconCheck, IconTrash, IconX } from '@tabler/icons-react';
2
+ import { FC, useState } from 'react';
3
+
4
+ import { useTranslation } from 'next-i18next';
5
+
6
+ import { SidebarButton } from '@/components/Sidebar/SidebarButton';
7
+
8
+ interface Props {
9
+ onClearConversations: () => void;
10
+ }
11
+
12
+ export const ClearConversations: FC<Props> = ({ onClearConversations }) => {
13
+ const [isConfirming, setIsConfirming] = useState<boolean>(false);
14
+
15
+ const { t } = useTranslation('sidebar');
16
+
17
+ const handleClearConversations = () => {
18
+ onClearConversations();
19
+ setIsConfirming(false);
20
+ };
21
+
22
+ return isConfirming ? (
23
+ <div className="flex w-full cursor-pointer items-center rounded-lg py-3 px-3 hover:bg-gray-500/10">
24
+ <IconTrash size={18} />
25
+
26
+ <div className="ml-3 flex-1 text-left text-[12.5px] leading-3 text-white">
27
+ {t('Are you sure?')}
28
+ </div>
29
+
30
+ <div className="flex w-[40px]">
31
+ <IconCheck
32
+ className="ml-auto mr-1 min-w-[20px] text-neutral-400 hover:text-neutral-100"
33
+ size={18}
34
+ onClick={(e) => {
35
+ e.stopPropagation();
36
+ handleClearConversations();
37
+ }}
38
+ />
39
+
40
+ <IconX
41
+ className="ml-auto min-w-[20px] text-neutral-400 hover:text-neutral-100"
42
+ size={18}
43
+ onClick={(e) => {
44
+ e.stopPropagation();
45
+ setIsConfirming(false);
46
+ }}
47
+ />
48
+ </div>
49
+ </div>
50
+ ) : (
51
+ <SidebarButton
52
+ text={t('Clear conversations')}
53
+ icon={<IconTrash size={18} />}
54
+ onClick={() => setIsConfirming(true)}
55
+ />
56
+ );
57
+ };
components/Chatbar/components/Conversation.tsx ADDED
@@ -0,0 +1,168 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import {
2
+ IconCheck,
3
+ IconMessage,
4
+ IconPencil,
5
+ IconTrash,
6
+ IconX,
7
+ } from '@tabler/icons-react';
8
+ import {
9
+ DragEvent,
10
+ KeyboardEvent,
11
+ MouseEventHandler,
12
+ useContext,
13
+ useEffect,
14
+ useState,
15
+ } from 'react';
16
+
17
+ import { Conversation } from '@/types/chat';
18
+
19
+ import HomeContext from '@/pages/api/home/home.context';
20
+
21
+ import SidebarActionButton from '@/components/Buttons/SidebarActionButton';
22
+ import ChatbarContext from '@/components/Chatbar/Chatbar.context';
23
+
24
+ interface Props {
25
+ conversation: Conversation;
26
+ }
27
+
28
+ export const ConversationComponent = ({ conversation }: Props) => {
29
+ const {
30
+ state: { selectedConversation, messageIsStreaming },
31
+ handleSelectConversation,
32
+ handleUpdateConversation,
33
+ } = useContext(HomeContext);
34
+
35
+ const { handleDeleteConversation } = useContext(ChatbarContext);
36
+
37
+ const [isDeleting, setIsDeleting] = useState(false);
38
+ const [isRenaming, setIsRenaming] = useState(false);
39
+ const [renameValue, setRenameValue] = useState('');
40
+
41
+ const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
42
+ if (e.key === 'Enter') {
43
+ e.preventDefault();
44
+ selectedConversation && handleRename(selectedConversation);
45
+ }
46
+ };
47
+
48
+ const handleDragStart = (
49
+ e: DragEvent<HTMLButtonElement>,
50
+ conversation: Conversation,
51
+ ) => {
52
+ if (e.dataTransfer) {
53
+ e.dataTransfer.setData('conversation', JSON.stringify(conversation));
54
+ }
55
+ };
56
+
57
+ const handleRename = (conversation: Conversation) => {
58
+ if (renameValue.trim().length > 0) {
59
+ handleUpdateConversation(conversation, {
60
+ key: 'name',
61
+ value: renameValue,
62
+ });
63
+ setRenameValue('');
64
+ setIsRenaming(false);
65
+ }
66
+ };
67
+
68
+ const handleConfirm: MouseEventHandler<HTMLButtonElement> = (e) => {
69
+ e.stopPropagation();
70
+ if (isDeleting) {
71
+ handleDeleteConversation(conversation);
72
+ } else if (isRenaming) {
73
+ handleRename(conversation);
74
+ }
75
+ setIsDeleting(false);
76
+ setIsRenaming(false);
77
+ };
78
+
79
+ const handleCancel: MouseEventHandler<HTMLButtonElement> = (e) => {
80
+ e.stopPropagation();
81
+ setIsDeleting(false);
82
+ setIsRenaming(false);
83
+ };
84
+
85
+ const handleOpenRenameModal: MouseEventHandler<HTMLButtonElement> = (e) => {
86
+ e.stopPropagation();
87
+ setIsRenaming(true);
88
+ selectedConversation && setRenameValue(selectedConversation.name);
89
+ };
90
+ const handleOpenDeleteModal: MouseEventHandler<HTMLButtonElement> = (e) => {
91
+ e.stopPropagation();
92
+ setIsDeleting(true);
93
+ };
94
+
95
+ useEffect(() => {
96
+ if (isRenaming) {
97
+ setIsDeleting(false);
98
+ } else if (isDeleting) {
99
+ setIsRenaming(false);
100
+ }
101
+ }, [isRenaming, isDeleting]);
102
+
103
+ return (
104
+ <div className="relative flex items-center">
105
+ {isRenaming && selectedConversation?.id === conversation.id ? (
106
+ <div className="flex w-full items-center gap-3 rounded-lg bg-[#343541]/90 p-3">
107
+ <IconMessage size={18} />
108
+ <input
109
+ className="mr-12 flex-1 overflow-hidden overflow-ellipsis border-neutral-400 bg-transparent text-left text-[12.5px] leading-3 text-white outline-none focus:border-neutral-100"
110
+ type="text"
111
+ value={renameValue}
112
+ onChange={(e) => setRenameValue(e.target.value)}
113
+ onKeyDown={handleEnterDown}
114
+ autoFocus
115
+ />
116
+ </div>
117
+ ) : (
118
+ <button
119
+ className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90 ${
120
+ messageIsStreaming ? 'disabled:cursor-not-allowed' : ''
121
+ } ${
122
+ selectedConversation?.id === conversation.id
123
+ ? 'bg-[#343541]/90'
124
+ : ''
125
+ }`}
126
+ onClick={() => handleSelectConversation(conversation)}
127
+ disabled={messageIsStreaming}
128
+ draggable="true"
129
+ onDragStart={(e) => handleDragStart(e, conversation)}
130
+ >
131
+ <IconMessage size={18} />
132
+ <div
133
+ className={`relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3 ${
134
+ selectedConversation?.id === conversation.id ? 'pr-12' : 'pr-1'
135
+ }`}
136
+ >
137
+ {conversation.name}
138
+ </div>
139
+ </button>
140
+ )}
141
+
142
+ {(isDeleting || isRenaming) &&
143
+ selectedConversation?.id === conversation.id && (
144
+ <div className="absolute right-1 z-10 flex text-gray-300">
145
+ <SidebarActionButton handleClick={handleConfirm}>
146
+ <IconCheck size={18} />
147
+ </SidebarActionButton>
148
+ <SidebarActionButton handleClick={handleCancel}>
149
+ <IconX size={18} />
150
+ </SidebarActionButton>
151
+ </div>
152
+ )}
153
+
154
+ {selectedConversation?.id === conversation.id &&
155
+ !isDeleting &&
156
+ !isRenaming && (
157
+ <div className="absolute right-1 z-10 flex text-gray-300">
158
+ <SidebarActionButton handleClick={handleOpenRenameModal}>
159
+ <IconPencil size={18} />
160
+ </SidebarActionButton>
161
+ <SidebarActionButton handleClick={handleOpenDeleteModal}>
162
+ <IconTrash size={18} />
163
+ </SidebarActionButton>
164
+ </div>
165
+ )}
166
+ </div>
167
+ );
168
+ };
components/Chatbar/components/Conversations.tsx ADDED
@@ -0,0 +1,21 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { Conversation } from '@/types/chat';
2
+
3
+ import { ConversationComponent } from './Conversation';
4
+
5
+ interface Props {
6
+ conversations: Conversation[];
7
+ }
8
+
9
+ export const Conversations = ({ conversations }: Props) => {
10
+ return (
11
+ <div className="flex w-full flex-col gap-1">
12
+ {conversations
13
+ .filter((conversation) => !conversation.folderId)
14
+ .slice()
15
+ .reverse()
16
+ .map((conversation, index) => (
17
+ <ConversationComponent key={index} conversation={conversation} />
18
+ ))}
19
+ </div>
20
+ );
21
+ };
components/Chatbar/components/PluginKeys.tsx ADDED
@@ -0,0 +1,235 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { IconKey } from '@tabler/icons-react';
2
+ import { KeyboardEvent, useContext, useEffect, useRef, useState } from 'react';
3
+ import { useTranslation } from 'react-i18next';
4
+
5
+ import { PluginID, PluginKey } from '@/types/plugin';
6
+
7
+ import HomeContext from '@/pages/api/home/home.context';
8
+
9
+ import { SidebarButton } from '@/components/Sidebar/SidebarButton';
10
+
11
+ import ChatbarContext from '../Chatbar.context';
12
+
13
+ export const PluginKeys = () => {
14
+ const { t } = useTranslation('sidebar');
15
+
16
+ const {
17
+ state: { pluginKeys },
18
+ } = useContext(HomeContext);
19
+
20
+ const { handlePluginKeyChange, handleClearPluginKey } =
21
+ useContext(ChatbarContext);
22
+
23
+ const [isChanging, setIsChanging] = useState(false);
24
+
25
+ const modalRef = useRef<HTMLDivElement>(null);
26
+
27
+ const handleEnter = (e: KeyboardEvent<HTMLDivElement>) => {
28
+ if (e.key === 'Enter' && !e.shiftKey) {
29
+ e.preventDefault();
30
+ setIsChanging(false);
31
+ }
32
+ };
33
+
34
+ useEffect(() => {
35
+ const handleMouseDown = (e: MouseEvent) => {
36
+ if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
37
+ window.addEventListener('mouseup', handleMouseUp);
38
+ }
39
+ };
40
+
41
+ const handleMouseUp = (e: MouseEvent) => {
42
+ window.removeEventListener('mouseup', handleMouseUp);
43
+ setIsChanging(false);
44
+ };
45
+
46
+ window.addEventListener('mousedown', handleMouseDown);
47
+
48
+ return () => {
49
+ window.removeEventListener('mousedown', handleMouseDown);
50
+ };
51
+ }, []);
52
+
53
+ return (
54
+ <>
55
+ <SidebarButton
56
+ text={t('Plugin Keys')}
57
+ icon={<IconKey size={18} />}
58
+ onClick={() => setIsChanging(true)}
59
+ />
60
+
61
+ {isChanging && (
62
+ <div
63
+ className="z-100 fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
64
+ onKeyDown={handleEnter}
65
+ >
66
+ <div className="fixed inset-0 z-10 overflow-hidden">
67
+ <div className="flex min-h-screen items-center justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
68
+ <div
69
+ className="hidden sm:inline-block sm:h-screen sm:align-middle"
70
+ aria-hidden="true"
71
+ />
72
+
73
+ <div
74
+ ref={modalRef}
75
+ className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
76
+ role="dialog"
77
+ >
78
+ <div className="mb-10 text-4xl">Plugin Keys</div>
79
+
80
+ <div className="mt-6 rounded border p-4">
81
+ <div className="text-xl font-bold">Google Search Plugin</div>
82
+ <div className="mt-4 italic">
83
+ Please enter your Google API Key and Google CSE ID to enable
84
+ the Google Search Plugin.
85
+ </div>
86
+
87
+ <div className="mt-6 text-sm font-bold text-black dark:text-neutral-200">
88
+ Google API Key
89
+ </div>
90
+ <input
91
+ className="mt-2 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
92
+ type="password"
93
+ value={
94
+ pluginKeys
95
+ .find((p) => p.pluginId === PluginID.GOOGLE_SEARCH)
96
+ ?.requiredKeys.find((k) => k.key === 'GOOGLE_API_KEY')
97
+ ?.value
98
+ }
99
+ onChange={(e) => {
100
+ const pluginKey = pluginKeys.find(
101
+ (p) => p.pluginId === PluginID.GOOGLE_SEARCH,
102
+ );
103
+
104
+ if (pluginKey) {
105
+ const requiredKey = pluginKey.requiredKeys.find(
106
+ (k) => k.key === 'GOOGLE_API_KEY',
107
+ );
108
+
109
+ if (requiredKey) {
110
+ const updatedPluginKey = {
111
+ ...pluginKey,
112
+ requiredKeys: pluginKey.requiredKeys.map((k) => {
113
+ if (k.key === 'GOOGLE_API_KEY') {
114
+ return {
115
+ ...k,
116
+ value: e.target.value,
117
+ };
118
+ }
119
+
120
+ return k;
121
+ }),
122
+ };
123
+
124
+ handlePluginKeyChange(updatedPluginKey);
125
+ }
126
+ } else {
127
+ const newPluginKey: PluginKey = {
128
+ pluginId: PluginID.GOOGLE_SEARCH,
129
+ requiredKeys: [
130
+ {
131
+ key: 'GOOGLE_API_KEY',
132
+ value: e.target.value,
133
+ },
134
+ {
135
+ key: 'GOOGLE_CSE_ID',
136
+ value: '',
137
+ },
138
+ ],
139
+ };
140
+
141
+ handlePluginKeyChange(newPluginKey);
142
+ }
143
+ }}
144
+ />
145
+
146
+ <div className="mt-6 text-sm font-bold text-black dark:text-neutral-200">
147
+ Google CSE ID
148
+ </div>
149
+ <input
150
+ className="mt-2 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
151
+ type="password"
152
+ value={
153
+ pluginKeys
154
+ .find((p) => p.pluginId === PluginID.GOOGLE_SEARCH)
155
+ ?.requiredKeys.find((k) => k.key === 'GOOGLE_CSE_ID')
156
+ ?.value
157
+ }
158
+ onChange={(e) => {
159
+ const pluginKey = pluginKeys.find(
160
+ (p) => p.pluginId === PluginID.GOOGLE_SEARCH,
161
+ );
162
+
163
+ if (pluginKey) {
164
+ const requiredKey = pluginKey.requiredKeys.find(
165
+ (k) => k.key === 'GOOGLE_CSE_ID',
166
+ );
167
+
168
+ if (requiredKey) {
169
+ const updatedPluginKey = {
170
+ ...pluginKey,
171
+ requiredKeys: pluginKey.requiredKeys.map((k) => {
172
+ if (k.key === 'GOOGLE_CSE_ID') {
173
+ return {
174
+ ...k,
175
+ value: e.target.value,
176
+ };
177
+ }
178
+
179
+ return k;
180
+ }),
181
+ };
182
+
183
+ handlePluginKeyChange(updatedPluginKey);
184
+ }
185
+ } else {
186
+ const newPluginKey: PluginKey = {
187
+ pluginId: PluginID.GOOGLE_SEARCH,
188
+ requiredKeys: [
189
+ {
190
+ key: 'GOOGLE_API_KEY',
191
+ value: '',
192
+ },
193
+ {
194
+ key: 'GOOGLE_CSE_ID',
195
+ value: e.target.value,
196
+ },
197
+ ],
198
+ };
199
+
200
+ handlePluginKeyChange(newPluginKey);
201
+ }
202
+ }}
203
+ />
204
+
205
+ <button
206
+ className="mt-6 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow hover:bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-white dark:text-black dark:hover:bg-neutral-300"
207
+ onClick={() => {
208
+ const pluginKey = pluginKeys.find(
209
+ (p) => p.pluginId === PluginID.GOOGLE_SEARCH,
210
+ );
211
+
212
+ if (pluginKey) {
213
+ handleClearPluginKey(pluginKey);
214
+ }
215
+ }}
216
+ >
217
+ Clear Google Search Plugin Keys
218
+ </button>
219
+ </div>
220
+
221
+ <button
222
+ type="button"
223
+ className="mt-6 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow hover:bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-white dark:text-black dark:hover:bg-neutral-300"
224
+ onClick={() => setIsChanging(false)}
225
+ >
226
+ {t('Save')}
227
+ </button>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ )}
233
+ </>
234
+ );
235
+ };
components/Folder/Folder.tsx ADDED
@@ -0,0 +1,192 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import {
2
+ IconCaretDown,
3
+ IconCaretRight,
4
+ IconCheck,
5
+ IconPencil,
6
+ IconTrash,
7
+ IconX,
8
+ } from '@tabler/icons-react';
9
+ import {
10
+ KeyboardEvent,
11
+ ReactElement,
12
+ useContext,
13
+ useEffect,
14
+ useState,
15
+ } from 'react';
16
+
17
+ import { FolderInterface } from '@/types/folder';
18
+
19
+ import HomeContext from '@/pages/api/home/home.context';
20
+
21
+ import SidebarActionButton from '@/components/Buttons/SidebarActionButton';
22
+
23
+ interface Props {
24
+ currentFolder: FolderInterface;
25
+ searchTerm: string;
26
+ handleDrop: (e: any, folder: FolderInterface) => void;
27
+ folderComponent: (ReactElement | undefined)[];
28
+ }
29
+
30
+ const Folder = ({
31
+ currentFolder,
32
+ searchTerm,
33
+ handleDrop,
34
+ folderComponent,
35
+ }: Props) => {
36
+ const { handleDeleteFolder, handleUpdateFolder } = useContext(HomeContext);
37
+
38
+ const [isDeleting, setIsDeleting] = useState(false);
39
+ const [isRenaming, setIsRenaming] = useState(false);
40
+ const [renameValue, setRenameValue] = useState('');
41
+ const [isOpen, setIsOpen] = useState(false);
42
+
43
+ const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
44
+ if (e.key === 'Enter') {
45
+ e.preventDefault();
46
+ handleRename();
47
+ }
48
+ };
49
+
50
+ const handleRename = () => {
51
+ handleUpdateFolder(currentFolder.id, renameValue);
52
+ setRenameValue('');
53
+ setIsRenaming(false);
54
+ };
55
+
56
+ const dropHandler = (e: any) => {
57
+ if (e.dataTransfer) {
58
+ setIsOpen(true);
59
+
60
+ handleDrop(e, currentFolder);
61
+
62
+ e.target.style.background = 'none';
63
+ }
64
+ };
65
+
66
+ const allowDrop = (e: any) => {
67
+ e.preventDefault();
68
+ };
69
+
70
+ const highlightDrop = (e: any) => {
71
+ e.target.style.background = '#343541';
72
+ };
73
+
74
+ const removeHighlight = (e: any) => {
75
+ e.target.style.background = 'none';
76
+ };
77
+
78
+ useEffect(() => {
79
+ if (isRenaming) {
80
+ setIsDeleting(false);
81
+ } else if (isDeleting) {
82
+ setIsRenaming(false);
83
+ }
84
+ }, [isRenaming, isDeleting]);
85
+
86
+ useEffect(() => {
87
+ if (searchTerm) {
88
+ setIsOpen(true);
89
+ } else {
90
+ setIsOpen(false);
91
+ }
92
+ }, [searchTerm]);
93
+
94
+ return (
95
+ <>
96
+ <div className="relative flex items-center">
97
+ {isRenaming ? (
98
+ <div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3">
99
+ {isOpen ? (
100
+ <IconCaretDown size={18} />
101
+ ) : (
102
+ <IconCaretRight size={18} />
103
+ )}
104
+ <input
105
+ className="mr-12 flex-1 overflow-hidden overflow-ellipsis border-neutral-400 bg-transparent text-left text-[12.5px] leading-3 text-white outline-none focus:border-neutral-100"
106
+ type="text"
107
+ value={renameValue}
108
+ onChange={(e) => setRenameValue(e.target.value)}
109
+ onKeyDown={handleEnterDown}
110
+ autoFocus
111
+ />
112
+ </div>
113
+ ) : (
114
+ <button
115
+ className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90`}
116
+ onClick={() => setIsOpen(!isOpen)}
117
+ onDrop={(e) => dropHandler(e)}
118
+ onDragOver={allowDrop}
119
+ onDragEnter={highlightDrop}
120
+ onDragLeave={removeHighlight}
121
+ >
122
+ {isOpen ? (
123
+ <IconCaretDown size={18} />
124
+ ) : (
125
+ <IconCaretRight size={18} />
126
+ )}
127
+
128
+ <div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3">
129
+ {currentFolder.name}
130
+ </div>
131
+ </button>
132
+ )}
133
+
134
+ {(isDeleting || isRenaming) && (
135
+ <div className="absolute right-1 z-10 flex text-gray-300">
136
+ <SidebarActionButton
137
+ handleClick={(e) => {
138
+ e.stopPropagation();
139
+
140
+ if (isDeleting) {
141
+ handleDeleteFolder(currentFolder.id);
142
+ } else if (isRenaming) {
143
+ handleRename();
144
+ }
145
+
146
+ setIsDeleting(false);
147
+ setIsRenaming(false);
148
+ }}
149
+ >
150
+ <IconCheck size={18} />
151
+ </SidebarActionButton>
152
+ <SidebarActionButton
153
+ handleClick={(e) => {
154
+ e.stopPropagation();
155
+ setIsDeleting(false);
156
+ setIsRenaming(false);
157
+ }}
158
+ >
159
+ <IconX size={18} />
160
+ </SidebarActionButton>
161
+ </div>
162
+ )}
163
+
164
+ {!isDeleting && !isRenaming && (
165
+ <div className="absolute right-1 z-10 flex text-gray-300">
166
+ <SidebarActionButton
167
+ handleClick={(e) => {
168
+ e.stopPropagation();
169
+ setIsRenaming(true);
170
+ setRenameValue(currentFolder.name);
171
+ }}
172
+ >
173
+ <IconPencil size={18} />
174
+ </SidebarActionButton>
175
+ <SidebarActionButton
176
+ handleClick={(e) => {
177
+ e.stopPropagation();
178
+ setIsDeleting(true);
179
+ }}
180
+ >
181
+ <IconTrash size={18} />
182
+ </SidebarActionButton>
183
+ </div>
184
+ )}
185
+ </div>
186
+
187
+ {isOpen ? folderComponent : null}
188
+ </>
189
+ );
190
+ };
191
+
192
+ export default Folder;
components/Folder/index.ts ADDED
@@ -0,0 +1 @@
 
 
1
+ export { default } from './Folder';
components/Markdown/CodeBlock.tsx ADDED
@@ -0,0 +1,94 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';
2
+ import { FC, memo, useState } from 'react';
3
+ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
4
+ import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
5
+
6
+ import { useTranslation } from 'next-i18next';
7
+
8
+ import {
9
+ generateRandomString,
10
+ programmingLanguages,
11
+ } from '@/utils/app/codeblock';
12
+
13
+ interface Props {
14
+ language: string;
15
+ value: string;
16
+ }
17
+
18
+ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
19
+ const { t } = useTranslation('markdown');
20
+ const [isCopied, setIsCopied] = useState<Boolean>(false);
21
+
22
+ const copyToClipboard = () => {
23
+ if (!navigator.clipboard || !navigator.clipboard.writeText) {
24
+ return;
25
+ }
26
+
27
+ navigator.clipboard.writeText(value).then(() => {
28
+ setIsCopied(true);
29
+
30
+ setTimeout(() => {
31
+ setIsCopied(false);
32
+ }, 2000);
33
+ });
34
+ };
35
+ const downloadAsFile = () => {
36
+ const fileExtension = programmingLanguages[language] || '.file';
37
+ const suggestedFileName = `file-${generateRandomString(
38
+ 3,
39
+ true,
40
+ )}${fileExtension}`;
41
+ const fileName = window.prompt(
42
+ t('Enter file name') || '',
43
+ suggestedFileName,
44
+ );
45
+
46
+ if (!fileName) {
47
+ // user pressed cancel on prompt
48
+ return;
49
+ }
50
+
51
+ const blob = new Blob([value], { type: 'text/plain' });
52
+ const url = URL.createObjectURL(blob);
53
+ const link = document.createElement('a');
54
+ link.download = fileName;
55
+ link.href = url;
56
+ link.style.display = 'none';
57
+ document.body.appendChild(link);
58
+ link.click();
59
+ document.body.removeChild(link);
60
+ URL.revokeObjectURL(url);
61
+ };
62
+ return (
63
+ <div className="codeblock relative font-sans text-[16px]">
64
+ <div className="flex items-center justify-between py-1.5 px-4">
65
+ <span className="text-xs lowercase text-white">{language}</span>
66
+
67
+ <div className="flex items-center">
68
+ <button
69
+ className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-white"
70
+ onClick={copyToClipboard}
71
+ >
72
+ {isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
73
+ {isCopied ? t('Copied!') : t('Copy code')}
74
+ </button>
75
+ <button
76
+ className="flex items-center rounded bg-none p-1 text-xs text-white"
77
+ onClick={downloadAsFile}
78
+ >
79
+ <IconDownload size={18} />
80
+ </button>
81
+ </div>
82
+ </div>
83
+
84
+ <SyntaxHighlighter
85
+ language={language}
86
+ style={oneDark}
87
+ customStyle={{ margin: 0 }}
88
+ >
89
+ {value}
90
+ </SyntaxHighlighter>
91
+ </div>
92
+ );
93
+ });
94
+ CodeBlock.displayName = 'CodeBlock';
components/Markdown/MemoizedReactMarkdown.tsx ADDED
@@ -0,0 +1,9 @@
 
 
 
 
 
 
 
 
 
 
1
+ import { FC, memo } from 'react';
2
+ import ReactMarkdown, { Options } from 'react-markdown';
3
+
4
+ export const MemoizedReactMarkdown: FC<Options> = memo(
5
+ ReactMarkdown,
6
+ (prevProps, nextProps) => (
7
+ prevProps.children === nextProps.children
8
+ )
9
+ );
components/Mobile/Navbar.tsx ADDED
@@ -0,0 +1,29 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { IconPlus } from '@tabler/icons-react';
2
+ import { FC } from 'react';
3
+
4
+ import { Conversation } from '@/types/chat';
5
+
6
+ interface Props {
7
+ selectedConversation: Conversation;
8
+ onNewConversation: () => void;
9
+ }
10
+
11
+ export const Navbar: FC<Props> = ({
12
+ selectedConversation,
13
+ onNewConversation,
14
+ }) => {
15
+ return (
16
+ <nav className="flex w-full justify-between bg-[#202123] py-3 px-4">
17
+ <div className="mr-4"></div>
18
+
19
+ <div className="max-w-[240px] overflow-hidden text-ellipsis whitespace-nowrap">
20
+ {selectedConversation.name}
21
+ </div>
22
+
23
+ <IconPlus
24
+ className="cursor-pointer hover:text-neutral-400 mr-8"
25
+ onClick={onNewConversation}
26
+ />
27
+ </nav>
28
+ );
29
+ };
components/Promptbar/PromptBar.context.tsx ADDED
@@ -0,0 +1,19 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { Dispatch, createContext } from 'react';
2
+
3
+ import { ActionType } from '@/hooks/useCreateReducer';
4
+
5
+ import { Prompt } from '@/types/prompt';
6
+
7
+ import { PromptbarInitialState } from './Promptbar.state';
8
+
9
+ export interface PromptbarContextProps {
10
+ state: PromptbarInitialState;
11
+ dispatch: Dispatch<ActionType<PromptbarInitialState>>;
12
+ handleCreatePrompt: () => void;
13
+ handleDeletePrompt: (prompt: Prompt) => void;
14
+ handleUpdatePrompt: (prompt: Prompt) => void;
15
+ }
16
+
17
+ const PromptbarContext = createContext<PromptbarContextProps>(undefined!);
18
+
19
+ export default PromptbarContext;
components/Promptbar/Promptbar.state.tsx ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { Prompt } from '@/types/prompt';
2
+
3
+ export interface PromptbarInitialState {
4
+ searchTerm: string;
5
+ filteredPrompts: Prompt[];
6
+ }
7
+
8
+ export const initialState: PromptbarInitialState = {
9
+ searchTerm: '',
10
+ filteredPrompts: [],
11
+ };
components/Promptbar/Promptbar.tsx ADDED
@@ -0,0 +1,152 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { useContext, useEffect, useState } from 'react';
2
+ import { useTranslation } from 'react-i18next';
3
+
4
+ import { useCreateReducer } from '@/hooks/useCreateReducer';
5
+
6
+ import { savePrompts } from '@/utils/app/prompts';
7
+
8
+ import { OpenAIModels } from '@/types/openai';
9
+ import { Prompt } from '@/types/prompt';
10
+
11
+ import HomeContext from '@/pages/api/home/home.context';
12
+
13
+ import { PromptFolders } from './components/PromptFolders';
14
+ import { PromptbarSettings } from './components/PromptbarSettings';
15
+ import { Prompts } from './components/Prompts';
16
+
17
+ import Sidebar from '../Sidebar';
18
+ import PromptbarContext from './PromptBar.context';
19
+ import { PromptbarInitialState, initialState } from './Promptbar.state';
20
+
21
+ import { v4 as uuidv4 } from 'uuid';
22
+
23
+ const Promptbar = () => {
24
+ const { t } = useTranslation('promptbar');
25
+
26
+ const promptBarContextValue = useCreateReducer<PromptbarInitialState>({
27
+ initialState,
28
+ });
29
+
30
+ const {
31
+ state: { prompts, defaultModelId, showPromptbar },
32
+ dispatch: homeDispatch,
33
+ handleCreateFolder,
34
+ } = useContext(HomeContext);
35
+
36
+ const {
37
+ state: { searchTerm, filteredPrompts },
38
+ dispatch: promptDispatch,
39
+ } = promptBarContextValue;
40
+
41
+ const handleTogglePromptbar = () => {
42
+ homeDispatch({ field: 'showPromptbar', value: !showPromptbar });
43
+ localStorage.setItem('showPromptbar', JSON.stringify(!showPromptbar));
44
+ };
45
+
46
+ const handleCreatePrompt = () => {
47
+ if (defaultModelId) {
48
+ const newPrompt: Prompt = {
49
+ id: uuidv4(),
50
+ name: `Prompt ${prompts.length + 1}`,
51
+ description: '',
52
+ content: '',
53
+ model: OpenAIModels[defaultModelId],
54
+ folderId: null,
55
+ };
56
+
57
+ const updatedPrompts = [...prompts, newPrompt];
58
+
59
+ homeDispatch({ field: 'prompts', value: updatedPrompts });
60
+
61
+ savePrompts(updatedPrompts);
62
+ }
63
+ };
64
+
65
+ const handleDeletePrompt = (prompt: Prompt) => {
66
+ const updatedPrompts = prompts.filter((p) => p.id !== prompt.id);
67
+
68
+ homeDispatch({ field: 'prompts', value: updatedPrompts });
69
+ savePrompts(updatedPrompts);
70
+ };
71
+
72
+ const handleUpdatePrompt = (prompt: Prompt) => {
73
+ const updatedPrompts = prompts.map((p) => {
74
+ if (p.id === prompt.id) {
75
+ return prompt;
76
+ }
77
+
78
+ return p;
79
+ });
80
+ homeDispatch({ field: 'prompts', value: updatedPrompts });
81
+
82
+ savePrompts(updatedPrompts);
83
+ };
84
+
85
+ const handleDrop = (e: any) => {
86
+ if (e.dataTransfer) {
87
+ const prompt = JSON.parse(e.dataTransfer.getData('prompt'));
88
+
89
+ const updatedPrompt = {
90
+ ...prompt,
91
+ folderId: e.target.dataset.folderId,
92
+ };
93
+
94
+ handleUpdatePrompt(updatedPrompt);
95
+
96
+ e.target.style.background = 'none';
97
+ }
98
+ };
99
+
100
+ useEffect(() => {
101
+ if (searchTerm) {
102
+ promptDispatch({
103
+ field: 'filteredPrompts',
104
+ value: prompts.filter((prompt) => {
105
+ const searchable =
106
+ prompt.name.toLowerCase() +
107
+ ' ' +
108
+ prompt.description.toLowerCase() +
109
+ ' ' +
110
+ prompt.content.toLowerCase();
111
+ return searchable.includes(searchTerm.toLowerCase());
112
+ }),
113
+ });
114
+ } else {
115
+ promptDispatch({ field: 'filteredPrompts', value: prompts });
116
+ }
117
+ }, [searchTerm, prompts]);
118
+
119
+ return (
120
+ <PromptbarContext.Provider
121
+ value={{
122
+ ...promptBarContextValue,
123
+ handleCreatePrompt,
124
+ handleDeletePrompt,
125
+ handleUpdatePrompt,
126
+ }}
127
+ >
128
+ <Sidebar<Prompt>
129
+ side={'right'}
130
+ isOpen={showPromptbar}
131
+ addItemButtonTitle={t('New prompt')}
132
+ itemComponent={
133
+ <Prompts
134
+ prompts={filteredPrompts.filter((prompt) => !prompt.folderId)}
135
+ />
136
+ }
137
+ folderComponent={<PromptFolders />}
138
+ items={filteredPrompts}
139
+ searchTerm={searchTerm}
140
+ handleSearchTerm={(searchTerm: string) =>
141
+ promptDispatch({ field: 'searchTerm', value: searchTerm })
142
+ }
143
+ toggleOpen={handleTogglePromptbar}
144
+ handleCreateItem={handleCreatePrompt}
145
+ handleCreateFolder={() => handleCreateFolder(t('New folder'), 'prompt')}
146
+ handleDrop={handleDrop}
147
+ />
148
+ </PromptbarContext.Provider>
149
+ );
150
+ };
151
+
152
+ export default Promptbar;
components/Promptbar/components/Prompt.tsx ADDED
@@ -0,0 +1,130 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import {
2
+ IconBulbFilled,
3
+ IconCheck,
4
+ IconTrash,
5
+ IconX,
6
+ } from '@tabler/icons-react';
7
+ import {
8
+ DragEvent,
9
+ MouseEventHandler,
10
+ useContext,
11
+ useEffect,
12
+ useState,
13
+ } from 'react';
14
+
15
+ import { Prompt } from '@/types/prompt';
16
+
17
+ import SidebarActionButton from '@/components/Buttons/SidebarActionButton';
18
+
19
+ import PromptbarContext from '../PromptBar.context';
20
+ import { PromptModal } from './PromptModal';
21
+
22
+ interface Props {
23
+ prompt: Prompt;
24
+ }
25
+
26
+ export const PromptComponent = ({ prompt }: Props) => {
27
+ const {
28
+ dispatch: promptDispatch,
29
+ handleUpdatePrompt,
30
+ handleDeletePrompt,
31
+ } = useContext(PromptbarContext);
32
+
33
+ const [showModal, setShowModal] = useState<boolean>(false);
34
+ const [isDeleting, setIsDeleting] = useState(false);
35
+ const [isRenaming, setIsRenaming] = useState(false);
36
+ const [renameValue, setRenameValue] = useState('');
37
+
38
+ const handleUpdate = (prompt: Prompt) => {
39
+ handleUpdatePrompt(prompt);
40
+ promptDispatch({ field: 'searchTerm', value: '' });
41
+ };
42
+
43
+ const handleDelete: MouseEventHandler<HTMLButtonElement> = (e) => {
44
+ e.stopPropagation();
45
+
46
+ if (isDeleting) {
47
+ handleDeletePrompt(prompt);
48
+ promptDispatch({ field: 'searchTerm', value: '' });
49
+ }
50
+
51
+ setIsDeleting(false);
52
+ };
53
+
54
+ const handleCancelDelete: MouseEventHandler<HTMLButtonElement> = (e) => {
55
+ e.stopPropagation();
56
+ setIsDeleting(false);
57
+ };
58
+
59
+ const handleOpenDeleteModal: MouseEventHandler<HTMLButtonElement> = (e) => {
60
+ e.stopPropagation();
61
+ setIsDeleting(true);
62
+ };
63
+
64
+ const handleDragStart = (e: DragEvent<HTMLButtonElement>, prompt: Prompt) => {
65
+ if (e.dataTransfer) {
66
+ e.dataTransfer.setData('prompt', JSON.stringify(prompt));
67
+ }
68
+ };
69
+
70
+ useEffect(() => {
71
+ if (isRenaming) {
72
+ setIsDeleting(false);
73
+ } else if (isDeleting) {
74
+ setIsRenaming(false);
75
+ }
76
+ }, [isRenaming, isDeleting]);
77
+
78
+ return (
79
+ <div className="relative flex items-center">
80
+ <button
81
+ className="flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90"
82
+ draggable="true"
83
+ onClick={(e) => {
84
+ e.stopPropagation();
85
+ setShowModal(true);
86
+ }}
87
+ onDragStart={(e) => handleDragStart(e, prompt)}
88
+ onMouseLeave={() => {
89
+ setIsDeleting(false);
90
+ setIsRenaming(false);
91
+ setRenameValue('');
92
+ }}
93
+ >
94
+ <IconBulbFilled size={18} />
95
+
96
+ <div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all pr-4 text-left text-[12.5px] leading-3">
97
+ {prompt.name}
98
+ </div>
99
+ </button>
100
+
101
+ {(isDeleting || isRenaming) && (
102
+ <div className="absolute right-1 z-10 flex text-gray-300">
103
+ <SidebarActionButton handleClick={handleDelete}>
104
+ <IconCheck size={18} />
105
+ </SidebarActionButton>
106
+
107
+ <SidebarActionButton handleClick={handleCancelDelete}>
108
+ <IconX size={18} />
109
+ </SidebarActionButton>
110
+ </div>
111
+ )}
112
+
113
+ {!isDeleting && !isRenaming && (
114
+ <div className="absolute right-1 z-10 flex text-gray-300">
115
+ <SidebarActionButton handleClick={handleOpenDeleteModal}>
116
+ <IconTrash size={18} />
117
+ </SidebarActionButton>
118
+ </div>
119
+ )}
120
+
121
+ {showModal && (
122
+ <PromptModal
123
+ prompt={prompt}
124
+ onClose={() => setShowModal(false)}
125
+ onUpdatePrompt={handleUpdate}
126
+ />
127
+ )}
128
+ </div>
129
+ );
130
+ };
components/Promptbar/components/PromptFolders.tsx ADDED
@@ -0,0 +1,64 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { useContext } from 'react';
2
+
3
+ import { FolderInterface } from '@/types/folder';
4
+
5
+ import HomeContext from '@/pages/api/home/home.context';
6
+
7
+ import Folder from '@/components/Folder';
8
+ import { PromptComponent } from '@/components/Promptbar/components/Prompt';
9
+
10
+ import PromptbarContext from '../PromptBar.context';
11
+
12
+ export const PromptFolders = () => {
13
+ const {
14
+ state: { folders },
15
+ } = useContext(HomeContext);
16
+
17
+ const {
18
+ state: { searchTerm, filteredPrompts },
19
+ handleUpdatePrompt,
20
+ } = useContext(PromptbarContext);
21
+
22
+ const handleDrop = (e: any, folder: FolderInterface) => {
23
+ if (e.dataTransfer) {
24
+ const prompt = JSON.parse(e.dataTransfer.getData('prompt'));
25
+
26
+ const updatedPrompt = {
27
+ ...prompt,
28
+ folderId: folder.id,
29
+ };
30
+
31
+ handleUpdatePrompt(updatedPrompt);
32
+ }
33
+ };
34
+
35
+ const PromptFolders = (currentFolder: FolderInterface) =>
36
+ filteredPrompts
37
+ .filter((p) => p.folderId)
38
+ .map((prompt, index) => {
39
+ if (prompt.folderId === currentFolder.id) {
40
+ return (
41
+ <div key={index} className="ml-5 gap-2 border-l pl-2">
42
+ <PromptComponent prompt={prompt} />
43
+ </div>
44
+ );
45
+ }
46
+ });
47
+
48
+ return (
49
+ <div className="flex w-full flex-col pt-2">
50
+ {folders
51
+ .filter((folder) => folder.type === 'prompt')
52
+ .sort((a, b) => a.name.localeCompare(b.name))
53
+ .map((folder, index) => (
54
+ <Folder
55
+ key={index}
56
+ searchTerm={searchTerm}
57
+ currentFolder={folder}
58
+ handleDrop={handleDrop}
59
+ folderComponent={PromptFolders(folder)}
60
+ />
61
+ ))}
62
+ </div>
63
+ );
64
+ };
components/Promptbar/components/PromptModal.tsx ADDED
@@ -0,0 +1,130 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
2
+
3
+ import { useTranslation } from 'next-i18next';
4
+
5
+ import { Prompt } from '@/types/prompt';
6
+
7
+ interface Props {
8
+ prompt: Prompt;
9
+ onClose: () => void;
10
+ onUpdatePrompt: (prompt: Prompt) => void;
11
+ }
12
+
13
+ export const PromptModal: FC<Props> = ({ prompt, onClose, onUpdatePrompt }) => {
14
+ const { t } = useTranslation('promptbar');
15
+ const [name, setName] = useState(prompt.name);
16
+ const [description, setDescription] = useState(prompt.description);
17
+ const [content, setContent] = useState(prompt.content);
18
+
19
+ const modalRef = useRef<HTMLDivElement>(null);
20
+ const nameInputRef = useRef<HTMLInputElement>(null);
21
+
22
+ const handleEnter = (e: KeyboardEvent<HTMLDivElement>) => {
23
+ if (e.key === 'Enter' && !e.shiftKey) {
24
+ onUpdatePrompt({ ...prompt, name, description, content: content.trim() });
25
+ onClose();
26
+ }
27
+ };
28
+
29
+ useEffect(() => {
30
+ const handleMouseDown = (e: MouseEvent) => {
31
+ if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
32
+ window.addEventListener('mouseup', handleMouseUp);
33
+ }
34
+ };
35
+
36
+ const handleMouseUp = (e: MouseEvent) => {
37
+ window.removeEventListener('mouseup', handleMouseUp);
38
+ onClose();
39
+ };
40
+
41
+ window.addEventListener('mousedown', handleMouseDown);
42
+
43
+ return () => {
44
+ window.removeEventListener('mousedown', handleMouseDown);
45
+ };
46
+ }, [onClose]);
47
+
48
+ useEffect(() => {
49
+ nameInputRef.current?.focus();
50
+ }, []);
51
+
52
+ return (
53
+ <div
54
+ className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"
55
+ onKeyDown={handleEnter}
56
+ >
57
+ <div className="fixed inset-0 z-10 overflow-hidden">
58
+ <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
59
+ <div
60
+ className="hidden sm:inline-block sm:h-screen sm:align-middle"
61
+ aria-hidden="true"
62
+ />
63
+
64
+ <div
65
+ ref={modalRef}
66
+ className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
67
+ role="dialog"
68
+ >
69
+ <div className="text-sm font-bold text-black dark:text-neutral-200">
70
+ {t('Name')}
71
+ </div>
72
+ <input
73
+ ref={nameInputRef}
74
+ className="mt-2 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
75
+ placeholder={t('A name for your prompt.') || ''}
76
+ value={name}
77
+ onChange={(e) => setName(e.target.value)}
78
+ />
79
+
80
+ <div className="mt-6 text-sm font-bold text-black dark:text-neutral-200">
81
+ {t('Description')}
82
+ </div>
83
+ <textarea
84
+ className="mt-2 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
85
+ style={{ resize: 'none' }}
86
+ placeholder={t('A description for your prompt.') || ''}
87
+ value={description}
88
+ onChange={(e) => setDescription(e.target.value)}
89
+ rows={3}
90
+ />
91
+
92
+ <div className="mt-6 text-sm font-bold text-black dark:text-neutral-200">
93
+ {t('Prompt')}
94
+ </div>
95
+ <textarea
96
+ className="mt-2 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
97
+ style={{ resize: 'none' }}
98
+ placeholder={
99
+ t(
100
+ 'Prompt content. Use {{}} to denote a variable. Ex: {{name}} is a {{adjective}} {{noun}}',
101
+ ) || ''
102
+ }
103
+ value={content}
104
+ onChange={(e) => setContent(e.target.value)}
105
+ rows={10}
106
+ />
107
+
108
+ <button
109
+ type="button"
110
+ className="w-full px-4 py-2 mt-6 border rounded-lg shadow border-neutral-500 text-neutral-900 hover:bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-white dark:text-black dark:hover:bg-neutral-300"
111
+ onClick={() => {
112
+ const updatedPrompt = {
113
+ ...prompt,
114
+ name,
115
+ description,
116
+ content: content.trim(),
117
+ };
118
+
119
+ onUpdatePrompt(updatedPrompt);
120
+ onClose();
121
+ }}
122
+ >
123
+ {t('Save')}
124
+ </button>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ );
130
+ };
components/Promptbar/components/PromptbarSettings.tsx ADDED
@@ -0,0 +1,7 @@
 
 
 
 
 
 
 
 
1
+ import { FC } from 'react';
2
+
3
+ interface Props {}
4
+
5
+ export const PromptbarSettings: FC<Props> = () => {
6
+ return <div></div>;
7
+ };
components/Promptbar/components/Prompts.tsx ADDED
@@ -0,0 +1,22 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { FC } from 'react';
2
+
3
+ import { Prompt } from '@/types/prompt';
4
+
5
+ import { PromptComponent } from './Prompt';
6
+
7
+ interface Props {
8
+ prompts: Prompt[];
9
+ }
10
+
11
+ export const Prompts: FC<Props> = ({ prompts }) => {
12
+ return (
13
+ <div className="flex w-full flex-col gap-1">
14
+ {prompts
15
+ .slice()
16
+ .reverse()
17
+ .map((prompt, index) => (
18
+ <PromptComponent key={index} prompt={prompt} />
19
+ ))}
20
+ </div>
21
+ );
22
+ };
components/Promptbar/index.ts ADDED
@@ -0,0 +1 @@
 
 
1
+ export { default } from './Promptbar';
components/Search/Search.tsx ADDED
@@ -0,0 +1,43 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { IconX } from '@tabler/icons-react';
2
+ import { FC } from 'react';
3
+
4
+ import { useTranslation } from 'next-i18next';
5
+
6
+ interface Props {
7
+ placeholder: string;
8
+ searchTerm: string;
9
+ onSearch: (searchTerm: string) => void;
10
+ }
11
+ const Search: FC<Props> = ({ placeholder, searchTerm, onSearch }) => {
12
+ const { t } = useTranslation('sidebar');
13
+
14
+ const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
15
+ onSearch(e.target.value);
16
+ };
17
+
18
+ const clearSearch = () => {
19
+ onSearch('');
20
+ };
21
+
22
+ return (
23
+ <div className="relative flex items-center">
24
+ <input
25
+ className="w-full flex-1 rounded-md border border-neutral-600 bg-[#202123] px-4 py-3 pr-10 text-[14px] leading-3 text-white"
26
+ type="text"
27
+ placeholder={t(placeholder) || ''}
28
+ value={searchTerm}
29
+ onChange={handleSearchChange}
30
+ />
31
+
32
+ {searchTerm && (
33
+ <IconX
34
+ className="absolute right-4 cursor-pointer text-neutral-300 hover:text-neutral-400"
35
+ size={18}
36
+ onClick={clearSearch}
37
+ />
38
+ )}
39
+ </div>
40
+ );
41
+ };
42
+
43
+ export default Search;
components/Search/index.ts ADDED
@@ -0,0 +1 @@
 
 
1
+ export { default } from './Search';
components/Settings/Import.tsx ADDED
@@ -0,0 +1,51 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { IconFileImport } from '@tabler/icons-react';
2
+ import { FC } from 'react';
3
+
4
+ import { useTranslation } from 'next-i18next';
5
+
6
+ import { SupportedExportFormats } from '@/types/export';
7
+
8
+ import { SidebarButton } from '../Sidebar/SidebarButton';
9
+
10
+ interface Props {
11
+ onImport: (data: SupportedExportFormats) => void;
12
+ }
13
+
14
+ export const Import: FC<Props> = ({ onImport }) => {
15
+ const { t } = useTranslation('sidebar');
16
+ return (
17
+ <>
18
+ <input
19
+ id="import-file"
20
+ className="sr-only"
21
+ tabIndex={-1}
22
+ type="file"
23
+ accept=".json"
24
+ onChange={(e) => {
25
+ if (!e.target.files?.length) return;
26
+
27
+ const file = e.target.files[0];
28
+ const reader = new FileReader();
29
+ reader.onload = (e) => {
30
+ let json = JSON.parse(e.target?.result as string);
31
+ onImport(json);
32
+ };
33
+ reader.readAsText(file);
34
+ }}
35
+ />
36
+
37
+ <SidebarButton
38
+ text={t('Import data')}
39
+ icon={<IconFileImport size={18} />}
40
+ onClick={() => {
41
+ const importFile = document.querySelector(
42
+ '#import-file',
43
+ ) as HTMLInputElement;
44
+ if (importFile) {
45
+ importFile.click();
46
+ }
47
+ }}
48
+ />
49
+ </>
50
+ );
51
+ };
components/Settings/Key.tsx ADDED
@@ -0,0 +1,15 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { IconCheck, IconKey, IconX } from '@tabler/icons-react';
2
+ import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
3
+
4
+ import { useTranslation } from 'next-i18next';
5
+
6
+ import { SidebarButton } from '../Sidebar/SidebarButton';
7
+
8
+ interface Props {
9
+ apiKey: string;
10
+ onApiKeyChange: (apiKey: string) => void;
11
+ }
12
+
13
+ export const Key: FC<Props> = ({ apiKey, onApiKeyChange }) => {
14
+ return null;
15
+ };
components/Settings/SettingDialog.tsx ADDED
@@ -0,0 +1,105 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { FC, useContext, useEffect, useReducer, useRef } from 'react';
2
+
3
+ import { useTranslation } from 'next-i18next';
4
+
5
+ import { useCreateReducer } from '@/hooks/useCreateReducer';
6
+
7
+ import { getSettings, saveSettings } from '@/utils/app/settings';
8
+
9
+ import { Settings } from '@/types/settings';
10
+
11
+ import HomeContext from '@/pages/api/home/home.context';
12
+
13
+ interface Props {
14
+ open: boolean;
15
+ onClose: () => void;
16
+ }
17
+
18
+ export const SettingDialog: FC<Props> = ({ open, onClose }) => {
19
+ const { t } = useTranslation('settings');
20
+ const settings: Settings = getSettings();
21
+ const { state, dispatch } = useCreateReducer<Settings>({
22
+ initialState: settings,
23
+ });
24
+ const { dispatch: homeDispatch } = useContext(HomeContext);
25
+ const modalRef = useRef<HTMLDivElement>(null);
26
+
27
+ useEffect(() => {
28
+ const handleMouseDown = (e: MouseEvent) => {
29
+ if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
30
+ window.addEventListener('mouseup', handleMouseUp);
31
+ }
32
+ };
33
+
34
+ const handleMouseUp = (e: MouseEvent) => {
35
+ window.removeEventListener('mouseup', handleMouseUp);
36
+ onClose();
37
+ };
38
+
39
+ window.addEventListener('mousedown', handleMouseDown);
40
+
41
+ return () => {
42
+ window.removeEventListener('mousedown', handleMouseDown);
43
+ };
44
+ }, [onClose]);
45
+
46
+ const handleSave = () => {
47
+ homeDispatch({ field: 'lightMode', value: state.theme });
48
+ saveSettings(state);
49
+ };
50
+
51
+ // Render nothing if the dialog is not open.
52
+ if (!open) {
53
+ return <></>;
54
+ }
55
+
56
+ // Render the dialog.
57
+ return (
58
+ <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
59
+ <div className="fixed inset-0 z-10 overflow-hidden">
60
+ <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
61
+ <div
62
+ className="hidden sm:inline-block sm:h-screen sm:align-middle"
63
+ aria-hidden="true"
64
+ />
65
+
66
+ <div
67
+ ref={modalRef}
68
+ className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
69
+ role="dialog"
70
+ >
71
+ <div className="text-lg pb-4 font-bold text-black dark:text-neutral-200">
72
+ {t('Settings')}
73
+ </div>
74
+
75
+ <div className="text-sm font-bold mb-2 text-black dark:text-neutral-200">
76
+ {t('Theme')}
77
+ </div>
78
+
79
+ <select
80
+ className="w-full cursor-pointer bg-transparent p-2 text-neutral-700 dark:text-neutral-200"
81
+ value={state.theme}
82
+ onChange={(event) =>
83
+ dispatch({ field: 'theme', value: event.target.value })
84
+ }
85
+ >
86
+ <option value="dark">{t('Dark mode')}</option>
87
+ <option value="light">{t('Light mode')}</option>
88
+ </select>
89
+
90
+ <button
91
+ type="button"
92
+ className="w-full px-4 py-2 mt-6 border rounded-lg shadow border-neutral-500 text-neutral-900 hover:bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-white dark:text-black dark:hover:bg-neutral-300"
93
+ onClick={() => {
94
+ handleSave();
95
+ onClose();
96
+ }}
97
+ >
98
+ {t('Save')}
99
+ </button>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ );
105
+ };