@lobehub/chat 0.122.9 → 0.123.0

package/src/features/ChatInput/ActionBar/Token/TokenTag.tsx

@@ -1,17 +1,22 @@
 import { TokenTag, Tooltip } from '@lobehub/ui';
+import numeral from 'numeral';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
-import { ModelTokens } from '@/const/llm';
 import { useTokenCount } from '@/hooks/useTokenCount';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
+import { useGlobalStore } from '@/store/global';
+import { modelProviderSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
 import { LanguageModel } from '@/types/llm';
 
+const format = (number: number) => numeral(number).format('0,0');
+
 const Token = memo(() => {
   const { t } = useTranslation('chat');
 
@@ -25,6 +30,8 @@ const Token = memo(() => {
     agentSelectors.currentAgentModel(s) as LanguageModel,
   ]);
 
+  const tokens = useGlobalStore(modelProviderSelectors.modelMaxToken(model));
+
   const plugins = useSessionStore(agentSelectors.currentAgentPlugins);
 
   const toolsString = useToolStore((s) => {
@@ -38,26 +45,54 @@ const Token = memo(() => {
   });
 
   const inputTokenCount = useTokenCount(input);
+  const chatsToken = useTokenCount(messageString) + inputTokenCount;
 
-  const systemRoleToken = useTokenCount(systemRole);
-  const chatsToken = useTokenCount(messageString);
   const toolsToken = useTokenCount(toolsString);
+  const systemRoleToken = useTokenCount(systemRole);
 
-  const totalToken = systemRoleToken + chatsToken + toolsToken;
+  const totalToken = systemRoleToken + toolsToken + chatsToken;
   return (
     <Tooltip
       placement={'bottom'}
-      title={t('tokenDetail', { chatsToken, systemRoleToken, toolsToken })}
+      title={
+        <Flexbox width={150}>
+          <Flexbox horizontal justify={'space-between'}>
+            <span>{t('tokenDetails.systemRole')}</span>
+            <span>{format(systemRoleToken)}</span>
+          </Flexbox>
+          <Flexbox horizontal justify={'space-between'}>
+            <span>{t('tokenDetails.tools')}</span>
+            <span>{format(toolsToken)}</span>
+          </Flexbox>
+          <Flexbox horizontal justify={'space-between'}>
+            <span>{t('tokenDetails.chats')}</span>
+            <span>{format(chatsToken)}</span>
+          </Flexbox>
+          <Flexbox horizontal justify={'space-between'}>
+            <span>{t('tokenDetails.used')}</span>
+            <span>{format(totalToken)}</span>
+          </Flexbox>
+          <Flexbox horizontal justify={'space-between'} style={{ marginTop: 8 }}>
+            <span>{t('tokenDetails.total')}</span>
+            <span>{format(tokens)}</span>
+          </Flexbox>
+          <Flexbox horizontal justify={'space-between'}>
+            <span>{t('tokenDetails.rest')}</span>
+            <span>{format(tokens - totalToken)}</span>
+          </Flexbox>
+        </Flexbox>
+      }
     >
       <TokenTag
-        maxValue={ModelTokens[model]}
+        displayMode={'used'}
+        maxValue={tokens}
         style={{ marginLeft: 8 }}
         text={{
           overload: t('tokenTag.overload'),
           remained: t('tokenTag.remained'),
           used: t('tokenTag.used'),
         }}
-        value={totalToken + inputTokenCount}
+        value={totalToken}
       />
     </Tooltip>
   );

package/src/features/ChatInput/ActionBar/Token/index.tsx

@@ -1,15 +1,18 @@
 import dynamic from 'next/dynamic';
 import { memo } from 'react';
 
+import { useGlobalStore } from '@/store/global';
+import { modelProviderSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 
 const LargeTokenContent = dynamic(() => import('./TokenTag'), { ssr: false });
 
 const Token = memo(() => {
-  const [showTokenTag] = useSessionStore((s) => [agentSelectors.showTokenTag(s)]);
+  const model = useSessionStore(agentSelectors.currentAgentModel);
+  const showTag = useGlobalStore(modelProviderSelectors.modelHasMaxToken(model));
 
-  return showTokenTag && <LargeTokenContent />;
+  return showTag && <LargeTokenContent />;
 });
 
 export default Token;

package/src/features/ChatInput/ActionBar/Tools/index.tsx

@@ -8,6 +8,8 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import PluginStore from '@/features/PluginStore';
+import { useGlobalStore } from '@/store/global';
+import { modelProviderSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { pluginHelpers, useToolStore } from '@/store/tool';
@@ -43,6 +45,9 @@ const Tools = memo(() => {
   const [open, setOpen] = useState(false);
   const { styles } = useStyles();
 
+  const model = useSessionStore(agentSelectors.currentAgentModel);
+  const enableFC = useGlobalStore(modelProviderSelectors.modelEnabledFunctionCall(model));
+
   return (
     <>
       <Dropdown
@@ -118,7 +123,12 @@ const Tools = memo(() => {
         placement={'top'}
         trigger={['click']}
       >
-        <ActionIcon icon={Blocks} placement={'bottom'} title={t('tools.title')} />
+        <ActionIcon
+          disable={!enableFC}
+          icon={Blocks}
+          placement={'bottom'}
+          title={t(enableFC ? 'tools.title' : 'tools.disabled')}
+        />
       </Dropdown>
       <PluginStore open={open} setOpen={setOpen} />
     </>

package/src/features/ChatInput/useChatInput.ts

@@ -2,6 +2,8 @@ import { TextAreaRef } from 'antd/es/input/TextArea';
 import { useCallback, useRef, useState } from 'react';
 
 import { useChatStore } from '@/store/chat';
+import { useGlobalStore } from '@/store/global';
+import { modelProviderSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 
@@ -12,7 +14,9 @@ export const useChatInput = () => {
   const [expand, setExpand] = useState<boolean>(false);
   const onSend = useSendMessage();
 
-  const canUpload = useSessionStore(agentSelectors.modelHasVisionAbility);
+  const model = useSessionStore(agentSelectors.currentAgentModel);
+  const canUpload = useGlobalStore(modelProviderSelectors.modelEnabledVision(model));
+
   const [loading, value, onInput, onStop] = useChatStore((s) => [
     !!s.chatLoadingId,
     s.inputMessage,

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

@@ -0,0 +1,80 @@
+import { Aws } from '@lobehub/icons';
+import { Icon } from '@lobehub/ui';
+import { Button, Input, Select } from 'antd';
+import { useTheme } from 'antd-style';
+import { Network } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { ModelProvider } from '@/libs/agent-runtime';
+import { useGlobalStore } from '@/store/global';
+import { modelProviderSelectors } from '@/store/global/selectors';
+
+import { FormAction } from '../style';
+
+const BedrockForm = memo(() => {
+  const { t } = useTranslation('error');
+  const [showRegion, setShow] = useState(false);
+
+  const [accessKeyId, secretAccessKey, region, setConfig] = useGlobalStore((s) => [
+    modelProviderSelectors.bedrockConfig(s).accessKeyId,
+    modelProviderSelectors.bedrockConfig(s).secretAccessKey,
+    modelProviderSelectors.bedrockConfig(s).region,
+    s.setModelProviderConfig,
+  ]);
+
+  const theme = useTheme();
+  return (
+    <FormAction
+      avatar={<Aws.Color color={theme.colorText} size={56} />}
+      description={t('unlock.apikey.Bedrock.description')}
+      title={t('unlock.apikey.Bedrock.title')}
+    >
+      <Input.Password
+        autoComplete={'new-password'}
+        onChange={(e) => {
+          setConfig(ModelProvider.Bedrock, { accessKeyId: e.target.value });
+        }}
+        placeholder={'Aws Access Key Id'}
+        type={'block'}
+        value={accessKeyId}
+      />
+      <Input.Password
+        autoComplete={'new-password'}
+        onChange={(e) => {
+          setConfig(ModelProvider.Bedrock, { secretAccessKey: e.target.value });
+        }}
+        placeholder={'Aws Secret Access Key'}
+        type={'block'}
+        value={secretAccessKey}
+      />
+      {showRegion ? (
+        <Select
+          onChange={(region) => {
+            setConfig('bedrock', { region });
+          }}
+          options={['us-east-1', 'us-west-2', 'ap-southeast-1'].map((i) => ({
+            label: i,
+            value: i,
+          }))}
+          placeholder={'https://api.openai.com/v1'}
+          style={{ width: '100%' }}
+          value={region}
+        />
+      ) : (
+        <Button
+          block
+          icon={<Icon icon={Network} />}
+          onClick={() => {
+            setShow(true);
+          }}
+          type={'text'}
+        >
+          {t('unlock.apikey.Bedrock.customRegion')}
+        </Button>
+      )}
+    </FormAction>
+  );
+});
+
+export default BedrockForm;

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

@@ -0,0 +1,61 @@
+import { Google } from '@lobehub/icons';
+import { Input } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { ModelProvider } from '@/libs/agent-runtime';
+import { useGlobalStore } from '@/store/global';
+import { modelProviderSelectors } from '@/store/global/selectors';
+
+import { FormAction } from '../style';
+
+const GoogleForm = memo(() => {
+  const { t } = useTranslation('error');
+  // const [showProxy, setShow] = useState(false);
+
+  const [apiKey, setConfig] = useGlobalStore((s) => [
+    modelProviderSelectors.googleAPIKey(s),
+    // modelProviderSelectors.openAIProxyUrl(s),
+    s.setModelProviderConfig,
+  ]);
+
+  return (
+    <FormAction
+      avatar={<Google.Color size={56} />}
+      description={t('unlock.apikey.Google.description')}
+      title={t('unlock.apikey.Google.title')}
+    >
+      <Input.Password
+        autoComplete={'new-password'}
+        onChange={(e) => {
+          setConfig(ModelProvider.Google, { apiKey: e.target.value });
+        }}
+        placeholder={'*********************************'}
+        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>
+  );
+});
+
+export default GoogleForm;

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

@@ -0,0 +1,63 @@
+import { OpenAI } from '@lobehub/icons';
+import { Icon } from '@lobehub/ui';
+import { Button, Input } from 'antd';
+import { useTheme } from 'antd-style';
+import { Network } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useGlobalStore } from '@/store/global';
+import { modelProviderSelectors } from '@/store/global/selectors';
+
+import { FormAction } from '../style';
+
+const OpenAIForm = memo(() => {
+  const { t } = useTranslation('error');
+  const [showProxy, setShow] = useState(false);
+
+  const [apiKey, proxyUrl, setConfig] = useGlobalStore((s) => [
+    modelProviderSelectors.openAIAPIKey(s),
+    modelProviderSelectors.openAIProxyUrl(s),
+    s.setModelProviderConfig,
+  ]);
+  const theme = useTheme();
+  return (
+    <FormAction
+      avatar={<OpenAI color={theme.colorText} size={64} />}
+      description={t('unlock.apikey.OpenAI.description')}
+      title={t('unlock.apikey.OpenAI.title')}
+    >
+      <Input.Password
+        autoComplete={'new-password'}
+        onChange={(e) => {
+          setConfig('openAI', { OPENAI_API_KEY: e.target.value });
+        }}
+        placeholder={'sk-*****************************************'}
+        type={'block'}
+        value={apiKey}
+      />
+      {showProxy ? (
+        <Input
+          onChange={(e) => {
+            setConfig('openAI', { 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.OpenAI.addProxyUrl')}
+        </Button>
+      )}
+    </FormAction>
+  );
+});
+
+export default OpenAIForm;

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

@@ -0,0 +1,62 @@
+import { Zhipu } from '@lobehub/icons';
+import { Input } from 'antd';
+import { rgba } from 'polished';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { ModelProvider } from '@/libs/agent-runtime';
+import { useGlobalStore } from '@/store/global';
+import { modelProviderSelectors } from '@/store/global/selectors';
+
+import { FormAction } from '../style';
+
+const ZhipuForm = memo(() => {
+  const { t } = useTranslation('error');
+
+  const [apiKey, setConfig] = useGlobalStore((s) => [
+    modelProviderSelectors.zhipuAPIKey(s),
+    s.setModelProviderConfig,
+    // modelProviderSelectors.zhipuAPIKey(s),
+  ]);
+
+  return (
+    <FormAction
+      avatar={<Zhipu.Color size={64} />}
+      background={rgba(Zhipu.colorPrimary, 0.1)}
+      description={t('unlock.apikey.Zhipu.description')}
+      title={t('unlock.apikey.Zhipu.title')}
+    >
+      <Input.Password
+        autoComplete={'new-password'}
+        onChange={(e) => {
+          setConfig(ModelProvider.ZhiPu, { apiKey: e.target.value });
+        }}
+        placeholder={'*************************.****************'}
+        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>
+  );
+});
+
+export default ZhipuForm;

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

@@ -0,0 +1,72 @@
+import { Button } from 'antd';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { ModelProvider } from '@/libs/agent-runtime';
+import { useChatStore } from '@/store/chat';
+
+import BedrockForm from './Bedrock';
+import GoogleForm from './Google';
+import OpenAIForm from './OpenAI';
+import ZhipuForm from './Zhipu';
+
+interface APIKeyFormProps {
+  id: string;
+  provider?: string;
+}
+
+const APIKeyForm = memo<APIKeyFormProps>(({ id, provider }) => {
+  const { t } = useTranslation('error');
+
+  const [resend, deleteMessage] = useChatStore((s) => [s.resendMessage, s.deleteMessage]);
+
+  const action = useMemo(() => {
+    switch (provider as ModelProvider) {
+      case ModelProvider.Bedrock: {
+        return <BedrockForm />;
+      }
+
+      case ModelProvider.Google: {
+        return <GoogleForm />;
+      }
+
+      case ModelProvider.ZhiPu: {
+        return <ZhipuForm />;
+      }
+
+      default:
+      case ModelProvider.OpenAI: {
+        return <OpenAIForm />;
+      }
+    }
+  }, [provider]);
+
+  return (
+    <Center gap={16} style={{ maxWidth: 300 }}>
+      {action}
+      <Flexbox gap={12} width={'100%'}>
+        <Button
+          block
+          onClick={() => {
+            resend(id);
+            deleteMessage(id);
+          }}
+          style={{ marginTop: 8 }}
+          type={'primary'}
+        >
+          {t('unlock.confirm')}
+        </Button>
+        <Button
+          onClick={() => {
+            deleteMessage(id);
+          }}
+        >
+          {t('unlock.closeMessage')}
+        </Button>
+      </Flexbox>
+    </Center>
+  );
+});
+
+export default APIKeyForm;

package/src/features/Conversation/Error/AccessCodeForm.tsx

@@ -0,0 +1,63 @@
+import { Button, Input } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { useGlobalStore } from '@/store/global';
+import { settingsSelectors } from '@/store/global/selectors';
+
+import { FormAction } from './style';
+
+interface AccessCodeFormProps {
+  id: string;
+}
+
+const AccessCodeForm = memo<AccessCodeFormProps>(({ id }) => {
+  const { t } = useTranslation('error');
+  const [password, setSettings] = useGlobalStore((s) => [
+    settingsSelectors.currentSettings(s).password,
+    s.setSettings,
+  ]);
+  const [resend, deleteMessage] = useChatStore((s) => [s.resendMessage, s.deleteMessage]);
+
+  return (
+    <>
+      <FormAction
+        avatar={'🗳'}
+        description={t('unlock.password.description')}
+        title={t('unlock.password.title')}
+      >
+        <Input.Password
+          autoComplete={'new-password'}
+          onChange={(e) => {
+            setSettings({ password: e.target.value });
+          }}
+          placeholder={t('unlock.password.placeholder')}
+          type={'block'}
+          value={password}
+        />
+      </FormAction>
+      <Flexbox gap={12}>
+        <Button
+          onClick={() => {
+            resend(id);
+            deleteMessage(id);
+          }}
+          type={'primary'}
+        >
+          {t('unlock.confirm')}
+        </Button>
+        <Button
+          onClick={() => {
+            deleteMessage(id);
+          }}
+        >
+          {t('unlock.closeMessage')}
+        </Button>
+      </Flexbox>
+    </>
+  );
+});
+
+export default AccessCodeForm;

package/src/features/Conversation/Error/ErrorJsonViewer.tsx

@@ -0,0 +1,26 @@
+import { Highlighter } from '@lobehub/ui';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { ChatMessageError } from '@/types/message';
+
+interface ErrorJSONViewerProps {
+  error?: ChatMessageError;
+  id: string;
+}
+
+const ErrorJsonViewer = memo<ErrorJSONViewerProps>(({ error, id }) => {
+  const errorBody = error?.body || error;
+
+  if (!errorBody) return;
+
+  return (
+    <Flexbox id={id} style={{ maxWidth: 600 }}>
+      <Highlighter copyButtonSize={'small'} language={'json'}>
+        {JSON.stringify(errorBody, null, 2)}
+      </Highlighter>
+    </Flexbox>
+  );
+});
+
+export default ErrorJsonViewer;

package/src/features/Conversation/Error/InvalidAPIKey.tsx

@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+import APIKeyForm from './APIKeyForm';
+import { ErrorActionContainer } from './style';
+
+interface InvalidAPIKeyProps {
+  id: string;
+  provider?: string;
+}
+const InvalidAPIKey = memo<InvalidAPIKeyProps>(({ id, provider }) => (
+  <ErrorActionContainer>
+    <APIKeyForm id={id} provider={provider} />
+  </ErrorActionContainer>
+));
+
+export default InvalidAPIKey;

package/src/features/Conversation/Error/InvalidAccessCode.tsx

@@ -0,0 +1,50 @@
+import { Icon } from '@lobehub/ui';
+import { Segmented } from 'antd';
+import { AsteriskSquare, KeySquare } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import APIKeyForm from './APIKeyForm';
+import AccessCodeForm from './AccessCodeForm';
+import { ErrorActionContainer } from './style';
+
+enum Tab {
+  Api = 'api',
+  Password = 'password',
+}
+
+interface InvalidAccessCodeProps {
+  id: string;
+  provider?: string;
+}
+
+const InvalidAccessCode = memo<InvalidAccessCodeProps>(({ id, provider }) => {
+  const { t } = useTranslation('error');
+  const [mode, setMode] = useState<Tab>(Tab.Password);
+
+  return (
+    <ErrorActionContainer>
+      <Segmented
+        block
+        onChange={(value) => setMode(value as Tab)}
+        options={[
+          {
+            icon: <Icon icon={AsteriskSquare} />,
+            label: t('unlock.tabs.password'),
+            value: Tab.Password,
+          },
+          { icon: <Icon icon={KeySquare} />, label: t('unlock.tabs.apiKey'), value: Tab.Api },
+        ]}
+        style={{ width: '100%' }}
+        value={mode}
+      />
+      <Flexbox gap={24}>
+        {mode === Tab.Password && <AccessCodeForm id={id} />}
+        {mode === Tab.Api && <APIKeyForm id={id} provider={provider} />}
+      </Flexbox>
+    </ErrorActionContainer>
+  );
+});
+
+export default InvalidAccessCode;