Merge branch 'main' of https://github.com/mckaywrigley/chatbot-ui-pro into google

.env.local.example

@@ -1,6 +1,6 @@
 # Chatbot UI
 DEFAULT_MODEL=gpt-3.5-turbo
-NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT=You are ChatGPT, a large language model trained by OpenAI. Follow the user's instructions carefully. Respond using markdown.
+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,8 +15,10 @@ env:
   # github.repository as <account>/<repo>
   IMAGE_NAME: ${{ github.repository }}
 
+
 jobs:
   build:
+
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -29,9 +31,6 @@ 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
@@ -61,7 +60,6 @@ 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,5 +36,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-.idea
-pnpm-lock.yaml
+.idea

CONTRIBUTING.md

@@ -1,5 +1,4 @@
 # Contributing Guidelines
-
 **Welcome to Chatbot UI!**
 
 We appreciate your interest in contributing to our project.
@@ -7,7 +6,6 @@ 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
@@ -17,8 +15,8 @@ We welcome the following types of contributions:
 - Translations
 - Tests
 
-## Getting Started
 
+## 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.
 
 ```
@@ -31,7 +29,6 @@ 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.
@@ -41,5 +38,4 @@ 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).

README.md

@@ -4,7 +4,7 @@ Chatbot UI is an advanced chatbot kit for OpenAI's chat models built on top of [
 
 See a [demo](https://twitter.com/mckaywrigley/status/1640380021423603713?s=46&t=AowqkodyK6B4JccSOxSPew).
 
-![Chatbot UI](./public/screenshots/screenshot-0402023.jpg)
+![Chatbot UI](./public/screenshot.png)
 
 ## Updates
 
@@ -14,9 +14,28 @@ Expect frequent improvements.
 
 **Next up:**
 
-- [ ] Import/Export prompts
-- [ ] "Bots"
-- [ ] Sharing
+- [ ] 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
 
@@ -24,7 +43,7 @@ Modify the chat interface in `components/Chat`.
 
 Modify the sidebar interface in `components/Sidebar`.
 
-Modify the system prompt in `utils/server/index.ts`.
+Modify the system prompt in `utils/index.ts`.
 
 ## Deploy
 
@@ -93,19 +112,11 @@ 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                                                                                   |
-| 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]                                                                                          |
+| 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    |
 
 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).
@@ -113,5 +124,3 @@ If you don't have an OpenAI API key, you can get one [here](https://platform.ope
 ## Contact
 
 If you have any questions, feel free to reach out to me on [Twitter](https://twitter.com/mckaywrigley).
-
-[GCSE]: https://developers.google.com/custom-search/v1/overview

__tests__/utils/app/importExports.test.ts

@@ -1,4 +1,8 @@
-import { DEFAULT_SYSTEM_PROMPT, DEFAULT_TEMPERATURE } from '@/utils/app/const';
+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 {
   cleanData,
   isExportFormatV1,
@@ -8,11 +12,6 @@ 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', () => {
@@ -102,12 +101,11 @@ describe('cleanData Functions', () => {
             ],
             model: OpenAIModels[OpenAIModelID.GPT_3_5],
             prompt: DEFAULT_SYSTEM_PROMPT,
-            temperature: DEFAULT_TEMPERATURE,
             folderId: null,
           },
         ],
         folders: [],
-        prompts: [],
+        prompts:[]
       });
     });
   });
@@ -158,7 +156,6 @@ describe('cleanData Functions', () => {
             ],
             model: OpenAIModels[OpenAIModelID.GPT_3_5],
             prompt: DEFAULT_SYSTEM_PROMPT,
-            temperature: DEFAULT_TEMPERATURE,
             folderId: null,
           },
         ],
@@ -194,7 +191,6 @@ describe('cleanData Functions', () => {
             ],
             model: OpenAIModels[OpenAIModelID.GPT_3_5],
             prompt: DEFAULT_SYSTEM_PROMPT,
-            temperature: DEFAULT_TEMPERATURE,
             folderId: null,
           },
         ],
@@ -216,7 +212,7 @@ describe('cleanData Functions', () => {
           },
         ],
       } as ExportFormatV4;
-
+      
       const obj = cleanData(data);
       expect(isLatestExportFormat(obj)).toBe(true);
       expect(obj).toEqual({
@@ -237,7 +233,6 @@ describe('cleanData Functions', () => {
             ],
             model: OpenAIModels[OpenAIModelID.GPT_3_5],
             prompt: DEFAULT_SYSTEM_PROMPT,
-            temperature: DEFAULT_TEMPERATURE,
             folderId: null,
           },
         ],
@@ -258,7 +253,9 @@ describe('cleanData Functions', () => {
             folderId: null,
           },
         ],
+
       });
     });
   });
+  
 });

components/Buttons/SidebarActionButton/SidebarActionButton.tsx

@@ -1,17 +0,0 @@
-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

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

components/Chat/Chat.tsx

@@ -1,512 +1,334 @@
-import { IconClearAll, IconSettings } from '@tabler/icons-react';
+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 {
+  FC,
   MutableRefObject,
   memo,
   useCallback,
-  useContext,
   useEffect,
   useRef,
   useState,
 } from 'react';
-import toast from 'react-hot-toast';
-
-import { useTranslation } from 'next-i18next';
-
-import { getEndpoint } from '@/utils/app/api';
-import {
-  saveConversation,
-  saveConversations,
-  updateConversation,
-} from '@/utils/app/conversation';
-import { throttle } from '@/utils/data/throttle';
-
-import { ChatBody, Conversation, Message } from '@/types/chat';
-import { Plugin } from '@/types/plugin';
-
-import HomeContext from '@/pages/api/home/home.context';
-
-import Spinner from '../Spinner';
+import { Spinner } from '../Global/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';
 
 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 = memo(({ stopConversationRef }: Props) => {
-  const { t } = useTranslation('chat');
+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);
 
-  const {
-    state: {
-      selectedConversation,
-      conversations,
-      models,
-      apiKey,
-      pluginKeys,
-      serverSideApiKeyIsSet,
-      messageIsStreaming,
-      modelError,
-      loading,
-      prompts,
-    },
-    handleUpdateConversation,
-    dispatch: homeDispatch,
-  } = useContext(HomeContext);
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+    const chatContainerRef = useRef<HTMLDivElement>(null);
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-  const [currentMessage, setCurrentMessage] = useState<Message>();
-  const [autoScrollEnabled, setAutoScrollEnabled] = useState<boolean>(true);
-  const [showSettings, setShowSettings] = useState<boolean>(false);
-  const [showScrollDownButton, setShowScrollDownButton] =
-    useState<boolean>(false);
-
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const chatContainerRef = useRef<HTMLDivElement>(null);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  const handleSend = useCallback(
-    async (message: Message, deleteCount = 0, plugin: Plugin | null = null) => {
-      if (selectedConversation) {
-        let updatedConversation: Conversation;
-        if (deleteCount) {
-          const updatedMessages = [...selectedConversation.messages];
-          for (let i = 0; i < deleteCount; i++) {
-            updatedMessages.pop();
-          }
-          updatedConversation = {
-            ...selectedConversation,
-            messages: [...updatedMessages, message],
-          };
-        } else {
-          updatedConversation = {
-            ...selectedConversation,
-            messages: [...selectedConversation.messages, message],
-          };
-        }
-        homeDispatch({
-          field: 'selectedConversation',
-          value: updatedConversation,
-        });
-        homeDispatch({ field: 'loading', value: true });
-        homeDispatch({ field: 'messageIsStreaming', value: true });
-        const chatBody: ChatBody = {
-          model: updatedConversation.model,
-          messages: updatedConversation.messages,
-          key: apiKey,
-          prompt: updatedConversation.prompt,
-          temperature: updatedConversation.temperature,
-        };
-        const endpoint = getEndpoint(plugin);
-        let body;
-        if (!plugin) {
-          body = JSON.stringify(chatBody);
-        } else {
-          body = JSON.stringify({
-            ...chatBody,
-            googleAPIKey: pluginKeys
-              .find((key) => key.pluginId === 'google-search')
-              ?.requiredKeys.find((key) => key.key === 'GOOGLE_API_KEY')?.value,
-            googleCSEId: pluginKeys
-              .find((key) => key.pluginId === 'google-search')
-              ?.requiredKeys.find((key) => key.key === 'GOOGLE_CSE_ID')?.value,
-          });
-        }
-        const controller = new AbortController();
-        const response = await fetch(endpoint, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          signal: controller.signal,
-          body,
-        });
-        if (!response.ok) {
-          homeDispatch({ field: 'loading', value: false });
-          homeDispatch({ field: 'messageIsStreaming', value: false });
-          toast.error(response.statusText);
-          return;
-        }
-        const data = response.body;
-        if (!data) {
-          homeDispatch({ field: 'loading', value: false });
-          homeDispatch({ field: 'messageIsStreaming', value: false });
-          return;
-        }
-        if (!plugin) {
-          if (updatedConversation.messages.length === 1) {
-            const { content } = message;
-            const customName =
-              content.length > 30 ? content.substring(0, 30) + '...' : content;
-            updatedConversation = {
-              ...updatedConversation,
-              name: customName,
-            };
-          }
-          homeDispatch({ field: 'loading', value: false });
-          const reader = data.getReader();
-          const decoder = new TextDecoder();
-          let done = false;
-          let isFirst = true;
-          let text = '';
-          while (!done) {
-            if (stopConversationRef.current === true) {
-              controller.abort();
-              done = true;
-              break;
-            }
-            const { value, done: doneReading } = await reader.read();
-            done = doneReading;
-            const chunkValue = decoder.decode(value);
-            text += chunkValue;
-            if (isFirst) {
-              isFirst = false;
-              const updatedMessages: Message[] = [
-                ...updatedConversation.messages,
-                { role: 'assistant', content: chunkValue },
-              ];
-              updatedConversation = {
-                ...updatedConversation,
-                messages: updatedMessages,
-              };
-              homeDispatch({
-                field: 'selectedConversation',
-                value: updatedConversation,
-              });
-            } else {
-              const updatedMessages: Message[] =
-                updatedConversation.messages.map((message, index) => {
-                  if (index === updatedConversation.messages.length - 1) {
-                    return {
-                      ...message,
-                      content: text,
-                    };
-                  }
-                  return message;
-                });
-              updatedConversation = {
-                ...updatedConversation,
-                messages: updatedMessages,
-              };
-              homeDispatch({
-                field: 'selectedConversation',
-                value: updatedConversation,
-              });
-            }
-          }
-          saveConversation(updatedConversation);
-          const updatedConversations: Conversation[] = conversations.map(
-            (conversation) => {
-              if (conversation.id === selectedConversation.id) {
-                return updatedConversation;
-              }
-              return conversation;
-            },
-          );
-          if (updatedConversations.length === 0) {
-            updatedConversations.push(updatedConversation);
-          }
-          homeDispatch({ field: 'conversations', value: updatedConversations });
-          saveConversations(updatedConversations);
-          homeDispatch({ field: 'messageIsStreaming', value: false });
-        } else {
-          const { answer } = await response.json();
-          const updatedMessages: Message[] = [
-            ...updatedConversation.messages,
-            { role: 'assistant', content: answer },
-          ];
-          updatedConversation = {
-            ...updatedConversation,
-            messages: updatedMessages,
-          };
-          homeDispatch({
-            field: 'selectedConversation',
-            value: updateConversation,
-          });
-          saveConversation(updatedConversation);
-          const updatedConversations: Conversation[] = conversations.map(
-            (conversation) => {
-              if (conversation.id === selectedConversation.id) {
-                return updatedConversation;
-              }
-              return conversation;
-            },
-          );
-          if (updatedConversations.length === 0) {
-            updatedConversations.push(updatedConversation);
-          }
-          homeDispatch({ field: 'conversations', value: updatedConversations });
-          saveConversations(updatedConversations);
-          homeDispatch({ field: 'loading', value: false });
-          homeDispatch({ field: 'messageIsStreaming', value: false });
-        }
+    const scrollToBottom = useCallback(() => {
+      if (autoScrollEnabled) {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+        textareaRef.current?.focus();
       }
-    },
-    [
-      apiKey,
-      conversations,
-      pluginKeys,
-      selectedConversation,
-      stopConversationRef,
-    ],
-  );
+    }, [autoScrollEnabled]);
 
-  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;
 
-  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 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();
+        if (scrollTop + clientHeight < scrollHeight - bottomTolerance) {
+          setAutoScrollEnabled(false);
+          setShowScrollDownButton(true);
+        } else {
+          setAutoScrollEnabled(true);
+          setShowScrollDownButton(false);
         }
-      },
-      {
-        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.
+    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();
+          }
+        },
+        {
+          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>
+            <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>
             </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>
-          </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 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" />
+        ) : 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>
-                    ) : (
-                      '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="Temperature"
-                        onChangeTemperature={(temperature) =>
-                          handleUpdateConversation(selectedConversation, {
-                            key: 'temperature',
-                            value: temperature,
-                          })
-                        }
-                      />
+                </>
+              ) : (
+                <>
+                  <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>
                   )}
-                </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>
-                </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) => (
-                  <ChatMessage
-                    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,
-                      );
-                    }}
+                  {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>
 
-                {loading && <ChatLoader />}
-
-                <div
-                  className="h-[162px] bg-white dark:bg-[#343541]"
-                  ref={messagesEndRef}
-                />
-              </>
-            )}
+            <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>
-
-          <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>
-  );
-});
+        )}
+      </div>
+    );
+  },
+);
 Chat.displayName = 'Chat';

components/Chat/ChatInput.tsx

@@ -1,58 +1,51 @@
+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 = ({
+export const ChatInput: FC<Props> = ({
+  messageIsStreaming,
+  model,
+  conversationIsEmpty,
+  prompts,
   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);
@@ -71,9 +64,9 @@ export const ChatInput = ({
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const value = e.target.value;
-    const maxLength = selectedConversation?.model.maxLength;
+    const maxLength = model.maxLength;
 
-    if (maxLength && value.length > maxLength) {
+    if (value.length > maxLength) {
       alert(
         t(
           `Message limit is {{maxLength}} characters. You have entered {{valueLength}} characters.`,
@@ -268,16 +261,14 @@ export const ChatInput = ({
           </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>
-          )}
+        {!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>
+        )}
 
         <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
@@ -289,16 +280,9 @@ export const ChatInput = ({
           </button>
 
           {showPluginSelect && (
-            <div className="absolute left-0 bottom-14 rounded bg-white dark:bg-[#343541]">
+            <div className="absolute left-0 bottom-14 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);
@@ -346,17 +330,6 @@ export const ChatInput = ({
             )}
           </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

components/Chat/ChatLoader.tsx

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

components/Chat/ChatMessage.tsx

@@ -1,297 +1,227 @@
-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 { 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';
-
+import { IconCheck, IconCopy, IconEdit, IconUser, IconRobot } from '@tabler/icons-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 { CodeBlock } from '../Markdown/CodeBlock';
+import { MemoizedReactMarkdown } from '../Markdown/MemoizedReactMarkdown';
 
 interface Props {
   message: Message;
   messageIndex: number;
-  onEdit?: (editedMessage: Message) => void
+  onEditMessage: (message: Message, messageIndex: number) => void;
 }
 
-export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) => {
-  const { t } = useTranslation('chat');
+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);
 
-  const {
-    state: { selectedConversation, conversations, currentMessage },
-    dispatch: homeDispatch,
-  } = useContext(HomeContext);
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-  const [isEditing, setIsEditing] = useState<boolean>(false);
-  const [isTyping, setIsTyping] = useState<boolean>(false);
-  const [messageContent, setMessageContent] = useState(message.content);
-  const [messagedCopied, setMessageCopied] = useState(false);
-
-  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 toggleEditing = () => {
+      setIsEditing(!isEditing);
     };
 
-    const { single, all } = updateConversation(
-      updatedConversation,
-      conversations,
-    );
-    homeDispatch({ field: 'selectedConversation', value: single });
-    homeDispatch({ field: 'conversations', value: all });
-  };
+    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 handlePressEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' && !isTyping && !e.shiftKey) {
-      e.preventDefault();
-      handleEditMessage();
-    }
-  };
+    const handleEditMessage = () => {
+      if (message.content != messageContent) {
+        onEditMessage({ ...message, content: messageContent }, messageIndex);
+      }
+      setIsEditing(false);
+    };
 
-  const copyOnClick = () => {
-    if (!navigator.clipboard) return;
+    const handlePressEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !isTyping && !e.shiftKey) {
+        e.preventDefault();
+        handleEditMessage();
+      }
+    };
 
-    navigator.clipboard.writeText(message.content).then(() => {
-      setMessageCopied(true);
-      setTimeout(() => {
-        setMessageCopied(false);
-      }, 2000);
-    });
-  };
+    const copyOnClick = () => {
+      if (!navigator.clipboard) return;
 
-  useEffect(() => {
-    setMessageContent(message.content);
-  }, [message.content]);
+      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(() => {
-    if (textareaRef.current) {
-      textareaRef.current.style.height = 'inherit';
-      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
-    }
-  }, [isEditing]);
+    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>
 
-  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',
-                    }}
-                  />
-
-                  <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="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',
                       }}
-                    >
-                      {t('Cancel')}
-                    </button>
-                  </div>
-                </div>
-              ) : (
-                <div className="prose whitespace-pre-wrap dark:prose-invert">
-                  {message.content}
-                </div>
-              )}
+                    />
 
-              {(window.innerWidth < 640 || !isEditing) && (
-                <>
+                    <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>
+                  </div>
+                ) : (
+                  <div className="prose whitespace-pre-wrap dark:prose-invert">
+                    {message.content}
+                  </div>
+                )}
+
+                {(window.innerWidth < 640 || !isEditing) && (
                   <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
-                        ? 'bottom-1 right-3'
-                        : 'right-6 top-[26px]'
+                        ? 'right-3 bottom-1'
+                        : 'right-0 top-[26px]'
                     }
-                      `}
+                    `}
                     onClick={toggleEditing}
                   >
                     <IconEdit size={20} />
                   </button>
-                  <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
-                        ? 'bottom-1 right-3'
-                        : 'right-0 top-[26px]'
-                    }
-                      `}
-                    onClick={handleDeleteMessage}
-                  >
-                    <IconTrash size={20} />
-                  </button>
-                </>
-              )}
-            </div>
-          ) : (
-            <>
-              <div
-                className={`absolute ${
-                  window.innerWidth < 640
-                    ? 'bottom-1 right-3'
-                    : '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>
+            ) : (
+              <>
+                <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 || '');
+                <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 ? (
-                      <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}
-              </MemoizedReactMarkdown>
-            </>
-          )}
+                      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>
-  );
-});
+    );
+  },
+);
 ChatMessage.displayName = 'ChatMessage';

components/Chat/ErrorMessageDiv.tsx

@@ -1,8 +1,7 @@
+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/ModelSelect.tsx

@@ -1,31 +1,23 @@
-import { IconExternalLink } from '@tabler/icons-react';
-import { useContext } from 'react';
-
+import { OpenAIModel, OpenAIModelID } from '@/types/openai';
 import { useTranslation } from 'next-i18next';
+import { IconExternalLink } from '@tabler/icons-react';
+import { FC } from 'react';
 
-import { OpenAIModel } from '@/types/openai';
+interface Props {
+  model: OpenAIModel;
+  models: OpenAIModel[];
+  defaultModelId: OpenAIModelID;
+  onModelChange: (model: OpenAIModel) => void;
+}
 
-import HomeContext from '@/pages/api/home/home.context';
-
-export const ModelSelect = () => {
+export const ModelSelect: FC<Props> = ({
+  model,
+  models,
+  defaultModelId,
+  onModelChange,
+}) => {
   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">
@@ -35,8 +27,14 @@ export const ModelSelect = () => {
         <select
           className="w-full bg-transparent p-2"
           placeholder={t('Select a model') || ''}
-          value={selectedConversation?.model?.id || defaultModelId}
-          onChange={handleChange}
+          value={model?.id || defaultModelId}
+          onChange={(e) => {
+            onModelChange(
+              models.find(
+                (model) => model.id === e.target.value,
+              ) as OpenAIModel,
+            );
+          }}
         >
           {models.map((model) => (
             <option
@@ -52,12 +50,8 @@ export const ModelSelect = () => {
         </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,59 +1,17 @@
-import { FC, useEffect, useRef } from 'react';
-
-import { useTranslation } from 'next-i18next';
-
 import { Plugin, PluginList } from '@/types/plugin';
+import { useTranslation } from 'next-i18next';
+import { FC, useEffect, useRef } from 'react';
 
 interface Props {
   plugin: Plugin | null;
   onPluginChange: (plugin: Plugin) => void;
-  onKeyDown: (e: React.KeyboardEvent<HTMLSelectElement>) => void;
 }
 
-export const PluginSelect: FC<Props> = ({
-  plugin,
-  onPluginChange,
-  onKeyDown,
-}) => {
+export const PluginSelect: FC<Props> = ({ plugin, onPluginChange }) => {
   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();
@@ -62,7 +20,7 @@ export const PluginSelect: FC<Props> = ({
 
   return (
     <div className="flex flex-col">
-      <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">
+      <div className="w-full rounded-lg 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"
@@ -75,16 +33,13 @@ export const PluginSelect: FC<Props> = ({
               ) as Plugin,
             );
           }}
-          onKeyDown={(e) => {
-            handleKeyDown(e);
-          }}
         >
           <option
-            key="chatgpt"
-            value="chatgpt"
+            key="none"
+            value=""
             className="dark:bg-[#343541] dark:text-white"
           >
-            ChatGPT
+            Select Plugin
           </option>
 
           {PluginList.map((plugin) => (

components/Chat/PromptList.tsx

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

components/Chat/Regenerate.tsx

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

components/Chat/SystemPrompt.tsx

@@ -1,3 +1,8 @@
+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,
@@ -6,14 +11,6 @@ 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

@@ -1,67 +0,0 @@
-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="relative flex justify-center">
-          <span className="absolute">{t('Precise')}</span>
-        </li>
-        <li className="relative flex justify-center">
-          <span className="absolute">{t('Neutral')}</span>
-        </li>
-        <li className="relative flex justify-center">
-          <span className="absolute">{t('Creative')}</span>
-        </li>
-      </ul>
-    </div>
-  );
-};

components/Chat/VariableModal.tsx

@@ -1,6 +1,5 @@
-import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
-
 import { Prompt } from '@/types/prompt';
+import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
 
 interface Props {
   prompt: Prompt;
@@ -83,7 +82,7 @@ export const VariableModal: FC<Props> = ({
     >
       <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"
+        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"
         role="dialog"
       >
         <div className="mb-4 text-xl font-bold text-black dark:text-neutral-200">

components/Chatbar/Chatbar.context.tsx

@@ -1,25 +0,0 @@
-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

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

components/Chatbar/Chatbar.tsx

@@ -1,239 +1,213 @@
-import { useCallback, useContext, useEffect } from 'react';
-
-import { useTranslation } from 'next-i18next';
-
-import { useCreateReducer } from '@/hooks/useCreateReducer';
-
-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 { 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 { 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';
 
-import HomeContext from '@/pages/api/home/home.context';
+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 { 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 = () => {
+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,
+}) => {
   const { t } = useTranslation('sidebar');
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [filteredConversations, setFilteredConversations] =
+    useState<Conversation[]>(conversations);
 
-  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 });
-  };
-
-  const handleClearConversations = () => {
-    defaultModelId &&
-      homeDispatch({
-        field: 'selectedConversation',
-        value: {
-          id: uuidv4(),
-          name: '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 handleUpdateConversation = (
+    conversation: Conversation,
+    data: KeyValuePair,
+  ) => {
+    onUpdateConversation(conversation, data);
+    setSearchTerm('');
   };
 
   const handleDeleteConversation = (conversation: Conversation) => {
-    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: '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));
+    onDeleteConversation(conversation);
+    setSearchTerm('');
   };
 
   const handleDrop = (e: any) => {
     if (e.dataTransfer) {
       const conversation = JSON.parse(e.dataTransfer.getData('conversation'));
-      handleUpdateConversation(conversation, { key: 'folderId', value: 0 });
-      chatDispatch({ field: 'searchTerm', value: '' });
+      onUpdateConversation(conversation, { key: 'folderId', value: 0 });
+
       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) {
-      chatDispatch({
-        field: 'filteredConversations',
-        value: conversations.filter((conversation) => {
+      setFilteredConversations(
+        conversations.filter((conversation) => {
           const searchable =
             conversation.name.toLocaleLowerCase() +
             ' ' +
             conversation.messages.map((message) => message.content).join(' ');
           return searchable.toLowerCase().includes(searchTerm.toLowerCase());
         }),
-      });
+      );
     } else {
-      chatDispatch({
-        field: 'filteredConversations',
-        value: conversations,
-      });
+      setFilteredConversations(conversations);
     }
   }, [searchTerm, conversations]);
 
   return (
-    <ChatbarContext.Provider
-      value={{
-        ...chatBarContextValue,
-        handleDeleteConversation,
-        handleClearConversations,
-        handleImportConversations,
-        handleExportData,
-        handlePluginKeyChange,
-        handleClearPluginKey,
-        handleApiKeyChange,
-      }}
+    <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`}
     >
-      <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 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}
       />
