push (#414)

components/Chatbar/ChatbarSettings.tsx

@@ -1,4 +1,5 @@
 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';
@@ -6,29 +7,37 @@ 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 ? (
@@ -54,6 +63,12 @@ export const ChatbarSettings: FC<Props> = ({
       />
 
       <Key apiKey={apiKey} onApiKeyChange={onApiKeyChange} />
+
+      <PluginKeys
+        pluginKeys={pluginKeys}
+        onPluginKeyChange={onPluginKeyChange}
+        onClearPluginKey={onClearPluginKey}
+      />
     </div>
   );
 };