cleanup

components/Chatbar/Chatbar.tsx

@@ -16,11 +16,6 @@ import { PluginKey } from '@/types/plugin';
 
 import HomeContext from '@/pages/api/home/home.context';
 
-import { ChatFolders } from './components/ChatFolders';
-import { ChatbarSettings } from './components/ChatbarSettings';
-import { Conversations } from './components/Conversations';
-
-import Sidebar from '../Sidebar';
 import ChatbarContext from './Chatbar.context';
 import { ChatbarInitialState, initialState } from './Chatbar.state';
 
@@ -36,7 +31,6 @@ export const Chatbar = () => {
   const {
     state: { conversations, showChatbar, defaultModelId, folders, pluginKeys },
     dispatch: homeDispatch,
-    handleCreateFolder,
     handleNewConversation,
     handleUpdateConversation,
   } = useContext(HomeContext);
@@ -219,23 +213,7 @@ export const Chatbar = () => {
         handleApiKeyChange,
       }}
     >
-      <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 />}
-      />
+
     </ChatbarContext.Provider>
   );
 };

components/Chatbar/components/ChatFolders.tsx

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

components/Chatbar/components/ChatbarSettings.tsx

@@ -9,10 +9,8 @@ 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');
@@ -44,24 +42,10 @@ export const ChatbarSettings = () => {
 
       <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={() => {

components/Chatbar/components/ClearConversations.tsx

@@ -3,7 +3,6 @@ import { FC, useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
-import { SidebarButton } from '@/components/Sidebar/SidebarButton';
 
 interface Props {
   onClearConversations: () => void;
@@ -48,10 +47,6 @@ export const ClearConversations: FC<Props> = ({ onClearConversations }) => {
       </div>
     </div>
   ) : (
-    <SidebarButton
-      text={t('Clear conversations')}
-      icon={<IconTrash size={18} />}
-      onClick={() => setIsConfirming(true)}
-    />
+    null
   );
 };

components/Chatbar/components/PluginKeys.tsx

@@ -1,235 +0,0 @@
-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 HomeContext from '@/pages/api/home/home.context';
-
-import { SidebarButton } from '@/components/Sidebar/SidebarButton';
-
-import ChatbarContext from '../Chatbar.context';
-
-export const PluginKeys = () => {
-  const { t } = useTranslation('sidebar');
-
-  const {
-    state: { pluginKeys },
-  } = useContext(HomeContext);
-
-  const { handlePluginKeyChange, handleClearPluginKey } =
-    useContext(ChatbarContext);
-
-  const [isChanging, setIsChanging] = useState(false);
-
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  const handleEnter = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      setIsChanging(false);
-    }
-  };
-
-  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);
-      setIsChanging(false);
-    };
-
-    window.addEventListener('mousedown', handleMouseDown);
-
-    return () => {
-      window.removeEventListener('mousedown', handleMouseDown);
-    };
-  }, []);
-
-  return (
-    <>
-      <SidebarButton
-        text={t('Plugin Keys')}
-        icon={<IconKey size={18} />}
-        onClick={() => setIsChanging(true)}
-      />
-
-      {isChanging && (
-        <div
-          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="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"
-                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="mb-10 text-4xl">Plugin Keys</div>
-
-                <div className="mt-6 rounded border p-4">
-                  <div className="text-xl font-bold">Google Search Plugin</div>
-                  <div className="mt-4 italic">
-                    Please enter your Google API Key and Google CSE ID to enable
-                    the Google Search Plugin.
-                  </div>
-
-                  <div className="mt-6 text-sm font-bold text-black dark:text-neutral-200">
-                    Google API Key
-                  </div>
-                  <input
-                    className="mt-2 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
-                    type="password"
-                    value={
-                      pluginKeys
-                        .find((p) => p.pluginId === PluginID.GOOGLE_SEARCH)
-                        ?.requiredKeys.find((k) => k.key === 'GOOGLE_API_KEY')
-                        ?.value
-                    }
-                    onChange={(e) => {
-                      const pluginKey = pluginKeys.find(
-                        (p) => p.pluginId === PluginID.GOOGLE_SEARCH,
-                      );
-
-                      if (pluginKey) {
-                        const requiredKey = pluginKey.requiredKeys.find(
-                          (k) => k.key === 'GOOGLE_API_KEY',
-                        );
-
-                        if (requiredKey) {
-                          const updatedPluginKey = {
-                            ...pluginKey,
-                            requiredKeys: pluginKey.requiredKeys.map((k) => {
-                              if (k.key === 'GOOGLE_API_KEY') {
-                                return {
-                                  ...k,
-                                  value: e.target.value,
-                                };
-                              }
-
-                              return k;
-                            }),
-                          };
-
-                          handlePluginKeyChange(updatedPluginKey);
-                        }
-                      } else {
-                        const newPluginKey: PluginKey = {
-                          pluginId: PluginID.GOOGLE_SEARCH,
-                          requiredKeys: [
-                            {
-                              key: 'GOOGLE_API_KEY',
-                              value: e.target.value,
-                            },
-                            {
-                              key: 'GOOGLE_CSE_ID',
-                              value: '',
-                            },
-                          ],
-                        };
-
-                        handlePluginKeyChange(newPluginKey);
-                      }
-                    }}
-                  />
-
-                  <div className="mt-6 text-sm font-bold text-black dark:text-neutral-200">
-                    Google CSE ID
-                  </div>
-                  <input
-                    className="mt-2 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
-                    type="password"
-                    value={
-                      pluginKeys
-                        .find((p) => p.pluginId === PluginID.GOOGLE_SEARCH)
-                        ?.requiredKeys.find((k) => k.key === 'GOOGLE_CSE_ID')
-                        ?.value
-                    }
-                    onChange={(e) => {
-                      const pluginKey = pluginKeys.find(
-                        (p) => p.pluginId === PluginID.GOOGLE_SEARCH,
-                      );
-
-                      if (pluginKey) {
-                        const requiredKey = pluginKey.requiredKeys.find(
-                          (k) => k.key === 'GOOGLE_CSE_ID',
-                        );
-
-                        if (requiredKey) {
-                          const updatedPluginKey = {
-                            ...pluginKey,
-                            requiredKeys: pluginKey.requiredKeys.map((k) => {
-                              if (k.key === 'GOOGLE_CSE_ID') {
-                                return {
-                                  ...k,
-                                  value: e.target.value,
-                                };
-                              }
-
-                              return k;
-                            }),
-                          };
-
-                          handlePluginKeyChange(updatedPluginKey);
-                        }
-                      } else {
-                        const newPluginKey: PluginKey = {
-                          pluginId: PluginID.GOOGLE_SEARCH,
-                          requiredKeys: [
-                            {
-                              key: 'GOOGLE_API_KEY',
-                              value: '',
-                            },
-                            {
-                              key: 'GOOGLE_CSE_ID',
-                              value: e.target.value,
-                            },
-                          ],
-                        };
-
-                        handlePluginKeyChange(newPluginKey);
-                      }
-                    }}
-                  />
-
-                  <button
-                    className="mt-6 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow hover:bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-white dark:text-black dark:hover:bg-neutral-300"
-                    onClick={() => {
-                      const pluginKey = pluginKeys.find(
-                        (p) => p.pluginId === PluginID.GOOGLE_SEARCH,
-                      );
-
-                      if (pluginKey) {
-                        handleClearPluginKey(pluginKey);
-                      }
-                    }}
-                  >
-                    Clear Google Search Plugin Keys
-                  </button>
-                </div>
-
-                <button
-                  type="button"
-                  className="mt-6 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow hover:bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-white dark:text-black dark:hover:bg-neutral-300"
-                  onClick={() => setIsChanging(false)}
-                >
-                  {t('Save')}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};

components/Folder/Folder.tsx

@@ -1,192 +0,0 @@
-import {
-  IconCaretDown,
-  IconCaretRight,
-  IconCheck,
-  IconPencil,
-  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';
-
-interface Props {
-  currentFolder: FolderInterface;
-  searchTerm: string;
-  handleDrop: (e: any, folder: FolderInterface) => void;
-  folderComponent: (ReactElement | undefined)[];
-}
-
-const Folder = ({
-  currentFolder,
-  searchTerm,
-  handleDrop,
-  folderComponent,
-}: Props) => {
-  const { handleDeleteFolder, handleUpdateFolder } = useContext(HomeContext);
-
-  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 = () => {
-    handleUpdateFolder(currentFolder.id, renameValue);
-    setRenameValue('');
-    setIsRenaming(false);
-  };
-
-  const dropHandler = (e: any) => {
-    if (e.dataTransfer) {
-      setIsOpen(true);
-
-      handleDrop(e, currentFolder);
-
-      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">
-            {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) => dropHandler(e)}
-            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">
-            <SidebarActionButton
-              handleClick={(e) => {
-                e.stopPropagation();
-
-                if (isDeleting) {
-                  handleDeleteFolder(currentFolder.id);
-                } else if (isRenaming) {
-                  handleRename();
-                }
-
-                setIsDeleting(false);
-                setIsRenaming(false);
-              }}
-            >
-              <IconCheck size={18} />
-            </SidebarActionButton>
-            <SidebarActionButton
-              handleClick={(e) => {
-                e.stopPropagation();
-                setIsDeleting(false);
-                setIsRenaming(false);
-              }}
-            >
-              <IconX size={18} />
-            </SidebarActionButton>
-          </div>
-        )}
-
-        {!isDeleting && !isRenaming && (
-          <div className="absolute right-1 z-10 flex text-gray-300">
-            <SidebarActionButton
-              handleClick={(e) => {
-                e.stopPropagation();
-                setIsRenaming(true);
-                setRenameValue(currentFolder.name);
-              }}
-            >
-              <IconPencil size={18} />
-            </SidebarActionButton>
-            <SidebarActionButton
-              handleClick={(e) => {
-                e.stopPropagation();
-                setIsDeleting(true);
-              }}
-            >
-              <IconTrash size={18} />
-            </SidebarActionButton>
-          </div>
-        )}
-      </div>
-
-      {isOpen ? folderComponent : null}
-    </>
-  );
-};
-
-export default Folder;

components/Folder/index.ts

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

components/Promptbar/Promptbar.tsx

@@ -10,11 +10,8 @@ import { Prompt } from '@/types/prompt';
 
 import HomeContext from '@/pages/api/home/home.context';
 
-import { PromptFolders } from './components/PromptFolders';
-import { PromptbarSettings } from './components/PromptbarSettings';
 import { Prompts } from './components/Prompts';
 
-import Sidebar from '../Sidebar';
 import PromptbarContext from './PromptBar.context';
 import { PromptbarInitialState, initialState } from './Promptbar.state';
 
@@ -29,8 +26,7 @@ const Promptbar = () => {
 
   const {
     state: { prompts, defaultModelId, showPromptbar },
-    dispatch: homeDispatch,
-    handleCreateFolder,
+    dispatch: homeDispatch
   } = useContext(HomeContext);
 
   const {
@@ -125,26 +121,7 @@ const Promptbar = () => {
         handleUpdatePrompt,
       }}
     >
-      <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>
   );
 };

