Fixed chunked encoding not sent in realtime with revers proxy software

Added functionality to export chats to screenshot

See merge request schihei/chatbot-ui!4

.env.local.example

@@ -1,6 +1,6 @@
 # Chatbot UI
 DEFAULT_MODEL=gpt-3.5-turbo
-DEFAULT_SYSTEM_PROMPT=You are ChatGPT, a large language model trained by OpenAI. Follow the user's instructions carefully. Respond using markdown.
+NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT=You are ChatGPT, a large language model trained by OpenAI. Follow the user's instructions carefully. Respond using markdown.
 OPENAI_API_KEY=YOUR_KEY
 
 # Google

.github/workflows/deploy-docker-image.yaml

@@ -7,7 +7,7 @@ name: Docker
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ['main']
 
 env:
   # Use docker.io for Docker Hub if empty
@@ -15,10 +15,8 @@ env:
   # github.repository as <account>/<repo>
   IMAGE_NAME: ${{ github.repository }}
 
-
 jobs:
   build:
-
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -31,6 +29,9 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
 
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2.1.0
+        
       # Workaround: https://github.com/docker/build-push-action/issues/461
       - name: Setup Docker buildx
         uses: docker/setup-buildx-action@79abd3f86f79a9d68a23c75a09a9a85889262adf
@@ -60,6 +61,7 @@ jobs:
         uses: docker/build-push-action@ac9327eae2b366085ac7f6a2d02df8aa8ead720a
         with:
           context: .
+          platforms: "linux/amd64,linux/arm64"
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

.github/workflows/run-test-suite.yml

@@ -14,11 +14,11 @@ jobs:
       image: node:16
 
     steps:
-    - name: Checkout code
-      uses: actions/checkout@v2
+      - name: Checkout code
+        uses: actions/checkout@v2
 
-    - name: Install dependencies
-      run: npm ci
+      - name: Install dependencies
+        run: npm ci
 
-    - name: Run Vitest Suite
-      run: npm test
+      - name: Run Vitest Suite
+        run: npm test

.gitignore

@@ -36,4 +36,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-.idea
+.idea
+pnpm-lock.yaml

CONTRIBUTING.md

@@ -1,4 +1,5 @@
 # Contributing Guidelines
+
 **Welcome to Chatbot UI!**
 
 We appreciate your interest in contributing to our project.
@@ -6,6 +7,7 @@ We appreciate your interest in contributing to our project.
 Before you get started, please read our guidelines for contributing.
 
 ## Types of Contributions
+
 We welcome the following types of contributions:
 
 - Bug fixes
@@ -15,8 +17,8 @@ We welcome the following types of contributions:
 - Translations
 - Tests
 
-
 ## Getting Started
+
 To get started, fork the project on GitHub and clone it locally on your machine. Then, create a new branch to work on your changes.
 
 ```
@@ -29,6 +31,7 @@ git checkout -b my-branch-name
 Before submitting your pull request, please make sure your changes pass our automated tests and adhere to our code style guidelines.
 
 ## Pull Request Process
+
 1. Fork the project on GitHub.
 2. Clone your forked repository locally on your machine.
 3. Create a new branch from the main branch.
@@ -38,4 +41,5 @@ Before submitting your pull request, please make sure your changes pass our auto
 7. Submit a pull request to the main branch of the main repository.
 
 ## Contact
-If you have any questions or need help getting started, feel free to reach out to me on [Twitter](https://twitter.com/mckaywrigley).
+
+If you have any questions or need help getting started, feel free to reach out to me on [Twitter](https://twitter.com/mckaywrigley).

Dockerfile

@@ -1,5 +1,5 @@
 # ---- Base Node ----
-FROM node:19-alpine AS base
+FROM node:20-alpine AS base
 WORKDIR /app
 COPY package*.json ./
 
@@ -13,7 +13,7 @@ COPY . .
 RUN npm run build
 
 # ---- Production ----
-FROM node:19-alpine AS production
+FROM node:20-alpine AS production
 WORKDIR /app
 COPY --from=dependencies /app/node_modules ./node_modules
 COPY --from=build /app/.next ./.next

README.md

@@ -1,10 +1,10 @@
 # Chatbot UI
 
-Chatbot UI is an advanced chatbot kit for OpenAI's chat models built on top of [Chatbot UI Lite](https://github.com/mckaywrigley/chatbot-ui-lite) using Next.js, TypeScript, and Tailwind CSS.
+Chatbot UI is an open source chat UI for AI models.
 
 See a [demo](https://twitter.com/mckaywrigley/status/1640380021423603713?s=46&t=AowqkodyK6B4JccSOxSPew).
 
-![Chatbot UI](./public/screenshot.png)
+![Chatbot UI](./public/screenshots/screenshot-0402023.jpg)
 
 ## Updates
 
@@ -14,36 +14,8 @@ Expect frequent improvements.
 
 **Next up:**
 
-- [ ] Delete messages
-- [ ] More model settings
-- [ ] Plugins
-
-**Recent updates:**
-
-- [x] Prompt templates (3/27/23)
-- [x] Regenerate & edit responses (3/25/23)
-- [x] Folders (3/24/23)
-- [x] Search chat content (3/23/23)
-- [x] Stop message generation (3/22/23)
-- [x] Import/Export chats (3/22/23)
-- [x] Custom system prompt (3/21/23)
-- [x] Error handling (3/20/23)
-- [x] GPT-4 support (access required) (3/20/23)
-- [x] Search conversations (3/19/23)
-- [x] Code syntax highlighting (3/18/23)
-- [x] Toggle sidebar (3/18/23)
-- [x] Conversation naming (3/18/23)
-- [x] Github flavored markdown (3/18/23)
-- [x] Add OpenAI API key in app (3/18/23)
-- [x] Markdown support (3/17/23)
-
-## Modifications
-
-Modify the chat interface in `components/Chat`.
-
-Modify the sidebar interface in `components/Sidebar`.
-
-Modify the system prompt in `utils/index.ts`.
+- [ ] Sharing
+- [ ] "Bots"
 
 ## Deploy
 
@@ -53,10 +25,6 @@ Host your own live version of Chatbot UI with Vercel.
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fmckaywrigley%2Fchatbot-ui)
 
-**Replit**
-
-Fork Chatbot UI on Replit [here](https://replit.com/@MckayWrigley/chatbot-ui-pro?v=1).
-
 **Docker**
 
 Build locally:
@@ -112,15 +80,26 @@ You should be able to start chatting.
 
 When deploying the application, the following environment variables can be set:
 
-| Environment Variable  | Default value                  | Description                                             |
-| --------------------- | ------------------------------ | ------------------------------------------------------- |
-| OPENAI_API_KEY        |                                | The default API key used for authentication with OpenAI |
-| DEFAULT_MODEL         | `gpt-3.5-turbo`                | The default model to use on new conversations           |
-| DEFAULT_SYSTEM_PROMPT | [see here](utils/app/const.ts) | The defaut system prompt to use on new conversations    |
+| Environment Variable              | Default value                  | Description                                                                                                                               |
+| --------------------------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| OPENAI_API_KEY                    |                                | The default API key used for authentication with OpenAI                                                                                   |
+| OPENAI_API_HOST                   | `https://api.openai.com`       | The base url, for Azure use `https://<endpoint>.openai.azure.com`                                                                         |
+| OPENAI_API_TYPE                   | `openai`                       | The API type, options are `openai` or `azure`                                                                                             |
+| OPENAI_API_VERSION                | `2023-03-15-preview`           | Only applicable for Azure OpenAI                                                                                                          |
+| AZURE_DEPLOYMENT_ID               |                                | Needed when Azure OpenAI, Ref [Azure OpenAI API](https://learn.microsoft.com/zh-cn/azure/cognitive-services/openai/reference#completions) |
+| OPENAI_ORGANIZATION               |                                | Your OpenAI organization ID                                                                                                               |
+| DEFAULT_MODEL                     | `gpt-3.5-turbo`                | The default model to use on new conversations, for Azure use `gpt-35-turbo`                                                               |
+| NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT | [see here](utils/app/const.ts) | The default system prompt to use on new conversations                                                                                     |
+| NEXT_PUBLIC_DEFAULT_TEMPERATURE   | 1                              | The default temperature to use on new conversations                                                                                       |
+| GOOGLE_API_KEY                    |                                | See [Custom Search JSON API documentation][GCSE]                                                                                          |
+| GOOGLE_CSE_ID                     |                                | See [Custom Search JSON API documentation][GCSE]                                                                                          |
 
 If you do not provide an OpenAI API key with `OPENAI_API_KEY`, users will have to provide their own key.
+
 If you don't have an OpenAI API key, you can get one [here](https://platform.openai.com/account/api-keys).
 
 ## Contact
 
-If you have any questions, feel free to reach out to me on [Twitter](https://twitter.com/mckaywrigley).
+If you have any questions, feel free to reach out to Mckay on [Twitter](https://twitter.com/mckaywrigley).
+
+[GCSE]: https://developers.google.com/custom-search/v1/overview

SECURITY.md

@@ -0,0 +1,53 @@
+# Security Policy
+
+
+This security policy outlines the process for reporting vulnerabilities and secrets found within this GitHub repository. It is essential that all contributors and users adhere to this policy in order to maintain a secure and stable environment.
+
+## Reporting a Vulnerability
+
+If you discover a vulnerability within the code, dependencies, or any other component of this repository, please follow these steps:
+
+1. **Do not disclose the vulnerability publicly.** Publicly disclosing a vulnerability may put the project at risk and could potentially harm other users.
+
+2. **Contact the repository maintainer(s) privately.** Send a private message or email to the maintainer(s) with a detailed description of the vulnerability. Include the following information:
+
+   - The affected component(s)
+   - Steps to reproduce the issue
+   - Potential impact of the vulnerability
+   - Any possible mitigations or workarounds
+
+3. **Wait for a response from the maintainer(s).** Please be patient, as they may need time to investigate and verify the issue. The maintainer(s) should acknowledge receipt of your report and provide an estimated time frame for addressing the vulnerability.
+
+4. **Cooperate with the maintainer(s).** If requested, provide additional information or assistance to help resolve the issue.
+
+5. **Do not disclose the vulnerability until the maintainer(s) have addressed it.** Once the issue has been resolved, the maintainer(s) may choose to publicly disclose the vulnerability and credit you for the discovery.
+
+## Reporting Secrets
+
+If you discover any secrets, such as API keys or passwords, within the repository, follow these steps:
+
+1. **Do not share the secret or use it for unauthorized purposes.** Misusing a secret could have severe consequences for the project and its users.
+
+2. **Contact the repository maintainer(s) privately.** Notify them of the discovered secret, its location, and any potential risks associated with it.
+
+3. **Wait for a response and further instructions.** 
+
+## Responsible Disclosure
+
+We encourage responsible disclosure of vulnerabilities and secrets. If you follow the steps outlined in this policy, we will work with you to understand and address the issue. We will not take legal action against individuals who discover and report vulnerabilities or secrets in accordance with this policy.
+
+## Patching and Updates
+
+We are committed to maintaining the security of our project. When vulnerabilities are reported and confirmed, we will:
+
+1. Work diligently to develop and apply a patch or implement a mitigation strategy.
+2. Keep the reporter informed about the progress of the fix.
+3. Update the repository with the necessary patches and document the changes in the release notes or changelog.
+4. Credit the reporter for the discovery, if they wish to be acknowledged.
+
+## Contributing to Security
+
+We welcome contributions that help improve the security of our project. If you have suggestions or want to contribute code to address security issues, please follow the standard contribution guidelines for this repository. When submitting a pull request related to security, please mention that it addresses a security issue and provide any necessary context.
+
+By adhering to this security policy, you contribute to the overall security and stability of the project. Thank you for your cooperation and responsible handling of vulnerabilities and secrets.
+

__tests__/utils/app/importExports.test.ts

@@ -1,8 +1,4 @@
-import { ExportFormatV1, ExportFormatV2, ExportFormatV4 } from '@/types/export';
-import { OpenAIModels, OpenAIModelID } from '@/types/openai';
-import { DEFAULT_SYSTEM_PROMPT } from '@/utils/app/const';
-import { it, describe, expect } from 'vitest';
-
+import { DEFAULT_SYSTEM_PROMPT, DEFAULT_TEMPERATURE } from '@/utils/app/const';
 import {
   cleanData,
   isExportFormatV1,
@@ -12,6 +8,11 @@ import {
   isLatestExportFormat,
 } from '@/utils/app/importExport';
 
+import { ExportFormatV1, ExportFormatV2, ExportFormatV4 } from '@/types/export';
+import { OpenAIModelID, OpenAIModels } from '@/types/openai';
+
+import { describe, expect, it } from 'vitest';
+
 describe('Export Format Functions', () => {
   describe('isExportFormatV1', () => {
     it('should return true for v1 format', () => {
@@ -101,11 +102,12 @@ describe('cleanData Functions', () => {
             ],
             model: OpenAIModels[OpenAIModelID.GPT_3_5],
             prompt: DEFAULT_SYSTEM_PROMPT,
+            temperature: DEFAULT_TEMPERATURE,
             folderId: null,
           },
         ],
         folders: [],
-        prompts:[]
+        prompts: [],
       });
     });
   });
@@ -156,6 +158,7 @@ describe('cleanData Functions', () => {
             ],
             model: OpenAIModels[OpenAIModelID.GPT_3_5],
             prompt: DEFAULT_SYSTEM_PROMPT,
+            temperature: DEFAULT_TEMPERATURE,
             folderId: null,
           },
         ],
@@ -191,6 +194,7 @@ describe('cleanData Functions', () => {
             ],
             model: OpenAIModels[OpenAIModelID.GPT_3_5],
             prompt: DEFAULT_SYSTEM_PROMPT,
+            temperature: DEFAULT_TEMPERATURE,
             folderId: null,
           },
         ],
@@ -212,7 +216,7 @@ describe('cleanData Functions', () => {
           },
         ],
       } as ExportFormatV4;
-      
+
       const obj = cleanData(data);
       expect(isLatestExportFormat(obj)).toBe(true);
       expect(obj).toEqual({
@@ -233,6 +237,7 @@ describe('cleanData Functions', () => {
             ],
             model: OpenAIModels[OpenAIModelID.GPT_3_5],
             prompt: DEFAULT_SYSTEM_PROMPT,
+            temperature: DEFAULT_TEMPERATURE,
             folderId: null,
           },
         ],
@@ -253,9 +258,7 @@ describe('cleanData Functions', () => {
             folderId: null,
           },
         ],
-
       });
     });
   });
-  
 });

components/Buttons/SidebarActionButton/SidebarActionButton.tsx

@@ -0,0 +1,17 @@
+import { MouseEventHandler, ReactElement } from 'react';
+
+interface Props {
+  handleClick: MouseEventHandler<HTMLButtonElement>;
+  children: ReactElement;
+}
+
+const SidebarActionButton = ({ handleClick, children }: Props) => (
+  <button
+    className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
+    onClick={handleClick}
+  >
+    {children}
+  </button>
+);
+
+export default SidebarActionButton;

components/Buttons/SidebarActionButton/index.ts

@@ -0,0 +1 @@
+export { default } from './SidebarActionButton';

components/Chat/Chat.tsx

@@ -1,334 +1,614 @@
-import { Conversation, Message } from '@/types/chat';
-import { KeyValuePair } from '@/types/data';
-import { ErrorMessage } from '@/types/error';
-import { OpenAIModel, OpenAIModelID } from '@/types/openai';
-import { Plugin } from '@/types/plugin';
-import { Prompt } from '@/types/prompt';
-import { throttle } from '@/utils';
-import { IconArrowDown, IconClearAll, IconSettings } from '@tabler/icons-react';
-import { useTranslation } from 'next-i18next';
+import { 
+  IconClearAll, 
+  IconSettings, 
+  IconMarkdown,
+  IconPdf,
+  IconScreenshot,
+} from '@tabler/icons-react';
 import {
-  FC,
   MutableRefObject,
   memo,
   useCallback,
+  useContext,
   useEffect,
   useRef,
   useState,
 } from 'react';
-import { Spinner } from '../Global/Spinner';
+import toast from 'react-hot-toast';
+
+import { useTranslation } from 'next-i18next';
+
+import { getEndpoint } from '@/utils/app/api';
+import {
+  saveConversation,
+  saveConversations,
+  updateConversation,
+} from '@/utils/app/conversation';
+import { throttle } from '@/utils/data/throttle';
+
+import { ChatBody, Conversation, Message } from '@/types/chat';
+import { Plugin } from '@/types/plugin';
+
+import HomeContext from '@/pages/api/home/home.context';
+
+import Spinner from '../Spinner';
 import { ChatInput } from './ChatInput';
 import { ChatLoader } from './ChatLoader';
-import { ChatMessage } from './ChatMessage';
 import { ErrorMessageDiv } from './ErrorMessageDiv';
 import { ModelSelect } from './ModelSelect';
 import { SystemPrompt } from './SystemPrompt';
+import { TemperatureSlider } from './Temperature';
+import { MemoizedChatMessage } from './MemoizedChatMessage';
+
+import {jsPDF} from "jspdf";
+import html2canvas from "html2canvas";
+
+import { toPng } from 'html-to-image';
 
 interface Props {
-  conversation: Conversation;
-  models: OpenAIModel[];
-  apiKey: string;
-  serverSideApiKeyIsSet: boolean;
-  defaultModelId: OpenAIModelID;
-  messageIsStreaming: boolean;
-  modelError: ErrorMessage | null;
-  loading: boolean;
-  prompts: Prompt[];
-  onSend: (
-    message: Message,
-    deleteCount: number,
-    plugin: Plugin | null,
-  ) => void;
-  onUpdateConversation: (
-    conversation: Conversation,
-    data: KeyValuePair,
-  ) => void;
-  onEditMessage: (message: Message, messageIndex: number) => void;
   stopConversationRef: MutableRefObject<boolean>;
 }
 
