@lobehub/lobehub 2.0.0-next.281 → 2.0.0-next.283

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+## [Version 2.0.0-next.283](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.282...v2.0.0-next.283)
+
+<sup>Released on **2026-01-14**</sup>
+
+#### 💄 Styles
+
+- **misc**: Fix UI issues with tooltip wrapping and dropdown type.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Fix UI issues with tooltip wrapping and dropdown type, closes [#11495](https://github.com/lobehub/lobe-chat/issues/11495) ([9d90eba](https://github.com/lobehub/lobe-chat/commit/9d90eba))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 2.0.0-next.282](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.281...v2.0.0-next.282)
+
+<sup>Released on **2026-01-14**</sup>
+
+#### 💄 Styles
+
+- **misc**: Update readFile content.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Update readFile content, closes [#11485](https://github.com/lobehub/lobe-chat/issues/11485) ([050499b](https://github.com/lobehub/lobe-chat/commit/050499b))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.281](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.280...v2.0.0-next.281)
 
 <sup>Released on **2026-01-14**</sup>

package/changelog/v1.json

@@ -1,4 +1,22 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Fix UI issues with tooltip wrapping and dropdown type."
+      ]
+    },
+    "date": "2026-01-14",
+    "version": "2.0.0-next.283"
+  },
+  {
+    "children": {
+      "improvements": [
+        "Update readFile content."
+      ]
+    },
+    "date": "2026-01-14",
+    "version": "2.0.0-next.282"
+  },
   {
     "children": {
       "fixes": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.281",
+  "version": "2.0.0-next.283",
   "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",
@@ -206,7 +206,7 @@
     "@lobehub/icons": "^4.0.2",
     "@lobehub/market-sdk": "0.28.1",
     "@lobehub/tts": "^4.0.2",
-    "@lobehub/ui": "^4.18.0",
+    "@lobehub/ui": "^4.19.0",
     "@modelcontextprotocol/sdk": "^1.25.1",
     "@neondatabase/serverless": "^1.0.2",
     "@next/third-parties": "^16.1.1",

package/packages/builtin-tool-local-system/src/client/Inspector/ReadLocalFile/index.tsx

@@ -2,8 +2,8 @@
 
 import { type LocalReadFileParams } from '@lobechat/electron-client-ipc';
 import { type BuiltinInspectorProps } from '@lobechat/types';
-import { cx } from 'antd-style';
-import { memo } from 'react';
+import { createStaticStyles, cx } from 'antd-style';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { inspectorTextStyles, shinyTextStyles } from '@/styles';
@@ -11,12 +11,28 @@ import { inspectorTextStyles, shinyTextStyles } from '@/styles';
 import { type LocalReadFileState } from '../../..';
 import { FilePathDisplay } from '../../components/FilePathDisplay';
 
+const styles = createStaticStyles(({ css }) => ({
+  lineRange: css`
+    flex-shrink: 0;
+    margin-inline-start: 4px;
+    opacity: 0.7;
+  `,
+}));
+
 export const ReadLocalFileInspector = memo<
   BuiltinInspectorProps<LocalReadFileParams, LocalReadFileState>
 >(({ args, partialArgs, isArgumentsStreaming, isLoading }) => {
   const { t } = useTranslation('plugin');
 
   const filePath = args?.path || partialArgs?.path || '';
+  const loc = args?.loc || partialArgs?.loc;
+
+  // Format line range display, e.g., "L1-L200"
+  const lineRangeText = useMemo(() => {
+    if (!loc || loc.length !== 2) return null;
+    const [start, end] = loc;
+    return `L${start + 1}-L${end}`;
+  }, [loc]);
 
   // During argument streaming
   if (isArgumentsStreaming) {
@@ -31,6 +47,7 @@ export const ReadLocalFileInspector = memo<
       <div className={cx(inspectorTextStyles.root, shinyTextStyles.shinyText)}>
         <span>{t('builtins.lobe-local-system.apiName.readLocalFile')}: </span>
         <FilePathDisplay filePath={filePath} />
+        {lineRangeText && <span className={styles.lineRange}>{lineRangeText}</span>}
       </div>
     );
   }
@@ -39,6 +56,7 @@ export const ReadLocalFileInspector = memo<
     <div className={cx(inspectorTextStyles.root, isLoading && shinyTextStyles.shinyText)}>
       <span>{t('builtins.lobe-local-system.apiName.readLocalFile')}: </span>
       <FilePathDisplay filePath={filePath} />
+      {lineRangeText && <span className={styles.lineRange}>{lineRangeText}</span>}
     </div>
   );
 });

