@lobehub/lobehub 2.0.0-next.277 → 2.0.0-next.279

package/src/features/Conversation/Messages/Supervisor/components/ContentBlock.tsx

@@ -11,34 +11,33 @@ import { Tools } from '../../AssistantGroup/Tools';
 import Reasoning from '../../components/Reasoning';
 import MessageContent from './MessageContent';
 
-const ContentBlock = memo<AssistantContentBlock>(({ id, tools, content, reasoning, error }) => {
-  const errorContent = useErrorContent(error);
-  const isReasoning = useConversationStore(messageStateSelectors.isMessageInReasoning(id));
-  const hasTools = tools && tools.length > 0;
-  const showReasoning =
-    (!!reasoning && reasoning.content?.trim() !== '') || (!reasoning && isReasoning);
-
-  if (error && (content === LOADING_FLAT || !content))
-    return (
-      <ErrorContent
-        error={
-          errorContent && error && (content === LOADING_FLAT || !content) ? errorContent : undefined
-        }
-        id={id}
-      />
-    );
+interface ContentBlockProps extends AssistantContentBlock {
+  disableEditing?: boolean;
+}
+
+const ContentBlock = memo<ContentBlockProps>(
+  ({ id, tools, content, reasoning, error, disableEditing }) => {
+    const errorContent = useErrorContent(error);
+    const isReasoning = useConversationStore(messageStateSelectors.isMessageInReasoning(id));
+    const hasTools = tools && tools.length > 0;
+    const showReasoning =
+      (!!reasoning && reasoning.content?.trim() !== '') || (!reasoning && isReasoning);
 
-  return (
-    <Flexbox gap={8} id={id}>
-      {showReasoning && <Reasoning {...reasoning} id={id} />}
+    if (error && (content === LOADING_FLAT || !content))
+      return <ErrorContent error={errorContent} id={id} />;
 
-      {/* Content - markdown text */}
-      <MessageContent content={content} hasTools={hasTools} id={id} />
+    return (
+      <Flexbox gap={8} id={id}>
+        {showReasoning && <Reasoning {...reasoning} id={id} />}
+
+        {/* Content - markdown text */}
+        <MessageContent content={content} hasTools={hasTools} id={id} />
 
-      {/* Tools */}
-      {hasTools && <Tools messageId={id} tools={tools} />}
-    </Flexbox>
-  );
-});
+        {/* Tools */}
+        {hasTools && <Tools disableEditing={disableEditing} messageId={id} tools={tools} />}
+      </Flexbox>
+    );
+  },
+);
 
 export default ContentBlock;

package/src/features/Conversation/Messages/Supervisor/components/Group.tsx

@@ -29,7 +29,7 @@ interface GroupChildrenProps {
   messageIndex: number;
 }
 
