push (#414)

components/Chatbar/Chatbar.tsx

@@ -2,11 +2,8 @@ import { Conversation } from '@/types/chat';
 import { KeyValuePair } from '@/types/data';
 import { SupportedExportFormats } from '@/types/export';
 import { Folder } from '@/types/folder';
-import {
-  IconFolderPlus,
-  IconMessagesOff,
-  IconPlus,
-} from '@tabler/icons-react';
+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';
@@ -20,6 +17,7 @@ interface Props {
   lightMode: 'light' | 'dark';
   selectedConversation: Conversation;
   apiKey: string;
+  pluginKeys: PluginKey[];
   folders: Folder[];
   onCreateFolder: (name: string) => void;
   onDeleteFolder: (folderId: string) => void;
@@ -36,6 +34,8 @@ interface Props {
   onClearConversations: () => void;
   onExportConversations: () => void;
   onImportConversations: (data: SupportedExportFormats) => void;
+  onPluginKeyChange: (pluginKey: PluginKey) => void;
+  onClearPluginKey: (pluginKey: PluginKey) => void;
 }
 
 export const Chatbar: FC<Props> = ({
@@ -44,6 +44,7 @@ export const Chatbar: FC<Props> = ({
   lightMode,
   selectedConversation,
   apiKey,
+  pluginKeys,
   folders,
   onCreateFolder,
   onDeleteFolder,
@@ -57,6 +58,8 @@ export const Chatbar: FC<Props> = ({
   onClearConversations,
   onExportConversations,
   onImportConversations,
+  onPluginKeyChange,
+  onClearPluginKey,
 }) => {
   const { t } = useTranslation('sidebar');
   const [searchTerm, setSearchTerm] = useState<string>('');
@@ -185,7 +188,7 @@ export const Chatbar: FC<Props> = ({
             />
           </div>
         ) : (
-          <div className="flex flex-col gap-3 items-center text-sm leading-normal mt-8 text-white opacity-50">
+          <div className="mt-8 flex flex-col items-center gap-3 text-sm leading-normal text-white opacity-50">
             <IconMessagesOff />
             {t('No conversations.')}
           </div>
@@ -195,12 +198,15 @@ export const Chatbar: FC<Props> = ({
       <ChatbarSettings
         lightMode={lightMode}
         apiKey={apiKey}
+        pluginKeys={pluginKeys}
         conversationsCount={conversations.length}
         onToggleLightMode={onToggleLightMode}
         onApiKeyChange={onApiKeyChange}
         onClearConversations={onClearConversations}
         onExportConversations={onExportConversations}
         onImportConversations={onImportConversations}
+        onPluginKeyChange={onPluginKeyChange}
+        onClearPluginKey={onClearPluginKey}
       />
     </div>
   );