@lobehub/lobehub 2.0.0-next.239 → 2.0.0-next.240

package/.cursor/rules/typescript.mdc

@@ -52,3 +52,4 @@ alwaysApply: false
 
 - Never log user private information like api key, etc
 - Don't use `import { log } from 'debug'` to log messages, because it will directly log the message to the console.
+- Use console.error instead of debug package to log error message in catch block.

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 # Changelog
 
+## [Version 2.0.0-next.240](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.239...v2.0.0-next.240)
+
+<sup>Released on **2026-01-08**</sup>
+
+#### ♻ Code Refactoring
+
+- **memory-user-memory**: Migrated to use typescript module for prompts.
+
+#### ✨ Features
+
+- **notebook**: Add i18n, Inspector and Streaming components.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **memory-user-memory**: Migrated to use typescript module for prompts, closes [#11344](https://github.com/lobehub/lobe-chat/issues/11344) ([902cfe5](https://github.com/lobehub/lobe-chat/commit/902cfe5))
+
+#### What's improved
+
+- **notebook**: Add i18n, Inspector and Streaming components, closes [#11212](https://github.com/lobehub/lobe-chat/issues/11212) ([f7dc54f](https://github.com/lobehub/lobe-chat/commit/f7dc54f))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.239](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.238...v2.0.0-next.239)
 
 <sup>Released on **2026-01-08**</sup>

package/changelog/v1.json

@@ -1,4 +1,9 @@
 [
+  {
+    "children": {},
+    "date": "2026-01-08",
+    "version": "2.0.0-next.240"
+  },
   {
     "children": {
       "features": [

package/locales/en-US/plugin.json

@@ -92,6 +92,15 @@
   "builtins.lobe-local-system.inspector.noResults": "No results",
   "builtins.lobe-local-system.inspector.rename.result": "<old>{{oldName}}</old> → <new>{{newName}}</new>",
   "builtins.lobe-local-system.title": "Local System",
+  "builtins.lobe-notebook.actions.copy": "Copy",
+  "builtins.lobe-notebook.actions.creating": "Creating document...",
+  "builtins.lobe-notebook.actions.edit": "Edit",
+  "builtins.lobe-notebook.actions.expand": "Expand",
+  "builtins.lobe-notebook.apiName.createDocument": "Create document",
+  "builtins.lobe-notebook.apiName.deleteDocument": "Delete document",
+  "builtins.lobe-notebook.apiName.getDocument": "Get document",
+  "builtins.lobe-notebook.apiName.updateDocument": "Update document",
+  "builtins.lobe-notebook.title": "Notebook",
   "builtins.lobe-page-agent.apiName.batchUpdate": "Batch update nodes",
   "builtins.lobe-page-agent.apiName.compareSnapshots": "Compare snapshots",
   "builtins.lobe-page-agent.apiName.convertToList": "Convert to list",

package/locales/zh-CN/plugin.json

@@ -92,6 +92,15 @@
   "builtins.lobe-local-system.inspector.noResults": "无结果",
   "builtins.lobe-local-system.inspector.rename.result": "<old>{{oldName}}</old> → <new>{{newName}}</new>",
   "builtins.lobe-local-system.title": "本地系统",
+  "builtins.lobe-notebook.actions.copy": "复制",
+  "builtins.lobe-notebook.actions.creating": "文档创建中...",
+  "builtins.lobe-notebook.actions.edit": "编辑",
+  "builtins.lobe-notebook.actions.expand": "展开",
+  "builtins.lobe-notebook.apiName.createDocument": "创建文档",
+  "builtins.lobe-notebook.apiName.deleteDocument": "删除文档",
+  "builtins.lobe-notebook.apiName.getDocument": "获取文档",
+  "builtins.lobe-notebook.apiName.updateDocument": "更新文档",
+  "builtins.lobe-notebook.title": "笔记本",
   "builtins.lobe-page-agent.apiName.batchUpdate": "批量更新节点",
   "builtins.lobe-page-agent.apiName.compareSnapshots": "比较快照",
   "builtins.lobe-page-agent.apiName.convertToList": "转换为列表",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.239",
+  "version": "2.0.0-next.240",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/packages/builtin-tool-gtd/src/client/Streaming/CreatePlan/index.tsx

@@ -1,14 +1,14 @@
 'use client';
 
 import type { BuiltinStreamingProps } from '@lobechat/types';
-import { Flexbox, Icon, Markdown, Text } from '@lobehub/ui';
+import { Flexbox, Icon, Text } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
 import { ListChecksIcon } from 'lucide-react';
 import { memo } from 'react';
 
-import type { CreatePlanParams } from '../../../types';
+import StreamingMarkdown from '@/components/StreamingMarkdown';
 
-const MAX_CONTENT_HEIGHT = 100;
+import type { CreatePlanParams } from '../../../types';
 
 const styles = createStaticStyles(({ css, cssVar }) => ({
   container: css`
@@ -17,15 +17,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     border: 1px solid ${cssVar.colorBorder};
     border-radius: 8px;
   `,
-  content: css`
-    overflow: hidden auto;
-
-    max-height: ${MAX_CONTENT_HEIGHT}px;
-    padding: 12px;
-    border-radius: 8px;
-
-    background: ${cssVar.colorFillQuaternary};
-  `,
   description: css`
     font-size: 14px;
     color: ${cssVar.colorTextSecondary};
@@ -70,13 +61,7 @@ export const CreatePlanStreaming = memo<BuiltinStreamingProps<CreatePlanParams>>
       )}
 
       {/* Context content - streaming with animation */}
-      {context && (
-        <div className={styles.content}>
-          <Markdown animated fontSize={13} variant={'chat'}>
-            {context}
-          </Markdown>
-        </div>
-      )}
+      <StreamingMarkdown maxHeight={100}>{context}</StreamingMarkdown>
     </Flexbox>
   );
 });

package/packages/builtin-tool-notebook/src/client/Inspector/CreateDocument/index.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import type { BuiltinInspectorProps } from '@lobechat/types';
+import { createStaticStyles, cx } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { highlightTextStyles, shinyTextStyles } from '@/styles';
+
+import type { CreateDocumentArgs, CreateDocumentState } from '../../../types';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  root: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    color: ${cssVar.colorTextSecondary};
+  `,
+}));
+
+export const CreateDocumentInspector = memo<
+  BuiltinInspectorProps<CreateDocumentArgs, CreateDocumentState>
+>(({ args, partialArgs, isArgumentsStreaming, isLoading }) => {
+  const { t } = useTranslation('plugin');
+
+  const title = args?.title || partialArgs?.title;
+
+  // During streaming without title, show init
+  if (isArgumentsStreaming && !title) {
+    return (
+      <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-notebook.apiName.createDocument')}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cx(styles.root, (isArgumentsStreaming || isLoading) && shinyTextStyles.shinyText)}
+    >
+      <span>{t('builtins.lobe-notebook.apiName.createDocument')}: </span>
+      {title && <span className={highlightTextStyles.primary}>{title}</span>}
+    </div>
+  );
+});
+
+CreateDocumentInspector.displayName = 'CreateDocumentInspector';
+
+export default CreateDocumentInspector;

package/packages/builtin-tool-notebook/src/client/Inspector/index.ts

@@ -0,0 +1,14 @@
+import { type BuiltinInspector } from '@lobechat/types';
+
+import { NotebookApiName } from '../../types';
+import { CreateDocumentInspector } from './CreateDocument';
+
+/**
+ * Notebook Inspector Components Registry
+ *
+ * Inspector components customize the title/header area
+ * of tool calls in the conversation UI.
+ */
+export const NotebookInspectors: Record<string, BuiltinInspector> = {
+  [NotebookApiName.createDocument]: CreateDocumentInspector as BuiltinInspector,
+};

package/packages/builtin-tool-notebook/src/client/Placeholder/CreateDocument.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import type { BuiltinPlaceholderProps } from '@lobechat/types';
+import { Flexbox, Markdown, ScrollShadow } from '@lobehub/ui';
+import { createStaticStyles } from 'antd-style';
+import { NotebookText } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
+
+import type { CreateDocumentArgs } from '../../types';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  container: css`
+    position: relative;
+
+    overflow: hidden;
+
+    width: 100%;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: 16px;
+
+    background: ${cssVar.colorBgElevated};
+  `,
+  content: css`
+    padding-block: 16px;
+    padding-inline: 16px;
+  `,
+  header: css`
+    padding-block: 10px;
+    padding-inline: 12px;
+    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+  icon: css`
+    color: ${cssVar.colorPrimary};
+  `,
+  statusTag: css`
+    position: absolute;
+    inset-block-end: 16px;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+
+    padding-block: 4px;
+    padding-inline: 12px;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: 16px;
+
+    font-size: 14px;
+    color: ${cssVar.colorText};
+
+    background: ${cssVar.colorBgContainer};
+  `,
+  title: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    font-weight: 500;
+    color: ${cssVar.colorText};
+  `,
+}));
+
+export const CreateDocumentPlaceholder = memo<BuiltinPlaceholderProps<CreateDocumentArgs>>(
+  ({ args }) => {
+    const { t } = useTranslation('plugin');
+    const { title, content } = args || {};
+
+    return (
+      <Flexbox className={styles.container}>
+        {/* Header */}
+        <Flexbox align={'center'} className={styles.header} gap={8} horizontal>
+          <NotebookText className={styles.icon} size={16} />
+          <Flexbox flex={1}>
+            <div className={styles.title}>{title}</div>
+          </Flexbox>
+          <NeuralNetworkLoading size={20} />
+        </Flexbox>
+        {/* Content skeleton */}
+        <ScrollShadow className={styles.content} offset={12} size={12} style={{ maxHeight: 400 }}>
+          {content && (
+            <Markdown style={{ overflow: 'unset', paddingBottom: 40 }} variant={'chat'}>
+              {content}
+            </Markdown>
+          )}
+        </ScrollShadow>
+        <div className={styles.statusTag}>
+          <NeuralNetworkLoading size={14} />
+          <span style={{ fontSize: 12 }}>{t('builtins.lobe-notebook.actions.creating')}</span>
+        </div>
+      </Flexbox>
+    );
+  },
+);
+
+export default CreateDocumentPlaceholder;

package/packages/builtin-tool-notebook/src/client/Placeholder/index.ts

@@ -0,0 +1,10 @@
+import { type BuiltinPlaceholder } from '@lobechat/types';
+
+import { NotebookApiName } from '../../types';
+import { CreateDocumentPlaceholder } from './CreateDocument';
+
+export { CreateDocumentPlaceholder } from './CreateDocument';
+
+export const NotebookPlaceholders: Record<string, BuiltinPlaceholder> = {
+  [NotebookApiName.createDocument]: CreateDocumentPlaceholder as BuiltinPlaceholder,
+};

package/packages/builtin-tool-notebook/src/client/Render/CreateDocument/DocumentCard.tsx

@@ -1,36 +1,46 @@
 'use client';
 
-import { Flexbox, Tag, Text } from '@lobehub/ui';
+import { ActionIcon, CopyButton, Flexbox, Markdown, ScrollShadow } from '@lobehub/ui';
+import { Button } from 'antd';
 import { createStaticStyles } from 'antd-style';
-import { FileText, NotebookText } from 'lucide-react';
+import { Maximize2, NotebookText, PencilLine } from 'lucide-react';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useChatStore } from '@/store/chat';
 
 import { NotebookDocument } from '../../../types';
 
+
 const styles = createStaticStyles(({ css, cssVar }) => ({
   container: css`
-    cursor: pointer;
+    position: relative;
 
     overflow: hidden;
 
     width: 100%;
-    padding-block: 12px;
-    padding-inline: 12px;
     border: 1px solid ${cssVar.colorBorderSecondary};
-    border-radius: 8px;
+    border-radius: 16px;
 
     background: ${cssVar.colorBgElevated};
+  `,
+  content: css`
+    padding-inline: 16px;
+
+    font-size: 14px;
+  `,
+  expandButton: css`
+    position: absolute;
+    inset-block-end: 16px;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
 
-    &:hover {
-      background: ${cssVar.colorFillSecondary};
-    }
+    box-shadow: ${cssVar.boxShadow};
   `,
-  description: css`
-    font-size: 12px;
-    line-height: 1.5;
-    color: ${cssVar.colorTextSecondary};
+  header: css`
+    padding-block: 10px;
+    padding-inline: 12px;
+    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
   `,
   icon: css`
     color: ${cssVar.colorPrimary};
@@ -44,9 +54,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     font-weight: 500;
     color: ${cssVar.colorText};
   `,
-  typeTag: css`
-    font-size: 11px;
-  `,
 }));
 
 interface DocumentCardProps {
@@ -54,30 +61,53 @@ interface DocumentCardProps {
 }
 
 const DocumentCard = memo<DocumentCardProps>(({ document }) => {
+  const { t } = useTranslation('plugin');
   const openDocument = useChatStore((s) => s.openDocument);
 
-  const handleClick = () => {
+  const handleExpand = () => {
     openDocument(document.id);
   };
 
   return (
-    <Flexbox className={styles.container} gap={8} onClick={handleClick}>
-      <Flexbox align={'center'} gap={8} horizontal>
-        {document.type === 'note' ? (
-          <NotebookText className={styles.icon} size={16} />
-        ) : (
-          <FileText className={styles.icon} size={16} />
-        )}
-        <div className={styles.title}>{document.title}</div>
-        <Tag className={styles.typeTag} size={'small'}>
-          {document.type}
-        </Tag>
+    <Flexbox className={styles.container}>
+      {/* Header */}
+      <Flexbox align={'center'} className={styles.header} gap={8} horizontal>
+        <NotebookText className={styles.icon} size={16} />
+        <Flexbox flex={1}>
+          <div className={styles.title}>{document.title}</div>
+        </Flexbox>
+        <Flexbox gap={4} horizontal>
+          <CopyButton
+            content={document.content}
+            size={'small'}
+            title={t('builtins.lobe-notebook.actions.copy')}
+          />
+          <ActionIcon
+            icon={PencilLine}
+            onClick={handleExpand}
+            size={'small'}
+            title={t('builtins.lobe-notebook.actions.edit')}
+          />
+        </Flexbox>
       </Flexbox>
-      {document.description && (
-        <Text className={styles.description} ellipsis={{ rows: 2 }}>
-          {document.description}
-        </Text>
-      )}
+      {/* Content */}
+      <ScrollShadow className={styles.content} offset={12} size={12} style={{ maxHeight: 400 }}>
+        <Markdown style={{ overflow: 'unset', paddingBottom: 40 }} variant={'chat'}>
+          {document.content}
+        </Markdown>
+      </ScrollShadow>
+
+      {/* Floating expand button */}
+      <Button
+        className={styles.expandButton}
+        color={'default'}
+        icon={<Maximize2 size={14} />}
+        onClick={handleExpand}
+        shape={'round'}
+        variant={'outlined'}
+      >
+        {t('builtins.lobe-notebook.actions.expand')}
+      </Button>
     </Flexbox>
   );
 });

package/packages/builtin-tool-notebook/src/client/Streaming/CreateDocument/index.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import type { BuiltinStreamingProps } from '@lobechat/types';
+import { Flexbox } from '@lobehub/ui';
+import { createStaticStyles } from 'antd-style';
+import { NotebookText } from 'lucide-react';
+import { memo } from 'react';
+
+import BubblesLoading from '@/components/BubblesLoading';
+import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
+import StreamingMarkdown from '@/components/StreamingMarkdown';
+
+import type { CreateDocumentArgs } from '../../../types';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  container: css`
+    overflow: hidden;
+
+    width: 100%;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: 16px;
+
+    background: ${cssVar.colorBgElevated};
+  `,
+  header: css`
+    padding-block: 10px;
+    padding-inline: 12px;
+    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+  icon: css`
+    color: ${cssVar.colorPrimary};
+  `,
+  title: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    font-weight: 500;
+    color: ${cssVar.colorText};
+  `,
+}));
+
+export const CreateDocumentStreaming = memo<BuiltinStreamingProps<CreateDocumentArgs>>(
+  ({ args }) => {
+    const { content, title } = args || {};
+
+    if (!content && !title) return null;
+
+    return (
+      <Flexbox className={styles.container}>
+        {/* Header */}
+        <Flexbox align={'center'} className={styles.header} gap={8} horizontal>
+          <NotebookText className={styles.icon} size={16} />
+          <Flexbox flex={1}>
+            <div className={styles.title}>{title}</div>
+          </Flexbox>
+          <NeuralNetworkLoading size={20} />
+        </Flexbox>
+        {/* Content */}
+        {!content ? (
+          <Flexbox paddingBlock={16} paddingInline={12}>
+            <BubblesLoading />
+          </Flexbox>
+        ) : (
+          <StreamingMarkdown>{content}</StreamingMarkdown>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+CreateDocumentStreaming.displayName = 'CreateDocumentStreaming';
+
+export default CreateDocumentStreaming;

package/packages/builtin-tool-notebook/src/client/Streaming/index.ts

@@ -0,0 +1,14 @@
+import { type BuiltinStreaming } from '@lobechat/types';
+
+import { NotebookApiName } from '../../types';
+import { CreateDocumentStreaming } from './CreateDocument';
+
+/**
+ * Notebook Streaming Components Registry
+ *
+ * Streaming components are used to render tool calls while arguments
+ * are still being generated, allowing real-time feedback to users.
+ */
+export const NotebookStreamings: Record<string, BuiltinStreaming> = {
+  [NotebookApiName.createDocument]: CreateDocumentStreaming as BuiltinStreaming,
+};

package/packages/builtin-tool-notebook/src/client/components/AnimatedNumber.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { memo, useEffect, useRef, useState } from 'react';
+
+interface AnimatedNumberProps {
+  duration?: number;
+  formatter?: (value: number) => string;
+  value: number;
+}
+
+export const AnimatedNumber = memo<AnimatedNumberProps>(({ value, duration = 500, formatter }) => {
+  const [displayValue, setDisplayValue] = useState(value);
+  const frameRef = useRef<number>(undefined);
+  const startTimeRef = useRef<number>(undefined);
+  const startValueRef = useRef(value);
+
+  useEffect(() => {
+    const startValue = startValueRef.current;
+    const diff = value - startValue;
+
+    if (diff === 0) return;
+
+    const animate = (currentTime: number) => {
+      if (!startTimeRef.current) {
+        startTimeRef.current = currentTime;
+      }
+
+      const elapsed = currentTime - startTimeRef.current;
+      const progress = Math.min(elapsed / duration, 1);
+
+      // easeOutCubic
+      const easeProgress = 1 - (1 - progress) ** 3;
+      const current = startValue + diff * easeProgress;
+
+      setDisplayValue(current);
+
+      if (progress < 1) {
+        frameRef.current = requestAnimationFrame(animate);
+      } else {
+        startValueRef.current = value;
+        startTimeRef.current = undefined;
+      }
+    };
+
+    frameRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      if (frameRef.current) {
+        cancelAnimationFrame(frameRef.current);
+      }
+    };
+  }, [value, duration]);
+
+  return formatter ? formatter(displayValue) : Math.round(displayValue).toLocaleString();
+});
+
+AnimatedNumber.displayName = 'AnimatedNumber';

package/packages/builtin-tool-notebook/src/client/index.ts

@@ -1,6 +1,18 @@
+// Inspector components (customized tool call headers)
+export { NotebookInspectors } from './Inspector';
+
+// Intervention components (approval dialogs)
 export { NotebookInterventions } from './Intervention';
+
+// Placeholder components (loading states)
+export { CreateDocumentPlaceholder, NotebookPlaceholders } from './Placeholder';
+
+// Render components (read-only snapshots)
 export { CreateDocument, NotebookRenders } from './Render';
 
+// Streaming components
+export { NotebookStreamings } from './Streaming';
+
 // Re-export types and manifest for convenience
 export { NotebookManifest } from '../manifest';
 export * from '../types';

package/packages/builtin-tool-notebook/src/systemRole.ts

@@ -34,11 +34,12 @@ Note: The list of existing documents is automatically provided in the context, s
 </workflow>
 
 <best_practices>
-- Use descriptive titles that summarize the content
+- Use clean, concise titles without decorations or suffixes (e.g., use "The Last Letter" instead of "《The Last Letter》 - Short Story")
 - Choose appropriate document types based on content nature
 - For long content, consider breaking into multiple documents
 - Use append mode when adding to existing documents
 - Always confirm before deleting documents
+- Do NOT include h1 headings in document content (the title field already serves as the document title)
 </best_practices>
 
 <response_format>