@lobehub/lobehub 2.0.0-next.254 → 2.0.0-next.256

package/src/app/[variants]/(main)/group/features/Portal/_layout/Mobile.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 import { PortalContent } from '@/features/Portal/router';
 import { useChatStore } from '@/store/chat';
+import { portalThreadSelectors } from '@/store/chat/selectors';
 
 const styles = createStaticStyles(({ css, cssVar }) => ({
   container: css`
@@ -17,7 +18,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 const Layout = () => {
   const [showMobilePortal, isPortalThread, togglePortal] = useChatStore((s) => [
     s.showPortal,
-    !!s.portalThreadId,
+    portalThreadSelectors.showThread(s),
     s.togglePortal,
   ]);
   const { t } = useTranslation('portal');

package/src/app/[variants]/(main)/home/_layout/hooks/useCreateMenuItems.tsx

@@ -13,8 +13,8 @@ import { DEFAULT_CHAT_GROUP_CHAT_CONFIG } from '@/const/settings';
 import { type GroupMemberConfig, chatGroupService } from '@/services/chatGroup';
 import { useAgentStore } from '@/store/agent';
 import { useAgentGroupStore } from '@/store/agentGroup';
-import { useFileStore } from '@/store/file';
 import { useHomeStore } from '@/store/home';
+import { usePageStore } from '@/store/page';
 
 interface HostConfig {
   model?: string;
@@ -45,7 +45,7 @@ export const useCreateMenuItems = () => {
     s.switchToGroup,
   ]);
   const [createGroup, loadGroups] = useAgentGroupStore((s) => [s.createGroup, s.loadGroups]);
-  const createNewPage = useFileStore((s) => s.createNewPage);
+  const createNewPage = usePageStore((s) => s.createNewPage);
 
   const [isCreatingGroup, setIsCreatingGroup] = useState(false);
   const [isCreatingSessionGroup, setIsCreatingSessionGroup] = useState(false);

package/src/app/[variants]/(main)/page/{features/PageTitle → PageTitle}/index.tsx

@@ -11,4 +11,3 @@ const Title = memo(() => {
 Title.displayName = 'PageTitle';
 
 export default Title;
-

package/src/app/[variants]/(main)/page/[id]/index.tsx

@@ -1 +1,43 @@
-export { default } from '../index';
+'use client';
+
+import { useUnmount } from 'ahooks';
+import { Suspense, memo } from 'react';
+import { useParams } from 'react-router-dom';
+import { createStoreUpdater } from 'zustand-utils';
+
+import Loading from '@/components/Loading/BrandTextLoading';
+import PageExplorer from '@/features/PageExplorer';
+import { usePageStore } from '@/store/page';
+import { getIdFromIdentifier } from '@/utils/identifier';
+
+import PageTitle from '../PageTitle';
+
+/**
+ * Pages route - dedicated page for managing documents/pages
+ * This is extracted from the /resource route to have its own dedicated space
+ */
+const PagesPage = memo(() => {
+  const storeUpdater = createStoreUpdater(usePageStore);
+  const params = useParams<{ id: string }>();
+
+  const pageId = getIdFromIdentifier(params.id ?? '', 'docs');
+  storeUpdater('selectedPageId', pageId);
+
+  // Clear activeAgentId when unmounting (leaving chat page)
+  useUnmount(() => {
+    usePageStore.setState({ selectedPageId: undefined });
+  });
+
+  return (
+    <>
+      <PageTitle />
+      <Suspense fallback={<Loading debugId="PagesPage" />}>
+        <PageExplorer pageId={pageId} />
+      </Suspense>
+    </>
+  );
+});
+
+PagesPage.displayName = 'PagesPage';
+
+export default PagesPage;

package/src/app/[variants]/(main)/page/_layout/Body/AllPagesDrawer/Content.tsx

@@ -6,7 +6,7 @@ import { VList, type VListHandle } from 'virtua';
 
 import SkeletonList from '@/features/NavPanel/components/SkeletonList';
 import PageEmpty from '@/features/PageEmpty';
-import { documentSelectors, useFileStore } from '@/store/file';
+import { pageSelectors, usePageStore } from '@/store/page';
 import { type LobeDocument } from '@/types/document';
 
 import Item from '../List/Item';
@@ -19,27 +19,27 @@ const Content = memo<ContentProps>(({ searchKeyword }) => {
   const virtuaRef = useRef<VListHandle>(null);
   const fetchedCountRef = useRef(-1);
 
-  const [hasMore, isLoadingMore, loadMoreDocuments] = useFileStore((s) => [
-    documentSelectors.hasMoreDocuments(s),
-    documentSelectors.isLoadingMoreDocuments(s),
+  const [hasMore, isLoadingMore, loadMoreDocuments] = usePageStore((s) => [
+    pageSelectors.hasMoreDocuments(s),
+    pageSelectors.isLoadingMoreDocuments(s),
     s.loadMoreDocuments,
   ]);
 
-  const allFilteredPages = useFileStore(documentSelectors.getFilteredPages);
+  const allFilteredDocuments = usePageStore(pageSelectors.getFilteredDocuments);
 
   // Filter by search keyword
-  const displayPages = useMemo(() => {
-    if (!searchKeyword.trim()) return allFilteredPages;
+  const displayDocuments = useMemo(() => {
+    if (!searchKeyword.trim()) return allFilteredDocuments;
 
     const keyword = searchKeyword.toLowerCase();
-    return allFilteredPages.filter((page: LobeDocument) => {
-      const content = page.content?.toLowerCase() || '';
-      const title = page.title?.toLowerCase() || '';
+    return allFilteredDocuments.filter((doc: LobeDocument) => {
+      const content = doc.content?.toLowerCase() || '';
+      const title = doc.title?.toLowerCase() || '';
       return content.includes(keyword) || title.includes(keyword);
     });
-  }, [allFilteredPages, searchKeyword]);
+  }, [allFilteredDocuments, searchKeyword]);
 
-  const count = displayPages.length;
+  const count = displayDocuments.length;
   const isSearching = searchKeyword.trim().length > 0;
 
   // Handle scroll - use findItemIndex (official pattern)
@@ -74,9 +74,9 @@ const Content = memo<ContentProps>(({ searchKeyword }) => {
       ref={virtuaRef}
       style={{ height: '100%' }}
     >
-      {displayPages.map((page) => (
-        <Flexbox gap={1} key={page.id} padding={'4px 8px'}>
-          <Item pageId={page.id} />
+      {displayDocuments.map((doc) => (
+        <Flexbox gap={1} key={doc.id} padding={'4px 8px'}>
+          <Item pageId={doc.id} />
         </Flexbox>
       ))}
       {showLoading && (

package/src/app/[variants]/(main)/page/_layout/Body/List/Item/Editing.tsx

@@ -4,9 +4,9 @@ import { useTranslation } from 'react-i18next';
 
 import EmojiPicker from '@/components/EmojiPicker';
 import { useIsDark } from '@/hooks/useIsDark';
-import { useFileStore } from '@/store/file';
 import { useGlobalStore } from '@/store/global';
 import { globalGeneralSelectors } from '@/store/global/selectors';
+import { usePageStore } from '@/store/page';
 
 interface EditingProps {
   currentEmoji?: string;
@@ -20,7 +20,7 @@ const Editing = memo<EditingProps>(({ documentId, title, currentEmoji, toggleEdi
   const isDarkMode = useIsDark();
   const { t } = useTranslation('file');
 
-  const editing = useFileStore((s) => s.renamingPageId === documentId);
+  const editing = usePageStore((s) => s.renamingPageId === documentId);
 
   const [newTitle, setNewTitle] = useState(title);
   const [newEmoji, setNewEmoji] = useState(currentEmoji);
@@ -35,7 +35,7 @@ const Editing = memo<EditingProps>(({ documentId, title, currentEmoji, toggleEdi
         if (newTitle && title !== newTitle) updates.title = newTitle;
         if (newEmoji !== undefined && currentEmoji !== newEmoji) updates.emoji = newEmoji;
 
-        await useFileStore.getState().renamePage(documentId, updates.title || title, updates.emoji);
+        await usePageStore.getState().renamePage(documentId, updates.title || title, updates.emoji);
       } catch (error) {
         console.error('Failed to update page:', error);
       }

package/src/app/[variants]/(main)/page/_layout/Body/List/Item/index.tsx

@@ -4,7 +4,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import NavItem from '@/features/NavPanel/components/NavItem';
-import { documentSelectors, useFileStore } from '@/store/file';
+import { pageSelectors, usePageStore } from '@/store/page';
 
 import Actions from './Actions';
 import Editing from './Editing';
@@ -17,18 +17,13 @@ interface DocumentItemProps {
 
 const PageListItem = memo<DocumentItemProps>(({ pageId, className }) => {
   const { t } = useTranslation('file');
-  const [editing, selectedPageId, document] = useFileStore(
-    useCallback(
-      (s) => {
-        const doc = documentSelectors.getDocumentById(pageId)(s);
-        return [s.renamingPageId === pageId, s.selectedPageId, doc] as const;
-      },
-      [pageId],
-    ),
-  );
+  const [editing, selectedPageId, document] = usePageStore((s) => {
+    const doc = pageSelectors.getDocumentById(pageId)(s);
+    return [s.renamingPageId === pageId, s.selectedPageId, doc] as const;
+  });
 
-  const selectPage = useFileStore((s) => s.selectPage);
-  const setRenamingPageId = useFileStore((s) => s.setRenamingPageId);
+  const selectPage = usePageStore((s) => s.selectPage);
+  const setRenamingPageId = usePageStore((s) => s.setRenamingPageId);
 
   const active = selectedPageId === pageId;
   const title = document?.title || t('pageList.untitled');

package/src/app/[variants]/(main)/page/_layout/Body/List/Item/useDropdownMenu.tsx

@@ -4,7 +4,7 @@ import { Copy, CopyPlus, Pencil, Trash2 } from 'lucide-react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useFileStore } from '@/store/file';
+import { usePageStore } from '@/store/page';
 
 interface ActionProps {
   documentContent?: string;
@@ -19,8 +19,8 @@ export const useDropdownMenu = ({
 }: ActionProps): (() => MenuProps['items']) => {
   const { t } = useTranslation(['common', 'file']);
   const { message, modal } = App.useApp();
-  const removeDocument = useFileStore((s) => s.removeDocument);
-  const duplicateDocument = useFileStore((s) => s.duplicateDocument);
+  const removePage = usePageStore((s) => s.removePage);
+  const duplicatePage = usePageStore((s) => s.duplicatePage);
 
   const handleDelete = () => {
     modal.confirm({
@@ -30,7 +30,7 @@ export const useDropdownMenu = ({
       okText: t('delete'),
       onOk: async () => {
         try {
-          await removeDocument(pageId);
+          await removePage(pageId);
           message.success(t('pageEditor.deleteSuccess', { ns: 'file' }));
         } catch (error) {
           console.error('Failed to delete page:', error);
@@ -53,7 +53,7 @@ export const useDropdownMenu = ({
 
   const handleDuplicate = async () => {
     try {
-      await duplicateDocument(pageId);
+      await duplicatePage(pageId);
     } catch (error) {
       console.error('Failed to duplicate page:', error);
     }

package/src/app/[variants]/(main)/page/_layout/Body/List/index.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import NavItem from '@/features/NavPanel/components/NavItem';
 import SkeletonList from '@/features/NavPanel/components/SkeletonList';
-import { documentSelectors, useFileStore } from '@/store/file';
+import { pageSelectors, usePageStore } from '@/store/page';
 
 import Item from './Item';
 
@@ -16,17 +16,17 @@ import Item from './Item';
 const PageList = () => {
   const { t } = useTranslation(['file', 'common']);
 
-  const [filteredPages, hasMore, isLoadingMore, openAllPagesDrawer] = useFileStore((s) => [
-    documentSelectors.getFilteredPagesLimited(s),
-    documentSelectors.hasMoreFilteredPages(s),
-    documentSelectors.isLoadingMoreDocuments(s),
+  const [filteredDocuments, hasMore, isLoadingMore, openAllPagesDrawer] = usePageStore((s) => [
+    pageSelectors.getFilteredDocumentsLimited(s),
+    pageSelectors.hasMoreFilteredDocuments(s),
+    pageSelectors.isLoadingMoreDocuments(s),
     s.openAllPagesDrawer,
   ]);
 
   return (
     <Flexbox gap={1}>
-      {filteredPages.map((page) => (
-        <Item key={page.id} pageId={page.id} />
+      {filteredDocuments.map((doc) => (
+        <Item key={doc.id} pageId={doc.id} />
       ))}
       {isLoadingMore && <SkeletonList rows={3} />}
       {hasMore && !isLoadingMore && (

package/src/app/[variants]/(main)/page/_layout/Body/index.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import SkeletonList from '@/features/NavPanel/components/SkeletonList';
 import PageEmpty from '@/features/PageEmpty';
-import { documentSelectors, useFileStore } from '@/store/file';
+import { pageSelectors, usePageStore } from '@/store/page';
 
 import Actions from './Actions';
 import AllPagesDrawer from './AllPagesDrawer';
@@ -22,12 +22,18 @@ export enum GroupKey {
  */
 const Body = memo(() => {
   const { t } = useTranslation('file');
-  const isDocumentListLoading = useFileStore((s) => s.isDocumentListLoading);
-  const filteredPagesCount = useFileStore(documentSelectors.filteredPagesCount);
-  const filteredPages = useFileStore(documentSelectors.getFilteredPagesLimited);
-  const searchKeywords = useFileStore((s) => s.searchKeywords);
+
+  // Initialize documents list via SWR
+  const useFetchDocuments = usePageStore((s) => s.useFetchDocuments);
+  useFetchDocuments();
+
+  const isLoading = usePageStore(pageSelectors.isDocumentsLoading);
+
+  const filteredDocumentsCount = usePageStore(pageSelectors.filteredDocumentsCount);
+  const filteredDocuments = usePageStore(pageSelectors.getFilteredDocumentsLimited);
+  const searchKeywords = usePageStore((s) => s.searchKeywords);
   const dropdownMenu = useDropdownMenu();
-  const [allPagesDrawerOpen, closeAllPagesDrawer] = useFileStore((s) => [
+  const [allPagesDrawerOpen, closeAllPagesDrawer] = usePageStore((s) => [
     s.allPagesDrawerOpen,
     s.closeAllPagesDrawer,
   ]);
@@ -53,16 +59,16 @@ const Body = memo(() => {
           title={
             <Text ellipsis fontSize={12} type={'secondary'} weight={500}>
               {t('pageList.title')}
-              {filteredPagesCount > 0 && ` ${filteredPagesCount}`}
+              {filteredDocumentsCount > 0 && ` ${filteredDocumentsCount}`}
             </Text>
           }
         >
           <Suspense fallback={<SkeletonList />}>
-            {isDocumentListLoading ? (
+            {isLoading ? (
               <SkeletonList />
             ) : (
               <Flexbox gap={1} paddingBlock={1}>
-                {filteredPages.length === 0 ? (
+                {filteredDocuments.length === 0 ? (
                   <PageEmpty search={Boolean(searchKeywords.trim())} />
                 ) : (
                   <List />

package/src/app/[variants]/(main)/page/_layout/Body/useDropdownMenu.tsx

@@ -6,14 +6,14 @@ import { Hash, LucideCheck } from 'lucide-react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useFileStore } from '@/store/file';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
+import { usePageStore } from '@/store/page';
 
 export const useDropdownMenu = (): MenuProps['items'] => {
   const { t } = useTranslation();
-  const showOnlyPagesNotInLibrary = useFileStore((s) => s.showOnlyPagesNotInLibrary);
-  const setShowOnlyPagesNotInLibrary = useFileStore((s) => s.setShowOnlyPagesNotInLibrary);
+  const showOnlyPagesNotInLibrary = usePageStore((s) => s.showOnlyPagesNotInLibrary);
+  const setShowOnlyPagesNotInLibrary = usePageStore((s) => s.setShowOnlyPagesNotInLibrary);
 
   const [pagePageSize, updateSystemStatus] = useGlobalStore((s) => [
     systemStatusSelectors.pagePageSize(s),

package/src/app/[variants]/(main)/page/_layout/DataSync.tsx

@@ -0,0 +1,15 @@
+import { useNavigate } from 'react-router-dom';
+import { createStoreUpdater } from 'zustand-utils';
+
+import { usePageStore } from '@/store/page';
+
+const DataSync = () => {
+  const usePageStoreUpdater = createStoreUpdater(usePageStore);
+
+  const navigate = useNavigate();
+  usePageStoreUpdater('navigate', navigate);
+
+  return null;
+};
+
+export default DataSync;

package/src/app/[variants]/(main)/page/_layout/Header/AddButton.tsx

@@ -5,12 +5,12 @@ import { SquarePenIcon } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useFileStore } from '@/store/file';
+import { usePageStore } from '@/store/page';
 
 const AddButton = memo(() => {
   const { t } = useTranslation('file');
 
-  const createNewPage = useFileStore((s) => s.createNewPage);
+  const createNewPage = usePageStore((s) => s.createNewPage);
 
   const handleNewDocument = () => {
     const untitledTitle = t('pageList.untitled');

package/src/app/[variants]/(main)/page/_layout/index.tsx

@@ -4,6 +4,7 @@ import { Flexbox } from '@lobehub/ui';
 import { type FC } from 'react';
 import { Outlet } from 'react-router-dom';
 
+import DataSync from './DataSync';
 import Sidebar from './Sidebar';
 import { styles } from './style';
 
@@ -14,6 +15,7 @@ const DesktopPagesLayout: FC = () => {
       <Flexbox className={styles.mainContainer} flex={1} height={'100%'}>
         <Outlet />
       </Flexbox>
+      <DataSync />
     </>
   );
 };

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

@@ -1,26 +1,22 @@
 'use client';
 
 import { Suspense, memo } from 'react';
-import { useParams } from 'react-router-dom';
 
 import Loading from '@/components/Loading/BrandTextLoading';
-import PageExplorer from '@/features/PageExplorer';
-import { standardizeIdentifier } from '@/utils/identifier';
+import PageExplorerPlaceholder from '@/features/PageExplorer/PageExplorerPlaceholder';
 
-import PageTitle from './features/PageTitle';
+import PageTitle from './PageTitle';
 
 /**
  * Pages route - dedicated page for managing documents/pages
  * This is extracted from the /resource route to have its own dedicated space
  */
 const PagesPage = memo(() => {
-  const { id } = useParams<{ id: string }>();
-
   return (
     <>
       <PageTitle />
       <Suspense fallback={<Loading debugId="PagesPage" />}>
-        <PageExplorer pageId={standardizeIdentifier(id ?? '', 'docs')} />
+        <PageExplorerPlaceholder />
       </Suspense>
     </>
   );

package/src/components/Editor/AutoSaveHint.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 dayjs.extend(relativeTime);
 
 interface AutoSaveHintProps {
-  lastUpdatedTime?: Date | null;
+  lastUpdatedTime?: string | Date | null;
   saveStatus: 'idle' | 'saving' | 'saved';
   style?: CSSProperties;
 }

package/src/features/Conversation/Messages/AssistantGroup/Tool/Render/Intervention/ApprovalActions.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { useUserStore } from '@/store/user';
 
 import { useConversationStore } from '../../../../../store';
-import { useGroupMessage } from '../../../components/GroupContext';
+import { useMessageAggregationContext } from '../../../../Contexts/MessageAggregationContext';
 import { type ApprovalMode } from './index';
 
 interface ApprovalActionsProps {
@@ -34,7 +34,7 @@ const ApprovalActions = memo<ApprovalActionsProps>(
     // Disable actions while message is still being created (temp ID)
     const isMessageCreating = messageId.startsWith('tmp_');
 
-    const { assistantGroupId } = useGroupMessage();
+    const { assistantGroupId } = useMessageAggregationContext();
     const [approveToolCall, rejectToolCall, rejectAndContinueToolCall] = useConversationStore(
       (s) => [s.approveToolCall, s.rejectToolCall, s.rejectAndContinueToolCall],
     );

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

@@ -12,6 +12,7 @@ import { toolSelectors } from '@/store/tool/selectors';
 import { getBuiltinRender } from '@/tools/renders';
 import { getBuiltinStreaming } from '@/tools/streamings';
 
+import { ToolErrorBoundary } from '../../Tool/ErrorBoundary';
 import Actions from './Actions';
 import Inspectors from './Inspector';
 
@@ -145,21 +146,23 @@ const Tool = memo<GroupToolProps>(
               type={type}
             />
           )}
-          <Render
-            apiName={apiName}
-            arguments={requestArgs}
-            identifier={identifier}
-            intervention={intervention}
-            isArgumentsStreaming={isArgumentsStreaming}
-            isToolCalling={isToolCalling}
-            messageId={assistantMessageId}
-            result={result}
-            setShowPluginRender={setShowPluginRender}
-            showPluginRender={showPluginRender}
-            toolCallId={id}
-            toolMessageId={toolMessageId}
-            type={type}
-          />
+          <ToolErrorBoundary apiName={apiName} identifier={identifier}>
+            <Render
+              apiName={apiName}
+              arguments={requestArgs}
+              identifier={identifier}
+              intervention={intervention}
+              isArgumentsStreaming={isArgumentsStreaming}
+              isToolCalling={isToolCalling}
+              messageId={assistantMessageId}
+              result={result}
+              setShowPluginRender={setShowPluginRender}
+              showPluginRender={showPluginRender}
+              toolCallId={id}
+              toolMessageId={toolMessageId}
+              type={type}
+            />
+          </ToolErrorBoundary>
           <Divider dashed style={{ marginBottom: 0, marginTop: 8 }} />
         </Flexbox>
       </AccordionItem>

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

@@ -6,8 +6,8 @@ import { memo, useMemo } from 'react';
 import { type AssistantContentBlock } from '@/types/index';
 
 import { messageStateSelectors, useConversationStore } from '../../../store';
+import { MessageAggregationContext } from '../../Contexts/MessageAggregationContext';
 import { CollapsedMessage } from './CollapsedMessage';
-import { GroupMessageContext } from './GroupContext';
 import GroupItem from './GroupItem';
 
 const styles = createStaticStyles(({ css }) => {
@@ -44,7 +44,7 @@ const Group = memo<GroupChildrenProps>(
       );
     }
     return (
-      <GroupMessageContext value={contextValue}>
+      <MessageAggregationContext value={contextValue}>
         <Flexbox className={styles.container} gap={8}>
           {blocks.map((item) => {
             return (
@@ -59,7 +59,7 @@ const Group = memo<GroupChildrenProps>(
             );
           })}
         </Flexbox>
-      </GroupMessageContext>
+      </MessageAggregationContext>
     );
   },
   isEqual,

package/src/features/Conversation/Messages/Contexts/MessageAggregationContext.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+interface GroupMessageContextValue {
+  assistantGroupId: string;
+}
+
+export const MessageAggregationContext = createContext<GroupMessageContextValue | null>(null);
+
+export const useMessageAggregationContext = () => {
+  const context = useContext(MessageAggregationContext);
+  if (!context) {
+    throw new Error('useMessageAggregationContext must be used within MessageAggregationContext');
+  }
+  return context;
+};

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

@@ -6,9 +6,9 @@ import { memo, useMemo } from 'react';
 import { type AssistantContentBlock } from '@/types/index';
 
 import { messageStateSelectors, useConversationStore } from '../../../store';
+import { MessageAggregationContext } from '../../Contexts/MessageAggregationContext';
 import { CollapsedMessage } from './CollapsedMessage';
 import ContentBlock from './ContentBlock';
-import { GroupMessageContext } from './GroupContext';
 
 const styles = createStaticStyles(({ css }) => {
   return {
@@ -43,13 +43,13 @@ const Group = memo<GroupChildrenProps>(({ blocks, id, content }) => {
     );
   }
   return (
-    <GroupMessageContext value={contextValue}>
+    <MessageAggregationContext value={contextValue}>
       <Flexbox className={styles.container} gap={8}>
         {blocks.map((item) => {
           return <ContentBlock {...item} key={id + '.' + item.id} />;
         })}
       </Flexbox>
-    </GroupMessageContext>
+    </MessageAggregationContext>
   );
 }, isEqual);
 

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

@@ -76,7 +76,11 @@ export const UserActionsBar = memo<UserActionsProps>(({ actionsConfig, id, data
   // Use external config if provided, otherwise use defaults
   // Append extra actions from factories
   const barItems = useMemo(() => {
-    const base = actionsConfig?.bar ?? [defaultActions.regenerate, defaultActions.edit];
+    const base = actionsConfig?.bar ?? [
+      defaultActions.regenerate,
+      defaultActions.edit,
+      defaultActions.copy,
+    ];
     return [...base, ...extraBarItems];
   }, [actionsConfig?.bar, defaultActions.regenerate, defaultActions.edit, extraBarItems]);
 

package/src/features/EditorCanvas/AutoSaveHint.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { type CSSProperties, memo } from 'react';
+
+import AutoSaveHintBase from '@/components/Editor/AutoSaveHint';
+import { useDocumentStore } from '@/store/document';
+import { editorSelectors } from '@/store/document/slices/editor';
+
+export interface AutoSaveHintProps {
+  /**
+   * Document ID to get save status from DocumentStore
+   */
+  documentId: string;
+  /**
+   * Custom styles
+   */
+  style?: CSSProperties;
+}
+
+/**
+ * AutoSave hint component that reads from DocumentStore
+ * Use this component externally to display save status for a document
+ */
+const AutoSaveHint = memo<AutoSaveHintProps>(({ documentId, style }) => {
+  const saveStatus = useDocumentStore((s) => editorSelectors.saveStatus(documentId)(s));
+  const lastUpdatedTime = useDocumentStore(
+    (s) => editorSelectors.lastUpdatedTime(documentId)(s) ?? null,
+  );
+
+  return (
+    <AutoSaveHintBase lastUpdatedTime={lastUpdatedTime} saveStatus={saveStatus} style={style} />
+  );
+});
+
+AutoSaveHint.displayName = 'AutoSaveHint';
+
+export default AutoSaveHint;