@lobehub/chat 0.146.2 → 0.147.1

package/src/features/ChatInput/STT/common.tsx

@@ -17,88 +17,90 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const CommonSTT = memo<{ 
-    desc: string;
-    error?: ChatMessageError;
-    formattedTime: string;
-    handleCloseError: () => void;
-    handleRetry: () => void;
-    handleTriggerStartStop: () => void;
-    isLoading: boolean;
-    isRecording: boolean;
-    mobile?: boolean;
-    time: number;
-}>(({ 
+const CommonSTT = memo<{
+  desc: string;
+  error?: ChatMessageError;
+  formattedTime: string;
+  handleCloseError: () => void;
+  handleRetry: () => void;
+  handleTriggerStartStop: () => void;
+  isLoading: boolean;
+  isRecording: boolean;
+  mobile?: boolean;
+  time: number;
+}>(
+  ({
     mobile,
-    isLoading, 
-    formattedTime, 
-    time, 
-    isRecording, 
-    error, 
+    isLoading,
+    formattedTime,
+    time,
+    isRecording,
+    error,
     handleRetry,
     handleTriggerStartStop,
     handleCloseError,
     desc,
- }) => {
-  const { t } = useTranslation('chat');
-  const { styles } = useStyles();
+  }) => {
+    const { t } = useTranslation('chat');
+    const { styles } = useStyles();
 
-  return (
-    <Dropdown
-      dropdownRender={
-        error
-          ? () => (
-              <Alert
-                action={
-                  <Button onClick={handleRetry} size={'small'} type={'primary'}>
-                    {t('retry', { ns: 'common' })}
-                  </Button>
-                }
-                closable
-                extra={
-                  error.body && (
-                    <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
-                      {JSON.stringify(error.body, null, 2)}
-                    </Highlighter>
-                  )
-                }
-                message={error.message}
-                onClose={handleCloseError}
-                style={{ alignItems: 'center' }}
-                type="error"
-              />
-            )
-          : undefined
-      }
-      menu={{
-        activeKey: 'time',
-        items: [
-          {
-            key: 'time',
-            label: (
-              <Flexbox align={'center'} gap={8} horizontal>
-                <div className={styles.recording} />
-                {time > 0 ? formattedTime : t(isRecording ? 'stt.loading' : 'stt.prettifying')}
-              </Flexbox>
-            ),
-          },
-        ],
-      }}
-      open={!!error || isRecording || isLoading}
-      placement={mobile ? 'topRight' : 'top'}
-      trigger={['click']}
-    >
-      <ActionIcon
-        active={isRecording}
-        icon={isLoading ? MicOff : Mic}
-        onClick={handleTriggerStartStop}
-        placement={'bottom'}
-        size={mobile ? { blockSize: 36, fontSize: 16 } : { fontSize: 22 }}
-        style={{ flex: 'none' }}
-        title={desc}
-      />
-    </Dropdown>
-  );
-});
+    return (
+      <Dropdown
+        dropdownRender={
+          error
+            ? () => (
+                <Alert
+                  action={
+                    <Button onClick={handleRetry} size={'small'} type={'primary'}>
+                      {t('retry', { ns: 'common' })}
+                    </Button>
+                  }
+                  closable
+                  extra={
+                    error.body && (
+                      <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
+                        {JSON.stringify(error.body, null, 2)}
+                      </Highlighter>
+                    )
+                  }
+                  message={error.message}
+                  onClose={handleCloseError}
+                  style={{ alignItems: 'center' }}
+                  type="error"
+                />
+              )
+            : undefined
+        }
+        menu={{
+          activeKey: 'time',
+          items: [
+            {
+              key: 'time',
+              label: (
+                <Flexbox align={'center'} gap={8} horizontal>
+                  <div className={styles.recording} />
+                  {time > 0 ? formattedTime : t(isRecording ? 'stt.loading' : 'stt.prettifying')}
+                </Flexbox>
+              ),
+            },
+          ],
+        }}
+        open={!!error || isRecording || isLoading}
+        placement={mobile ? 'topRight' : 'top'}
+        trigger={['click']}
+      >
+        <ActionIcon
+          active={isRecording}
+          icon={isLoading ? MicOff : Mic}
+          onClick={handleTriggerStartStop}
+          placement={'bottom'}
+          size={mobile ? { blockSize: 36, fontSize: 16 } : { fontSize: 22 }}
+          style={{ flex: 'none' }}
+          title={desc}
+        />
+      </Dropdown>
+    );
+  },
+);
 
