support params

src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/index.tsx

@@ -14,10 +14,10 @@ const leftActions = [
   'model',
   'fileUpload',
   'knowledgeBase',
-  'temperature',
   'history',
   'stt',
   'tools',
+  'params',
   'mainToken',
 ] as ActionKeys[];
 

src/components/InfoTooltip/index.tsx

@@ -0,0 +1,25 @@
+import { Icon, Tooltip, TooltipProps } from '@lobehub/ui';
+import { IconSizeType } from '@lobehub/ui/es/Icon';
+import { useTheme } from 'antd-style';
+import { CircleHelp } from 'lucide-react';
+import { CSSProperties, memo } from 'react';
+
+interface InfoTooltipProps extends Omit<TooltipProps, 'children'> {
+  iconStyle?: CSSProperties;
+  size?: IconSizeType;
+}
+
+const InfoTooltip = memo<InfoTooltipProps>(({ size, iconStyle, ...res }) => {
+  const theme = useTheme();
+  return (
+    <Tooltip {...res}>
+      <Icon
+        icon={CircleHelp}
+        size={size}
+        style={{ color: theme.colorTextTertiary, ...iconStyle }}
+      />
+    </Tooltip>
+  );
+});
+
+export default InfoTooltip;

src/components/Loading/UpdateLoading/index.tsx

@@ -0,0 +1,19 @@
+import { Icon } from '@lobehub/ui';
+import { IconSizeType } from '@lobehub/ui/es/Icon';
+import { Loader2 } from 'lucide-react';
+import { CSSProperties, memo } from 'react';
+
+interface UpdateLoadingProps {
+  size?: IconSizeType;
+  style?: CSSProperties;
+}
+
+const UpdateLoading = memo<UpdateLoadingProps>(({ size, style }) => {
+  return (
+    <div style={style}>
+      <Icon icon={Loader2} size={size} spin />
+    </div>
+  );
+});
+
+export default UpdateLoading;

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

@@ -0,0 +1,95 @@
+import { Form, Tag } from '@lobehub/ui';
+import type { FormItemProps } from '@lobehub/ui/es/Form/components/FormItem';
+import isEqual from 'fast-deep-equal';
+import { debounce } from 'lodash-es';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import InfoTooltip from '@/components/InfoTooltip';
+import {
+  FrequencyPenalty,
+  PresencePenalty,
+  Temperature,
+  TopP,
+} from '@/features/ModelParamsControl';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+
+interface ParamsControlsProps {
+  setUpdating: (updating: boolean) => void;
+}
+const ParamsControls = memo<ParamsControlsProps>(({ setUpdating }) => {
+  const { t } = useTranslation('setting');
+
+  const updateAgentConfig = useAgentStore((s) => s.updateAgentConfig);
+
+  const config = useAgentStore(agentSelectors.currentAgentConfig, isEqual);
+
+  const items: FormItemProps[] = [
+    {
+      children: <Temperature />,
+      desc: <Tag>temperature</Tag>,
+      label: (
+        <Flexbox gap={8} horizontal>
+          {t('settingModel.temperature.title')}
+          <InfoTooltip title={t('settingModel.temperature.desc')} />
+        </Flexbox>
+      ),
+      name: ['params', 'temperature'],
+    },
+    {
+      children: <TopP />,
+      desc: <Tag>top_p</Tag>,
+      label: (
+        <Flexbox gap={8} horizontal>
+          {t('settingModel.topP.title')}
+          <InfoTooltip title={t('settingModel.topP.desc')} />
+        </Flexbox>
+      ),
+      name: ['params', 'top_p'],
+    },
+    {
+      children: <PresencePenalty />,
+      desc: <Tag>presence_penalty</Tag>,
+      label: (
+        <Flexbox gap={8} horizontal>
+          {t('settingModel.presencePenalty.title')}
+          <InfoTooltip title={t('settingModel.presencePenalty.desc')} />
+        </Flexbox>
+      ),
+      name: ['params', 'presence_penalty'],
+    },
+    {
+      children: <FrequencyPenalty />,
+      desc: <Tag>frequency_penalty</Tag>,
+      label: (
+        <Flexbox gap={8} horizontal>
+          {t('settingModel.frequencyPenalty.title')}
+          <InfoTooltip title={t('settingModel.frequencyPenalty.desc')} />
+        </Flexbox>
+      ),
+      name: ['params', 'frequency_penalty'],
+    },
+  ];
+
+  return (
+    <Form
+      initialValues={config}
+      itemMinWidth={200}
+      items={items}
+      itemsType={'flat'}
+      onValuesChange={debounce(async (values) => {
+        setUpdating(true);
+        console.log(values);
+        await updateAgentConfig(values);
+        setUpdating(false);
+      }, 500)}
+      size={'small'}
+      style={{ fontSize: 12 }}
+      variant={'pure'}
+    />
+  );
+});
+
+export default ParamsControls;

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

