@lobehub/chat 0.156.2 → 0.157.1

package/src/database/client/core/db.ts

@@ -19,6 +19,7 @@ import {
   dbSchemaV5,
   dbSchemaV6,
   dbSchemaV7,
+  dbSchemaV9,
 } from './schemas';
 import { DBModel, LOBE_CHAT_LOCAL_DB_NAME } from './types/db';
 
@@ -67,6 +68,10 @@ export class BrowserDB extends Dexie {
       .stores(dbSchemaV7)
       .upgrade((trans) => this.upgradeToV8(trans));
 
+    this.version(9)
+      .stores(dbSchemaV9)
+      .upgrade((trans) => this.upgradeToV9(trans));
+
     this.files = this.table('files');
     this.sessions = this.table('sessions');
     this.messages = this.table('messages');
@@ -153,6 +158,33 @@ export class BrowserDB extends Dexie {
       }
     });
   };
+
+  upgradeToV9 = async (trans: Transaction) => {
+    const messages = trans.table('messages');
+    await messages.toCollection().modify(async (message: DBModel<DB_Message>) => {
+      if ((message.role as string) === 'function') {
+        const origin = Object.assign({}, message);
+
+        const toolCallId = `tool_call_${message.id}`;
+        const assistantMessageId = `tool_calls_${message.id}`;
+
+        message.role = 'tool';
+        message.tool_call_id = toolCallId;
+        message.parentId = assistantMessageId;
+
+        await messages.add({
+          ...origin,
+          content: '',
+          createdAt: message.createdAt - 10,
+          error: undefined,
+          id: assistantMessageId,
+          role: 'assistant',
+          tools: [{ ...message.plugin!, id: toolCallId }],
+          updatedAt: message.updatedAt - 10,
+        } as DBModel<DB_Message>);
+      }
+    });
+  };
 }
 
 export const browserDB = new BrowserDB();

package/src/database/client/core/schemas.ts

@@ -76,3 +76,12 @@ export const dbSchemaV7 = {
   plugins:
     '&identifier, id, type, manifest.type, manifest.meta.title, manifest.meta.description, manifest.meta.author, createdAt, updatedAt',
 };
+// ************************************** //
+// ******* Version 9 - 2024-03-14 ******* //
+// ************************************** //
+// - Added id to `plugins` table
+export const dbSchemaV9 = {
+  ...dbSchemaV7,
+  messages:
+    '&id, role, content, fromModel, favorite, tool_call_id, plugin.identifier, plugin.apiName, translate.content, createdAt, updatedAt, sessionId, topicId, quotaId, parentId, [sessionId+topicId], traceId',
+};

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

@@ -264,14 +264,14 @@ describe('MessageModel', () => {
     it('should update a role and plugins', async () => {
       const createdMessage = await MessageModel.create(messageData);
       const updateData = {
-        role: 'function' as const,
+        role: 'tool' as const,
         plugin: { apiName: 'a', identifier: 'b', arguments: 'abc' },
       };
 
       await MessageModel.update(createdMessage.id, updateData);
       const updatedMessage = await MessageModel.findById(createdMessage.id);
 
-      expect(updatedMessage).toHaveProperty('role', 'function');
+      expect(updatedMessage).toHaveProperty('role', 'tool');
     });
   });
 

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

@@ -14,15 +14,24 @@ const PluginSchema = z.object({
   type: z.enum(['default', 'markdown', 'standalone', 'builtin']).default('default'),
 });
 
