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

package/src/features/Portal/Document/AutoSaveHint.tsx

@@ -2,15 +2,16 @@
 
 import { memo } from 'react';
 
-import AutoSaveHintBase from '@/components/Editor/AutoSaveHint';
-
-import { useDocumentEditorStore } from './store';
+import { AutoSaveHint as SharedAutoSaveHint } from '@/features/EditorCanvas';
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/selectors';
 
 const AutoSaveHint = memo(() => {
-  const saveStatus = useDocumentEditorStore((s) => s.saveStatus);
-  const lastUpdatedTime = useDocumentEditorStore((s) => s.lastUpdatedTime);
+  const documentId = useChatStore(chatPortalSelectors.portalDocumentId);
+
+  if (!documentId) return null;
 
-  return <AutoSaveHintBase lastUpdatedTime={lastUpdatedTime} saveStatus={saveStatus} />;
+  return <SharedAutoSaveHint documentId={documentId} />;
 });
 
 export default AutoSaveHint;

package/src/features/Portal/Document/Body.tsx

@@ -5,14 +5,13 @@ import { createStaticStyles } from 'antd-style';
 import { memo } from 'react';
 
 import EditorCanvas from './EditorCanvas';
-import Title from './Title';
 import TodoList from './TodoList';
 
 const styles = createStaticStyles(({ css }) => ({
   content: css`
     overflow: auto;
     flex: 1;
-    padding-inline: 12px;
+    padding-inline: 16px;
   `,
   todoContainer: css`
     flex-shrink: 0;
@@ -25,7 +24,6 @@ const DocumentBody = memo(() => {
   return (
     <Flexbox flex={1} height={'100%'} style={{ overflow: 'hidden' }}>
       <div className={styles.content}>
-        <Title />
         <EditorCanvas />
       </div>
       <div className={styles.todoContainer}>

package/src/features/Portal/Document/EditorCanvas.tsx

@@ -1,61 +1,18 @@
 'use client';
 
-import {
-  ReactCodePlugin,
-  ReactCodemirrorPlugin,
-  ReactHRPlugin,
-  ReactImagePlugin,
-  ReactLinkPlugin,
-  ReactListPlugin,
-  ReactMathPlugin,
-  ReactTablePlugin,
-} from '@lobehub/editor';
-import { Editor } from '@lobehub/editor/react';
+import { useEditor } from '@lobehub/editor/react';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 
-import { useDocumentEditorStore } from './store';
+import { EditorCanvas as SharedEditorCanvas } from '@/features/EditorCanvas';
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/selectors';
 
 const EditorCanvas = memo(() => {
-  const { t } = useTranslation('file');
+  const editor = useEditor();
 
-  const editor = useDocumentEditorStore((s) => s.editor);
-  const handleContentChange = useDocumentEditorStore((s) => s.handleContentChange);
+  const documentId = useChatStore(chatPortalSelectors.portalDocumentId);
 
-  if (!editor) return null;
-
-  return (
-    <div
-      onClick={(e) => {
-        e.stopPropagation();
-        e.preventDefault();
-      }}
-    >
-      <Editor
-        content={''}
-        editor={editor}
-        lineEmptyPlaceholder={t('pageEditor.editorPlaceholder')}
-        onTextChange={handleContentChange}
-        placeholder={t('pageEditor.editorPlaceholder')}
-        plugins={[
-          ReactListPlugin,
-          ReactCodePlugin,
-          ReactCodemirrorPlugin,
-          ReactHRPlugin,
-          ReactLinkPlugin,
-          ReactTablePlugin,
-          ReactMathPlugin,
-          Editor.withProps(ReactImagePlugin, {
-            defaultBlockImage: true,
-          }),
-        ]}
-        style={{
-          paddingBottom: 64,
-        }}
-        type={'text'}
-      />
-    </div>
-  );
+  return <SharedEditorCanvas documentId={documentId} editor={editor} sourceType="notebook" />;
 });
 
 export default EditorCanvas;

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

@@ -1,8 +1,8 @@
 'use client';
 
-import { ActionIcon, Button, Flexbox, Text } from '@lobehub/ui';
+import { Button, Flexbox, Text } from '@lobehub/ui';
 import { cx } from 'antd-style';
-import { ArrowLeft, ExternalLink } from 'lucide-react';
+import { ExternalLink } from 'lucide-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -22,13 +22,17 @@ const Header = () => {
   const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
 
-  const [topicId, documentId, closeDocument] = useChatStore((s) => [
+  const [topicId, documentId] = useChatStore((s) => [
     s.activeTopicId,
     chatPortalSelectors.portalDocumentId(s),
-    s.closeDocument,
   ]);
 
-  const document = useNotebookStore(notebookSelectors.getDocumentById(topicId, documentId));
+  const [useFetchDocuments, title, fileType] = useNotebookStore((s) => [
+    s.useFetchDocuments,
+    notebookSelectors.getDocumentById(topicId, documentId)(s)?.title,
+    notebookSelectors.getDocumentById(topicId, documentId)(s)?.fileType,
+  ]);
+  useFetchDocuments(topicId);
 
   const handleOpenInPageEditor = async () => {
     if (!documentId) return;
@@ -49,19 +53,18 @@ const Header = () => {
     }
   };
 
-  if (!document) return null;
+  if (!title) return null;
 
   return (
     <Flexbox align={'center'} flex={1} gap={12} horizontal justify={'space-between'} width={'100%'}>
-      <Flexbox align={'center'} gap={4} horizontal>
-        <ActionIcon icon={ArrowLeft} onClick={closeDocument} size={'small'} />
+      <Flexbox flex={1}>
         <Text className={cx(oneLineEllipsis)} type={'secondary'}>
-          {document.title}
+          {title}
         </Text>
       </Flexbox>
       <Flexbox align={'center'} gap={8} horizontal>
         <AutoSaveHint />
-        {document.fileType !== 'agent/plan' && (
+        {fileType !== 'agent/plan' && (
           <Button
             icon={<ExternalLink size={14} />}
             loading={loading}

package/src/features/Portal/Document/TodoList.tsx

@@ -6,11 +6,11 @@ import { ChevronDown, ChevronUp, ListTodo } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/selectors';
 import { useNotebookStore } from '@/store/notebook';
 import { notebookSelectors } from '@/store/notebook/selectors';
 
-import { useDocumentEditorStore } from './store';
-
 interface TodoItem {
   completed: boolean;
   text: string;
@@ -106,8 +106,10 @@ const TodoList = memo(() => {
   const { t } = useTranslation('portal');
   const [expanded, setExpanded] = useState(false);
 
-  const documentId = useDocumentEditorStore((s) => s.documentId);
-  const topicId = useDocumentEditorStore((s) => s.topicId);
+  const [topicId, documentId] = useChatStore((s) => [
+    s.activeTopicId,
+    chatPortalSelectors.portalDocumentId(s),
+  ]);
 
   const document = useNotebookStore(notebookSelectors.getDocumentById(topicId, documentId));
 

package/src/features/Portal/Document/Wrapper.tsx

@@ -1,25 +1,17 @@
 'use client';
 
+import { EditorProvider } from '@lobehub/editor/react';
 import { type PropsWithChildren, memo } from 'react';
 
 import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors } from '@/store/chat/selectors';
 
-import { DocumentEditorProvider } from './DocumentEditorProvider';
-
 const Wrapper = memo<PropsWithChildren>(({ children }) => {
-  const [topicId, documentId] = useChatStore((s) => [
-    s.activeTopicId,
-    chatPortalSelectors.portalDocumentId(s),
-  ]);
+  const documentId = useChatStore(chatPortalSelectors.portalDocumentId);
 
   if (!documentId) return null;
 
-  return (
-    <DocumentEditorProvider documentId={documentId} topicId={topicId}>
-      {children}
-    </DocumentEditorProvider>
-  );
+  return <EditorProvider>{children}</EditorProvider>;
 });
 
 export default Wrapper;

package/src/features/Portal/Document/index.ts

@@ -1,12 +1,10 @@
 import { type PortalImpl } from '../type';
 import Body from './Body';
 import Header from './Header';
-import { useEnable } from './useEnable';
 import Wrapper from './Wrapper';
 
 export const Document: PortalImpl = {
   Body,
   Title: Header,
   Wrapper,
-  useEnable,
 };

package/src/features/Portal/FilePreview/index.ts

@@ -1,10 +1,8 @@
 import { type PortalImpl } from '../type';
 import Body from './Body';
 import Title from './Title';
-import { useEnable } from './useEnable';
 
 export const FilePreview: PortalImpl = {
   Body,
   Title,
-  useEnable,
 };

package/src/features/Portal/GroupThread/index.ts

@@ -2,12 +2,9 @@ import { type PortalImpl } from '../type';
 import Body from './Body';
 import Header from './Header';
 import Title from './Title';
-import { onClose, useEnable } from './hook';
 
 export const GroupThread: PortalImpl = {
   Body,
   Header,
   Title,
-  onClose,
-  useEnable,
 };

package/src/features/Portal/MessageDetail/index.ts

@@ -1,10 +1,8 @@
 import { type PortalImpl } from '../type';
 import Body from './Body';
 import Title from './Title';
-import { useEnable } from './useEnable';
 
 export const MessageDetail: PortalImpl = {
   Body,
   Title,
-  useEnable,
 };

package/src/features/Portal/Notebook/index.ts

@@ -1,10 +1,8 @@
 import { type PortalImpl } from '../type';
 import Body from './Body';
 import Title from './Title';
-import { useEnable } from './useEnable';
 
 export const Notebook: PortalImpl = {
   Body,
   Title,
-  useEnable,
 };

package/src/features/Portal/Plugins/index.ts

@@ -1,10 +1,8 @@
 import { type PortalImpl } from '../type';
 import Body from './Body';
 import Title from './Title';
-import { useEnable } from './useEnable';
 
 export const Plugins: PortalImpl = {
   Body,
   Title,
-  useEnable,
 };

package/src/features/Portal/Thread/index.ts

@@ -1,12 +1,9 @@
 import { type PortalImpl } from '../type';
 import Chat from './Chat';
 import Header from './Header';
-import { onClose, useEnable } from './hook';
 
 export const Thread: PortalImpl = {
   Body: Chat,
   Header,
   Title: () => null,
-  onClose,
-  useEnable,
 };

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

@@ -1,24 +1,36 @@
 'use client';
 
 import { DESKTOP_HEADER_ICON_SIZE } from '@lobechat/const';
-import { ActionIcon } from '@lobehub/ui';
-import { PanelRightCloseIcon } from 'lucide-react';
+import { ActionIcon, Flexbox } from '@lobehub/ui';
+import { ArrowLeft, PanelRightCloseIcon } from 'lucide-react';
 import { type ReactNode, memo } from 'react';
 
 import NavHeader from '@/features/NavHeader';
 import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/selectors';
 
 const Header = memo<{ title: ReactNode }>(({ title }) => {
-  const [toggleInspector] = useChatStore((s) => [s.togglePortal]);
+  const [canGoBack, goBack, togglePortal] = useChatStore((s) => [
+    chatPortalSelectors.canGoBack(s),
+    s.goBack,
+    s.togglePortal,
+  ]);
 
   return (
     <NavHeader
-      left={title}
+      left={
+        <Flexbox align="center" gap={4} horizontal>
+          {canGoBack && (
+            <ActionIcon icon={ArrowLeft} onClick={goBack} size={DESKTOP_HEADER_ICON_SIZE} />
+          )}
+          {title}
+        </Flexbox>
+      }
       right={
         <ActionIcon
           icon={PanelRightCloseIcon}
           onClick={() => {
-            toggleInspector(false);
+            togglePortal(false);
           }}
           size={DESKTOP_HEADER_ICON_SIZE}
         />
@@ -27,7 +39,7 @@ const Header = memo<{ title: ReactNode }>(({ title }) => {
       style={{ paddingBlock: 8, paddingInline: 8 }}
       styles={{
         left: {
-          marginLeft: 6,
+          marginLeft: canGoBack ? 0 : 6,
         },
       }}
     />

package/src/features/Portal/router.tsx

@@ -2,6 +2,10 @@
 
 import React, { Fragment, memo } from 'react';
 
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/selectors';
+import { PortalViewType } from '@/store/chat/slices/portal/initialState';
+
 import { Artifacts } from './Artifacts';
 import { Document } from './Document';
 import { FilePreview } from './FilePreview';
@@ -14,72 +18,27 @@ import { Thread } from './Thread';
 import Header from './components/Header';
 import { type PortalImpl } from './type';
 
-// Keep GroupThread before Thread so group DM threads take precedence when enabled
-// Document should be before Notebook so detail view takes precedence
-const items: PortalImpl[] = [
-  GroupThread,
-  Thread,
-  MessageDetail,
-  Artifacts,
-  Plugins,
-  FilePreview,
-  Document,
-  Notebook,
-];
-
-export const PortalTitle = memo(() => {
-  const enabledList: boolean[] = [];
-
-  for (const item of items) {
-    const enabled = item.useEnable();
-    enabledList.push(enabled);
-  }
-
-  for (const [i, element] of enabledList.entries()) {
-    const Title = items[i].Title;
-    if (element) {
-      return <Title />;
-    }
-  }
-
-  return <HomeTitle />;
-});
-
-export const PortalHeader = memo(() => {
-  const enabledList: boolean[] = [];
-
-  for (const item of items) {
-    const enabled = item.useEnable();
-    enabledList.push(enabled);
-  }
-
-  for (const [i, element] of enabledList.entries()) {
-    const Header = items[i].Header;
-    if (element && Header) {
-      return <Header />;
-    }
-  }
-
-  return <Header title={<PortalTitle />} />;
-});
-
-const PortalBody = memo(() => {
-  const enabledList: boolean[] = [];
-
-  for (const item of items) {
-    const enabled = item.useEnable();
-    enabledList.push(enabled);
-  }
-
-  for (const [i, element] of enabledList.entries()) {
-    const Body = items[i].Body;
-    if (element) {
-      return <Body />;
-    }
-  }
-
-  return <HomeBody />;
-});
+// View type to component mapping
+const VIEW_COMPONENTS: Record<PortalViewType, PortalImpl> = {
+  [PortalViewType.Home]: {
+    Body: HomeBody,
+    Title: HomeTitle,
+  },
+  [PortalViewType.Artifact]: Artifacts,
+  [PortalViewType.Document]: Document,
+  [PortalViewType.Notebook]: Notebook,
+  [PortalViewType.FilePreview]: FilePreview,
+  [PortalViewType.MessageDetail]: MessageDetail,
+  [PortalViewType.ToolUI]: Plugins,
+  [PortalViewType.Thread]: Thread,
+  [PortalViewType.GroupThread]: GroupThread,
+};
+
+// Default Home component
+const HomeImpl: PortalImpl = {
+  Body: HomeBody,
+  Title: HomeTitle,
+};
 
 interface PortalContentProps {
   renderBody?: (body: React.ReactNode) => React.ReactNode;
@@ -87,37 +46,18 @@ interface PortalContentProps {
 
 /**
  * Portal content with Wrapper support
- * When an enabled item has a Wrapper, it wraps both Header and Body
+ * Uses the view stack to determine which component to render
  */
-const PortalContent = memo<PortalContentProps>(({ renderBody }) => {
-  const enabledList: boolean[] = [];
+export const PortalContent = memo<PortalContentProps>(({ renderBody }) => {
+  const viewType = useChatStore(chatPortalSelectors.currentViewType);
+  const ViewImpl = viewType ? VIEW_COMPONENTS[viewType] : HomeImpl;
 
-  for (const item of items) {
-    const enabled = item.useEnable();
-    enabledList.push(enabled);
-  }
-
-  // Find the first enabled item
-  let enabledIndex = -1;
-  for (const [i, element] of enabledList.entries()) {
-    if (element) {
-      enabledIndex = i;
-      break;
-    }
-  }
-
-  // Get components for the enabled item
-  const enabledItem = enabledIndex >= 0 ? items[enabledIndex] : null;
-  const Wrapper = enabledItem?.Wrapper || Fragment;
-  const CustomHeader = enabledItem?.Header;
-  const Body = enabledItem?.Body || HomeBody;
-
-  const headerContent = CustomHeader ? (
-    <CustomHeader />
-  ) : (
-    <Header title={enabledItem?.Title ? <enabledItem.Title /> : <HomeTitle />} />
-  );
+  const Wrapper = ViewImpl?.Wrapper || Fragment;
+  const CustomHeader = ViewImpl?.Header;
+  const Body = ViewImpl?.Body || HomeBody;
+  const Title = ViewImpl?.Title || HomeTitle;
 
+  const headerContent = CustomHeader ? <CustomHeader /> : <Header title={<Title />} />;
   const bodyContent = <Body />;
 
   return (
@@ -127,6 +67,3 @@ const PortalContent = memo<PortalContentProps>(({ renderBody }) => {
     </Wrapper>
   );
 });
-
-export { PortalContent };
-export default PortalBody;

package/src/features/Portal/type.ts

@@ -5,6 +5,4 @@ export interface PortalImpl {
   Header?: FC;
   Title: FC;
   Wrapper?: FC<PropsWithChildren>;
-  onClose?: () => void;
-  useEnable: () => boolean;
 }

package/src/locales/default/plugin.ts

@@ -93,6 +93,7 @@ export default {
   'builtins.lobe-local-system.inspector.rename.result':
     '<old>{{oldName}}</old> → <new>{{newName}}</new>',
   'builtins.lobe-local-system.title': 'Local System',
+  'builtins.lobe-notebook.actions.collapse': 'Collapse',
   'builtins.lobe-notebook.actions.copy': 'Copy',
   'builtins.lobe-notebook.actions.creating': 'Creating document...',
   'builtins.lobe-notebook.actions.edit': 'Edit',