-const Group = memo<GroupChildrenProps>(({ blocks, id, content }) => {
+const Group = memo<GroupChildrenProps>(({ blocks, id, content, disableEditing }) => {
   const isCollapsed = useConversationStore(messageStateSelectors.isMessageCollapsed(id));
   const contextValue = useMemo(() => ({ assistantGroupId: id }), [id]);
 
@@ -46,7 +46,9 @@ const Group = memo<GroupChildrenProps>(({ blocks, id, content }) => {
     <MessageAggregationContext value={contextValue}>
       <Flexbox className={styles.container} gap={8}>
         {blocks.map((item) => {
-          return <ContentBlock {...item} key={id + '.' + item.id} />;
+          return (
+            <ContentBlock {...item} disableEditing={disableEditing} key={id + '.' + item.id} />
+          );
         })}
       </Flexbox>
     </MessageAggregationContext>

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

@@ -20,6 +20,7 @@ const Render = dynamic(() => import('../../AssistantGroup/Tool/Render'), {
 export interface InspectorProps {
   apiName: string;
   arguments?: string;
+  disableEditing?: boolean;
   identifier: string;
   index: number;
   messageId: string;
@@ -32,7 +33,7 @@ export interface InspectorProps {
  * Tool message component - adapts Tool message data to use AssistantGroup/Tool components
  */
 const Tool = memo<InspectorProps>(
-  ({ arguments: requestArgs, apiName, messageId, toolCallId, index, identifier, type }) => {
+  ({ arguments: requestArgs, apiName, disableEditing, messageId, toolCallId, index, identifier, type }) => {
     const [showDebug, setShowDebug] = useState(false);
     const [showPluginRender, setShowPluginRender] = useState(false);
     const [expand, setExpand] = useState(true);
@@ -66,16 +67,18 @@ const Tool = memo<InspectorProps>(
       >
         <AccordionItem
           action={
-            <Actions
-              assistantMessageId={messageId}
-              handleExpand={(expand) => setExpand(!!expand)}
-              identifier={identifier}
-              setShowDebug={setShowDebug}
-              setShowPluginRender={setShowPluginRender}
-              showCustomPluginRender={false}
-              showDebug={showDebug}
-              showPluginRender={showPluginRender}
-            />
+            !disableEditing && (
+              <Actions
+                assistantMessageId={messageId}
+                handleExpand={(expand) => setExpand(!!expand)}
+                identifier={identifier}
+                setShowDebug={setShowDebug}
+                setShowPluginRender={setShowPluginRender}
+                showCustomPluginRender={false}
+                showDebug={showDebug}
+                showPluginRender={showPluginRender}
+              />
+            )
           }
           itemKey={'tool'}
           paddingBlock={4}
@@ -83,7 +86,7 @@ const Tool = memo<InspectorProps>(
           title={<Inspectors apiName={apiName} identifier={identifier} result={result} />}
         >
           <Flexbox gap={8} paddingBlock={8}>
-            {showDebug && (
+            {showDebug && !disableEditing && (
               <Debug
                 apiName={apiName}
                 identifier={identifier}
@@ -96,6 +99,7 @@ const Tool = memo<InspectorProps>(
             <Render
               apiName={apiName}
               arguments={requestArgs}
+              disableEditing={disableEditing}
               identifier={identifier}
               messageId={messageId}
               result={result}

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

@@ -8,11 +8,12 @@ import { dataSelectors, useConversationStore } from '../../store';
 import Tool from './Tool';
 
 interface ToolMessageProps {
+  disableEditing?: boolean;
   id: string;
   index: number;
 }
 
-const ToolMessage = memo<ToolMessageProps>(({ id, index }) => {
+const ToolMessage = memo<ToolMessageProps>(({ disableEditing, id, index }) => {
   const { t } = useTranslation('plugin');
   const item = useConversationStore(dataSelectors.getDbMessageById(id), isEqual) as UIChatMessage;
   const deleteToolMessage = useConversationStore((s) => s.deleteToolMessage);
@@ -29,17 +30,25 @@ const ToolMessage = memo<ToolMessageProps>(({ id, index }) => {
 
   return (
     <Flexbox gap={4} paddingBlock={12}>
-      <Alert
-        action={
-          <Button loading={loading} onClick={handleDelete} size={'small'} type={'primary'}>
-            {t('inspector.delete')}
-          </Button>
-        }
-        title={t('inspector.orphanedToolCall')}
-        type={'secondary'}
-      />
+      {!disableEditing && (
+        <Alert
+          action={
+            <Button loading={loading} onClick={handleDelete} size={'small'} type={'primary'}>
+              {t('inspector.delete')}
+            </Button>
+          }
+          title={t('inspector.orphanedToolCall')}
+          type={'secondary'}
+        />
+      )}
       {item.plugin && (
-        <Tool {...item.plugin} index={index} messageId={id} toolCallId={item.tool_call_id!} />
+        <Tool
+          {...item.plugin}
+          disableEditing={disableEditing}
+          index={index}
+          messageId={id}
+          toolCallId={item.tool_call_id!}
+        />
       )}
     </Flexbox>
   );

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

@@ -158,7 +158,7 @@ const MessageItem = memo<MessageItemProps>(
         }
 
         case 'tool': {
-          return <ToolMessage id={id} index={index} />;
+          return <ToolMessage disableEditing={disableEditing} id={id} index={index} />;
         }
       }
 

package/src/features/Conversation/store/slices/data/action.test.ts

@@ -505,6 +505,48 @@ describe('DataSlice', () => {
       );
     });
 
+    it('should not fetch when topicId is null (new conversation state)', () => {
+      const store = createStore({
+        context: { agentId: 'test-session', topicId: null, threadId: null },
+      });
+
+      store.getState().useFetchMessages({
+        agentId: 'test-session',
+        topicId: null,
+        threadId: null,
+      });
+
+      // SWR should be called with null key when topicId is null
+      // This prevents fetching empty data that would overwrite local optimistic updates
+      expect(vi.mocked(useClientDataSWRWithSync)).toHaveBeenCalledWith(
+        null,
+        expect.any(Function),
+        expect.any(Object),
+      );
+
+      // messageService.getMessages should NOT be called
+      expect(messageService.getMessages).not.toHaveBeenCalled();
+    });
+
+    it('should not fetch when topicId is undefined (new conversation state)', () => {
+      const store = createStore({
+        context: { agentId: 'test-session', topicId: null, threadId: null },
+      });
+
+      store.getState().useFetchMessages({
+        agentId: 'test-session',
+        topicId: undefined as any,
+        threadId: null,
+      });
+
+      // SWR should be called with null key when topicId is undefined
+      expect(vi.mocked(useClientDataSWRWithSync)).toHaveBeenCalledWith(
+        null,
+        expect.any(Function),
+        expect.any(Object),
+      );
+    });
+
     it('should use different SWR keys for different threadIds', () => {
       const store1 = createStore({
         context: { agentId: 'session-1', topicId: 'topic-1', threadId: 'thread-1' },

package/src/features/Conversation/store/slices/data/action.ts

@@ -103,13 +103,15 @@ export const dataSlice: StateCreator<
   useFetchMessages: (context, skipFetch) => {
     // When skipFetch is true, SWR key is null - no fetch occurs
     // This is used when external messages are provided (e.g., creating new thread)
-    const shouldFetch = !skipFetch && !!context.agentId;
+    // Also skip fetch when topicId is null (new conversation state) - there's no server data,
+    // only local optimistic updates. Fetching would return empty array and overwrite local data.
+    const shouldFetch = !skipFetch && !!context.agentId && !!context.topicId;
 
     return useClientDataSWRWithSync<UIChatMessage[]>(
       shouldFetch ? ['CONVERSATION_FETCH_MESSAGES', context] : null,
 
       async () => {
-        return messageService.getMessages(context as any);
+        return messageService.getMessages(context);
       },
       {
         onData: (data) => {

package/src/features/Portal/GroupThread/Header/index.tsx

@@ -12,10 +12,10 @@ import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
 const Header = memo(() => {
-  const togglePortal = useChatStore((s) => s.togglePortal);
+  const clearPortalStack = useChatStore((s) => s.clearPortalStack);
   const close = () => {
     useAgentGroupStore.setState({ activeThreadAgentId: '' });
-    togglePortal(false);
+    clearPortalStack();
   };
   const activeThreadAgentId = useAgentGroupStore((s) => s.activeThreadAgentId);
 

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

@@ -15,9 +15,9 @@ const md = css`
 `;
 
 const MessageDetailBody = () => {
-  const [messageDetailId, togglePortal] = useChatStore((s) => [
+  const [messageDetailId, clearPortalStack] = useChatStore((s) => [
     chatPortalSelectors.messageDetailId(s),
-    s.togglePortal,
+    s.clearPortalStack,
   ]);
 
   const message = useChatStore(dbMessageSelectors.getDbMessageById(messageDetailId || ''), isEqual);
@@ -26,7 +26,7 @@ const MessageDetailBody = () => {
 
   useEffect(() => {
     if (!message) {
-      togglePortal(false);
+      clearPortalStack();
     }
   }, [message]);
 

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

@@ -10,10 +10,10 @@ import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors } from '@/store/chat/selectors';
 
 const Header = memo<{ title: ReactNode }>(({ title }) => {
-  const [canGoBack, goBack, togglePortal] = useChatStore((s) => [
+  const [canGoBack, goBack, clearPortalStack] = useChatStore((s) => [
     chatPortalSelectors.canGoBack(s),
     s.goBack,
-    s.togglePortal,
+    s.clearPortalStack,
   ]);
 
   return (
@@ -30,7 +30,7 @@ const Header = memo<{ title: ReactNode }>(({ title }) => {
         <ActionIcon
           icon={PanelRightCloseIcon}
           onClick={() => {
-            togglePortal(false);
+            clearPortalStack();
           }}
           size={DESKTOP_HEADER_ICON_SIZE}
         />

package/src/features/ProfileEditor/AgentTool.tsx

@@ -16,7 +16,7 @@ import PluginStore from '@/features/PluginStore';
 import { useCheckPluginsIsInstalled } from '@/hooks/useCheckPluginsIsInstalled';
 import { useFetchInstalledPlugins } from '@/hooks/useFetchInstalledPlugins';
 import { useAgentStore } from '@/store/agent';
-import { agentChatConfigSelectors, agentSelectors } from '@/store/agent/selectors';
+import { agentSelectors, chatConfigByIdSelectors } from '@/store/agent/selectors';
 import { serverConfigSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useToolStore } from '@/store/tool';
 import {
@@ -82,6 +82,11 @@ const KlavisIcon = memo<Pick<KlavisServerType, 'icon' | 'label'>>(({ icon, label
 });
 
 export interface AgentToolProps {
+  /**
+   * Optional agent ID to use instead of currentAgentConfig
+   * Used in group profile to specify which member's plugins to display
+   */
+  agentId?: string;
   /**
    * Whether to filter tools by availableInWeb property
    * @default false
@@ -100,15 +105,17 @@ export interface AgentToolProps {
 }
 
 const AgentTool = memo<AgentToolProps>(
-  ({ showWebBrowsing = false, filterAvailableInWeb = false, useAllMetaList = false }) => {
+  ({ agentId, showWebBrowsing = false, filterAvailableInWeb = false, useAllMetaList = false }) => {
     const { t } = useTranslation('setting');
-    const config = useAgentStore(agentSelectors.currentAgentConfig, isEqual);
+    const activeAgentId = useAgentStore((s) => s.activeAgentId);
+    const effectiveAgentId = agentId || activeAgentId || '';
+    const config = useAgentStore(agentSelectors.getAgentConfigById(effectiveAgentId), isEqual);
 
     // Plugin state management
     const plugins = config?.plugins || [];
 
-    const toggleAgentPlugin = useAgentStore((s) => s.toggleAgentPlugin);
-    const updateAgentChatConfig = useAgentStore((s) => s.updateAgentChatConfig);
+    const updateAgentConfigById = useAgentStore((s) => s.updateAgentConfigById);
+    const updateAgentChatConfigById = useAgentStore((s) => s.updateAgentChatConfigById);
     const installedPluginList = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
 
     // Use appropriate builtin list based on prop
@@ -117,8 +124,8 @@ const AgentTool = memo<AgentToolProps>(
       isEqual,
     );
 
-    // Web browsing uses searchMode instead of plugins array
-    const isSearchEnabled = useAgentStore(agentChatConfigSelectors.isAgentEnableSearch);
+    // Web browsing uses searchMode instead of plugins array - use byId selector
+    const isSearchEnabled = useAgentStore(chatConfigByIdSelectors.isEnableSearchById(effectiveAgentId));
 
     // Klavis 相关状态
     const allKlavisServers = useToolStore(klavisStoreSelectors.getServers, isEqual);
@@ -144,11 +151,34 @@ const AgentTool = memo<AgentToolProps>(
     // 使用 SWR 加载用户的 Klavis 集成（从数据库）
     useFetchUserKlavisServers(isKlavisEnabledInEnv);
 
-    // Toggle web browsing via searchMode
+    // Toggle web browsing via searchMode - use byId action
     const toggleWebBrowsing = useCallback(async () => {
+      if (!effectiveAgentId) return;
       const nextMode = isSearchEnabled ? 'off' : 'auto';
-      await updateAgentChatConfig({ searchMode: nextMode });
-    }, [isSearchEnabled, updateAgentChatConfig]);
+      await updateAgentChatConfigById(effectiveAgentId, { searchMode: nextMode });
+    }, [isSearchEnabled, updateAgentChatConfigById, effectiveAgentId]);
+
+    // Toggle a plugin - use byId action
+    const togglePlugin = useCallback(
+      async (pluginId: string, state?: boolean) => {
+        if (!effectiveAgentId) return;
+        const currentPlugins = plugins;
+        const hasPlugin = currentPlugins.includes(pluginId);
+        const shouldEnable = state !== undefined ? state : !hasPlugin;
+
+        let newPlugins: string[];
+        if (shouldEnable && !hasPlugin) {
+          newPlugins = [...currentPlugins, pluginId];
+        } else if (!shouldEnable && hasPlugin) {
+          newPlugins = currentPlugins.filter((id) => id !== pluginId);
+        } else {
+          return;
+        }
+
+        await updateAgentConfigById(effectiveAgentId, { plugins: newPlugins });
+      },
+      [effectiveAgentId, plugins, updateAgentConfigById],
+    );
 
     // Check if a tool is enabled (handles web browsing specially)
     const isToolEnabled = useCallback(
@@ -167,10 +197,10 @@ const AgentTool = memo<AgentToolProps>(
         if (showWebBrowsing && identifier === WEB_BROWSING_IDENTIFIER) {
           await toggleWebBrowsing();
         } else {
-          await toggleAgentPlugin(identifier);
+          await togglePlugin(identifier);
         }
       },
-      [toggleWebBrowsing, toggleAgentPlugin, showWebBrowsing],
+      [toggleWebBrowsing, togglePlugin, showWebBrowsing],
     );
 
     // Set default tab based on installed plugins (only on first load)
@@ -240,7 +270,7 @@ const AgentTool = memo<AgentToolProps>(
       [isKlavisEnabledInEnv, allKlavisServers],
     );
 
-    // Handle plugin remove via Tag close
+    // Handle plugin remove via Tag close - use byId actions
     const handleRemovePlugin =
       (
         pluginId: string | { enabled: boolean; identifier: string; settings: Record<string, any> },
@@ -250,9 +280,10 @@ const AgentTool = memo<AgentToolProps>(
         e.stopPropagation();
         const identifier = typeof pluginId === 'string' ? pluginId : pluginId?.identifier;
         if (showWebBrowsing && identifier === WEB_BROWSING_IDENTIFIER) {
-          await updateAgentChatConfig({ searchMode: 'off' });
+          if (!effectiveAgentId) return;
+          await updateAgentChatConfigById(effectiveAgentId, { searchMode: 'off' });
         } else {
-          toggleAgentPlugin(identifier, false);
+          await togglePlugin(identifier, false);
         }
       };
 
@@ -304,13 +335,13 @@ const AgentTool = memo<AgentToolProps>(
               label={item.title}
               onUpdate={async () => {
                 setUpdating(true);
-                await toggleAgentPlugin(item.identifier);
+                await togglePlugin(item.identifier);
                 setUpdating(false);
               }}
             />
           ),
         })),
-      [installedPluginList, plugins, toggleAgentPlugin],
+      [installedPluginList, plugins, togglePlugin],
     );
 
     // All tab items (市场 tab)
@@ -411,7 +442,7 @@ const AgentTool = memo<AgentToolProps>(
               label={item.title}
               onUpdate={async () => {
                 setUpdating(true);
-                await toggleAgentPlugin(item.identifier);
+                await togglePlugin(item.identifier);
                 setUpdating(false);
               }}
             />
@@ -435,7 +466,7 @@ const AgentTool = memo<AgentToolProps>(
       plugins,
       isToolEnabled,
       handleToggleTool,
-      toggleAgentPlugin,
+      togglePlugin,
       t,
     ]);