+const ToolCallSchema = PluginSchema.extend({
+  id: z.string(),
+});
+
 export const DB_MessageSchema = z.object({
-  role: z.enum(['user', 'system', 'assistant', 'function']),
+  role: z.enum(['user', 'system', 'assistant', 'tool']),
   content: z.string(),
   files: z.array(z.string()).optional(),
   favorite: z.number().int().min(0).max(1).optional(),
   error: z.any().optional(),
 
+  tools: z.array(ToolCallSchema).optional(),
+  tool_call_id: z.string().optional(),
+
   plugin: PluginSchema.optional(),
   pluginState: z.any().optional(),
+  pluginError: z.any().optional(),
+
   fromModel: z.string().optional(),
   fromProvider: z.string().optional(),
   translate: TranslateSchema.optional().or(z.literal(false)),

package/src/features/AgentSetting/store/action.ts

@@ -8,6 +8,7 @@ import { TraceNameMap, TracePayload, TraceTopicType } from '@/const/trace';
 import { chatService } from '@/services/chat';
 import { LobeAgentConfig } from '@/types/agent';
 import { MetaData } from '@/types/meta';
+import { MessageTextChunk } from '@/utils/fetch';
 import { setNamespace } from '@/utils/storeDebug';
 
 import { SessionLoadingState } from '../store/initialState';
@@ -246,17 +247,25 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
 
   streamUpdateMetaArray: (key: keyof MetaData) => {
     let value = '';
-    return (text: string) => {
-      value += text;
-      get().dispatchMeta({ type: 'update', value: { [key]: value.split(',') } });
+    return (chunk: MessageTextChunk) => {
+      switch (chunk.type) {
+        case 'text': {
+          value += chunk.text;
+          get().dispatchMeta({ type: 'update', value: { [key]: value.split(',') } });
+        }
+      }
     };
   },
 
   streamUpdateMetaString: (key: keyof MetaData) => {
     let value = '';
-    return (text: string) => {
-      value += text;
-      get().dispatchMeta({ type: 'update', value: { [key]: value } });
+    return (chunk: MessageTextChunk) => {
+      switch (chunk.type) {
+        case 'text': {
+          value += chunk.text;
+          get().dispatchMeta({ type: 'update', value: { [key]: value } });
+        }
+      }
     };
   },
 

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

@@ -6,9 +6,10 @@ import { RenderAction } from '../types';
 import { ErrorActionsBar } from './Error';
 import { useCustomActions } from './customAction';
 
-export const AssistantActionsBar: RenderAction = memo(({ id, onActionClick, error }) => {
+export const AssistantActionsBar: RenderAction = memo(({ id, onActionClick, error, tools }) => {
   const { regenerate, edit, delAndRegenerate, copy, divider, del } = useChatListActionsBar();
   const { translate, tts } = useCustomActions();
+  const hasTools = !!tools;
 
   if (id === 'default') return;
 
@@ -27,7 +28,7 @@ export const AssistantActionsBar: RenderAction = memo(({ id, onActionClick, erro
         delAndRegenerate,
         del,
       ]}
-      items={[edit, copy]}
+      items={[hasTools ? delAndRegenerate : edit, copy]}
       onActionClick={onActionClick}
       type="ghost"
     />

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

@@ -0,0 +1,28 @@
+import { ActionIconGroup } from '@lobehub/ui';
+import { memo } from 'react';
+
+import { useChatStore } from '@/store/chat';
+
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
+import { RenderAction } from '../types';
+
+export const ToolActionsBar: RenderAction = memo(({ id }) => {
+  const { regenerate } = useChatListActionsBar();
+  const [reInvokeToolMessage] = useChatStore((s) => [s.reInvokeToolMessage]);
+
+  return (
+    <ActionIconGroup
+      // dropdownMenu={[regenerate]}
+      items={[regenerate]}
+      onActionClick={(event) => {
+        switch (event.key) {
+          case 'regenerate': {
+            reInvokeToolMessage(id);
+            break;
+          }
+        }
+      }}
+      type="ghost"
+    />
+  );
+});

package/src/features/Conversation/Actions/index.ts

@@ -8,13 +8,13 @@ import { LLMRoleType } from '@/types/llm';
 import { OnActionsClick, RenderAction } from '../types';
 import { AssistantActionsBar } from './Assistant';
 import { DefaultActionsBar } from './Fallback';
-import { FunctionActionsBar } from './Function';
+import { ToolActionsBar } from './Tool';
 import { UserActionsBar } from './User';
 
 export const renderActions: Record<LLMRoleType, RenderAction> = {
   assistant: AssistantActionsBar,
-  function: FunctionActionsBar,
   system: DefaultActionsBar,
+  tool: ToolActionsBar,
   user: UserActionsBar,
 };
 

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

@@ -0,0 +1,73 @@
+import { Avatar, Highlighter, 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 { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { pluginHelpers, useToolStore } from '@/store/tool';
+import { toolSelectors } from '@/store/tool/selectors';
+
+import { useStyles } from './style';
+
+export interface InspectorProps {
+  arguments?: string;
+  identifier: string;
+  index: number;
+  messageId: string;
+  style: CSSProperties;
+}
+
+const CallItem = memo<InspectorProps>(
+  ({ arguments: requestArgs = '{}', messageId, index, identifier, style }) => {
+    const { t } = useTranslation('plugin');
+    const { styles } = useStyles();
+    const [open, setOpen] = useState(false);
+    const loading = useChatStore(chatSelectors.isToolCallStreaming(messageId, index));
+
+    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
+          align={'center'}
+          className={styles.container}
+          distribution={'space-between'}
+          gap={8}
+          height={32}
+          horizontal
+          onClick={() => {
+            setOpen(!open);
+          }}
+        >
+          <Flexbox align={'center'} gap={8} horizontal>
+            {loading ? (
+              <Center height={30} width={24}>
+                <Icon icon={Loader2} spin />
+              </Center>
+            ) : (
+              avatar
+            )}
+            {pluginTitle}
+          </Flexbox>
+          <Icon icon={open ? LucideChevronDown : LucideChevronRight} />
+        </Flexbox>
+        {(open || loading) && <Highlighter language={'json'}>{requestArgs}</Highlighter>}
+      </Flexbox>
+    );
+  },
+);
+
+export default CallItem;

package/src/features/Conversation/Messages/Assistant/ToolCalls/style.ts

@@ -0,0 +1,25 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    cursor: pointer;
+
+    width: fit-content;
+    padding-inline: 4px 6px;
+
+    color: ${token.colorText};
+
+    background: ${token.colorFillTertiary};
+    border-radius: 8px;
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+    }
+  `,
+  plugin: css`
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    width: fit-content;
+  `,
+}));

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

@@ -0,0 +1,51 @@
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { LOADING_FLAT } from '@/const/message';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { ChatMessage } from '@/types/message';
+
+import { DefaultMessage } from '../Default';
+import ToolCall from './ToolCalls';
+
+export const AssistantMessage = memo<
+  ChatMessage & {
+    editableContent: ReactNode;
+  }
+>(({ id, tools, content, ...props }) => {
+  const editing = useChatStore(chatSelectors.isMessageEditing(id));
+  const generating = useChatStore(chatSelectors.isMessageGenerating(id));
+
+  const isToolCallGenerating = generating && (content === LOADING_FLAT || !content) && !!tools;
+
+  return (
+    <Flexbox gap={8} id={id}>
+      {(content || editing) && (
+        <DefaultMessage
+          content={content}
+          // we have id above, so don't need to pass it again
+          id={undefined as any}
+          isToolCallGenerating={isToolCallGenerating}
+          {...props}
+        />
+      )}
+      {!editing && tools && (
+        <Flexbox gap={8} horizontal>
+          {tools.map((toolCall, index) => (
+            <ToolCall
+              arguments={toolCall.arguments}
+              identifier={toolCall.identifier}
+              index={index}
+              key={toolCall.id}
+              messageId={id}
+              style={{
+                maxWidth: `max(${100 / tools.length}%, 300px)`,
+              }}
+            />
+          ))}
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});

package/src/features/Conversation/Messages/Default.tsx

@@ -8,8 +8,11 @@ import BubblesLoading from '../components/BubblesLoading';
 export const DefaultMessage = memo<
   ChatMessage & {
     editableContent: ReactNode;
+    isToolCallGenerating?: boolean;
   }
->(({ id, editableContent, content }) => {
+>(({ id, editableContent, content, isToolCallGenerating }) => {
+  if (isToolCallGenerating) return;
+
   if (content === LOADING_FLAT) return <BubblesLoading />;
 
   return <div id={id}>{editableContent}</div>;

package/src/features/Conversation/{Plugins → Messages/Tool}/Inspector/index.tsx

@@ -1,13 +1,12 @@
 import { Loading3QuartersOutlined } from '@ant-design/icons';
-import { LobePluginType } from '@lobehub/chat-plugin-sdk';
-import { ActionIcon, Avatar, Highlighter, Icon } from '@lobehub/ui';
+import { ActionIcon, Avatar, Highlighter, Icon, Tag } from '@lobehub/ui';
 import { Tabs } from 'antd';
 import isEqual from 'fast-deep-equal';
 import {
   LucideBug,
   LucideBugOff,
   LucideChevronDown,
-  LucideChevronUp,
+  LucideChevronRight,
   LucideToyBrick,
 } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -16,6 +15,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors, toolSelectors } from '@/store/tool/selectors';
+import { ChatPluginPayload } from '@/types/message';
 
 import PluginResult from './PluginResultJSON';
 import Settings from './Settings';
@@ -23,46 +23,44 @@ import { useStyles } from './style';
 
 export interface InspectorProps {
   arguments?: string;
-  command?: any;
   content: string;
-  id?: string;
+  identifier?: string;
   loading?: boolean;
+  payload?: ChatPluginPayload;
   setShow?: (showRender: boolean) => void;
   showRender?: boolean;
-  type?: LobePluginType;
 }
 
 const Inspector = memo<InspectorProps>(
   ({
     arguments: requestArgs = '{}',
-    command,
+    payload,
     showRender,
     loading,
     setShow,
     content,
-    id = 'unknown',
-    // type,
+    identifier = 'unknown',
   }) => {
     const { t } = useTranslation('plugin');
     const { styles } = useStyles();
     const [open, setOpen] = useState(false);
 
-    const pluginMeta = useToolStore(toolSelectors.getMetaById(id), isEqual);
+    const pluginMeta = useToolStore(toolSelectors.getMetaById(identifier), isEqual);
 
-    const showRightAction = useToolStore(pluginSelectors.isPluginHasUI(id));
+    const showRightAction = useToolStore(pluginSelectors.isPluginHasUI(identifier));
     const pluginAvatar = pluginHelpers.getPluginAvatar(pluginMeta);
 
-    const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('plugins.loading');
+    const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
 
     const avatar = pluginAvatar ? (
-      <Avatar avatar={pluginAvatar} size={32} />
+      <Avatar alt={pluginTitle} avatar={pluginAvatar} size={32} />
     ) : (
       <Icon icon={LucideToyBrick} />
     );
 
     let args, params;
     try {
-      args = JSON.stringify(command, null, 2);
+      args = JSON.stringify(payload, null, 2);
       params = JSON.stringify(JSON.parse(requestArgs), null, 2);
     } catch {
       args = '';
@@ -81,29 +79,30 @@ const Inspector = memo<InspectorProps>(
               setShow?.(!showRender);
             }}
           >
-            {loading ? (
-              <div>
-                <Loading3QuartersOutlined spin />
-              </div>
-            ) : (
-              avatar
-            )}
-            {pluginTitle}
-            {showRightAction && <Icon icon={showRender ? LucideChevronUp : LucideChevronDown} />}
-          </Flexbox>
-          {
-            <Flexbox horizontal>
-              {/*{type === 'standalone' && <ActionIcon icon={LucideOrbit} />}*/}
-              <ActionIcon
-                icon={open ? LucideBugOff : LucideBug}
-                onClick={() => {
-                  setOpen(!open);
-                }}
-                title={t(open ? 'debug.off' : 'debug.on')}
-              />
-              <Settings id={id} />
+            <Flexbox align={'center'} gap={8} horizontal>
+              {loading ? (
+                <div>
+                  <Loading3QuartersOutlined spin />
+                </div>
+              ) : (
+                avatar
+              )}
+              <div>{pluginTitle}</div>
+              <Tag>{payload?.apiName}</Tag>
             </Flexbox>
-          }
+            {showRightAction && <Icon icon={showRender ? LucideChevronDown : LucideChevronRight} />}
+          </Flexbox>
+
+          <Flexbox horizontal>
+            <ActionIcon
+              icon={open ? LucideBugOff : LucideBug}
+              onClick={() => {
+                setOpen(!open);
+              }}
+              title={t(open ? 'debug.off' : 'debug.on')}
+            />
+            <Settings id={identifier} />
+          </Flexbox>
         </Flexbox>
         {open && (
           <Tabs

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

@@ -0,0 +1,44 @@
+import { Snippet } from '@lobehub/ui';
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { ChatMessage } from '@/types/message';
+
+import PluginRender from '../../Plugins/Render';
+import Inspector from './Inspector';
+
+export const ToolMessage = memo<ChatMessage>(({ id, content, plugin }) => {
+  const loading = useChatStore(chatSelectors.isMessageGenerating(id));
+
+  const [showRender, setShow] = useState(plugin?.type !== 'default');
+
+  return (
+    <Flexbox gap={12} id={id} width={'100%'}>
+      <Inspector
+        arguments={plugin?.arguments}
+        content={content}
+        identifier={plugin?.identifier}
+        loading={loading}
+        payload={plugin}
+        setShow={setShow}
+        showRender={showRender}
+      />
+      {showRender || loading ? (
+        <PluginRender
+          content={content}
+          id={id}
+          identifier={plugin?.identifier}
+          loading={loading}
+          payload={plugin}
+          type={plugin?.type}
+        />
+      ) : (
+        <Flexbox>
+          <Snippet>{plugin?.arguments || ''}</Snippet>
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});

package/src/features/Conversation/Messages/index.ts

@@ -6,13 +6,14 @@ import { sessionSelectors } from '@/store/session/selectors';
 import { OnAvatarsClick, RenderMessage } from '../types';
 import { AssistantMessage } from './Assistant';
 import { DefaultMessage } from './Default';
-import { FunctionMessage } from './Function';
+import { ToolMessage } from './Tool';
 import { UserMessage } from './User';
 
 export const renderMessages: Record<string, RenderMessage> = {
   assistant: AssistantMessage,
   default: DefaultMessage,
-  function: FunctionMessage,
+  function: DefaultMessage,
+  tool: ToolMessage,
   user: UserMessage,
 };
 

package/src/features/Conversation/Plugins/Render/StandaloneType/Iframe.tsx

@@ -126,7 +126,7 @@ const IFrameRender = memo<IFrameRenderProps>(({ url, id, payload, width = 600, h
     // we need to know which message to trigger
     if (messageId !== id) return;
 
-    triggerAIMessage(id);
+    triggerAIMessage({ parentId: id });
   });
 
   // when plugin want to create an assistant message

package/src/features/Conversation/Plugins/Render/index.tsx

@@ -1,12 +1,21 @@
 import { PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
+import { Skeleton } from 'antd';
+import dynamic from 'next/dynamic';
 import { memo } from 'react';
 
 import { LobeToolRenderType } from '@/types/tool';
 
-import BuiltinType from '././BuiltinType';
 import DefaultType from './DefaultType';
 import Markdown from './MarkdownType';
-import Standalone from './StandaloneType';
+
+const loading = () => (
+  <Skeleton.Node active style={{ width: '100%' }}>
+    {' '}
+  </Skeleton.Node>
+);
+
+const Standalone = dynamic(() => import('./StandaloneType'), { loading });
+const BuiltinType = dynamic(() => import('./BuiltinType'), { loading });
 
 export interface PluginRenderProps {
   content: string;

package/src/features/Conversation/components/SkeletonList.tsx

@@ -34,14 +34,14 @@ const SkeletonList = memo<SkeletonListProps>(({ mobile }) => {
       <Skeleton
         active
         avatar={{ size: mobile ? 32 : 40 }}
-        className={styles.message}
+        className={cx(styles.message, styles.user)}
         paragraph={{ width: mobile ? ['80%', '40%'] : ['50%', '30%'] }}
         title={false}
       />
       <Skeleton
         active
         avatar={{ size: mobile ? 32 : 40 }}
-        className={cx(styles.message, styles.user)}
+        className={styles.message}
         paragraph={{ width: mobile ? ['80%', '40%'] : ['50%', '30%'] }}
         title={false}
       />

package/src/features/Conversation/index.tsx

@@ -1,9 +1,8 @@
-import { Suspense, lazy } from 'react';
+import { Suspense } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import SkeletonList from './components/SkeletonList';
-
-const ChatList = lazy(() => import('./components/VirtualizedList'));
+import ChatList from './components/VirtualizedList';
 
 interface ConversationProps {
   mobile?: boolean;