-    </ChatbarContext.Provider>
+    </div>
   );
 };

components/Chatbar/ChatbarSettings.tsx

@@ -0,0 +1,74 @@
+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/ClearConversations.tsx

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

components/Chatbar/Conversation.tsx

@@ -0,0 +1,163 @@
+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

@@ -0,0 +1,44 @@
+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/PluginKeys.tsx

@@ -1,25 +1,22 @@
-import { IconKey } from '@tabler/icons-react';
-import { KeyboardEvent, useContext, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
 import { PluginID, PluginKey } from '@/types/plugin';
+import { IconKey } from '@tabler/icons-react';
+import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SidebarButton } from '../Sidebar/SidebarButton';
 
-import HomeContext from '@/pages/api/home/home.context';
+interface Props {
+  pluginKeys: PluginKey[];
+  onPluginKeyChange: (pluginKey: PluginKey) => void;
+  onClearPluginKey: (pluginKey: PluginKey) => void;
+}
 
-import { SidebarButton } from '@/components/Sidebar/SidebarButton';
-
-import ChatbarContext from '../Chatbar.context';
-
-export const PluginKeys = () => {
+export const PluginKeys: FC<Props> = ({
+  pluginKeys,
+  onPluginKeyChange,
+  onClearPluginKey,
+}) => {
   const { t } = useTranslation('sidebar');
 
-  const {
-    state: { pluginKeys },
-  } = useContext(HomeContext);
-
-  const { handlePluginKeyChange, handleClearPluginKey } =
-    useContext(ChatbarContext);
-
   const [isChanging, setIsChanging] = useState(false);
 
   const modalRef = useRef<HTMLDivElement>(null);
@@ -63,7 +60,7 @@ export const PluginKeys = () => {
           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-hidden">
+          <div className="fixed inset-0 z-10 overflow-y-auto">
             <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"
@@ -72,7 +69,7 @@ export const PluginKeys = () => {
 
               <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"
+                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"
                 role="dialog"
               >
                 <div className="mb-10 text-4xl">Plugin Keys</div>
@@ -121,7 +118,7 @@ export const PluginKeys = () => {
                             }),
                           };
 
-                          handlePluginKeyChange(updatedPluginKey);
+                          onPluginKeyChange(updatedPluginKey);
                         }
                       } else {
                         const newPluginKey: PluginKey = {
@@ -138,7 +135,7 @@ export const PluginKeys = () => {
                           ],
                         };
 
-                        handlePluginKeyChange(newPluginKey);
+                        onPluginKeyChange(newPluginKey);
                       }
                     }}
                   />