-export const Chat: FC<Props> = memo(
-  ({
-    conversation,
-    models,
-    apiKey,
-    serverSideApiKeyIsSet,
-    defaultModelId,
-    messageIsStreaming,
-    modelError,
-    loading,
-    prompts,
-    onSend,
-    onUpdateConversation,
-    onEditMessage,
-    stopConversationRef,
-  }) => {
-    const { t } = useTranslation('chat');
-    const [currentMessage, setCurrentMessage] = useState<Message>();
-    const [autoScrollEnabled, setAutoScrollEnabled] = useState<boolean>(true);
-    const [showSettings, setShowSettings] = useState<boolean>(false);
-    const [showScrollDownButton, setShowScrollDownButton] =
-      useState<boolean>(false);
+export const Chat = memo(({ stopConversationRef }: Props) => {
+  const { t } = useTranslation('chat');
 
-    const messagesEndRef = useRef<HTMLDivElement>(null);
-    const chatContainerRef = useRef<HTMLDivElement>(null);
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const {
+    state: {
+      selectedConversation,
+      conversations,
+      models,
+      apiKey,
+      pluginKeys,
+      serverSideApiKeyIsSet,
+      messageIsStreaming,
+      modelError,
+      loading,
+      prompts,
+    },
+    handleUpdateConversation,
+    dispatch: homeDispatch,
+  } = useContext(HomeContext);
 
-    const scrollToBottom = useCallback(() => {
-      if (autoScrollEnabled) {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-        textareaRef.current?.focus();
-      }
-    }, [autoScrollEnabled]);
+  const [currentMessage, setCurrentMessage] = useState<Message>();
+  const [autoScrollEnabled, setAutoScrollEnabled] = useState<boolean>(true);
+  const [showSettings, setShowSettings] = useState<boolean>(false);
+  const [showScrollDownButton, setShowScrollDownButton] =
+    useState<boolean>(false);
 
-    const handleScroll = () => {
-      if (chatContainerRef.current) {
-        const { scrollTop, scrollHeight, clientHeight } =
-          chatContainerRef.current;
-        const bottomTolerance = 30;
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const chatContainerRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-        if (scrollTop + clientHeight < scrollHeight - bottomTolerance) {
-          setAutoScrollEnabled(false);
-          setShowScrollDownButton(true);
-        } else {
-          setAutoScrollEnabled(true);
-          setShowScrollDownButton(false);
-        }
-      }
-    };
-
-    const handleScrollDown = () => {
-      chatContainerRef.current?.scrollTo({
-        top: chatContainerRef.current.scrollHeight,
-        behavior: 'smooth',
-      });
-    };
-
-    const handleSettings = () => {
-      setShowSettings(!showSettings);
-    };
-
-    const onClearAll = () => {
-      if (confirm(t<string>('Are you sure you want to clear all messages?'))) {
-        onUpdateConversation(conversation, { key: 'messages', value: [] });
-      }
-    };
-
-    const scrollDown = () => {
-      if (autoScrollEnabled) {
-        messagesEndRef.current?.scrollIntoView(true);
-      }
-    };
-    const throttledScrollDown = throttle(scrollDown, 250);
-
-    useEffect(() => {
-      throttledScrollDown();
-      setCurrentMessage(
-        conversation.messages[conversation.messages.length - 2],
-      );
-    }, [conversation.messages, throttledScrollDown]);
-
-    useEffect(() => {
-      const observer = new IntersectionObserver(
-        ([entry]) => {
-          setAutoScrollEnabled(entry.isIntersecting);
-          if (entry.isIntersecting) {
-            textareaRef.current?.focus();
+  const handleSend = useCallback(
+    async (message: Message, deleteCount = 0, plugin: Plugin | null = null) => {
+      if (selectedConversation) {
+        let updatedConversation: Conversation;
+        if (deleteCount) {
+          const updatedMessages = [...selectedConversation.messages];
+          for (let i = 0; i < deleteCount; i++) {
+            updatedMessages.pop();
           }
-        },
-        {
-          root: null,
-          threshold: 0.5,
-        },
-      );
-      const messagesEndElement = messagesEndRef.current;
-      if (messagesEndElement) {
-        observer.observe(messagesEndElement);
-      }
-      return () => {
-        if (messagesEndElement) {
-          observer.unobserve(messagesEndElement);
+          updatedConversation = {
+            ...selectedConversation,
+            messages: [...updatedMessages, message],
+          };
+        } else {
+          updatedConversation = {
+            ...selectedConversation,
+            messages: [...selectedConversation.messages, message],
+          };
         }
-      };
-    }, [messagesEndRef]);
+        homeDispatch({
+          field: 'selectedConversation',
+          value: updatedConversation,
+        });
+        homeDispatch({ field: 'loading', value: true });
+        homeDispatch({ field: 'messageIsStreaming', value: true });
+        const chatBody: ChatBody = {
+          model: updatedConversation.model,
+          messages: updatedConversation.messages,
+          key: apiKey,
+          prompt: updatedConversation.prompt,
+          temperature: updatedConversation.temperature,
+        };
+        const endpoint = getEndpoint(plugin);
+        let body;
+        if (!plugin) {
+          body = JSON.stringify(chatBody);
+        } else {
+          body = JSON.stringify({
+            ...chatBody,
+            googleAPIKey: pluginKeys
+              .find((key) => key.pluginId === 'google-search')
+              ?.requiredKeys.find((key) => key.key === 'GOOGLE_API_KEY')?.value,
+            googleCSEId: pluginKeys
+              .find((key) => key.pluginId === 'google-search')
+              ?.requiredKeys.find((key) => key.key === 'GOOGLE_CSE_ID')?.value,
+          });
+        }
+        const controller = new AbortController();
+        const response = await fetch(endpoint, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          signal: controller.signal,
+          body,
+        });
+        if (!response.ok) {
+          homeDispatch({ field: 'loading', value: false });
+          homeDispatch({ field: 'messageIsStreaming', value: false });
+          toast.error(response.statusText);
+          return;
+        }
+        const data = response.body;
+        if (!data) {
+          homeDispatch({ field: 'loading', value: false });
+          homeDispatch({ field: 'messageIsStreaming', value: false });
+          return;
+        }
+        if (!plugin) {
+          if (updatedConversation.messages.length === 1) {
+            const { content } = message;
+            const customName =
+              content.length > 30 ? content.substring(0, 30) + '...' : content;
+            updatedConversation = {
+              ...updatedConversation,
+              name: customName,
+            };
+          }
+          homeDispatch({ field: 'loading', value: false });
+          const reader = data.getReader();
+          const decoder = new TextDecoder();
+          let done = false;
+          let isFirst = true;
+          let text = '';
+          while (!done) {
+            if (stopConversationRef.current === true) {
+              controller.abort();
+              done = true;
+              break;
+            }
+            const { value, done: doneReading } = await reader.read();
+            done = doneReading;
+            const chunkValue = decoder.decode(value);
+            text += chunkValue;
+            if (isFirst) {
+              isFirst = false;
+              const updatedMessages: Message[] = [
+                ...updatedConversation.messages,
+                { role: 'assistant', content: chunkValue },
+              ];
+              updatedConversation = {
+                ...updatedConversation,
+                messages: updatedMessages,
+              };
+              homeDispatch({
+                field: 'selectedConversation',
+                value: updatedConversation,
+              });
+            } else {
+              const updatedMessages: Message[] =
+                updatedConversation.messages.map((message, index) => {
+                  if (index === updatedConversation.messages.length - 1) {
+                    return {
+                      ...message,
+                      content: text,
+                    };
+                  }
+                  return message;
+                });
+              updatedConversation = {
+                ...updatedConversation,
+                messages: updatedMessages,
+              };
+              homeDispatch({
+                field: 'selectedConversation',
+                value: updatedConversation,
+              });
+            }
+          }
+          saveConversation(updatedConversation);
+          const updatedConversations: Conversation[] = conversations.map(
+            (conversation) => {
+              if (conversation.id === selectedConversation.id) {
+                return updatedConversation;
+              }
+              return conversation;
+            },
+          );
+          if (updatedConversations.length === 0) {
+            updatedConversations.push(updatedConversation);
+          }
+          homeDispatch({ field: 'conversations', value: updatedConversations });
+          saveConversations(updatedConversations);
+          homeDispatch({ field: 'messageIsStreaming', value: false });
+        } else {
+          const { answer } = await response.json();
+          const updatedMessages: Message[] = [
+            ...updatedConversation.messages,
+            { role: 'assistant', content: answer },
+          ];
+          updatedConversation = {
+            ...updatedConversation,
+            messages: updatedMessages,
+          };
+          homeDispatch({
+            field: 'selectedConversation',
+            value: updateConversation,
+          });
+          saveConversation(updatedConversation);
+          const updatedConversations: Conversation[] = conversations.map(
+            (conversation) => {
+              if (conversation.id === selectedConversation.id) {
+                return updatedConversation;
+              }
+              return conversation;
+            },
+          );
+          if (updatedConversations.length === 0) {
+            updatedConversations.push(updatedConversation);
+          }
+          homeDispatch({ field: 'conversations', value: updatedConversations });
+          saveConversations(updatedConversations);
+          homeDispatch({ field: 'loading', value: false });
+          homeDispatch({ field: 'messageIsStreaming', value: false });
+        }
+      }
+    },
+    [
+      apiKey,
+      conversations,
+      pluginKeys,
+      selectedConversation,
+      stopConversationRef,
+    ],
+  );
 
-    return (
-      <div className="relative flex-1 overflow-hidden bg-white dark:bg-[#343541]">
-        {!(apiKey || serverSideApiKeyIsSet) ? (
-          <div className="mx-auto flex h-full w-[300px] flex-col justify-center space-y-6 sm:w-[600px]">
-            <div className="text-center text-4xl font-bold text-black dark:text-white">
-              Welcome to Chatbot UI
-            </div>
-            <div className="text-center text-lg text-black dark:text-white">
-              <div className="mb-8">{`Chatbot UI is an open source clone of OpenAI's ChatGPT UI.`}</div>
-              <div className="mb-2 font-bold">
-                Important: Chatbot UI is 100% unaffiliated with OpenAI.
-              </div>
-            </div>
-            <div className="text-center text-gray-500 dark:text-gray-400">
-              <div className="mb-2">
-                Chatbot UI allows you to plug in your API key to use this UI
-                with their API.
-              </div>
-              <div className="mb-2">
-                It is <span className="italic">only</span> used to communicate
-                with their API.
-              </div>
-              <div className="mb-2">
-                {t(
-                  'Please set your OpenAI API key in the bottom left of the sidebar.',
-                )}
-              </div>
-              <div>
-                {t(
-                  "If you don't have an OpenAI API key, you can get one here: ",
-                )}
-                <a
-                  href="https://platform.openai.com/account/api-keys"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-blue-500 hover:underline"
-                >
-                  openai.com
-                </a>
-              </div>
+  const scrollToBottom = useCallback(() => {
+    if (autoScrollEnabled) {
+      messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+      textareaRef.current?.focus();
+    }
+  }, [autoScrollEnabled]);
+
+  const handleScroll = () => {
+    if (chatContainerRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } =
+        chatContainerRef.current;
+      const bottomTolerance = 30;
+
+      if (scrollTop + clientHeight < scrollHeight - bottomTolerance) {
+        setAutoScrollEnabled(false);
+        setShowScrollDownButton(true);
+      } else {
+        setAutoScrollEnabled(true);
+        setShowScrollDownButton(false);
+      }
+    }
+  };
+
+  const handleScrollDown = () => {
+    chatContainerRef.current?.scrollTo({
+      top: chatContainerRef.current.scrollHeight,
+      behavior: 'smooth',
+    });
+  };
+
+  const handleSettings = () => {
+    setShowSettings(!showSettings);
+  };
+
+  const onClearAll = () => {
+    if (
+      confirm(t<string>('Are you sure you want to clear all messages?')) &&
+      selectedConversation
+    ) {
+      handleUpdateConversation(selectedConversation, {
+        key: 'messages',
+        value: [],
+      });
+    }
+  };
+
+  const onMarkdown = () => {
+    if (!selectedConversation){
+      return '';
+    }
+    let markdownContent = '';
+
+    selectedConversation.messages.forEach(obj => {
+      markdownContent += `## ${obj.role === "user" ? t('You') : t("AI")}\n\n${obj.content}\n\n`;
+    });
+
+    const date = new Date().toLocaleString("default", { year: "numeric", month: "long", day: "numeric" })
+    const time = new Date().toLocaleTimeString("default", {hour12: true, hour: "numeric", minute: "numeric"})
+
+    markdownContent += `---\n`
+    markdownContent += `${t("Exported on")} ` + date + ` ${t("at")} ` + time + ".";
+
+    const markdownFile = new Blob([markdownContent], { type: 'text/markdown' });
+    const downloadLink = document.createElement('a');
+
+    downloadLink.href = URL.createObjectURL(markdownFile);
+    downloadLink.download = `${selectedConversation?.name || 'conversation'}.md`;
+    downloadLink.click();
+  }
+
+  const onPdf = () => {
+    if (chatContainerRef.current === null) {
+      return;
+    }
+    else {
+      chatContainerRef.current.classList.remove('max-h-full')
+      html2canvas(chatContainerRef.current).then((canvas) => {
+        if (chatContainerRef.current) {
+          chatContainerRef.current.classList.add('max-h-full')
+        }
+        const imgData = canvas.toDataURL('image/png');
+        const orientation = canvas.width > canvas.height ? "l" : "p";
+        const pixelRatio = window.devicePixelRatio > 2 ? window.devicePixelRatio : 2
+        const pdf = new jsPDF(
+            orientation,
+            "pt",
+            [canvas.width / pixelRatio, canvas.height / pixelRatio],
+            true,
+        );
+        var pdfWidth = pdf.internal.pageSize.getWidth();
+        var pdfHeight = pdf.internal.pageSize.getHeight();
+        pdf.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight, "", "FAST");
+        const title = `${selectedConversation?.name || 'conversation'}.pdf`
+        pdf.save(title)
+      })
+    }
+  };
+
+  const onScreenshot = () => {
+    if (chatContainerRef.current === null) {
+      return;
+    }
+
+    chatContainerRef.current.classList.remove('max-h-full');
+    toPng(chatContainerRef.current, { cacheBust: true })
+      .then((dataUrl) => {
+        const link = document.createElement('a');
+        link.download = `${selectedConversation?.name || 'conversation'}.png`;
+        link.href = dataUrl;
+        link.click();
+        if (chatContainerRef.current) {
+          chatContainerRef.current.classList.add('max-h-full');
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const scrollDown = () => {
+    if (autoScrollEnabled) {
+      messagesEndRef.current?.scrollIntoView(true);
+    }
+  };
+  const throttledScrollDown = throttle(scrollDown, 250);
+
+  // useEffect(() => {
+  //   console.log('currentMessage', currentMessage);
+  //   if (currentMessage) {
+  //     handleSend(currentMessage);
+  //     homeDispatch({ field: 'currentMessage', value: undefined });
+  //   }
+  // }, [currentMessage]);
+
+  useEffect(() => {
+    throttledScrollDown();
+    selectedConversation &&
+      setCurrentMessage(
+        selectedConversation.messages[selectedConversation.messages.length - 2],
+      );
+  }, [selectedConversation, throttledScrollDown]);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setAutoScrollEnabled(entry.isIntersecting);
+        if (entry.isIntersecting) {
+          textareaRef.current?.focus();
+        }
+      },
+      {
+        root: null,
+        threshold: 0.5,
+      },
+    );
+    const messagesEndElement = messagesEndRef.current;
+    if (messagesEndElement) {
+      observer.observe(messagesEndElement);
+    }
+    return () => {
+      if (messagesEndElement) {
+        observer.unobserve(messagesEndElement);
+      }
+    };
+  }, [messagesEndRef]);
+
+  return (
+    <div className="relative flex-1 overflow-hidden bg-white dark:bg-[#343541]">
+      {!(apiKey || serverSideApiKeyIsSet) ? (
+        <div className="mx-auto flex h-full w-[300px] flex-col justify-center space-y-6 sm:w-[600px]">
+          <div className="text-center text-4xl font-bold text-black dark:text-white">
+            Welcome to Chatbot UI
+          </div>
+          <div className="text-center text-lg text-black dark:text-white">
+            <div className="mb-8">{`Chatbot UI is an open source clone of OpenAI's ChatGPT UI.`}</div>
+            <div className="mb-2 font-bold">
+              Important: Chatbot UI is 100% unaffiliated with OpenAI.
             </div>
           </div>
-        ) : modelError ? (
-          <ErrorMessageDiv error={modelError} />
-        ) : (
-          <>
-            <div
-              className="max-h-full overflow-x-hidden"
-              ref={chatContainerRef}
-              onScroll={handleScroll}
-            >
-              {conversation.messages.length === 0 ? (
-                <>
-                  <div className="mx-auto flex w-[350px] flex-col space-y-10 pt-12 sm:w-[600px]">
-                    <div className="text-center text-3xl font-semibold text-gray-800 dark:text-gray-100">
-                      {models.length === 0 ? (
-                        <div>
-                          <Spinner size="16px" className="mx-auto" />
-                        </div>
-                      ) : (
-                        'Chatbot UI'
-                      )}
-                    </div>
-
-                    {models.length > 0 && (
-                      <div className="flex h-full flex-col space-y-4 rounded-lg border border-neutral-200 p-4 dark:border-neutral-600">
-                        <ModelSelect
-                          model={conversation.model}
-                          models={models}
-                          defaultModelId={defaultModelId}
-                          onModelChange={(model) =>
-                            onUpdateConversation(conversation, {
-                              key: 'model',
-                              value: model,
-                            })
-                          }
-                        />
-
-                        <SystemPrompt
-                          conversation={conversation}
-                          prompts={prompts}
-                          onChangePrompt={(prompt) =>
-                            onUpdateConversation(conversation, {
-                              key: 'prompt',
-                              value: prompt,
-                            })
-                          }
-                        />
-                      </div>
-                    )}
-                  </div>
-                </>
-              ) : (
-                <>
-                  <div className="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">
-                    {t('Model')}: {conversation.model.name}
-                    <button
-                      className="ml-2 cursor-pointer hover:opacity-50"
-                      onClick={handleSettings}
-                    >
-                      <IconSettings size={18} />
-                    </button>
-                    <button
-                      className="ml-2 cursor-pointer hover:opacity-50"
-                      onClick={onClearAll}
-                    >
-                      <IconClearAll size={18} />
-                    </button>
-                  </div>
-                  {showSettings && (
-                    <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">
-                      <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">
-                        <ModelSelect
-                          model={conversation.model}
-                          models={models}
-                          defaultModelId={defaultModelId}
-                          onModelChange={(model) =>
-                            onUpdateConversation(conversation, {
-                              key: 'model',
-                              value: model,
-                            })
-                          }
-                        />
-                      </div>
-                    </div>
-                  )}
-
-                  {conversation.messages.map((message, index) => (
-                    <ChatMessage
-                      key={index}
-                      message={message}
-                      messageIndex={index}
-                      onEditMessage={onEditMessage}
-                    />
-                  ))}
-
-                  {loading && <ChatLoader />}
-
-                  <div
-                    className="h-[162px] bg-white dark:bg-[#343541]"
-                    ref={messagesEndRef}
-                  />
-                </>
+          <div className="text-center text-gray-500 dark:text-gray-400">
+            <div className="mb-2">
+              Chatbot UI allows you to plug in your API key to use this UI with
+              their API.
+            </div>
+            <div className="mb-2">
+              It is <span className="italic">only</span> used to communicate
+              with their API.
+            </div>
+            <div className="mb-2">
+              {t(
+                'Please set your OpenAI API key in the bottom left of the sidebar.',
               )}
             </div>
-
-            <ChatInput
-              stopConversationRef={stopConversationRef}
-              textareaRef={textareaRef}
-              messageIsStreaming={messageIsStreaming}
-              conversationIsEmpty={conversation.messages.length === 0}
-              model={conversation.model}
-              prompts={prompts}
-              onSend={(message, plugin) => {
-                setCurrentMessage(message);
-                onSend(message, 0, plugin);
-              }}
-              onRegenerate={() => {
-                if (currentMessage) {
-                  onSend(currentMessage, 2, null);
-                }
-              }}
-            />
-          </>
-        )}
-        {showScrollDownButton && (
-          <div className="absolute bottom-0 right-0 mb-4 mr-4 pb-20">
-            <button
-              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"
-              onClick={handleScrollDown}
-            >
-              <IconArrowDown size={18} />
-            </button>
+            <div>
+              {t("If you don't have an OpenAI API key, you can get one here: ")}
+              <a
+                href="https://platform.openai.com/account/api-keys"
+                target="_blank"
+                rel="noreferrer"
+                className="text-blue-500 hover:underline"
+              >
+                openai.com
+              </a>
+            </div>
           </div>
-        )}
-      </div>
-    );
-  },
-);
+        </div>
+      ) : modelError ? (
+        <ErrorMessageDiv error={modelError} />
+      ) : (
+        <>
+          <div
+            className="max-h-full overflow-x-hidden"
+            ref={chatContainerRef}
+            onScroll={handleScroll}
+          >
+            {selectedConversation?.messages.length === 0 ? (
+              <>
+                <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]">
+                  <div className="text-center text-3xl font-semibold text-gray-800 dark:text-gray-100">
+                    {models.length === 0 ? (
+                      <div>
+                        <Spinner size="16px" className="mx-auto" />
+                      </div>
+                    ) : (
+                      'Chatbot UI'
+                    )}
+                  </div>
+
+                  {models.length > 0 && (
+                    <div className="flex h-full flex-col space-y-4 rounded-lg border border-neutral-200 p-4 dark:border-neutral-600">
+                      <ModelSelect />
+
+                      <SystemPrompt
+                        conversation={selectedConversation}
+                        prompts={prompts}
+                        onChangePrompt={(prompt) =>
+                          handleUpdateConversation(selectedConversation, {
+                            key: 'prompt',
+                            value: prompt,
+                          })
+                        }
+                      />
+
+                      <TemperatureSlider
+                        label={t('Temperature')}
+                        onChangeTemperature={(temperature) =>
+                          handleUpdateConversation(selectedConversation, {
+                            key: 'temperature',
+                            value: temperature,
+                          })
+                        }
+                      />
+                    </div>
+                  )}
+                </div>
+              </>
+            ) : (
+              <>
+                <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">
+                  {t('Model')}: {selectedConversation?.model.name} | {t('Temp')}
+                  : {selectedConversation?.temperature} |
+                  <button
+                    className="ml-2 cursor-pointer hover:opacity-50"
+                    onClick={handleSettings}
+                  >
+                    <IconSettings size={18} />
+                  </button>
+                  <button
+                    className="ml-2 cursor-pointer hover:opacity-50"
+                    onClick={onClearAll}
+                  >
+                    <IconClearAll size={18} />
+                  </button>
+                  <button
+                      className="ml-2 cursor-pointer hover:opacity-50"
+                      onClick={onMarkdown}
+                  >
+                    <IconMarkdown size={18} />
+                  </button>
+                  <button
+                      className="ml-2 cursor-pointer hover:opacity-50"
+                      onClick={onPdf}
+                  >
+                    <IconPdf size={18} />
+                  </button>
+                  <button
+                    className="ml-2 cursor-pointer hover:opacity-50"
+                    onClick={onScreenshot}
+                  >
+                    <IconScreenshot size={18} />
+                  </button>
+                </div>
+                {showSettings && (
+                  <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">
+                    <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">
+                      <ModelSelect />
+                    </div>
+                  </div>
+                )}
+
+                {selectedConversation?.messages.map((message, index) => (
+                  <MemoizedChatMessage
+                    key={index}
+                    message={message}
+                    messageIndex={index}
+                    onEdit={(editedMessage) => {
+                      setCurrentMessage(editedMessage);
+                      // discard edited message and the ones that come after then resend
+                      handleSend(
+                        editedMessage,
+                        selectedConversation?.messages.length - index,
+                      );
+                    }}
+                  />
+                ))}
+
+                {loading && <ChatLoader />}
+
+                <div
+                  className="h-[162px] bg-white dark:bg-[#343541]"
+                  ref={messagesEndRef}
+                />
+              </>
+            )}
+          </div>
+
+          <ChatInput
+            stopConversationRef={stopConversationRef}
+            textareaRef={textareaRef}
+            onSend={(message, plugin) => {
+              setCurrentMessage(message);
+              handleSend(message, 0, plugin);
+            }}
+            onScrollDownClick={handleScrollDown}
+            onRegenerate={() => {
+              if (currentMessage) {
+                handleSend(currentMessage, 2, null);
+              }
+            }}
+            showScrollDownButton={showScrollDownButton}
+          />
+        </>
+      )}
+    </div>
+  );
+});
 Chat.displayName = 'Chat';

components/Chat/ChatInput.tsx

@@ -1,51 +1,58 @@
-import { Message } from '@/types/chat';
-import { OpenAIModel } from '@/types/openai';
-import { Plugin } from '@/types/plugin';
-import { Prompt } from '@/types/prompt';
 import {
+  IconArrowDown,
   IconBolt,
   IconBrandGoogle,
   IconPlayerStop,
   IconRepeat,
   IconSend,
 } from '@tabler/icons-react';
-import { useTranslation } from 'next-i18next';
 import {
-  FC,
   KeyboardEvent,
   MutableRefObject,
   useCallback,
+  useContext,
   useEffect,
   useRef,
   useState,
 } from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+import { Message } from '@/types/chat';
+import { Plugin } from '@/types/plugin';
+import { Prompt } from '@/types/prompt';
+
+import HomeContext from '@/pages/api/home/home.context';
+
 import { PluginSelect } from './PluginSelect';
 import { PromptList } from './PromptList';
 import { VariableModal } from './VariableModal';
 
 interface Props {
-  messageIsStreaming: boolean;
-  model: OpenAIModel;
-  conversationIsEmpty: boolean;
-  prompts: Prompt[];
   onSend: (message: Message, plugin: Plugin | null) => void;
   onRegenerate: () => void;
+  onScrollDownClick: () => void;
   stopConversationRef: MutableRefObject<boolean>;
   textareaRef: MutableRefObject<HTMLTextAreaElement | null>;
+  showScrollDownButton: boolean;
 }
 
