@lobehub/chat 1.2.6 → 1.2.7

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.2.7](https://github.com/lobehub/lobe-chat/compare/v1.2.6...v1.2.7)
+
+<sup>Released on **2024-07-03**</sup>
+
+#### 💄 Styles
+
+- **misc**: Improve delete assistant message with tools.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Improve delete assistant message with tools, closes [#3127](https://github.com/lobehub/lobe-chat/issues/3127) ([1230777](https://github.com/lobehub/lobe-chat/commit/1230777))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.2.6](https://github.com/lobehub/lobe-chat/compare/v1.2.5...v1.2.6)
 
 <sup>Released on **2024-07-03**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "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",

package/src/app/(main)/chat/(workspace)/@portal/features/ArtifactUI/Footer.tsx

@@ -35,7 +35,7 @@ const Footer = () => {
 
           summaryPluginContent(messageId);
         }}
-        title={'actions.summaryTooltip'}
+        title={t('actions.summaryTooltip')}
       />
     </Flexbox>
   );

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

@@ -18,7 +18,7 @@ import { toolSelectors } from '@/store/tool/selectors';
 const Header = memo(() => {
   const [showToolUI, toggleInspector, closeToolUI, toolUIIdentifier = ''] = useChatStore((s) => [
     chatPortalSelectors.showArtifactUI(s),
-    s.toggleDock,
+    s.togglePortal,
     s.closeToolUI,
     chatPortalSelectors.toolUIIdentifier(s),
   ]);

package/src/app/(main)/chat/(workspace)/_layout/Mobile/PortalModal.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { Modal } from '@lobehub/ui';
+import { PropsWithChildren, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+
+import { useWorkspaceModal } from '../../features/useWorkspaceModal';
+
+const PortalModal = memo(({ children }: PropsWithChildren) => {
+  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
+    systemStatusSelectors.mobileShowPortal(s),
+    s.toggleMobilePortal,
+  ]);
+  const [open, setOpen] = useWorkspaceModal(showAgentSettings, toggleConfig);
+  const { t } = useTranslation('portal');
+
+  return (
+    <Modal
+      height={'95%'}
+      onCancel={() => setOpen(false)}
+      open={open}
+      styles={{
+        body: { padding: 0 },
+      }}
+      title={t('title')}
+    >
+      {children}
+    </Modal>
+  );
+});
+
+export default PortalModal;

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

@@ -2,9 +2,10 @@ import MobileContentLayout from '@/components/server/MobileNavLayout';
 
 import { LayoutProps } from '../type';
 import ChatHeader from './ChatHeader';
+import PortalModal from './PortalModal';
 import TopicModal from './TopicModal';
 
-const Layout = ({ children, topic, conversation }: LayoutProps) => {
+const Layout = ({ children, topic, conversation, portal }: LayoutProps) => {
   return (
     <>
       <MobileContentLayout header={<ChatHeader />} style={{ overflowY: 'hidden' }}>
@@ -12,6 +13,7 @@ const Layout = ({ children, topic, conversation }: LayoutProps) => {
         {children}
       </MobileContentLayout>
       <TopicModal>{topic}</TopicModal>
+      <PortalModal>{portal}</PortalModal>
     </>
   );
 };

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

@@ -250,6 +250,19 @@ describe('MessageModel', () => {
     });
   });
 
+  describe('bulkDelete', () => {
+    it('should delete many messages', async () => {
+      const createdMessage = await MessageModel.create(messageData);
+      const createdMessage2 = await MessageModel.create(messageData);
+      await MessageModel.bulkDelete([createdMessage.id, createdMessage2.id]);
+
+      const messageInDb1 = await MessageModel.findById(createdMessage.id);
+      const messageInDb2 = await MessageModel.findById(createdMessage2.id);
+      expect(messageInDb1).toBeUndefined();
+      expect(messageInDb2).toBeUndefined();
+    });
+  });
+
   describe('update', () => {
     it('should update a message', async () => {
       const createdMessage = await MessageModel.create(messageData);

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

@@ -129,6 +129,10 @@ class _MessageModel extends BaseModel {
     return super._deleteWithSync(id);
   }
 
+  async bulkDelete(ids: string[]) {
+    return super._bulkDeleteWithSync(ids);
+  }
+
   async clearTable() {
     return this._clearWithSync();
   }

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

@@ -491,6 +491,75 @@ describe('MessageModel', () => {
       expect(pluginResult).toHaveLength(1);
       expect(pluginResult[0].identifier).toBe('plugin1');
     });
+
+    it('should create tool message ', async () => {
+      // 调用 create 方法
+      const state = {
+        query: 'Composio',
+        answers: [],
+        results: [
+          {
+            url: 'https://www.composio.dev/',
+            score: 16,
+            title: 'Composio - Connect 90+ tools to your AI agents',
+            engine: 'bing',
+            content:
+              'Faster DevelopmentHigher ReliabilityBetter Integrations. Get Started Now. Our platform lets you ditch the specs and seamlessly integrate any tool you need in less than 5 mins.',
+            engines: ['bing', 'qwant', 'brave', 'duckduckgo'],
+            category: 'general',
+            template: 'default.html',
+            positions: [1, 1, 1, 1],
+            thumbnail: '',
+            parsed_url: ['https', 'www.composio.dev', '/', '', '', ''],
+            publishedDate: null,
+          },
+          {
+            url: 'https://www.composio.co/',
+            score: 10.75,
+            title: 'Composio',
+            engine: 'bing',
+            content:
+              'Composio was created to help streamline the entire book creation process! Writing. Take time out to write / Make a schedule to write consistently. We have writing software that optimizes your books for printing or ebook format. Figure out what you want to write. Collaborate and write with others. Professional editing is a necessity.',
+            engines: ['qwant', 'duckduckgo', 'google', 'bing', 'brave'],
+            category: 'general',
+            template: 'default.html',
+            positions: [5, 2, 1, 5, 4],
+            thumbnail: null,
+            parsed_url: ['https', 'www.composio.co', '/', '', '', ''],
+            publishedDate: null,
+          },
+        ],
+        unresponsive_engines: [],
+      };
+      const result = await messageModel.create({
+        content: '[{}]',
+        plugin: {
+          apiName: 'searchWithSearXNG',
+          arguments: '{\n  "query": "Composio"\n}',
+          identifier: 'lobe-web-browsing',
+          type: 'builtin',
+        },
+        pluginState: state,
+        role: 'tool',
+        tool_call_id: 'tool_call_ymxXC2J0',
+        sessionId: '1',
+      });
+
+      // 断言结果
+      expect(result.id).toBeDefined();
+      expect(result.content).toBe('[{}]');
+      expect(result.role).toBe('tool');
+      expect(result.sessionId).toBe('1');
+
+      const pluginResult = await serverDB
+        .select()
+        .from(messagePlugins)
+        .where(eq(messagePlugins.id, result.id))
+        .execute();
+      expect(pluginResult).toHaveLength(1);
+      expect(pluginResult[0].identifier).toBe('lobe-web-browsing');
+      expect(pluginResult[0].state!).toMatchObject(state);
+    });
   });
 
   describe('batchCreateMessages', () => {
@@ -645,6 +714,40 @@ describe('MessageModel', () => {
     });
   });
 
+  describe('deleteMessages', () => {
+    it('should delete 2 messages', async () => {
+      // 创建测试数据
+      await serverDB.insert(messages).values([
+        { id: '1', userId, role: 'user', content: 'message 1' },
+        { id: '2', userId, role: 'user', content: 'message 2' },
+      ]);
+
+      // 调用 deleteMessage 方法
+      await messageModel.deleteMessages(['1', '2']);
+
+      // 断言结果
+      const result = await serverDB.select().from(messages).where(eq(messages.id, '1')).execute();
+      expect(result).toHaveLength(0);
+      const result2 = await serverDB.select().from(messages).where(eq(messages.id, '2')).execute();
+      expect(result2).toHaveLength(0);
+    });
+
+    it('should only delete messages belonging to the user', async () => {
+      // 创建测试数据
+      await serverDB.insert(messages).values([
+        { id: '1', userId: '456', role: 'user', content: 'message 1' },
+        { id: '2', userId: '456', role: 'user', content: 'message 1' },
+      ]);
+
+      // 调用 deleteMessage 方法
+      await messageModel.deleteMessages(['1', '2']);
+
+      // 断言结果
+      const result = await serverDB.select().from(messages).where(eq(messages.id, '1')).execute();
+      expect(result).toHaveLength(1);
+    });
+  });
+
   describe('deleteAllMessages', () => {
     it('should delete all messages belonging to the user', async () => {
       // 创建测试数据

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

@@ -206,7 +206,7 @@ export class MessageModel {
   // **************** Create *************** //
 
   async create(
-    { fromModel, fromProvider, files, ...message }: CreateMessageParams,
+    { fromModel, fromProvider, files, plugin, pluginState, ...message }: CreateMessageParams,
     id: string = this.genId(),
   ): Promise<MessageItem> {
     return serverDB.transaction(async (trx) => {
@@ -224,12 +224,13 @@ export class MessageModel {
       // Insert the plugin data if the message is a tool
       if (message.role === 'tool') {
         await trx.insert(messagePlugins).values({
-          apiName: message.plugin?.apiName,
-          arguments: message.plugin?.arguments,
+          apiName: plugin?.apiName,
+          arguments: plugin?.arguments,
           id,
-          identifier: message.plugin?.identifier,
+          identifier: plugin?.identifier,
+          state: pluginState,
           toolCallId: message.tool_call_id,
-          type: message.plugin?.type,
+          type: plugin?.type,
         });
       }
 
@@ -352,6 +353,12 @@ export class MessageModel {
     });
   }
 
+  async deleteMessages(ids: string[]) {
+    return serverDB
+      .delete(messages)
+      .where(and(eq(messages.userId, this.userId), inArray(messages.id, ids)));
+  }
+
   async deleteMessageTranslate(id: string) {
     return serverDB.delete(messageTranslates).where(and(eq(messageTranslates.id, id)));
   }
@@ -360,7 +367,7 @@ export class MessageModel {
     return serverDB.delete(messageTTS).where(and(eq(messageTTS.id, id)));
   }
 
-  async deleteMessages(sessionId?: string | null, topicId?: string | null) {
+  async deleteMessagesBySession(sessionId?: string | null, topicId?: string | null) {
     return serverDB
       .delete(messages)
       .where(

package/src/features/Conversation/Actions/Tool.tsx

@@ -7,19 +7,25 @@ import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
 import { RenderAction } from '../types';
 
 export const ToolActionsBar: RenderAction = memo(({ id }) => {
-  const { regenerate } = useChatListActionsBar();
-  const [reInvokeToolMessage] = useChatStore((s) => [s.reInvokeToolMessage]);
+  const { regenerate, del } = useChatListActionsBar();
+  const [reInvokeToolMessage, deleteToolMessage] = useChatStore((s) => [
+    s.reInvokeToolMessage,
+    s.deleteToolMessage,
+  ]);
 
   return (
     <ActionIconGroup
-      // dropdownMenu={[regenerate]}
-      items={[regenerate]}
-      onActionClick={(event) => {
+      items={[regenerate, del]}
+      onActionClick={async (event) => {
         switch (event.key) {
           case 'regenerate': {
-            reInvokeToolMessage(id);
+            await reInvokeToolMessage(id);
             break;
           }
+
+          case 'del': {
+            await deleteToolMessage(id);
+          }
         }
       }}
       type="ghost"

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

@@ -1,6 +1,6 @@
 import { Loading3QuartersOutlined } from '@ant-design/icons';
-import { ActionIcon, Avatar, Highlighter, Icon, Tag } from '@lobehub/ui';
-import { Tabs } from 'antd';
+import { ActionIcon, Highlighter, Icon, Tag } from '@lobehub/ui';
+import { Tabs, Typography } from 'antd';
 import isEqual from 'fast-deep-equal';
 import {
   InspectionPanel,
@@ -8,15 +8,16 @@ import {
   LucideBugOff,
   LucideChevronDown,
   LucideChevronRight,
-  LucideToyBrick,
 } from 'lucide-react';
 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 PluginAvatar from '@/features/PluginAvatar';
+import { useIsMobile } from '@/hooks/useIsMobile';
 import { useChatStore } from '@/store/chat';
-import { chatPortalSelectors } from '@/store/chat/slices/portal/selectors';
+import { chatPortalSelectors } from '@/store/chat/selectors';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
 import { ChatPluginPayload } from '@/types/message';
@@ -50,25 +51,19 @@ const Inspector = memo<InspectorProps>(
     const { t } = useTranslation(['plugin', 'portal']);
     const { styles } = useStyles();
     const [open, setOpen] = useState(false);
-    const [isMessageToolUIOpen, openToolUI, toggleInspector] = useChatStore((s) => [
+    const [isMessageToolUIOpen, openToolUI, togglePortal] = useChatStore((s) => [
       chatPortalSelectors.isArtifactMessageUIOpen(id)(s),
       s.openToolUI,
-      s.toggleDock,
+      s.togglePortal,
     ]);
 
+    const isMobile = useIsMobile();
     const pluginMeta = useToolStore(toolSelectors.getMetaById(identifier), isEqual);
 
     const showRightAction = useToolStore(toolSelectors.isToolHasUI(identifier));
-    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} />
-    );
-
     let args, params;
     try {
       args = JSON.stringify(payload, null, 2);
@@ -84,7 +79,7 @@ const Inspector = memo<InspectorProps>(
           <Flexbox
             align={'center'}
             className={styles.container}
-            gap={8}
+            gap={isMobile ? 16 : 8}
             horizontal
             onClick={() => {
               setShow?.(!showRender);
@@ -96,22 +91,33 @@ const Inspector = memo<InspectorProps>(
                   <Loading3QuartersOutlined spin />
                 </div>
               ) : (
-                avatar
+                <PluginAvatar identifier={identifier} size={isMobile ? 36 : undefined} />
+              )}
+              {isMobile ? (
+                <Flexbox>
+                  <div>{pluginTitle}</div>
+                  <Typography.Text className={styles.apiName} type={'secondary'}>
+                    {payload?.apiName}
+                  </Typography.Text>
+                </Flexbox>
+              ) : (
+                <>
+                  <div>{pluginTitle}</div>
+                  <Tag>{payload?.apiName}</Tag>
+                </>
               )}
-              <div>{pluginTitle}</div>
-              <Tag>{payload?.apiName}</Tag>
             </Flexbox>
             {showRightAction && <Icon icon={showRender ? LucideChevronDown : LucideChevronRight} />}
           </Flexbox>
 
           <Flexbox horizontal>
-            {showRightAction && (
+            {!isMobile && showRightAction && (
               <ActionIcon
                 icon={InspectionPanel}
                 onClick={() => {
                   if (!isMessageToolUIOpen) openToolUI(id, identifier);
                   else {
-                    toggleInspector(false);
+                    togglePortal(false);
                   }
                 }}
                 size={DESKTOP_HEADER_ICON_SIZE}

package/src/features/Conversation/Messages/Tool/Inspector/style.ts

@@ -1,6 +1,15 @@
 import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css, token }) => ({
+  apiName: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    font-size: 12px;
+    text-overflow: ellipsis;
+  `,
   container: css`
     cursor: pointer;
 

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

@@ -82,6 +82,12 @@ export const messageRouter = router({
     }),
 
   removeMessages: messageProcedure
+    .input(z.object({ ids: z.array(z.string()) }))
+    .mutation(async ({ input, ctx }) => {
+      return ctx.messageModel.deleteMessages(input.ids);
+    }),
+
+  removeMessagesByAssistant: messageProcedure
     .input(
       z.object({
         sessionId: z.string().nullable().optional(),
@@ -89,7 +95,7 @@ export const messageRouter = router({
       }),
     )
     .mutation(async ({ input, ctx }) => {
-      return ctx.messageModel.deleteMessages(input.sessionId, input.topicId);
+      return ctx.messageModel.deleteMessagesBySession(input.sessionId, input.topicId);
     }),
 
   searchMessages: messageProcedure

package/src/services/message/client.test.ts

@@ -23,6 +23,7 @@ vi.mock('@/database/client/models/message', () => {
       count: vi.fn(),
       query: vi.fn(),
       delete: vi.fn(),
+      bulkDelete: vi.fn(),
       queryBySessionId: vi.fn(),
       update: vi.fn(),
       updatePlugin: vi.fn(),
@@ -100,6 +101,19 @@ describe('MessageClientService', () => {
       expect(result).toBe(true);
     });
   });
+  describe('removeMessages', () => {
+    it('should remove a message by id', async () => {
+      // Setup
+      (MessageModel.bulkDelete as Mock).mockResolvedValue(true);
+
+      // Execute
+      const result = await messageService.removeMessages([mockMessageId]);
+
+      // Assert
+      expect(MessageModel.bulkDelete).toHaveBeenCalledWith([mockMessageId]);
+      expect(result).toBe(true);
+    });
+  });
 
   describe('getMessages', () => {
     it('should retrieve messages by sessionId and topicId', async () => {
@@ -132,7 +146,7 @@ describe('MessageClientService', () => {
     });
   });
 
-  describe('removeMessages', () => {
+  describe('removeMessagesByAssistant', () => {
     it('should batch remove messages by assistantId and topicId', async () => {
       // Setup
       const assistantId = 'assistant-id';
@@ -140,7 +154,7 @@ describe('MessageClientService', () => {
       (MessageModel.batchDelete as Mock).mockResolvedValue(true);
 
       // Execute
-      const result = await messageService.removeMessages(assistantId, topicId);
+      const result = await messageService.removeMessagesByAssistant(assistantId, topicId);
 
       // Assert
       expect(MessageModel.batchDelete).toHaveBeenCalledWith(assistantId, topicId);

package/src/services/message/client.ts

@@ -74,7 +74,11 @@ export class ClientService implements IMessageService {
     return MessageModel.delete(id);
   }
 
-  async removeMessages(assistantId: string, topicId?: string) {
+  async removeMessages(ids: string[]) {
+    return MessageModel.bulkDelete(ids);
+  }
+
+  async removeMessagesByAssistant(assistantId: string, topicId?: string) {
     return MessageModel.batchDelete(assistantId, topicId);
   }
 

package/src/services/message/server.ts

@@ -80,8 +80,13 @@ export class ServerService implements IMessageService {
   removeMessage(id: string): Promise<any> {
     return lambdaClient.message.removeMessage.mutate({ id });
   }
-  removeMessages(sessionId: string, topicId?: string | undefined): Promise<any> {
-    return lambdaClient.message.removeMessages.mutate({
+
+  removeMessages(ids: string[]): Promise<any> {
+    return lambdaClient.message.removeMessages.mutate({ ids });
+  }
+
+  removeMessagesByAssistant(sessionId: string, topicId?: string | undefined): Promise<any> {
+    return lambdaClient.message.removeMessagesByAssistant.mutate({
       sessionId: this.toDbSessionId(sessionId),
       topicId,
     });

package/src/services/message/type.ts

@@ -39,7 +39,8 @@ export interface IMessageService {
   bindMessagesToTopic(topicId: string, messageIds: string[]): Promise<any>;
 
   removeMessage(id: string): Promise<any>;
-  removeMessages(assistantId: string, topicId?: string): Promise<any>;
+  removeMessages(ids: string[]): Promise<any>;
+  removeMessagesByAssistant(assistantId: string, topicId?: string): Promise<any>;
   removeAllMessages(): Promise<any>;
 
   hasMessages(): Promise<boolean>;