-export default CommonSTT;
+export default CommonSTT;

package/src/features/ChatInput/STT/index.tsx

@@ -1,18 +1,20 @@
+import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
+
 import { useGlobalStore } from '@/store/global';
 import { settingsSelectors } from '@/store/global/selectors';
-import isEqual from 'fast-deep-equal';
+
 import BrowserSTT from './browser';
 import OpenaiSTT from './openai';
 
 const STT = memo<{ mobile?: boolean }>(({ mobile }) => {
-  const { sttServer } = useGlobalStore(settingsSelectors.currentTTS, isEqual)
+  const { sttServer } = useGlobalStore(settingsSelectors.currentTTS, isEqual);
   switch (sttServer) {
     case 'openai': {
-      return <OpenaiSTT mobile={mobile} />
+      return <OpenaiSTT mobile={mobile} />;
     }
   }
-  return <BrowserSTT mobile={mobile} />
-})
+  return <BrowserSTT mobile={mobile} />;
+});
 
-export default STT
+export default STT;

package/src/features/Conversation/Error/APIKeyForm/Bedrock.tsx

@@ -8,18 +8,18 @@ import { useTranslation } from 'react-i18next';
 
 import { ModelProvider } from '@/libs/agent-runtime';
 import { useGlobalStore } from '@/store/global';