@@ -180,7 +177,7 @@ export const PluginKeys = () => {
                             }),
                           };
 
-                          handlePluginKeyChange(updatedPluginKey);
+                          onPluginKeyChange(updatedPluginKey);
                         }
                       } else {
                         const newPluginKey: PluginKey = {
@@ -197,7 +194,7 @@ export const PluginKeys = () => {
                           ],
                         };
 
-                        handlePluginKeyChange(newPluginKey);
+                        onPluginKeyChange(newPluginKey);
                       }
                     }}
                   />
@@ -210,7 +207,7 @@ export const PluginKeys = () => {
                       );
 
                       if (pluginKey) {
-                        handleClearPluginKey(pluginKey);
+                        onClearPluginKey(pluginKey);
                       }
                     }}
                   >

components/Chatbar/components/ChatFolders.tsx

@@ -1,63 +0,0 @@
-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')
-        .map((folder, index) => (
-          <Folder
-            key={index}
-            searchTerm={searchTerm}
-            currentFolder={folder}
-            handleDrop={handleDrop}
-            folderComponent={ChatFolders(folder)}
-          />
-        ))}
-    </div>
-  );
-};

components/Chatbar/components/ChatbarSettings.tsx

@@ -1,73 +0,0 @@
-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/Conversation.tsx

