@lobehub/lobehub 2.0.0-next.272 → 2.0.0-next.274

package/src/app/[variants]/(main)/group/profile/features/ProfileHydration.tsx

@@ -1,15 +1,73 @@
-import { memo } from 'react';
+'use client';
 
-import { useRegisterFilesHotkeys, useSaveDocumentHotkey } from '@/hooks/useHotkeys';
+import { useEditor, useEditorState } from '@lobehub/editor/react';
+import { useUnmount } from 'ahooks';
+import { memo, useEffect, useRef } from 'react';
+import { createStoreUpdater } from 'zustand-utils';
 
-import { useProfileStore } from './store';
+import { useRegisterFilesHotkeys, useSaveDocumentHotkey } from '@/hooks/useHotkeys';
+import { parseAsString, useQueryState } from '@/hooks/useQueryParam';
+import { useChatStore } from '@/store/chat';
+import { useGroupProfileStore } from '@/store/groupProfile';
 
 const ProfileHydration = memo(() => {
-  // Initialize agent builder builtin agent
-  const flushSave = useProfileStore((s) => s.flushSave);
+  const editor = useEditor();
+  const editorState = useEditorState(editor);
+  const flushSave = useGroupProfileStore((s) => s.flushSave);
+
+  const storeUpdater = createStoreUpdater(useGroupProfileStore);
+
+  // Sync editor to store
+  storeUpdater('editor', editor);
+  // Sync editorState to store
+  storeUpdater('editorState', editorState);
+  // Sync tab query param to store
+  const [activeTabId] = useQueryState('tab', parseAsString.withDefault('group'));
+  storeUpdater('activeTabId', activeTabId);
+
+  // Bidirectional sync between URL query 'bt' and chatStore.activeTopicId
+  const [builderTopicId, setBuilderTopicId] = useQueryState('bt');
+  const activeTopicId = useChatStore((s) => s.activeTopicId);
+
+  // Track if the change came from URL to prevent sync loops
+  const isUrlChangeRef = useRef(false);
+
+  // Sync URL → Store (when URL changes)
+  useEffect(() => {
+    const urlTopicId = builderTopicId ?? undefined;
+    if (urlTopicId !== activeTopicId) {
+      isUrlChangeRef.current = true;
+      useChatStore.setState({ activeTopicId: urlTopicId });
+    }
+  }, [builderTopicId]);
+
+  // Sync Store → URL (when store changes, but not from URL)
+  useEffect(() => {
+    if (isUrlChangeRef.current) {
+      isUrlChangeRef.current = false;
+      return;
+    }
+    const urlTopicId = builderTopicId ?? undefined;
+    if (activeTopicId !== urlTopicId) {
+      setBuilderTopicId(activeTopicId ?? null);
+    }
+  }, [activeTopicId]);
+
+  // Register hotkeys
   useRegisterFilesHotkeys();
   useSaveDocumentHotkey(flushSave);
 
+  // Clear state when unmounting
+  useUnmount(() => {
+    useGroupProfileStore.setState({
+      activeTabId: 'group',
+      editor: undefined,
+      editorState: undefined,
+      saveStateMap: {},
+    });
+    useChatStore.setState({ activeTopicId: undefined });
+  });
+
   return null;
 });
 

package/src/app/[variants]/(main)/group/profile/index.tsx

@@ -7,58 +7,55 @@ import Loading from '@/components/Loading/BrandTextLoading';
 import WideScreenContainer from '@/features/WideScreenContainer';
 import { useAgentGroupStore } from '@/store/agentGroup';
 import { agentGroupSelectors } from '@/store/agentGroup/selectors';
+import { useGroupProfileStore } from '@/store/groupProfile';
 
 import AgentBuilder from './features/AgentBuilder';
+import GroupProfileSettings from './features/GroupProfile';
 import Header from './features/Header';