-import { modelProviderSelectors } from '@/store/global/selectors';
+import { modelConfigSelectors } from '@/store/global/selectors';
 
 import { FormAction } from '../style';
 
 const BedrockForm = memo(() => {
-  const { t } = useTranslation('error');
+  const { t } = useTranslation('modelProvider');
   const [showRegion, setShow] = useState(false);
 
   const [accessKeyId, secretAccessKey, region, setConfig] = useGlobalStore((s) => [
-    modelProviderSelectors.bedrockConfig(s).accessKeyId,
-    modelProviderSelectors.bedrockConfig(s).secretAccessKey,
-    modelProviderSelectors.bedrockConfig(s).region,
+    modelConfigSelectors.bedrockConfig(s).accessKeyId,
+    modelConfigSelectors.bedrockConfig(s).secretAccessKey,
+    modelConfigSelectors.bedrockConfig(s).region,
     s.setModelProviderConfig,
   ]);
 
@@ -27,8 +27,8 @@ const BedrockForm = memo(() => {
   return (
     <FormAction
       avatar={<Aws.Color color={theme.colorText} size={56} />}
-      description={t('unlock.apikey.Bedrock.description')}
-      title={t('unlock.apikey.Bedrock.title')}
+      description={t('bedrock.unlock.description')}
+      title={t('bedrock.unlock.title')}
     >
       <Input.Password
         autoComplete={'new-password'}
@@ -70,7 +70,7 @@ const BedrockForm = memo(() => {
           }}
           type={'text'}
         >
-          {t('unlock.apikey.Bedrock.customRegion')}
+          {t('bedrock.unlock.customRegion')}
         </Button>
       )}
     </FormAction>

package/src/features/Conversation/Error/APIKeyForm/ProviderApiKeyForm.tsx

@@ -0,0 +1,73 @@
+import { Icon } from '@lobehub/ui';
+import { Button, Input } from 'antd';
+import { Network } from 'lucide-react';
+import { ReactNode, memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useGlobalStore } from '@/store/global';
+import { modelConfigSelectors } from '@/store/global/selectors';
+import { GlobalLLMProviderKey } from '@/types/settings';
+
+import { FormAction } from '../style';
+
+interface ProviderApiKeyFormProps {
+  apiKeyPlaceholder?: string;
+  avatar?: ReactNode;
+  provider: GlobalLLMProviderKey;
+  showEndpoint?: boolean;
+}
+
+const ProviderApiKeyForm = memo<ProviderApiKeyFormProps>(
+  ({ provider, avatar, showEndpoint = false, apiKeyPlaceholder }) => {
+    const { t } = useTranslation('modelProvider');
+    const { t: errorT } = useTranslation('error');
+    const [showProxy, setShow] = useState(false);
+
+    const [apiKey, proxyUrl, setConfig] = useGlobalStore((s) => [
+      modelConfigSelectors.providerConfig(provider)(s)?.apiKey,
+      modelConfigSelectors.providerConfig(provider)(s)?.endpoint,
+      s.setModelProviderConfig,
+    ]);
+
+    return (
+      <FormAction
+        avatar={avatar}
+        description={t(`${provider}.unlock.description` as any)}
+        title={t(`${provider}.unlock.title` as any)}
+      >
+        <Input.Password
+          autoComplete={'new-password'}
+          onChange={(e) => {
+            setConfig(provider, { apiKey: e.target.value });
+          }}
+          placeholder={apiKeyPlaceholder || 'sk-***********************'}
+          type={'block'}
+          value={apiKey}
+        />
+        {showEndpoint &&
+          (showProxy ? (
+            <Input
+              onChange={(e) => {
+                setConfig(provider, { endpoint: e.target.value });
+              }}
+              placeholder={'https://api.openai.com/v1'}
+              type={'block'}
+              value={proxyUrl}
+            />
+          ) : (
+            <Button
+              icon={<Icon icon={Network} />}
+              onClick={() => {
+                setShow(true);
+              }}
+              type={'text'}
+            >
+              {errorT('unlock.addProxyUrl')}
+            </Button>
+          ))}
+      </FormAction>
+    );
+  },
+);
+
+export default ProviderApiKeyForm;

package/src/features/Conversation/Error/APIKeyForm/ProviderAvatar.tsx

@@ -0,0 +1,74 @@
+import {
+  Anthropic,
+  Google,
+  Groq,
+  Mistral,
+  Moonshot,
+  OpenAI,
+  OpenRouter,
+  Perplexity,
+  Together,
+  ZeroOne,
+  Zhipu,
+} from '@lobehub/icons';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+
+import { ModelProvider } from '@/libs/agent-runtime';
+
+interface ProviderAvatarProps {
+  provider: ModelProvider;
+}
+
+const ProviderAvatar = memo<ProviderAvatarProps>(({ provider }) => {
+  const theme = useTheme();
+
+  switch (provider as ModelProvider) {
+    case ModelProvider.Google: {
+      return <Google.Color size={56} />;
+    }
+
+    case ModelProvider.ZhiPu: {
+      return <Zhipu.Color size={64} />;
+    }
+
+    case ModelProvider.Mistral: {
+      return <Mistral.Color size={56} />;
+    }
+
+    case ModelProvider.Moonshot: {
+      return <Moonshot size={56} />;
+    }
+
+    case ModelProvider.Perplexity: {
+      return <Perplexity.Color size={56} />;
+    }
+
+    case ModelProvider.Anthropic: {
+      return <Anthropic color={Anthropic.colorPrimary} size={52} />;
+    }
+
+    case ModelProvider.Groq: {
+      return <Groq color={Groq.colorPrimary} size={56} />;
+    }
+
+    case ModelProvider.OpenRouter: {
+      return <OpenRouter color={OpenRouter.colorPrimary} size={56} />;
+    }
+
+    case ModelProvider.TogetherAI: {
+      return <Together color={Together.colorPrimary} size={56} />;
+    }
+
+    case ModelProvider.ZeroOne: {
+      return <ZeroOne color={ZeroOne.colorPrimary} size={56} />;
+    }
+
+    default:
+    case ModelProvider.OpenAI: {
+      return <OpenAI color={theme.colorText} size={64} />;
+    }
+  }
+});
+
+export default ProviderAvatar;

package/src/features/Conversation/Error/APIKeyForm/index.tsx

@@ -5,19 +5,11 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 import { ModelProvider } from '@/libs/agent-runtime';
 import { useChatStore } from '@/store/chat';
+import { GlobalLLMProviderKey } from '@/types/settings';
 
-import AnthropicForm from './Anthropic';
 import BedrockForm from './Bedrock';
-import GoogleForm from './Google';
-import GroqForm from './Groq';
-import MistralForm from './Mistral';
-import MoonshotForm from './Moonshot';
-import OpenAIForm from './OpenAI';
-import OpenRouterForm from './OpenRouter';
-import PerplexityForm from './Perplexity';
-import TogetherAIForm from './TogetherAI';
-import ZeroOneForm from './ZeroOne';
-import ZhipuForm from './Zhipu';
+import ProviderApiKeyForm from './ProviderApiKeyForm';
+import ProviderAvatar from './ProviderAvatar';
 
 interface APIKeyFormProps {
   id: string;
@@ -29,62 +21,46 @@ const APIKeyForm = memo<APIKeyFormProps>(({ id, provider }) => {
 
   const [resend, deleteMessage] = useChatStore((s) => [s.internalResendMessage, s.deleteMessage]);
 
-  const action = useMemo(() => {
-    switch (provider as ModelProvider) {
-      case ModelProvider.Bedrock: {
-        return <BedrockForm />;
-      }
-
-      case ModelProvider.Google: {
-        return <GoogleForm />;
-      }
-
-      case ModelProvider.ZhiPu: {
-        return <ZhipuForm />;
-      }
-
-      case ModelProvider.Mistral: {
-        return <MistralForm />;
+  const apiKeyPlaceholder = useMemo(() => {
+    switch (provider) {
+      case ModelProvider.Anthropic: {
+        return 'sk-ant_*****************************';
       }
 
-      case ModelProvider.Moonshot: {
-        return <MoonshotForm />;
+      case ModelProvider.OpenRouter: {
+        return 'sk-or-********************************';
       }
 
       case ModelProvider.Perplexity: {
-        return <PerplexityForm />;
+        return 'pplx-********************************';
       }
 
-      case ModelProvider.Anthropic: {
-        return <AnthropicForm />;
+      case ModelProvider.ZhiPu: {
+        return '*********************.*************';
       }
 
       case ModelProvider.Groq: {
-        return <GroqForm />;
-      }
-
-      case ModelProvider.OpenRouter: {
-        return <OpenRouterForm />;
-      }
-
-      case ModelProvider.TogetherAI: {
-        return <TogetherAIForm />;
-      }
-
-      case ModelProvider.ZeroOne: {
-        return <ZeroOneForm />;
+        return 'gsk_*****************************';
       }
 
-      default:
-      case ModelProvider.OpenAI: {
-        return <OpenAIForm />;
+      default: {
+        return '*********************************';
       }
     }
   }, [provider]);
 
   return (
     <Center gap={16} style={{ maxWidth: 300 }}>
-      {action}
+      {provider === ModelProvider.Bedrock ? (
+        <BedrockForm />
+      ) : (
+        <ProviderApiKeyForm
+          apiKeyPlaceholder={apiKeyPlaceholder}
+          avatar={<ProviderAvatar provider={provider as ModelProvider} />}
+          provider={provider as GlobalLLMProviderKey}
+          showEndpoint={provider === ModelProvider.OpenAI}
+        />
+      )}
       <Flexbox gap={12} width={'100%'}>
         <Button
           block

package/src/features/ModelSwitchPanel/index.tsx

@@ -1,14 +1,20 @@
+import { Icon } from '@lobehub/ui';
 import { Dropdown } from 'antd';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
+import { LucideArrowRight } from 'lucide-react';
+import { useRouter } from 'next/navigation';
 import { PropsWithChildren, memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
 import { useGlobalStore } from '@/store/global';
-import { modelProviderSelectors } from '@/store/global/selectors';
+import { modelConfigSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { ModelProviderCard } from '@/types/llm';
+import { withBasePath } from '@/utils/basePath';
 
 const useStyles = createStyles(({ css, prefixCls }) => ({
   menu: css`
@@ -32,30 +38,51 @@ const useStyles = createStyles(({ css, prefixCls }) => ({
 }));
 
 const ModelSwitchPanel = memo<PropsWithChildren>(({ children }) => {
-  const { styles } = useStyles();
+  const { t } = useTranslation('components');
+  const { styles, theme } = useStyles();
   const model = useSessionStore(agentSelectors.currentAgentModel);
   const updateAgentConfig = useSessionStore((s) => s.updateAgentConfig);
 
-  const select = useGlobalStore(modelProviderSelectors.modelSelectList, isEqual);
-  const enabledList = select.filter((s) => s.enabled);
+  const router = useRouter();
+  const enabledList = useGlobalStore(modelConfigSelectors.enabledModelProviderList, isEqual);
 
   const items = useMemo(() => {
-    const getModelItems = (provider: ModelProviderCard) =>
-      provider.chatModels
-        .filter((c) => !c.hidden)
-        .map((model) => ({
-          key: model.id,
-          label: <ModelItemRender {...model} />,
-          onClick: () => {
-            updateAgentConfig({ model: model.id, provider: provider.id });
+    const getModelItems = (provider: ModelProviderCard) => {
+      const items = provider.chatModels.map((model) => ({
+        key: model.id,
+        label: <ModelItemRender {...model} />,
+        onClick: () => {
+          updateAgentConfig({ model: model.id, provider: provider.id });
+        },
+      }));
+
+      // if there is empty items, add a placeholder guide
+      if (items.length === 0)
+        return [
+          {
+            key: 'empty',
+            label: (
+              <Flexbox gap={8} horizontal style={{ color: theme.colorTextTertiary }}>
+                {t('ModelSwitchPanel.emptyModel')}
+                <Icon icon={LucideArrowRight} />
+              </Flexbox>
+            ),
+            onClick: () => {
+              router.push(withBasePath('/settings/llm'));
+            },
           },
-        }));
+        ];
+
+      return items;
+    };
 
+    // If there is only one provider, just remove the group, show model directly
     if (enabledList.length === 1) {
       const provider = enabledList[0];
       return getModelItems(provider);
     }
 
+    // otherwise show with provider group
     return enabledList.map((provider) => ({
       children: getModelItems(provider),
       key: provider.id,

package/src/hooks/_header.ts

@@ -1,35 +1,20 @@
-import {
-  AZURE_OPENAI_API_VERSION,
-  LOBE_CHAT_ACCESS_CODE,
-  OPENAI_API_KEY_HEADER_KEY,
-  OPENAI_END_POINT,
-  USE_AZURE_OPENAI,
-} from '@/const/fetch';
+import { LOBE_CHAT_ACCESS_CODE, OPENAI_API_KEY_HEADER_KEY, OPENAI_END_POINT } from '@/const/fetch';
 import { useGlobalStore } from '@/store/global';
-import { modelProviderSelectors, settingsSelectors } from '@/store/global/selectors';
+import { modelConfigSelectors, settingsSelectors } from '@/store/global/selectors';
 
 // TODO: Need to be removed after tts refactor
 // eslint-disable-next-line no-undef
 export const createHeaderWithOpenAI = (header?: HeadersInit): HeadersInit => {
-  const openai = modelProviderSelectors.openAIConfig(useGlobalStore.getState());
+  const openai = modelConfigSelectors.openAIConfig(useGlobalStore.getState());
 
-  const apiKey = openai.OPENAI_API_KEY || '';
+  const apiKey = openai.apiKey || '';
   const endpoint = openai.endpoint || '';
 
   // eslint-disable-next-line no-undef
-  const result: HeadersInit = {
+  return {
     ...header,
     [LOBE_CHAT_ACCESS_CODE]: settingsSelectors.password(useGlobalStore.getState()),
     [OPENAI_API_KEY_HEADER_KEY]: apiKey,
     [OPENAI_END_POINT]: endpoint,
   };
-
-  if (openai.useAzure) {
-    Object.assign(result, {
-      [AZURE_OPENAI_API_VERSION]: openai.azureApiVersion || '',
-      [USE_AZURE_OPENAI]: '1',
-    });
-  }
-
-  return result;
 };

package/src/libs/agent-runtime/BaseAI.ts

@@ -1,12 +1,28 @@
 import { StreamingTextResponse } from 'ai';
+import OpenAI from 'openai';
+
+import { ChatModelCard } from '@/types/llm';
 
 import { ChatCompetitionOptions, ChatStreamPayload } from './types';
 
 export interface LobeRuntimeAI {
   baseURL?: string;
-
   chat(
     payload: ChatStreamPayload,
     options?: ChatCompetitionOptions,
   ): Promise<StreamingTextResponse>;
+
+  models?(): Promise<any>;
+}
+
+export abstract class LobeOpenAICompatibleRuntime {
+  abstract baseURL: string;
+  abstract client: OpenAI;
+
+  abstract chat(
+    payload: ChatStreamPayload,
+    options?: ChatCompetitionOptions,
+  ): Promise<StreamingTextResponse>;
+
+  abstract models(): Promise<ChatModelCard[]>;
 }