@@ -1,168 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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/Folder/index.ts

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

components/Folders/Chat/ChatFolder.tsx

@@ -0,0 +1,220 @@
+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

@@ -0,0 +1,57 @@
+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/PromptFolder.tsx

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

components/Folders/Prompt/PromptFolders.tsx

@@ -0,0 +1,44 @@
+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/Global/Spinner.tsx

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

components/Markdown/CodeBlock.tsx

@@ -1,14 +1,12 @@
-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;
@@ -69,7 +67,11 @@ 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/Mobile/Navbar.tsx

@@ -1,8 +1,7 @@
+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/Prompt.tsx

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

components/Promptbar/PromptBar.context.tsx

@@ -1,19 +0,0 @@
-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/PromptModal.tsx

@@ -1,8 +1,6 @@
-import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
-
-import { useTranslation } from 'next-i18next';
-
 import { Prompt } from '@/types/prompt';
+import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'next-i18next';
 
 interface Props {
   prompt: Prompt;
@@ -51,10 +49,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-50"
+      className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-100"
       onKeyDown={handleEnter}
     >
-      <div className="fixed inset-0 z-10 overflow-hidden">
+      <div className="fixed inset-0 z-10 overflow-y-auto">
         <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"
@@ -63,7 +61,7 @@ export const PromptModal: FC<Props> = ({ prompt, onClose, onUpdatePrompt }) => {
 
           <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"
+            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"
             role="dialog"
           >
             <div className="text-sm font-bold text-black dark:text-neutral-200">

components/Promptbar/Promptbar.state.tsx

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

components/Promptbar/Promptbar.tsx

@@ -1,85 +1,50 @@
-import { useContext, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useCreateReducer } from '@/hooks/useCreateReducer';
-
-import { savePrompts } from '@/utils/app/prompts';
-
-import { OpenAIModels } from '@/types/openai';
+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 { useTranslation } from 'react-i18next';
+import { PromptFolders } from '../Folders/Prompt/PromptFolders';
+import { Search } from '../Sidebar/Search';
+import { PromptbarSettings } from './PromptbarSettings';
+import { Prompts } from './Prompts';
 
-import HomeContext from '@/pages/api/home/home.context';
+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 { 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 = () => {
+export const Promptbar: FC<Props> = ({
+  folders,
+  prompts,
+  onCreateFolder,
+  onDeleteFolder,
+  onUpdateFolder,
+  onCreatePrompt,
+  onUpdatePrompt,
+  onDeletePrompt,
+}) => {
   const { t } = useTranslation('promptbar');
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [filteredPrompts, setFilteredPrompts] = useState<Prompt[]>(prompts);
 
-  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 handleUpdatePrompt = (prompt: Prompt) => {
+    onUpdatePrompt(prompt);
+    setSearchTerm('');
   };
 
   const handleDeletePrompt = (prompt: Prompt) => {
-    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);
+    onDeletePrompt(prompt);
+    setSearchTerm('');
   };
 
   const handleDrop = (e: any) => {
@@ -91,17 +56,28 @@ const Promptbar = () => {
         folderId: e.target.dataset.folderId,
       };
 
-      handleUpdatePrompt(updatedPrompt);
+      onUpdatePrompt(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) {
-      promptDispatch({
-        field: 'filteredPrompts',
-        value: prompts.filter((prompt) => {
+      setFilteredPrompts(
+        prompts.filter((prompt) => {
           const searchable =
             prompt.name.toLowerCase() +
             ' ' +
@@ -110,43 +86,85 @@ const Promptbar = () => {
             prompt.content.toLowerCase();
           return searchable.includes(searchTerm.toLowerCase());
         }),
-      });
+      );
     } else {
-      promptDispatch({ field: 'filteredPrompts', value: prompts });
+      setFilteredPrompts(prompts);
     }
   }, [searchTerm, prompts]);
 
   return (
-    <PromptbarContext.Provider
-      value={{
-        ...promptBarContextValue,
-        handleCreatePrompt,
-        handleDeletePrompt,
-        handleUpdatePrompt,
-      }}
+    <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`}
     >
-      <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>
+      <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>
   );
 };
-
-export default Promptbar;

components/Promptbar/PromptbarSettings.tsx

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

components/Promptbar/Prompts.tsx

@@ -0,0 +1,31 @@
+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/PromptFolders.tsx

@@ -1,63 +0,0 @@
-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')
-        .map((folder, index) => (
-          <Folder
-            key={index}
-            searchTerm={searchTerm}
-            currentFolder={folder}
-            handleDrop={handleDrop}
-            folderComponent={PromptFolders(folder)}
-          />
-        ))}
-    </div>
-  );
-};

components/Promptbar/components/Prompts.tsx

@@ -1,22 +0,0 @@
-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

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

components/Search/index.ts

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

components/Settings/Import.tsx

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

components/Settings/Key.tsx

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

components/Settings/SettingDialog.tsx

@@ -1,105 +0,0 @@
-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/Search.tsx

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

components/Sidebar/Sidebar.tsx

@@ -1,123 +0,0 @@
-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 prompts.')}
-              </span>
-            </div>
-          )}
-        </div>
-        {footerComponent}
-      </div>
-
-      <CloseSidebarButton onClick={toggleOpen} side={side} />
-    </div>
-  ) : (
-    <OpenSidebarButton onClick={toggleOpen} side={side} />
-  );
-};
-
-export default Sidebar;

components/Sidebar/components/OpenCloseButton.tsx

@@ -1,42 +0,0 @@
-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

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

components/Spinner/index.ts

@@ -1 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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,16 +12,13 @@ module.exports = {
       "it",
       "ja",
       "ko",
-      "pl",
       "pt",
       "ru",
-      "ro",      
       "sv",
       "te",
       "vi",
       "zh",
       "ar",
-      "tr",
     ],
   },
   localePath:

package.json

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

pages/_document.tsx

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

pages/api/chat.ts

@@ -1,13 +1,10 @@
-import { DEFAULT_SYSTEM_PROMPT, DEFAULT_TEMPERATURE } from '@/utils/app/const';
-import { OpenAIError, OpenAIStream } from '@/utils/server';
-
 import { ChatBody, Message } from '@/types/chat';
-
-// @ts-expect-error
-import wasm from '../../node_modules/@dqbd/tiktoken/lite/tiktoken_bg.wasm?module';
-
+import { DEFAULT_SYSTEM_PROMPT } 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';
+// @ts-expect-error
+import wasm from '../../node_modules/@dqbd/tiktoken/lite/tiktoken_bg.wasm?module';
 
 export const config = {
   runtime: 'edge',
@@ -15,7 +12,7 @@ export const config = {
 
 const handler = async (req: Request): Promise<Response> => {
   try {
-    const { model, messages, key, prompt, temperature } = (await req.json()) as ChatBody;
+    const { model, messages, key, prompt } = (await req.json()) as ChatBody;
 
     await init((imports) => WebAssembly.instantiate(wasm, imports));
     const encoding = new Tiktoken(
@@ -29,11 +26,6 @@ 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;
@@ -52,7 +44,7 @@ const handler = async (req: Request): Promise<Response> => {
 
     encoding.free();
 
-    const stream = await OpenAIStream(model, promptToSend, temperatureToUse, key, messagesToSend);
+    const stream = await OpenAIStream(model, promptToSend, key, messagesToSend);
 
     return new Response(stream);
   } catch (error) {

pages/api/google.ts

@@ -1,14 +1,11 @@
-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 { OPENAI_API_HOST } from '@/utils/app/const';
+import { cleanSourceText } from '@/utils/server/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 {
@@ -16,14 +13,13 @@ const handler = async (req: NextApiRequest, res: NextApiResponse<any>) => {
       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=${
         googleAPIKey ? googleAPIKey : process.env.GOOGLE_API_KEY
       }&cx=${
         googleCSEId ? googleCSEId : process.env.GOOGLE_CSE_ID
-      }&q=${query}&num=5`,
+      }&q=${userMessage.content.trim()}&num=5`,
     );
 
     const googleData = await googleRes.json();
@@ -126,7 +122,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. Maximum 4 sentences.`,
+            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.`,
           },
           answerMessage,
         ],
@@ -141,8 +137,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse<any>) => {
 
     res.status(200).json({ answer });
   } catch (error) {
-    console.error(error);
-    res.status(500).json({ error: 'Error'})
+    return new Response('Error', { status: 500 });
   }
 };
 

pages/api/home/home.context.tsx

@@ -1,27 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,431 +0,0 @@
-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: '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

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

pages/api/models.ts

@@ -1,6 +1,5 @@
-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',
@@ -12,23 +11,13 @@ const handler = async (req: Request): Promise<Response> => {
       key: string;
     };
 
-    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, {
+    const response = await fetch(`${OPENAI_API_HOST}/v1/models`, {
       headers: {
         'Content-Type': 'application/json',
-        ...(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,
-        }),
+        Authorization: `Bearer ${key ? key : process.env.OPENAI_API_KEY}`,
+        ...(process.env.OPENAI_ORGANIZATION && {
+          'OpenAI-Organization': process.env.OPENAI_ORGANIZATION,
+        })
       },
     });
 
@@ -50,9 +39,8 @@ 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_name) {
+          if (value === model.id) {
             return {
               id: model.id,
               name: OpenAIModels[value].name,

pages/index.tsx

@@ -1 +1,893 @@
-export { default, getServerSideProps } from './api/home';
+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);
+      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) {
+        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',
+      ])),
+    },
+  };
+};

prettier.config.js

@@ -1,25 +1,5 @@
 module.exports = {
   trailingComma: 'all',
   singleQuote: true,
-  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,
+  plugins: [require('prettier-plugin-tailwindcss')]
 };

public/locales/ar/chat.json

@@ -23,10 +23,15 @@
 
   "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?": "هل أنت متأكد أنك تريد مسح كافة الرسائل؟",
-  "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 ستجعله أكثر تركيزًا وتحديدًا."
+  "Are you sure you want to clear all messages?": "هل أنت متأكد أنك تريد مسح كافة الرسائل؟"
 }

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

@@ -1,4 +0,0 @@
-{
-  "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,14 +16,13 @@
   "Error fetching models.": "মডেল পেতে সমস্যা হচ্ছে।",
   "AI": "AI",
   "You": "তুমি",
-  "Cancel": "বাতিল করুন",
-  "Save & Submit": "সংরক্ষণ করুন এবং জমা দিন",
+  "Cancel": "Cancel",
+  "Save & Submit": "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": "একটি .env.local ফাইল ব্যবহার করলে এখানে ক্লিক করুন",
+  "click if using a .env.local file": "click if using a .env.local file",
   "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?": "সমস্ত বার্তা মুছে ফেলতে আপনি কি নিশ্চিত?",
-  "Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic.": "০.৮ এর বেশি মান দিলে আউটপুট বেশি ইউনিক হবে, যেহেতু ০.২ এর মতো নিম্নমানের মান দিলে তা আরও ফোকাস এবং ধারাবাহিকতা বজায় থাকবে এবং নিশ্চয়তামূলক হবে।"
+  "Are you sure you want to clear all messages?": "সমস্ত বার্তা মুছে ফেলতে আপনি কি নিশ্চিত?"
 }

public/locales/bn/promptbar.json

@@ -1,12 +1,12 @@
 {
-  "New prompt": "নতুন prompt",
-  "New folder": "নতুন ফোল্ডার",
-  "No prompts.": "কোনো prompts নেই।",
-  "Search prompts...": "prompts অনুসন্ধান হচ্ছে...",
-  "Name": "নাম",
-  "Description": "বর্ণনা",
-  "A description for your prompt.": "আপনার Prompt জন্য একটি বিবরণ লিখুন.",
+  "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.",
   "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

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

public/locales/bn/sidebar.json

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

public/locales/ca/chat.json

@@ -1,29 +0,0 @@
-{
-  "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

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

public/locales/ca/markdown.json

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

public/locales/ca/promptbar.json

@@ -1,12 +0,0 @@
-{
-  "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

@@ -1,13 +0,0 @@
-{
-  "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,6 +24,5 @@
   "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?",
-  "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."
-}
+  "Are you sure you want to clear all messages?": "Bist du sicher, dass du alle Nachrichten löschen möchtest?"
+}

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

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

public/locales/de/sidebar.json

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

public/locales/es/chat.json

@@ -24,6 +24,5 @@
   "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?",
-  "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."
+  "Are you sure you want to clear all messages?": "¿Está seguro de que desea borrar todos los mensajes?"
 }

public/locales/es/settings.json

@@ -1,4 +0,0 @@
-{
-  "Dark mode": "Modo oscuro",
-  "Light mode": "Modo claro"
-}

public/locales/es/sidebar.json

@@ -7,5 +7,7 @@
   "Import data": "Importar conversaciones",
   "Are you sure?": "¿Estás seguro?",
   "Clear conversations": "Borrar conversaciones",
-  "Export data": "Exportar conversaciones"
-}
+  "Export data": "Exportar conversaciones",
+  "Dark mode": "Modo oscuro",
+  "Light mode": "Modo claro"
+}

public/locales/fr/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/fr/settings.json

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