@lobehub/chat 1.1.16 → 1.1.17

package/src/app/(main)/chat/(workspace)/@portal/features/Tools/ToolUI/ToolRender.tsx

@@ -0,0 +1,50 @@
+import isEqual from 'fast-deep-equal';
+
+import PluginRender from '@/features/PluginsUI/Render';
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors, chatSelectors } from '@/store/chat/selectors';
+import { BuiltinToolsDocks } from '@/tools/docks';
+import { safeParseJSON } from '@/utils/safeParseJSON';
+
+const ToolRender = () => {
+  const messageId = useChatStore(chatPortalSelectors.toolUIMessageId);
+  const message = useChatStore(chatSelectors.getMessageById(messageId || ''), isEqual);
+
+  // make sure the message and id is valid
+  if (!messageId || !message) return;
+
+  const { plugin, pluginState } = message;
+
+  // make sure the plugin and identifier is valid
+  if (!plugin || !plugin.identifier) return;
+
+  const args = safeParseJSON(plugin.arguments);
+
+  if (!args) return;
+
+  const Render = BuiltinToolsDocks[plugin.identifier];
+
+  if (!Render)
+    return (
+      <PluginRender
+        arguments={plugin.arguments}
+        content={message.content}
+        id={messageId}
+        identifier={plugin.identifier}
+        payload={plugin}
+        pluginState={pluginState}
+        type={plugin?.type}
+      />
+    );
+
+  return (
+    <Render
+      arguments={args}
+      identifier={plugin.identifier}
+      messageId={messageId}
+      state={pluginState}
+    />
+  );
+};
+
+export default ToolRender;

package/src/app/(main)/chat/(workspace)/@portal/features/Tools/ToolUI/index.tsx

@@ -0,0 +1,37 @@
+import isEqual from 'fast-deep-equal';
+import { Flexbox } from 'react-layout-kit';
+
+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 = () => {
+  const messageId = useChatStore(chatPortalSelectors.toolUIMessageId);
+  const message = useChatStore(chatSelectors.getMessageById(messageId || ''), isEqual);
+
+  // make sure the message and id is valid
+  if (!messageId || !message) return;
+
+  const { plugin } = message;
+
+  // make sure the plugin and identifier is valid
+  if (!plugin || !plugin.identifier) return;
+
+  const args = safeParseJSON(plugin.arguments);
+
+  if (!args) return;
+
+  return (
+    <>
+      <Flexbox height={'100%'} paddingInline={12}>
+        <ToolRender />
+      </Flexbox>
+      <Footer />
+    </>
+  );
+};
+
+export default ToolUI;

package/src/app/(main)/chat/(workspace)/@portal/index.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/selectors';
+
+import ToolList from './features/Tools/ToolList';
+import ToolUI from './features/Tools/ToolUI';
+
+const Inspector = memo(() => {
+  const showToolUI = useChatStore(chatPortalSelectors.showToolUI);
+
+  return <Flexbox height={'100%'}>{showToolUI ? <ToolUI /> : <ToolList />}</Flexbox>;
+});
+
+export default Inspector;

package/src/app/(main)/chat/(workspace)/_layout/Desktop/Portal.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
+import { createStyles, useResponsive } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import SafeSpacing from '@/components/SafeSpacing';
+import { CHAT_DOCK_TOOL_UI_WIDTH, CHAT_DOCK_WIDTH, MAX_WIDTH } from '@/const/layoutTokens';
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/slices/portal/selectors';
+
+const useStyles = createStyles(({ css, token }) => ({
+  content: css`
+    display: flex;
+    flex-direction: column;
+    height: 100% !important;
+  `,
+  drawer: css`
+    z-index: 10;
+    background: ${token.colorBgLayout};
+  `,
+  header: css`
+    border-bottom: 1px solid ${token.colorBorder};
+  `,
+  panel: css`
+    overflow: hidden;
+
+    height: 100%;
+    margin: 12px;
+
+    background: ${token.colorBgContainer};
+    border: 1px solid ${token.colorPrimaryActive};
+    border-radius: 8px;
+  `,
+}));
+
+const PortalPanel = memo(({ children }: PropsWithChildren) => {
+  const { styles } = useStyles();
+  const { md = true } = useResponsive();
+
+  const [showInspector, showToolUI] = useChatStore((s) => [
+    chatPortalSelectors.showDock(s),
+    chatPortalSelectors.showToolUI(s),
+  ]);
+
+  return (
+    showInspector && (
+      <DraggablePanel
+        className={styles.drawer}
+        classNames={{
+          content: styles.content,
+        }}
+        expand
+        hanlderStyle={{ display: 'none' }}
+        maxWidth={MAX_WIDTH}
+        minWidth={showToolUI ? CHAT_DOCK_TOOL_UI_WIDTH : CHAT_DOCK_WIDTH}
+        mode={md ? 'fixed' : 'float'}
+        placement={'right'}
+        showHandlerWhenUnexpand={false}
+        showHandlerWideArea={false}
+      >
+        <DraggablePanelContainer
+          style={{
+            flex: 'none',
+            height: '100%',
+            maxHeight: '100vh',
+            minWidth: CHAT_DOCK_WIDTH,
+          }}
+        >
+          <SafeSpacing />
+          <Flexbox className={styles.panel}>{children}</Flexbox>
+        </DraggablePanelContainer>
+      </DraggablePanel>
+    )
+  );
+});
+
+export default PortalPanel;

