@lobehub/chat 1.55.3 → 1.55.4

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.55.4](https://github.com/lobehub/lobe-chat/compare/v1.55.3...v1.55.4)
+
+<sup>Released on **2025-02-15**</sup>
+
+#### 💄 Styles
+
+- **misc**: Improve mobile params style.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Improve mobile params style, closes [#6176](https://github.com/lobehub/lobe-chat/issues/6176) ([b5276de](https://github.com/lobehub/lobe-chat/commit/b5276de))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.55.3](https://github.com/lobehub/lobe-chat/compare/v1.55.2...v1.55.3)
 
 <sup>Released on **2025-02-15**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Improve mobile params style."
+      ]
+    },
+    "date": "2025-02-15",
+    "version": "1.55.4"
+  },
   {
     "children": {
       "improvements": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.55.3",
+  "version": "1.55.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",
@@ -126,13 +126,13 @@
     "@lobehub/chat-plugins-gateway": "^1.9.0",
     "@lobehub/icons": "^1.69.0",
     "@lobehub/tts": "^1.28.0",
-    "@lobehub/ui": "^1.164.10",
+    "@lobehub/ui": "^1.164.15",
     "@neondatabase/serverless": "^0.10.4",
     "@next/third-parties": "^15.1.4",
     "@react-spring/web": "^9.7.5",
     "@sentry/nextjs": "^7.120.2",
     "@serwist/next": "^9.0.11",
-    "@t3-oss/env-nextjs": "^0.11.1",
+    "@t3-oss/env-nextjs": "^0.12.0",
     "@tanstack/react-query": "^5.62.16",
     "@trpc/client": "next",
     "@trpc/next": "next",

package/src/features/ChatInput/ActionBar/Params/ParamsControls.tsx

@@ -1,5 +1,6 @@
 import { Form, Tag } from '@lobehub/ui';
 import type { FormItemProps } from '@lobehub/ui/es/Form/components/FormItem';
+import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { debounce } from 'lodash-es';
 import { memo } from 'react';
@@ -16,10 +17,20 @@ import {
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    .ant-form-group {
+      padding-inline: 0;
+      background: transparent;
+    }
+  `,
+}));
+
 interface ParamsControlsProps {
   setUpdating: (updating: boolean) => void;
 }
 const ParamsControls = memo<ParamsControlsProps>(({ setUpdating }) => {
+  const { styles } = useStyles();
   const { t } = useTranslation('setting');
 
   const updateAgentConfig = useAgentStore((s) => s.updateAgentConfig);
@@ -75,13 +86,13 @@ const ParamsControls = memo<ParamsControlsProps>(({ setUpdating }) => {
 
   return (
     <Form
+      className={styles.container}
       initialValues={config}
       itemMinWidth={200}
       items={items}
       itemsType={'flat'}
       onValuesChange={debounce(async (values) => {
         setUpdating(true);
-        console.log(values);
         await updateAgentConfig(values);
         setUpdating(false);
       }, 500)}

package/src/features/ChatInput/ActionBar/Params/index.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import UpdateLoading from '@/components/Loading/UpdateLoading';
+import { useIsMobile } from '@/hooks/useIsMobile';
 
 import ParamsControls from './ParamsControls';
 
@@ -16,6 +17,7 @@ const Params = memo(() => {
   const [isUpdating, setUpdating] = useState(false);
 
   const theme = useTheme();
+  const isMobile = useIsMobile();
   return (
     <Popover
       arrow={false}
@@ -24,7 +26,10 @@ const Params = memo(() => {
       open={popoverOpen}
       placement={'top'}
       styles={{
-        body: { minWidth: 400 },
+        body: {
+          minWidth: isMobile ? undefined : 400,
+          width: isMobile ? '100vw' : undefined,
+        },
       }}
       title={
         <Flexbox horizontal justify={'space-between'}>