@lobehub/lobehub 2.0.0-next.261 → 2.0.0-next.263

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;

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

@@ -1,61 +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_REASONING_EFFORT_LEVELS = ['none', 'low', 'medium', 'high', 'xhigh'] as const;
+type GPT52ReasoningEffort = (typeof GPT52_REASONING_EFFORT_LEVELS)[number];
 
-import { useAgentId } from '../../hooks/useAgentId';
-import { useUpdateAgentConfig } from '../../hooks/useUpdateAgentConfig';
+export type GPT52ReasoningEffortSliderProps = CreatedLevelSliderProps<GPT52ReasoningEffort>;
 
-const GPT52ReasoningEffortSlider = memo(() => {
-  const agentId = useAgentId();
-  const { updateAgentChatConfig } = useUpdateAgentConfig();
-  const config = useAgentStore((s) => chatConfigByIdSelectors.getChatConfigById(agentId)(s));
-
-  const gpt5_2ReasoningEffort = config.gpt5_2ReasoningEffort || 'none';
-
-  const marks = {
-    0: 'none',
-    1: 'low',
-    2: 'medium',
-    3: 'high',
-    4: 'xhigh',
-  };
-
-  const effortValues = ['none', 'low', 'medium', 'high', 'xhigh'];
-  const indexValue = effortValues.indexOf(gpt5_2ReasoningEffort);
-  const currentValue = indexValue === -1 ? 0 : indexValue;
-
-  const updateGPT52ReasoningEffort = useCallback(
-    (value: number) => {
-      const effort = effortValues[value] as 'none' | 'low' | 'medium' | 'high' | 'xhigh';
-      updateAgentChatConfig({ gpt5_2ReasoningEffort: effort });
-    },
-    [updateAgentChatConfig],
-  );
-
-  return (
-    <Flexbox
-      align={'center'}
-      gap={12}
-      horizontal
-      paddingInline={'0 20px'}
-      style={{ minWidth: 230, width: '100%' }}
-    >
-      <Flexbox flex={1}>
-        <Slider
-          marks={marks}
-          max={4}
-          min={0}
-          onChange={updateGPT52ReasoningEffort}
-          step={1}
-          tooltip={{ open: false }}
-          value={currentValue}
-        />
-      </Flexbox>
-    </Flexbox>
-  );
+const GPT52ReasoningEffortSlider = createLevelSliderComponent<GPT52ReasoningEffort>({
+  configKey: 'gpt5_2ReasoningEffort',
+  defaultValue: 'none',
+  levels: GPT52_REASONING_EFFORT_LEVELS,
+  style: { minWidth: 230 },
 });
 
 export default GPT52ReasoningEffortSlider;

package/src/features/ChatInput/ActionBar/Model/GPT5ReasoningEffortSlider.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 GPT5_REASONING_EFFORT_LEVELS = ['minimal', 'low', 'medium', 'high'] as const;
+type GPT5ReasoningEffort = (typeof GPT5_REASONING_EFFORT_LEVELS)[number];
 
-import { useAgentId } from '../../hooks/useAgentId';
-import { useUpdateAgentConfig } from '../../hooks/useUpdateAgentConfig';
+export type GPT5ReasoningEffortSliderProps = CreatedLevelSliderProps<GPT5ReasoningEffort>;
 
-const GPT5ReasoningEffortSlider = memo(() => {
-  const agentId = useAgentId();
-  const { updateAgentChatConfig } = useUpdateAgentConfig();
-  const config = useAgentStore((s) => chatConfigByIdSelectors.getChatConfigById(agentId)(s));
-
-  const gpt5ReasoningEffort = config.gpt5ReasoningEffort || 'medium'; // Default to 'medium' if not set
-
-  const marks = {
-    0: 'minimal',
-    1: 'low',
-    2: 'medium',
-    3: 'high',
-  };
-
-  const effortValues = ['minimal', 'low', 'medium', 'high'];
-  const indexValue = effortValues.indexOf(gpt5ReasoningEffort);
-  const currentValue = indexValue === -1 ? 2 : indexValue;
-
-  const updateGPT5ReasoningEffort = useCallback(
-    (value: number) => {
-      const effort = effortValues[value] as 'minimal' | 'low' | 'medium' | 'high';
-      updateAgentChatConfig({ gpt5ReasoningEffort: 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={updateGPT5ReasoningEffort}
-          step={1}
-          tooltip={{ open: false }}
-          value={currentValue}
-        />
-      </Flexbox>
-    </Flexbox>
-  );
+const GPT5ReasoningEffortSlider = createLevelSliderComponent<GPT5ReasoningEffort>({
+  configKey: 'gpt5ReasoningEffort',
+  defaultValue: 'medium',
+  levels: GPT5_REASONING_EFFORT_LEVELS,
+  style: { minWidth: 200 },
 });
 
 export default GPT5ReasoningEffortSlider;

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

@@ -1,5 +1,5 @@
 import { Select } from 'antd';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 
 import { useAgentStore } from '@/store/agent';
 import { chatConfigByIdSelectors } from '@/store/agent/selectors';
@@ -18,15 +18,21 @@ const NANO_BANANA_ASPECT_RATIOS = [
   '9:16', // 768x1376 / 1536x2752 / 3072x5504
   '16:9', // 1376x768 / 2752x1536 / 5504x3072
   '21:9', // 1584x672 / 3168x1344 / 6336x2688
-];
+] as const;
 
-const ImageAspectRatioSelect = memo(() => {
-  const agentId = useAgentId();
-  const { updateAgentChatConfig } = useUpdateAgentConfig();
-  const config = useAgentStore((s) => chatConfigByIdSelectors.getChatConfigById(agentId)(s));
+type AspectRatio = (typeof NANO_BANANA_ASPECT_RATIOS)[number];
 
-  const imageAspectRatio = config.imageAspectRatio || '1:1';
+export interface ImageAspectRatioSelectProps {
+  defaultValue?: AspectRatio;
+  onChange?: (value: AspectRatio) => void;
+  value?: AspectRatio;
+}
 
+// Inner pure UI component - no store hooks, safe for preview
+const ImageAspectRatioSelectInner = memo<{
+  onChange: (_value: AspectRatio) => void;
+  value: AspectRatio;
+}>(({ value, onChange }) => {
   const options = useMemo(
     () =>
       NANO_BANANA_ASPECT_RATIOS.map((ratio) => ({
@@ -36,21 +42,49 @@ const ImageAspectRatioSelect = memo(() => {
     [],
   );
 
-  const updateAspectRatio = useCallback(
-    (value: string) => {
-      updateAgentChatConfig({ imageAspectRatio: value });
-    },
-    [updateAgentChatConfig],
-  );
-
   return (
     <Select
-      onChange={updateAspectRatio}
+      onChange={(v: string) => onChange(v as AspectRatio)}
       options={options}
       style={{ height: 32, marginRight: 10, width: 75 }}
-      value={imageAspectRatio}
+      value={value}
     />
   );
 });
 
+// Store-connected component - uses agent store hooks
+const ImageAspectRatioSelectWithStore = memo<{ defaultValue: AspectRatio }>(({ defaultValue }) => {
+  const agentId = useAgentId();
+  const { updateAgentChatConfig } = useUpdateAgentConfig();
+  const config = useAgentStore((s) => chatConfigByIdSelectors.getChatConfigById(agentId)(s));
+
+  const storeValue = (config.imageAspectRatio as AspectRatio) || defaultValue;
+
+  const handleChange = (ratio: AspectRatio) => {
+    updateAgentChatConfig({ imageAspectRatio: ratio });
+  };
+
+  return <ImageAspectRatioSelectInner onChange={handleChange} value={storeValue} />;
+});
+
+// Main exported component - chooses between controlled and store mode
+const ImageAspectRatioSelect = memo<ImageAspectRatioSelectProps>(
+  ({ value: controlledValue, onChange: controlledOnChange, defaultValue = '1:1' }) => {
+    const isControlled = controlledValue !== undefined || controlledOnChange !== undefined;
+
+    if (isControlled) {
+      // Controlled mode: use props only, no store access
+      return (
+        <ImageAspectRatioSelectInner
+          onChange={controlledOnChange ?? (() => {})}
+          value={controlledValue ?? defaultValue}
+        />
+      );
+    }
+
+    // Uncontrolled mode: use store
+    return <ImageAspectRatioSelectWithStore defaultValue={defaultValue} />;
+  },
+);
+
 export default ImageAspectRatioSelect;

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

@@ -1,61 +1,15 @@
-import { Flexbox } from '@lobehub/ui';
-import { Slider } from 'antd';
-import { memo, useCallback } from 'react';
-
-import { useAgentStore } from '@/store/agent';
-import { chatConfigByIdSelectors } from '@/store/agent/selectors';
-
-import { useAgentId } from '../../hooks/useAgentId';
-import { useUpdateAgentConfig } from '../../hooks/useUpdateAgentConfig';
+import { type CreatedLevelSliderProps, createLevelSliderComponent } from './createLevelSlider';
 
 const IMAGE_RESOLUTIONS = ['1K', '2K', '4K'] as const;
 type ImageResolution = (typeof IMAGE_RESOLUTIONS)[number];
 
-const ImageResolutionSlider = memo(() => {
-  const agentId = useAgentId();
-  const { updateAgentChatConfig } = useUpdateAgentConfig();
-  const config = useAgentStore((s) => chatConfigByIdSelectors.getChatConfigById(agentId)(s));
-
-  const imageResolution = (config.imageResolution as ImageResolution) || '1K';
-
-  const marks = {
-    0: '1K',
-    1: '2K',
-    2: '4K',
-  };
-
-  const indexValue = IMAGE_RESOLUTIONS.indexOf(imageResolution);
-  const currentValue = indexValue === -1 ? 0 : indexValue;
-
-  const updateResolution = useCallback(
-    (value: number) => {
-      const resolution = IMAGE_RESOLUTIONS[value];
-      updateAgentChatConfig({ imageResolution: resolution });
-    },
-    [updateAgentChatConfig],
-  );
+export type ImageResolutionSliderProps = CreatedLevelSliderProps<ImageResolution>;
 
-  return (
-    <Flexbox
-      align={'center'}
-      gap={12}
-      horizontal
-      paddingInline={'0 20px'}
-      style={{ minWidth: 150, width: '100%' }}
-    >
-      <Flexbox flex={1}>
-        <Slider
-          marks={marks}
-          max={2}
-          min={0}
-          onChange={updateResolution}
-          step={1}
-          tooltip={{ open: false }}
-          value={currentValue}
-        />
-      </Flexbox>
-    </Flexbox>
-  );
+const ImageResolutionSlider = createLevelSliderComponent<ImageResolution>({
+  configKey: 'imageResolution',
+  defaultValue: '1K',
+  levels: IMAGE_RESOLUTIONS,
+  style: { minWidth: 150 },
 });
 
 export default ImageResolutionSlider;

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

@@ -0,0 +1,92 @@
+import { Flexbox } from '@lobehub/ui';
+import { Slider } from 'antd';
+import { type SliderSingleProps } from 'antd/es/slider';
+import { type CSSProperties, memo, useMemo } from 'react';
+import useMergeState from 'use-merge-value';
+
+export interface LevelSliderProps<T extends string = string> {
+  /**
+   * Default value when uncontrolled
+   */
+  defaultValue?: T;
+  /**
+   * Ordered array of level values (left to right on slider)
+   */
+  levels: readonly T[];
+  /**
+   * Optional custom marks. If not provided, uses level values as marks.
+   */
+  marks?: SliderSingleProps['marks'];
+  /**
+   * Callback when value changes
+   */
+  onChange?: (value: T) => void;
+  /**
+   * Style for the slider container
+   */
+  style?: CSSProperties;
+  /**
+   * Controlled value
+   */
+  value?: T;
+}
+
+function LevelSlider<T extends string = string>({
+  levels,
+  value,
+  defaultValue,
+  onChange,
+  marks: customMarks,
+  style,
+}: LevelSliderProps<T>) {
+  const defaultLevel = defaultValue ?? levels[Math.floor(levels.length / 2)];
+
+  const [currentLevel, setCurrentLevel] = useMergeState<T>(defaultLevel, {
+    defaultValue,
+    onChange,
+    value,
+  });
+
+  const marks = useMemo(() => {
+    if (customMarks) return customMarks;
+    const result: SliderSingleProps['marks'] = {};
+    levels.forEach((level, index) => {
+      result[index] = level;
+    });
+    return result;
+  }, [customMarks, levels]);
+
+  const currentIndex = levels.indexOf(currentLevel);
+  const sliderValue = currentIndex === -1 ? Math.floor(levels.length / 2) : currentIndex;
+
+  const handleChange = (index: number) => {
+    const newLevel = levels[index];
+    if (newLevel !== undefined) {
+      setCurrentLevel(newLevel);
+    }
+  };
+
+  return (
+    <Flexbox
+      align={'center'}
+      gap={12}
+      horizontal
+      paddingInline={'0 20px'}
+      style={{ minWidth: 200, width: '100%', ...style }}
+    >
+      <Flexbox flex={1}>
+        <Slider
+          marks={marks}
+          max={levels.length - 1}
+          min={0}
+          onChange={handleChange}
+          step={1}
+          tooltip={{ open: false }}
+          value={sliderValue}
+        />
+      </Flexbox>
+    </Flexbox>
+  );
+}
+
+export default memo(LevelSlider) as typeof LevelSlider;

package/src/features/ChatInput/ActionBar/Model/ReasoningEffortSlider.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 REASONING_EFFORT_LEVELS = ['low', 'medium', 'high'] as const;
+type ReasoningEffort = (typeof REASONING_EFFORT_LEVELS)[number];
 
-import { useAgentId } from '../../hooks/useAgentId';
-import { useUpdateAgentConfig } from '../../hooks/useUpdateAgentConfig';
+export type ReasoningEffortSliderProps = CreatedLevelSliderProps<ReasoningEffort>;
 
-const ReasoningEffortSlider = memo(() => {
-  const agentId = useAgentId();
-  const { updateAgentChatConfig } = useUpdateAgentConfig();
-  const config = useAgentStore((s) => chatConfigByIdSelectors.getChatConfigById(agentId)(s));
-
-  const reasoningEffort = config.reasoningEffort || 'medium'; // Default to 'medium' if not set
-
-  const marks = {
-    0: 'low',
-    1: 'medium',
-    2: 'high',
-  };
-
-  const effortValues = ['low', 'medium', 'high'];
-  const indexValue = effortValues.indexOf(reasoningEffort);
-  const currentValue = indexValue === -1 ? 1 : indexValue;
-
-  const updateReasoningEffort = useCallback(
-    (value: number) => {
-      const effort = effortValues[value] as 'low' | 'medium' | 'high';
-      updateAgentChatConfig({ reasoningEffort: effort });
-    },
-    [updateAgentChatConfig],
-  );
-
-  return (
-    <Flexbox
-      align={'center'}
-      gap={12}
-      horizontal
-      paddingInline={'0 20px'}
-      style={{ minWidth: 200, width: '100%' }}
-    >
-      <Flexbox flex={1}>
-        <Slider
-          marks={marks}
-          max={2}
-          min={0}
-          onChange={updateReasoningEffort}
-          step={1}
-          tooltip={{ open: false }}
-          value={currentValue}
-        />
-      </Flexbox>
-    </Flexbox>
-  );
+const ReasoningEffortSlider = createLevelSliderComponent<ReasoningEffort>({
+  configKey: 'reasoningEffort',
+  defaultValue: 'medium',
+  levels: REASONING_EFFORT_LEVELS,
+  style: { minWidth: 200 },
 });
 
 export default ReasoningEffortSlider;

package/src/features/ChatInput/ActionBar/Model/TextVerbositySlider.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 TEXT_VERBOSITY_LEVELS = ['low', 'medium', 'high'] as const;
+type TextVerbosity = (typeof TEXT_VERBOSITY_LEVELS)[number];
 
-import { useAgentId } from '../../hooks/useAgentId';
-import { useUpdateAgentConfig } from '../../hooks/useUpdateAgentConfig';
+export type TextVerbositySliderProps = CreatedLevelSliderProps<TextVerbosity>;
 
-const TextVerbositySlider = memo(() => {
-  const agentId = useAgentId();
-  const { updateAgentChatConfig } = useUpdateAgentConfig();
-  const config = useAgentStore((s) => chatConfigByIdSelectors.getChatConfigById(agentId)(s));
-
-  const textVerbosity = config.textVerbosity || 'medium'; // Default to 'medium' if not set
-
-  const marks = {
-    0: 'low',
-    1: 'medium',
-    2: 'high',
-  };
-
-  const verbosityValues = ['low', 'medium', 'high'];
-  const indexValue = verbosityValues.indexOf(textVerbosity);
-  const currentValue = indexValue === -1 ? 1 : indexValue;
-
-  const updateTextVerbosity = useCallback(
-    (value: number) => {
-      const verbosity = verbosityValues[value] as 'low' | 'medium' | 'high';
-      updateAgentChatConfig({ textVerbosity: verbosity });
-    },
-    [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={updateTextVerbosity}
-          step={1}
-          tooltip={{ open: false }}
-          value={currentValue}
-        />
-      </Flexbox>
-    </Flexbox>
-  );
+const TextVerbositySlider = createLevelSliderComponent<TextVerbosity>({
+  configKey: 'textVerbosity',
+  defaultValue: 'medium',
+  levels: TEXT_VERBOSITY_LEVELS,
+  style: { minWidth: 160 },
 });
 
 export default TextVerbositySlider;