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

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

@@ -1,59 +1,23 @@
-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';
-
-const ThinkingSlider = memo(() => {
-  const agentId = useAgentId();
-  const { updateAgentChatConfig } = useUpdateAgentConfig();
-  const config = useAgentStore((s) => chatConfigByIdSelectors.getChatConfigById(agentId)(s));
-
-  const thinking = config.thinking || 'auto'; // Default to 'auto' if not set
-
-  const marks = {
-    0: 'OFF',
-    1: 'Auto',
-    2: 'ON',
-  };
-
-  const thinkingValues = ['disabled', 'auto', 'enabled'];
-  const indexValue = thinkingValues.indexOf(thinking);
-  const currentValue = indexValue === -1 ? 1 : indexValue;
-
-  const updateThinking = useCallback(
-    (value: number) => {
-      const thinkingMode = thinkingValues[value] as 'disabled' | 'auto' | 'enabled';
-      updateAgentChatConfig({ thinking: thinkingMode });
-    },
-    [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={updateThinking}
-          step={1}
-          tooltip={{ open: false }}
-          value={currentValue}
-        />
-      </Flexbox>
-    </Flexbox>
-  );
+import { type CreatedLevelSliderProps, createLevelSliderComponent } from './createLevelSlider';
+
+const THINKING_MODES = ['disabled', 'auto', 'enabled'] as const;
+type ThinkingMode = (typeof THINKING_MODES)[number];
+
+// Display marks for the slider
+const THINKING_MARKS = {
+  0: 'OFF',
+  1: 'Auto',
+  2: 'ON',
+};
+
+export type ThinkingSliderProps = CreatedLevelSliderProps<ThinkingMode>;
+
+const ThinkingSlider = createLevelSliderComponent<ThinkingMode>({
+  configKey: 'thinking',
+  defaultValue: 'auto',
+  levels: THINKING_MODES,
+  marks: THINKING_MARKS,
+  style: { minWidth: 200 },
 });
 
 export default ThinkingSlider;

package/src/features/ChatInput/ActionBar/Model/__tests__/createLevelSlider.test.tsx

@@ -0,0 +1,126 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { createLevelSliderComponent } from '../createLevelSlider';
+
+// Mock the store hooks - they should NOT be called in controlled mode
+vi.mock('@/store/agent', () => ({
+  useAgentStore: vi.fn(() => {
+    throw new Error('useAgentStore should not be called in controlled mode');
+  }),
+}));
+
+vi.mock('../../../hooks/useAgentId', () => ({
+  useAgentId: vi.fn(() => {
+    throw new Error('useAgentId should not be called in controlled mode');
+  }),
+}));
+
+vi.mock('../../../hooks/useUpdateAgentConfig', () => ({
+  useUpdateAgentConfig: vi.fn(() => {
+    throw new Error('useUpdateAgentConfig should not be called in controlled mode');
+  }),
+}));
+
+const TEST_LEVELS = ['low', 'medium', 'high'] as const;
+type TestLevel = (typeof TEST_LEVELS)[number];
+
+describe('createLevelSliderComponent', () => {
+  describe('controlled mode (with value prop)', () => {
+    it('should NOT call store hooks when value prop is provided', () => {
+      const TestSlider = createLevelSliderComponent<TestLevel>({
+        configKey: 'reasoningEffort',
+        defaultValue: 'medium',
+        levels: TEST_LEVELS,
+      });
+
+      // This should NOT throw - if it throws, it means store hooks were called
+      expect(() => {
+        render(<TestSlider value="high" />);
+      }).not.toThrow();
+    });
+
+    it('should NOT call store hooks when onChange prop is provided', () => {
+      const TestSlider = createLevelSliderComponent<TestLevel>({
+        configKey: 'reasoningEffort',
+        defaultValue: 'medium',
+        levels: TEST_LEVELS,
+      });
+
+      const mockOnChange = vi.fn();
+
+      // This should NOT throw - if it throws, it means store hooks were called
+      expect(() => {
+        render(<TestSlider onChange={mockOnChange} />);
+      }).not.toThrow();
+    });
+
+    it('should render with the controlled value', () => {
+      const TestSlider = createLevelSliderComponent<TestLevel>({
+        configKey: 'reasoningEffort',
+        defaultValue: 'medium',
+        levels: TEST_LEVELS,
+      });
+
+      render(<TestSlider value="high" />);
+
+      // The slider should show the marks
+      expect(screen.getByText('low')).toBeInTheDocument();
+      expect(screen.getByText('medium')).toBeInTheDocument();
+      expect(screen.getByText('high')).toBeInTheDocument();
+    });
+
+    it('should use defaultValue when value is not provided but onChange is', () => {
+      const TestSlider = createLevelSliderComponent<TestLevel>({
+        configKey: 'reasoningEffort',
+        defaultValue: 'medium',
+        levels: TEST_LEVELS,
+      });
+
+      const mockOnChange = vi.fn();
+
+      // Should not throw and should render
+      expect(() => {
+        render(<TestSlider onChange={mockOnChange} />);
+      }).not.toThrow();
+    });
+  });
+
+  describe('factory configuration', () => {
+    it('should create slider with custom marks', () => {
+      const customMarks = {
+        0: 'OFF',
+        1: 'Auto',
+        2: 'ON',
+      };
+
+      const TestSlider = createLevelSliderComponent<TestLevel>({
+        configKey: 'thinking',
+        defaultValue: 'medium',
+        levels: TEST_LEVELS,
+        marks: customMarks,
+      });
+
+      render(<TestSlider value="medium" />);
+
+      expect(screen.getByText('OFF')).toBeInTheDocument();
+      expect(screen.getByText('Auto')).toBeInTheDocument();
+      expect(screen.getByText('ON')).toBeInTheDocument();
+    });
+
+    it('should apply custom style', () => {
+      const TestSlider = createLevelSliderComponent<TestLevel>({
+        configKey: 'reasoningEffort',
+        defaultValue: 'medium',
+        levels: TEST_LEVELS,
+        style: { minWidth: 300 },
+      });
+
+      const { container } = render(<TestSlider value="medium" />);
+
+      // The outer Flexbox should have the custom style merged
+      const flexbox = container.firstChild as HTMLElement;
+      expect(flexbox).toHaveStyle({ minWidth: '300px' });
+    });
+  });
+});

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

@@ -0,0 +1,105 @@
+'use client';
+
+import { type LobeAgentChatConfig } from '@lobechat/types';
+import { type SliderSingleProps } from 'antd/es/slider';
+import { type CSSProperties, memo } from 'react';
+
+import { useAgentStore } from '@/store/agent';
+import { chatConfigByIdSelectors } from '@/store/agent/selectors';
+
+import { useAgentId } from '../../hooks/useAgentId';
+import { useUpdateAgentConfig } from '../../hooks/useUpdateAgentConfig';
+import LevelSlider from './LevelSlider';
+
+export interface LevelSliderConfig<T extends string> {
+  /**
+   * The key in LobeAgentChatConfig to read/write
+   */
+  configKey: keyof LobeAgentChatConfig;
+  /**
+   * Default value when no value is provided
+   */
+  defaultValue: T;
+  /**
+   * Ordered array of level values (left to right on slider)
+   */
+  levels: readonly T[];
+  /**
+   * Optional custom marks for the slider
+   */
+  marks?: SliderSingleProps['marks'];
+  /**
+   * Optional style for the slider container
+   */
+  style?: CSSProperties;
+}
+
+export interface CreatedLevelSliderProps<T extends string> {
+  defaultValue?: T;
+  onChange?: (value: T) => void;
+  value?: T;
+}
+
+/**
+ * Factory function to create a level slider component that supports both
+ * controlled mode (for previews without store access) and uncontrolled mode
+ * (reading/writing to agent store).
+ */
+export function createLevelSliderComponent<T extends string>(config: LevelSliderConfig<T>) {
+  const { levels, configKey, defaultValue, marks, style } = config;
+
+  // Inner pure UI component - no store hooks, safe for preview
+  const LevelSliderInner = memo<{
+    defaultValue: T;
+    onChange: (_v: T) => void;
+    value: T;
+  }>(({ value, onChange, defaultValue: dv }) => (
+    <LevelSlider<T>
+      defaultValue={dv}
+      levels={levels}
+      marks={marks}
+      onChange={onChange}
+      style={style}
+      value={value}
+    />
+  ));
+
+  // Store-connected component - uses agent store hooks
+  const LevelSliderWithStore = memo<{ defaultValue: T }>(({ defaultValue: dv }) => {
+    const agentId = useAgentId();
+    const { updateAgentChatConfig } = useUpdateAgentConfig();
+    const agentConfig = useAgentStore((s) => chatConfigByIdSelectors.getChatConfigById(agentId)(s));
+
+    const storeValue = (agentConfig[configKey] as T) || dv;
+
+    const handleChange = (newValue: T) => {
+      updateAgentChatConfig({ [configKey]: newValue });
+    };
+
+    return <LevelSliderInner defaultValue={dv} onChange={handleChange} value={storeValue} />;
+  });
+
+  // Main exported component - chooses between controlled and store mode
+  const CreatedLevelSlider = memo<CreatedLevelSliderProps<T>>(
+    ({ value: controlledValue, onChange: controlledOnChange, defaultValue: propDefaultValue }) => {
+      const dv = propDefaultValue ?? defaultValue;
+      const isControlled = controlledValue !== undefined || controlledOnChange !== undefined;
+
+      if (isControlled) {
+        // Controlled mode: use props only, no store access
+        return (
+          <LevelSliderInner
+            defaultValue={dv}
+            onChange={controlledOnChange ?? (() => {})}
+            value={controlledValue ?? dv}
+          />
+        );
+      }
+
+      // Uncontrolled mode: use store
+      return <LevelSliderWithStore defaultValue={dv} />;
+    },
+  );
+
+  return CreatedLevelSlider;
+}

package/src/locales/default/chat.ts

@@ -78,6 +78,7 @@ export default {
   'extendParams.reasoningEffort.title': 'Reasoning Intensity',
   'extendParams.textVerbosity.title': 'Output Text Detail Level',
   'extendParams.thinking.title': 'Deep Thinking Switch',
+  'extendParams.thinkingBudget.title': 'Thinking Budget',
   'extendParams.thinkingLevel.title': 'Level of Thinking',
   'extendParams.title': 'Model Extension Features',
   'extendParams.urlContext.desc':

package/src/locales/default/modelProvider.ts

@@ -220,6 +220,44 @@ export default {
   'providerModels.item.modelConfig.displayName.placeholder':
     'Please enter the display name of the model, e.g., ChatGPT, GPT-4, etc.',
   'providerModels.item.modelConfig.displayName.title': 'Model Display Name',
+  'providerModels.item.modelConfig.extendParams.extra':
+    'Choose extended parameters supported by the model. Hover an option to preview controls. Incorrect configs may cause request failures.',
+  'providerModels.item.modelConfig.extendParams.options.disableContextCaching.hint':
+    'For Claude models; can lower cost and speed up responses.',
+  'providerModels.item.modelConfig.extendParams.options.enableReasoning.hint':
+    'For Claude, DeepSeek and other reasoning models; unlock deeper thinking.',
+  'providerModels.item.modelConfig.extendParams.options.gpt5ReasoningEffort.hint':
+    'For GPT-5 series; controls reasoning intensity.',
+  'providerModels.item.modelConfig.extendParams.options.gpt5_1ReasoningEffort.hint':
+    'For GPT-5.1 series; controls reasoning intensity.',
+  'providerModels.item.modelConfig.extendParams.options.gpt5_2ProReasoningEffort.hint':
+    'For GPT-5.2 Pro series; controls reasoning intensity.',
+  'providerModels.item.modelConfig.extendParams.options.gpt5_2ReasoningEffort.hint':
+    'For GPT-5.2 series; controls reasoning intensity.',
+  'providerModels.item.modelConfig.extendParams.options.imageAspectRatio.hint':
+    'For Gemini image generation models; controls aspect ratio of generated images.',
+  'providerModels.item.modelConfig.extendParams.options.imageResolution.hint':
+    'For Gemini 3 image generation models; controls resolution of generated images.',
+  'providerModels.item.modelConfig.extendParams.options.reasoningBudgetToken.hint':
+    'For Claude, Qwen3 and similar; controls token budget for reasoning.',
+  'providerModels.item.modelConfig.extendParams.options.reasoningEffort.hint':
+    'For OpenAI and other reasoning-capable models; controls reasoning effort.',
+  'providerModels.item.modelConfig.extendParams.options.textVerbosity.hint':
+    'For GPT-5+ series; controls output verbosity.',
+  'providerModels.item.modelConfig.extendParams.options.thinking.hint':
+    'For some Doubao models; allow model to decide whether to think deeply.',
+  'providerModels.item.modelConfig.extendParams.options.thinkingBudget.hint':
+    'For Gemini series; controls thinking budget.',
+  'providerModels.item.modelConfig.extendParams.options.thinkingLevel.hint':
+    'For Gemini 3 Flash Preview models; controls thinking depth.',
+  'providerModels.item.modelConfig.extendParams.options.thinkingLevel2.hint':
+    'For Gemini 3 Pro Preview models; controls thinking depth.',
+  'providerModels.item.modelConfig.extendParams.options.urlContext.hint':
+    'For Gemini series; supports providing URL context.',
+  'providerModels.item.modelConfig.extendParams.placeholder':
+    'Select extended parameters to enable',
+  'providerModels.item.modelConfig.extendParams.previewFallback': 'Preview unavailable',
+  'providerModels.item.modelConfig.extendParams.title': 'Extended Parameters',
   'providerModels.item.modelConfig.files.extra':
     'The current file upload implementation is just a hack solution, limited to self-experimentation. Please wait for complete file upload capabilities in future implementations.',
   'providerModels.item.modelConfig.files.title': 'File Upload Support',