components/Promptbar/components/PromptFolders.tsx

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

components/Settings/Import.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from 'next-i18next';
 
 import { SupportedExportFormats } from '@/types/export';
 
-import { SidebarButton } from '../Sidebar/SidebarButton';
 
 interface Props {
   onImport: (data: SupportedExportFormats) => void;
@@ -34,18 +33,7 @@ export const Import: FC<Props> = ({ onImport }) => {
         }}
       />
 
-      <SidebarButton
-        text={t('Import data')}
-        icon={<IconFileImport size={18} />}
-        onClick={() => {
-          const importFile = document.querySelector(
-            '#import-file',
-          ) as HTMLInputElement;
-          if (importFile) {
-            importFile.click();
-          }
-        }}
-      />
+
     </>
   );
 };

components/Settings/Key.tsx

@@ -1,9 +1,4 @@
-import { IconCheck, IconKey, IconX } from '@tabler/icons-react';
-import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
-
-import { useTranslation } from 'next-i18next';
-
-import { SidebarButton } from '../Sidebar/SidebarButton';
+import { FC  } from 'react';
 
 interface Props {
   apiKey: string;

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 data.')}
-              </span>
-            </div>
-          )}
-        </div>
-        {footerComponent}
-      </div>
-
-      <CloseSidebarButton onClick={toggleOpen} side={side} />
-    </div>
-  ) : (
-    <OpenSidebarButton onClick={toggleOpen} side={side} />
-  );
-};
-
-export default Sidebar;

