@lobehub/chat 1.120.3 → 1.120.4

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.120.4](https://github.com/lobehub/lobe-chat/compare/v1.120.3...v1.120.4)
+
+<sup>Released on **2025-09-01**</sup>
+
+#### 💄 Styles
+
+- **misc**: Adjust ControlsForm component to adapt to mobile phone display.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Adjust ControlsForm component to adapt to mobile phone display, closes [#9013](https://github.com/lobehub/lobe-chat/issues/9013) ([c6038c0](https://github.com/lobehub/lobe-chat/commit/c6038c0))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.120.3](https://github.com/lobehub/lobe-chat/compare/v1.120.2...v1.120.3)
 
 <sup>Released on **2025-09-01**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Adjust ControlsForm component to adapt to mobile phone display."
+      ]
+    },
+    "date": "2025-09-01",
+    "version": "1.120.4"
+  },
   {
     "children": {
       "improvements": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.120.3",
+  "version": "1.120.4",
   "description": "Lobe Chat - an open-source, high-performance chatbot 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/src/features/ChatInput/ActionBar/Model/ControlsForm.tsx

@@ -1,6 +1,6 @@
 import { Form } from '@lobehub/ui';
 import type { FormItemProps } from '@lobehub/ui';
-import { Form as AntdForm, Switch } from 'antd';
+import { Form as AntdForm, Switch, Grid } from 'antd';
 import isEqual from 'fast-deep-equal';
 import Link from 'next/link';
 import { memo } from 'react';
@@ -32,11 +32,21 @@ const ControlsForm = memo(() => {
 
   const modelExtendParams = useAiInfraStore(aiModelSelectors.modelExtendParams(model, provider));
 
+  const screens = Grid.useBreakpoint();
+  const isNarrow = !screens.sm;
+
+  const descWide = { display: 'inline-block', width: 300 } as const;
+  const descNarrow = {
+    display: 'block',
+    maxWidth: '100%',
+    whiteSpace: 'normal',
+  } as const;
+
   const items = [
     {
       children: <ContextCachingSwitch />,
       desc: (
-        <span style={{ display: 'inline-block', width: 300 }}>
+        <span style={isNarrow ? descNarrow : descWide}>
           <Trans i18nKey={'extendParams.disableContextCaching.desc'} ns={'chat'}>
             单条对话生成成本最高可降低 90%，响应速度提升 4 倍（
             <Link
@@ -50,13 +60,14 @@ const ControlsForm = memo(() => {
         </span>
       ),
       label: t('extendParams.disableContextCaching.title'),
+      layout: isNarrow ? 'vertical' : 'horizontal',
       minWidth: undefined,
       name: 'disableContextCaching',
     },
     {
       children: <Switch />,
       desc: (
-        <span style={{ display: 'inline-block', width: 300 }}>
+        <span style={isNarrow ? descNarrow : descWide}>
           <Trans i18nKey={'extendParams.enableReasoning.desc'} ns={'chat'}>
             基于 Claude Thinking 机制限制（
             <Link
@@ -72,7 +83,7 @@ const ControlsForm = memo(() => {
         </span>
       ),
       label: t('extendParams.enableReasoning.title'),
-      layout: 'horizontal',
+      layout: isNarrow ? 'vertical' : 'horizontal',
       minWidth: undefined,
       name: 'enableReasoning',
     },
@@ -132,14 +143,16 @@ const ControlsForm = memo(() => {
     },
     {
       children: <Switch />,
-      desc: t('extendParams.urlContext.desc'),
+      desc: isNarrow ? (
+        <span style={descNarrow}>{t('extendParams.urlContext.desc')}</span>
+      ) : (
+        t('extendParams.urlContext.desc')
+      ),
       label: t('extendParams.urlContext.title'),
-      layout: 'horizontal',
+      layout: isNarrow ? 'vertical' : 'horizontal',
       minWidth: undefined,
       name: 'urlContext',
-      style: {
-        width: 445,
-      },
+      style: isNarrow ? undefined : { width: 445 },
       tag: 'urlContext',
     },
     {