Hide API Key and Plugin Key buttons if set server side (#423)

components/Chatbar/Chatbar.tsx

@@ -17,7 +17,9 @@ interface Props {
   lightMode: 'light' | 'dark';
   selectedConversation: Conversation;
   apiKey: string;
+  serverSideApiKeyIsSet: boolean;
   pluginKeys: PluginKey[];
+  serverSidePluginKeysSet: boolean;
   folders: Folder[];
   onCreateFolder: (name: string) => void;
   onDeleteFolder: (folderId: string) => void;
@@ -44,7 +46,9 @@ export const Chatbar: FC<Props> = ({
   lightMode,
   selectedConversation,
   apiKey,
+  serverSideApiKeyIsSet,
   pluginKeys,
+  serverSidePluginKeysSet,
   folders,
   onCreateFolder,
   onDeleteFolder,
@@ -198,7 +202,9 @@ export const Chatbar: FC<Props> = ({
       <ChatbarSettings
         lightMode={lightMode}
         apiKey={apiKey}
+        serverSideApiKeyIsSet={serverSideApiKeyIsSet}
         pluginKeys={pluginKeys}
+        serverSidePluginKeysSet={serverSidePluginKeysSet}
         conversationsCount={conversations.length}
         onToggleLightMode={onToggleLightMode}
         onApiKeyChange={onApiKeyChange}

components/Chatbar/ChatbarSettings.tsx

@@ -12,7 +12,9 @@ import { PluginKeys } from './PluginKeys';
 interface Props {
   lightMode: 'light' | 'dark';
   apiKey: string;
+  serverSideApiKeyIsSet: boolean;
   pluginKeys: PluginKey[];
+  serverSidePluginKeysSet: boolean;
   conversationsCount: number;
   onToggleLightMode: (mode: 'light' | 'dark') => void;
   onApiKeyChange: (apiKey: string) => void;
@@ -26,7 +28,9 @@ interface Props {
 export const ChatbarSettings: FC<Props> = ({
   lightMode,
   apiKey,
+  serverSideApiKeyIsSet,
   pluginKeys,
+  serverSidePluginKeysSet,
   conversationsCount,
   onToggleLightMode,
   onApiKeyChange,
@@ -62,13 +66,17 @@ export const ChatbarSettings: FC<Props> = ({
         }
       />
 
-      <Key apiKey={apiKey} onApiKeyChange={onApiKeyChange} />
+      {!(serverSideApiKeyIsSet) ? (
+        <Key apiKey={apiKey} onApiKeyChange={onApiKeyChange} />
+      ) : null}
 
-      <PluginKeys
-        pluginKeys={pluginKeys}
-        onPluginKeyChange={onPluginKeyChange}
-        onClearPluginKey={onClearPluginKey}
-      />
+      {!(serverSidePluginKeysSet) ? (
+        <PluginKeys
+          pluginKeys={pluginKeys}
+          onPluginKeyChange={onPluginKeyChange}
+          onClearPluginKey={onClearPluginKey}
+        />
+      ) : null}
     </div>
   );
 };

pages/index.tsx

@@ -763,7 +763,9 @@ const Home: React.FC<HomeProps> = ({
                   lightMode={lightMode}
                   selectedConversation={selectedConversation}
                   apiKey={apiKey}
+                  serverSideApiKeyIsSet={serverSideApiKeyIsSet}
                   pluginKeys={pluginKeys}
+                  serverSidePluginKeysSet={serverSidePluginKeysSet}
                   folders={folders.filter((folder) => folder.type === 'chat')}
                   onToggleLightMode={handleLightMode}
                   onCreateFolder={(name) => handleCreateFolder(name, 'chat')}