@lobehub/chat 1.0.13 → 1.0.14

package/locales/nl-NL/setting.json

@@ -102,6 +102,7 @@
       "latestTime": "Laatst bijgewerkt: {{time}}",
       "noLatestTime": "Geen lijst beschikbaar op dit moment"
     },
+    "helpDoc": "configuratiehandleiding",
     "modelList": {
       "desc": "Selecteer het model dat in de sessie moet worden weergegeven. Het geselecteerde model wordt weergegeven in de modellijst.",
       "placeholder": "Selecteer een model uit de lijst",

package/locales/pl-PL/setting.json

@@ -102,6 +102,7 @@
       "latestTime": "Ostatnia aktualizacja: {{time}}",
       "noLatestTime": "Brak dostępnej listy"
     },
+    "helpDoc": "Poradnik konfiguracji",
     "modelList": {
       "desc": "Wybierz modele do wyświetlenia w sesji. Wybrane modele będą widoczne na liście modeli",
       "placeholder": "Wybierz model z listy",

package/locales/pt-BR/setting.json

@@ -102,6 +102,7 @@
       "latestTime": "Última atualização: {{time}}",
       "noLatestTime": "Lista não disponível"
     },
+    "helpDoc": "Tutorial de configuração",
     "modelList": {
       "desc": "Escolha os modelos a serem exibidos na conversa. Os modelos selecionados serão exibidos na lista de modelos.",
       "placeholder": "Selecione um modelo da lista",

package/locales/ru-RU/setting.json

@@ -102,6 +102,7 @@
       "latestTime": "Последнее обновление: {{time}}",
       "noLatestTime": "Список пока не получен"
     },
+    "helpDoc": "Руководство по настройке",
     "modelList": {
       "desc": "Выберите модель для отображения в сеансе, выбранная модель будет отображаться в списке моделей",
       "placeholder": "Выберите модель из списка",

package/locales/tr-TR/setting.json

@@ -102,6 +102,7 @@
       "latestTime": "Son güncelleme zamanı: {{time}}",
       "noLatestTime": "Liste henüz alınamadı"
     },
+    "helpDoc": "Yardım Belgeleri",
     "modelList": {
       "desc": "Görüntülenecek modeli seçin, seçilen model model listesinde görüntülenecektir",
       "placeholder": "Lütfen listeden bir model seçin",

package/locales/vi-VN/setting.json

@@ -102,6 +102,7 @@
       "latestTime": "Thời gian cập nhật lần cuối: {{time}}",
       "noLatestTime": "Chưa có danh sách nào được lấy"
     },
+    "helpDoc": "Hướng dẫn cấu hình",
     "modelList": {
       "desc": "Chọn mô hình hiển thị trong cuộc trò chuyện, mô hình đã chọn sẽ được hiển thị trong danh sách mô hình",
       "placeholder": "Vui lòng chọn mô hình từ danh sách",

package/locales/zh-CN/setting.json

@@ -102,6 +102,7 @@
       "latestTime": "上次更新时间：{{time}}",
       "noLatestTime": "暂未获取列表"
     },
+    "helpDoc": "配置教程",
     "modelList": {
       "desc": "选择在会话中展示的模型，选择的模型会在模型列表中展示",
       "placeholder": "请从列表中选择模型",

package/locales/zh-TW/setting.json

@@ -102,6 +102,7 @@
       "latestTime": "上次更新時間：{{time}}",
       "noLatestTime": "暫未獲取列表"
     },