-export const ChatInput: FC<Props> = ({
-  messageIsStreaming,
-  model,
-  conversationIsEmpty,
-  prompts,
+export const ChatInput = ({
   onSend,
   onRegenerate,
+  onScrollDownClick,
   stopConversationRef,
   textareaRef,
-}) => {
+  showScrollDownButton,
+}: Props) => {
   const { t } = useTranslation('chat');
 
+  const {
+    state: { selectedConversation, messageIsStreaming, prompts },
+
+    dispatch: homeDispatch,
+  } = useContext(HomeContext);
+
   const [content, setContent] = useState<string>();
   const [isTyping, setIsTyping] = useState<boolean>(false);
   const [showPromptList, setShowPromptList] = useState(false);
@@ -64,9 +71,9 @@ export const ChatInput: FC<Props> = ({
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const value = e.target.value;
-    const maxLength = model.maxLength;
+    const maxLength = selectedConversation?.model.maxLength;
 
-    if (value.length > maxLength) {
+    if (maxLength && value.length > maxLength) {
       alert(
         t(
           `Message limit is {{maxLength}} characters. You have entered {{valueLength}} characters.`,
@@ -261,14 +268,16 @@ export const ChatInput: FC<Props> = ({
           </button>
         )}
 
-        {!messageIsStreaming && !conversationIsEmpty && (
-          <button
-            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"
-            onClick={onRegenerate}
-          >
-            <IconRepeat size={16} /> {t('Regenerate response')}
-          </button>
-        )}
+        {!messageIsStreaming &&
+          selectedConversation &&
+          selectedConversation.messages.length > 0 && (
+            <button
+              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"
+              onClick={onRegenerate}
+            >
+              <IconRepeat size={16} /> {t('Regenerate response')}
+            </button>
+          )}
 
         <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">
           <button
@@ -280,9 +289,16 @@ export const ChatInput: FC<Props> = ({
           </button>
 
           {showPluginSelect && (
-            <div className="absolute left-0 bottom-14 bg-white dark:bg-[#343541]">
+            <div className="absolute left-0 bottom-14 rounded bg-white dark:bg-[#343541]">
               <PluginSelect
                 plugin={plugin}
+                onKeyDown={(e: any) => {
+                  if (e.key === 'Escape') {
+                    e.preventDefault();
+                    setShowPluginSelect(false);
+                    textareaRef.current?.focus();
+                  }
+                }}
                 onPluginChange={(plugin: Plugin) => {
                   setPlugin(plugin);
                   setShowPluginSelect(false);
@@ -330,6 +346,17 @@ export const ChatInput: FC<Props> = ({
             )}
           </button>
 
+          {showScrollDownButton && (
+            <div className="absolute bottom-12 right-0 lg:bottom-0 lg:-right-10">
+              <button
+                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"
+                onClick={onScrollDownClick}
+              >
+                <IconArrowDown size={18} />
+              </button>
+            </div>
+          )}
+
           {showPromptList && filteredPrompts.length > 0 && (
             <div className="absolute bottom-12 w-full">
               <PromptList
@@ -344,7 +371,7 @@ export const ChatInput: FC<Props> = ({
 
           {isModalVisible && (
             <VariableModal
-              prompt={prompts[activePromptIndex]}
+              prompt={filteredPrompts[activePromptIndex]}
               variables={variables}
               onSubmit={handleSubmit}
               onClose={() => setIsModalVisible(false)}

components/Chat/ChatLoader.tsx

@@ -1,7 +1,7 @@
-import { IconDots } from '@tabler/icons-react';
+import { IconRobot } from '@tabler/icons-react';
 import { FC } from 'react';
 
-interface Props {}
+interface Props { }
 
 export const ChatLoader: FC<Props> = () => {
   return (
@@ -10,8 +10,10 @@ export const ChatLoader: FC<Props> = () => {
       style={{ overflowWrap: 'anywhere' }}
     >
       <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">
-        <div className="min-w-[40px] text-right font-bold">AI:</div>
-        <IconDots className="animate-pulse" />
+        <div className="min-w-[40px] items-end">
+          <IconRobot size={30} />
+        </div>
+        <span className="animate-pulse cursor-default mt-1">▍</span>
       </div>
     </div>
   );

components/Chat/ChatMessage.tsx

@@ -1,227 +1,291 @@
-import { Message } from '@/types/chat';
-import { IconCheck, IconCopy, IconEdit, IconUser, IconRobot } from '@tabler/icons-react';
+import {
+  IconCheck,
+  IconCopy,
+  IconEdit,
+  IconRobot,
+  IconTrash,
+  IconUser,
+} from '@tabler/icons-react';
+import { FC, memo, useContext, useEffect, useRef, useState } from 'react';
+
 import { useTranslation } from 'next-i18next';
-import { FC, memo, useEffect, useRef, useState } from 'react';
-import rehypeMathjax from 'rehype-mathjax';
-import remarkGfm from 'remark-gfm';
-import remarkMath from 'remark-math';
+
+import { updateConversation } from '@/utils/app/conversation';
+
+import { Message } from '@/types/chat';
+
+import HomeContext from '@/pages/api/home/home.context';
+
 import { CodeBlock } from '../Markdown/CodeBlock';
 import { MemoizedReactMarkdown } from '../Markdown/MemoizedReactMarkdown';
 
-interface Props {
+import rehypeMathjax from 'rehype-mathjax';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+
+export interface Props {
   message: Message;
   messageIndex: number;
-  onEditMessage: (message: Message, messageIndex: number) => void;
+  onEdit?: (editedMessage: Message) => void
 }
 
-export const ChatMessage: FC<Props> = memo(
-  ({ message, messageIndex, onEditMessage }) => {
-    const { t } = useTranslation('chat');
-    const [isEditing, setIsEditing] = useState<boolean>(false);
-    const [isTyping, setIsTyping] = useState<boolean>(false);
-    const [messageContent, setMessageContent] = useState(message.content);
-    const [messagedCopied, setMessageCopied] = useState(false);
+export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) => {
+  const { t } = useTranslation('chat');
 
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const {
+    state: { selectedConversation, conversations, currentMessage, messageIsStreaming },
+    dispatch: homeDispatch,
+  } = useContext(HomeContext);
 
-    const toggleEditing = () => {
-      setIsEditing(!isEditing);
-    };
+  const [isEditing, setIsEditing] = useState<boolean>(false);
+  const [isTyping, setIsTyping] = useState<boolean>(false);
+  const [messageContent, setMessageContent] = useState(message.content);
+  const [messagedCopied, setMessageCopied] = useState(false);
 
-    const handleInputChange = (
-      event: React.ChangeEvent<HTMLTextAreaElement>,
-    ) => {
-      setMessageContent(event.target.value);
-      if (textareaRef.current) {
-        textareaRef.current.style.height = 'inherit';
-        textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const toggleEditing = () => {
+    setIsEditing(!isEditing);
+  };
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setMessageContent(event.target.value);
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'inherit';
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+    }
+  };
+
+  const handleEditMessage = () => {
+    if (message.content != messageContent) {
+      if (selectedConversation && onEdit) {
+        onEdit({ ...message, content: messageContent });
       }
+    }
+    setIsEditing(false);
+  };
+
+  const handleDeleteMessage = () => {
+    if (!selectedConversation) return;
+
+    const { messages } = selectedConversation;
+    const findIndex = messages.findIndex((elm) => elm === message);
+
+    if (findIndex < 0) return;
+
+    if (
+      findIndex < messages.length - 1 &&
+      messages[findIndex + 1].role === 'assistant'
+    ) {
+      messages.splice(findIndex, 2);
+    } else {
+      messages.splice(findIndex, 1);
+    }
+    const updatedConversation = {
+      ...selectedConversation,
+      messages,
     };
 
-    const handleEditMessage = () => {
-      if (message.content != messageContent) {
-        onEditMessage({ ...message, content: messageContent }, messageIndex);
-      }
-      setIsEditing(false);
-    };
+    const { single, all } = updateConversation(
+      updatedConversation,
+      conversations,
+    );
+    homeDispatch({ field: 'selectedConversation', value: single });
+    homeDispatch({ field: 'conversations', value: all });
+  };
 
-    const handlePressEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      if (e.key === 'Enter' && !isTyping && !e.shiftKey) {
-        e.preventDefault();
-        handleEditMessage();
-      }
-    };
+  const handlePressEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !isTyping && !e.shiftKey) {
+      e.preventDefault();
+      handleEditMessage();
+    }
+  };
 
-    const copyOnClick = () => {
-      if (!navigator.clipboard) return;
+  const copyOnClick = () => {
+    if (!navigator.clipboard) return;
 
-      navigator.clipboard.writeText(message.content).then(() => {
-        setMessageCopied(true);
-        setTimeout(() => {
-          setMessageCopied(false);
-        }, 2000);
-      });
-    };
+    navigator.clipboard.writeText(message.content).then(() => {
+      setMessageCopied(true);
+      setTimeout(() => {
+        setMessageCopied(false);
+      }, 2000);
+    });
+  };
 
-    useEffect(() => {
-      if (textareaRef.current) {
-        textareaRef.current.style.height = 'inherit';
-        textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
-      }
-    }, [isEditing]);
+  useEffect(() => {
+    setMessageContent(message.content);
+  }, [message.content]);
 
-    return (
-      <div
-        className={`group px-4 ${
-          message.role === 'assistant'
-            ? 'border-b border-black/10 bg-gray-50 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100'
-            : 'border-b border-black/10 bg-white text-gray-800 dark:border-gray-900/50 dark:bg-[#343541] dark:text-gray-100'
-        }`}
-        style={{ overflowWrap: 'anywhere' }}
-      >
-        <div className="relative 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">
-          <div className="min-w-[40px] text-right font-bold">
-            {message.role === 'assistant' ? <IconRobot size={30}/> : <IconUser size={30}/>}
-          </div>
 
-          <div className="prose mt-[-2px] w-full dark:prose-invert">
-            {message.role === 'user' ? (
-              <div className="flex w-full">
-                {isEditing ? (
-                  <div className="flex w-full flex-col">
-                    <textarea
-                      ref={textareaRef}
-                      className="w-full resize-none whitespace-pre-wrap border-none dark:bg-[#343541]"
-                      value={messageContent}
-                      onChange={handleInputChange}
-                      onKeyDown={handlePressEnter}
-                      onCompositionStart={() => setIsTyping(true)}
-                      onCompositionEnd={() => setIsTyping(false)}
-                      style={{
-                        fontFamily: 'inherit',
-                        fontSize: 'inherit',
-                        lineHeight: 'inherit',
-                        padding: '0',
-                        margin: '0',
-                        overflow: 'hidden',
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'inherit';
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+    }
+  }, [isEditing]);
+
+  return (
+    <div
+      className={`group md:px-4 ${
+        message.role === 'assistant'
+          ? 'border-b border-black/10 bg-gray-50 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100'
+          : 'border-b border-black/10 bg-white text-gray-800 dark:border-gray-900/50 dark:bg-[#343541] dark:text-gray-100'
+      }`}
+      style={{ overflowWrap: 'anywhere' }}
+    >
+      <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">
+        <div className="min-w-[40px] text-right font-bold">
+          {message.role === 'assistant' ? (
+            <IconRobot size={30} />
+          ) : (
+            <IconUser size={30} />
+          )}
+        </div>
+
+        <div className="prose mt-[-2px] w-full dark:prose-invert">
+          {message.role === 'user' ? (
+            <div className="flex w-full">
+              {isEditing ? (
+                <div className="flex w-full flex-col">
+                  <textarea
+                    ref={textareaRef}
+                    className="w-full resize-none whitespace-pre-wrap border-none dark:bg-[#343541]"
+                    value={messageContent}
+                    onChange={handleInputChange}
+                    onKeyDown={handlePressEnter}
+                    onCompositionStart={() => setIsTyping(true)}
+                    onCompositionEnd={() => setIsTyping(false)}
+                    style={{
+                      fontFamily: 'inherit',
+                      fontSize: 'inherit',
+                      lineHeight: 'inherit',
+                      padding: '0',
+                      margin: '0',
+                      overflow: 'hidden',
+                    }}
+                  />
+
+                  <div className="mt-10 flex justify-center space-x-4">
+                    <button
+                      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"
+                      onClick={handleEditMessage}
+                      disabled={messageContent.trim().length <= 0}
+                    >
+                      {t('Save & Submit')}
+                    </button>
+                    <button
+                      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"
+                      onClick={() => {
+                        setMessageContent(message.content);
+                        setIsEditing(false);
                       }}
-                    />
-
-                    <div className="mt-10 flex justify-center space-x-4">
-                      <button
-                        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"
-                        onClick={handleEditMessage}
-                        disabled={messageContent.trim().length <= 0}
-                      >
-                        {t('Save & Submit')}
-                      </button>
-                      <button
-                        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"
-                        onClick={() => {
-                          setMessageContent(message.content);
-                          setIsEditing(false);
-                        }}
-                      >
-                        {t('Cancel')}
-                      </button>
-                    </div>
+                    >
+                      {t('Cancel')}
+                    </button>
                   </div>
-                ) : (
-                  <div className="prose whitespace-pre-wrap dark:prose-invert">
-                    {message.content}
-                  </div>
-                )}
+                </div>
+              ) : (
+                <div className="prose whitespace-pre-wrap dark:prose-invert flex-1">
+                  {message.content}
+                </div>
+              )}
 
-                {(window.innerWidth < 640 || !isEditing) && (
+              {!isEditing && (
+                <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">
                   <button
-                    className={`absolute translate-x-[1000px] text-gray-500 hover:text-gray-700 focus:translate-x-0 group-hover:translate-x-0 dark:text-gray-400 dark:hover:text-gray-300 ${
-                      window.innerWidth < 640
-                        ? 'right-3 bottom-1'
-                        : 'right-0 top-[26px]'
-                    }
-                    `}
+                    className="invisible group-hover:visible focus:visible text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
                     onClick={toggleEditing}
                   >
                     <IconEdit size={20} />
                   </button>
+                  <button
+                    className="invisible group-hover:visible focus:visible text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+                    onClick={handleDeleteMessage}
+                  >
+                    <IconTrash size={20} />
+                  </button>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="flex flex-row">
+              <MemoizedReactMarkdown
+                className="prose dark:prose-invert flex-1"
+                remarkPlugins={[remarkGfm, remarkMath]}
+                rehypePlugins={[rehypeMathjax]}
+                components={{
+                  code({ node, inline, className, children, ...props }) {
+                    if (children.length) {
+                      if (children[0] == '▍') {
+                        return <span className="animate-pulse cursor-default mt-1">▍</span>
+                      }
+
+                      children[0] = (children[0] as string).replace("`▍`", "▍")
+                    }
+
+                    const match = /language-(\w+)/.exec(className || '');
+
+                    return !inline ? (
+                      <CodeBlock
+                        key={Math.random()}
+                        language={(match && match[1]) || ''}
+                        value={String(children).replace(/\n$/, '')}
+                        {...props}
+                      />
+                    ) : (
+                      <code className={className} {...props}>
+                        {children}
+                      </code>
+                    );
+                  },
+                  table({ children }) {
+                    return (
+                      <table className="border-collapse border border-black px-3 py-1 dark:border-white">
+                        {children}
+                      </table>
+                    );
+                  },
+                  th({ children }) {
+                    return (
+                      <th className="break-words border border-black bg-gray-500 px-3 py-1 text-white dark:border-white">
+                        {children}
+                      </th>
+                    );
+                  },
+                  td({ children }) {
+                    return (
+                      <td className="break-words border border-black px-3 py-1 dark:border-white">
+                        {children}
+                      </td>
+                    );
+                  },
+                }}
+              >
+                {`${message.content}${
+                  messageIsStreaming && messageIndex == (selectedConversation?.messages.length ?? 0) - 1 ? '`▍`' : ''
+                }`}
+              </MemoizedReactMarkdown>
+
+              <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">
+                {messagedCopied ? (
+                  <IconCheck
+                    size={20}
+                    className="text-green-500 dark:text-green-400"
+                  />
+                ) : (
+                  <button
+                    className="invisible group-hover:visible focus:visible text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+                    onClick={copyOnClick}
+                  >
+                    <IconCopy size={20} />
+                  </button>
                 )}
               </div>
-            ) : (
-              <>
-                <div
-                  className={`absolute ${
-                    window.innerWidth < 640
-                      ? 'right-3 bottom-1'
-                      : 'right-0 top-[26px] m-0'
-                  }`}
-                >
-                  {messagedCopied ? (
-                    <IconCheck
-                      size={20}
-                      className="text-green-500 dark:text-green-400"
-                    />
-                  ) : (
-                    <button
-                      className="translate-x-[1000px] text-gray-500 hover:text-gray-700 focus:translate-x-0 group-hover:translate-x-0 dark:text-gray-400 dark:hover:text-gray-300"
-                      onClick={copyOnClick}
-                    >
-                      <IconCopy size={20} />
-                    </button>
-                  )}
-                </div>
-
-                <MemoizedReactMarkdown
-                  className="prose dark:prose-invert"
-                  remarkPlugins={[remarkGfm, remarkMath]}
-                  rehypePlugins={[rehypeMathjax]}
-                  components={{
-                    code({ node, inline, className, children, ...props }) {
-                      const match = /language-(\w+)/.exec(className || '');
-
-                      return !inline && match ? (
-                        <CodeBlock
-                          key={Math.random()}
-                          language={match[1]}
-                          value={String(children).replace(/\n$/, '')}
-                          {...props}
-                        />
-                      ) : (
-                        <code className={className} {...props}>
-                          {children}
-                        </code>
-                      );
-                    },
-                    table({ children }) {
-                      return (
-                        <table className="border-collapse border border-black py-1 px-3 dark:border-white">
-                          {children}
-                        </table>
-                      );
-                    },
-                    th({ children }) {
-                      return (
-                        <th className="break-words border border-black bg-gray-500 py-1 px-3 text-white dark:border-white">
-                          {children}
-                        </th>
-                      );
-                    },
-                    td({ children }) {
-                      return (
-                        <td className="break-words border border-black py-1 px-3 dark:border-white">
-                          {children}
-                        </td>
-                      );
-                    },
-                  }}
-                >
-                  {message.content}
-                </MemoizedReactMarkdown>
-              </>
-            )}
-          </div>
+            </div>
+          )}
         </div>
       </div>
-    );
-  },
-);
+    </div>
+  );
+});
 ChatMessage.displayName = 'ChatMessage';

components/Chat/ErrorMessageDiv.tsx

@@ -1,7 +1,8 @@
-import { ErrorMessage } from '@/types/error';
 import { IconCircleX } from '@tabler/icons-react';
 import { FC } from 'react';
 
+import { ErrorMessage } from '@/types/error';
+
 interface Props {
   error: ErrorMessage;
 }

components/Chat/MemoizedChatMessage.tsx

@@ -0,0 +1,9 @@
+import { FC, memo } from "react";
+import { ChatMessage, Props } from "./ChatMessage";
+
+export const MemoizedChatMessage: FC<Props> = memo(
+    ChatMessage,
+    (prevProps, nextProps) => (
+        prevProps.message.content === nextProps.message.content
+    )
+);

components/Chat/ModelSelect.tsx

@@ -1,23 +1,31 @@
-import { OpenAIModel, OpenAIModelID } from '@/types/openai';
-import { useTranslation } from 'next-i18next';
 import { IconExternalLink } from '@tabler/icons-react';
-import { FC } from 'react';
+import { useContext } from 'react';
 
-interface Props {
-  model: OpenAIModel;
-  models: OpenAIModel[];
-  defaultModelId: OpenAIModelID;
-  onModelChange: (model: OpenAIModel) => void;
-}
+import { useTranslation } from 'next-i18next';
 
-export const ModelSelect: FC<Props> = ({
-  model,
-  models,
-  defaultModelId,
-  onModelChange,
-}) => {
+import { OpenAIModel } from '@/types/openai';
+
+import HomeContext from '@/pages/api/home/home.context';
+
+export const ModelSelect = () => {
   const { t } = useTranslation('chat');
 
+  const {
+    state: { selectedConversation, models, defaultModelId },
+    handleUpdateConversation,
+    dispatch: homeDispatch,
+  } = useContext(HomeContext);
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    selectedConversation &&
+      handleUpdateConversation(selectedConversation, {
+        key: 'model',
+        value: models.find(
+          (model) => model.id === e.target.value,
+        ) as OpenAIModel,
+      });
+  };
+
   return (
     <div className="flex flex-col">
       <label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
@@ -27,14 +35,8 @@ export const ModelSelect: FC<Props> = ({
         <select
           className="w-full bg-transparent p-2"
           placeholder={t('Select a model') || ''}
-          value={model?.id || defaultModelId}
-          onChange={(e) => {
-            onModelChange(
-              models.find(
-                (model) => model.id === e.target.value,
-              ) as OpenAIModel,
-            );
-          }}
+          value={selectedConversation?.model?.id || defaultModelId}
+          onChange={handleChange}
         >
           {models.map((model) => (
             <option
@@ -50,8 +52,12 @@ export const ModelSelect: FC<Props> = ({
         </select>
       </div>
       <div className="w-full mt-3 text-left text-neutral-700 dark:text-neutral-400 flex items-center">
-        <a href="https://platform.openai.com/account/usage" target="_blank" className="flex items-center">
-          <IconExternalLink size={18} className={"inline mr-1"} />
+        <a
+          href="https://platform.openai.com/account/usage"
+          target="_blank"
+          className="flex items-center"
+        >
+          <IconExternalLink size={18} className={'inline mr-1'} />
           {t('View Account Usage')}
         </a>
       </div>

components/Chat/PluginSelect.tsx

@@ -1,17 +1,59 @@
-import { Plugin, PluginList } from '@/types/plugin';
-import { useTranslation } from 'next-i18next';
 import { FC, useEffect, useRef } from 'react';
 
+import { useTranslation } from 'next-i18next';
+
+import { Plugin, PluginList } from '@/types/plugin';
+
 interface Props {
   plugin: Plugin | null;
   onPluginChange: (plugin: Plugin) => void;
+  onKeyDown: (e: React.KeyboardEvent<HTMLSelectElement>) => void;
 }
 
-export const PluginSelect: FC<Props> = ({ plugin, onPluginChange }) => {
+export const PluginSelect: FC<Props> = ({
+  plugin,
+  onPluginChange,
+  onKeyDown,
+}) => {
   const { t } = useTranslation('chat');
 
   const selectRef = useRef<HTMLSelectElement>(null);
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLSelectElement>) => {
+    const selectElement = selectRef.current;
+    const optionCount = selectElement?.options.length || 0;
+
+    if (e.key === '/' && e.metaKey) {
+      e.preventDefault();
+      if (selectElement) {
+        selectElement.selectedIndex =
+          (selectElement.selectedIndex + 1) % optionCount;
+        selectElement.dispatchEvent(new Event('change'));
+      }
+    } else if (e.key === '/' && e.shiftKey && e.metaKey) {
+      e.preventDefault();
+      if (selectElement) {
+        selectElement.selectedIndex =
+          (selectElement.selectedIndex - 1 + optionCount) % optionCount;
+        selectElement.dispatchEvent(new Event('change'));
+      }
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      if (selectElement) {
+        selectElement.dispatchEvent(new Event('change'));
+      }
+
+      onPluginChange(
+        PluginList.find(
+          (plugin) =>
+            plugin.name === selectElement?.selectedOptions[0].innerText,
+        ) as Plugin,
+      );
+    } else {
+      onKeyDown(e);
+    }
+  };
+
   useEffect(() => {
     if (selectRef.current) {
       selectRef.current.focus();
@@ -20,7 +62,7 @@ export const PluginSelect: FC<Props> = ({ plugin, onPluginChange }) => {
 
   return (
     <div className="flex flex-col">
-      <div className="w-full rounded-lg border border-neutral-200 bg-transparent pr-2 text-neutral-900 dark:border-neutral-600 dark:text-white">
+      <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">
         <select
           ref={selectRef}
           className="w-full cursor-pointer bg-transparent p-2"
@@ -33,13 +75,16 @@ export const PluginSelect: FC<Props> = ({ plugin, onPluginChange }) => {
               ) as Plugin,
             );
           }}
+          onKeyDown={(e) => {
+            handleKeyDown(e);
+          }}
         >
           <option
-            key="none"
-            value=""
+            key="chatgpt"
+            value="chatgpt"
             className="dark:bg-[#343541] dark:text-white"
           >
-            Select Plugin
+            ChatGPT
           </option>
 
           {PluginList.map((plugin) => (

components/Chat/PromptList.tsx

@@ -1,6 +1,7 @@
-import { Prompt } from '@/types/prompt';
 import { FC, MutableRefObject } from 'react';
 
+import { Prompt } from '@/types/prompt';
+
 interface Props {
   prompts: Prompt[];
   activePromptIndex: number;

components/Chat/Regenerate.tsx

@@ -1,7 +1,8 @@
 import { IconRefresh } from '@tabler/icons-react';
-import { useTranslation } from 'next-i18next';
 import { FC } from 'react';
 
+import { useTranslation } from 'next-i18next';
+
 interface Props {
   onRegenerate: () => void;
 }

components/Chat/SystemPrompt.tsx

@@ -1,8 +1,3 @@
-import { Conversation } from '@/types/chat';
-import { OpenAIModelID } from '@/types/openai';
-import { Prompt } from '@/types/prompt';
-import { DEFAULT_SYSTEM_PROMPT } from '@/utils/app/const';
-import { useTranslation } from 'next-i18next';
 import {
   FC,
   KeyboardEvent,
@@ -11,6 +6,14 @@ import {
   useRef,
   useState,
 } from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+import { DEFAULT_SYSTEM_PROMPT } from '@/utils/app/const';
+
+import { Conversation } from '@/types/chat';
+import { Prompt } from '@/types/prompt';
+
 import { PromptList } from './PromptList';
 import { VariableModal } from './VariableModal';
 

components/Chat/Temperature.tsx

@@ -0,0 +1,67 @@
+import { FC, useContext, useState } from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+import { DEFAULT_TEMPERATURE } from '@/utils/app/const';
+
+import HomeContext from '@/pages/api/home/home.context';
+
+interface Props {
+  label: string;
+  onChangeTemperature: (temperature: number) => void;
+}
+
+export const TemperatureSlider: FC<Props> = ({
+  label,
+  onChangeTemperature,
+}) => {
+  const {
+    state: { conversations },
+  } = useContext(HomeContext);
+  const lastConversation = conversations[conversations.length - 1];
+  const [temperature, setTemperature] = useState(
+    lastConversation?.temperature ?? DEFAULT_TEMPERATURE,
+  );
+  const { t } = useTranslation('chat');
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = parseFloat(event.target.value);
+    setTemperature(newValue);
+    onChangeTemperature(newValue);
+  };
+
+  return (
+    <div className="flex flex-col">
+      <label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
+        {label}
+      </label>
+      <span className="text-[12px] text-black/50 dark:text-white/50 text-sm">
+        {t(
+          'Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic.',
+        )}
+      </span>
+      <span className="mt-2 mb-1 text-center text-neutral-900 dark:text-neutral-100">
+        {temperature.toFixed(1)}
+      </span>
+      <input
+        className="cursor-pointer"
+        type="range"
+        min={0}
+        max={1}
+        step={0.1}
+        value={temperature}
+        onChange={handleChange}
+      />
+      <ul className="w mt-2 pb-8 flex justify-between px-[24px] text-neutral-900 dark:text-neutral-100">
+        <li className="flex justify-center">
+          <span className="absolute">{t('Precise')}</span>
+        </li>
+        <li className="flex justify-center">
+          <span className="absolute">{t('Neutral')}</span>
+        </li>
+        <li className="flex justify-center">
+          <span className="absolute">{t('Creative')}</span>
+        </li>
+      </ul>
+    </div>
+  );
+};

components/Chat/VariableModal.tsx

@@ -1,6 +1,7 @@
-import { Prompt } from '@/types/prompt';
 import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
 
+import { Prompt } from '@/types/prompt';
+
 interface Props {
   prompt: Prompt;
   variables: string[];
@@ -82,7 +83,7 @@ export const VariableModal: FC<Props> = ({
     >
       <div
         ref={modalRef}
-        className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-hidden 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"
+        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"
         role="dialog"
       >
         <div className="mb-4 text-xl font-bold text-black dark:text-neutral-200">

components/Chatbar/Chatbar.context.tsx

@@ -0,0 +1,25 @@
+import { Dispatch, createContext } from 'react';
+
+import { ActionType } from '@/hooks/useCreateReducer';
+
+import { Conversation } from '@/types/chat';
+import { SupportedExportFormats } from '@/types/export';
+import { PluginKey } from '@/types/plugin';
+
+import { ChatbarInitialState } from './Chatbar.state';
+
+export interface ChatbarContextProps {
+  state: ChatbarInitialState;
+  dispatch: Dispatch<ActionType<ChatbarInitialState>>;
+  handleDeleteConversation: (conversation: Conversation) => void;
+  handleClearConversations: () => void;
+  handleExportData: () => void;
+  handleImportConversations: (data: SupportedExportFormats) => void;
+  handlePluginKeyChange: (pluginKey: PluginKey) => void;
+  handleClearPluginKey: (pluginKey: PluginKey) => void;
+  handleApiKeyChange: (apiKey: string) => void;
+}
+
+const ChatbarContext = createContext<ChatbarContextProps>(undefined!);
+
+export default ChatbarContext;

components/Chatbar/Chatbar.state.tsx

@@ -0,0 +1,11 @@
+import { Conversation } from '@/types/chat';
+
+export interface ChatbarInitialState {
+  searchTerm: string;
+  filteredConversations: Conversation[];
+}
+
+export const initialState: ChatbarInitialState = {
+  searchTerm: '',
+  filteredConversations: [],
+};

components/Chatbar/Chatbar.tsx

@@ -1,213 +1,241 @@
-import { Conversation } from '@/types/chat';
-import { KeyValuePair } from '@/types/data';
-import { SupportedExportFormats } from '@/types/export';
-import { Folder } from '@/types/folder';
-import { PluginKey } from '@/types/plugin';
-import { IconFolderPlus, IconMessagesOff, IconPlus } from '@tabler/icons-react';
+import { useCallback, useContext, useEffect } from 'react';
+
 import { useTranslation } from 'next-i18next';
-import { FC, useEffect, useState } from 'react';
-import { ChatFolders } from '../Folders/Chat/ChatFolders';
-import { Search } from '../Sidebar/Search';
-import { ChatbarSettings } from './ChatbarSettings';
-import { Conversations } from './Conversations';
 
-interface Props {
-  loading: boolean;
-  conversations: Conversation[];
-  lightMode: 'light' | 'dark';
-  selectedConversation: Conversation;
-  apiKey: string;
-  pluginKeys: PluginKey[];
-  folders: Folder[];
-  onCreateFolder: (name: string) => void;
-  onDeleteFolder: (folderId: string) => void;
-  onUpdateFolder: (folderId: string, name: string) => void;
-  onNewConversation: () => void;
-  onToggleLightMode: (mode: 'light' | 'dark') => void;
-  onSelectConversation: (conversation: Conversation) => void;
-  onDeleteConversation: (conversation: Conversation) => void;
-  onUpdateConversation: (
-    conversation: Conversation,
-    data: KeyValuePair,
-  ) => void;
-  onApiKeyChange: (apiKey: string) => void;
-  onClearConversations: () => void;
-  onExportConversations: () => void;
-  onImportConversations: (data: SupportedExportFormats) => void;
-  onPluginKeyChange: (pluginKey: PluginKey) => void;
-  onClearPluginKey: (pluginKey: PluginKey) => void;
-}
+import { useCreateReducer } from '@/hooks/useCreateReducer';
 
-export const Chatbar: FC<Props> = ({
-  loading,
-  conversations,
-  lightMode,
-  selectedConversation,
-  apiKey,
-  pluginKeys,
-  folders,
-  onCreateFolder,
-  onDeleteFolder,
-  onUpdateFolder,
-  onNewConversation,
-  onToggleLightMode,
-  onSelectConversation,
-  onDeleteConversation,
-  onUpdateConversation,
-  onApiKeyChange,
-  onClearConversations,
-  onExportConversations,
-  onImportConversations,
-  onPluginKeyChange,
-  onClearPluginKey,
-}) => {
+import { DEFAULT_SYSTEM_PROMPT, DEFAULT_TEMPERATURE } from '@/utils/app/const';
+import { saveConversation, saveConversations } from '@/utils/app/conversation';
+import { saveFolders } from '@/utils/app/folders';
+import { exportData, importData } from '@/utils/app/importExport';
+
+import { Conversation } from '@/types/chat';
+import { LatestExportFormat, SupportedExportFormats } from '@/types/export';
+import { OpenAIModels } from '@/types/openai';
+import { PluginKey } from '@/types/plugin';
+
+import HomeContext from '@/pages/api/home/home.context';
+
+import { ChatFolders } from './components/ChatFolders';
+import { ChatbarSettings } from './components/ChatbarSettings';
+import { Conversations } from './components/Conversations';
+
+import Sidebar from '../Sidebar';
+import ChatbarContext from './Chatbar.context';
+import { ChatbarInitialState, initialState } from './Chatbar.state';
+
+import { v4 as uuidv4 } from 'uuid';
+
+export const Chatbar = () => {
   const { t } = useTranslation('sidebar');
-  const [searchTerm, setSearchTerm] = useState<string>('');
-  const [filteredConversations, setFilteredConversations] =
-    useState<Conversation[]>(conversations);
 
-  const handleUpdateConversation = (
-    conversation: Conversation,
-    data: KeyValuePair,
-  ) => {
-    onUpdateConversation(conversation, data);
-    setSearchTerm('');
+  const chatBarContextValue = useCreateReducer<ChatbarInitialState>({
+    initialState,
+  });
+
+  const {
+    state: { conversations, showChatbar, defaultModelId, folders, pluginKeys },
+    dispatch: homeDispatch,
+    handleCreateFolder,
+    handleNewConversation,
+    handleUpdateConversation,
+  } = useContext(HomeContext);
+
+  const {
+    state: { searchTerm, filteredConversations },
+    dispatch: chatDispatch,
+  } = chatBarContextValue;
+
+  const handleApiKeyChange = useCallback(
+    (apiKey: string) => {
+      homeDispatch({ field: 'apiKey', value: apiKey });
+
+      localStorage.setItem('apiKey', apiKey);
+    },
+    [homeDispatch],
+  );
+
+  const handlePluginKeyChange = (pluginKey: PluginKey) => {
+    if (pluginKeys.some((key) => key.pluginId === pluginKey.pluginId)) {
+      const updatedPluginKeys = pluginKeys.map((key) => {
+        if (key.pluginId === pluginKey.pluginId) {
+          return pluginKey;
+        }
+
+        return key;
+      });
+
+      homeDispatch({ field: 'pluginKeys', value: updatedPluginKeys });
+
+      localStorage.setItem('pluginKeys', JSON.stringify(updatedPluginKeys));
+    } else {
+      homeDispatch({ field: 'pluginKeys', value: [...pluginKeys, pluginKey] });
+
+      localStorage.setItem(
+        'pluginKeys',
+        JSON.stringify([...pluginKeys, pluginKey]),
+      );
+    }
+  };
+
+  const handleClearPluginKey = (pluginKey: PluginKey) => {
+    const updatedPluginKeys = pluginKeys.filter(
+      (key) => key.pluginId !== pluginKey.pluginId,
+    );
+
+    if (updatedPluginKeys.length === 0) {
+      homeDispatch({ field: 'pluginKeys', value: [] });
+      localStorage.removeItem('pluginKeys');
+      return;
+    }
+
+    homeDispatch({ field: 'pluginKeys', value: updatedPluginKeys });
+
+    localStorage.setItem('pluginKeys', JSON.stringify(updatedPluginKeys));
+  };
+
+  const handleExportData = () => {
+    exportData();
+  };
+
+  const handleImportConversations = (data: SupportedExportFormats) => {
+    const { history, folders, prompts }: LatestExportFormat = importData(data);
+    homeDispatch({ field: 'conversations', value: history });
+    homeDispatch({
+      field: 'selectedConversation',
+      value: history[history.length - 1],
+    });
+    homeDispatch({ field: 'folders', value: folders });
+    homeDispatch({ field: 'prompts', value: prompts });
+
+    window.location.reload();
+  };
+
+  const handleClearConversations = () => {
+    defaultModelId &&
+      homeDispatch({
+        field: 'selectedConversation',
+        value: {
+          id: uuidv4(),
+          name: t('New Conversation'),
+          messages: [],
+          model: OpenAIModels[defaultModelId],
+          prompt: DEFAULT_SYSTEM_PROMPT,
+          temperature: DEFAULT_TEMPERATURE,
+          folderId: null,
+        },
+      });
+
+    homeDispatch({ field: 'conversations', value: [] });
+
+    localStorage.removeItem('conversationHistory');
+    localStorage.removeItem('selectedConversation');
+
+    const updatedFolders = folders.filter((f) => f.type !== 'chat');
+
+    homeDispatch({ field: 'folders', value: updatedFolders });
+    saveFolders(updatedFolders);
   };
 
   const handleDeleteConversation = (conversation: Conversation) => {
-    onDeleteConversation(conversation);
-    setSearchTerm('');
+    const updatedConversations = conversations.filter(
+      (c) => c.id !== conversation.id,
+    );
+
+    homeDispatch({ field: 'conversations', value: updatedConversations });
+    chatDispatch({ field: 'searchTerm', value: '' });
+    saveConversations(updatedConversations);
+
+    if (updatedConversations.length > 0) {
+      homeDispatch({
+        field: 'selectedConversation',
+        value: updatedConversations[updatedConversations.length - 1],
+      });
+
+      saveConversation(updatedConversations[updatedConversations.length - 1]);
+    } else {
+      defaultModelId &&
+        homeDispatch({
+          field: 'selectedConversation',
+          value: {
+            id: uuidv4(),
+            name: t('New Conversation'),
+            messages: [],
+            model: OpenAIModels[defaultModelId],
+            prompt: DEFAULT_SYSTEM_PROMPT,
+            temperature: DEFAULT_TEMPERATURE,
+            folderId: null,
+          },
+        });
+
+      localStorage.removeItem('selectedConversation');
+    }
+  };
+
+  const handleToggleChatbar = () => {
+    homeDispatch({ field: 'showChatbar', value: !showChatbar });
+    localStorage.setItem('showChatbar', JSON.stringify(!showChatbar));
   };
 
   const handleDrop = (e: any) => {
     if (e.dataTransfer) {
       const conversation = JSON.parse(e.dataTransfer.getData('conversation'));
-      onUpdateConversation(conversation, { key: 'folderId', value: 0 });
-
+      handleUpdateConversation(conversation, { key: 'folderId', value: 0 });
+      chatDispatch({ field: 'searchTerm', value: '' });
       e.target.style.background = 'none';
     }
   };
 
-  const allowDrop = (e: any) => {
-    e.preventDefault();
-  };
-
-  const highlightDrop = (e: any) => {
-    e.target.style.background = '#343541';
-  };
-
-  const removeHighlight = (e: any) => {
-    e.target.style.background = 'none';
-  };
-
   useEffect(() => {
     if (searchTerm) {
-      setFilteredConversations(
-        conversations.filter((conversation) => {
+      chatDispatch({
+        field: 'filteredConversations',
+        value: conversations.filter((conversation) => {
           const searchable =
             conversation.name.toLocaleLowerCase() +
             ' ' +
             conversation.messages.map((message) => message.content).join(' ');
           return searchable.toLowerCase().includes(searchTerm.toLowerCase());
         }),
-      );
+      });
     } else {
-      setFilteredConversations(conversations);
+      chatDispatch({
+        field: 'filteredConversations',
+        value: conversations,
+      });
     }
   }, [searchTerm, conversations]);
 
   return (
-    <div
-      className={`fixed top-0 bottom-0 z-50 flex h-full w-[260px] flex-none flex-col space-y-2 bg-[#202123] p-2 transition-all sm:relative sm:top-0`}
+    <ChatbarContext.Provider
+      value={{
+        ...chatBarContextValue,
+        handleDeleteConversation,
+        handleClearConversations,
+        handleImportConversations,
+        handleExportData,
+        handlePluginKeyChange,
+        handleClearPluginKey,
+        handleApiKeyChange,
+      }}
     >
-      <div className="flex items-center">
-        <button
-          className="flex w-[190px] flex-shrink-0 cursor-pointer select-none items-center gap-3 rounded-md border border-white/20 p-3 text-[14px] leading-normal text-white transition-colors duration-200 hover:bg-gray-500/10"
-          onClick={() => {
-            onNewConversation();
-            setSearchTerm('');
-          }}
-        >
-          <IconPlus size={18} />
-          {t('New chat')}
-        </button>
-
-        <button
-          className="ml-2 flex flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 p-3 text-[14px] leading-normal text-white transition-colors duration-200 hover:bg-gray-500/10"
-          onClick={() => onCreateFolder(t('New folder'))}
-        >
-          <IconFolderPlus size={18} />
-        </button>
-      </div>
-
-      {conversations.length > 1 && (
-        <Search
-          placeholder="Search conversations..."
-          searchTerm={searchTerm}
-          onSearch={setSearchTerm}
-        />
-      )}
-
-      <div className="flex-grow overflow-auto">
-        {folders.length > 0 && (
-          <div className="flex border-b border-white/20 pb-2">
-            <ChatFolders
-              searchTerm={searchTerm}
-              conversations={filteredConversations.filter(
-                (conversation) => conversation.folderId,
-              )}
-              folders={folders}
-              onDeleteFolder={onDeleteFolder}
-              onUpdateFolder={onUpdateFolder}
-              selectedConversation={selectedConversation}
-              loading={loading}
-              onSelectConversation={onSelectConversation}
-              onDeleteConversation={handleDeleteConversation}
-              onUpdateConversation={handleUpdateConversation}
-            />
-          </div>
-        )}
-
-        {conversations.length > 0 ? (
-          <div
-            className="pt-2"
-            onDrop={(e) => handleDrop(e)}
-            onDragOver={allowDrop}
-            onDragEnter={highlightDrop}
-            onDragLeave={removeHighlight}
-          >
-            <Conversations
-              loading={loading}
-              conversations={filteredConversations.filter(
-                (conversation) => !conversation.folderId,
-              )}
-              selectedConversation={selectedConversation}
-              onSelectConversation={onSelectConversation}
-              onDeleteConversation={handleDeleteConversation}
-              onUpdateConversation={handleUpdateConversation}
-            />
-          </div>
-        ) : (
-          <div className="mt-8 flex flex-col items-center gap-3 text-sm leading-normal text-white opacity-50">
-            <IconMessagesOff />
-            {t('No conversations.')}
-          </div>
-        )}
-      </div>
-
-      <ChatbarSettings
-        lightMode={lightMode}
-        apiKey={apiKey}
-        pluginKeys={pluginKeys}
-        conversationsCount={conversations.length}
-        onToggleLightMode={onToggleLightMode}
-        onApiKeyChange={onApiKeyChange}
-        onClearConversations={onClearConversations}
-        onExportConversations={onExportConversations}
-        onImportConversations={onImportConversations}
-        onPluginKeyChange={onPluginKeyChange}
-        onClearPluginKey={onClearPluginKey}
+      <Sidebar<Conversation>
+        side={'left'}
+        isOpen={showChatbar}
+        addItemButtonTitle={t('New chat')}
+        itemComponent={<Conversations conversations={filteredConversations} />}
+        folderComponent={<ChatFolders searchTerm={searchTerm} />}
+        items={filteredConversations}
+        searchTerm={searchTerm}
+        handleSearchTerm={(searchTerm: string) =>
+          chatDispatch({ field: 'searchTerm', value: searchTerm })
+        }
+        toggleOpen={handleToggleChatbar}
+        handleCreateItem={handleNewConversation}
+        handleCreateFolder={() => handleCreateFolder(t('New folder'), 'chat')}
+        handleDrop={handleDrop}
+        footerComponent={<ChatbarSettings />}
       />
-    </div>
+    </ChatbarContext.Provider>
   );
 };

components/Chatbar/ChatbarSettings.tsx

@@ -1,74 +0,0 @@
-import { SupportedExportFormats } from '@/types/export';
-import { PluginKey } from '@/types/plugin';
-import { IconFileExport, IconMoon, IconSun } from '@tabler/icons-react';
-import { useTranslation } from 'next-i18next';
-import { FC } from 'react';
-import { Import } from '../Settings/Import';
-import { Key } from '../Settings/Key';
-import { SidebarButton } from '../Sidebar/SidebarButton';
-import { ClearConversations } from './ClearConversations';
-import { PluginKeys } from './PluginKeys';
-
-interface Props {
-  lightMode: 'light' | 'dark';
-  apiKey: string;
-  pluginKeys: PluginKey[];
-  conversationsCount: number;
-  onToggleLightMode: (mode: 'light' | 'dark') => void;
-  onApiKeyChange: (apiKey: string) => void;
-  onClearConversations: () => void;
-  onExportConversations: () => void;
-  onImportConversations: (data: SupportedExportFormats) => void;
-  onPluginKeyChange: (pluginKey: PluginKey) => void;
-  onClearPluginKey: (pluginKey: PluginKey) => void;
-}
-
-export const ChatbarSettings: FC<Props> = ({
-  lightMode,
-  apiKey,
-  pluginKeys,
-  conversationsCount,
-  onToggleLightMode,
-  onApiKeyChange,
-  onClearConversations,
-  onExportConversations,
-  onImportConversations,
-  onPluginKeyChange,
-  onClearPluginKey,
-}) => {
-  const { t } = useTranslation('sidebar');
-
-  return (
-    <div className="flex flex-col items-center space-y-1 border-t border-white/20 pt-1 text-sm">
-      {conversationsCount > 0 ? (
-        <ClearConversations onClearConversations={onClearConversations} />
-      ) : null}
-
-      <Import onImport={onImportConversations} />
-
-      <SidebarButton
-        text={t('Export data')}
-        icon={<IconFileExport size={18} />}
-        onClick={() => onExportConversations()}
-      />
-
-      <SidebarButton
-        text={lightMode === 'light' ? t('Dark mode') : t('Light mode')}
-        icon={
-          lightMode === 'light' ? <IconMoon size={18} /> : <IconSun size={18} />
-        }
-        onClick={() =>
-          onToggleLightMode(lightMode === 'light' ? 'dark' : 'light')
-        }
-      />
-
-      <Key apiKey={apiKey} onApiKeyChange={onApiKeyChange} />
-
-      <PluginKeys
-        pluginKeys={pluginKeys}
-        onPluginKeyChange={onPluginKeyChange}
-        onClearPluginKey={onClearPluginKey}
-      />
-    </div>
-  );
-};

components/Chatbar/Conversation.tsx

@@ -1,163 +0,0 @@
-import { Conversation } from '@/types/chat';
-import { KeyValuePair } from '@/types/data';
-import {
-  IconCheck,
-  IconMessage,
-  IconPencil,
-  IconTrash,
-  IconX,
-} from '@tabler/icons-react';
-import { DragEvent, FC, KeyboardEvent, useEffect, useState } from 'react';
-
-interface Props {
-  selectedConversation: Conversation;
-  conversation: Conversation;
-  loading: boolean;
-  onSelectConversation: (conversation: Conversation) => void;
-  onDeleteConversation: (conversation: Conversation) => void;
-  onUpdateConversation: (
-    conversation: Conversation,
-    data: KeyValuePair,
-  ) => void;
-}
-
-export const ConversationComponent: FC<Props> = ({
-  selectedConversation,
-  conversation,
-  loading,
-  onSelectConversation,
-  onDeleteConversation,
-  onUpdateConversation,
-}) => {
-  const [isDeleting, setIsDeleting] = useState(false);
-  const [isRenaming, setIsRenaming] = useState(false);
-  const [renameValue, setRenameValue] = useState('');
-
-  const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      handleRename(selectedConversation);
-    }
-  };
-
-  const handleDragStart = (
-    e: DragEvent<HTMLButtonElement>,
-    conversation: Conversation,
-  ) => {
-    if (e.dataTransfer) {
-      e.dataTransfer.setData('conversation', JSON.stringify(conversation));
-    }
-  };
-
-  const handleRename = (conversation: Conversation) => {
-    if (renameValue.trim().length > 0) {
-      onUpdateConversation(conversation, { key: 'name', value: renameValue });
-      setRenameValue('');
-      setIsRenaming(false);
-    }
-  };
-
-  useEffect(() => {
-    if (isRenaming) {
-      setIsDeleting(false);
-    } else if (isDeleting) {
-      setIsRenaming(false);
-    }
-  }, [isRenaming, isDeleting]);
-
-  return (
-    <div className="relative flex items-center">
-      {isRenaming && selectedConversation.id === conversation.id ? (
-        <div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3 rounded-lg">
-          <IconMessage size={18} />
-          <input
-            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"
-            type="text"
-            value={renameValue}
-            onChange={(e) => setRenameValue(e.target.value)}
-            onKeyDown={handleEnterDown}
-            autoFocus
-          />
-        </div>
-      ) : (
-        <button
-          className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90 ${
-            loading ? 'disabled:cursor-not-allowed' : ''
-          } ${
-            selectedConversation.id === conversation.id ? 'bg-[#343541]/90' : ''
-          }`}
-          onClick={() => onSelectConversation(conversation)}
-          disabled={loading}
-          draggable="true"
-          onDragStart={(e) => handleDragStart(e, conversation)}
-        >
-          <IconMessage size={18} />
-          <div
-            className={`relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3 ${
-              selectedConversation.id === conversation.id ? 'pr-12' : 'pr-1'
-            }`}
-          >
-            {conversation.name}
-          </div>
-        </button>
-      )}
-
-      {(isDeleting || isRenaming) &&
-        selectedConversation.id === conversation.id && (
-          <div className="absolute right-1 z-10 flex text-gray-300">
-            <button
-              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
-              onClick={(e) => {
-                e.stopPropagation();
-                if (isDeleting) {
-                  onDeleteConversation(conversation);
-                } else if (isRenaming) {
-                  handleRename(conversation);
-                }
-                setIsDeleting(false);
-                setIsRenaming(false);
-              }}
-            >
-              <IconCheck size={18} />
-            </button>
-            <button
-              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
-              onClick={(e) => {
-                e.stopPropagation();
-                setIsDeleting(false);
-                setIsRenaming(false);
-              }}
-            >
-              <IconX size={18} />
-            </button>
-          </div>
-        )}
-
-      {selectedConversation.id === conversation.id &&
-        !isDeleting &&
-        !isRenaming && (
-          <div className="absolute right-1 z-10 flex text-gray-300">
-            <button
-              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
-              onClick={(e) => {
-                e.stopPropagation();
-                setIsRenaming(true);
-                setRenameValue(selectedConversation.name);
-              }}
-            >
-              <IconPencil size={18} />
-            </button>
-            <button
-              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
-              onClick={(e) => {
-                e.stopPropagation();
-                setIsDeleting(true);
-              }}
-            >
-              <IconTrash size={18} />
-            </button>
-          </div>
-        )}
-    </div>
-  );
-};

components/Chatbar/Conversations.tsx

@@ -1,44 +0,0 @@
-import { Conversation } from '@/types/chat';
-import { KeyValuePair } from '@/types/data';
-import { FC } from 'react';
-import { ConversationComponent } from './Conversation';
-
-interface Props {
-  loading: boolean;
-  conversations: Conversation[];
-  selectedConversation: Conversation;
-  onSelectConversation: (conversation: Conversation) => void;
-  onDeleteConversation: (conversation: Conversation) => void;
-  onUpdateConversation: (
-    conversation: Conversation,
-    data: KeyValuePair,
-  ) => void;
-}
-
-export const Conversations: FC<Props> = ({
-  loading,
-  conversations,
-  selectedConversation,
-  onSelectConversation,
-  onDeleteConversation,
-  onUpdateConversation,
-}) => {
-  return (
-    <div className="flex w-full flex-col gap-1">
-      {conversations
-        .slice()
-        .reverse()
-        .map((conversation, index) => (
-          <ConversationComponent
-            key={index}
-            selectedConversation={selectedConversation}
-            conversation={conversation}
-            loading={loading}
-            onSelectConversation={onSelectConversation}
-            onDeleteConversation={onDeleteConversation}
-            onUpdateConversation={onUpdateConversation}
-          />
-        ))}
-    </div>
-  );
-};

components/Chatbar/components/ChatFolders.tsx

@@ -0,0 +1,64 @@
+import { useContext } from 'react';
+
+import { FolderInterface } from '@/types/folder';
+
+import HomeContext from '@/pages/api/home/home.context';
+
+import Folder from '@/components/Folder';
+
+import { ConversationComponent } from './Conversation';
+
+interface Props {
+  searchTerm: string;
+}
+
+export const ChatFolders = ({ searchTerm }: Props) => {
+  const {
+    state: { folders, conversations },
+    handleUpdateConversation,
+  } = useContext(HomeContext);
+
+  const handleDrop = (e: any, folder: FolderInterface) => {
+    if (e.dataTransfer) {
+      const conversation = JSON.parse(e.dataTransfer.getData('conversation'));
+      handleUpdateConversation(conversation, {
+        key: 'folderId',
+        value: folder.id,
+      });
+    }
+  };
+
+  const ChatFolders = (currentFolder: FolderInterface) => {
+    return (
+      conversations &&
+      conversations
+        .filter((conversation) => conversation.folderId)
+        .map((conversation, index) => {
+          if (conversation.folderId === currentFolder.id) {
+            return (
+              <div key={index} className="ml-5 gap-2 border-l pl-2">
+                <ConversationComponent conversation={conversation} />
+              </div>
+            );
+          }
+        })
+    );
+  };
+
+  return (
+    <div className="flex w-full flex-col pt-2">
+      {folders
+        .filter((folder) => folder.type === 'chat')
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .map((folder, index) => (
+          <Folder
+            key={index}
+            searchTerm={searchTerm}
+            currentFolder={folder}
+            handleDrop={handleDrop}
+            folderComponent={ChatFolders(folder)}
+          />
+        ))}
+    </div>
+  );
+};

components/Chatbar/components/ChatbarSettings.tsx

@@ -0,0 +1,73 @@
+import { IconFileExport, IconSettings } from '@tabler/icons-react';
+import { useContext, useState } from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+import HomeContext from '@/pages/api/home/home.context';
+
+import { SettingDialog } from '@/components/Settings/SettingDialog';
+
+import { Import } from '../../Settings/Import';
+import { Key } from '../../Settings/Key';
+import { SidebarButton } from '../../Sidebar/SidebarButton';
+import ChatbarContext from '../Chatbar.context';
+import { ClearConversations } from './ClearConversations';
+import { PluginKeys } from './PluginKeys';
+
+export const ChatbarSettings = () => {
+  const { t } = useTranslation('sidebar');
+  const [isSettingDialogOpen, setIsSettingDialog] = useState<boolean>(false);
+
+  const {
+    state: {
+      apiKey,
+      lightMode,
+      serverSideApiKeyIsSet,
+      serverSidePluginKeysSet,
+      conversations,
+    },
+    dispatch: homeDispatch,
+  } = useContext(HomeContext);
+
+  const {
+    handleClearConversations,
+    handleImportConversations,
+    handleExportData,
+    handleApiKeyChange,
+  } = useContext(ChatbarContext);
+
+  return (
+    <div className="flex flex-col items-center space-y-1 border-t border-white/20 pt-1 text-sm">
+      {conversations.length > 0 ? (
+        <ClearConversations onClearConversations={handleClearConversations} />
+      ) : null}
+
+      <Import onImport={handleImportConversations} />
+
+      <SidebarButton
+        text={t('Export data')}
+        icon={<IconFileExport size={18} />}
+        onClick={() => handleExportData()}
+      />
+
+      <SidebarButton
+        text={t('Settings')}
+        icon={<IconSettings size={18} />}
+        onClick={() => setIsSettingDialog(true)}
+      />
+
+      {!serverSideApiKeyIsSet ? (
+        <Key apiKey={apiKey} onApiKeyChange={handleApiKeyChange} />
+      ) : null}
+
+      {!serverSidePluginKeysSet ? <PluginKeys /> : null}
+
+      <SettingDialog
+        open={isSettingDialogOpen}
+        onClose={() => {
+          setIsSettingDialog(false);
+        }}
+      />
+    </div>
+  );
+};

components/Chatbar/components/ClearConversations.tsx

@@ -1,7 +1,9 @@
 import { IconCheck, IconTrash, IconX } from '@tabler/icons-react';
-import { useTranslation } from 'next-i18next';
 import { FC, useState } from 'react';
-import { SidebarButton } from '../Sidebar/SidebarButton';
+
+import { useTranslation } from 'next-i18next';
+
+import { SidebarButton } from '@/components/Sidebar/SidebarButton';
 
 interface Props {
   onClearConversations: () => void;
@@ -27,7 +29,7 @@ export const ClearConversations: FC<Props> = ({ onClearConversations }) => {
 
       <div className="flex w-[40px]">
         <IconCheck
-          className="ml-auto min-w-[20px] mr-1 text-neutral-400 hover:text-neutral-100"
+          className="ml-auto mr-1 min-w-[20px] text-neutral-400 hover:text-neutral-100"
           size={18}
           onClick={(e) => {
             e.stopPropagation();

components/Chatbar/components/Conversation.tsx

@@ -0,0 +1,168 @@
+import {
+  IconCheck,
+  IconMessage,
+  IconPencil,
+  IconTrash,
+  IconX,
+} from '@tabler/icons-react';
+import {
+  DragEvent,
+  KeyboardEvent,
+  MouseEventHandler,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+
+import { Conversation } from '@/types/chat';
+
+import HomeContext from '@/pages/api/home/home.context';
+
+import SidebarActionButton from '@/components/Buttons/SidebarActionButton';
+import ChatbarContext from '@/components/Chatbar/Chatbar.context';
+
+interface Props {
+  conversation: Conversation;
+}
+
+export const ConversationComponent = ({ conversation }: Props) => {
+  const {
+    state: { selectedConversation, messageIsStreaming },
+    handleSelectConversation,
+    handleUpdateConversation,
+  } = useContext(HomeContext);
+
+  const { handleDeleteConversation } = useContext(ChatbarContext);
+
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [renameValue, setRenameValue] = useState('');
+
+  const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      selectedConversation && handleRename(selectedConversation);
+    }
+  };
+
+  const handleDragStart = (
+    e: DragEvent<HTMLButtonElement>,
+    conversation: Conversation,
+  ) => {
+    if (e.dataTransfer) {
+      e.dataTransfer.setData('conversation', JSON.stringify(conversation));
+    }
+  };
+
+  const handleRename = (conversation: Conversation) => {
+    if (renameValue.trim().length > 0) {
+      handleUpdateConversation(conversation, {
+        key: 'name',
+        value: renameValue,
+      });
+      setRenameValue('');
+      setIsRenaming(false);
+    }
+  };
+
+  const handleConfirm: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+    if (isDeleting) {
+      handleDeleteConversation(conversation);
+    } else if (isRenaming) {
+      handleRename(conversation);
+    }
+    setIsDeleting(false);
+    setIsRenaming(false);
+  };
+
+  const handleCancel: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+    setIsDeleting(false);
+    setIsRenaming(false);
+  };
+
+  const handleOpenRenameModal: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+    setIsRenaming(true);
+    selectedConversation && setRenameValue(selectedConversation.name);
+  };
+  const handleOpenDeleteModal: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+    setIsDeleting(true);
+  };
+
+  useEffect(() => {
+    if (isRenaming) {
+      setIsDeleting(false);
+    } else if (isDeleting) {
+      setIsRenaming(false);
+    }
+  }, [isRenaming, isDeleting]);
+
+  return (
+    <div className="relative flex items-center">
+      {isRenaming && selectedConversation?.id === conversation.id ? (
+        <div className="flex w-full items-center gap-3 rounded-lg bg-[#343541]/90 p-3">
+          <IconMessage size={18} />
+          <input
+            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"
+            type="text"
+            value={renameValue}
+            onChange={(e) => setRenameValue(e.target.value)}
+            onKeyDown={handleEnterDown}
+            autoFocus
+          />
+        </div>
+      ) : (
+        <button
+          className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90 ${
+            messageIsStreaming ? 'disabled:cursor-not-allowed' : ''
+          } ${
+            selectedConversation?.id === conversation.id
+              ? 'bg-[#343541]/90'
+              : ''
+          }`}
+          onClick={() => handleSelectConversation(conversation)}
+          disabled={messageIsStreaming}
+          draggable="true"
+          onDragStart={(e) => handleDragStart(e, conversation)}
+        >
+          <IconMessage size={18} />
+          <div
+            className={`relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3 ${
+              selectedConversation?.id === conversation.id ? 'pr-12' : 'pr-1'
+            }`}
+          >
+            {conversation.name}
+          </div>
+        </button>
+      )}
+
+      {(isDeleting || isRenaming) &&
+        selectedConversation?.id === conversation.id && (
+          <div className="absolute right-1 z-10 flex text-gray-300">
+            <SidebarActionButton handleClick={handleConfirm}>
+              <IconCheck size={18} />
+            </SidebarActionButton>
+            <SidebarActionButton handleClick={handleCancel}>
+              <IconX size={18} />
+            </SidebarActionButton>
+          </div>
+        )}
+
+      {selectedConversation?.id === conversation.id &&
+        !isDeleting &&
+        !isRenaming && (
+          <div className="absolute right-1 z-10 flex text-gray-300">
+            <SidebarActionButton handleClick={handleOpenRenameModal}>
+              <IconPencil size={18} />
+            </SidebarActionButton>
+            <SidebarActionButton handleClick={handleOpenDeleteModal}>
+              <IconTrash size={18} />
+            </SidebarActionButton>
+          </div>
+        )}
+    </div>
+  );
+};

components/Chatbar/components/Conversations.tsx

@@ -0,0 +1,21 @@
+import { Conversation } from '@/types/chat';
+
+import { ConversationComponent } from './Conversation';
+
+interface Props {
+  conversations: Conversation[];
+}
+
+export const Conversations = ({ conversations }: Props) => {
+  return (
+    <div className="flex w-full flex-col gap-1">
+      {conversations
+        .filter((conversation) => !conversation.folderId)
+        .slice()
+        .reverse()
+        .map((conversation, index) => (
+          <ConversationComponent key={index} conversation={conversation} />
+        ))}
+    </div>
+  );
+};

components/Chatbar/components/PluginKeys.tsx

@@ -1,22 +1,25 @@
-import { PluginID, PluginKey } from '@/types/plugin';
 import { IconKey } from '@tabler/icons-react';
-import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
+import { KeyboardEvent, useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { SidebarButton } from '../Sidebar/SidebarButton';
 
-interface Props {
-  pluginKeys: PluginKey[];
-  onPluginKeyChange: (pluginKey: PluginKey) => void;
-  onClearPluginKey: (pluginKey: PluginKey) => void;
-}
+import { PluginID, PluginKey } from '@/types/plugin';
 
-export const PluginKeys: FC<Props> = ({
-  pluginKeys,
-  onPluginKeyChange,
-  onClearPluginKey,
-}) => {
+import HomeContext from '@/pages/api/home/home.context';
+
+import { SidebarButton } from '@/components/Sidebar/SidebarButton';
+
+import ChatbarContext from '../Chatbar.context';
+
+export const PluginKeys = () => {
   const { t } = useTranslation('sidebar');
 
+  const {
+    state: { pluginKeys },
+  } = useContext(HomeContext);
+
+  const { handlePluginKeyChange, handleClearPluginKey } =
+    useContext(ChatbarContext);
+
   const [isChanging, setIsChanging] = useState(false);
 
   const modalRef = useRef<HTMLDivElement>(null);
@@ -60,7 +63,7 @@ export const PluginKeys: FC<Props> = ({
           className="z-100 fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
           onKeyDown={handleEnter}
         >
-          <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="fixed inset-0 z-10 overflow-hidden">
             <div className="flex min-h-screen items-center justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
               <div
                 className="hidden sm:inline-block sm:h-screen sm:align-middle"
@@ -69,7 +72,7 @@ export const PluginKeys: FC<Props> = ({
 
               <div
                 ref={modalRef}
-                className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-hidden 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"
+                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"
                 role="dialog"
               >
                 <div className="mb-10 text-4xl">Plugin Keys</div>
@@ -118,7 +121,7 @@ export const PluginKeys: FC<Props> = ({
                             }),
                           };
 
-                          onPluginKeyChange(updatedPluginKey);
+                          handlePluginKeyChange(updatedPluginKey);
                         }
                       } else {
                         const newPluginKey: PluginKey = {
@@ -135,7 +138,7 @@ export const PluginKeys: FC<Props> = ({
                           ],
                         };
 
-                        onPluginKeyChange(newPluginKey);
+                        handlePluginKeyChange(newPluginKey);
                       }
                     }}
                   />
@@ -177,7 +180,7 @@ export const PluginKeys: FC<Props> = ({
                             }),
                           };
 
-                          onPluginKeyChange(updatedPluginKey);
+                          handlePluginKeyChange(updatedPluginKey);
                         }
                       } else {
                         const newPluginKey: PluginKey = {
@@ -194,7 +197,7 @@ export const PluginKeys: FC<Props> = ({
                           ],
                         };
 
-                        onPluginKeyChange(newPluginKey);
+                        handlePluginKeyChange(newPluginKey);
                       }
                     }}
                   />
@@ -207,7 +210,7 @@ export const PluginKeys: FC<Props> = ({
                       );
 
                       if (pluginKey) {
-                        onClearPluginKey(pluginKey);
+                        handleClearPluginKey(pluginKey);
                       }
                     }}
                   >

components/Folder/Folder.tsx

@@ -1,6 +1,3 @@
-import { PromptComponent } from '@/components/Promptbar/Prompt';
-import { Folder } from '@/types/folder';
-import { Prompt } from '@/types/prompt';
 import {
   IconCaretDown,
   IconCaretRight,
@@ -9,29 +6,35 @@ import {
   IconTrash,
   IconX,
 } from '@tabler/icons-react';
-import { FC, KeyboardEvent, useEffect, useState } from 'react';
+import {
+  KeyboardEvent,
+  ReactElement,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+
+import { FolderInterface } from '@/types/folder';
+
+import HomeContext from '@/pages/api/home/home.context';
+
+import SidebarActionButton from '@/components/Buttons/SidebarActionButton';
 
 interface Props {
+  currentFolder: FolderInterface;
   searchTerm: string;
-  prompts: Prompt[];
-  currentFolder: Folder;
-  onDeleteFolder: (folder: string) => void;
-  onUpdateFolder: (folder: string, name: string) => void;
-  // prompt props
-  onDeletePrompt: (prompt: Prompt) => void;
-  onUpdatePrompt: (prompt: Prompt) => void;
+  handleDrop: (e: any, folder: FolderInterface) => void;
+  folderComponent: (ReactElement | undefined)[];
 }
 
-export const PromptFolder: FC<Props> = ({
-  searchTerm,
-  prompts,
+const Folder = ({
   currentFolder,
-  onDeleteFolder,
-  onUpdateFolder,
-  // prompt props
-  onDeletePrompt,
-  onUpdatePrompt,
-}) => {
+  searchTerm,
+  handleDrop,
+  folderComponent,
+}: Props) => {
+  const { handleDeleteFolder, handleUpdateFolder } = useContext(HomeContext);
+
   const [isDeleting, setIsDeleting] = useState(false);
   const [isRenaming, setIsRenaming] = useState(false);
   const [renameValue, setRenameValue] = useState('');
@@ -45,23 +48,16 @@ export const PromptFolder: FC<Props> = ({
   };
 
   const handleRename = () => {
-    onUpdateFolder(currentFolder.id, renameValue);
+    handleUpdateFolder(currentFolder.id, renameValue);
     setRenameValue('');
     setIsRenaming(false);
   };
 
-  const handleDrop = (e: any, folder: Folder) => {
+  const dropHandler = (e: any) => {
     if (e.dataTransfer) {
       setIsOpen(true);
 
-      const prompt = JSON.parse(e.dataTransfer.getData('prompt'));
-
-      const updatedPrompt = {
-        ...prompt,
-        folderId: folder.id,
-      };
-
-      onUpdatePrompt(updatedPrompt);
+      handleDrop(e, currentFolder);
 
       e.target.style.background = 'none';
     }
@@ -118,7 +114,7 @@ export const PromptFolder: FC<Props> = ({
           <button
             className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90`}
             onClick={() => setIsOpen(!isOpen)}
-            onDrop={(e) => handleDrop(e, currentFolder)}
+            onDrop={(e) => dropHandler(e)}
             onDragOver={allowDrop}
             onDragEnter={highlightDrop}
             onDragLeave={removeHighlight}
@@ -137,13 +133,12 @@ export const PromptFolder: FC<Props> = ({
 
         {(isDeleting || isRenaming) && (
           <div className="absolute right-1 z-10 flex text-gray-300">
-            <button
-              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
-              onClick={(e) => {
+            <SidebarActionButton
+              handleClick={(e) => {
                 e.stopPropagation();
 
                 if (isDeleting) {
-                  onDeleteFolder(currentFolder.id);
+                  handleDeleteFolder(currentFolder.id);
                 } else if (isRenaming) {
                   handleRename();
                 }
@@ -153,60 +148,45 @@ export const PromptFolder: FC<Props> = ({
               }}
             >
               <IconCheck size={18} />
-            </button>
-            <button
-              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
-              onClick={(e) => {
+            </SidebarActionButton>
+            <SidebarActionButton
+              handleClick={(e) => {
                 e.stopPropagation();
                 setIsDeleting(false);
                 setIsRenaming(false);
               }}
             >
               <IconX size={18} />
-            </button>
+            </SidebarActionButton>
           </div>
         )}
 
         {!isDeleting && !isRenaming && (
           <div className="absolute right-1 z-10 flex text-gray-300">
-            <button
-              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
-              onClick={(e) => {
+            <SidebarActionButton
+              handleClick={(e) => {
                 e.stopPropagation();
                 setIsRenaming(true);
                 setRenameValue(currentFolder.name);
               }}
             >
               <IconPencil size={18} />
-            </button>
-            <button
-              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
-              onClick={(e) => {
+            </SidebarActionButton>
+            <SidebarActionButton
+              handleClick={(e) => {
                 e.stopPropagation();
                 setIsDeleting(true);
               }}
             >
               <IconTrash size={18} />
-            </button>
+            </SidebarActionButton>
           </div>
         )}
       </div>
 
-      {isOpen
-        ? prompts.map((prompt, index) => {
-            if (prompt.folderId === currentFolder.id) {
-              return (
-                <div key={index} className="ml-5 gap-2 border-l pl-2">
-                  <PromptComponent
-                    prompt={prompt}
-                    onDeletePrompt={onDeletePrompt}
-                    onUpdatePrompt={onUpdatePrompt}
-                  />
-                </div>
-              );
-            }
-          })
-        : null}
+      {isOpen ? folderComponent : null}
     </>
   );
 };
+
+export default Folder;

components/Folder/index.ts

@@ -0,0 +1 @@
+export { default } from './Folder';

components/Folders/Chat/ChatFolder.tsx

@@ -1,220 +0,0 @@
-import { Conversation } from '@/types/chat';
-import { KeyValuePair } from '@/types/data';
-import { Folder } from '@/types/folder';
-import {
-  IconCaretDown,
-  IconCaretRight,
-  IconCheck,
-  IconPencil,
-  IconTrash,
-  IconX,
-} from '@tabler/icons-react';
-import { FC, KeyboardEvent, useEffect, useState } from 'react';
-import { ConversationComponent } from '../../Chatbar/Conversation';
-
-interface Props {
-  searchTerm: string;
-  conversations: Conversation[];
-  currentFolder: Folder;
-  onDeleteFolder: (folder: string) => void;
-  onUpdateFolder: (folder: string, name: string) => void;
-  // conversation props
-  selectedConversation: Conversation;
-  loading: boolean;
-  onSelectConversation: (conversation: Conversation) => void;
-  onDeleteConversation: (conversation: Conversation) => void;
-  onUpdateConversation: (
-    conversation: Conversation,
-    data: KeyValuePair,
-  ) => void;
-}
-
-export const ChatFolder: FC<Props> = ({
-  searchTerm,
-  conversations,
-  currentFolder,
-  onDeleteFolder,
-  onUpdateFolder,
-  // conversation props
-  selectedConversation,
-  loading,
-  onSelectConversation,
-  onDeleteConversation,
-  onUpdateConversation,
-}) => {
-  const [isDeleting, setIsDeleting] = useState(false);
-  const [isRenaming, setIsRenaming] = useState(false);
-  const [renameValue, setRenameValue] = useState('');
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      handleRename();
-    }
-  };
-
-  const handleRename = () => {
-    onUpdateFolder(currentFolder.id, renameValue);
-    setRenameValue('');
-    setIsRenaming(false);
-  };
-
-  const handleDrop = (e: any, folder: Folder) => {
-    if (e.dataTransfer) {
-      setIsOpen(true);
-
-      const conversation = JSON.parse(e.dataTransfer.getData('conversation'));
-      onUpdateConversation(conversation, { key: 'folderId', value: folder.id });
-
-      e.target.style.background = 'none';
-    }
-  };
-
-  const allowDrop = (e: any) => {
-    e.preventDefault();
-  };
-
-  const highlightDrop = (e: any) => {
-    e.target.style.background = '#343541';
-  };
-
-  const removeHighlight = (e: any) => {
-    e.target.style.background = 'none';
-  };
-
-  useEffect(() => {
-    if (isRenaming) {
-      setIsDeleting(false);
-    } else if (isDeleting) {
-      setIsRenaming(false);
-    }
-  }, [isRenaming, isDeleting]);
-
-  useEffect(() => {
-    if (searchTerm) {
-      setIsOpen(true);
-    } else {
-      setIsOpen(false);
-    }
-  }, [searchTerm]);
-
-  return (
-    <>
-      <div className="relative flex items-center">
-        {isRenaming ? (
-          <div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3 rounded-lg">
-            {isOpen ? (
-              <IconCaretDown size={18} />
-            ) : (
-              <IconCaretRight size={18} />
-            )}
-
-            <input
-              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"
-              type="text"
-              value={renameValue}
-              onChange={(e) => setRenameValue(e.target.value)}
-              onKeyDown={handleEnterDown}
-              autoFocus
-            />
-          </div>
-        ) : (
-          <button
-            className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90`}
-            onClick={() => setIsOpen(!isOpen)}
-            onDrop={(e) => handleDrop(e, currentFolder)}
-            onDragOver={allowDrop}
-            onDragEnter={highlightDrop}
-            onDragLeave={removeHighlight}
-          >
-            {isOpen ? (
-              <IconCaretDown size={18} />
-            ) : (
-              <IconCaretRight size={18} />
-            )}
-
-            <div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3">
-              {currentFolder.name}
-            </div>
-          </button>
-        )}
-
-        {(isDeleting || isRenaming) && (
-          <div className="absolute right-1 z-10 flex text-gray-300">
-            <button
-              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
-              onClick={(e) => {
-                e.stopPropagation();
-
-                if (isDeleting) {
-                  onDeleteFolder(currentFolder.id);
-                } else if (isRenaming) {
-                  handleRename();
-                }
-
-                setIsDeleting(false);
-                setIsRenaming(false);
-              }}
-            >
-              <IconCheck size={18} />
-            </button>
-            <button
-              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
-              onClick={(e) => {
-                e.stopPropagation();
-                setIsDeleting(false);
-                setIsRenaming(false);
-              }}
-            >
-              <IconX size={18} />
-            </button>
-          </div>
-        )}
-
-        {!isDeleting && !isRenaming && (
-          <div className="absolute right-1 z-10 flex text-gray-300">
-            <button
-              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
-              onClick={(e) => {
-                e.stopPropagation();
-                setIsRenaming(true);
-                setRenameValue(currentFolder.name);
-              }}
-            >
-              <IconPencil size={18} />
-            </button>
-            <button
-              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
-              onClick={(e) => {
-                e.stopPropagation();
-                setIsDeleting(true);
-              }}
-            >
-              <IconTrash size={18} />
-            </button>
-          </div>
-        )}
-      </div>
-
-      {isOpen
-        ? conversations.map((conversation, index) => {
-          if (conversation.folderId === currentFolder.id) {
-            return (
-              <div key={index} className="ml-5 gap-2 border-l pl-2">
-                <ConversationComponent
-                  selectedConversation={selectedConversation}
-                  conversation={conversation}
-                  loading={loading}
-                  onSelectConversation={onSelectConversation}
-                  onDeleteConversation={onDeleteConversation}
-                  onUpdateConversation={onUpdateConversation}
-                />
-              </div>
-            );
-          }
-        })
-        : null}
-    </>
-  );
-};

components/Folders/Chat/ChatFolders.tsx

@@ -1,57 +0,0 @@
-import { Conversation } from '@/types/chat';
-import { KeyValuePair } from '@/types/data';
-import { Folder } from '@/types/folder';
-import { FC } from 'react';
-import { ChatFolder } from './ChatFolder';
-
-interface Props {
-  searchTerm: string;
-  conversations: Conversation[];
-  folders: Folder[];
-  onDeleteFolder: (folder: string) => void;
-  onUpdateFolder: (folder: string, name: string) => void;
-  // conversation props
-  selectedConversation: Conversation;
-  loading: boolean;
-  onSelectConversation: (conversation: Conversation) => void;
-  onDeleteConversation: (conversation: Conversation) => void;
-  onUpdateConversation: (
-    conversation: Conversation,
-    data: KeyValuePair,
-  ) => void;
-}
-
-export const ChatFolders: FC<Props> = ({
-  searchTerm,
-  conversations,
-  folders,
-  onDeleteFolder,
-  onUpdateFolder,
-  // conversation props
-  selectedConversation,
-  loading,
-  onSelectConversation,
-  onDeleteConversation,
-  onUpdateConversation,
-}) => {
-  return (
-    <div className="flex w-full flex-col pt-2">
-      {folders.map((folder, index) => (
-        <ChatFolder
-          key={index}
-          searchTerm={searchTerm}
-          conversations={conversations.filter((c) => c.folderId)}
-          currentFolder={folder}
-          onDeleteFolder={onDeleteFolder}
-          onUpdateFolder={onUpdateFolder}
-          // conversation props
-          selectedConversation={selectedConversation}
-          loading={loading}
-          onSelectConversation={onSelectConversation}
-          onDeleteConversation={onDeleteConversation}
-          onUpdateConversation={onUpdateConversation}
-        />
-      ))}
-    </div>
-  );
-};

components/Folders/Prompt/PromptFolders.tsx

@@ -1,44 +0,0 @@
-import { Folder } from '@/types/folder';
-import { Prompt } from '@/types/prompt';
-import { FC } from 'react';
-import { PromptFolder } from './PromptFolder';
-
-interface Props {
-  searchTerm: string;
-  prompts: Prompt[];
-  folders: Folder[];
-  onDeleteFolder: (folder: string) => void;
-  onUpdateFolder: (folder: string, name: string) => void;
-  // prompt props
-  onDeletePrompt: (prompt: Prompt) => void;
-  onUpdatePrompt: (prompt: Prompt) => void;
-}
-
-export const PromptFolders: FC<Props> = ({
-  searchTerm,
-  prompts,
-  folders,
-  onDeleteFolder,
-  onUpdateFolder,
-  // prompt props
-  onDeletePrompt,
-  onUpdatePrompt,
-}) => {
-  return (
-    <div className="flex w-full flex-col pt-2">
-      {folders.map((folder, index) => (
-        <PromptFolder
-          key={index}
-          searchTerm={searchTerm}
-          prompts={prompts.filter((p) => p.folderId)}
-          currentFolder={folder}
-          onDeleteFolder={onDeleteFolder}
-          onUpdateFolder={onUpdateFolder}
-          // prompt props
-          onDeletePrompt={onDeletePrompt}
-          onUpdatePrompt={onUpdatePrompt}
-        />
-      ))}
-    </div>
-  );
-};

components/Markdown/CodeBlock.tsx

@@ -1,12 +1,14 @@
+import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';
+import { FC, memo, useState } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+import { useTranslation } from 'next-i18next';
+
 import {
   generateRandomString,
   programmingLanguages,
 } from '@/utils/app/codeblock';
-import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';
-import { useTranslation } from 'next-i18next';
-import { FC, memo, useState } from 'react';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
 interface Props {
   language: string;
@@ -67,11 +69,7 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
             className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-white"
             onClick={copyToClipboard}
           >
-            {isCopied ? (
-              <IconCheck size={18} />
-            ) : (
-              <IconClipboard size={18} />
-            )}
+            {isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
             {isCopied ? t('Copied!') : t('Copy code')}
           </button>
           <button

components/Markdown/MemoizedReactMarkdown.tsx

@@ -1,4 +1,9 @@
 import { FC, memo } from 'react';
 import ReactMarkdown, { Options } from 'react-markdown';
 
-export const MemoizedReactMarkdown: FC<Options> = memo(ReactMarkdown);
+export const MemoizedReactMarkdown: FC<Options> = memo(
+    ReactMarkdown,
+    (prevProps, nextProps) => (
+        prevProps.children === nextProps.children
+    )
+);

components/Mobile/Navbar.tsx

@@ -1,7 +1,8 @@
-import { Conversation } from '@/types/chat';
 import { IconPlus } from '@tabler/icons-react';
 import { FC } from 'react';
 
+import { Conversation } from '@/types/chat';
+
 interface Props {
   selectedConversation: Conversation;
   onNewConversation: () => void;

components/Promptbar/PromptBar.context.tsx

@@ -0,0 +1,19 @@
+import { Dispatch, createContext } from 'react';
+
+import { ActionType } from '@/hooks/useCreateReducer';
+
+import { Prompt } from '@/types/prompt';
+
+import { PromptbarInitialState } from './Promptbar.state';
+
+export interface PromptbarContextProps {
+  state: PromptbarInitialState;
+  dispatch: Dispatch<ActionType<PromptbarInitialState>>;
+  handleCreatePrompt: () => void;
+  handleDeletePrompt: (prompt: Prompt) => void;
+  handleUpdatePrompt: (prompt: Prompt) => void;
+}
+
+const PromptbarContext = createContext<PromptbarContextProps>(undefined!);
+
+export default PromptbarContext;

components/Promptbar/Promptbar.state.tsx

@@ -0,0 +1,11 @@
+import { Prompt } from '@/types/prompt';
+
+export interface PromptbarInitialState {
+  searchTerm: string;
+  filteredPrompts: Prompt[];
+}
+
+export const initialState: PromptbarInitialState = {
+  searchTerm: '',
+  filteredPrompts: [],
+};

components/Promptbar/Promptbar.tsx

@@ -1,50 +1,85 @@
-import { Folder } from '@/types/folder';
-import { Prompt } from '@/types/prompt';
-import {
-  IconFolderPlus,
-  IconMistOff,
-  IconPlus,
-} from '@tabler/icons-react';
-import { FC, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PromptFolders } from '../Folders/Prompt/PromptFolders';
-import { Search } from '../Sidebar/Search';
-import { PromptbarSettings } from './PromptbarSettings';
-import { Prompts } from './Prompts';
 
-interface Props {
-  prompts: Prompt[];
-  folders: Folder[];
-  onCreateFolder: (name: string) => void;
-  onDeleteFolder: (folderId: string) => void;
-  onUpdateFolder: (folderId: string, name: string) => void;
-  onCreatePrompt: () => void;
-  onUpdatePrompt: (prompt: Prompt) => void;
-  onDeletePrompt: (prompt: Prompt) => void;
-}
+import { useCreateReducer } from '@/hooks/useCreateReducer';
 
-export const Promptbar: FC<Props> = ({
-  folders,
-  prompts,
-  onCreateFolder,
-  onDeleteFolder,
-  onUpdateFolder,
-  onCreatePrompt,
-  onUpdatePrompt,
-  onDeletePrompt,
-}) => {
+import { savePrompts } from '@/utils/app/prompts';
+
+import { OpenAIModels } from '@/types/openai';
+import { Prompt } from '@/types/prompt';
+
+import HomeContext from '@/pages/api/home/home.context';
+
+import { PromptFolders } from './components/PromptFolders';
+import { PromptbarSettings } from './components/PromptbarSettings';
+import { Prompts } from './components/Prompts';
+
+import Sidebar from '../Sidebar';
+import PromptbarContext from './PromptBar.context';
+import { PromptbarInitialState, initialState } from './Promptbar.state';
+
+import { v4 as uuidv4 } from 'uuid';
+
+const Promptbar = () => {
   const { t } = useTranslation('promptbar');
-  const [searchTerm, setSearchTerm] = useState<string>('');
-  const [filteredPrompts, setFilteredPrompts] = useState<Prompt[]>(prompts);
 
-  const handleUpdatePrompt = (prompt: Prompt) => {
-    onUpdatePrompt(prompt);
-    setSearchTerm('');
+  const promptBarContextValue = useCreateReducer<PromptbarInitialState>({
+    initialState,
+  });
+
+  const {
+    state: { prompts, defaultModelId, showPromptbar },
+    dispatch: homeDispatch,
+    handleCreateFolder,
+  } = useContext(HomeContext);
+
+  const {
+    state: { searchTerm, filteredPrompts },
+    dispatch: promptDispatch,
+  } = promptBarContextValue;
+
+  const handleTogglePromptbar = () => {
+    homeDispatch({ field: 'showPromptbar', value: !showPromptbar });
+    localStorage.setItem('showPromptbar', JSON.stringify(!showPromptbar));
+  };
+
+  const handleCreatePrompt = () => {
+    if (defaultModelId) {
+      const newPrompt: Prompt = {
+        id: uuidv4(),
+        name: `Prompt ${prompts.length + 1}`,
+        description: '',
+        content: '',
+        model: OpenAIModels[defaultModelId],
+        folderId: null,
+      };
+
+      const updatedPrompts = [...prompts, newPrompt];
+
+      homeDispatch({ field: 'prompts', value: updatedPrompts });
+
+      savePrompts(updatedPrompts);
+    }
   };
 
   const handleDeletePrompt = (prompt: Prompt) => {
-    onDeletePrompt(prompt);
-    setSearchTerm('');
+    const updatedPrompts = prompts.filter((p) => p.id !== prompt.id);
+
+    homeDispatch({ field: 'prompts', value: updatedPrompts });
+    savePrompts(updatedPrompts);
+  };
+
+  const handleUpdatePrompt = (prompt: Prompt) => {
+    const updatedPrompts = prompts.map((p) => {
+      if (p.id === prompt.id) {
+        return prompt;
+      }
+
+      return p;
+    });
+    homeDispatch({ field: 'prompts', value: updatedPrompts });
+
+    savePrompts(updatedPrompts);
   };
 
   const handleDrop = (e: any) => {
@@ -56,28 +91,17 @@ export const Promptbar: FC<Props> = ({
         folderId: e.target.dataset.folderId,
       };
 
-      onUpdatePrompt(updatedPrompt);
+      handleUpdatePrompt(updatedPrompt);
 
       e.target.style.background = 'none';
     }
   };
 
-  const allowDrop = (e: any) => {
-    e.preventDefault();
-  };
-
-  const highlightDrop = (e: any) => {
-    e.target.style.background = '#343541';
-  };
-
-  const removeHighlight = (e: any) => {
-    e.target.style.background = 'none';
-  };
-
   useEffect(() => {
     if (searchTerm) {
-      setFilteredPrompts(
-        prompts.filter((prompt) => {
+      promptDispatch({
+        field: 'filteredPrompts',
+        value: prompts.filter((prompt) => {
           const searchable =
             prompt.name.toLowerCase() +
             ' ' +
@@ -86,85 +110,43 @@ export const Promptbar: FC<Props> = ({
             prompt.content.toLowerCase();
           return searchable.includes(searchTerm.toLowerCase());
         }),
-      );
+      });
     } else {
-      setFilteredPrompts(prompts);
+      promptDispatch({ field: 'filteredPrompts', value: prompts });
     }
   }, [searchTerm, prompts]);
 
   return (
-    <div
-      className={`fixed top-0 right-0 z-50 flex h-full w-[260px] flex-none flex-col space-y-2 bg-[#202123] p-2 text-[14px] transition-all sm:relative sm:top-0`}
+    <PromptbarContext.Provider
+      value={{
+        ...promptBarContextValue,
+        handleCreatePrompt,
+        handleDeletePrompt,
+        handleUpdatePrompt,
+      }}
     >
-      <div className="flex items-center">
-        <button
-          className="text-sidebar flex w-[190px] flex-shrink-0 cursor-pointer select-none items-center gap-3 rounded-md border border-white/20 p-3 text-white transition-colors duration-200 hover:bg-gray-500/10"
-          onClick={() => {
-            onCreatePrompt();
-            setSearchTerm('');
-          }}
-        >
-          <IconPlus size={16} />
-          {t('New prompt')}
-        </button>
-
-        <button
-          className="flex items-center flex-shrink-0 gap-3 p-3 ml-2 text-sm text-white transition-colors duration-200 border rounded-md cursor-pointer border-white/20 hover:bg-gray-500/10"
-          onClick={() => onCreateFolder(t('New folder'))}
-        >
-          <IconFolderPlus size={16} />
-        </button>
-      </div>
-
-      {prompts.length > 1 && (
-        <Search
-          placeholder={t('Search prompts...') || ''}
-          searchTerm={searchTerm}
-          onSearch={setSearchTerm}
-        />
-      )}
-
-      <div className="flex-grow overflow-auto">
-        {folders.length > 0 && (
-          <div className="flex pb-2 border-b border-white/20">
-            <PromptFolders
-              searchTerm={searchTerm}
-              prompts={filteredPrompts}
-              folders={folders}
-              onUpdateFolder={onUpdateFolder}
-              onDeleteFolder={onDeleteFolder}
-              // prompt props
-              onDeletePrompt={handleDeletePrompt}
-              onUpdatePrompt={handleUpdatePrompt}
-            />
-          </div>
-        )}
-
-        {prompts.length > 0 ? (
-          <div
-            className="pt-2"
-            onDrop={(e) => handleDrop(e)}
-            onDragOver={allowDrop}
-            onDragEnter={highlightDrop}
-            onDragLeave={removeHighlight}
-          >
-            <Prompts
-              prompts={filteredPrompts.filter((prompt) => !prompt.folderId)}
-              onUpdatePrompt={handleUpdatePrompt}
-              onDeletePrompt={handleDeletePrompt}
-            />
-          </div>
-        ) : (
-          <div className="mt-8 text-center text-white opacity-50 select-none">
-            <IconMistOff className="mx-auto mb-3" />
-            <span className="text-[14px] leading-normal">
-              {t('No prompts.')}
-            </span>
-          </div>
-        )}
-      </div>
-
-      <PromptbarSettings />
-    </div>
+      <Sidebar<Prompt>
+        side={'right'}
+        isOpen={showPromptbar}
+        addItemButtonTitle={t('New prompt')}
+        itemComponent={
+          <Prompts
+            prompts={filteredPrompts.filter((prompt) => !prompt.folderId)}
+          />
+        }
+        folderComponent={<PromptFolders />}
+        items={filteredPrompts}
+        searchTerm={searchTerm}
+        handleSearchTerm={(searchTerm: string) =>
+          promptDispatch({ field: 'searchTerm', value: searchTerm })
+        }
+        toggleOpen={handleTogglePromptbar}
+        handleCreateItem={handleCreatePrompt}
+        handleCreateFolder={() => handleCreateFolder(t('New folder'), 'prompt')}
+        handleDrop={handleDrop}
+      />
+    </PromptbarContext.Provider>
   );
 };
+
+export default Promptbar;

components/Promptbar/Prompts.tsx

@@ -1,31 +0,0 @@
-import { Prompt } from '@/types/prompt';
-import { FC } from 'react';
-import { PromptComponent } from './Prompt';
-
-interface Props {
-  prompts: Prompt[];
-  onUpdatePrompt: (prompt: Prompt) => void;
-  onDeletePrompt: (prompt: Prompt) => void;
-}
-
-export const Prompts: FC<Props> = ({
-  prompts,
-  onUpdatePrompt,
-  onDeletePrompt,
-}) => {
-  return (
-    <div className="flex w-full flex-col gap-1">
-      {prompts
-        .slice()
-        .reverse()
-        .map((prompt, index) => (
-          <PromptComponent
-            key={index}
-            prompt={prompt}
-            onUpdatePrompt={onUpdatePrompt}
-            onDeletePrompt={onDeletePrompt}
-          />
-        ))}
-    </div>
-  );
-};

components/Promptbar/components/Prompt.tsx

@@ -1,29 +1,66 @@
-import { Prompt } from '@/types/prompt';
 import {
   IconBulbFilled,
   IconCheck,
   IconTrash,
   IconX,
 } from '@tabler/icons-react';
-import { DragEvent, FC, useEffect, useState } from 'react';
+import {
+  DragEvent,
+  MouseEventHandler,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+
+import { Prompt } from '@/types/prompt';
+
+import SidebarActionButton from '@/components/Buttons/SidebarActionButton';
+
+import PromptbarContext from '../PromptBar.context';
 import { PromptModal } from './PromptModal';
 
 interface Props {
   prompt: Prompt;
-  onUpdatePrompt: (prompt: Prompt) => void;
-  onDeletePrompt: (prompt: Prompt) => void;
 }
 
-export const PromptComponent: FC<Props> = ({
-  prompt,
-  onUpdatePrompt,
-  onDeletePrompt,
-}) => {
+export const PromptComponent = ({ prompt }: Props) => {
+  const {
+    dispatch: promptDispatch,
+    handleUpdatePrompt,
+    handleDeletePrompt,
+  } = useContext(PromptbarContext);
+
   const [showModal, setShowModal] = useState<boolean>(false);
   const [isDeleting, setIsDeleting] = useState(false);
   const [isRenaming, setIsRenaming] = useState(false);
   const [renameValue, setRenameValue] = useState('');
 
+  const handleUpdate = (prompt: Prompt) => {
+    handleUpdatePrompt(prompt);
+    promptDispatch({ field: 'searchTerm', value: '' });
+  };
+
+  const handleDelete: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+
+    if (isDeleting) {
+      handleDeletePrompt(prompt);
+      promptDispatch({ field: 'searchTerm', value: '' });
+    }
+
+    setIsDeleting(false);
+  };
+
+  const handleCancelDelete: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+    setIsDeleting(false);
+  };
+
+  const handleOpenDeleteModal: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+    setIsDeleting(true);
+  };
+
   const handleDragStart = (e: DragEvent<HTMLButtonElement>, prompt: Prompt) => {
     if (e.dataTransfer) {
       e.dataTransfer.setData('prompt', JSON.stringify(prompt));
@@ -63,44 +100,21 @@ export const PromptComponent: FC<Props> = ({
 
       {(isDeleting || isRenaming) && (
         <div className="absolute right-1 z-10 flex text-gray-300">
-          <button
-            className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
-            onClick={(e) => {
-              e.stopPropagation();
-
-              if (isDeleting) {
-                onDeletePrompt(prompt);
-              }
-
-              setIsDeleting(false);
-            }}
-          >
+          <SidebarActionButton handleClick={handleDelete}>
             <IconCheck size={18} />
-          </button>
+          </SidebarActionButton>
 
-          <button
-            className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
-            onClick={(e) => {
-              e.stopPropagation();
-              setIsDeleting(false);
-            }}
-          >
+          <SidebarActionButton handleClick={handleCancelDelete}>
             <IconX size={18} />
-          </button>
+          </SidebarActionButton>
         </div>
       )}
 
       {!isDeleting && !isRenaming && (
         <div className="absolute right-1 z-10 flex text-gray-300">
-          <button
-            className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
-            onClick={(e) => {
-              e.stopPropagation();
-              setIsDeleting(true);
-            }}
-          >
+          <SidebarActionButton handleClick={handleOpenDeleteModal}>
             <IconTrash size={18} />
-          </button>
+          </SidebarActionButton>
         </div>
       )}
 
@@ -108,7 +122,7 @@ export const PromptComponent: FC<Props> = ({
         <PromptModal
           prompt={prompt}
           onClose={() => setShowModal(false)}
-          onUpdatePrompt={onUpdatePrompt}
+          onUpdatePrompt={handleUpdate}
         />
       )}
     </div>

components/Promptbar/components/PromptFolders.tsx

@@ -0,0 +1,64 @@
+import { useContext } from 'react';
+
+import { FolderInterface } from '@/types/folder';
+
+import HomeContext from '@/pages/api/home/home.context';
+
+import Folder from '@/components/Folder';
+import { PromptComponent } from '@/components/Promptbar/components/Prompt';
+
+import PromptbarContext from '../PromptBar.context';
+
+export const PromptFolders = () => {
+  const {
+    state: { folders },
+  } = useContext(HomeContext);
+
+  const {
+    state: { searchTerm, filteredPrompts },
+    handleUpdatePrompt,
+  } = useContext(PromptbarContext);
+
+  const handleDrop = (e: any, folder: FolderInterface) => {
+    if (e.dataTransfer) {
+      const prompt = JSON.parse(e.dataTransfer.getData('prompt'));
+
+      const updatedPrompt = {
+        ...prompt,
+        folderId: folder.id,
+      };
+
+      handleUpdatePrompt(updatedPrompt);
+    }
+  };
+
+  const PromptFolders = (currentFolder: FolderInterface) =>
+    filteredPrompts
+      .filter((p) => p.folderId)
+      .map((prompt, index) => {
+        if (prompt.folderId === currentFolder.id) {
+          return (
+            <div key={index} className="ml-5 gap-2 border-l pl-2">
+              <PromptComponent prompt={prompt} />
+            </div>
+          );
+        }
+      });
+
+  return (
+    <div className="flex w-full flex-col pt-2">
+      {folders
+        .filter((folder) => folder.type === 'prompt')
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .map((folder, index) => (
+          <Folder
+            key={index}
+            searchTerm={searchTerm}
+            currentFolder={folder}
+            handleDrop={handleDrop}
+            folderComponent={PromptFolders(folder)}
+          />
+        ))}
+    </div>
+  );
+};

components/Promptbar/components/PromptModal.tsx

@@ -1,7 +1,9 @@
-import { Prompt } from '@/types/prompt';
 import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
+
 import { useTranslation } from 'next-i18next';
 
+import { Prompt } from '@/types/prompt';
+
 interface Props {
   prompt: Prompt;
   onClose: () => void;
@@ -49,10 +51,10 @@ export const PromptModal: FC<Props> = ({ prompt, onClose, onUpdatePrompt }) => {
 
   return (
     <div
-      className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-100"
+      className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"
       onKeyDown={handleEnter}
     >
-      <div className="fixed inset-0 z-10 overflow-y-auto">
+      <div className="fixed inset-0 z-10 overflow-hidden">
         <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
           <div
             className="hidden sm:inline-block sm:h-screen sm:align-middle"
@@ -61,7 +63,7 @@ export const PromptModal: FC<Props> = ({ prompt, onClose, onUpdatePrompt }) => {
 
           <div
             ref={modalRef}
-            className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-hidden 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"
+            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"
             role="dialog"
           >
             <div className="text-sm font-bold text-black dark:text-neutral-200">

components/Promptbar/components/PromptbarSettings.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC } from 'react';
 
 interface Props {}
 

components/Promptbar/components/Prompts.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+
+import { Prompt } from '@/types/prompt';
+
+import { PromptComponent } from './Prompt';
+
+interface Props {
+  prompts: Prompt[];
+}
+
+export const Prompts: FC<Props> = ({ prompts }) => {
+  return (
+    <div className="flex w-full flex-col gap-1">
+      {prompts
+        .slice()
+        .reverse()
+        .map((prompt, index) => (
+          <PromptComponent key={index} prompt={prompt} />
+        ))}
+    </div>
+  );
+};

components/Promptbar/index.ts

@@ -0,0 +1 @@
+export { default } from './Promptbar';

components/Search/Search.tsx

@@ -1,14 +1,14 @@
 import { IconX } from '@tabler/icons-react';
-import { useTranslation } from 'next-i18next';
 import { FC } from 'react';
 
+import { useTranslation } from 'next-i18next';
+
 interface Props {
   placeholder: string;
   searchTerm: string;
   onSearch: (searchTerm: string) => void;
 }
-
-export const Search: FC<Props> = ({ placeholder, searchTerm, onSearch }) => {
+const Search: FC<Props> = ({ placeholder, searchTerm, onSearch }) => {
   const { t } = useTranslation('sidebar');
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -39,3 +39,5 @@ export const Search: FC<Props> = ({ placeholder, searchTerm, onSearch }) => {
     </div>
   );
 };
+
+export default Search;

components/Search/index.ts

@@ -0,0 +1 @@
+export { default } from './Search';

components/Settings/Import.tsx

@@ -1,7 +1,10 @@
-import { SupportedExportFormats } from '@/types/export';
 import { IconFileImport } from '@tabler/icons-react';
-import { useTranslation } from 'next-i18next';
 import { FC } from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+import { SupportedExportFormats } from '@/types/export';
+
 import { SidebarButton } from '../Sidebar/SidebarButton';
 
 interface Props {

components/Settings/Key.tsx

@@ -1,6 +1,8 @@
 import { IconCheck, IconKey, IconX } from '@tabler/icons-react';
-import { useTranslation } from 'next-i18next';
 import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
+
+import { useTranslation } from 'next-i18next';
+
 import { SidebarButton } from '../Sidebar/SidebarButton';
 
 interface Props {
@@ -25,7 +27,7 @@ export const Key: FC<Props> = ({ apiKey, onApiKeyChange }) => {
     onApiKeyChange(newKey.trim());
     setIsChanging(false);
   };
-  
+
   useEffect(() => {
     if (isChanging) {
       inputRef.current?.focus();

components/Settings/SettingDialog.tsx

@@ -0,0 +1,105 @@
+import { FC, useContext, useEffect, useReducer, useRef } from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+import { useCreateReducer } from '@/hooks/useCreateReducer';
+
+import { getSettings, saveSettings } from '@/utils/app/settings';
+
+import { Settings } from '@/types/settings';
+
+import HomeContext from '@/pages/api/home/home.context';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const SettingDialog: FC<Props> = ({ open, onClose }) => {
+  const { t } = useTranslation('settings');
+  const settings: Settings = getSettings();
+  const { state, dispatch } = useCreateReducer<Settings>({
+    initialState: settings,
+  });
+  const { dispatch: homeDispatch } = useContext(HomeContext);
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleMouseDown = (e: MouseEvent) => {
+      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+        window.addEventListener('mouseup', handleMouseUp);
+      }
+    };
+
+    const handleMouseUp = (e: MouseEvent) => {
+      window.removeEventListener('mouseup', handleMouseUp);
+      onClose();
+    };
+
+    window.addEventListener('mousedown', handleMouseDown);
+
+    return () => {
+      window.removeEventListener('mousedown', handleMouseDown);
+    };
+  }, [onClose]);
+
+  const handleSave = () => {
+    homeDispatch({ field: 'lightMode', value: state.theme });
+    saveSettings(state);
+  };
+
+  // Render nothing if the dialog is not open.
+  if (!open) {
+    return <></>;
+  }
+
+  // Render the dialog.
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+      <div className="fixed inset-0 z-10 overflow-hidden">
+        <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+          <div
+            className="hidden sm:inline-block sm:h-screen sm:align-middle"
+            aria-hidden="true"
+          />
+
+          <div
+            ref={modalRef}
+            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"
+            role="dialog"
+          >
+            <div className="text-lg pb-4 font-bold text-black dark:text-neutral-200">
+              {t('Settings')}
+            </div>
+
+            <div className="text-sm font-bold mb-2 text-black dark:text-neutral-200">
+              {t('Theme')}
+            </div>
+
+            <select
+              className="w-full cursor-pointer bg-transparent p-2 text-neutral-700 dark:text-neutral-200"
+              value={state.theme}
+              onChange={(event) =>
+                dispatch({ field: 'theme', value: event.target.value })
+              }
+            >
+              <option value="dark">{t('Dark mode')}</option>
+              <option value="light">{t('Light mode')}</option>
+            </select>
+
+            <button
+              type="button"
+              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"
+              onClick={() => {
+                handleSave();
+                onClose();
+              }}
+            >
+              {t('Save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

components/Sidebar/Sidebar.tsx

@@ -0,0 +1,123 @@
+import { IconFolderPlus, IconMistOff, IconPlus } from '@tabler/icons-react';
+import { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  CloseSidebarButton,
+  OpenSidebarButton,
+} from './components/OpenCloseButton';
+
+import Search from '../Search';
+
+interface Props<T> {
+  isOpen: boolean;
+  addItemButtonTitle: string;
+  side: 'left' | 'right';
+  items: T[];
+  itemComponent: ReactNode;
+  folderComponent: ReactNode;
+  footerComponent?: ReactNode;
+  searchTerm: string;
+  handleSearchTerm: (searchTerm: string) => void;
+  toggleOpen: () => void;
+  handleCreateItem: () => void;
+  handleCreateFolder: () => void;
+  handleDrop: (e: any) => void;
+}
+
+const Sidebar = <T,>({
+  isOpen,
+  addItemButtonTitle,
+  side,
+  items,
+  itemComponent,
+  folderComponent,
+  footerComponent,
+  searchTerm,
+  handleSearchTerm,
+  toggleOpen,
+  handleCreateItem,
+  handleCreateFolder,
+  handleDrop,
+}: Props<T>) => {
+  const { t } = useTranslation('promptbar');
+
+  const allowDrop = (e: any) => {
+    e.preventDefault();
+  };
+
+  const highlightDrop = (e: any) => {
+    e.target.style.background = '#343541';
+  };
+
+  const removeHighlight = (e: any) => {
+    e.target.style.background = 'none';
+  };
+
+  return isOpen ? (
+    <div>
+      <div
+        className={`fixed top-0 ${side}-0 z-40 flex h-full w-[260px] flex-none flex-col space-y-2 bg-[#202123] p-2 text-[14px] transition-all sm:relative sm:top-0`}
+      >
+        <div className="flex items-center">
+          <button
+            className="text-sidebar flex w-[190px] flex-shrink-0 cursor-pointer select-none items-center gap-3 rounded-md border border-white/20 p-3 text-white transition-colors duration-200 hover:bg-gray-500/10"
+            onClick={() => {
+              handleCreateItem();
+              handleSearchTerm('');
+            }}
+          >
+            <IconPlus size={16} />
+            {addItemButtonTitle}
+          </button>
+
+          <button
+            className="ml-2 flex flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 p-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
+            onClick={handleCreateFolder}
+          >
+            <IconFolderPlus size={16} />
+          </button>
+        </div>
+        <Search
+          placeholder={t('Search...') || ''}
+          searchTerm={searchTerm}
+          onSearch={handleSearchTerm}
+        />
+
+        <div className="flex-grow overflow-auto">
+          {items?.length > 0 && (
+            <div className="flex border-b border-white/20 pb-2">
+              {folderComponent}
+            </div>
+          )}
+
+          {items?.length > 0 ? (
+            <div
+              className="pt-2"
+              onDrop={handleDrop}
+              onDragOver={allowDrop}
+              onDragEnter={highlightDrop}
+              onDragLeave={removeHighlight}
+            >
+              {itemComponent}
+            </div>
+          ) : (
+            <div className="mt-8 select-none text-center text-white opacity-50">
+              <IconMistOff className="mx-auto mb-3" />
+              <span className="text-[14px] leading-normal">
+                {t('No data.')}
+              </span>
+            </div>
+          )}
+        </div>
+        {footerComponent}
+      </div>
+
+      <CloseSidebarButton onClick={toggleOpen} side={side} />
+    </div>
+  ) : (
+    <OpenSidebarButton onClick={toggleOpen} side={side} />
+  );
+};
+
+export default Sidebar;

components/Sidebar/components/OpenCloseButton.tsx

@@ -0,0 +1,42 @@
+import { IconArrowBarLeft, IconArrowBarRight } from '@tabler/icons-react';
+
+interface Props {
+  onClick: any;
+  side: 'left' | 'right';
+}
+
+export const CloseSidebarButton = ({ onClick, side }: Props) => {
+  return (
+    <>
+      <button
+        className={`fixed top-5 ${
+          side === 'right' ? 'right-[270px]' : 'left-[270px]'
+        } z-50 h-7 w-7 hover:text-gray-400 dark:text-white dark:hover:text-gray-300 sm:top-0.5 sm:${
+          side === 'right' ? 'right-[270px]' : 'left-[270px]'
+        } sm:h-8 sm:w-8 sm:text-neutral-700`}
+        onClick={onClick}
+      >
+        {side === 'right' ? <IconArrowBarRight /> : <IconArrowBarLeft />}
+      </button>
+      <div
+        onClick={onClick}
+        className="absolute top-0 left-0 z-10 h-full w-full bg-black opacity-70 sm:hidden"
+      ></div>
+    </>
+  );
+};
+
+export const OpenSidebarButton = ({ onClick, side }: Props) => {
+  return (
+    <button
+      className={`fixed top-2.5 ${
+        side === 'right' ? 'right-2' : 'left-2'
+      } z-50 h-7 w-7 text-white hover:text-gray-400 dark:text-white dark:hover:text-gray-300 sm:top-0.5 sm:${
+        side === 'right' ? 'right-2' : 'left-2'
+      } sm:h-8 sm:w-8 sm:text-neutral-700`}
+      onClick={onClick}
+    >
+      {side === 'right' ? <IconArrowBarLeft /> : <IconArrowBarRight />}
+    </button>
+  );
+};

components/Sidebar/index.ts

@@ -0,0 +1 @@
+export { default } from './Sidebar';

components/Spinner/Spinner.tsx

@@ -5,7 +5,7 @@ interface Props {
   className?: string;
 }
 
-export const Spinner: FC<Props> = ({ size = '1em', className="" }) => {
+const Spinner = ({ size = '1em', className = '' }: Props) => {
   return (
     <svg
       stroke="currentColor"
@@ -30,3 +30,5 @@ export const Spinner: FC<Props> = ({ size = '1em', className="" }) => {
     </svg>
   );
 };
+
+export default Spinner;

components/Spinner/index.ts

@@ -0,0 +1 @@
+export { default } from './Spinner';

docs/google_search.md

@@ -18,4 +18,4 @@ Use the Google Search API to search the web in Chatbot UI.
 
 ## Usage Limits
 
-Google gives you 100 free searches per day. You can increase this limit by creating a billing account.
+Google gives you 100 free searches per day. You can increase this limit by creating a billing account.

hooks/useCreateReducer.ts

@@ -0,0 +1,30 @@
+import { useMemo, useReducer } from 'react';
+
+// Extracts property names from initial state of reducer to allow typesafe dispatch objects
+export type FieldNames<T> = {
+  [K in keyof T]: T[K] extends string ? K : K;
+}[keyof T];
+
+// Returns the Action Type for the dispatch object to be used for typing in things like context
+export type ActionType<T> =
+  | { type: 'reset' }
+  | { type?: 'change'; field: FieldNames<T>; value: any };
+
+// Returns a typed dispatch and state
+export const useCreateReducer = <T>({ initialState }: { initialState: T }) => {
+  type Action =
+    | { type: 'reset' }
+    | { type?: 'change'; field: FieldNames<T>; value: any };
+
+  const reducer = (state: T, action: Action) => {
+    if (!action.type) return { ...state, [action.field]: action.value };
+
+    if (action.type === 'reset') return initialState;
+
+    throw new Error();
+  };
+
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  return useMemo(() => ({ state, dispatch }), [state, dispatch]);
+};

hooks/useFetch.ts

@@ -0,0 +1,88 @@
+export type RequestModel = {
+  params?: object;
+  headers?: object;
+  signal?: AbortSignal;
+};
+
+export type RequestWithBodyModel = RequestModel & {
+  body?: object | FormData;
+};
+
+export const useFetch = () => {
+  const handleFetch = async (
+    url: string,
+    request: any,
+    signal?: AbortSignal,
+  ) => {
+    const requestUrl = request?.params ? `${url}${request.params}` : url;
+
+    const requestBody = request?.body
+      ? request.body instanceof FormData
+        ? { ...request, body: request.body }
+        : { ...request, body: JSON.stringify(request.body) }
+      : request;
+
+    const headers = {
+      ...(request?.headers
+        ? request.headers
+        : request?.body && request.body instanceof FormData
+        ? {}
+        : { 'Content-type': 'application/json' }),
+    };
+
+    return fetch(requestUrl, { ...requestBody, headers, signal })
+      .then((response) => {
+        if (!response.ok) throw response;
+
+        const contentType = response.headers.get('content-type');
+        const contentDisposition = response.headers.get('content-disposition');
+
+        const headers = response.headers;
+
+        const result =
+          contentType &&
+          (contentType?.indexOf('application/json') !== -1 ||
+            contentType?.indexOf('text/plain') !== -1)
+            ? response.json()
+            : contentDisposition?.indexOf('attachment') !== -1
+            ? response.blob()
+            : response;
+
+        return result;
+      })
+      .catch(async (err) => {
+        const contentType = err.headers.get('content-type');
+
+        const errResult =
+          contentType && contentType?.indexOf('application/problem+json') !== -1
+            ? await err.json()
+            : err;
+
+        throw errResult;
+      });
+  };
+
+  return {
+    get: async <T>(url: string, request?: RequestModel): Promise<T> => {
+      return handleFetch(url, { ...request, method: 'get' });
+    },
+    post: async <T>(
+      url: string,
+      request?: RequestWithBodyModel,
+    ): Promise<T> => {
+      return handleFetch(url, { ...request, method: 'post' });
+    },
+    put: async <T>(url: string, request?: RequestWithBodyModel): Promise<T> => {
+      return handleFetch(url, { ...request, method: 'put' });
+    },
+    patch: async <T>(
+      url: string,
+      request?: RequestWithBodyModel,
+    ): Promise<T> => {
+      return handleFetch(url, { ...request, method: 'patch' });
+    },
+    delete: async <T>(url: string, request?: RequestModel): Promise<T> => {
+      return handleFetch(url, { ...request, method: 'delete' });
+    },
+  };
+};

next-i18next.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   i18n: {
-    defaultLocale: "en",
+    defaultLocale: 'en',
     locales: [
       "bn",
       "de",
@@ -12,13 +12,18 @@ module.exports = {
       "it",
       "ja",
       "ko",
+      "pl",
       "pt",
       "ru",
+      "ro",      
       "sv",
       "te",
       "vi",
       "zh",
       "ar",
+      "tr",
+      "ca",
+      "fi",
     ],
   },
   localePath:

package.json

@@ -15,7 +15,10 @@
     "@dqbd/tiktoken": "^1.0.2",
     "@tabler/icons-react": "^2.9.0",
     "eventsource-parser": "^0.1.0",
+    "html2canvas": "^1.4.1",
+    "html-to-image": "^1.11.11",
     "i18next": "^22.4.13",
+    "jspdf": "^2.5.1",
     "next": "13.2.4",
     "next-i18next": "^13.2.2",
     "openai": "^3.2.1",
@@ -24,6 +27,7 @@
     "react-hot-toast": "^2.4.0",
     "react-i18next": "^12.2.0",
     "react-markdown": "^8.0.5",
+    "react-query": "^3.39.3",
     "react-syntax-highlighter": "^15.5.0",
     "rehype-mathjax": "^4.0.2",
     "remark-gfm": "^3.0.1",
@@ -33,6 +37,7 @@
   "devDependencies": {
     "@mozilla/readability": "^0.4.4",
     "@tailwindcss/typography": "^0.5.9",
+    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/jsdom": "^21.1.1",
     "@types/node": "18.15.0",
     "@types/react": "18.0.28",

pages/_app.tsx

@@ -1,16 +1,23 @@
-import '@/styles/globals.css';
+import { Toaster } from 'react-hot-toast';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
 import { appWithTranslation } from 'next-i18next';
 import type { AppProps } from 'next/app';
 import { Inter } from 'next/font/google';
-import { Toaster } from 'react-hot-toast';
+
+import '@/styles/globals.css';
 
 const inter = Inter({ subsets: ['latin'] });
 
 function App({ Component, pageProps }: AppProps<{}>) {
+  const queryClient = new QueryClient();
+
   return (
     <div className={inter.className}>
       <Toaster />
-      <Component {...pageProps} />
+      <QueryClientProvider client={queryClient}>
+        <Component {...pageProps} />
+      </QueryClientProvider>
     </div>
   );
 }

pages/_document.tsx

@@ -1,4 +1,5 @@
-import { Html, Head, Main, NextScript, DocumentProps } from 'next/document';
+import { DocumentProps, Head, Html, Main, NextScript } from 'next/document';
+
 import i18nextConfig from '../next-i18next.config';
 
 type Props = DocumentProps & {

pages/api/chat.ts

@@ -1,18 +1,21 @@
-import { ChatBody, Message } from '@/types/chat';
-import { DEFAULT_SYSTEM_PROMPT } from '@/utils/app/const';
+import { DEFAULT_SYSTEM_PROMPT, DEFAULT_TEMPERATURE } from '@/utils/app/const';
 import { OpenAIError, OpenAIStream } from '@/utils/server';
-import tiktokenModel from '@dqbd/tiktoken/encoders/cl100k_base.json';
-import { Tiktoken, init } from '@dqbd/tiktoken/lite/init';
+
+import { ChatBody, Message } from '@/types/chat';
+
 // @ts-expect-error
 import wasm from '../../node_modules/@dqbd/tiktoken/lite/tiktoken_bg.wasm?module';
 
+import tiktokenModel from '@dqbd/tiktoken/encoders/cl100k_base.json';
+import { Tiktoken, init } from '@dqbd/tiktoken/lite/init';
+
 export const config = {
   runtime: 'edge',
 };
 
 const handler = async (req: Request): Promise<Response> => {
   try {
-    const { model, messages, key, prompt } = (await req.json()) as ChatBody;
+    const { model, messages, key, prompt, temperature } = (await req.json()) as ChatBody;
 
     await init((imports) => WebAssembly.instantiate(wasm, imports));
     const encoding = new Tiktoken(
@@ -26,6 +29,11 @@ const handler = async (req: Request): Promise<Response> => {
       promptToSend = DEFAULT_SYSTEM_PROMPT;
     }
 
+    let temperatureToUse = temperature;
+    if (temperatureToUse == null) {
+      temperatureToUse = DEFAULT_TEMPERATURE;
+    }
+
     const prompt_tokens = encoding.encode(promptToSend);
 
     let tokenCount = prompt_tokens.length;
@@ -44,9 +52,15 @@ const handler = async (req: Request): Promise<Response> => {
 
     encoding.free();
 
-    const stream = await OpenAIStream(model, promptToSend, key, messagesToSend);
+    const stream = await OpenAIStream(model, promptToSend, temperatureToUse, key, messagesToSend);
 
-    return new Response(stream);
+    var resp = new Response(stream);
+
+    // let proxy services like nginx or argo tunnel know about pass the chunk immediately
+    // similar to nginx option `proxy_buffering off;`
+    resp.headers.set('Content-Type', 'text/event-stream');
+
+    return resp;
   } catch (error) {
     console.error(error);
     if (error instanceof OpenAIError) {

pages/api/google.ts

@@ -1,22 +1,29 @@
-import { ChatBody, Message } from '@/types/chat';
-import { GoogleSource } from '@/types/google';
+import { NextApiRequest, NextApiResponse } from 'next';
+
 import { OPENAI_API_HOST } from '@/utils/app/const';
 import { cleanSourceText } from '@/utils/server/google';
+
+import { Message } from '@/types/chat';
+import { GoogleBody, GoogleSource } from '@/types/google';
+
 import { Readability } from '@mozilla/readability';
 import endent from 'endent';
 import jsdom, { JSDOM } from 'jsdom';
-import { NextApiRequest, NextApiResponse } from 'next';
 
 const handler = async (req: NextApiRequest, res: NextApiResponse<any>) => {
   try {
-    const { messages, key, model } = req.body as ChatBody;
+    const { messages, key, model, googleAPIKey, googleCSEId } =
+      req.body as GoogleBody;
 
     const userMessage = messages[messages.length - 1];
+    const query = encodeURIComponent(userMessage.content.trim());
 
     const googleRes = await fetch(
       `https://customsearch.googleapis.com/customsearch/v1?key=${
-        process.env.GOOGLE_API_KEY
-      }&cx=${process.env.GOOGLE_CSE_ID}&q=${userMessage.content.trim()}&num=5`,
+        googleAPIKey ? googleAPIKey : process.env.GOOGLE_API_KEY
+      }&cx=${
+        googleCSEId ? googleCSEId : process.env.GOOGLE_CSE_ID
+      }&q=${query}&num=5`,
     );
 
     const googleData = await googleRes.json();
@@ -33,7 +40,16 @@ const handler = async (req: NextApiRequest, res: NextApiResponse<any>) => {
     const sourcesWithText: any = await Promise.all(
       sources.map(async (source) => {
         try {
-          const res = await fetch(source.link);
+          const timeoutPromise = new Promise((_, reject) =>
+            setTimeout(() => reject(new Error('Request timed out')), 5000),
+          );
+
+          const res = (await Promise.race([
+            fetch(source.link),
+            timeoutPromise,
+          ])) as any;
+
+          // if (res) {
           const html = await res.text();
 
           const virtualConsole = new jsdom.VirtualConsole();
@@ -56,9 +72,11 @@ const handler = async (req: NextApiRequest, res: NextApiResponse<any>) => {
               text: sourceText.slice(0, 2000),
             } as GoogleSource;
           }
+          // }
 
           return null;
         } catch (error) {
+          console.error(error);
           return null;
         }
       }),
@@ -108,7 +126,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse<any>) => {
         messages: [
           {
             role: 'system',
-            content: `Use the sources to provide an accurate response. Respond in markdown format. Cite the sources you used as [1](link), etc, as you use them.`,
+            content: `Use the sources to provide an accurate response. Respond in markdown format. Cite the sources you used as [1](link), etc, as you use them. Maximum 4 sentences.`,
           },
           answerMessage,
         ],
@@ -123,7 +141,8 @@ const handler = async (req: NextApiRequest, res: NextApiResponse<any>) => {
 
     res.status(200).json({ answer });
   } catch (error) {
-    return new Response('Error', { status: 500 });
+    console.error(error);
+    res.status(500).json({ error: 'Error'})
   }
 };
 

pages/api/home/home.context.tsx

@@ -0,0 +1,27 @@
+import { Dispatch, createContext } from 'react';
+
+import { ActionType } from '@/hooks/useCreateReducer';
+
+import { Conversation } from '@/types/chat';
+import { KeyValuePair } from '@/types/data';
+import { FolderType } from '@/types/folder';
+
+import { HomeInitialState } from './home.state';
+
+export interface HomeContextProps {
+  state: HomeInitialState;
+  dispatch: Dispatch<ActionType<HomeInitialState>>;
+  handleNewConversation: () => void;
+  handleCreateFolder: (name: string, type: FolderType) => void;
+  handleDeleteFolder: (folderId: string) => void;
+  handleUpdateFolder: (folderId: string, name: string) => void;
+  handleSelectConversation: (conversation: Conversation) => void;
+  handleUpdateConversation: (
+    conversation: Conversation,
+    data: KeyValuePair,
+  ) => void;
+}
+
+const HomeContext = createContext<HomeContextProps>(undefined!);
+
+export default HomeContext;

pages/api/home/home.state.tsx

@@ -0,0 +1,54 @@
+import { Conversation, Message } from '@/types/chat';
+import { ErrorMessage } from '@/types/error';
+import { FolderInterface } from '@/types/folder';
+import { OpenAIModel, OpenAIModelID } from '@/types/openai';
+import { PluginKey } from '@/types/plugin';
+import { Prompt } from '@/types/prompt';
+
+export interface HomeInitialState {
+  apiKey: string;
+  pluginKeys: PluginKey[];
+  loading: boolean;
+  lightMode: 'light' | 'dark';
+  messageIsStreaming: boolean;
+  modelError: ErrorMessage | null;
+  models: OpenAIModel[];
+  folders: FolderInterface[];
+  conversations: Conversation[];
+  selectedConversation: Conversation | undefined;
+  currentMessage: Message | undefined;
+  prompts: Prompt[];
+  temperature: number;
+  showChatbar: boolean;
+  showPromptbar: boolean;
+  currentFolder: FolderInterface | undefined;
+  messageError: boolean;
+  searchTerm: string;
+  defaultModelId: OpenAIModelID | undefined;
+  serverSideApiKeyIsSet: boolean;
+  serverSidePluginKeysSet: boolean;
+}
+
+export const initialState: HomeInitialState = {
+  apiKey: '',
+  loading: false,
+  pluginKeys: [],
+  lightMode: 'dark',
+  messageIsStreaming: false,
+  modelError: null,
+  models: [],
+  folders: [],
+  conversations: [],
+  selectedConversation: undefined,
+  currentMessage: undefined,
+  prompts: [],
+  temperature: 1,
+  showPromptbar: true,
+  showChatbar: true,
+  currentFolder: undefined,
+  messageError: false,
+  searchTerm: '',
+  defaultModelId: undefined,
+  serverSideApiKeyIsSet: false,
+  serverSidePluginKeysSet: false,
+};

pages/api/home/home.tsx

@@ -0,0 +1,431 @@
+import { useEffect, useRef, useState } from 'react';
+import { useQuery } from 'react-query';
+
+import { GetServerSideProps } from 'next';
+import { useTranslation } from 'next-i18next';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import Head from 'next/head';
+
+import { useCreateReducer } from '@/hooks/useCreateReducer';
+
+import useErrorService from '@/services/errorService';
+import useApiService from '@/services/useApiService';
+
+import {
+  cleanConversationHistory,
+  cleanSelectedConversation,
+} from '@/utils/app/clean';
+import { DEFAULT_SYSTEM_PROMPT, DEFAULT_TEMPERATURE } from '@/utils/app/const';
+import {
+  saveConversation,
+  saveConversations,
+  updateConversation,
+} from '@/utils/app/conversation';
+import { saveFolders } from '@/utils/app/folders';
+import { savePrompts } from '@/utils/app/prompts';
+import { getSettings } from '@/utils/app/settings';
+
+import { Conversation } from '@/types/chat';
+import { KeyValuePair } from '@/types/data';
+import { FolderInterface, FolderType } from '@/types/folder';
+import { OpenAIModelID, OpenAIModels, fallbackModelID } from '@/types/openai';
+import { Prompt } from '@/types/prompt';
+
+import { Chat } from '@/components/Chat/Chat';
+import { Chatbar } from '@/components/Chatbar/Chatbar';
+import { Navbar } from '@/components/Mobile/Navbar';
+import Promptbar from '@/components/Promptbar';
+
+import HomeContext from './home.context';
+import { HomeInitialState, initialState } from './home.state';
+
+import { v4 as uuidv4 } from 'uuid';
+
+interface Props {
+  serverSideApiKeyIsSet: boolean;
+  serverSidePluginKeysSet: boolean;
+  defaultModelId: OpenAIModelID;
+}
+
+const Home = ({
+  serverSideApiKeyIsSet,
+  serverSidePluginKeysSet,
+  defaultModelId,
+}: Props) => {
+  const { t } = useTranslation('chat');
+  const { getModels } = useApiService();
+  const { getModelsError } = useErrorService();
+  const [initialRender, setInitialRender] = useState<boolean>(true);
+
+  const contextValue = useCreateReducer<HomeInitialState>({
+    initialState,
+  });
+
+  const {
+    state: {
+      apiKey,
+      lightMode,
+      folders,
+      conversations,
+      selectedConversation,
+      prompts,
+      temperature,
+    },
+    dispatch,
+  } = contextValue;
+
+  const stopConversationRef = useRef<boolean>(false);
+
+  const { data, error, refetch } = useQuery(
+    ['GetModels', apiKey, serverSideApiKeyIsSet],
+    ({ signal }) => {
+      if (!apiKey && !serverSideApiKeyIsSet) return null;
+
+      return getModels(
+        {
+          key: apiKey,
+        },
+        signal,
+      );
+    },
+    { enabled: true, refetchOnMount: false },
+  );
+
+  useEffect(() => {
+    if (data) dispatch({ field: 'models', value: data });
+  }, [data, dispatch]);
+
+  useEffect(() => {
+    dispatch({ field: 'modelError', value: getModelsError(error) });
+  }, [dispatch, error, getModelsError]);
+
+  // FETCH MODELS ----------------------------------------------
+
+  const handleSelectConversation = (conversation: Conversation) => {
+    dispatch({
+      field: 'selectedConversation',
+      value: conversation,
+    });
+
+    saveConversation(conversation);
+  };
+
+  // FOLDER OPERATIONS  --------------------------------------------
+
+  const handleCreateFolder = (name: string, type: FolderType) => {
+    const newFolder: FolderInterface = {
+      id: uuidv4(),
+      name,
+      type,
+    };
+
+    const updatedFolders = [...folders, newFolder];
+
+    dispatch({ field: 'folders', value: updatedFolders });
+    saveFolders(updatedFolders);
+  };
+
+  const handleDeleteFolder = (folderId: string) => {
+    const updatedFolders = folders.filter((f) => f.id !== folderId);
+    dispatch({ field: 'folders', value: updatedFolders });
+    saveFolders(updatedFolders);
+
+    const updatedConversations: Conversation[] = conversations.map((c) => {
+      if (c.folderId === folderId) {
+        return {
+          ...c,
+          folderId: null,
+        };
+      }
+
+      return c;
+    });
+
+    dispatch({ field: 'conversations', value: updatedConversations });
+    saveConversations(updatedConversations);
+
+    const updatedPrompts: Prompt[] = prompts.map((p) => {
+      if (p.folderId === folderId) {
+        return {
+          ...p,
+          folderId: null,
+        };
+      }
+
+      return p;
+    });
+
+    dispatch({ field: 'prompts', value: updatedPrompts });
+    savePrompts(updatedPrompts);
+  };
+
+  const handleUpdateFolder = (folderId: string, name: string) => {
+    const updatedFolders = folders.map((f) => {
+      if (f.id === folderId) {
+        return {
+          ...f,
+          name,
+        };
+      }
+
+      return f;
+    });
+
+    dispatch({ field: 'folders', value: updatedFolders });
+
+    saveFolders(updatedFolders);
+  };
+
+  // CONVERSATION OPERATIONS  --------------------------------------------
+
+  const handleNewConversation = () => {
+    const lastConversation = conversations[conversations.length - 1];
+
+    const newConversation: Conversation = {
+      id: uuidv4(),
+      name: t('New Conversation'),
+      messages: [],
+      model: lastConversation?.model || {
+        id: OpenAIModels[defaultModelId].id,
+        name: OpenAIModels[defaultModelId].name,
+        maxLength: OpenAIModels[defaultModelId].maxLength,
+        tokenLimit: OpenAIModels[defaultModelId].tokenLimit,
+      },
+      prompt: DEFAULT_SYSTEM_PROMPT,
+      temperature: lastConversation?.temperature ?? DEFAULT_TEMPERATURE,
+      folderId: null,
+    };
+
+    const updatedConversations = [...conversations, newConversation];
+
+    dispatch({ field: 'selectedConversation', value: newConversation });
+    dispatch({ field: 'conversations', value: updatedConversations });
+
+    saveConversation(newConversation);
+    saveConversations(updatedConversations);
+
+    dispatch({ field: 'loading', value: false });
+  };
+
+  const handleUpdateConversation = (
+    conversation: Conversation,
+    data: KeyValuePair,
+  ) => {
+    const updatedConversation = {
+      ...conversation,
+      [data.key]: data.value,
+    };
+
+    const { single, all } = updateConversation(
+      updatedConversation,
+      conversations,
+    );
+
+    dispatch({ field: 'selectedConversation', value: single });
+    dispatch({ field: 'conversations', value: all });
+  };
+
+  // EFFECTS  --------------------------------------------
+
+  useEffect(() => {
+    if (window.innerWidth < 640) {
+      dispatch({ field: 'showChatbar', value: false });
+    }
+  }, [selectedConversation]);
+
+  useEffect(() => {
+    defaultModelId &&
+      dispatch({ field: 'defaultModelId', value: defaultModelId });
+    serverSideApiKeyIsSet &&
+      dispatch({
+        field: 'serverSideApiKeyIsSet',
+        value: serverSideApiKeyIsSet,
+      });
+    serverSidePluginKeysSet &&
+      dispatch({
+        field: 'serverSidePluginKeysSet',
+        value: serverSidePluginKeysSet,
+      });
+  }, [defaultModelId, serverSideApiKeyIsSet, serverSidePluginKeysSet]);
+
+  // ON LOAD --------------------------------------------
+
+  useEffect(() => {
+    const settings = getSettings();
+    if (settings.theme) {
+      dispatch({
+        field: 'lightMode',
+        value: settings.theme,
+      });
+    }
+
+    const apiKey = localStorage.getItem('apiKey');
+
+    if (serverSideApiKeyIsSet) {
+      dispatch({ field: 'apiKey', value: '' });
+
+      localStorage.removeItem('apiKey');
+    } else if (apiKey) {
+      dispatch({ field: 'apiKey', value: apiKey });
+    }
+
+    const pluginKeys = localStorage.getItem('pluginKeys');
+    if (serverSidePluginKeysSet) {
+      dispatch({ field: 'pluginKeys', value: [] });
+      localStorage.removeItem('pluginKeys');
+    } else if (pluginKeys) {
+      dispatch({ field: 'pluginKeys', value: pluginKeys });
+    }
+
+    if (window.innerWidth < 640) {
+      dispatch({ field: 'showChatbar', value: false });
+      dispatch({ field: 'showPromptbar', value: false });
+    }
+
+    const showChatbar = localStorage.getItem('showChatbar');
+    if (showChatbar) {
+      dispatch({ field: 'showChatbar', value: showChatbar === 'true' });
+    }
+
+    const showPromptbar = localStorage.getItem('showPromptbar');
+    if (showPromptbar) {
+      dispatch({ field: 'showPromptbar', value: showPromptbar === 'true' });
+    }
+
+    const folders = localStorage.getItem('folders');
+    if (folders) {
+      dispatch({ field: 'folders', value: JSON.parse(folders) });
+    }
+
+    const prompts = localStorage.getItem('prompts');
+    if (prompts) {
+      dispatch({ field: 'prompts', value: JSON.parse(prompts) });
+    }
+
+    const conversationHistory = localStorage.getItem('conversationHistory');
+    if (conversationHistory) {
+      const parsedConversationHistory: Conversation[] =
+        JSON.parse(conversationHistory);
+      const cleanedConversationHistory = cleanConversationHistory(
+        parsedConversationHistory,
+      );
+
+      dispatch({ field: 'conversations', value: cleanedConversationHistory });
+    }
+
+    const selectedConversation = localStorage.getItem('selectedConversation');
+    if (selectedConversation) {
+      const parsedSelectedConversation: Conversation =
+        JSON.parse(selectedConversation);
+      const cleanedSelectedConversation = cleanSelectedConversation(
+        parsedSelectedConversation,
+      );
+
+      dispatch({
+        field: 'selectedConversation',
+        value: cleanedSelectedConversation,
+      });
+    } else {
+      const lastConversation = conversations[conversations.length - 1];
+      dispatch({
+        field: 'selectedConversation',
+        value: {
+          id: uuidv4(),
+          name: t('New Conversation'),
+          messages: [],
+          model: OpenAIModels[defaultModelId],
+          prompt: DEFAULT_SYSTEM_PROMPT,
+          temperature: lastConversation?.temperature ?? DEFAULT_TEMPERATURE,
+          folderId: null,
+        },
+      });
+    }
+  }, [
+    defaultModelId,
+    dispatch,
+    serverSideApiKeyIsSet,
+    serverSidePluginKeysSet,
+  ]);
+
+  return (
+    <HomeContext.Provider
+      value={{
+        ...contextValue,
+        handleNewConversation,
+        handleCreateFolder,
+        handleDeleteFolder,
+        handleUpdateFolder,
+        handleSelectConversation,
+        handleUpdateConversation,
+      }}
+    >
+      <Head>
+        <title>Chatbot UI</title>
+        <meta name="description" content="ChatGPT but better." />
+        <meta
+          name="viewport"
+          content="height=device-height ,width=device-width, initial-scale=1, user-scalable=no"
+        />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      {selectedConversation && (
+        <main
+          className={`flex h-screen w-screen flex-col text-sm text-white dark:text-white ${lightMode}`}
+        >
+          <div className="fixed top-0 w-full sm:hidden">
+            <Navbar
+              selectedConversation={selectedConversation}
+              onNewConversation={handleNewConversation}
+            />
+          </div>
+
+          <div className="flex h-full w-full pt-[48px] sm:pt-0">
+            <Chatbar />
+
+            <div className="flex flex-1">
+              <Chat stopConversationRef={stopConversationRef} />
+            </div>
+
+            <Promptbar />
+          </div>
+        </main>
+      )}
+    </HomeContext.Provider>
+  );
+};
+export default Home;
+
+export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
+  const defaultModelId =
+    (process.env.DEFAULT_MODEL &&
+      Object.values(OpenAIModelID).includes(
+        process.env.DEFAULT_MODEL as OpenAIModelID,
+      ) &&
+      process.env.DEFAULT_MODEL) ||
+    fallbackModelID;
+
+  let serverSidePluginKeysSet = false;
+
+  const googleApiKey = process.env.GOOGLE_API_KEY;
+  const googleCSEId = process.env.GOOGLE_CSE_ID;
+
+  if (googleApiKey && googleCSEId) {
+    serverSidePluginKeysSet = true;
+  }
+
+  return {
+    props: {
+      serverSideApiKeyIsSet: !!process.env.OPENAI_API_KEY,
+      defaultModelId,
+      serverSidePluginKeysSet,
+      ...(await serverSideTranslations(locale ?? 'en', [
+        'common',
+        'chat',
+        'sidebar',
+        'markdown',
+        'promptbar',
+        'settings',
+      ])),
+    },
+  };
+};

pages/api/home/index.ts

@@ -0,0 +1 @@
+export { default, getServerSideProps } from './home';

pages/api/models.ts

@@ -1,5 +1,6 @@
+import { OPENAI_API_HOST, OPENAI_API_TYPE, OPENAI_API_VERSION, OPENAI_ORGANIZATION } from '@/utils/app/const';
+
 import { OpenAIModel, OpenAIModelID, OpenAIModels } from '@/types/openai';
-import { OPENAI_API_HOST } from '@/utils/app/const';
 
 export const config = {
   runtime: 'edge',
@@ -11,13 +12,23 @@ const handler = async (req: Request): Promise<Response> => {
       key: string;
     };
 
-    const response = await fetch(`${OPENAI_API_HOST}/v1/models`, {
+    let url = `${OPENAI_API_HOST}/v1/models`;
+    if (OPENAI_API_TYPE === 'azure') {
+      url = `${OPENAI_API_HOST}/openai/deployments?api-version=${OPENAI_API_VERSION}`;
+    }
+
+    const response = await fetch(url, {
       headers: {
         'Content-Type': 'application/json',
-        Authorization: `Bearer ${key ? key : process.env.OPENAI_API_KEY}`,
-        ...(process.env.OPENAI_ORGANIZATION && {
-          'OpenAI-Organization': process.env.OPENAI_ORGANIZATION,
-        })
+        ...(OPENAI_API_TYPE === 'openai' && {
+          Authorization: `Bearer ${key ? key : process.env.OPENAI_API_KEY}`
+        }),
+        ...(OPENAI_API_TYPE === 'azure' && {
+          'api-key': `${key ? key : process.env.OPENAI_API_KEY}`
+        }),
+        ...((OPENAI_API_TYPE === 'openai' && OPENAI_ORGANIZATION) && {
+          'OpenAI-Organization': OPENAI_ORGANIZATION,
+        }),
       },
     });
 
@@ -39,8 +50,9 @@ const handler = async (req: Request): Promise<Response> => {
 
     const models: OpenAIModel[] = json.data
       .map((model: any) => {
+        const model_name = (OPENAI_API_TYPE === 'azure') ? model.model : model.id;
         for (const [key, value] of Object.entries(OpenAIModelID)) {
-          if (value === model.id) {
+          if (value === model_name) {
             return {
               id: model.id,
               name: OpenAIModels[value].name,

pages/index.tsx

@@ -1,878 +1 @@
-import { Chat } from '@/components/Chat/Chat';
-import { Chatbar } from '@/components/Chatbar/Chatbar';
-import { Navbar } from '@/components/Mobile/Navbar';
-import { Promptbar } from '@/components/Promptbar/Promptbar';
-import { ChatBody, Conversation, Message } from '@/types/chat';
-import { KeyValuePair } from '@/types/data';
-import { ErrorMessage } from '@/types/error';
-import { LatestExportFormat, SupportedExportFormats } from '@/types/export';
-import { Folder, FolderType } from '@/types/folder';
-import {
-  OpenAIModel,
-  OpenAIModelID,
-  OpenAIModels,
-  fallbackModelID,
-} from '@/types/openai';
-import { Plugin, PluginKey } from '@/types/plugin';
-import { Prompt } from '@/types/prompt';
-import { getEndpoint } from '@/utils/app/api';
-import {
-  cleanConversationHistory,
-  cleanSelectedConversation,
-} from '@/utils/app/clean';
-import { DEFAULT_SYSTEM_PROMPT } from '@/utils/app/const';
-import {
-  saveConversation,
-  saveConversations,
-  updateConversation,
-} from '@/utils/app/conversation';
-import { saveFolders } from '@/utils/app/folders';
-import { exportData, importData } from '@/utils/app/importExport';
-import { savePrompts } from '@/utils/app/prompts';
-import { IconArrowBarLeft, IconArrowBarRight } from '@tabler/icons-react';
-import { GetServerSideProps } from 'next';
-import { useTranslation } from 'next-i18next';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import Head from 'next/head';
-import { useEffect, useRef, useState } from 'react';
-import toast from 'react-hot-toast';
-import { v4 as uuidv4 } from 'uuid';
-
-interface HomeProps {
-  serverSideApiKeyIsSet: boolean;
-  serverSidePluginKeysSet: boolean;
-  defaultModelId: OpenAIModelID;
-}
-
-const Home: React.FC<HomeProps> = ({
-  serverSideApiKeyIsSet,
-  serverSidePluginKeysSet,
-  defaultModelId,
-}) => {
-  const { t } = useTranslation('chat');
-
-  // STATE ----------------------------------------------
-
-  const [apiKey, setApiKey] = useState<string>('');
-  const [pluginKeys, setPluginKeys] = useState<PluginKey[]>([]);
-  const [loading, setLoading] = useState<boolean>(false);
-  const [lightMode, setLightMode] = useState<'dark' | 'light'>('dark');
-  const [messageIsStreaming, setMessageIsStreaming] = useState<boolean>(false);
-
-  const [modelError, setModelError] = useState<ErrorMessage | null>(null);
-
-  const [models, setModels] = useState<OpenAIModel[]>([]);
-
-  const [folders, setFolders] = useState<Folder[]>([]);
-
-  const [conversations, setConversations] = useState<Conversation[]>([]);
-  const [selectedConversation, setSelectedConversation] =
-    useState<Conversation>();
-  const [currentMessage, setCurrentMessage] = useState<Message>();
-
-  const [showSidebar, setShowSidebar] = useState<boolean>(true);
-
-  const [prompts, setPrompts] = useState<Prompt[]>([]);
-  const [showPromptbar, setShowPromptbar] = useState<boolean>(true);
-
-  // REFS ----------------------------------------------
-
-  const stopConversationRef = useRef<boolean>(false);
-
-  // FETCH RESPONSE ----------------------------------------------
-
-  const handleSend = async (
-    message: Message,
-    deleteCount = 0,
-    plugin: Plugin | null = null,
-  ) => {
-    if (selectedConversation) {
-      let updatedConversation: Conversation;
-
-      if (deleteCount) {
-        const updatedMessages = [...selectedConversation.messages];
-        for (let i = 0; i < deleteCount; i++) {
-          updatedMessages.pop();
-        }
-
-        updatedConversation = {
-          ...selectedConversation,
-          messages: [...updatedMessages, message],
-        };
-      } else {
-        updatedConversation = {
-          ...selectedConversation,
-          messages: [...selectedConversation.messages, message],
-        };
-      }
-
-      setSelectedConversation(updatedConversation);
-      setLoading(true);
-      setMessageIsStreaming(true);
-
-      const chatBody: ChatBody = {
-        model: updatedConversation.model,
-        messages: updatedConversation.messages,
-        key: apiKey,
-        prompt: updatedConversation.prompt,
-      };
-
-      const endpoint = getEndpoint(plugin);
-
-      const controller = new AbortController();
-      const response = await fetch(endpoint, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        signal: controller.signal,
-        body: JSON.stringify(chatBody),
-      });
-
-      if (!response.ok) {
-        setLoading(false);
-        setMessageIsStreaming(false);
-        toast.error(response.statusText);
-        return;
-      }
-
-      const data = response.body;
-
-      if (!data) {
-        setLoading(false);
-        setMessageIsStreaming(false);
-        return;
-      }
-
-      if (!plugin) {
-        if (updatedConversation.messages.length === 1) {
-          const { content } = message;
-          const customName =
-            content.length > 30 ? content.substring(0, 30) + '...' : content;
-
-          updatedConversation = {
-            ...updatedConversation,
-            name: customName,
-          };
-        }
-
-        setLoading(false);
-
-        const reader = data.getReader();
-        const decoder = new TextDecoder();
-        let done = false;
-        let isFirst = true;
-        let text = '';
-
-        while (!done) {
-          if (stopConversationRef.current === true) {
-            controller.abort();
-            done = true;
-            break;
-          }
-          const { value, done: doneReading } = await reader.read();
-          done = doneReading;
-          const chunkValue = decoder.decode(value);
-
-          text += chunkValue;
-
-          if (isFirst) {
-            isFirst = false;
-            const updatedMessages: Message[] = [
-              ...updatedConversation.messages,
-              { role: 'assistant', content: chunkValue },
-            ];
-
-            updatedConversation = {
-              ...updatedConversation,
-              messages: updatedMessages,
-            };
-
-            setSelectedConversation(updatedConversation);
-          } else {
-            const updatedMessages: Message[] = updatedConversation.messages.map(
-              (message, index) => {
-                if (index === updatedConversation.messages.length - 1) {
-                  return {
-                    ...message,
-                    content: text,
-                  };
-                }
-
-                return message;
-              },
-            );
-
-            updatedConversation = {
-              ...updatedConversation,
-              messages: updatedMessages,
-            };
-
-            setSelectedConversation(updatedConversation);
-          }
-        }
-
-        saveConversation(updatedConversation);
-
-        const updatedConversations: Conversation[] = conversations.map(
-          (conversation) => {
-            if (conversation.id === selectedConversation.id) {
-              return updatedConversation;
-            }
-
-            return conversation;
-          },
-        );
-
-        if (updatedConversations.length === 0) {
-          updatedConversations.push(updatedConversation);
-        }
-
-        setConversations(updatedConversations);
-        saveConversations(updatedConversations);
-
-        setMessageIsStreaming(false);
-      } else {
-        const { answer } = await response.json();
-
-        const updatedMessages: Message[] = [
-          ...updatedConversation.messages,
-          { role: 'assistant', content: answer },
-        ];
-
-        updatedConversation = {
-          ...updatedConversation,
-          messages: updatedMessages,
-        };
-
-        setSelectedConversation(updatedConversation);
-        saveConversation(updatedConversation);
-
-        const updatedConversations: Conversation[] = conversations.map(
-          (conversation) => {
-            if (conversation.id === selectedConversation.id) {
-              return updatedConversation;
-            }
-
-            return conversation;
-          },
-        );
-
-        if (updatedConversations.length === 0) {
-          updatedConversations.push(updatedConversation);
-        }
-
-        setConversations(updatedConversations);
-        saveConversations(updatedConversations);
-
-        setLoading(false);
-        setMessageIsStreaming(false);
-      }
-    }
-  };
-
-  // FETCH MODELS ----------------------------------------------
-
-  const fetchModels = async (key: string) => {
-    const error = {
-      title: t('Error fetching models.'),
-      code: null,
-      messageLines: [
-        t(
-          'Make sure your OpenAI API key is set in the bottom left of the sidebar.',
-        ),
-        t('If you completed this step, OpenAI may be experiencing issues.'),
-      ],
-    } as ErrorMessage;
-
-    const response = await fetch('/api/models', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        key,
-      }),
-    });
-
-    if (!response.ok) {
-      try {
-        const data = await response.json();
-        Object.assign(error, {
-          code: data.error?.code,
-          messageLines: [data.error?.message],
-        });
-      } catch (e) {}
-      setModelError(error);
-      return;
-    }
-
-    const data = await response.json();
-
-    if (!data) {
-      setModelError(error);
-      return;
-    }
-
-    setModels(data);
-    setModelError(null);
-  };
-
-  // BASIC HANDLERS --------------------------------------------
-
-  const handleLightMode = (mode: 'dark' | 'light') => {
-    setLightMode(mode);
-    localStorage.setItem('theme', mode);
-  };
-
-  const handleApiKeyChange = (apiKey: string) => {
-    setApiKey(apiKey);
-    localStorage.setItem('apiKey', apiKey);
-  };
-
-  const handlePluginKeyChange = (pluginKey: PluginKey) => {
-    if (pluginKeys.some((key) => key.pluginId === pluginKey.pluginId)) {
-      const updatedPluginKeys = pluginKeys.map((key) => {
-        if (key.pluginId === pluginKey.pluginId) {
-          return pluginKey;
-        }
-
-        return key;
-      });
-
-      setPluginKeys(updatedPluginKeys);
-
-      localStorage.setItem('pluginKeys', JSON.stringify(updatedPluginKeys));
-    } else {
-      setPluginKeys([...pluginKeys, pluginKey]);
-
-      localStorage.setItem(
-        'pluginKeys',
-        JSON.stringify([...pluginKeys, pluginKey]),
-      );
-    }
-  };
-
-  const handleClearPluginKey = (pluginKey: PluginKey) => {
-    const updatedPluginKeys = pluginKeys.filter(
-      (key) => key.pluginId !== pluginKey.pluginId,
-    );
-
-    if (updatedPluginKeys.length === 0) {
-      setPluginKeys([]);
-      localStorage.removeItem('pluginKeys');
-      return;
-    }
-
-    setPluginKeys(updatedPluginKeys);
-
-    localStorage.setItem('pluginKeys', JSON.stringify(updatedPluginKeys));
-  };
-
-  const handleToggleChatbar = () => {
-    setShowSidebar(!showSidebar);
-    localStorage.setItem('showChatbar', JSON.stringify(!showSidebar));
-  };
-
-  const handleTogglePromptbar = () => {
-    setShowPromptbar(!showPromptbar);
-    localStorage.setItem('showPromptbar', JSON.stringify(!showPromptbar));
-  };
-
-  const handleExportData = () => {
-    exportData();
-  };
-
-  const handleImportConversations = (data: SupportedExportFormats) => {
-    const { history, folders, prompts }: LatestExportFormat = importData(data);
-
-    setConversations(history);
-    setSelectedConversation(history[history.length - 1]);
-    setFolders(folders);
-    setPrompts(prompts);
-  };
-
-  const handleSelectConversation = (conversation: Conversation) => {
-    setSelectedConversation(conversation);
-    saveConversation(conversation);
-  };
-
-  // FOLDER OPERATIONS  --------------------------------------------
-
-  const handleCreateFolder = (name: string, type: FolderType) => {
-    const newFolder: Folder = {
-      id: uuidv4(),
-      name,
-      type,
-    };
-
-    const updatedFolders = [...folders, newFolder];
-
-    setFolders(updatedFolders);
-    saveFolders(updatedFolders);
-  };
-
-  const handleDeleteFolder = (folderId: string) => {
-    const updatedFolders = folders.filter((f) => f.id !== folderId);
-    setFolders(updatedFolders);
-    saveFolders(updatedFolders);
-
-    const updatedConversations: Conversation[] = conversations.map((c) => {
-      if (c.folderId === folderId) {
-        return {
-          ...c,
-          folderId: null,
-        };
-      }
-
-      return c;
-    });
-    setConversations(updatedConversations);
-    saveConversations(updatedConversations);
-
-    const updatedPrompts: Prompt[] = prompts.map((p) => {
-      if (p.folderId === folderId) {
-        return {
-          ...p,
-          folderId: null,
-        };
-      }
-
-      return p;
-    });
-    setPrompts(updatedPrompts);
-    savePrompts(updatedPrompts);
-  };
-
-  const handleUpdateFolder = (folderId: string, name: string) => {
-    const updatedFolders = folders.map((f) => {
-      if (f.id === folderId) {
-        return {
-          ...f,
-          name,
-        };
-      }
-
-      return f;
-    });
-
-    setFolders(updatedFolders);
-    saveFolders(updatedFolders);
-  };
-
-  // CONVERSATION OPERATIONS  --------------------------------------------
-
-  const handleNewConversation = () => {
-    const lastConversation = conversations[conversations.length - 1];
-
-    const newConversation: Conversation = {
-      id: uuidv4(),
-      name: `${t('New Conversation')}`,
-      messages: [],
-      model: lastConversation?.model || {
-        id: OpenAIModels[defaultModelId].id,
-        name: OpenAIModels[defaultModelId].name,
-        maxLength: OpenAIModels[defaultModelId].maxLength,
-        tokenLimit: OpenAIModels[defaultModelId].tokenLimit,
-      },
-      prompt: DEFAULT_SYSTEM_PROMPT,
-      folderId: null,
-    };
-
-    const updatedConversations = [...conversations, newConversation];
-
-    setSelectedConversation(newConversation);
-    setConversations(updatedConversations);
-
-    saveConversation(newConversation);
-    saveConversations(updatedConversations);
-
-    setLoading(false);
-  };
-
-  const handleDeleteConversation = (conversation: Conversation) => {
-    const updatedConversations = conversations.filter(
-      (c) => c.id !== conversation.id,
-    );
-    setConversations(updatedConversations);
-    saveConversations(updatedConversations);
-
-    if (updatedConversations.length > 0) {
-      setSelectedConversation(
-        updatedConversations[updatedConversations.length - 1],
-      );
-      saveConversation(updatedConversations[updatedConversations.length - 1]);
-    } else {
-      setSelectedConversation({
-        id: uuidv4(),
-        name: 'New conversation',
-        messages: [],
-        model: OpenAIModels[defaultModelId],
-        prompt: DEFAULT_SYSTEM_PROMPT,
-        folderId: null,
-      });
-      localStorage.removeItem('selectedConversation');
-    }
-  };
-
-  const handleUpdateConversation = (
-    conversation: Conversation,
-    data: KeyValuePair,
-  ) => {
-    const updatedConversation = {
-      ...conversation,
-      [data.key]: data.value,
-    };
-
-    const { single, all } = updateConversation(
-      updatedConversation,
-      conversations,
-    );
-
-    setSelectedConversation(single);
-    setConversations(all);
-  };
-
-  const handleClearConversations = () => {
-    setConversations([]);
-    localStorage.removeItem('conversationHistory');
-
-    setSelectedConversation({
-      id: uuidv4(),
-      name: 'New conversation',
-      messages: [],
-      model: OpenAIModels[defaultModelId],
-      prompt: DEFAULT_SYSTEM_PROMPT,
-      folderId: null,
-    });
-    localStorage.removeItem('selectedConversation');
-
-    const updatedFolders = folders.filter((f) => f.type !== 'chat');
-    setFolders(updatedFolders);
-    saveFolders(updatedFolders);
-  };
-
-  const handleEditMessage = (message: Message, messageIndex: number) => {
-    if (selectedConversation) {
-      const updatedMessages = selectedConversation.messages
-        .map((m, i) => {
-          if (i < messageIndex) {
-            return m;
-          }
-        })
-        .filter((m) => m) as Message[];
-
-      const updatedConversation = {
-        ...selectedConversation,
-        messages: updatedMessages,
-      };
-
-      const { single, all } = updateConversation(
-        updatedConversation,
-        conversations,
-      );
-
-      setSelectedConversation(single);
-      setConversations(all);
-
-      setCurrentMessage(message);
-    }
-  };
-
-  // PROMPT OPERATIONS --------------------------------------------
-
-  const handleCreatePrompt = () => {
-    const newPrompt: Prompt = {
-      id: uuidv4(),
-      name: `Prompt ${prompts.length + 1}`,
-      description: '',
-      content: '',
-      model: OpenAIModels[defaultModelId],
-      folderId: null,
-    };
-
-    const updatedPrompts = [...prompts, newPrompt];
-
-    setPrompts(updatedPrompts);
-    savePrompts(updatedPrompts);
-  };
-
-  const handleUpdatePrompt = (prompt: Prompt) => {
-    const updatedPrompts = prompts.map((p) => {
-      if (p.id === prompt.id) {
-        return prompt;
-      }
-
-      return p;
-    });
-
-    setPrompts(updatedPrompts);
-    savePrompts(updatedPrompts);
-  };
-
-  const handleDeletePrompt = (prompt: Prompt) => {
-    const updatedPrompts = prompts.filter((p) => p.id !== prompt.id);
-    setPrompts(updatedPrompts);
-    savePrompts(updatedPrompts);
-  };
-
-  // EFFECTS  --------------------------------------------
-
-  useEffect(() => {
-    if (currentMessage) {
-      handleSend(currentMessage);
-      setCurrentMessage(undefined);
-    }
-  }, [currentMessage]);
-
-  useEffect(() => {
-    if (window.innerWidth < 640) {
-      setShowSidebar(false);
-    }
-  }, [selectedConversation]);
-
-  useEffect(() => {
-    if (apiKey) {
-      fetchModels(apiKey);
-    }
-  }, [apiKey]);
-
-  // ON LOAD --------------------------------------------
-
-  useEffect(() => {
-    const theme = localStorage.getItem('theme');
-    if (theme) {
-      setLightMode(theme as 'dark' | 'light');
-    }
-
-    const apiKey = localStorage.getItem('apiKey');
-    if (serverSideApiKeyIsSet) {
-      fetchModels('');
-      setApiKey('');
-      localStorage.removeItem('apiKey');
-    } else if (apiKey) {
-      setApiKey(apiKey);
-      fetchModels(apiKey);
-    }
-
-    const pluginKeys = localStorage.getItem('pluginKeys');
-    if (serverSidePluginKeysSet) {
-      setPluginKeys([]);
-      localStorage.removeItem('pluginKeys');
-    } else if (pluginKeys) {
-      setPluginKeys(JSON.parse(pluginKeys));
-    }
-
-    if (window.innerWidth < 640) {
-      setShowSidebar(false);
-    }
-
-    const showChatbar = localStorage.getItem('showChatbar');
-    if (showChatbar) {
-      setShowSidebar(showChatbar === 'true');
-    }
-
-    const showPromptbar = localStorage.getItem('showPromptbar');
-    if (showPromptbar) {
-      setShowPromptbar(showPromptbar === 'true');
-    }
-
-    const folders = localStorage.getItem('folders');
-    if (folders) {
-      setFolders(JSON.parse(folders));
-    }
-
-    const prompts = localStorage.getItem('prompts');
-    if (prompts) {
-      setPrompts(JSON.parse(prompts));
-    }
-
-    const conversationHistory = localStorage.getItem('conversationHistory');
-    if (conversationHistory) {
-      const parsedConversationHistory: Conversation[] =
-        JSON.parse(conversationHistory);
-      const cleanedConversationHistory = cleanConversationHistory(
-        parsedConversationHistory,
-      );
-      setConversations(cleanedConversationHistory);
-    }
-
-    const selectedConversation = localStorage.getItem('selectedConversation');
-    if (selectedConversation) {
-      const parsedSelectedConversation: Conversation =
-        JSON.parse(selectedConversation);
-      const cleanedSelectedConversation = cleanSelectedConversation(
-        parsedSelectedConversation,
-      );
-      setSelectedConversation(cleanedSelectedConversation);
-    } else {
-      setSelectedConversation({
-        id: uuidv4(),
-        name: 'New conversation',
-        messages: [],
-        model: OpenAIModels[defaultModelId],
-        prompt: DEFAULT_SYSTEM_PROMPT,
-        folderId: null,
-      });
-    }
-  }, [serverSideApiKeyIsSet]);
-
-  return (
-    <>
-      <Head>
-        <title>Chatbot UI</title>
-        <meta name="description" content="ChatGPT but better." />
-        <meta
-          name="viewport"
-          content="height=device-height ,width=device-width, initial-scale=1, user-scalable=no"
-        />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      {selectedConversation && (
-        <main
-          className={`flex h-screen w-screen flex-col text-sm text-white dark:text-white ${lightMode}`}
-        >
-          <div className="fixed top-0 w-full sm:hidden">
-            <Navbar
-              selectedConversation={selectedConversation}
-              onNewConversation={handleNewConversation}
-            />
-          </div>
-
-          <div className="flex h-full w-full pt-[48px] sm:pt-0">
-            {showSidebar ? (
-              <div>
-                <Chatbar
-                  loading={messageIsStreaming}
-                  conversations={conversations}
-                  lightMode={lightMode}
-                  selectedConversation={selectedConversation}
-                  apiKey={apiKey}
-                  pluginKeys={pluginKeys}
-                  folders={folders.filter((folder) => folder.type === 'chat')}
-                  onToggleLightMode={handleLightMode}
-                  onCreateFolder={(name) => handleCreateFolder(name, 'chat')}
-                  onDeleteFolder={handleDeleteFolder}
-                  onUpdateFolder={handleUpdateFolder}
-                  onNewConversation={handleNewConversation}
-                  onSelectConversation={handleSelectConversation}
-                  onDeleteConversation={handleDeleteConversation}
-                  onUpdateConversation={handleUpdateConversation}
-                  onApiKeyChange={handleApiKeyChange}
-                  onClearConversations={handleClearConversations}
-                  onExportConversations={handleExportData}
-                  onImportConversations={handleImportConversations}
-                  onPluginKeyChange={handlePluginKeyChange}
-                  onClearPluginKey={handleClearPluginKey}
-                />
-
-                <button
-                  className="fixed top-5 left-[270px] z-50 h-7 w-7 hover:text-gray-400 dark:text-white dark:hover:text-gray-300 sm:top-0.5 sm:left-[270px] sm:h-8 sm:w-8 sm:text-neutral-700"
-                  onClick={handleToggleChatbar}
-                >
-                  <IconArrowBarLeft />
-                </button>
-                <div
-                  onClick={handleToggleChatbar}
-                  className="absolute top-0 left-0 z-10 h-full w-full bg-black opacity-70 sm:hidden"
-                ></div>
-              </div>
-            ) : (
-              <button
-                className="fixed top-2.5 left-4 z-50 h-7 w-7 text-white hover:text-gray-400 dark:text-white dark:hover:text-gray-300 sm:top-0.5 sm:left-4 sm:h-8 sm:w-8 sm:text-neutral-700"
-                onClick={handleToggleChatbar}
-              >
-                <IconArrowBarRight />
-              </button>
-            )}
-
-            <div className="flex flex-1">
-              <Chat
-                conversation={selectedConversation}
-                messageIsStreaming={messageIsStreaming}
-                apiKey={apiKey}
-                serverSideApiKeyIsSet={serverSideApiKeyIsSet}
-                defaultModelId={defaultModelId}
-                modelError={modelError}
-                models={models}
-                loading={loading}
-                prompts={prompts}
-                onSend={handleSend}
-                onUpdateConversation={handleUpdateConversation}
-                onEditMessage={handleEditMessage}
-                stopConversationRef={stopConversationRef}
-              />
-            </div>
-
-            {showPromptbar ? (
-              <div>
-                <Promptbar
-                  prompts={prompts}
-                  folders={folders.filter((folder) => folder.type === 'prompt')}
-                  onCreatePrompt={handleCreatePrompt}
-                  onUpdatePrompt={handleUpdatePrompt}
-                  onDeletePrompt={handleDeletePrompt}
-                  onCreateFolder={(name) => handleCreateFolder(name, 'prompt')}
-                  onDeleteFolder={handleDeleteFolder}
-                  onUpdateFolder={handleUpdateFolder}
-                />
-                <button
-                  className="fixed top-5 right-[270px] z-50 h-7 w-7 hover:text-gray-400 dark:text-white dark:hover:text-gray-300 sm:top-0.5 sm:right-[270px] sm:h-8 sm:w-8 sm:text-neutral-700"
-                  onClick={handleTogglePromptbar}
-                >
-                  <IconArrowBarRight />
-                </button>
-                <div
-                  onClick={handleTogglePromptbar}
-                  className="absolute top-0 left-0 z-10 h-full w-full bg-black opacity-70 sm:hidden"
-                ></div>
-              </div>
-            ) : (
-              <button
-                className="fixed top-2.5 right-4 z-50 h-7 w-7 text-white hover:text-gray-400 dark:text-white dark:hover:text-gray-300 sm:top-0.5 sm:right-4 sm:h-8 sm:w-8 sm:text-neutral-700"
-                onClick={handleTogglePromptbar}
-              >
-                <IconArrowBarLeft />
-              </button>
-            )}
-          </div>
-        </main>
-      )}
-    </>
-  );
-};
-export default Home;
-
-export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
-  const defaultModelId =
-    (process.env.DEFAULT_MODEL &&
-      Object.values(OpenAIModelID).includes(
-        process.env.DEFAULT_MODEL as OpenAIModelID,
-      ) &&
-      process.env.DEFAULT_MODEL) ||
-    fallbackModelID;
-
-  let serverSidePluginKeysSet = false;
-
-  const googleApiKey = process.env.GOOGLE_API_KEY;
-  const googleCSEId = process.env.GOOGLE_CSE_ID;
-
-  if (googleApiKey && googleCSEId) {
-    serverSidePluginKeysSet = true;
-  }
-
-  return {
-    props: {
-      serverSideApiKeyIsSet: !!process.env.OPENAI_API_KEY,
-      defaultModelId,
-      serverSidePluginKeysSet,
-      ...(await serverSideTranslations(locale ?? 'en', [
-        'common',
-        'chat',
-        'sidebar',
-        'markdown',
-        'promptbar',
-      ])),
-    },
-  };
-};
+export { default, getServerSideProps } from './api/home';

prettier.config.js

@@ -1,5 +1,25 @@
 module.exports = {
   trailingComma: 'all',
   singleQuote: true,
-  plugins: [require('prettier-plugin-tailwindcss')]
+  plugins: [
+    'prettier-plugin-tailwindcss',
+    '@trivago/prettier-plugin-sort-imports',
+  ],
+  importOrder: [
+    'react', // React
+    '^react-.*$', // React-related imports
+    '^next', // Next-related imports
+    '^next-.*$', // Next-related imports
+    '^next/.*$', // Next-related imports
+    '^.*/hooks/.*$', // Hooks
+    '^.*/services/.*$', // Services
+    '^.*/utils/.*$', // Utils
+    '^.*/types/.*$', // Types
+    '^.*/pages/.*$', // Components
+    '^.*/components/.*$', // Components
+    '^[./]', // Other imports
+    '.*', // Any uncaught imports
+  ],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
 };

public/locales/ar/chat.json

@@ -23,15 +23,10 @@
 
   "click if using a .env.local file": ".env.local انقر إذا كنت تستخدم ملف",
 
-  
   "Message limit is {{maxLength}} characters. You have entered {{valueLength}} characters.": "حرفًا {{maxLength}}  حد الرسالة هو {{valueLength}} لقد أدخلت ",
 
- 
-
-  
-  
-  
   "Please enter a message": "يرجى إدخال رسالة",
   "Chatbot UI is an advanced chatbot kit for OpenAI's chat models aiming to mimic ChatGPT's interface and functionality.": "Chatbot UI هي مجموعة متقدمة للدردشة تستخدم",
-  "Are you sure you want to clear all messages?": "هل أنت متأكد أنك تريد مسح كافة الرسائل؟"
+  "Are you sure you want to clear all messages?": "هل أنت متأكد أنك تريد مسح كافة الرسائل؟",
+  "Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic.": "القيم الأعلى مثل 0.8 ستجعل الإخراج أكثر عشوائية، في حين أن القيم الأقل مثل 0.2 ستجعله أكثر تركيزًا وتحديدًا."
 }

public/locales/ar/markdown.json

@@ -1,5 +1,5 @@
 {
-"Copy code": "نسخ الكود",
-"Copied!": "تم النسخ!",
-"Enter file name": "أدخل اسم الملف"
-}
+  "Copy code": "نسخ الكود",
+  "Copied!": "تم النسخ!",
+  "Enter file name": "أدخل اسم الملف"
+}

public/locales/ar/promptbar.json

@@ -9,4 +9,4 @@
   "Prompt": "مطلب",
   "Prompt content. Use {{}} to denote a variable. Ex: {{name}} is a {{adjective}} {{noun}}": "محتوى المطلب. استخدم {{}} للإشارة إلى متغير. مثال: {{الاسم}} هي {{صفة}} {{اسم}}",
   "Save": "حفظ"
-  }
+}

public/locales/ar/settings.json

@@ -0,0 +1,4 @@
+{
+  "Dark mode": "الوضع الداكن",
+  "Light mode": "الوضع الفاتح"
+}

public/locales/ar/sidebar.json

@@ -10,4 +10,4 @@
   "Export data": "تصدير المحادثات",
   "Dark mode": "الوضع الداكن",
   "Light mode": "الوضع الفاتح"
-}
+}

public/locales/bn/chat.json

@@ -16,13 +16,14 @@
   "Error fetching models.": "মডেল পেতে সমস্যা হচ্ছে।",
   "AI": "AI",
   "You": "তুমি",
-  "Cancel": "Cancel",
-  "Save & Submit": "Save & Submit",
+  "Cancel": "বাতিল করুন",
+  "Save & Submit": "সংরক্ষণ করুন এবং জমা দিন",
   "Make sure your OpenAI API key is set in the bottom left of the sidebar.": "নিশ্চিত করুন যে আপনার OpenAI API key সাইডবারের নীচে বাম দিকে সেট করা আছে।",
   "If you completed this step, OpenAI may be experiencing issues.": "আপনি এই ধাপটি সম্পন্ন করে থাকলে, হতে পারে যে OpenAI কোনো সমস্যার সম্মুখীন হয়েছে।",
-  "click if using a .env.local file": "click if using a .env.local file",
+  "click if using a .env.local file": "একটি .env.local ফাইল ব্যবহার করলে এখানে ক্লিক করুন",
   "Message limit is {{maxLength}} characters. You have entered {{valueLength}} characters.": "বার্তার সর্বোচ্চ সীমা হল {{maxLength}} অক্ষর৷ আপনি {{valueLength}} অক্ষর লিখেছেন।",
   "Please enter a message": "দয়া করে একটি মেসেজ লিখুন",
   "Chatbot UI is an advanced chatbot kit for OpenAI's chat models aiming to mimic ChatGPT's interface and functionality.": "Chatbot UI হল OpenAI-এর চ্যাট মডেলগুলির জন্য একটি উন্নত চ্যাটবট কিট যার লক্ষ্য হল ChatGPT-এর ইন্টারফেস এবং কার্যকারিতা অনুকরণ করা।",
-  "Are you sure you want to clear all messages?": "সমস্ত বার্তা মুছে ফেলতে আপনি কি নিশ্চিত?"
+  "Are you sure you want to clear all messages?": "সমস্ত বার্তা মুছে ফেলতে আপনি কি নিশ্চিত?",
+  "Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic.": "০.৮ এর বেশি মান দিলে আউটপুট বেশি ইউনিক হবে, যেহেতু ০.২ এর মতো নিম্নমানের মান দিলে তা আরও ফোকাস এবং ধারাবাহিকতা বজায় থাকবে এবং নিশ্চয়তামূলক হবে।"
 }

public/locales/bn/promptbar.json

@@ -1,12 +1,12 @@
 {
-  "New prompt": "New prompt",
-  "New folder": "New folder",
-  "No prompts.": "No prompts.",
-  "Search prompts...": "Search prompts...",
-  "Name": "Name",
-  "Description": "Description",
-  "A description for your prompt.": "A description for your prompt.",
+  "New prompt": "নতুন prompt",
+  "New folder": "নতুন ফোল্ডার",
+  "No prompts.": "কোনো prompts নেই।",
+  "Search prompts...": "prompts অনুসন্ধান হচ্ছে...",
+  "Name": "নাম",
+  "Description": "বর্ণনা",
+  "A description for your prompt.": "আপনার Prompt জন্য একটি বিবরণ লিখুন.",
   "Prompt": "Prompt",
   "Prompt content. Use {{}} to denote a variable. Ex: {{name}} is a {{adjective}} {{noun}}": "Prompt content. Use {{}} to denote a variable. Ex: {{name}} is a {{adjective}} {{noun}}",
-  "Save": "Save"
-}
+  "Save": "সংরক্ষণ করুন"
+}

public/locales/bn/settings.json

@@ -0,0 +1,4 @@
+{
+  "Dark mode": "ডার্ক মোড",
+  "Light mode": "লাইট মোড"
+}

public/locales/bn/sidebar.json

@@ -6,8 +6,6 @@
   "OpenAI API Key": "OpenAI API Key",
   "Import data": "আলাপচারিতা ইমপোর্ট",
   "Are you sure?": "আপনি কি নিশ্চিত?",
-  "Clear conversations": "আলাপচারিতা ক্লিয়ার",
-  "Export data": "আলাপচারিতা এক্সপোর্ট",
-  "Dark mode": "ডার্ক মোড",
-  "Light mode": "লাইট মোড"
-}
+  "Clear conversations": "কথোপকথন পরিষ্কার করুন",
+  "Export data": "আলাপচারিতা এক্সপোর্ট"
+}

public/locales/ca/chat.json

@@ -0,0 +1,29 @@
+{
+  "OpenAI API Key Required": "Cal la clau d'API d'OpenAI",
+  "Please set your OpenAI API key in the bottom left of the sidebar.": "Si us plau, introdueix la teva clau d'API d'OpenAI a la cantonada inferior esquerra de la barra lateral.",
+  "Stop Generating": "Parar de generar",
+  "Prompt limit is {{maxLength}} characters": "El límit del missatge és de {{maxLength}} caràcters",
+  "System Prompt": "Missatge del sistema",
+  "You are ChatGPT, a large language model trained by OpenAI. Follow the user's instructions carefully. Respond using markdown.": "Ets ChatGPT, un model de llenguatge gran entrenat per OpenAI. Segueix les instruccions de l'usuari amb cura. Respon utilitzant markdown.",
+  "Enter a prompt": "Introdueix un missatge",
+  "Regenerate response": "Regenerar resposta",
+  "Sorry, there was an error.": "Ho sentim, ha ocorregut un error.",
+  "Model": "Model",
+  "Conversation": "Conversa",
+  "OR": "O",
+  "Loading...": "Carregant...",
+  "Type a message...": "Escriu un missatge...",
+  "Error fetching models.": "Error en obtenir els models.",
+  "AI": "IA",
+  "You": "Tu",
+  "Cancel": "Cancel·lar",
+  "Save & Submit": "Guardar i enviar",
+  "Make sure your OpenAI API key is set in the bottom left of the sidebar.": "Assegura't que has introduït la clau d'API d'OpenAI a la cantonada inferior esquerra de la barra lateral.",
+  "If you completed this step, OpenAI may be experiencing issues.": "Si has completat aquest pas, OpenAI podria estar experimentant problemes.",
+  "click if using a .env.local file": "fes clic si estàs utilitzant un fitxer .env.local",
+  "Message limit is {{maxLength}} characters. You have entered {{valueLength}} characters.": "El límit del missatge és de {{maxLength}} caràcters. Has introduït {{valueLength}} caràcters.",
+  "Please enter a message": "Si us plau, introdueix un missatge",
+  "Chatbot UI is an advanced chatbot kit for OpenAI's chat models aiming to mimic ChatGPT's interface and functionality.": "Chatbot UI és un kit avançat de chatbot per als models de xat d'OpenAI que busca imitar la interfície i funcionalitat de ChatGPT.",
+  "Are you sure you want to clear all messages?": "Estàs segur que vols esborrar tots els missatges?",
+  "Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic.": "Valors més alts com 0,8 faran que la sortida sigui més aleatòria, mentre que valors més baixos com 0,2 la faran més enfocada i determinista."
+}

public/locales/ca/common.json

@@ -0,0 +1 @@
+{}

public/locales/ca/markdown.json

@@ -0,0 +1,5 @@
+{
+  "Copy code": "Copiar codi",
+  "Copied!": "Copiat!",
+  "Enter file name": "Introdueix el nom de l'arxiu"
+}

public/locales/ca/promptbar.json

@@ -0,0 +1,12 @@
+{
+  "New prompt": "Nou prompt",
+  "New folder": "Nova carpeta",
+  "No prompts.": "No hi ha prompts.",
+  "Search prompts...": "Cerca prompts...",
+  "Name": "Nom",
+  "Description": "Descripció",
+  "A description for your prompt.": "Descripció del teu prompt.",
+  "Prompt": "Prompt",
+  "Prompt content. Use {{}} to denote a variable. Ex: {{name}} is a {{adjective}} {{noun}}": "Contingut del missatge. Utilitza {{}} per indicar una variable. Ex: {{nom}} és un {{adjectiu}} {{substantiu}}",
+  "Save": "Guardar"
+}

public/locales/ca/sidebar.json

@@ -0,0 +1,13 @@
+{
+  "New folder": "Nova carpeta",
+  "New chat": "Nova conversa",
+  "No conversations.": "No hi ha converses.",
+  "Search conversations...": "Cerca converses...",
+  "OpenAI API Key": "Clau d'API d'OpenAI",
+  "Import data": "Importar converses",
+  "Are you sure?": "Estàs segur?",
+  "Clear conversations": "Esborrar converses",
+  "Export data": "Exportar converses",
+  "Dark mode": "Mode fosc",
+  "Light mode": "Mode clar"
+}

public/locales/de/chat.json

@@ -24,5 +24,6 @@
   "Message limit is {{maxLength}} characters. You have entered {{valueLength}} characters.": "Das Nachrichtenlimit beträgt {{maxLength}} Zeichen. Du hast bereits {{valueLength}} Zeichen eingegeben.",
   "Please enter a message": "Bitte gib eine Nachricht ein",
   "Chatbot UI is an advanced chatbot kit for OpenAI's chat models aiming to mimic ChatGPT's interface and functionality.": "Chatbot UI ist ein fortschrittliches Chatbot-Toolkit für OpenAI's Chat-Modelle, das darauf abzielt, die Benutzeroberfläche und Funktionalität von ChatGPT nachzuahmen.",
-  "Are you sure you want to clear all messages?": "Bist du sicher, dass du alle Nachrichten löschen möchtest?"
-}
+  "Are you sure you want to clear all messages?": "Bist du sicher, dass du alle Nachrichten löschen möchtest?",
+  "Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic.": "Höhere Werte wie 0,8 machen die Ausgabe zufälliger, während niedrigere Werte wie 0,2 sie fokussierter und deterministischer machen werden."
+}

public/locales/de/promptbar.json

@@ -9,4 +9,4 @@
   "Prompt": "Prompt",
   "Prompt content. Use {{}} to denote a variable. Ex: {{name}} is a {{adjective}} {{noun}}": "Prompt content. Use {{}} to denote a variable. Ex: {{name}} is a {{adjective}} {{noun}}",
   "Save": "Save"
-}
+}

public/locales/de/settings.json

@@ -0,0 +1,4 @@
+{
+  "Dark mode": "Dark Mode",
+  "Light mode": "Light Mode"
+}

public/locales/de/sidebar.json

@@ -7,7 +7,5 @@
   "Import data": "Konversationen importieren",
   "Are you sure?": "Bist du sicher?",
   "Clear conversations": "Konversationen löschen",
-  "Export data": "Konversationen exportieren",
-  "Dark mode": "Dark Mode",
-  "Light mode": "Light Mode"
-}
+  "Export data": "Konversationen exportieren"
+}

public/locales/es/chat.json

@@ -24,5 +24,6 @@
   "Message limit is {{maxLength}} characters. You have entered {{valueLength}} characters.": "El límite del mensaje es de {{maxLength}} caracteres. Has ingresado {{valueLength}} caracteres.",
   "Please enter a message": "Por favor, ingrese un mensaje",
   "Chatbot UI is an advanced chatbot kit for OpenAI's chat models aiming to mimic ChatGPT's interface and functionality.": "Chatbot UI es un kit avanzado de chatbot para los modelos de chat de OpenAI que busca imitar la interfaz y funcionalidad de ChatGPT.",
-  "Are you sure you want to clear all messages?": "¿Está seguro de que desea borrar todos los mensajes?"
+  "Are you sure you want to clear all messages?": "¿Está seguro de que desea borrar todos los mensajes?",
+  "Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic.": "Valores más altos como 0,8 harán que la salida sea más aleatoria, mientras que valores más bajos como 0,2 la harán más enfocada y determinista."
 }