-import ProfileEditor from './features/ProfileEditor';
+import MemberProfile from './features/MemberProfile';
 import ProfileHydration from './features/ProfileHydration';
-import ProfileProvider from './features/ProfileProvider';
-import { useProfileStore } from './features/store';
 
 const ProfileArea = memo(() => {
-  const editor = useProfileStore((s) => s.editor);
+  const editor = useGroupProfileStore((s) => s.editor);
+  const activeTabId = useGroupProfileStore((s) => s.activeTabId);
   const isGroupsLoading = useAgentGroupStore(agentGroupSelectors.isGroupsInit);
 
+  const isGroupTab = activeTabId === 'group';
+
   return (
-    <>
-      <Flexbox flex={1} height={'100%'}>
-        {isGroupsLoading ? (
-          <Loading debugId="ProfileArea" />
-        ) : (
-          <>
-            <Header />
-            <Flexbox
-              height={'100%'}
-              horizontal
-              onClick={() => {
-                editor?.focus();
-              }}
-              style={{ cursor: 'text', display: 'flex', overflowY: 'auto', position: 'relative' }}
-              width={'100%'}
-            >
-              <WideScreenContainer>
-                <ProfileEditor />
-              </WideScreenContainer>
-            </Flexbox>
-          </>
-        )}
-      </Flexbox>
-      <Suspense fallback={null}>
-        <ProfileHydration />
-      </Suspense>
-    </>
+    <Flexbox flex={1} height={'100%'} style={{ minWidth: 0, overflow: 'hidden' }}>
+      {isGroupsLoading ? (
+        <Loading debugId="ProfileArea" />
+      ) : (
+        <>
+          <Header />
+          <Flexbox
+            height={'100%'}
+            horizontal
+            onClick={() => {
+              editor?.focus();
+            }}
+            style={{ cursor: 'text', display: 'flex', overflowY: 'auto', position: 'relative' }}
+            width={'100%'}
+          >
+            <WideScreenContainer>
+              {isGroupTab ? <GroupProfileSettings /> : <MemberProfile />}
+            </WideScreenContainer>
+          </Flexbox>
+        </>
+      )}
+    </Flexbox>
   );
 });
 
 const GroupProfile: FC = () => {
   return (
     <Suspense fallback={<Loading debugId="GroupProfile" />}>
-      <ProfileProvider>
-        <Flexbox height={'100%'} horizontal width={'100%'}>
-          <ProfileArea />
-          <AgentBuilder />
-        </Flexbox>
-      </ProfileProvider>
+      <ProfileHydration />
+      <Flexbox height={'100%'} horizontal width={'100%'}>
+        <ProfileArea />
+        <AgentBuilder />
+      </Flexbox>
     </Suspense>
   );
 };

package/src/app/[variants]/(mobile)/(home)/_layout/SessionHydration.tsx

@@ -22,7 +22,7 @@ const SessionHydration = memo(() => {
   });
 
   useStoreUpdater('activeId', session);