package/src/app/(main)/chat/(workspace)/_layout/Desktop/TopicPanel.tsx

@@ -7,6 +7,8 @@ import { PropsWithChildren, memo, useEffect, useState } from 'react';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/slices/portal/selectors';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 
@@ -32,6 +34,7 @@ const TopicPanel = memo(({ children }: PropsWithChildren) => {
     systemStatusSelectors.showChatSideBar(s),
     s.toggleChatSideBar,
   ]);
+  const showInspector = useChatStore(chatPortalSelectors.showDock);
 
   const [cacheExpand, setCacheExpand] = useState<boolean>(Boolean(showAgentSettings));
 
@@ -47,30 +50,32 @@ const TopicPanel = memo(({ children }: PropsWithChildren) => {
   }, [lg, cacheExpand]);
 
   return (
-    <DraggablePanel
-      className={styles.drawer}
-      classNames={{
-        content: styles.content,
-      }}
-      expand={showAgentSettings}
-      minWidth={CHAT_SIDEBAR_WIDTH}
-      mode={md ? 'fixed' : 'float'}
-      onExpandChange={handleExpand}
-      placement={'right'}
-      showHandlerWideArea={false}
-    >
-      <DraggablePanelContainer
-        style={{
-          flex: 'none',
-          height: '100%',
-          maxHeight: '100vh',
-          minWidth: CHAT_SIDEBAR_WIDTH,
+    !showInspector && (
+      <DraggablePanel
+        className={styles.drawer}
+        classNames={{
+          content: styles.content,
         }}
+        expand={showAgentSettings}
+        minWidth={CHAT_SIDEBAR_WIDTH}
+        mode={md ? 'fixed' : 'float'}
+        onExpandChange={handleExpand}
+        placement={'right'}
+        showHandlerWideArea={false}
       >
-        <SafeSpacing />
-        {children}
-      </DraggablePanelContainer>
-    </DraggablePanel>
+        <DraggablePanelContainer
+          style={{
+            flex: 'none',
+            height: '100%',
+            maxHeight: '100vh',
+            minWidth: CHAT_SIDEBAR_WIDTH,
+          }}
+        >
+          <SafeSpacing />
+          {children}
+        </DraggablePanelContainer>
+      </DraggablePanel>
+    )
   );
 });
 

package/src/app/(main)/chat/(workspace)/_layout/Desktop/index.tsx

@@ -2,10 +2,11 @@ import { Flexbox } from 'react-layout-kit';
 
 import { LayoutProps } from '../type';
 import ChatHeader from './ChatHeader';
+import Inspector from './Portal';
 import HotKeys from './HotKeys';
 import TopicPanel from './TopicPanel';
 
