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

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # 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>

package/changelog/v1.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.282",
+  "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/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/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,