💄 style: improve api key form

bentwnghk · Oct 11, 2023 · fa3170d · fa3170d
1 parent e4b36c3
commit fa3170d
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 14 deletions.
diff --git a/src/app/chat/features/Conversation/ChatList/Error/ApiKeyForm.tsx b/src/app/chat/features/Conversation/ChatList/Error/ApiKeyForm.tsx
@@ -1,5 +1,7 @@
+import { Icon } from '@lobehub/ui';
 import { Button, Input } from 'antd';
-import { memo } from 'react';
+import { Network } from 'lucide-react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
@@ -10,11 +12,14 @@ import { FormAction } from './style';
 
 const APIKeyForm = memo<{ id: string }>(({ id }) => {
   const { t } = useTranslation('error');
+  const [showProxy, setShow] = useState(false);
 
-  const [apiKey, setKeys] = useGlobalStore((s) => [
+  const [apiKey, proxyUrl, setConfig] = useGlobalStore((s) => [
     settingsSelectors.openAIAPI(s),
-    s.setOpenAIAPIKey,
+    settingsSelectors.openAIProxyUrl(s),
+    s.setOpenAIConfig,
   ]);
+
   const [resend, deleteMessage] = useSessionStore((s) => [s.resendMessage, s.deleteMessage]);
 
   return (
@@ -26,12 +31,32 @@ const APIKeyForm = memo<{ id: string }>(({ id }) => {
       >
         <Input.Password
           onChange={(e) => {
-            setKeys(e.target.value);
+            setConfig({ OPENAI_API_KEY: e.target.value });
           }}
           placeholder={'sk-*****************************************'}
           type={'block'}
           value={apiKey}
         />
+        {showProxy ? (
+          <Input
+            onChange={(e) => {
+              setConfig({ endpoint: e.target.value });
+            }}
+            placeholder={'https://api.openai.com/v1'}
+            type={'block'}
+            value={proxyUrl}
+          />
+        ) : (
+          <Button
+            icon={<Icon icon={Network} />}
+            onClick={() => {
+              setShow(true);
+            }}
+            type={'text'}
+          >
+            {t('unlock.apikey.addProxyUrl')}
+          </Button>
+        )}
       </FormAction>
       <Flexbox gap={12} width={'100%'}>
         <Button

diff --git a/src/app/chat/features/Conversation/ChatList/Error/InvalidAccess.tsx b/src/app/chat/features/Conversation/ChatList/Error/InvalidAccess.tsx
@@ -29,12 +29,12 @@ const InvalidAccess = memo<{ id: string }>(({ id }) => {
         block
         onChange={(value) => setMode(value as Tab)}
         options={[
-          { icon: <Icon icon={KeySquare} />, label: 'OpenAI API Key', value: Tab.Api },
           {
             icon: <Icon icon={SquareAsterisk} />,
             label: t('password', { ns: 'common' }),
             value: Tab.Password,
           },
+          { icon: <Icon icon={KeySquare} />, label: 'OpenAI API Key', value: Tab.Api },
         ]}
         style={{ width: '100%' }}
         value={mode}

diff --git a/src/locales/default/error.ts b/src/locales/default/error.ts
@@ -37,6 +37,7 @@ export default {
   },
   unlock: {
     apikey: {
+      addProxyUrl: '添加 OpenAI 代理地址（可选）',
       description: '输入你的 OpenAI API Key 即可开始会话。应用不会记录你的 API Key',
       title: '使用自定义 API Key',
     },

diff --git a/src/store/global/selectors/settings.ts b/src/store/global/selectors/settings.ts
@@ -17,6 +17,8 @@ const defaultAgentMeta = (s: GlobalStore) => merge(DEFAULT_AGENT_META, defaultAg
 const openAIAPIKeySelectors = (s: GlobalStore) =>
   s.settings.languageModel.openAI.OPENAI_API_KEY || s.settings.OPENAI_API_KEY;
 
+const openAIProxyUrlSelectors = (s: GlobalStore) => s.settings.languageModel.openAI.endpoint;
+
 export const exportSettings = (s: GlobalStore) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { OPENAI_API_KEY: _, password: __, ...settings } = s.settings;
@@ -41,4 +43,5 @@ export const settingsSelectors = {
   defaultAgentMeta,
   exportSettings,
   openAIAPI: openAIAPIKeySelectors,
+  openAIProxyUrl: openAIProxyUrlSelectors,
 };
diff --git a/src/store/global/slices/settings.ts b/src/store/global/slices/settings.ts
@@ -6,7 +6,7 @@ import type { StateCreator } from 'zustand/vanilla';
 
 import { DEFAULT_AGENT, DEFAULT_SETTINGS } from '@/const/settings';
 import { SettingsTabs } from '@/store/global/initialState';
-import type { GlobalSettings } from '@/types/settings';
+import type { GlobalSettings, OpenAIConfig } from '@/types/settings';
 import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
 
@@ -23,7 +23,7 @@ export interface SettingsAction {
    * 重置设置
    */
   resetSettings: () => void;
-  setOpenAIAPIKey: (apikey: string) => void;
+  setOpenAIConfig: (config: Partial<OpenAIConfig>) => void;
   /**
    * 设置部分配置设置
    * @param settings - 部分配置设置
@@ -63,17 +63,17 @@ export const createSettingsSlice: StateCreator<
   resetSettings: () => {
     set({ settings: DEFAULT_SETTINGS }, false, t('resetSettings'));
   },
-  setOpenAIAPIKey: (apikey) => {
-    get().setSettings({ languageModel: { openAI: { OPENAI_API_KEY: apikey } } });
+  setOpenAIConfig: (config) => {
+    get().setSettings({ languageModel: { openAI: config } });
   },
 
   setSettings: (settings) => {
-    const oldSetting = get().settings;
-    const nextSettings = merge(oldSetting, settings);
+    const prevSetting = get().settings;
+    const nextSettings = merge(prevSetting, settings);
 
-    if (isEqual(oldSetting, nextSettings)) return;
+    if (isEqual(prevSetting, nextSettings)) return;
 
-    set({ settings: merge(oldSetting, settings) }, false, t('setSettings', settings));
+    set({ settings: merge(prevSetting, settings) }, false, t('setSettings', settings));
   },
   switchSettingTabs: (tab) => {
     set({ settingsTab: tab });

diff --git a/src/types/settings.ts b/src/types/settings.ts
@@ -45,7 +45,7 @@ export interface GlobalBaseSettings {
 
 export type GlobalDefaultAgent = Pick<LobeAgentSession, 'config' | 'meta'>;
 
-interface OpenAIConfig {
+export interface OpenAIConfig {
   OPENAI_API_KEY: string;
   azureApiVersion?: string;
   endpoint?: string;