-  useChatStoreUpdater('activeId', session);
+  useChatStoreUpdater('activeAgentId', session);
 
   useEffect(() => {
     const unsubscribe = useSessionStore.subscribe(

package/src/app/[variants]/(mobile)/(home)/features/SessionListContent/List/Item/index.tsx

@@ -32,7 +32,7 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
 
   const [active] = useSessionStore((s) => [s.activeId === id]);
   const [loading] = useChatStore((s) => [
-    operationSelectors.isAgentRuntimeRunning(s) && id === s.activeId,
+    operationSelectors.isAgentRuntimeRunning(s) && id === s.activeAgentId,
   ]);
 
   const [pin, title, avatar, avatarBackground, updateAt, members, model, group, sessionType] =

package/src/features/AgentBuilder/index.tsx

@@ -5,6 +5,8 @@ import Loading from '@/components/Loading/BrandTextLoading';
 import RightPanel from '@/features/RightPanel';
 import { useAgentStore } from '@/store/agent';
 import { builtinAgentSelectors } from '@/store/agent/selectors';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
 
 import AgentBuilderConversation from './AgentBuilderConversation';
 import AgentBuilderProvider from './AgentBuilderProvider';
@@ -13,11 +15,24 @@ const AgentBuilder = memo(() => {
   const agentId = useAgentStore((s) => s.activeAgentId);
   const agentBuilderId = useAgentStore(builtinAgentSelectors.agentBuilderId);
 
+  const [width, updateSystemStatus] = useGlobalStore((s) => [
+    systemStatusSelectors.agentBuilderPanelWidth(s),
+    s.updateSystemStatus,
+  ]);
+
   const useInitBuiltinAgent = useAgentStore((s) => s.useInitBuiltinAgent);
   useInitBuiltinAgent(BUILTIN_AGENT_SLUGS.agentBuilder);
 
   return (
-    <RightPanel>
+    <RightPanel
+      defaultWidth={width}
+      onSizeChange={(size) => {
+        if (size?.width) {
+          const w = typeof size.width === 'string' ? Number.parseInt(size.width) : size.width;
+          if (!!w) updateSystemStatus({ agentBuilderPanelWidth: w });
+        }
+      }}
+    >
       {agentId && agentBuilderId ? (
         <AgentBuilderProvider agentId={agentBuilderId}>
           <AgentBuilderConversation agentId={agentBuilderId} />

package/src/features/Conversation/Messages/AssistantGroup/Tool/Inspector/StatusIndicator.tsx

@@ -1,10 +1,11 @@
 import { type ToolIntervention } from '@lobechat/types';
 import { Block, Icon, Tooltip } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
-import { Ban, Check, HandIcon, Loader2Icon, PauseIcon, X } from 'lucide-react';
+import { Ban, Check, HandIcon, PauseIcon, X } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
 import { LOADING_FLAT } from '@/const/message';
 
 interface StatusIndicatorProps {
@@ -43,7 +44,7 @@ const StatusIndicator = memo<StatusIndicatorProps>(({ intervention, result }) =>
   } else if (hasResult) {
     icon = <Icon color={cssVar.colorSuccess} icon={Check} />;
   } else {
-    icon = <Icon color={cssVar.colorTextDescription} icon={Loader2Icon} spin />;
+    icon = <NeuralNetworkLoading size={16} />;
   }
 
   return (

package/src/features/EditorCanvas/EditorCanvas.test.tsx

@@ -0,0 +1,206 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { type IEditor } from '@lobehub/editor';
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { EditorCanvas } from './EditorCanvas';
+
+// Mock DocumentIdMode
+vi.mock('./DocumentIdMode', () => ({
+  default: vi.fn(({ documentId }) => (
+    <div data-testid="document-id-mode">DocumentIdMode: {documentId}</div>
+  )),
+}));
+
+// Mock EditorDataMode
+vi.mock('./EditorDataMode', () => ({
+  default: vi.fn(({ editorData }) => (
+    <div data-testid="editor-data-mode">EditorDataMode: {editorData?.content}</div>
+  )),
+}));
+
+// Mock InternalEditor
+vi.mock('./InternalEditor', () => ({
+  default: vi.fn(() => <div data-testid="internal-editor">InternalEditor</div>),
+}));
+
+// Mock ErrorBoundary to pass through children
+vi.mock('./ErrorBoundary', () => ({
+  EditorErrorBoundary: vi.fn(({ children }) => <>{children}</>),
+}));
+
+describe('EditorCanvas', () => {
+  let mockEditor: IEditor;
+
+  beforeEach(() => {
+    mockEditor = {
+      getDocument: vi.fn(),
+      setDocument: vi.fn(),
+      focus: vi.fn(),
+    } as unknown as IEditor;
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  describe('mode selection', () => {
+    it('should render DocumentIdMode when documentId is provided', () => {
+      render(<EditorCanvas documentId="doc-123" editor={mockEditor} />);
+
+      expect(screen.getByTestId('document-id-mode')).toBeInTheDocument();
+      expect(screen.getByText('DocumentIdMode: doc-123')).toBeInTheDocument();
+      expect(screen.queryByTestId('editor-data-mode')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('internal-editor')).not.toBeInTheDocument();
+    });
+
+    it('should render EditorDataMode when editorData is provided', () => {
+      render(<EditorCanvas editor={mockEditor} editorData={{ content: 'test content' }} />);
+
+      expect(screen.getByTestId('editor-data-mode')).toBeInTheDocument();
+      expect(screen.getByText('EditorDataMode: test content')).toBeInTheDocument();
+      expect(screen.queryByTestId('document-id-mode')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('internal-editor')).not.toBeInTheDocument();
+    });
+
+    it('should render InternalEditor in basic mode (no documentId or editorData)', () => {
+      render(<EditorCanvas editor={mockEditor} />);
+
+      expect(screen.getByTestId('internal-editor')).toBeInTheDocument();
+      expect(screen.queryByTestId('document-id-mode')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('editor-data-mode')).not.toBeInTheDocument();
+    });
+
+    it('should return null in basic mode when editor is undefined', () => {
+      const { container } = render(<EditorCanvas editor={undefined} />);
+
+      expect(container.firstChild).toBeNull();
+    });
+  });
+
+  describe('mode priority', () => {
+    it('should prioritize documentId over editorData when both are provided', () => {
+      render(
+        <EditorCanvas
+          documentId="doc-123"
+          editor={mockEditor}
+          editorData={{ content: 'test content' }}
+        />,
+      );
+
+      expect(screen.getByTestId('document-id-mode')).toBeInTheDocument();
+      expect(screen.queryByTestId('editor-data-mode')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('props forwarding', () => {
+    it('should forward props to DocumentIdMode', async () => {
+      const onContentChange = vi.fn();
+      const onInit = vi.fn();
+
+      render(
+        <EditorCanvas
+          autoSave={false}
+          documentId="doc-123"
+          editor={mockEditor}
+          onContentChange={onContentChange}
+          onInit={onInit}
+          placeholder="Custom placeholder"
+          sourceType="notebook"
+        />,
+      );
+
+      const DocumentIdMode = await vi.importMock('./DocumentIdMode');
+      const lastCall = (DocumentIdMode.default as ReturnType<typeof vi.fn>).mock.calls.at(-1);
+
+      expect(lastCall?.[0]).toMatchObject({
+        autoSave: false,
+        documentId: 'doc-123',
+        editor: mockEditor,
+        onContentChange,
+        onInit,
+        placeholder: 'Custom placeholder',
+        sourceType: 'notebook',
+      });
+    });
+
+    it('should forward props to EditorDataMode', async () => {
+      const onContentChange = vi.fn();
+      const onInit = vi.fn();
+      const editorData = { content: 'test', editorData: { blocks: [] } };
+
+      render(
+        <EditorCanvas
+          editor={mockEditor}
+          editorData={editorData}
+          onContentChange={onContentChange}
+          onInit={onInit}
+          placeholder="Custom placeholder"
+        />,
+      );
+
+      const EditorDataMode = await vi.importMock('./EditorDataMode');
+      const lastCall = (EditorDataMode.default as ReturnType<typeof vi.fn>).mock.calls.at(-1);
+
+      expect(lastCall?.[0]).toMatchObject({
+        editor: mockEditor,
+        editorData,
+        onContentChange,
+        onInit,
+        placeholder: 'Custom placeholder',
+      });
+    });
+
+    it('should forward props to InternalEditor in basic mode', async () => {
+      const onContentChange = vi.fn();
+      const onInit = vi.fn();
+
+      render(
+        <EditorCanvas
+          editor={mockEditor}
+          floatingToolbar={false}
+          onContentChange={onContentChange}
+          onInit={onInit}
+          placeholder="Custom placeholder"
+        />,
+      );
+
+      const InternalEditor = await vi.importMock('./InternalEditor');
+      const lastCall = (InternalEditor.default as ReturnType<typeof vi.fn>).mock.calls.at(-1);
+
+      expect(lastCall?.[0]).toMatchObject({
+        editor: mockEditor,
+        floatingToolbar: false,
+        onContentChange,
+        onInit,
+        placeholder: 'Custom placeholder',
+      });
+    });
+  });
+
+  describe('error boundary wrapping', () => {
+    it('should wrap DocumentIdMode with ErrorBoundary', async () => {
+      render(<EditorCanvas documentId="doc-123" editor={mockEditor} />);
+
+      const ErrorBoundary = await vi.importMock('./ErrorBoundary');
+      expect(ErrorBoundary.EditorErrorBoundary).toHaveBeenCalled();
+    });
+
+    it('should wrap EditorDataMode with ErrorBoundary', async () => {
+      render(<EditorCanvas editor={mockEditor} editorData={{ content: 'test' }} />);
+
+      const ErrorBoundary = await vi.importMock('./ErrorBoundary');
+      expect(ErrorBoundary.EditorErrorBoundary).toHaveBeenCalled();
+    });
+
+    it('should wrap InternalEditor with ErrorBoundary in basic mode', async () => {
+      render(<EditorCanvas editor={mockEditor} />);
+
+      const ErrorBoundary = await vi.importMock('./ErrorBoundary');
+      expect(ErrorBoundary.EditorErrorBoundary).toHaveBeenCalled();
+    });
+  });
+});

package/src/features/EditorCanvas/EditorDataMode.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { type IEditor } from '@lobehub/editor';
-import { memo, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import type { EditorCanvasProps } from './EditorCanvas';
@@ -12,37 +12,70 @@ export interface EditorDataModeProps extends EditorCanvasProps {
   editorData: NonNullable<EditorCanvasProps['editorData']>;
 }
 
+const loadEditorContent = (
+  editorInstance: IEditor,
+  editorData: EditorDataModeProps['editorData'],
+): boolean => {
+  const hasValidEditorData =
+    editorData.editorData &&
+    typeof editorData.editorData === 'object' &&
+    Object.keys(editorData.editorData as object).length > 0;
+
+  if (hasValidEditorData) {
+    editorInstance.setDocument('json', JSON.stringify(editorData.editorData));
+    return true;
+  } else if (editorData.content?.trim()) {
+    editorInstance.setDocument('markdown', editorData.content, { keepId: true });
+    return true;
+  }
+  return false;
+};
+
 /**
  * EditorCanvas with editorData mode - uses provided data directly
  */
 const EditorDataMode = memo<EditorDataModeProps>(
-  ({ editor, editorData, onContentChange, style, ...editorProps }) => {
+  ({ editor, editorData, onContentChange, onInit, style, ...editorProps }) => {
     const { t } = useTranslation('file');
-    const [isInitialized, setIsInitialized] = useState(false);
+    const isEditorReadyRef = useRef(false);
+    // Track loaded content to support re-loading when data changes
+    const loadedContentRef = useRef<string | undefined>(undefined);
 
-    // Load content into editor on mount
-    useEffect(() => {
-      if (!editor || isInitialized) return;
+    // Check if content has actually changed
+    const hasDataChanged = loadedContentRef.current !== editorData.content;
 
-      const hasValidEditorData =
-        editorData.editorData &&
-        typeof editorData.editorData === 'object' &&
-        Object.keys(editorData.editorData as object).length > 0;
+    const handleInit = useCallback(
+      (editorInstance: IEditor) => {
+        isEditorReadyRef.current = true;
 
-      try {
-        if (hasValidEditorData) {
-          editor.setDocument('json', JSON.stringify(editorData.editorData));
-        } else if (editorData.content?.trim()) {
-          editor.setDocument('markdown', editorData.content, { keepId: true });
-        } else {
-          console.error('[EditorCanvas] load content error:', editorData);
+        // Try to load content if editorData is available and hasn't been loaded yet
+        if (hasDataChanged) {
+          try {
+            if (loadEditorContent(editorInstance, editorData)) {
+              loadedContentRef.current = editorData.content;
+            }
+          } catch (err) {
+            console.error('[EditorCanvas] Failed to load content:', err);
+          }
         }
 
-        setIsInitialized(true);
+        onInit?.(editorInstance);
+      },
+      [editorData, hasDataChanged, onInit],
+    );
+
+    // Load content when editorData changes after editor is ready
+    useEffect(() => {
+      if (!editor || !isEditorReadyRef.current || !hasDataChanged) return;
+
+      try {
+        if (loadEditorContent(editor, editorData)) {
+          loadedContentRef.current = editorData.content;
+        }
       } catch (err) {
         console.error('[EditorCanvas] Failed to load content:', err);
       }
-    }, [editorData, editor, isInitialized]);
+    }, [editor, editorData, hasDataChanged]);
 
     if (!editor) return null;
 
@@ -51,6 +84,7 @@ const EditorDataMode = memo<EditorDataModeProps>(
         <InternalEditor
           editor={editor}
           onContentChange={onContentChange}
+          onInit={handleInit}
           placeholder={editorProps.placeholder || t('pageEditor.editorPlaceholder')}
           {...editorProps}
         />

package/src/features/EditorModal/index.tsx

@@ -3,7 +3,7 @@ import { Modal, ModalProps, createRawModal } from '@lobehub/ui';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import EditorCanvas from './EditorCanvas';
+import { EditorCanvas } from '@/features/EditorCanvas';
 
 interface EditorModalProps extends ModalProps {
   onConfirm?: (value: string) => Promise<void>;
@@ -43,7 +43,7 @@ export const EditorModal = memo<EditorModalProps>(({ value, onConfirm, ...rest }
       width={'min(90vw, 920px)'}
       {...rest}
     >
-      <EditorCanvas defaultValue={value} editor={editor} />
+      <EditorCanvas editor={editor} editorData={{ content: value }} />
     </Modal>
   );
 });

package/src/features/NavPanel/components/SessionHydration.tsx

@@ -22,7 +22,7 @@ const SessionHydration = memo(() => {
   });
 
   useStoreUpdater('activeId', session);
-  useChatStoreUpdater('activeId', session);
+  useChatStoreUpdater('activeAgentId', session);
 
   useEffect(() => {
     const unsubscribe = useSessionStore.subscribe(

package/src/features/ShareModal/ShareImage/ChatList/index.tsx

@@ -8,7 +8,7 @@ import { chatSelectors } from '@/store/chat/selectors';
 const ChatList = memo(() => {
   const ids = useChatStore(chatSelectors.mainDisplayChatIDs);
   const messages = useChatStore(chatSelectors.activeBaseChats);
-  const agentId = useChatStore((s) => s.activeId);
+  const agentId = useChatStore((s) => s.activeAgentId);
   const topicId = useChatStore((s) => s.activeTopicId);
 
   return (

package/src/features/ShareModal/SharePdf/index.tsx

@@ -75,7 +75,7 @@ const SharePdf = memo((props: { message?: UIChatMessage }) => {
   const [systemRole] = useAgentStore((s) => [agentSelectors.currentAgentSystemRole(s)]);
   const messages = useChatStore(chatSelectors.activeBaseChats, isEqual);
   const topic = useChatStore(topicSelectors.currentActiveTopic, isEqual);
-  const activeId = useChatStore((s) => s.activeId);
+  const activeId = useChatStore((s) => s.activeAgentId);
   const topicId = useChatStore((s) => s.activeTopicId);
 
   const title = topic?.title || t('shareModal.exportTitle');