+    "helpDoc": "配置說明文件",
     "modelList": {
       "desc": "選擇在會話中展示的模型，選擇的模型會在模型列表中展示",
       "placeholder": "請從列表中選擇模型",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -40,13 +40,13 @@
     "db:z-pull": "drizzle-kit introspect -- dotenv_config_path='.env'",
     "dev": "next dev -p 3010",
     "dev:clerk-proxy": "ngrok http http://localhost:3011",
-    "docs:i18n": "lobe-i18n md && npm run workflow:docs && npm run lint:mdx",
-    "docs:seo": "lobe-seo && npm run workflow:mdx && npm run lint:mdx",
+    "docs:i18n": "lobe-i18n md && npm run lint:mdx",
+    "docs:seo": "lobe-seo && npm run lint:mdx",
     "i18n": "npm run workflow:i18n && lobe-i18n",
     "lint": "npm run lint:ts && npm run lint:style && npm run type-check && npm run lint:circular",
     "lint:circular": "dpdm src/**/*.ts  --warning false  --tree false  --exit-code circular:1  -T true --skip-dynamic-imports circular",
     "lint:md": "remark . --quiet --frail --output",
-    "lint:mdx": "eslint \"{contributing,docs}/**/*.mdx\" --quiet --fix",
+    "lint:mdx": "npm run workflow:mdx-with-lint && prettier -c --write \"{src,docs}/**/*.mdx\" && npm run workflow:mdx-with-lint",
     "lint:style": "stylelint \"{src,tests}/**/*.{js,jsx,ts,tsx}\" --fix",
     "lint:ts": "eslint \"{src,tests}/**/*.{js,jsx,ts,tsx}\" --fix",
     "prepare": "husky",
@@ -64,7 +64,8 @@
     "type-check": "tsc --noEmit",
     "workflow:docs": "tsx scripts/docsWorkflow/index.ts",
     "workflow:i18n": "tsx scripts/i18nWorkflow/index.ts",
-    "workflow:mdx": "tsx scripts/mdxWorkflow/index.ts",
+    "workflow:mdx": "tsx ./scripts/mdxWorkflow/index.ts",
+    "workflow:mdx-with-lint": "tsx ./scripts/mdxWorkflow/index.ts && eslint \"docs/**/*.mdx\" --quiet --fix",
     "workflow:readme": "tsx scripts/readmeWorkflow/index.ts"
   },
   "lint-staged": {

package/src/app/(main)/settings/llm/ProviderList/providers.tsx

@@ -20,6 +20,7 @@ import { Divider } from 'antd';
 import { useTheme } from 'antd-style';
 import { useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
 
 import {
   AnthropicProviderCard,
@@ -44,6 +45,8 @@ import { useBedrockProvider } from './Bedrock';
 import { useOllamaProvider } from './Ollama';
 import { useOpenAIProvider } from './OpenAI';
 
+const BASE_DOC_URL = 'https://lobehub.com/docs/usage/providers';
+
 const AnthropicBrand = () => {
   const { isDarkMode } = useTheme();
   return <Anthropic.Text color={isDarkMode ? undefined : Claude.colorPrimary} size={15} />;
@@ -81,64 +84,90 @@ export const useProviderList = (): ProviderItem[] => {
 
   return useMemo(
     () => [
-      openAIProvider,
-      ollamaProvider,
-      azureProvider,
+      {
+        ...openAIProvider,
+        docUrl: urlJoin(BASE_DOC_URL, 'openai'),
+      },
+      {
+        ...ollamaProvider,
+        docUrl: urlJoin(BASE_DOC_URL, 'ollama'),
+      },
+      {
+        ...azureProvider,
+        docUrl: urlJoin(BASE_DOC_URL, 'azure'),
+      },
       {
         ...GoogleProviderCard,
+        docUrl: urlJoin(BASE_DOC_URL, 'gemini'),
         title: <GoogleBrand />,
       },
       {
         ...AnthropicProviderCard,
+        docUrl: urlJoin(BASE_DOC_URL, 'anthropic'),
         title: <AnthropicBrand />,
       },
-      bedrockProvider,
+      {
+        ...bedrockProvider,
+        docUrl: urlJoin(BASE_DOC_URL, 'bedrock'),
+      },
       {
         ...GroqProviderCard,
+        docUrl: urlJoin(BASE_DOC_URL, 'groq'),
         title: <GroqBrand />,
       },
       {
         ...OpenRouterProviderCard,
+        docUrl: urlJoin(BASE_DOC_URL, 'openrouter'),
         title: <OpenRouter.Combine iconProps={{ color: OpenRouter.colorPrimary }} size={20} />,
       },
       {
         ...TogetherAIProviderCard,
+        docUrl: urlJoin(BASE_DOC_URL, 'togetherai'),
         title: <Together.Combine size={26} type={'color'} />,
       },
       {
         ...QwenProviderCard,
+        docUrl: urlJoin(BASE_DOC_URL, 'qwen'),
         title: <Tongyi.Combine extra={'千问'} size={26} type={'color'} />,
       },
       {
         ...DeepSeekProviderCard,
+        docUrl: urlJoin(BASE_DOC_URL, 'deepseek'),
         title: <DeepSeek.Combine size={28} type={'color'} />,
       },
       {
         ...MinimaxProviderCard,
+        docUrl: urlJoin(BASE_DOC_URL, 'minimax'),
         title: <Minimax.Combine size={32} type={'color'} />,
       },
       {
         ...MistralProviderCard,
+        docUrl: urlJoin(BASE_DOC_URL, 'mistral'),
         title: <Mistral.Combine size={26} type={'color'} />,
       },
       {
         ...MoonshotProviderCard,
+        docUrl: urlJoin(BASE_DOC_URL, 'moonshot'),
         title: <MoonshotBrand />,
       },
       {
         ...PerplexityProviderCard,
+        docUrl: urlJoin(BASE_DOC_URL, 'perplexity'),
         title: <Perplexity.Combine size={24} type={'color'} />,
       },
       {
         ...ZhiPuProviderCard,
+        docUrl: urlJoin(BASE_DOC_URL, 'zhipu'),
         title: <Zhipu.Combine size={32} type={'color'} />,
       },
       {
         ...ZeroOneProviderCard,
+        docUrl: urlJoin(BASE_DOC_URL, '01ai'),
         title: <ZeroOne.Text size={20} />,
       },
       {
         ...StepfunProviderCard,
+        docUrl: urlJoin(BASE_DOC_URL, 'stepfun'),
         title: <Stepfun.Combine size={20} type={'color'} />,
       },
     ],

package/src/app/(main)/settings/llm/components/ProviderConfig/index.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import { Form, type FormItemProps, type ItemGroup } from '@lobehub/ui';
+import { Form, type FormItemProps, type ItemGroup, Tooltip } from '@lobehub/ui';
 import { Input, Switch } from 'antd';
 import { createStyles } from 'antd-style';
 import { debounce } from 'lodash-es';
+import Link from 'next/link';
 import { ReactNode, memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
+import { Center, Flexbox } from 'react-layout-kit';
 
 import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
 import {
@@ -25,7 +26,7 @@ import { GlobalLLMProviderKey } from '@/types/user/settings';
 import Checker from '../Checker';
 import ProviderModelListSelect from '../ProviderModelList';
 
-const useStyles = createStyles(({ css, prefixCls, responsive }) => ({
+const useStyles = createStyles(({ css, prefixCls, responsive, token }) => ({
   form: css`
     .${prefixCls}-form-item-control:has(.${prefixCls}-input,.${prefixCls}-select) {
       flex: none;
@@ -40,6 +41,19 @@ const useStyles = createStyles(({ css, prefixCls, responsive }) => ({
       font-size: 12px;
     }
   `,
+  help: css`
+    font-size: 12px;
+    font-weight: 500;
+    color: ${token.colorTextDescription};
+
+    background: ${token.colorFillTertiary};
+    border-radius: 50%;
+
+    &:hover {
+      color: ${token.colorText};
+      background: ${token.colorFill};
+    }
+  `,
   safariIconWidthFix: css`
     svg {
       width: unset !important;
@@ -52,6 +66,7 @@ export interface ProviderConfigProps extends Omit<ModelProviderCard, 'id'> {
   canDeactivate?: boolean;
   checkerItem?: FormItemProps;
   className?: string;
+  docUrl?: string;
   hideSwitch?: boolean;
   id: GlobalLLMProviderKey;
   modelList?: {
@@ -78,6 +93,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
     disableBrowserRequest,
     className,
     name,
+    docUrl,
   }) => {
     const { t } = useTranslation('setting');
     const [form] = Form.useForm();
@@ -178,14 +194,28 @@ const ProviderConfig = memo<ProviderConfigProps>(
       children: formItems,
 
       defaultActive: canDeactivate ? enabled : undefined,
-      extra: canDeactivate ? (
-        <Switch
-          onChange={(enabled) => {
-            toggleProviderEnabled(id, enabled);
-          }}
-          value={enabled}
-        />
-      ) : undefined,
+
+      extra: (
+        <Flexbox align={'center'} gap={8} horizontal>
+          {docUrl && (
+            <Tooltip title={t('llm.helpDoc')}>
+              <Link href={docUrl} onClick={(e) => e.stopPropagation()} target={'_blank'}>
+                <Center className={styles.help} height={20} width={20}>
+                  ?
+                </Center>
+              </Link>
+            </Tooltip>
+          )}
+          {canDeactivate ? (
+            <Switch
+              onChange={(enabled) => {
+                toggleProviderEnabled(id, enabled);
+              }}
+              value={enabled}
+            />
+          ) : undefined}
+        </Flexbox>
+      ),
       title: (
         <Flexbox
           align={'center'}

package/src/app/(main)/settings/llm/index.tsx

@@ -2,9 +2,8 @@
 
 import { Flexbox } from 'react-layout-kit';
 
-import Footer from '@/app/(main)/settings/llm/components/Footer';
-
 import { useProviderList } from './ProviderList/providers';
+import Footer from './components/Footer';
 import ProviderConfig from './components/ProviderConfig';
 
 const Page = () => {

package/src/features/ChatInput/useSend.ts

@@ -19,9 +19,10 @@ export const useSendMessage = () => {
   return useCallback((params: UseSendMessageParams = {}) => {
     const store = useChatStore.getState();
     if (chatSelectors.isAIGenerating(store)) return;
-    if (!store.inputMessage) return;
 
     const imageList = filesSelectors.imageUrlOrBase64List(useFileStore.getState());
+    // if there is no message and no image, then we should not send the message
+    if (!store.inputMessage && imageList.length === 0) return;
 
     sendMessage({
       files: imageList,

package/src/features/Conversation/Messages/Assistant/ToolCalls/index.tsx

@@ -22,7 +22,7 @@ export interface InspectorProps {
 }
 
 const CallItem = memo<InspectorProps>(
-  ({ arguments: requestArgs = '{}', messageId, index, identifier, style }) => {
+  ({ arguments: requestArgs, messageId, index, identifier, style }) => {
     const { t } = useTranslation('plugin');
     const { styles } = useStyles();
     const [open, setOpen] = useState(false);

package/src/features/Conversation/Messages/components/Arguments.tsx

@@ -11,9 +11,11 @@ const Arguments = memo<ArgumentsProps>(({ arguments: args = '' }) => {
   const yaml = useYamlArguments(args);
 
   return (
-    <Highlighter language={'yaml'} showLanguage={false}>
-      {yaml}
-    </Highlighter>
+    !!yaml && (
+      <Highlighter language={'yaml'} showLanguage={false}>
+        {yaml}
+      </Highlighter>
+    )
   );
 });
 

package/src/features/Conversation/Messages/hooks/useYamlArguments.ts

@@ -1,9 +1,12 @@
-import { Allow, parse } from 'partial-json';
+import { parse } from 'partial-json';
 import { stringify } from 'yaml';
 
 export const useYamlArguments = (args: string) => {
   try {
-    const obj = parse(args, Allow.OBJ);
+    const obj = parse(args);
+
+    if (Object.keys(obj).length === 0) return '';
+
     return stringify(obj);
   } catch {
     return args;

package/src/locales/default/setting.ts

@@ -105,6 +105,7 @@ export default {
       latestTime: '上次更新时间：{{time}}',
       noLatestTime: '暂未获取列表',
     },
+    helpDoc: '配置教程',
     modelList: {
       desc: '选择在会话中展示的模型，选择的模型会在模型列表中展示',
       placeholder: '请从列表中选择模型',

package/src/store/chat/slices/plugin/action.test.ts

@@ -463,7 +463,7 @@ describe('ChatPluginAction', () => {
       const toolResponse = JSON.stringify({ abc: 'data' });
 
       useToolStore.setState({
-        invokeBuiltinTool: vi.fn().mockResolvedValue(toolResponse),
+        transformApiArgumentsToAiState: vi.fn().mockResolvedValue(toolResponse),
       });
 
       useChatStore.setState({
@@ -479,7 +479,7 @@ describe('ChatPluginAction', () => {
       });
 
       // Verify that the builtin tool was invoked with the correct arguments
-      expect(useToolStore.getState().invokeBuiltinTool).toHaveBeenCalledWith(
+      expect(useToolStore.getState().transformApiArgumentsToAiState).toHaveBeenCalledWith(
         payload.apiName,
         JSON.parse(payload.arguments),
       );
@@ -511,7 +511,7 @@ describe('ChatPluginAction', () => {
 
       act(() => {
         useToolStore.setState({
-          invokeBuiltinTool: vi.fn().mockResolvedValue(toolResponse),
+          transformApiArgumentsToAiState: vi.fn().mockResolvedValue(toolResponse),
           text2image: vi.fn(),
         });
 
@@ -528,7 +528,7 @@ describe('ChatPluginAction', () => {
       });
 
       // Verify that the builtin tool was invoked with the correct arguments
-      expect(useToolStore.getState().invokeBuiltinTool).toHaveBeenCalledWith(
+      expect(useToolStore.getState().transformApiArgumentsToAiState).toHaveBeenCalledWith(
         payload.apiName,
         JSON.parse(payload.arguments),
       );
@@ -559,7 +559,7 @@ describe('ChatPluginAction', () => {
       const error = new Error('Builtin tool failed');
 
       useToolStore.setState({
-        invokeBuiltinTool: vi.fn().mockRejectedValue(error),
+        transformApiArgumentsToAiState: vi.fn().mockRejectedValue(error),
       });
 
       useChatStore.setState({

package/src/store/chat/slices/plugin/action.ts

@@ -81,7 +81,7 @@ export const chatPlugin: StateCreator<
     internal_togglePluginApiCalling(true, id, n('invokeBuiltinTool') as string);
     let data;
     try {
-      data = await useToolStore.getState().invokeBuiltinTool(payload.apiName, params);
+      data = await useToolStore.getState().transformApiArgumentsToAiState(payload.apiName, params);
     } catch (error) {
       console.log(error);
     }
@@ -91,6 +91,7 @@ export const chatPlugin: StateCreator<
 
     await internal_updateMessageContent(id, data);
 
+    // run tool api call
     // postToolCalling
     // @ts-ignore
     const { [payload.apiName]: action } = get();
@@ -147,7 +148,10 @@ export const chatPlugin: StateCreator<
     const message = chatSelectors.getMessageById(id)(get());
     if (!message || message.role !== 'tool' || !message.plugin) return;
 
-    get().internal_updateMessageError(id, null);
+    // if there is error content, then clear the error
+    if (!!message.error) {
+      get().internal_updateMessageError(id, null);
+    }
 
     const payload: ChatToolPayload = { ...message.plugin, id: message.tool_call_id! };
 

package/src/store/tool/slices/builtin/action.test.ts

@@ -23,7 +23,7 @@ describe('createBuiltinToolSlice', () => {
 
       await act(async () => {
         // When
-        const data = await result.current.invokeBuiltinTool(key, params);
+        const data = await result.current.transformApiArgumentsToAiState(key, params);
         expect(data).toBeUndefined();
       });
 
@@ -53,7 +53,7 @@ describe('createBuiltinToolSlice', () => {
       });
       // When
       await act(async () => {
-        await result.current.invokeBuiltinTool(key, params);
+        await result.current.transformApiArgumentsToAiState(key, params);
       });
 
       expect(mockFn).toBeCalledWith({
@@ -70,15 +70,12 @@ describe('createBuiltinToolSlice', () => {
       // When
       const { result } = renderHook(() => useToolStore());
 
-      const data = result.current.text2image(
-        {
-          prompts: ['prompt1', 'prompt2'],
-          size: '1024x1024',
-          quality: 'standard',
-          style: 'vivid',
-        },
-        'a',
-      );
+      const data = result.current.text2image({
+        prompts: ['prompt1', 'prompt2'],
+        size: '1024x1024',
+        quality: 'standard',
+        style: 'vivid',
+      });
 
       // Then
       expect(data).toEqual([

package/src/store/tool/slices/builtin/action.ts

@@ -16,9 +16,9 @@ interface Text2ImageParams extends Pick<OpenAIImagePayload, 'quality' | 'style'
  * 代理行为接口
  */
 export interface BuiltinToolAction {
-  invokeBuiltinTool: (key: string, params: any) => Promise<string | undefined>;
-  text2image: (params: Text2ImageParams, messageId: string) => DallEImageItem[];
+  text2image: (params: Text2ImageParams) => DallEImageItem[];
   toggleBuiltinToolLoading: (key: string, value: boolean) => void;
+  transformApiArgumentsToAiState: (key: string, params: any) => Promise<string | undefined>;
 }
 
 export const createBuiltinToolSlice: StateCreator<
@@ -27,7 +27,13 @@ export const createBuiltinToolSlice: StateCreator<
   [],
   BuiltinToolAction
 > = (set, get) => ({
-  invokeBuiltinTool: async (key, params) => {
+  text2image: ({ prompts, size = '1024x1024' as const, quality = 'standard', style = 'vivid' }) =>
+    prompts.map((p) => ({ prompt: p, quality, size, style })),
+  toggleBuiltinToolLoading: (key, value) => {
+    set({ builtinToolLoading: { [key]: value } }, false, n('toggleBuiltinToolLoading'));
+  },
+
+  transformApiArgumentsToAiState: async (key, params) => {
     const { builtinToolLoading, toggleBuiltinToolLoading } = get();
 
     if (builtinToolLoading[key]) return;
@@ -45,10 +51,4 @@ export const createBuiltinToolSlice: StateCreator<
 
     return JSON.stringify(result);
   },
-  text2image: ({ prompts, size = '1024x1024' as const, quality = 'standard', style = 'vivid' }) =>
-    prompts.map((p) => ({ prompt: p, quality, size, style })),
-
-  toggleBuiltinToolLoading: (key, value) => {
-    set({ builtinToolLoading: { [key]: value } }, false, n('toggleBuiltinToolLoading'));
-  },
 });