@lobehub/lobehub 2.0.0-next.262 → 2.0.0-next.264

package/src/app/[variants]/(main)/settings/provider/features/ModelList/CreateNewModelModal/ExtendParamsSelect.tsx

@@ -0,0 +1,398 @@
+import { Flexbox } from '@lobehub/ui';
+import { Popover, Select, Space, Switch, Tag, Typography, theme } from 'antd';
+import type { ExtendParamsType } from 'model-bank';
+import { memo, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import GPT5ReasoningEffortSlider from '@/features/ChatInput/ActionBar/Model/GPT5ReasoningEffortSlider';
+import GPT51ReasoningEffortSlider from '@/features/ChatInput/ActionBar/Model/GPT51ReasoningEffortSlider';
+import GPT52ProReasoningEffortSlider from '@/features/ChatInput/ActionBar/Model/GPT52ProReasoningEffortSlider';
+import GPT52ReasoningEffortSlider from '@/features/ChatInput/ActionBar/Model/GPT52ReasoningEffortSlider';
+import ImageAspectRatioSelect from '@/features/ChatInput/ActionBar/Model/ImageAspectRatioSelect';
+import ImageResolutionSlider from '@/features/ChatInput/ActionBar/Model/ImageResolutionSlider';
+import ReasoningEffortSlider from '@/features/ChatInput/ActionBar/Model/ReasoningEffortSlider';
+import ReasoningTokenSlider from '@/features/ChatInput/ActionBar/Model/ReasoningTokenSlider';
+import TextVerbositySlider from '@/features/ChatInput/ActionBar/Model/TextVerbositySlider';
+import ThinkingBudgetSlider from '@/features/ChatInput/ActionBar/Model/ThinkingBudgetSlider';
+import ThinkingLevel2Slider from '@/features/ChatInput/ActionBar/Model/ThinkingLevel2Slider';
+import ThinkingLevelSlider from '@/features/ChatInput/ActionBar/Model/ThinkingLevelSlider';
+import ThinkingSlider from '@/features/ChatInput/ActionBar/Model/ThinkingSlider';
+
+type ExtendParamsOption = {
+  hintKey: string;
+  key: ExtendParamsType;
+};
+
+const EXTEND_PARAMS_OPTIONS: ExtendParamsOption[] = [
+  {
+    hintKey: 'providerModels.item.modelConfig.extendParams.options.disableContextCaching.hint',
+    key: 'disableContextCaching',
+  },
+  {
+    hintKey: 'providerModels.item.modelConfig.extendParams.options.enableReasoning.hint',
+    key: 'enableReasoning',
+  },
+  {
+    hintKey: 'providerModels.item.modelConfig.extendParams.options.reasoningBudgetToken.hint',
+    key: 'reasoningBudgetToken',
+  },
+  {
+    hintKey: 'providerModels.item.modelConfig.extendParams.options.reasoningEffort.hint',
+    key: 'reasoningEffort',
+  },
+  {
+    hintKey: 'providerModels.item.modelConfig.extendParams.options.gpt5ReasoningEffort.hint',
+    key: 'gpt5ReasoningEffort',
+  },
+  {
+    hintKey: 'providerModels.item.modelConfig.extendParams.options.gpt5_1ReasoningEffort.hint',
+    key: 'gpt5_1ReasoningEffort',
+  },
+  {
+    hintKey: 'providerModels.item.modelConfig.extendParams.options.gpt5_2ReasoningEffort.hint',
+    key: 'gpt5_2ReasoningEffort',
+  },
+  {
+    hintKey: 'providerModels.item.modelConfig.extendParams.options.gpt5_2ProReasoningEffort.hint',
+    key: 'gpt5_2ProReasoningEffort',
+  },
+  {
+    hintKey: 'providerModels.item.modelConfig.extendParams.options.textVerbosity.hint',
+    key: 'textVerbosity',
+  },
+  {
+    hintKey: 'providerModels.item.modelConfig.extendParams.options.thinking.hint',
+    key: 'thinking',
+  },
+  {
+    hintKey: 'providerModels.item.modelConfig.extendParams.options.thinkingBudget.hint',
+    key: 'thinkingBudget',
+  },
+  {
+    hintKey: 'providerModels.item.modelConfig.extendParams.options.thinkingLevel.hint',
+    key: 'thinkingLevel',
+  },
+  {
+    hintKey: 'providerModels.item.modelConfig.extendParams.options.thinkingLevel2.hint',
+    key: 'thinkingLevel2',
+  },
+  {
+    hintKey: 'providerModels.item.modelConfig.extendParams.options.urlContext.hint',
+    key: 'urlContext',
+  },
+  {
+    hintKey: 'providerModels.item.modelConfig.extendParams.options.imageAspectRatio.hint',
+    key: 'imageAspectRatio',
+  },
+  {
+    hintKey: 'providerModels.item.modelConfig.extendParams.options.imageResolution.hint',
+    key: 'imageResolution',
+  },
+];
+
+// Map variant keys to their base i18n title key (synced with ControlsForm.tsx)
+// This allows reusing existing i18n translations instead of adding new ones
+const TITLE_KEY_ALIASES: Partial<Record<ExtendParamsType, ExtendParamsType>> = {
+  gpt5ReasoningEffort: 'reasoningEffort',
+  gpt5_1ReasoningEffort: 'reasoningEffort',
+  gpt5_2ProReasoningEffort: 'reasoningEffort',
+  gpt5_2ReasoningEffort: 'reasoningEffort',
+  thinkingLevel2: 'thinkingLevel',
+};
+
+type PreviewMeta = {
+  labelOverride?: string;
+  labelSuffix?: string;
+  previewWidth?: number;
+  tag?: string;
+};
+
+const PREVIEW_META: Partial<Record<ExtendParamsType, PreviewMeta>> = {
+  disableContextCaching: { labelSuffix: ' (Claude)', previewWidth: 400 },
+  enableReasoning: { previewWidth: 300, tag: 'thinking.type' },
+  gpt5ReasoningEffort: { previewWidth: 300, tag: 'reasoning_effort' },
+  gpt5_1ReasoningEffort: { labelSuffix: ' (GPT-5.1)', previewWidth: 300, tag: 'reasoning_effort' },
+  gpt5_2ProReasoningEffort: {
+    labelSuffix: ' (GPT-5.2 Pro)',
+    previewWidth: 300,
+    tag: 'reasoning_effort',
+  },
+  gpt5_2ReasoningEffort: { labelSuffix: ' (GPT-5.2)', previewWidth: 300, tag: 'reasoning_effort' },
+  imageAspectRatio: { labelSuffix: '', previewWidth: 350, tag: 'aspect_ratio' },
+  imageResolution: { labelSuffix: '', previewWidth: 250, tag: 'resolution' },
+  reasoningBudgetToken: { previewWidth: 350, tag: 'thinking.budget_tokens' },
+  reasoningEffort: { previewWidth: 250, tag: 'reasoning_effort' },
+  textVerbosity: { labelSuffix: '', previewWidth: 250, tag: 'text_verbosity' },
+  thinking: { labelSuffix: ' (Doubao)', previewWidth: 300, tag: 'thinking.type' },
+  thinkingBudget: { labelSuffix: ' (Gemini)', previewWidth: 500, tag: 'thinkingBudget' },
+  thinkingLevel: { labelSuffix: ' (Gemini 3)', previewWidth: 280, tag: 'thinkingLevel' },
+  thinkingLevel2: { labelSuffix: ' (Gemini 3)', previewWidth: 200, tag: 'thinkingLevel' },
+  urlContext: { labelSuffix: ' (Gemini)', previewWidth: 400, tag: 'urlContext' },
+};
+
+type ExtendParamsDefinition = {
+  desc?: ReactNode;
+  hint: string;
+  key: ExtendParamsType;
+  label: string;
+  parameterTag?: string;
+  preview?: ReactNode;
+  previewWidth?: number;
+};
+
+interface ExtendParamsSelectProps {
+  onChange?: (value: ExtendParamsType[] | undefined) => void;
+  value?: ExtendParamsType[];
+}
+
+const PreviewContent = ({
+  desc,
+  hint,
+  label,
+  preview,
+  previewFallback,
+  parameterTag,
+  previewWidth,
+}: {
+  desc?: ReactNode;
+  hint: string;
+  label: string;
+  parameterTag?: string;
+  preview?: ReactNode;
+  previewFallback: string;
+  previewWidth?: number;
+}) => {
+  const { token } = theme.useToken();
+  const containerStyle = previewWidth
+    ? { minWidth: previewWidth, width: previewWidth }
+    : { minWidth: 240 };
+
+  return (
+    <Flexbox gap={12} style={containerStyle}>
+      <Typography.Text style={{ whiteSpace: 'normal' }} type={'secondary'}>
+        {hint}
+      </Typography.Text>
+      <Flexbox gap={12}>
+        <Flexbox
+          gap={8}
+          style={{
+            background: token.colorBgElevated,
+            border: `1px solid ${token.colorBorderSecondary}`,
+            borderRadius: 10,
+            padding: 12,
+            width: previewWidth,
+          }}
+        >
+          <Flexbox align={'center'} gap={8} horizontal>
+            <Typography.Text strong>{label}</Typography.Text>
+            {parameterTag ? <Tag color={'cyan'}>{parameterTag}</Tag> : null}
+          </Flexbox>
+          {desc ? (
+            <Typography.Text style={{ fontSize: 12, whiteSpace: 'normal' }} type={'secondary'}>
+              {desc}
+            </Typography.Text>
+          ) : null}
+          {preview ? (
+            <div style={{ pointerEvents: 'none', width: '100%' }}>{preview}</div>
+          ) : (
+            <Typography.Text type={'secondary'}>{previewFallback}</Typography.Text>
+          )}
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+const ExtendParamsSelect = memo<ExtendParamsSelectProps>(({ value, onChange }) => {
+  const { t } = useTranslation('modelProvider');
+  const { t: tChat } = useTranslation('chat');
+
+  // Preview controls use controlled mode with default values (no store access)
+  const previewControls = useMemo<Partial<Record<ExtendParamsType, ReactNode>>>(
+    () => ({
+      disableContextCaching: <Switch checked disabled />,
+      enableReasoning: <Switch checked disabled />,
+      gpt5ReasoningEffort: <GPT5ReasoningEffortSlider value="medium" />,
+      gpt5_1ReasoningEffort: <GPT51ReasoningEffortSlider value="none" />,
+      gpt5_2ProReasoningEffort: <GPT52ProReasoningEffortSlider value="medium" />,
+      gpt5_2ReasoningEffort: <GPT52ReasoningEffortSlider value="none" />,
+      imageAspectRatio: <ImageAspectRatioSelect value="1:1" />,
+      imageResolution: <ImageResolutionSlider value="1K" />,
+      reasoningBudgetToken: <ReasoningTokenSlider defaultValue={1 * 1024} />,
+      reasoningEffort: <ReasoningEffortSlider value="medium" />,
+      textVerbosity: <TextVerbositySlider value="medium" />,
+      thinking: <ThinkingSlider value="auto" />,
+      thinkingBudget: <ThinkingBudgetSlider defaultValue={2 * 1024} />,
+      thinkingLevel: <ThinkingLevelSlider value="high" />,
+      thinkingLevel2: <ThinkingLevel2Slider value="high" />,
+      urlContext: <Switch checked disabled />,
+    }),
+    [],
+  );
+
+  const descOverrides: Partial<Record<ExtendParamsType, ReactNode>> = {
+    disableContextCaching: (() => {
+      const original = tChat('extendParams.disableContextCaching.desc', { defaultValue: '' });
+
+      const sanitized = original.replace(/（<\d>.*?<\/\d>）/u, '');
+
+      return (
+        sanitized || (
+          <Trans i18nKey={'extendParams.disableContextCaching.desc'} ns={'chat'}>
+            单条对话生成成本最高可降低 90%，响应速度提升 4 倍。开启后将自动禁用历史消息数限制
+          </Trans>
+        )
+      );
+    })(),
+    enableReasoning: (() => {
+      const original = tChat('extendParams.enableReasoning.desc', { defaultValue: '' });
+
+      const sanitized = original.replace(/（<\d>.*?<\/\d>）/u, '');
+
+      return (
+        sanitized || (
+          <Trans i18nKey={'extendParams.enableReasoning.desc'} ns={'chat'}>
+            基于 Claude Thinking 机制限制，开启后将自动禁用历史消息数限制
+          </Trans>
+        )
+      );
+    })(),
+  };
+
+  const previewFallback = String(
+    t('providerModels.item.modelConfig.extendParams.previewFallback', {
+      defaultValue: 'Preview unavailable',
+    }),
+  );
+
+  const definitions = useMemo<ExtendParamsDefinition[]>(() => {
+    return EXTEND_PARAMS_OPTIONS.map((item) => {
+      const descKey = `extendParams.${item.key}.desc`;
+      const rawDesc = tChat(descKey as any, { defaultValue: '' });
+      const normalizedDesc =
+        typeof rawDesc === 'string' && rawDesc !== '' && rawDesc !== descKey ? rawDesc : undefined;
+      const desc = descOverrides[item.key] ?? normalizedDesc;
+      const meta = PREVIEW_META[item.key];
+      // Use alias key for title if available (synced with ControlsForm.tsx)
+      const titleKey = TITLE_KEY_ALIASES[item.key] ?? item.key;
+      const baseLabel = String(
+        tChat(`extendParams.${titleKey}.title` as any, { defaultValue: item.key }),
+      );
+
+      const label = meta?.labelOverride
+        ? meta.labelOverride
+        : meta?.labelSuffix
+          ? `${baseLabel}${meta.labelSuffix}`
+          : baseLabel;
+
+      return {
+        desc,
+        hint: String(t(item.hintKey as any)),
+        key: item.key,
+        label,
+        parameterTag: meta?.tag,
+        preview: previewControls[item.key],
+        previewWidth: meta?.previewWidth,
+      };
+    });
+  }, [previewControls, t, tChat]);
+
+  const definitionMap = useMemo(() => {
+    return new Map(definitions.map((item) => [item.key, item]));
+  }, [definitions]);
+
+  const options = useMemo(
+    () =>
+      definitions.map((item) => ({
+        label: item.label,
+        value: item.key,
+      })),
+    [definitions],
+  );
+
+  const placeholder = String(t('providerModels.item.modelConfig.extendParams.placeholder'));
+  const handleChange = (val: ExtendParamsType[]) => {
+    if (!Array.isArray(val) || val.length === 0) {
+      onChange?.(undefined);
+      return;
+    }
+
+    const filtered = val.filter((item) => definitionMap.has(item));
+    onChange?.(filtered.length ? filtered : undefined);
+  };
+
+  return (
+    <Flexbox gap={8}>
+      <Select
+        allowClear
+        mode={'multiple'}
+        onChange={(val) => handleChange(val as ExtendParamsType[])}
+        optionRender={(option) => {
+          const def = definitionMap.get(option.value as ExtendParamsType);
+          if (!def) return option.label;
+
+          return (
+            <Popover
+              content={
+                <PreviewContent
+                  desc={def.desc}
+                  hint={def.hint}
+                  label={def.label}
+                  parameterTag={def.parameterTag}
+                  preview={def.preview}
+                  previewFallback={previewFallback}
+                  previewWidth={def.previewWidth}
+                />
+              }
+              placement={'right'}
+            >
+              <Flexbox gap={4}>
+                <Typography.Text>{def.label}</Typography.Text>
+                <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+                  {def.hint}
+                </Typography.Text>
+              </Flexbox>
+            </Popover>
+          );
+        }}
+        options={options}
+        placeholder={placeholder}
+        popupMatchSelectWidth={false}
+        style={{ width: '100%' }}
+        value={value}
+      />
+      {value && value.length > 0 && (
+        <Space size={[8, 8]} wrap>
+          {value.map((key) => {
+            const def = definitionMap.get(key);
+            if (!def) return null;
+            return (
+              <Popover
+                content={
+                  <PreviewContent
+                    desc={def.desc}
+                    hint={def.hint}
+                    label={def.label}
+                    parameterTag={def.parameterTag}
+                    preview={def.preview}
+                    previewFallback={previewFallback}
+                    previewWidth={def.previewWidth}
+                  />
+                }
+                key={key}
+                placement={'top'}
+              >
+                <Tag bordered={false} color={'processing'}>
+                  {def.label}
+                </Tag>
+              </Popover>
+            );
+          })}
+        </Space>
+      )}
+    </Flexbox>
+  );
+});
+
+export default ExtendParamsSelect;

package/src/app/[variants]/(main)/settings/provider/features/ModelList/CreateNewModelModal/Form.tsx

@@ -1,5 +1,5 @@
-import { Input , Checkbox } from '@lobehub/ui';
-import { Form, type FormInstance, Select } from 'antd';
+import { Input } from '@lobehub/ui';
+import { Checkbox, Form, type FormInstance, Select } from 'antd';
 import { type AiModelType } from 'model-bank';
 import { memo, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -8,6 +8,8 @@ import MaxTokenSlider from '@/components/MaxTokenSlider';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { type ChatModelCard } from '@/types/llm';
 
+import ExtendParamsSelect from './ExtendParamsSelect';
+
 interface ModelConfigFormProps {
   idEditable?: boolean;
   initialValues?: ChatModelCard;
@@ -102,6 +104,13 @@ const ModelConfigForm = memo<ModelConfigFormProps>(
           >
             <MaxTokenSlider />
           </Form.Item>
+          <Form.Item
+            extra={t('providerModels.item.modelConfig.extendParams.extra')}
+            label={t('providerModels.item.modelConfig.extendParams.title')}
+            name={['settings', 'extendParams']}
+          >
+            <ExtendParamsSelect />
+          </Form.Item>
           <Form.Item
             extra={t('providerModels.item.modelConfig.functionCall.extra')}
             label={t('providerModels.item.modelConfig.functionCall.title')}

package/src/app/[variants]/(main)/settings/provider/features/ModelList/CreateNewModelModal/__tests__/ExtendParamsSelect.test.tsx

@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest';
+
+// Import the constant directly for testing
+// We'll need to test the TITLE_KEY_ALIASES logic
+
+describe('ExtendParamsSelect', () => {
+  describe('TITLE_KEY_ALIASES mapping', () => {
+    // This mapping should be synced with ControlsForm.tsx
+    const TITLE_KEY_ALIASES: Record<string, string> = {
+      gpt5ReasoningEffort: 'reasoningEffort',
+      gpt5_1ReasoningEffort: 'reasoningEffort',
+      gpt5_2ProReasoningEffort: 'reasoningEffort',
+      gpt5_2ReasoningEffort: 'reasoningEffort',
+      thinkingLevel2: 'thinkingLevel',
+    };
+
+    it('should map GPT5 variants to reasoningEffort', () => {
+      expect(TITLE_KEY_ALIASES['gpt5ReasoningEffort']).toBe('reasoningEffort');
+      expect(TITLE_KEY_ALIASES['gpt5_1ReasoningEffort']).toBe('reasoningEffort');
+      expect(TITLE_KEY_ALIASES['gpt5_2ReasoningEffort']).toBe('reasoningEffort');
+      expect(TITLE_KEY_ALIASES['gpt5_2ProReasoningEffort']).toBe('reasoningEffort');
+    });
+
+    it('should map thinkingLevel2 to thinkingLevel', () => {
+      expect(TITLE_KEY_ALIASES['thinkingLevel2']).toBe('thinkingLevel');
+    });
+
+    it('should return undefined for keys without aliases', () => {
+      expect(TITLE_KEY_ALIASES['reasoningEffort']).toBeUndefined();
+      expect(TITLE_KEY_ALIASES['thinkingLevel']).toBeUndefined();
+      expect(TITLE_KEY_ALIASES['thinking']).toBeUndefined();
+    });
+  });
+
+  describe('title key resolution logic', () => {
+    const TITLE_KEY_ALIASES: Record<string, string> = {
+      gpt5ReasoningEffort: 'reasoningEffort',
+      gpt5_1ReasoningEffort: 'reasoningEffort',
+      gpt5_2ProReasoningEffort: 'reasoningEffort',
+      gpt5_2ReasoningEffort: 'reasoningEffort',
+      thinkingLevel2: 'thinkingLevel',
+    };
+
+    const getTitleKey = (key: string): string => {
+      return TITLE_KEY_ALIASES[key] ?? key;
+    };
+
+    it('should return the alias key when available', () => {
+      expect(getTitleKey('gpt5ReasoningEffort')).toBe('reasoningEffort');
+      expect(getTitleKey('thinkingLevel2')).toBe('thinkingLevel');
+    });
+
+    it('should return the original key when no alias exists', () => {
+      expect(getTitleKey('reasoningEffort')).toBe('reasoningEffort');
+      expect(getTitleKey('thinking')).toBe('thinking');
+      expect(getTitleKey('textVerbosity')).toBe('textVerbosity');
+    });
+  });
+});

package/src/features/ChatInput/ActionBar/Model/ControlsForm.tsx

@@ -178,7 +178,7 @@ const ControlsForm = memo(() => {
     },
     {
       children: <ThinkingBudgetSlider />,
-      label: t('extendParams.reasoningBudgetToken.title'),
+      label: t('extendParams.thinkingBudget.title'),
       layout: 'vertical',
       minWidth: 460,
       name: 'thinkingBudget',

package/src/features/ChatInput/ActionBar/Model/GPT51ReasoningEffortSlider.tsx

@@ -1,60 +1,15 @@
-import { Flexbox } from '@lobehub/ui';
-import { Slider } from 'antd';
-import { memo, useCallback } from 'react';
+import { type CreatedLevelSliderProps, createLevelSliderComponent } from './createLevelSlider';
 
-import { useAgentStore } from '@/store/agent';
-import { chatConfigByIdSelectors } from '@/store/agent/selectors';
+const GPT51_REASONING_EFFORT_LEVELS = ['none', 'low', 'medium', 'high'] as const;
+type GPT51ReasoningEffort = (typeof GPT51_REASONING_EFFORT_LEVELS)[number];
 
-import { useAgentId } from '../../hooks/useAgentId';
-import { useUpdateAgentConfig } from '../../hooks/useUpdateAgentConfig';
+export type GPT51ReasoningEffortSliderProps = CreatedLevelSliderProps<GPT51ReasoningEffort>;
 
-const GPT51ReasoningEffortSlider = memo(() => {
-  const agentId = useAgentId();
-  const { updateAgentChatConfig } = useUpdateAgentConfig();
-  const config = useAgentStore((s) => chatConfigByIdSelectors.getChatConfigById(agentId)(s));
-
-  const gpt5_1ReasoningEffort = config.gpt5_1ReasoningEffort || 'none'; // Default to 'none' if not set
-
-  const marks = {
-    0: 'none',
-    1: 'low',
-    2: 'medium',
-    3: 'high',
-  };
-
-  const effortValues = ['none', 'low', 'medium', 'high'];
-  const indexValue = effortValues.indexOf(gpt5_1ReasoningEffort);
-  const currentValue = indexValue === -1 ? 0 : indexValue;
-
-  const updateGPT51ReasoningEffort = useCallback(
-    (value: number) => {
-      const effort = effortValues[value] as 'none' | 'low' | 'medium' | 'high';
-      updateAgentChatConfig({ gpt5_1ReasoningEffort: effort });
-    },
-    [updateAgentChatConfig],
-  );
-
-  return (
-    <Flexbox
-      align={'center'}
-      gap={12}
-      horizontal
-      paddingInline={'0 20px'}
-      style={{ minWidth: 200, width: '100%' }}
-    >
-      <Flexbox flex={1}>
-        <Slider
-          marks={marks}
-          max={3}
-          min={0}
-          onChange={updateGPT51ReasoningEffort}
-          step={1}
-          tooltip={{ open: false }}
-          value={currentValue}
-        />
-      </Flexbox>
-    </Flexbox>
-  );
+const GPT51ReasoningEffortSlider = createLevelSliderComponent<GPT51ReasoningEffort>({
+  configKey: 'gpt5_1ReasoningEffort',
+  defaultValue: 'none',
+  levels: GPT51_REASONING_EFFORT_LEVELS,
+  style: { minWidth: 200 },
 });
 
 export default GPT51ReasoningEffortSlider;

package/src/features/ChatInput/ActionBar/Model/GPT52ProReasoningEffortSlider.tsx

@@ -1,59 +1,15 @@
-import { Flexbox } from '@lobehub/ui';
-import { Slider } from 'antd';
-import { memo, useCallback } from 'react';
+import { type CreatedLevelSliderProps, createLevelSliderComponent } from './createLevelSlider';
 
-import { useAgentStore } from '@/store/agent';
-import { chatConfigByIdSelectors } from '@/store/agent/selectors';
+const GPT52_PRO_REASONING_EFFORT_LEVELS = ['medium', 'high', 'xhigh'] as const;
+type GPT52ProReasoningEffort = (typeof GPT52_PRO_REASONING_EFFORT_LEVELS)[number];
 
-import { useAgentId } from '../../hooks/useAgentId';
-import { useUpdateAgentConfig } from '../../hooks/useUpdateAgentConfig';
+export type GPT52ProReasoningEffortSliderProps = CreatedLevelSliderProps<GPT52ProReasoningEffort>;
 
-const GPT52ProReasoningEffortSlider = memo(() => {
-  const agentId = useAgentId();
-  const { updateAgentChatConfig } = useUpdateAgentConfig();
-  const config = useAgentStore((s) => chatConfigByIdSelectors.getChatConfigById(agentId)(s));
-
-  const gpt5_2ProReasoningEffort = config.gpt5_2ProReasoningEffort || 'medium';
-
-  const marks = {
-    0: 'medium',
-    1: 'high',
-    2: 'xhigh',
-  };
-
-  const effortValues = ['medium', 'high', 'xhigh'];
-  const indexValue = effortValues.indexOf(gpt5_2ProReasoningEffort);
-  const currentValue = indexValue === -1 ? 0 : indexValue;
-
-  const updateGPT52ProReasoningEffort = useCallback(
-    (value: number) => {
-      const effort = effortValues[value] as 'medium' | 'high' | 'xhigh';
-      updateAgentChatConfig({ gpt5_2ProReasoningEffort: effort });
-    },
-    [updateAgentChatConfig],
-  );
-
-  return (
-    <Flexbox
-      align={'center'}
-      gap={12}
-      horizontal
-      paddingInline={'0 20px'}
-      style={{ minWidth: 160, width: '100%' }}
-    >
-      <Flexbox flex={1}>
-        <Slider
-          marks={marks}
-          max={2}
-          min={0}
-          onChange={updateGPT52ProReasoningEffort}
-          step={1}
-          tooltip={{ open: false }}
-          value={currentValue}
-        />
-      </Flexbox>
-    </Flexbox>
-  );
+const GPT52ProReasoningEffortSlider = createLevelSliderComponent<GPT52ProReasoningEffort>({
+  configKey: 'gpt5_2ProReasoningEffort',
+  defaultValue: 'medium',
+  levels: GPT52_PRO_REASONING_EFFORT_LEVELS,
+  style: { minWidth: 160 },
 });
 
 export default GPT52ProReasoningEffortSlider;