@lobehub/lobehub 2.0.0-next.38 → 2.0.0-next.39

package/src/features/Conversation/Messages/Group/Actions/WithoutContentId.tsx

@@ -1,12 +1,14 @@
 import { UIChatMessage } from '@lobechat/types';
-import { ActionIconGroup, type ActionIconGroupEvent, ActionIconGroupItemType } from '@lobehub/ui';
+import { ActionIconGroup, type ActionIconGroupEvent } from '@lobehub/ui';
 import { useSearchParams } from 'next/navigation';
-import { memo, useCallback, useContext, useMemo } from 'react';
+import { memo, useCallback, useContext } from 'react';
 
 import { useChatStore } from '@/store/chat';
-import { threadSelectors } from '@/store/chat/selectors';
-import { useSessionStore } from '@/store/session';
-import { sessionSelectors } from '@/store/session/selectors';
+import {
+  displayMessageSelectors,
+  messageStateSelectors,
+  threadSelectors,
+} from '@/store/chat/selectors';
 
 import { InPortalThreadContext } from '../../../context/InPortalThreadContext';
 import { useChatListActionsBar } from '../../../hooks/useChatListActionsBar';
@@ -17,28 +19,38 @@ interface GroupActionsProps {
 }
 
 const WithoutContentId = memo<GroupActionsProps>(({ id, data }) => {
-  const [isThreadMode, hasThread] = useChatStore((s) => [
-    !!s.activeThreadId,
+  const [hasThread, lastBlockId] = useChatStore((s) => [
     threadSelectors.hasThreadBySourceMsgId(id)(s),
+    displayMessageSelectors.findLastMessageId(id)(s),
   ]);
-  const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
 
-  const { delAndRegenerate, del } = useChatListActionsBar({ hasThread });
+  const isContinuing = useChatStore((s) =>
+    lastBlockId ? messageStateSelectors.isMessageContinuing(lastBlockId)(s) : false,
+  );
+
+  const { delAndRegenerate, del, continueGeneration } = useChatListActionsBar({
+    hasThread,
+    isContinuing,
+  });
 
   const inPortalThread = useContext(InPortalThreadContext);
-  const inThread = isThreadMode || inPortalThread;
+  // const inThread = isThreadMode || inPortalThread;
 
-  const items = useMemo(() => {
-    return [delAndRegenerate, del].filter(Boolean) as ActionIconGroupItemType[];
-  }, [inThread, isGroupSession]);
+  const items = [continueGeneration, delAndRegenerate, del];
 
   const searchParams = useSearchParams();
   const topic = searchParams.get('topic');
 
-  const [deleteMessage, delAndRegenerateMessage, delAndResendThreadMessage] = useChatStore((s) => [
+  const [
+    deleteMessage,
+    delAndRegenerateMessage,
+    delAndResendThreadMessage,
+    continueGenerationMessage,
+  ] = useChatStore((s) => [
     s.deleteMessage,
     s.delAndRegenerateMessage,
     s.delAndResendThreadMessage,
+    s.continueGenerationMessage,
   ]);
 
   const onActionClick = useCallback(
@@ -46,6 +58,17 @@ const WithoutContentId = memo<GroupActionsProps>(({ id, data }) => {
       if (!data) return;
 
       switch (action.key) {
+        case 'continueGeneration': {
+          const lastMessageId = displayMessageSelectors.findLastMessageId(id)(
+            useChatStore.getState(),
+          );
+
+          if (!lastMessageId) return;
+
+          continueGenerationMessage(lastMessageId, id);
+          break;
+        }
+
         case 'del': {
           deleteMessage(id);
           break;

package/src/features/Conversation/Messages/Group/Error/index.tsx

@@ -17,7 +17,7 @@ const ErrorContent = memo<ErrorContentProps>(({ error, id }) => {
   const { t } = useTranslation('common');
   const errorProps = useErrorContent(error);
 
-  const [deleteMessage] = useChatStore((s) => [s.deleteMessage]);
+  const [deleteMessage] = useChatStore((s) => [s.deleteDBMessage]);
   const message = <ErrorMessageExtra block data={{ error, id }} />;
 
   if (!error?.message) {

package/src/features/Conversation/Messages/Group/GroupChildren.tsx

@@ -1,12 +1,10 @@
 import { AssistantContentBlock } from '@lobechat/types';
 import { createStyles } from 'antd-style';
-import { memo, use } from 'react';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { VirtuosoContext } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
-import { useChatStore } from '@/store/chat';
-
-import { ContentBlock } from './ContentBlock';
+import GroupItem from './GroupItem';
 
 const useStyles = createStyles(({ css }) => {
   return {
@@ -30,44 +28,24 @@ const GroupChildren = memo<GroupChildrenProps>(
   ({ blocks, contentId, disableEditing, messageIndex, id }) => {
     const { styles } = useStyles();
 
-    const [toggleMessageEditing] = useChatStore((s) => [s.toggleMessageEditing]);
-    const virtuosoRef = use(VirtuosoContext);
-
     return (
       <Flexbox className={styles.container} gap={8}>
         {blocks.map((item, index) => {
-          return item.id === contentId ? (
-            <Flexbox
-              key={index}
-              onDoubleClick={(e) => {
-                if (disableEditing || item.error || !e.altKey) return;
-
-                toggleMessageEditing(item.id, true);
-                virtuosoRef?.current?.scrollIntoView({
-                  align: 'start',
-                  behavior: 'auto',
-                  index: messageIndex,
-                });
-              }}
-            >
-              <ContentBlock index={index} {...item} />
-            </Flexbox>
-          ) : (
-            // <motion.div
-            //   animate={{ height: 'auto', opacity: 1 }}
-            //   exit={{ height: 0, opacity: 0 }}
-            //   initial={{ height: 0, opacity: 0 }}
-            //   key={`${id}_${index}`}
-            //   style={{ overflow: 'hidden' }}
-            //   transition={{ duration: 0.3, ease: 'easeInOut' }}
-            // >
-            <ContentBlock index={index} key={`${id}_${index}`} {...item} />
-            // </motion.div>
+          return (
+            <GroupItem
+              {...item}
+              contentId={contentId}
+              disableEditing={disableEditing}
+              index={index}
+              key={`${id}_${index}`}
+              messageIndex={messageIndex}
+            />
           );
         })}
       </Flexbox>
     );
   },
+  isEqual,
 );
 
 export default GroupChildren;

package/src/features/Conversation/Messages/Group/GroupItem.tsx

@@ -0,0 +1,43 @@
+import { AssistantContentBlock } from '@lobechat/types';
+import isEqual from 'fast-deep-equal';
+import { memo, use } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { ContentBlock } from '@/features/Conversation/Messages/Group/ContentBlock';
+import { VirtuosoContext } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
+import { useChatStore } from '@/store/chat';
+
+interface GroupItemProps extends AssistantContentBlock {
+  contentId?: string;
+  disableEditing?: boolean;
+  index: number;
+  messageIndex: number;
+}
+
+const GroupItem = memo<GroupItemProps>(
+  ({ contentId, messageIndex, index, disableEditing, error, ...item }) => {
+    const [toggleMessageEditing] = useChatStore((s) => [s.toggleMessageEditing]);
+    const virtuosoRef = use(VirtuosoContext);
+
+    return item.id === contentId ? (
+      <Flexbox
+        onDoubleClick={(e) => {
+          if (disableEditing || error || !e.altKey) return;
+
+          toggleMessageEditing(item.id, true);
+          virtuosoRef?.current?.scrollIntoView({
+            align: 'start',
+            behavior: 'auto',
+            index: messageIndex,
+          });
+        }}
+      >
+        <ContentBlock index={index} {...item} />
+      </Flexbox>
+    ) : (
+      <ContentBlock index={index} {...item} />
+    );
+  },
+  isEqual,
+);
+export default GroupItem;

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

@@ -90,7 +90,6 @@ const Inspectors = memo<InspectorProps>(
     setShowRender,
     showPluginRender,
     setShowPluginRender,
-    hidePluginUI = false,
     type,
   }) => {
     const { t } = useTranslation('plugin');
@@ -127,7 +126,7 @@ const Inspectors = memo<InspectorProps>(
           </Flexbox>
           <Flexbox align={'center'} gap={8} horizontal>
             <Flexbox className={styles.actions} horizontal>
-              {showRender && !hidePluginUI && (
+              {showRender && (
                 <ActionIcon
                   icon={showPluginRender ? LogsIcon : LayoutPanelTop}
                   onClick={() => {

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

@@ -30,7 +30,7 @@ const CustomRender = memo<CustomRenderProps>(
     // Determine if plugin UI should be shown based on plugin type
     useEffect(() => {
       if (!plugin?.type) return;
-      setShowPluginRender(!['default', 'mcp'].includes(plugin.type));
+      setShowPluginRender(plugin.type !== 'default');
     }, [plugin?.type, setShowPluginRender]);
 
     // Parse and display result content

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

@@ -39,8 +39,6 @@ const Tool = memo<GroupToolProps>(
         <Inspectors
           apiName={apiName}
           arguments={requestArgs}
-          // mcp don't have ui render
-          hidePluginUI={type === 'mcp'}
           id={id}
           identifier={identifier}
           index={index}

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

@@ -15,7 +15,10 @@ import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors, messageStateSelectors } from '@/store/chat/slices/message/selectors';
+import {
+  displayMessageSelectors,
+  messageStateSelectors,
+} from '@/store/chat/slices/message/selectors';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
@@ -64,7 +67,9 @@ const GroupMessage = memo<GroupMessageProps>((props) => {
   const [isInbox] = useSessionStore((s) => [sessionSelectors.isInboxSession(s)]);
   const [toggleSystemRole] = useGlobalStore((s) => [s.toggleSystemRole]);
   const openChatSettings = useOpenChatSettings();
-  const lastAssistantMsg = useChatStore(chatSelectors.getGroupLatestMessageWithoutTools(id));
+  const lastAssistantMsg = useChatStore(
+    displayMessageSelectors.getGroupLatestMessageWithoutTools(id),
+  );
 
   const contentId = lastAssistantMsg?.id;
 

package/src/features/Conversation/hooks/useChatListActionsBar.tsx

@@ -1,6 +1,7 @@
 import type { ActionIconGroupItemType } from '@lobehub/ui';
 import { css, cx } from 'antd-style';
 import {
+  ArrowDownFromLine,
   Copy,
   DownloadIcon,
   Edit,
@@ -26,6 +27,7 @@ const translateStyle = css`
 
 interface ChatListActionsBar {
   branching: ActionIconGroupItemType;
+  continueGeneration: ActionIconGroupItemType;
   copy: ActionIconGroupItemType;
   del: ActionIconGroupItemType;
   delAndRegenerate: ActionIconGroupItemType;
@@ -40,8 +42,13 @@ interface ChatListActionsBar {
 
 export const useChatListActionsBar = ({
   hasThread,
+  isContinuing,
   isRegenerating,
-}: { hasThread?: boolean; isRegenerating?: boolean } = {}): ChatListActionsBar => {
+}: {
+  hasThread?: boolean;
+  isContinuing?: boolean;
+  isRegenerating?: boolean;
+} = {}): ChatListActionsBar => {
   const { t } = useTranslation(['common', 'chat']);
 
   return useMemo<ChatListActionsBar>(
@@ -49,7 +56,14 @@ export const useChatListActionsBar = ({
       branching: {
         icon: Split,
         key: 'branching',
-        label: t('branching', { defaultValue: 'Create Sub Topic' }),
+        label: t('branching'),
+      },
+      continueGeneration: {
+        disabled: isContinuing,
+        icon: ArrowDownFromLine,
+        key: 'continueGeneration',
+        label: t('messageAction.continueGeneration', { ns: 'chat' }),
+        spin: isContinuing,
       },
       copy: {
         icon: Copy,
@@ -68,7 +82,6 @@ export const useChatListActionsBar = ({
         icon: ListRestart,
         key: 'delAndRegenerate',
         label: t('messageAction.delAndRegenerate', {
-          defaultValue: 'Delete and regenerate',
           ns: 'chat',
         }),
       },
@@ -78,7 +91,7 @@ export const useChatListActionsBar = ({
       edit: {
         icon: Edit,
         key: 'edit',
-        label: t('edit', { defaultValue: 'Edit' }),
+        label: t('edit'),
       },
       export: {
         icon: DownloadIcon,
@@ -89,12 +102,13 @@ export const useChatListActionsBar = ({
         disabled: isRegenerating,
         icon: RotateCcw,
         key: 'regenerate',
-        label: t('regenerate', { defaultValue: 'Regenerate' }),
+        label: t('regenerate'),
+        spin: isRegenerating,
       },
       share: {
         icon: Share2,
         key: 'share',
-        label: t('share', { defaultValue: 'Share' }),
+        label: t('share'),
       },
       translate: {
         children: localeOptions.map((i) => ({
@@ -112,6 +126,6 @@ export const useChatListActionsBar = ({
         label: t('tts.action', { ns: 'chat' }),
       },
     }),
-    [hasThread, isRegenerating],
+    [hasThread, isContinuing, isRegenerating],
   );
 };

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

@@ -1,7 +1,7 @@
+import { safeParseJSON } from '@lobechat/utils';
 import { memo } from 'react';
 
 import { BuiltinToolsRenders } from '@/tools/renders';
-import { safeParseJSON } from '@/utils/safeParseJSON';
 
 import { useParseContent } from '../useParseContent';
 

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

@@ -0,0 +1,52 @@
+import { Markdown } from '@lobehub/ui';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Arguments from '@/features/Conversation/Messages/Group/Tool/Render/Arguments';
+import { ToolCallResult } from '@/libs/mcp';
+
+export interface MCPTypeProps {
+  apiName?: string;
+  arguments?: string;
+  content: string;
+  id: string;
+  identifier?: string;
+  loading?: boolean;
+  pluginError?: any;
+  pluginState?: ToolCallResult;
+}
+
+const MCPType = memo<MCPTypeProps>(({ pluginState, arguments: args }) => {
+  if (!pluginState) return;
+
+  const { content } = pluginState;
+
+  return (
+    <Flexbox gap={8} style={{ maxHeight: 400, overflow: 'scroll', padding: 8, width: '100%' }}>
+      <div>
+        <Arguments arguments={args} />
+      </div>
+      <Flexbox>
+        <Flexbox>
+          {content.map((item) => {
+            switch (item.type) {
+              case 'text': {
+                return (
+                  <Markdown key={item.text} variant={'chat'}>
+                    {item.text}
+                  </Markdown>
+                );
+              }
+
+              default: {
+                return null;
+              }
+            }
+          })}
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default MCPType;

package/src/features/PluginsUI/Render/StandaloneType/Iframe.tsx

@@ -94,9 +94,9 @@ const IFrameRender = memo<IFrameRenderProps>(({ url, id, payload, width = 600, h
   });
 
   // when plugin update state, we should update it to the message pluginState key
-  const updatePluginState = useChatStore((s) => s.updatePluginState);
+  const optimisticUpdatePluginState = useChatStore((s) => s.optimisticUpdatePluginState);
   useOnPluginStateUpdate((key, value) => {
-    updatePluginState(id, { [key]: value });
+    optimisticUpdatePluginState(id, { [key]: value });
   });
 
   // when plugin wants to get plugin settings, send it to plugin

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

@@ -4,6 +4,7 @@ import { memo } from 'react';
 
 import BuiltinType from './BuiltinType';
 import DefaultType from './DefaultType';
+import MCP from './MCPType';
 import Markdown from './MarkdownType';
 import Standalone from './StandaloneType';
 
@@ -51,6 +52,22 @@ const PluginRender = memo<PluginRenderProps>(
         );
       }
 
+      // @ts-expect-error need to update types
+      case 'mcp': {
+        return (
+          <MCP
+            apiName={payload?.apiName}
+            arguments={argumentsStr}
+            content={content}
+            id={id}
+            identifier={identifier}
+            loading={loading}
+            pluginError={pluginError}
+            pluginState={pluginState}
+          />
+        );
+      }
+
       case 'markdown': {
         return <Markdown content={content} loading={loading} />;
       }

package/src/libs/mcp/client.ts

@@ -15,6 +15,7 @@ import {
   McpPrompt,
   McpResource,
   McpTool,
+  ToolCallResult,
   createMCPError,
 } from './types';
 
@@ -374,12 +375,12 @@ export class MCPClient {
     return manifest;
   }
 
-  async callTool(toolName: string, args: any) {
+  async callTool(toolName: string, args: any): Promise<ToolCallResult> {
     log('Calling tool: %s with args: %O, timeout: %O', toolName, args, MCP_TOOL_TIMEOUT);
     const result = await this.mcp.callTool({ arguments: args, name: toolName }, undefined, {
       timeout: MCP_TOOL_TIMEOUT,
     });
     log('Tool call result: %O', result);
-    return result;
+    return result as ToolCallResult;
   }
 }

package/src/libs/mcp/types.ts

@@ -30,6 +30,77 @@ export interface McpPrompt {
   name: string;
 }
 
+/**
+ * MCP Tool Call Result Types
+ */
+export interface TextContent {
+  _meta?: any;
+  text: string;
+  type: 'text';
+}
+
+export interface ImageContent {
+  _meta?: any;
+  data: string;
+  // base64
+  mimeType: string;
+  type: 'image';
+}
+
+export interface AudioContent {
+  _meta?: any;
+  data: string;
+  // base64
+  mimeType: string;
+  type: 'audio';
+}
+
+export interface ResourceContent {
+  _meta?: any;
+  resource: {
+    _meta?: any;
+    blob?: string;
+    mimeType?: string;
+    text?: string;
+    uri: string;
+  };
+  type: 'resource';
+}
+
+export interface ResourceLinkContent {
+  _meta?: any;
+  description?: string;
+  icons?: Array<{
+    mimeType?: string;
+    sizes?: string[];
+    src: string;
+  }>;
+  name: string;
+  title?: string;
+  type: 'resource_link';
+  uri: string;
+}
+
+export type ToolCallContent =
+  | TextContent
+  | ImageContent
+  | AudioContent
+  | ResourceContent
+  | ResourceLinkContent;
+
+export interface ToolCallResult {
+  content: ToolCallContent[];
+  isError?: boolean;
+  structuredContent?: any;
+}
+
+export interface MCPToolCallResult {
+  content: string;
+  error?: any;
+  state: ToolCallResult;
+  success: boolean;
+}
+
 /**
  * MCP 认证配置接口
  * 支持第一阶段的手动配置和未来的 OAuth 2.1 自动化流程

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

@@ -10,6 +10,7 @@
 import { DESKTOP_USER_ID } from '@/const/desktop';
 import { isDesktop } from '@/const/version';
 
+import { openTelemetry } from '../middleware/openTelemetry';
 import { userAuth } from '../middleware/userAuth';
 import { trpc } from './init';
 import { oidcAuth } from './middleware/oidcAuth';
@@ -24,14 +25,16 @@ export const router = trpc.router;
  * Create an unprotected procedure
  * @link https://trpc.io/docs/v11/procedures
  **/
-export const publicProcedure = trpc.procedure.use(({ next, ctx }) => {
+const baseProcedure = trpc.procedure.use(openTelemetry);
+
+export const publicProcedure = baseProcedure.use(({ next, ctx }) => {
   return next({
     ctx: { ...ctx, userId: isDesktop ? DESKTOP_USER_ID : ctx.userId },
   });
 });
 
 // procedure that asserts that the user is logged in
-export const authedProcedure = trpc.procedure.use(oidcAuth).use(userAuth);
+export const authedProcedure = baseProcedure.use(oidcAuth).use(userAuth);
 
 /**
  * Create a server-side caller