@@ -0,0 +1,47 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Popover } from 'antd';
+import { useTheme } from 'antd-style';
+import { Settings2Icon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import UpdateLoading from '@/components/Loading/UpdateLoading';
+
+import ParamsControls from './ParamsControls';
+
+const Params = memo(() => {
+  const { t } = useTranslation('setting');
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [isUpdating, setUpdating] = useState(false);
+
+  const theme = useTheme();
+  return (
+    <Popover
+      arrow={false}
+      content={<ParamsControls setUpdating={setUpdating} />}
+      onOpenChange={setPopoverOpen}
+      open={popoverOpen}
+      placement={'top'}
+      styles={{
+        body: { minWidth: 400 },
+      }}
+      title={
+        <Flexbox horizontal justify={'space-between'}>
+          {t('settingModel.params.title')}
+
+          {isUpdating && <UpdateLoading style={{ color: theme.colorTextSecondary }} />}
+        </Flexbox>
+      }
+      trigger={'click'}
+    >
+      <ActionIcon
+        icon={Settings2Icon}
+        placement={'bottom'}
+        title={popoverOpen ? undefined : t('settingModel.temperature.title')}
+      />
+    </Popover>
+  );
+});
+
+export default Params;

src/features/ChatInput/ActionBar/config.ts

@@ -3,7 +3,7 @@ import Clear from './Clear';
 import History from './History';
 import Knowledge from './Knowledge';
 import ModelSwitch from './ModelSwitch';
-import Temperature from './Temperature';
+import Params from './Params';
 import { MainToken, PortalToken } from './Token';
 import Tools from './Tools';
 import Upload from './Upload';
@@ -15,9 +15,10 @@ export const actionMap = {
   knowledgeBase: Knowledge,
   mainToken: MainToken,
   model: ModelSwitch,
+  params: Params,
   portalToken: PortalToken,
   stt: STT,
-  temperature: Temperature,
+  temperature: Params,
   tools: Tools,
 } as const;
 

src/features/ChatInput/Mobile/index.tsx

@@ -20,9 +20,9 @@ const defaultLeftActions: ActionKeys[] = [
   'model',
   'fileUpload',
   'knowledgeBase',
-  'temperature',
   'history',
   'tools',
+  'params',
   'mainToken',
 ];
 

src/features/ModelParamsControl/FrequencyPenalty.tsx

@@ -0,0 +1,37 @@
+import { Icon, SliderWithInput } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { BookOpenText, FileIcon } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+interface FrequencyPenaltyProps {
+  onChange?: (value: number) => void;
+  value?: number;
+}
+
+const FrequencyPenalty = memo<FrequencyPenaltyProps>(({ value, onChange }) => {
+  const theme = useTheme();
+
+  return (
+    <Flexbox style={{ paddingInlineStart: 8 }}>
+      <SliderWithInput
+        marks={{
+          '-2': (
+            <Icon icon={FileIcon} size={'small'} style={{ color: theme.colorTextQuaternary }} />
+          ),
+          0: <div />,
+          2: (
+            <Icon icon={BookOpenText} size={'small'} style={{ color: theme.colorTextQuaternary }} />
+          ),
+        }}
+        max={2}
+        min={-2}
+        onChange={onChange}
+        size={'small'}
+        step={0.1}
+        value={value}
+      />
+    </Flexbox>
+  );
+});
+export default FrequencyPenalty;

src/features/ModelParamsControl/PresencePenalty.tsx

@@ -0,0 +1,35 @@
+import { Icon, SliderWithInput } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { AtomIcon, RepeatIcon } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+interface PresencePenaltyProps {
+  onChange?: (value: number) => void;
+  value?: number;
+}
+
+const PresencePenalty = memo<PresencePenaltyProps>(({ value, onChange }) => {
+  const theme = useTheme();
+
+  return (
+    <Flexbox style={{ paddingInlineStart: 8 }}>
+      <SliderWithInput
+        marks={{
+          '-2': (
+            <Icon icon={RepeatIcon} size={'small'} style={{ color: theme.colorTextQuaternary }} />
+          ),
+          0: <div />,
+          2: <Icon icon={AtomIcon} size={'small'} style={{ color: theme.colorTextQuaternary }} />,
+        }}
+        max={2}
+        min={-2}
+        onChange={onChange}
+        size={'small'}
+        step={0.1}
+        value={value}
+      />
+    </Flexbox>
+  );
+});
+export default PresencePenalty;