feat: show KeyConfiguration if serverSide not config openai key.

Author: guangzhengli

chatfiles-ui/components/Sidebar/KeySettings.tsx

@@ -26,11 +26,13 @@ import { KeyConfiguration, ModelType } from '@/types';
 interface Props {
     keyConfiguration: KeyConfiguration;
     onKeyConfigrationChange: (keySettings: KeyConfiguration) => void;
+    keyConfigurationButtonRef: React.RefObject<HTMLButtonElement>;
 }
 
 export const KeySettings: FC<Props> = ({
     keyConfiguration,
     onKeyConfigrationChange,
+    keyConfigurationButtonRef,
 }) => {
     const [fromkeyConfigration, setFromKeyConfigration] = useState<KeyConfiguration>({
         apiType: keyConfiguration.apiType,
@@ -65,7 +67,7 @@ export const KeySettings: FC<Props> = ({
         <>
             <Sheet>
                 <SheetTrigger asChild>
-                    <Button className="w-64 dark:border-gray-50" variant="outline">OpenAI API Key Settings</Button>
+                    <Button ref={keyConfigurationButtonRef} className="w-64 dark:border-gray-50" variant="outline">OpenAI API Key Settings</Button>
                 </SheetTrigger>
                 <SheetContent position="left" size="sm">
                     <SheetHeader>

chatfiles-ui/components/Sidebar/Sidebar.tsx

@@ -38,6 +38,7 @@ interface Props {
   }) => void;
   keyConfiguration: KeyConfiguration;
   onKeyConfigrationChange: (keySettings: KeyConfiguration) => void;
+  keyConfigurationButtonRef: React.RefObject<HTMLButtonElement>;
 }
 
 export const Sidebar: FC<Props> = ({
@@ -59,7 +60,8 @@ export const Sidebar: FC<Props> = ({
   onExportConversations,
   onImportConversations,
   keyConfiguration,
-  onKeyConfigrationChange
+  onKeyConfigrationChange,
+  keyConfigurationButtonRef,
 }) => {
   const { t } = useTranslation('sidebar');
   const [searchTerm, setSearchTerm] = useState<string>('');
@@ -207,6 +209,7 @@ export const Sidebar: FC<Props> = ({
         onImportConversations={onImportConversations}
         keyConfiguration={keyConfiguration}
         onKeyConfigrationChange={onKeyConfigrationChange}
+        keyConfigurationButtonRef={keyConfigurationButtonRef}
       />
     </aside>
   );

chatfiles-ui/components/Sidebar/SidebarSettings.tsx

@@ -18,6 +18,7 @@ interface Props {
   }) => void;
   keyConfiguration: KeyConfiguration;
   onKeyConfigrationChange: (keySettings: KeyConfiguration) => void;
+  keyConfigurationButtonRef: React.RefObject<HTMLButtonElement>;
 }
 
 export const SidebarSettings: FC<Props> = ({
@@ -28,6 +29,7 @@ export const SidebarSettings: FC<Props> = ({
   onImportConversations,
   keyConfiguration,
   onKeyConfigrationChange,
+  keyConfigurationButtonRef,
 }) => {
   const { t } = useTranslation('sidebar');
 
@@ -52,7 +54,7 @@ export const SidebarSettings: FC<Props> = ({
           onToggleLightMode(lightMode === 'light' ? 'dark' : 'light')
         }
       />
-      <KeySettings keyConfiguration={keyConfiguration} onKeyConfigrationChange={onKeyConfigrationChange}/>
+      <KeySettings keyConfiguration={keyConfiguration} onKeyConfigrationChange={onKeyConfigrationChange} keyConfigurationButtonRef={keyConfigurationButtonRef}/>
     </div>
   );
 };

chatfiles-ui/pages/index.tsx

@@ -60,9 +60,15 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
     azureDeploymentName: '',
     azureEmbeddingDeploymentName: '',
   });
-
   const stopConversationRef = useRef<boolean>(false);
 
+  const keyConfigurationButtonRef = useRef<HTMLButtonElement>(null);
+  const handlekeyConfigurationButtonClick = () => {
+    if (keyConfigurationButtonRef.current) {
+      keyConfigurationButtonRef.current.click();
+    }
+  };
+
   const handleSend = async (message: Message, deleteCount = 0) => {
     if (selectedConversation) {
       let updatedConversation: Conversation;
@@ -510,6 +516,12 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
     }
   }, [selectedConversation]);
 
+  useEffect(() => {
+    if (!serverSideApiKeyIsSet) {
+      handlekeyConfigurationButtonClick();
+    }
+  });
+
   useEffect(() => {
     const theme = localStorage.getItem('theme');
     if (theme) {
@@ -583,10 +595,6 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
             />
           </div>
 
-          {/* (!serverSideApiKeyIsSet) ? (
-            <KeySettings keyConfiguration={keyConfiguration} onKeyConfigrationChange={handleKeyConfigrationChange} />
-          ) */}
-
           <div className="flex h-full w-full pt-[48px] sm:pt-0">
             {showSidebar ? (
               <div>
@@ -610,6 +618,7 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
                   onImportConversations={handleImportConversations}
                   keyConfiguration={keyConfiguration}
                   onKeyConfigrationChange={handleKeyConfigrationChange}
+                  keyConfigurationButtonRef={keyConfigurationButtonRef}
                 />
 
                 <div