package/packages/observability-otel/src/node.ts

@@ -60,16 +60,53 @@ export function attributesCommon(): DetectedResourceAttributes {
   }
 }
 
-export function register(options?: { debug?: true | DiagLogLevel; version?: string }) {
+function debugLogLevelFromString(level?: string | null): DiagLogLevel | undefined {
+  if (!level) {
+    return undefined;
+  }
+  if (typeof level !== 'string') {
+    return undefined;
+  }
+
+  switch (level.toLowerCase()) {
+    case 'none':
+      return DiagLogLevel.NONE;
+    case 'error':
+      return DiagLogLevel.ERROR;
+    case 'warn':
+      return DiagLogLevel.WARN;
+    case 'info':
+      return DiagLogLevel.INFO;
+    case 'debug':
+      return DiagLogLevel.DEBUG;
+    case 'verbose':
+      return DiagLogLevel.VERBOSE;
+    case 'all':
+      return DiagLogLevel.ALL;
+    default:
+      return undefined;
+  }
+}
+
+export function register(options?: { debug?: true | DiagLogLevel; name?: string; version?: string }) {
   const attributes = attributesCommon();
 
+  if (typeof options?.name !== 'undefined') {
+    attributes[ATTR_SERVICE_NAME] = options.name;
+  }
   if (typeof options?.version !== 'undefined') {
     attributes[ATTR_SERVICE_VERSION] = options.version;
   }
-  if (typeof options?.debug !== 'undefined') {
+  if (typeof options?.debug !== 'undefined' || env.OTEL_JS_LOBEHUB_DIAG) {
+    const levelFromEnv = debugLogLevelFromString(env.OTEL_JS_LOBEHUB_DIAG);
+
     diag.setLogger(
       new DiagConsoleLogger(),
-      options.debug === true ? DiagLogLevel.DEBUG : options.debug,
+      !!levelFromEnv
+        ? levelFromEnv
+        : options?.debug === true
+          ? DiagLogLevel.DEBUG
+          : options?.debug,
     );
   }
 

package/src/app/[variants]/(main)/agent/features/Conversation/Header/HeaderActions/useMenu.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import { type DropdownMenuCheckboxItem } from '@lobehub/ui';
+import type { DropdownItem } from '@lobehub/ui/es/DropdownMenu/type';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 
-export const useMenu = (): { menuItems: DropdownMenuCheckboxItem[] } => {
+export const useMenu = (): { menuItems: DropdownItem[] } => {
   const { t } = useTranslation('chat');
 
   const [wideScreen, toggleWideScreen] = useGlobalStore((s) => [
@@ -15,14 +15,14 @@ export const useMenu = (): { menuItems: DropdownMenuCheckboxItem[] } => {
     s.toggleWideScreen,
   ]);
 
-  const menuItems = useMemo<DropdownMenuCheckboxItem[]>(
+  const menuItems = useMemo<DropdownItem[]>(
     () => [
       {
         checked: wideScreen,
         key: 'full-width',
         label: t('viewMode.fullWidth'),
         onCheckedChange: toggleWideScreen,
-        type: 'checkbox',
+        type: 'switch',
       },
     ],
     [t, wideScreen, toggleWideScreen],

package/src/app/[variants]/(main)/community/(detail)/model/features/Details/Overview/ProviderList/index.tsx

@@ -74,6 +74,7 @@ const ProviderList = memo(() => {
                   : record.model?.maxDimension
                     ? formatTokenNumber(record.model.maxDimension)
                     : '--',
+              showSorterTooltip: false,
               sorter: (a, b) => {
                 const aValue = a.model?.maxOutput || a.model?.maxDimension || 0;
                 const bValue = b.model?.maxOutput || b.model?.maxDimension || 0;
@@ -81,7 +82,7 @@ const ProviderList = memo(() => {
               },
               title: (
                 <Tooltip title={t('models.providerInfo.maxOutputTooltip')}>
-                  {t('models.providerInfo.maxOutput')}
+                  <span>{t('models.providerInfo.maxOutput')}</span>
                 </Tooltip>
               ),
               width: 120,
@@ -95,6 +96,7 @@ const ProviderList = memo(() => {
                   ? '$' + formatPriceByCurrency(inputRate, record.model.pricing?.currency)
                   : '--';
               },
+              showSorterTooltip: false,
               sorter: (a, b) => {
                 const aRate = getTextInputUnitRate(a.model?.pricing) || 0;
                 const bRate = getTextInputUnitRate(b.model?.pricing) || 0;
@@ -102,7 +104,7 @@ const ProviderList = memo(() => {
               },
               title: (
                 <Tooltip title={t('models.providerInfo.inputTooltip')}>
-                  {t('models.providerInfo.input')}
+                  <span>{t('models.providerInfo.input')}</span>
                 </Tooltip>
               ),
               width: 100,
@@ -116,6 +118,7 @@ const ProviderList = memo(() => {
                   ? '$' + formatPriceByCurrency(outputRate, record.model.pricing?.currency)
                   : '--';
               },
+              showSorterTooltip: false,
               sorter: (a, b) => {
                 const aRate = getTextOutputUnitRate(a.model?.pricing) || 0;
                 const bRate = getTextOutputUnitRate(b.model?.pricing) || 0;
@@ -123,7 +126,7 @@ const ProviderList = memo(() => {
               },
               title: (
                 <Tooltip title={t('models.providerInfo.outputTooltip')}>
-                  {t('models.providerInfo.output')}
+                  <span>{t('models.providerInfo.output')}</span>
                 </Tooltip>
               ),
               width: 100,

package/src/app/[variants]/(main)/community/(detail)/provider/features/Details/Overview/ModelList/index.tsx

@@ -72,10 +72,11 @@ const ModelList = memo(() => {
               key: 'maxOutput',
               render: (_, record) =>
                 record.maxOutput ? formatTokenNumber(record.maxOutput) : '--',
+              showSorterTooltip: false,
               sorter: (a, b) => (a.maxOutput || 0) - (b.maxOutput || 0),
               title: (
                 <Tooltip title={t('models.providerInfo.maxOutputTooltip')}>
-                  {t('models.providerInfo.maxOutput')}
+                  <span>{t('models.providerInfo.maxOutput')}</span>
                 </Tooltip>
               ),
               width: 120,
@@ -89,6 +90,7 @@ const ModelList = memo(() => {
                   ? '$' + formatPriceByCurrency(inputRate, record.pricing?.currency)
                   : '--';
               },
+              showSorterTooltip: false,
               sorter: (a, b) => {
                 const aRate = getTextInputUnitRate(a.pricing) || 0;
                 const bRate = getTextInputUnitRate(b.pricing) || 0;
@@ -96,7 +98,7 @@ const ModelList = memo(() => {
               },
               title: (
                 <Tooltip title={t('models.providerInfo.inputTooltip')}>
-                  {t('models.providerInfo.input')}
+                  <span>{t('models.providerInfo.input')}</span>
                 </Tooltip>
               ),
               width: 100,
@@ -110,6 +112,7 @@ const ModelList = memo(() => {
                   ? '$' + formatPriceByCurrency(outputRate, record.pricing?.currency)
                   : '--';
               },
+              showSorterTooltip: false,
               sorter: (a, b) => {
                 const aRate = getTextOutputUnitRate(a.pricing) || 0;
                 const bRate = getTextOutputUnitRate(b.pricing) || 0;
@@ -117,7 +120,7 @@ const ModelList = memo(() => {
               },
               title: (
                 <Tooltip title={t('models.providerInfo.outputTooltip')}>
-                  {t('models.providerInfo.output')}
+                  <span>{t('models.providerInfo.output')}</span>
                 </Tooltip>
               ),
               width: 100,

package/src/features/Conversation/Messages/components/Extras/Usage/UsageDetail/ModelCard.tsx

@@ -70,7 +70,7 @@ const ModelCard = memo<ModelCardProps>(({ pricing, id, provider, displayName })
                 {
                   label: (
                     <Tooltip title={t('messages.modelCard.creditTooltip')}>
-                      {t('messages.modelCard.credit')}
+                      <span>{t('messages.modelCard.credit')}</span>
                     </Tooltip>
                   ),
                   value: 'credit',

package/src/features/EditorModal/EditorCanvas.tsx

@@ -0,0 +1,62 @@
+import {
+  IEditor,
+  ReactCodePlugin,
+  ReactCodemirrorPlugin,
+  ReactHRPlugin,
+  ReactLinkPlugin,
+  ReactListPlugin,
+  ReactMathPlugin,
+  ReactTablePlugin,
+} from '@lobehub/editor';
+import { Editor } from '@lobehub/editor/react';
+import { Flexbox } from '@lobehub/ui';
+import { FC } from 'react';
+
+import TypoBar from './Typobar';
+
+interface EditorCanvasProps {
+  defaultValue?: string;
+  editor?: IEditor;
+}
+
+const EditorCanvas: FC<EditorCanvasProps> = ({ defaultValue, editor }) => {
+  return (
+    <>
+      <TypoBar editor={editor} />
+      <Flexbox
+        padding={16}
+        style={{ cursor: 'text', maxHeight: '80vh', minHeight: '50vh', overflowY: 'auto' }}
+      >
+        <Editor
+          autoFocus
+          content={''}
+          editor={editor}
+          onInit={(editor) => {
+            if (!editor || !defaultValue) return;
+            try {
+              editor?.setDocument('markdown', defaultValue);
+            } catch (e) {
+              console.error('setDocument error:', e);
+            }
+          }}
+          plugins={[
+            ReactListPlugin,
+            ReactCodePlugin,
+            ReactCodemirrorPlugin,
+            ReactHRPlugin,
+            ReactLinkPlugin,
+            ReactTablePlugin,
+            ReactMathPlugin,
+          ]}
+          style={{
+            paddingBottom: 120,
+          }}
+          type={'text'}
+          variant={'chat'}
+        />
+      </Flexbox>
+    </>
+  );
+};
+
+export default EditorCanvas;

package/src/features/EditorModal/TextArea.tsx

@@ -0,0 +1,30 @@
+import { TextArea } from '@lobehub/ui';
+import { FC } from 'react';
+
+interface EditorCanvasProps {
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  value?: string;
+}
+
+const EditorCanvas: FC<EditorCanvasProps> = ({ defaultValue, value, onChange }) => {
+  return (
+    <TextArea
+      defaultValue={defaultValue}
+      onChange={(e) => {
+        onChange?.(e.target.value);
+      }}
+      style={{
+        cursor: 'text',
+        maxHeight: '80vh',
+        minHeight: '50vh',
+        overflowY: 'auto',
+        padding: 16,
+      }}
+      value={value}
+      variant={'borderless'}
+    />
+  );
+};
+
+export default EditorCanvas;

package/src/features/EditorModal/Typobar.tsx

@@ -0,0 +1,139 @@
+import { HotkeyEnum, type IEditor, getHotkeyById } from '@lobehub/editor';
+import { useEditorState } from '@lobehub/editor/react';
+import {
+  ChatInputActionBar,
+  ChatInputActions,
+  type ChatInputActionsProps,
+} from '@lobehub/editor/react';
+import { cssVar } from 'antd-style';
+import {
+  BoldIcon,
+  CodeXmlIcon,
+  ItalicIcon,
+  ListIcon,
+  ListOrderedIcon,
+  ListTodoIcon,
+  MessageSquareQuote,
+  SigmaIcon,
+  SquareDashedBottomCodeIcon,
+  StrikethroughIcon,
+  UnderlineIcon,
+} from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const TypoBar = memo<{ editor?: IEditor }>(({ editor }) => {
+  const { t } = useTranslation('editor');
+  const editorState = useEditorState(editor);
+
+  const items: ChatInputActionsProps['items'] = useMemo(
+    () =>
+      [
+        {
+          active: editorState.isBold,
+          icon: BoldIcon,
+          key: 'bold',
+          label: t('typobar.bold'),
+          onClick: editorState.bold,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Bold).keys },
+        },
+        {
+          active: editorState.isItalic,
+          icon: ItalicIcon,
+          key: 'italic',
+          label: t('typobar.italic'),
+          onClick: editorState.italic,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Italic).keys },
+        },
+        {
+          active: editorState.isUnderline,
+          icon: UnderlineIcon,
+          key: 'underline',
+          label: t('typobar.underline'),
+          onClick: editorState.underline,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Underline).keys },
+        },
+        {
+          active: editorState.isStrikethrough,
+          icon: StrikethroughIcon,
+          key: 'strikethrough',
+          label: t('typobar.strikethrough'),
+          onClick: editorState.strikethrough,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Strikethrough).keys },
+        },
+        {
+          type: 'divider',
+        },
+
+        {
+          icon: ListIcon,
+          key: 'bulletList',
+          label: t('typobar.bulletList'),
+          onClick: editorState.bulletList,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.BulletList).keys },
+        },
+        {
+          icon: ListOrderedIcon,
+          key: 'numberlist',
+          label: t('typobar.numberList'),
+          onClick: editorState.numberList,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.NumberList).keys },
+        },
+        {
+          icon: ListTodoIcon,
+          key: 'tasklist',
+          label: t('typobar.taskList'),
+          onClick: editorState.checkList,
+        },
+        {
+          type: 'divider',
+        },
+        {
+          active: editorState.isBlockquote,
+          icon: MessageSquareQuote,
+          key: 'blockquote',
+          label: t('typobar.blockquote'),
+          onClick: editorState.blockquote,
+        },
+        {
+          type: 'divider',
+        },
+        {
+          icon: SigmaIcon,
+          key: 'math',
+          label: t('typobar.tex'),
+          onClick: editorState.insertMath,
+        },
+        {
+          active: editorState.isCode,
+          icon: CodeXmlIcon,
+          key: 'code',
+          label: t('typobar.code'),
+          onClick: editorState.code,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.CodeInline).keys },
+        },
+        {
+          icon: SquareDashedBottomCodeIcon,
+          key: 'codeblock',
+          label: t('typobar.codeblock'),
+          onClick: editorState.codeblock,
+        },
+      ].filter(Boolean) as ChatInputActionsProps['items'],
+    [editorState],
+  );
+
+  return (
+    <ChatInputActionBar
+      left={<ChatInputActions items={items} />}
+      style={{
+        background: cssVar.colorFillQuaternary,
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+      }}
+    />
+  );
+});
+
+TypoBar.displayName = 'TypoBar';
+
+export default TypoBar;

package/src/features/EditorModal/index.tsx

@@ -3,7 +3,11 @@ import { Modal, ModalProps, createRawModal } from '@lobehub/ui';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { EditorCanvas } from '@/features/EditorCanvas';
+import { useUserStore } from '@/store/user';
+import { labPreferSelectors } from '@/store/user/selectors';
+
+import EditorCanvas from './EditorCanvas';
+import TextareCanvas from './TextArea';
 
 interface EditorModalProps extends ModalProps {
   onConfirm?: (value: string) => Promise<void>;
@@ -13,7 +17,8 @@ interface EditorModalProps extends ModalProps {
 export const EditorModal = memo<EditorModalProps>(({ value, onConfirm, ...rest }) => {
   const [confirmLoading, setConfirmLoading] = useState(false);
   const { t } = useTranslation('common');
-
+  const [v, setV] = useState(value);
+  const enableRichRender = useUserStore(labPreferSelectors.enableInputMarkdown);
   const editor = useEditor();
 
   return (
@@ -25,12 +30,13 @@ export const EditorModal = memo<EditorModalProps>(({ value, onConfirm, ...rest }
       okText={t('ok')}
       onOk={async () => {
         setConfirmLoading(true);
-        try {
-          await onConfirm?.((editor?.getDocument('markdown') as unknown as string) || '');
-        } catch (e) {
-          console.error('EditorModal onOk error:', e);
-          onConfirm?.(value || '');
+        let finalValue;
+        if (enableRichRender) {
+          finalValue = editor?.getDocument('markdown') as unknown as string;
+        } else {
+          finalValue = v;
         }
+        await onConfirm?.(finalValue || '');
         setConfirmLoading(false);
       }}
       styles={{
@@ -43,7 +49,11 @@ export const EditorModal = memo<EditorModalProps>(({ value, onConfirm, ...rest }
       width={'min(90vw, 920px)'}
       {...rest}
     >
-      <EditorCanvas editor={editor} editorData={{ content: value }} />
+      {enableRichRender ? (
+        <EditorCanvas defaultValue={value} editor={editor} />
+      ) : (
+        <TextareCanvas defaultValue={value} onChange={(v) => setV(v)} value={v} />
+      )}
     </Modal>
   );
 });

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

@@ -84,8 +84,7 @@ export const useMenu = (): { menuItems: any[] } => {
               key: 'full-width',
               label: t('viewMode.fullWidth', { ns: 'chat' }),
               onCheckedChange: toggleWideScreen,
-
-              type: 'checkbox' as const,
+              type: 'switch' as const,
             },
             {
               type: 'divider' as const,