@lobehub/lobehub 2.0.0-next.273 → 2.0.0-next.275

package/src/app/[variants]/(main)/settings/proxy/index.tsx

@@ -9,9 +9,7 @@ const Page = () => {
   return (
     <>
       <SettingHeader title={t('tab.proxy')} />
-      <div style={{ maxWidth: '1024px', width: '100%' }}>
-        <ProxyForm />
-      </div>
+      <ProxyForm />
     </>
   );
 };

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/Conversation/Messages/User/useMarkdown.tsx

@@ -30,6 +30,7 @@ export const useMarkdown = (id: string): Partial<MarkdownProps> => {
     () =>
       ({
         components: Object.fromEntries(
+          // @ts-expect-error
           markdownElements.map((element) => {
             const Component = element.Component;
             return [element.tag, (props: any) => <Component {...props} id={id} />];

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/PageEditor/EditorCanvas/useAskCopilotItem.tsx

@@ -1,12 +1,13 @@
 'use client';
 
+import { DEFAULT_INBOX_AVATAR } from '@lobechat/const';
 import { nanoid } from '@lobechat/utils';
 import { HIDE_TOOLBAR_COMMAND, type IEditor } from '@lobehub/editor';
 import { type ChatInputActionsProps } from '@lobehub/editor/react';
-import { Block } from '@lobehub/ui';
+import { Avatar, Block } from '@lobehub/ui';
 import { createStaticStyles, cssVar } from 'antd-style';
-import { BotIcon } from 'lucide-react';
 import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useFileStore } from '@/store/file';
 import { useGlobalStore } from '@/store/global';
@@ -23,11 +24,14 @@ const styles = createStaticStyles(({ css }) => ({
 }));
 
 export const useAskCopilotItem = (editor: IEditor | undefined): ChatInputActionsProps['items'] => {
+  const { t } = useTranslation('common');
   const addSelectionContext = useFileStore((s) => s.addChatContextSelection);
 
   return useMemo(() => {
     if (!editor) return [];
 
+    const label = t('cmdk.askLobeAI');
+
     return [
       {
         children: (
@@ -82,14 +86,14 @@ export const useAskCopilotItem = (editor: IEditor | undefined): ChatInputActions
             paddingInline={12}
             variant="borderless"
           >
-            <BotIcon />
-            <span>Ask Copilot</span>
+            <Avatar avatar={DEFAULT_INBOX_AVATAR} shape="square" size={16} />
+            <span>{label}</span>
           </Block>
         ),
         key: 'ask-copilot',
-        label: 'Ask Copilot',
+        label,
         onClick: () => {},
       },
     ];
-  }, [addSelectionContext, editor]);
+  }, [addSelectionContext, editor, t]);
 };

package/src/features/PageEditor/Header/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { ActionIcon, Avatar, Dropdown, Text } from '@lobehub/ui';
-import { ArrowLeftIcon, BotMessageSquareIcon, MoreHorizontal } from 'lucide-react';
+import { ActionIcon, Avatar, DropdownMenu, Text } from '@lobehub/ui';
+import { ArrowLeftIcon, MoreHorizontal } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -49,18 +49,20 @@ const Header = memo(() => {
       }
       right={
         <>
-          <ToggleRightPanelButton icon={BotMessageSquareIcon} showActive={true} />
           {/* Three-dot menu */}
-          <Dropdown
-            menu={{
-              items: menuItems,
-              style: { minWidth: 200 },
-            }}
+          <DropdownMenu
+            items={menuItems}
+            nativeButton={false}
             placement="bottomRight"
-            trigger={['click']}
+            popupProps={{
+              style: {
+                minWidth: 200,
+              },
+            }}
           >
             <ActionIcon icon={MoreHorizontal} size={DESKTOP_HEADER_ICON_SIZE} />
-          </Dropdown>
+          </DropdownMenu>
+          <ToggleRightPanelButton hideWhenExpanded showActive={false} />
         </>
       }
     />

package/src/features/PageEditor/Header/useMenu.tsx

@@ -1,5 +1,5 @@
-import { Flexbox, Icon } from '@lobehub/ui';
-import { App, Switch } from 'antd';
+import { type DropdownItem, Icon } from '@lobehub/ui';
+import { App } from 'antd';
 import { cssVar, useResponsive } from 'antd-style';
 import dayjs from 'dayjs';
 import { CopyPlus, Download, Link2, Trash2 } from 'lucide-react';
@@ -75,25 +75,17 @@ export const useMenu = (): { menuItems: any[] } => {
     }
   };
 
-  const menuItems = useMemo(
-    () => [
+  const menuItems = useMemo<DropdownItem[]>(() => {
+    const items: DropdownItem[] = [
       ...(showViewModeSwitch
         ? [
             {
+              checked: wideScreen,
               key: 'full-width',
-              label: (
-                <Flexbox align="center" horizontal justify="space-between">
-                  <span>{t('viewMode.fullWidth', { ns: 'chat' })}</span>
-                  <Switch
-                    checked={wideScreen}
-                    onChange={toggleWideScreen}
-                    onClick={(checked, event) => {
-                      event.stopPropagation();
-                    }}
-                    size="small"
-                  />
-                </Flexbox>
-              ),
+              label: t('viewMode.fullWidth', { ns: 'chat' }),
+              onCheckedChange: toggleWideScreen,
+
+              type: 'checkbox' as const,
             },
             {
               type: 'divider' as const,
@@ -140,38 +132,43 @@ export const useMenu = (): { menuItems: any[] } => {
         key: 'export',
         label: t('pageEditor.menu.export'),
       },
-      {
-        type: 'divider' as const,
-      },
-      {
-        disabled: true,
-        key: 'page-info',
-        label: (
-          <div style={{ color: cssVar.colorTextTertiary, fontSize: 12, lineHeight: 1.6 }}>
-            <div>
-              {lastUpdatedTime
-                ? t('pageEditor.editedAt', {
-                    time: dayjs(lastUpdatedTime).format('MMMM D, YYYY [at] h:mm A'),
-                  })
-                : ''}
+    ];
+
+    if (lastUpdatedTime) {
+      items.push(
+        {
+          type: 'divider' as const,
+        },
+        {
+          disabled: true,
+          key: 'page-info',
+          label: (
+            <div style={{ color: cssVar.colorTextTertiary, fontSize: 12, lineHeight: 1.6 }}>
+              <div>
+                {lastUpdatedTime
+                  ? t('pageEditor.editedAt', {
+                      time: dayjs(lastUpdatedTime).format('MMMM D, YYYY [at] h:mm A'),
+                    })
+                  : ''}
+              </div>
             </div>
-          </div>
-        ),
-      },
-    ],
-    [
-      lastUpdatedTime,
-      storeApi,
-      t,
-      message,
-      modal,
-      wideScreen,
-      toggleWideScreen,
-      showViewModeSwitch,
-      handleDuplicate,
-      handleExportMarkdown,
-    ],
-  );
+          ),
+        },
+      );
+    }
+    return items;
+  }, [
+    lastUpdatedTime,
+    storeApi,
+    t,
+    message,
+    modal,
+    wideScreen,
+    toggleWideScreen,
+    showViewModeSwitch,
+    handleDuplicate,
+    handleExportMarkdown,
+  ]);
 
   return { menuItems };
 };

package/src/features/RightPanel/ToggleRightPanelButton.tsx

@@ -15,6 +15,7 @@ import { HotkeyEnum } from '@/types/hotkey';
 export const TOGGLE_BUTTON_ID = 'toggle_right_panel_button';
 
 interface ToggleRightPanelButtonProps {
+  hideWhenExpanded?: boolean;
   icon?: ActionIconProps['icon'];
   showActive?: boolean;
   size?: ActionIconProps['size'];
@@ -22,7 +23,7 @@ interface ToggleRightPanelButtonProps {
 }
 
 const ToggleRightPanelButton = memo<ToggleRightPanelButtonProps>(
-  ({ title, showActive, icon, size }) => {
+  ({ title, showActive, icon, hideWhenExpanded, size }) => {
     const [expand, togglePanel] = useGlobalStore((s) => [
       systemStatusSelectors.showRightPanel(s),
       s.toggleRightPanel,
@@ -31,6 +32,7 @@ const ToggleRightPanelButton = memo<ToggleRightPanelButtonProps>(
 
     const { t } = useTranslation(['chat', 'hotkey']);
 
+    if (hideWhenExpanded && expand) return null;
     return (
       <ActionIcon
         active={showActive ? expand : undefined}