-const Layout = ({ children, topic, conversation }: LayoutProps) => {
+const Layout = ({ children, topic, conversation, portal }: LayoutProps) => {
   return (
     <>
       <ChatHeader />
@@ -23,6 +24,7 @@ const Layout = ({ children, topic, conversation }: LayoutProps) => {
           {conversation}
         </Flexbox>
         {children}
+        <Inspector>{portal}</Inspector>
         <TopicPanel>{topic}</TopicPanel>
       </Flexbox>
       <HotKeys />

package/src/app/(main)/chat/(workspace)/_layout/type.ts

@@ -3,5 +3,6 @@ import { ReactNode } from 'react';
 export interface LayoutProps {
   children: ReactNode;
   conversation: ReactNode;
+  portal: ReactNode;
   topic: ReactNode;
 }

package/src/app/(main)/chat/loading.tsx

@@ -1,21 +1,3 @@
-'use client';
+import CircleLoading from '@/components/CircleLoading';
 
-import { Icon } from '@lobehub/ui';
-import { Typography } from 'antd';
-import { LoaderCircle } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
-
-export default () => {
-  const { t } = useTranslation('common');
-  return (
-    <Center height={'100%'} width={'100%'}>
-      <Flexbox align={'center'} gap={8}>
-        <div>
-          <Icon icon={LoaderCircle} size={'large'} spin />
-        </div>
-        <Typography.Text type={'secondary'}>{t('loading')}</Typography.Text>
-      </Flexbox>
-    </Center>
-  );
-};
+export default () => <CircleLoading />;

package/src/components/CircleLoading/index.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { LoaderCircle } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+export default () => {
+  const { t } = useTranslation('common');
+  return (
+    <Center height={'100%'} width={'100%'}>
+      <Flexbox align={'center'} gap={8}>
+        <div>
+          <Icon icon={LoaderCircle} size={'large'} spin />
+        </div>
+        <Typography.Text type={'secondary'}>{t('loading')}</Typography.Text>
+      </Flexbox>
+    </Center>
+  );
+};

package/src/const/layoutTokens.test.ts

@@ -0,0 +1,11 @@
+import { HEADER_ICON_SIZE } from './layoutTokens';
+
+describe('HEADER_ICON_SIZE', () => {
+  it('mobile', () => {
+    expect(HEADER_ICON_SIZE(true)).toEqual({ blockSize: 36, fontSize: 22 });
+  });
+
+  it('desktop', () => {
+    expect(HEADER_ICON_SIZE(false)).toEqual({ fontSize: 24 });
+  });
+});

package/src/const/layoutTokens.ts

@@ -7,6 +7,10 @@ export const CHAT_TEXTAREA_MAX_HEIGHT = 800;
 export const CHAT_TEXTAREA_HEIGHT = 230;
 export const CHAT_TEXTAREA_HEIGHT_MOBILE = 108;
 export const CHAT_SIDEBAR_WIDTH = 280;
+
+export const CHAT_DOCK_WIDTH = 400;
+export const CHAT_DOCK_TOOL_UI_WIDTH = 800;
+
 export const MARKET_SIDEBAR_WIDTH = 400;
 export const FOLDER_WIDTH = 270;
 export const MAX_WIDTH = 1024;

package/src/const/message.ts

@@ -1,15 +1 @@
 export const LOADING_FLAT = '...';
-
-//  start with this，it should be a function message
-export const FUNCTION_MESSAGE_FLAG = '{"tool_calls"';
-
-export const isFunctionMessageAtStart = (content: string) => {
-  return content.startsWith(FUNCTION_MESSAGE_FLAG);
-};
-
-export const testFunctionMessageAtEnd = (content: string) => {
-  const regExp = /{"tool_calls":.*?]}$/;
-  const match = content?.trim().match(regExp);
-
-  return { content: match ? match[0] : '', valid: !!match };
-};

package/src/database/client/models/__tests__/message.test.ts

@@ -390,21 +390,18 @@ describe('MessageModel', () => {
       expect(updatedMessage.pluginState).toHaveProperty('testKey', 'testValue');
     });
   });
-  describe('clearTable', () => {
-    it('should clear the table', async () => {
-      await MessageModel.create(messageData);
-      await MessageModel.clearTable();
-      const messages = await MessageModel.queryAll();
-      expect(messages).toHaveLength(0);
-    });
-  });
 
-  describe('updatePluginState', () => {
-    it('should update plugin state', async () => {
+  describe('updatePlugin', () => {
+    it('should update plugin', async () => {
+      const value = {
+        identifier: 'testValue',
+        arguments: 'abc',
+        apiName: 'abc',
+      };
       const createdMessage = await MessageModel.create(messageData);
-      await MessageModel.updatePluginState(createdMessage.id, { testKey: 'testValue' });
+      await MessageModel.updatePlugin(createdMessage.id, value);
       const updatedMessage = await MessageModel.findById(createdMessage.id);
-      expect(updatedMessage.pluginState).toHaveProperty('testKey', 'testValue');
+      expect(updatedMessage.plugin).toEqual(value);
     });
   });
 

package/src/database/client/models/message.ts

@@ -190,6 +190,12 @@ class _MessageModel extends BaseModel {
     return this.update(id, { pluginState: { ...item.pluginState, ...value } });
   }
 
+  async updatePlugin(id: string, value: any) {
+    const item = await this.findById(id);
+
+    return this.update(id, { plugin: { ...item.plugin, ...value } });
+  }
+
   /**
    * Batch updates multiple fields of the specified messages.
    *

package/src/database/server/models/__tests__/message.test.ts

@@ -544,6 +544,47 @@ describe('MessageModel', () => {
       const result = await serverDB.select().from(messages).where(eq(messages.id, '1')).execute();
       expect(result[0].content).toBe('message 1');
     });
+
+    it('should update message tools', async () => {
+      // 创建测试数据
+      await serverDB.insert(messages).values([
+        {
+          id: '1',
+          userId,
+          role: 'user',
+          content: 'message 1',
+          tools: [
+            {
+              id: 'call_Z8UU8LedZcoJHFGkfqYecjmT',
+              type: 'builtin',
+              apiName: 'searchWithSearXNG',
+              arguments:
+                '{"query":"杭州洪水 2023","searchEngines":["google","bing","baidu","duckduckgo","brave"]}',
+              identifier: 'lobe-web-browsing',
+            },
+          ],
+        },
+      ]);
+
+      // 调用 updateMessage 方法
+      await messageModel.update('1', {
+        tools: [
+          {
+            id: 'call_Z8UU8LedZcoJHFGkfqYecjmT',
+            type: 'builtin',
+            apiName: 'searchWithSearXNG',
+            arguments: '{"query":"2024 杭州暴雨","searchEngines":["duckduckgo","google","brave"]}',
+            identifier: 'lobe-web-browsing',
+          },
+        ],
+      });
+
+      // 断言结果
+      const result = await serverDB.select().from(messages).where(eq(messages.id, '1')).execute();
+      expect(result[0].tools[0].arguments).toBe(
+        '{"query":"2024 杭州暴雨","searchEngines":["duckduckgo","google","brave"]}',
+      );
+    });
   });
 
   describe('deleteMessage', () => {
@@ -662,6 +703,35 @@ describe('MessageModel', () => {
       );
     });
   });
+  describe('updateMessagePlugin', () => {
+    it('should update the state field in messagePlugins table', async () => {
+      // 创建测试数据
+      await serverDB.insert(messages).values({ id: '1', content: 'abc', role: 'user', userId });
+      await serverDB
+        .insert(messagePlugins)
+        .values([
+          { id: '1', toolCallId: 'tool1', identifier: 'plugin1', state: { key1: 'value1' } },
+        ]);
+
+      // 调用 updatePluginState 方法
+      await messageModel.updateMessagePlugin('1', { identifier: 'plugin2' });
+
+      // 断言结果
+      const result = await serverDB
+        .select()
+        .from(messagePlugins)
+        .where(eq(messagePlugins.id, '1'))
+        .execute();
+      expect(result[0].identifier).toEqual('plugin2');
+    });
+
+    it('should throw an error if plugin does not exist', async () => {
+      // 调用 updatePluginState 方法
+      await expect(messageModel.updatePluginState('1', { key: 'value' })).rejects.toThrowError(
+        'Plugin not found',
+      );
+    });
+  });
 
   describe('updateTranslate', () => {
     it('should insert a new record if message does not exist in messageTranslates table', async () => {

package/src/database/server/models/message.ts

@@ -10,6 +10,7 @@ import { merge } from '@/utils/merge';
 
 import {
   MessageItem,
+  MessagePluginItem,
   filesToMessages,
   messagePlugins,
   messageTTS,
@@ -271,6 +272,15 @@ export class MessageModel {
       .where(eq(messagePlugins.id, id));
   }
 
+  async updateMessagePlugin(id: string, value: Partial<MessagePluginItem>) {
+    const item = await serverDB.query.messagePlugins.findFirst({
+      where: eq(messagePlugins.id, id),
+    });
+    if (!item) throw new Error('Plugin not found');
+
+    return serverDB.update(messagePlugins).set(value).where(eq(messagePlugins.id, id));
+  }
+
   async updateTranslate(id: string, translate: Partial<MessageItem>) {
     const result = await serverDB.query.messageTranslates.findFirst({
       where: and(eq(messageTranslates.id, id)),

package/src/database/server/schemas/lobechat.ts

@@ -15,7 +15,7 @@ import {
   uniqueIndex,
   varchar,
 } from 'drizzle-orm/pg-core';
-import { createInsertSchema } from 'drizzle-zod';
+import { createInsertSchema, createSelectSchema } from 'drizzle-zod';
 
 import { DEFAULT_PREFERENCE } from '@/const/user';
 import { LobeAgentChatConfig, LobeAgentTTSConfig } from '@/types/agent';
@@ -451,6 +451,8 @@ export const messagePlugins = pgTable('message_plugins', {
   state: jsonb('state'),
   error: jsonb('error'),
 });
+export type MessagePluginItem = typeof messagePlugins.$inferSelect;
+export const updateMessagePluginSchema = createSelectSchema(messagePlugins);
 
 export const messageTTS = pgTable('message_tts', {
   id: text('id')

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

@@ -1,9 +1,9 @@
-import { Avatar, Icon } from '@lobehub/ui';
+import { Icon } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { Loader2, LucideChevronDown, LucideChevronRight, LucideToyBrick } from 'lucide-react';
 import { CSSProperties, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
+import { Flexbox } from 'react-layout-kit';
 
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
@@ -30,16 +30,8 @@ const CallItem = memo<InspectorProps>(
 
     const pluginMeta = useToolStore(toolSelectors.getMetaById(identifier), isEqual);
 
-    const pluginAvatar = pluginHelpers.getPluginAvatar(pluginMeta);
-
     const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
 
-    const avatar = pluginAvatar ? (
-      <Avatar alt={pluginTitle} avatar={pluginAvatar} size={32} />
-    ) : (
-      <Icon icon={LucideToyBrick} />
-    );
-
     return (
       <Flexbox gap={8} style={style}>
         <Flexbox
@@ -54,13 +46,7 @@ const CallItem = memo<InspectorProps>(
           }}
         >
           <Flexbox align={'center'} gap={8} horizontal>
-            {loading ? (
-              <Center height={30} width={24}>
-                <Icon icon={Loader2} spin />
-              </Center>
-            ) : (
-              avatar
-            )}
+            {loading ? <Icon icon={Loader2} spin /> : <Icon icon={LucideToyBrick} />}
             {pluginTitle}
           </Flexbox>
           <Icon icon={open ? LucideChevronDown : LucideChevronRight} />

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

@@ -3,6 +3,7 @@ import { ActionIcon, Avatar, Highlighter, Icon, Tag } from '@lobehub/ui';
 import { Tabs } from 'antd';
 import isEqual from 'fast-deep-equal';
 import {
+  InspectionPanel,
   LucideBug,
   LucideBugOff,
   LucideChevronDown,
@@ -13,8 +14,11 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/slices/portal/selectors';
 import { pluginHelpers, useToolStore } from '@/store/tool';
-import { pluginSelectors, toolSelectors } from '@/store/tool/selectors';
+import { toolSelectors } from '@/store/tool/selectors';
 import { ChatPluginPayload } from '@/types/message';
 
 import PluginResult from './PluginResultJSON';
@@ -24,6 +28,7 @@ import { useStyles } from './style';
 export interface InspectorProps {
   arguments?: string;
   content: string;
+  id: string;
   identifier?: string;
   loading?: boolean;
   payload?: ChatPluginPayload;
@@ -40,14 +45,20 @@ const Inspector = memo<InspectorProps>(
     setShow,
     content,
     identifier = 'unknown',
+    id,
   }) => {
     const { t } = useTranslation('plugin');
     const { styles } = useStyles();
     const [open, setOpen] = useState(false);
+    const [isMessageToolUIOpen, openToolUI, toggleInspector] = useChatStore((s) => [
+      chatPortalSelectors.isMessageToolUIOpen(id)(s),
+      s.openToolUI,
+      s.toggleDock,
+    ]);
 
     const pluginMeta = useToolStore(toolSelectors.getMetaById(identifier), isEqual);
 
-    const showRightAction = useToolStore(pluginSelectors.isPluginHasUI(identifier));
+    const showRightAction = useToolStore(toolSelectors.isToolHasUI(identifier));
     const pluginAvatar = pluginHelpers.getPluginAvatar(pluginMeta);
 
     const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
@@ -94,6 +105,19 @@ const Inspector = memo<InspectorProps>(
           </Flexbox>
 
           <Flexbox horizontal>
+            {showRightAction && false && (
+              <ActionIcon
+                icon={InspectionPanel}
+                onClick={() => {
+                  if (!isMessageToolUIOpen) openToolUI(id, identifier);
+                  else {
+                    toggleInspector(false);
+                  }
+                }}
+                size={DESKTOP_HEADER_ICON_SIZE}
+                title={'inspector'}
+              />
+            )}
             <ActionIcon
               icon={open ? LucideBugOff : LucideBug}
               onClick={() => {