@lobehub/chat 1.63.2 → 1.64.0

package/src/features/Conversation/Messages/Assistant/Tool/Inspector/index.tsx

@@ -1,6 +1,5 @@
 import { ActionIcon, Icon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import isEqual from 'fast-deep-equal';
 import {
   ChevronDown,
   ChevronRight,
@@ -13,16 +12,11 @@ import { CSSProperties, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import PluginAvatar from '@/features/PluginAvatar';
-import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
-import { pluginHelpers, useToolStore } from '@/store/tool';
-import { toolSelectors } from '@/store/tool/selectors';
 import { shinyTextStylish } from '@/styles/loading';
 
 import Debug from './Debug';
-import Loader from './Loader';
 import Settings from './Settings';
+import ToolTitle from './ToolTitle';
 
 export const useStyles = createStyles(({ css, token }) => ({
   apiName: css`
@@ -92,11 +86,6 @@ const Inspectors = memo<InspectorProps>(
 
     const [showDebug, setShowDebug] = useState(false);
 
-    const loading = useChatStore(chatSelectors.isToolCallStreaming(messageId, index));
-
-    const pluginMeta = useToolStore(toolSelectors.getMetaById(identifier), isEqual);
-    const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
-
     return (
       <Flexbox gap={4}>
         <Flexbox align={'center'} distribution={'space-between'} gap={8} horizontal>
@@ -110,15 +99,13 @@ const Inspectors = memo<InspectorProps>(
             }}
             paddingInline={4}
           >
-            <Flexbox
-              align={'center'}
-              className={loading ? styles.shinyText : ''}
-              gap={4}
-              horizontal
-            >
-              {loading ? <Loader /> : <PluginAvatar identifier={identifier} size={20} />}
-              <div>{pluginTitle}</div>/<span className={styles.apiName}>{apiName}</span>
-            </Flexbox>
+            <ToolTitle
+              apiName={apiName}
+              identifier={identifier}
+              index={index}
+              messageId={messageId}
+              toolCallId={id}
+            />
             <Icon icon={showRender ? ChevronDown : ChevronRight} />
           </Flexbox>
           <Flexbox horizontal>

package/src/features/Conversation/Messages/Assistant/Tool/Render/CustomRender.tsx

@@ -19,60 +19,72 @@ const CustomRender = memo<
     setShowPluginRender: (show: boolean) => void;
     showPluginRender: boolean;
   }
->(({ id, content, pluginState, plugin, requestArgs, showPluginRender, setShowPluginRender }) => {
-  const [loading, isMessageToolUIOpen] = useChatStore((s) => [
-    chatSelectors.isPluginApiInvoking(id)(s),
-    chatPortalSelectors.isPluginUIOpen(id)(s),
-  ]);
-  const { direction } = useContext(ConfigProvider.ConfigContext);
-  const { t } = useTranslation('plugin');
+>(
+  ({
+    id,
+    content,
+    pluginState,
+    plugin,
+    requestArgs,
+    showPluginRender,
+    setShowPluginRender,
+    pluginError,
+  }) => {
+    const [loading, isMessageToolUIOpen] = useChatStore((s) => [
+      chatSelectors.isPluginApiInvoking(id)(s),
+      chatPortalSelectors.isPluginUIOpen(id)(s),
+    ]);
+    const { direction } = useContext(ConfigProvider.ConfigContext);
+    const { t } = useTranslation('plugin');
 
-  const theme = useTheme();
-  useEffect(() => {
-    if (!plugin?.type || loading) return;
+    const theme = useTheme();
+    useEffect(() => {
+      if (!plugin?.type || loading) return;
 
-    setShowPluginRender(plugin?.type !== 'default');
-  }, [plugin?.type, loading]);
+      setShowPluginRender(plugin?.type !== 'default');
+    }, [plugin?.type, loading]);
 
-  if (isMessageToolUIOpen)
-    return (
-      <Center paddingBlock={8} style={{ background: theme.colorFillQuaternary, borderRadius: 4 }}>
-        <Empty
-          description={t('showInPortal')}
-          image={
-            <Icon
-              color={theme.colorTextQuaternary}
-              icon={direction === 'rtl' ? LucideSquareArrowLeft : LucideSquareArrowRight}
-              size={'large'}
-            />
-          }
-          styles={{
-            image: { height: 24 },
-          }}
-        />
-      </Center>
-    );
+    if (isMessageToolUIOpen)
+      return (
+        <Center paddingBlock={8} style={{ background: theme.colorFillQuaternary, borderRadius: 4 }}>
+          <Empty
+            description={t('showInPortal')}
+            image={
+              <Icon
+                color={theme.colorTextQuaternary}
+                icon={direction === 'rtl' ? LucideSquareArrowLeft : LucideSquareArrowRight}
+                size={'large'}
+              />
+            }
+            styles={{
+              image: { height: 24 },
+            }}
+          />
+        </Center>
+      );
 
-  if (loading) return <Arguments arguments={requestArgs} shine />;
+    if (loading) return <Arguments arguments={requestArgs} shine />;
 
-  return (
-    <Flexbox gap={12} id={id} width={'100%'}>
-      {showPluginRender ? (
-        <PluginRender
-          arguments={plugin?.arguments}
-          content={content}
-          id={id}
-          identifier={plugin?.identifier}
-          loading={loading}
-          payload={plugin}
-          pluginState={pluginState}
-          type={plugin?.type}
-        />
-      ) : (
-        <Arguments arguments={requestArgs} />
-      )}
-    </Flexbox>
-  );
-});
+    return (
+      <Flexbox gap={12} id={id} width={'100%'}>
+        {showPluginRender ? (
+          <PluginRender
+            arguments={plugin?.arguments}
+            content={content}
+            id={id}
+            identifier={plugin?.identifier}
+            loading={loading}
+            payload={plugin}
+            pluginError={pluginError}
+            pluginState={pluginState}
+            type={plugin?.type}
+          />
+        ) : (
+          <Arguments arguments={requestArgs} />
+        )}
+      </Flexbox>
+    );
+  },
+);
 
 export default CustomRender;

package/src/features/PluginsUI/Render/BuiltinType/index.tsx

@@ -12,11 +12,20 @@ export interface BuiltinTypeProps {
   id: string;
   identifier?: string;
   loading?: boolean;
+  pluginError?: any;
   pluginState?: any;
 }
 
 const BuiltinType = memo<BuiltinTypeProps>(
-  ({ content, arguments: argumentsStr = '', pluginState, id, identifier, loading }) => {
+  ({
+    content,
+    arguments: argumentsStr = '',
+    pluginState,
+    id,
+    identifier,
+    loading,
+    pluginError,
+  }) => {
     const { isJSON, data } = useParseContent(content);
 
     if (!isJSON) {
@@ -35,6 +44,7 @@ const BuiltinType = memo<BuiltinTypeProps>(
         content={data}
         identifier={identifier}
         messageId={id}
+        pluginError={pluginError}
         pluginState={pluginState}
       />
     );

package/src/features/PluginsUI/Render/index.tsx

@@ -15,6 +15,7 @@ export interface PluginRenderProps {
   identifier?: string;
   loading?: boolean;
   payload?: PluginRequestPayload;
+  pluginError?: any;
   pluginState?: any;
   type?: LobeToolRenderType;
 }
@@ -29,6 +30,7 @@ const PluginRender = memo<PluginRenderProps>(
     identifier,
     type,
     loading,
+    pluginError,
   }) => {
     switch (type) {
       case 'standalone': {
@@ -43,6 +45,7 @@ const PluginRender = memo<PluginRenderProps>(
             id={id}
             identifier={identifier}
             loading={loading}
+            pluginError={pluginError}
             pluginState={pluginState}
           />
         );

package/src/features/Portal/Plugins/Body/index.tsx

@@ -5,7 +5,6 @@ import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors, chatSelectors } from '@/store/chat/selectors';
 import { safeParseJSON } from '@/utils/safeParseJSON';
 
-import Footer from '../Footer';
 import ToolRender from './ToolRender';
 
 const ToolUI = () => {
@@ -25,12 +24,9 @@ const ToolUI = () => {
   if (!args) return;
 
   return (
-    <>
-      <Flexbox flex={1} height={'100%'} paddingInline={12} style={{ overflow: 'auto' }}>
-        <ToolRender />
-      </Flexbox>
-      <Footer />
-    </>
+    <Flexbox flex={1} height={'100%'} paddingInline={12} style={{ overflow: 'auto' }}>
+      <ToolRender />
+    </Flexbox>
   );
 };
 

package/src/features/Portal/Plugins/Header.tsx

@@ -1,7 +1,7 @@
-import { ActionIcon } from '@lobehub/ui';
+import { ActionIcon, Icon } from '@lobehub/ui';
 import { Typography } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { ArrowLeft } from 'lucide-react';
+import { ArrowLeft, Globe } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -10,6 +10,7 @@ import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors } from '@/store/chat/selectors';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
+import { WebBrowsingManifest } from '@/tools/web-browsing';
 
 const Header = () => {
   const [closeToolUI, toolUIIdentifier = ''] = useChatStore((s) => [
@@ -21,6 +22,17 @@ const Header = () => {
   const pluginMeta = useToolStore(toolSelectors.getMetaById(toolUIIdentifier), isEqual);
   const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
 
+  if (toolUIIdentifier === WebBrowsingManifest.identifier) {
+    return (
+      <Flexbox align={'center'} gap={8} horizontal>
+        <ActionIcon icon={ArrowLeft} onClick={() => closeToolUI()} />
+        <Icon icon={Globe} size={{ fontSize: 16 }} />
+        <Typography.Text style={{ fontSize: 16 }} type={'secondary'}>
+          {t('search.title')}
+        </Typography.Text>
+      </Flexbox>
+    );
+  }
   return (
     <Flexbox align={'center'} gap={4} horizontal>
       <ActionIcon icon={ArrowLeft} onClick={() => closeToolUI()} />

package/src/hooks/useAgentEnableSearch.ts

@@ -0,0 +1,27 @@
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/slices/chat';
+import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
+
+export const useAgentEnableSearch = () => {
+  const [model, provider, agentSearchMode] = useAgentStore((s) => [
+    agentSelectors.currentAgentModel(s),
+    agentSelectors.currentAgentModelProvider(s),
+    agentSelectors.agentSearchMode(s),
+  ]);
+
+  const isModelSupportToolUse = useAiInfraStore(
+    aiModelSelectors.isModelSupportToolUse(model, provider),
+  );
+  const searchImpl = useAiInfraStore(aiModelSelectors.modelBuiltinSearchImpl(model, provider));
+
+  // 只要是内置的搜索实现，一定可以联网搜索
+  if (searchImpl === 'internal') return true;
+
+  // 如果是关闭状态，一定不能联网搜索
+  if (agentSearchMode === 'off') return false;
+
+  // 如果是智能模式，根据是否支持 Tool Calling 判断
+  if (agentSearchMode === 'auto') {
+    return isModelSupportToolUse;
+  }
+};

package/src/libs/agent-runtime/perplexity/index.test.ts

@@ -66,6 +66,29 @@ describe('LobePerplexityAI', () => {
 
     it('should with search citations', async () => {
       const data = [
+        {
+          id: '506d64fb-e7f2-4d94-b80f-158369e9446d',
+          model: 'sonar-pro',
+          created: 1739896615,
+          object: 'chat.completion.chunk',
+          choices: [
+            {
+              finish_reason: null,
+              index: 0,
+              delta: {
+                refusal: null,
+                content: '<think>',
+                role: 'assistant',
+                function_call: null,
+                tool_calls: null,
+                audio: null,
+              },
+              logprobs: null,
+            },
+          ],
+          stream_options: null,
+          citations: null,
+        },
         {
           id: '506d64fb-e7f2-4d94-b80f-158369e9446d',
           model: 'sonar-pro',
@@ -202,6 +225,9 @@ describe('LobePerplexityAI', () => {
 
       expect(stream).toEqual(
         [
+          'id: 506d64fb-e7f2-4d94-b80f-158369e9446d',
+          'event: text',
+          'data: "<think>"\n',
           'id: 506d64fb-e7f2-4d94-b80f-158369e9446d',
           'event: grounding',
           'data: {"citations":[{"title":"https://www.weather.com.cn/weather/101210101.shtml","url":"https://www.weather.com.cn/weather/101210101.shtml"},{"title":"https://tianqi.moji.com/weather/china/zhejiang/hangzhou","url":"https://tianqi.moji.com/weather/china/zhejiang/hangzhou"},{"title":"https://weather.cma.cn/web/weather/58457.html","url":"https://weather.cma.cn/web/weather/58457.html"},{"title":"https://tianqi.so.com/weather/101210101","url":"https://tianqi.so.com/weather/101210101"},{"title":"https://www.accuweather.com/zh/cn/hangzhou/106832/weather-forecast/106832","url":"https://www.accuweather.com/zh/cn/hangzhou/106832/weather-forecast/106832"},{"title":"https://www.hzqx.com","url":"https://www.hzqx.com"},{"title":"https://www.hzqx.com/pc/hztq/","url":"https://www.hzqx.com/pc/hztq/"}]}\n',

package/src/libs/agent-runtime/utils/streams/openai.ts

@@ -119,7 +119,7 @@ export const transformOpenAIStream = (
       if (typeof content === 'string') {
         // in Perplexity api, the citation is in every chunk, but we only need to return it once
 
-        if ('citations' in chunk && !streamContext?.returnedPplxCitation) {
+        if ('citations' in chunk && !!chunk.citations && !streamContext?.returnedPplxCitation) {
           streamContext.returnedPplxCitation = true;
 
           const citations = (chunk.citations as any[]).map((item) =>

package/src/libs/trpc/client/index.ts

@@ -1,3 +1,4 @@
 export { asyncClient } from './async';
 export { edgeClient } from './edge';
 export * from './lambda';
+export * from './tools';

package/src/libs/trpc/client/tools.ts

@@ -0,0 +1,20 @@
+import { createTRPCClient, httpBatchLink } from '@trpc/client';
+import superjson from 'superjson';
+
+import type { ToolsRouter } from '@/server/routers/tools';
+
+export const toolsClient = createTRPCClient<ToolsRouter>({
+  links: [
+    httpBatchLink({
+      headers: async () => {
+        // dynamic import to avoid circular dependency
+        const { createHeaderWithAuth } = await import('@/services/_auth');
+
+        return createHeaderWithAuth();
+      },
+      maxURLLength: 2083,
+      transformer: superjson,
+      url: '/trpc/tools',
+    }),
+  ],
+});

package/src/locales/default/plugin.ts

@@ -135,6 +135,22 @@ export default {
     plugin: '插件运行中...',
   },
   pluginList: '插件列表',
+  search: {
+    config: {
+      addKey: '添加秘钥',
+      close: '删除',
+      confirm: '已完成配置并重试',
+    },
+    searchxng: {
+      baseURL: '请输入',
+      description: '请输入 SearchXNG 的网址，即可开始联网搜索',
+      keyPlaceholder: '请输入秘钥',
+      title: '配置 SearchXNG 搜索引擎',
+      unconfiguredDesc: '请联系管理员完成 SearchXNG 搜索引擎配置，即可开始联网搜索',
+      unconfiguredTitle: '暂未配置 SearchXNG 搜索引擎',
+    },
+    title: '联网搜索',
+  },
   setting: '插件设置',
   settings: {
     indexUrl: {

package/src/locales/default/portal.ts

@@ -7,11 +7,6 @@ export default {
     },
   },
   Plugins: '插件',
-  actions: {
-    genAiMessage: '创建助手消息',
-    summary: '总结',
-    summaryTooltip: '总结当前内容',
-  },
   artifacts: {
     display: {
       code: '代码',

package/src/locales/default/tool.ts

@@ -7,4 +7,22 @@ export default {
     images: '图片:',
     prompt: '提示词',
   },
+  search: {
+    createNewSearch: '创建新的搜索记录',
+    emptyResult: '没有搜索到结果，请修改关键词后重试',
+    genAiMessage: '创建助手消息',
+    includedTooltip: '当前搜索结果会进入会话的上下文中',
+    keywords: '关键词：',
+    scoreTooltip: '相关性分数，该分数越高说明与查询关键词越相关',
+    searchBar: {
+      button: '搜索',
+      placeholder: '关键词',
+      tooltip: '将会重新获取搜索结果，并创建一条新的总结消息',
+    },
+    searchEngine: '搜索引擎：',
+    searchResult: '搜索数量：',
+    summary: '总结',
+    summaryTooltip: '总结当前内容',
+    viewMoreResults: '查看更多 {{results}} 个结果',
+  },
 };

package/src/server/modules/SearXNG.ts

@@ -0,0 +1,33 @@
+import qs from 'query-string';
+import urlJoin from 'url-join';
+
+import { SearchResponse } from '@/types/tool/search';
+
+export class SearXNGClient {
+  private baseUrl: string;
+
+  constructor(baseUrl: string) {
+    this.baseUrl = baseUrl;
+  }
+
+  async search(query: string, engines?: string[]): Promise<SearchResponse> {
+    try {
+      const searchParams = qs.stringify({
+        engines: engines?.join(','),
+        format: 'json',
+        q: query,
+      });
+
+      const response = await fetch(urlJoin(this.baseUrl, `/search?${searchParams}`));
+
+      if (response.ok) {
+        return await response.json();
+      }
+
+      throw new Error(`Failed to search: ${response.statusText}`);
+    } catch (error) {
+      console.error('Error searching:', error);
+      throw error;
+    }
+  }
+}

package/src/server/routers/lambda/message.ts

@@ -166,6 +166,17 @@ export const messageRouter = router({
       return ctx.messageModel.updateMessagePlugin(input.id, input.value);
     }),
 
+  updatePluginError: messageProcedure
+    .input(
+      z.object({
+        id: z.string(),
+        value: z.object({}).passthrough().nullable(),
+      }),
+    )
+    .mutation(async ({ input, ctx }) => {
+      return ctx.messageModel.updateMessagePlugin(input.id, { error: input.value });
+    }),
+
   updatePluginState: messageProcedure
     .input(
       z.object({