components/Sidebar/SidebarButton.tsx

@@ -1,19 +0,0 @@
-import { FC } from 'react';
-
-interface Props {
-  text: string;
-  icon: JSX.Element;
-  onClick: () => void;
-}
-
-export const SidebarButton: FC<Props> = ({ text, icon, onClick }) => {
-  return (
-    <button
-      className="flex w-full cursor-pointer select-none items-center gap-3 rounded-md py-3 px-3 text-[14px] leading-3 text-white transition-colors duration-200 hover:bg-gray-500/10"
-      onClick={onClick}
-    >
-      <div>{icon}</div>
-      <span>{text}</span>
-    </button>
-  );
-};

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';

next.config.js

@@ -1,9 +1,5 @@
-const { i18n } = require('./next-i18next.config');
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  i18n,
-  output: "standalone",
   reactStrictMode: true,
 
   webpack(config, { isServer, dev }) {

package-lock.json

@@ -1,18 +1,18 @@
 {
-  "name": "ai-chatbot-starter",
+  "name": "chatbot-mini",
   "version": "0.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "ai-chatbot-starter",
+      "name": "chatbot-mini",
       "version": "0.1.0",
       "dependencies": {
         "@dqbd/tiktoken": "^1.0.2",
         "@tabler/icons-react": "^2.9.0",
         "eventsource-parser": "^0.1.0",
         "i18next": "^22.4.13",
-        "next": "13.2.4",
+        "next": "^13.2.4",
         "next-i18next": "^13.2.2",
         "openai": "^3.2.1",
         "react": "18.2.0",