feat: introduce DescriptionSwitch component and update component exports

- Added a new DescriptionSwitch component to enhance the Switch functionality with a description feature.
- Updated the exports in index.ts to include the new DescriptionSwitch alongside existing components.
- Refactored the SettingsTab to utilize DescriptionSwitch for improved UI consistency.
- Removed the InfoPopover component as part of the cleanup process.

packages/ui/src/components/base/Switch/index.tsx

@@ -1,5 +1,5 @@
 import type { SwitchProps } from '@heroui/react'
-import { Spinner, Switch } from '@heroui/react'
+import { cn, Spinner, Switch } from '@heroui/react'
 
 // Enhanced Switch component with loading state support
 interface CustomSwitchProps extends SwitchProps {
@@ -21,7 +21,34 @@ const CustomizedSwitch = ({ isLoading, children, ref, thumbIcon, ...props }: Cus
   )
 }
 
+const DescriptionSwitch = ({ children, ...props }: CustomSwitchProps) => {
+  return (
+    <CustomizedSwitch
+      size="sm"
+      classNames={{
+        base: cn(
+          'inline-flex w-full max-w-md flex-row-reverse items-center hover:bg-content2',
+          'cursor-pointer justify-between gap-2 rounded-lg border-2 border-transparent py-2 pr-1',
+          'data-[selected=true]:border-primary'
+        ),
+        wrapper: 'p-0 h-4 overflow-visible',
+        thumb: cn(
+          'h-6 w-6 border-2 shadow-lg',
+          'group-data-[hover=true]:border-primary',
+          //selected
+          'group-data-[selected=true]:ms-6',
+          // pressed
+          'group-data-[pressed=true]:w-7',
+          'group-data-pressed:group-data-selected:ms-4'
+        )
+      }}
+      {...props}>
+      {children}
+    </CustomizedSwitch>
+  )
+}
+
 CustomizedSwitch.displayName = 'Switch'
 
-export { CustomizedSwitch as Switch }
+export { DescriptionSwitch, CustomizedSwitch as Switch }
 export type { CustomSwitchProps as SwitchProps }

packages/ui/src/components/index.ts

@@ -11,7 +11,7 @@ export { default as IndicatorLight } from './base/IndicatorLight'
 export { default as Spinner } from './base/Spinner'
 export type { StatusTagProps, StatusType } from './base/StatusTag'
 export { ErrorTag, InfoTag, StatusTag, SuccessTag, WarnTag } from './base/StatusTag'
-export { Switch } from './base/Switch'
+export { DescriptionSwitch, Switch } from './base/Switch'
 export { default as TextBadge } from './base/TextBadge'
 export { getToastUtilities, type ToastUtilities } from './base/Toast'
 
@@ -50,6 +50,7 @@ export { default as SvgSpinners180Ring } from './icons/SvgSpinners180Ring'
 export { default as ToolsCallingIcon } from './icons/ToolsCallingIcon'
 
 // Interactive Components
+export { default as Selector } from './base/Selector'
 export {
   default as CodeEditor,
   type CodeEditorHandles,
@@ -64,9 +65,7 @@ export type { EditableNumberProps } from './interactive/EditableNumber'
 export { default as EditableNumber } from './interactive/EditableNumber'
 export { default as HelpTooltip } from './interactive/HelpTooltip'
 export { default as ImageToolButton } from './interactive/ImageToolButton'
-export { default as InfoPopover } from './interactive/InfoPopover'
 export { default as InfoTooltip } from './interactive/InfoTooltip'
-export { default as Selector } from './interactive/Selector'
 export { Sortable } from './interactive/Sortable'
 export { default as WarnTooltip } from './interactive/WarnTooltip'
 

packages/ui/src/components/interactive/InfoPopover/index.tsx

@@ -1,22 +0,0 @@
-// Original path: src/renderer/src/components/InfoPopover.tsx
-import type { PopoverProps } from 'antd'
-import { Popover } from 'antd'
-import { Info } from 'lucide-react'
-
-type InheritedPopoverProps = Omit<PopoverProps, 'children'>
-
-interface InfoPopoverProps extends InheritedPopoverProps {
-  iconColor?: string
-  iconSize?: string | number
-  iconStyle?: React.CSSProperties
-}
-
-const InfoPopover = ({ iconColor = 'var(--color-text-3)', iconSize = 14, iconStyle, ...rest }: InfoPopoverProps) => {
-  return (
-    <Popover {...rest}>
-      <Info size={iconSize} color={iconColor} style={{ ...iconStyle }} role="img" aria-label="Information" />
-    </Popover>
-  )
-}
-
-export default InfoPopover

packages/ui/stories/components/interactive/Selector.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { useState } from 'react'
 
-import Selector from '../../../src/components/interactive/Selector'
+import Selector from '../../../src/components/base/Selector'
 
 const meta: Meta<typeof Selector> = {
   title: 'Interactive/Selector',

src/renderer/src/components/TooltipIcons/HelpTooltip.tsx

@@ -13,7 +13,14 @@ interface HelpTooltipProps extends InheritedTooltipProps {
 const HelpTooltip = ({ iconColor = 'var(--color-text-2)', iconSize = 14, iconStyle, ...rest }: HelpTooltipProps) => {
   return (
     <Tooltip {...rest}>
-      <HelpCircle size={iconSize} color={iconColor} style={{ ...iconStyle }} role="img" aria-label="Help" />
+      <HelpCircle
+        size={iconSize}
+        color={iconColor}
+        style={{ ...iconStyle, cursor: 'help' }}
+        role="img"
+        aria-label="Help"
+        className="relative z-10"
+      />
     </Tooltip>
   )
 }

src/renderer/src/pages/home/Tabs/SettingsTab.tsx

@@ -1,5 +1,4 @@
-import { RowFlex, Selector, Switch } from '@cherrystudio/ui'
-import { Button } from '@cherrystudio/ui'
+import { Button, DescriptionSwitch, RowFlex, Selector } from '@cherrystudio/ui'
 import { useMultiplePreferences, usePreference } from '@data/hooks/usePreference'
 import EditableNumber from '@renderer/components/EditableNumber'
 import Scrollbar from '@renderer/components/Scrollbar'
@@ -184,19 +183,23 @@ const SettingsTab: FC<Props> = (props) => {
         }>
         <SettingGroup style={{ marginTop: 5 }}>
           <Row align="middle">
-            <SettingRowTitleSmall>
+            {/* <SettingRowTitleSmall>
               {t('chat.settings.temperature.label')}
               <HelpTooltip title={t('chat.settings.temperature.tip')} />
-            </SettingRowTitleSmall>
-            <Switch
+            </SettingRowTitleSmall> */}
+            <DescriptionSwitch
               size="sm"
               className="ml-auto"
               isSelected={enableTemperature}
               onValueChange={(enabled) => {
                 setEnableTemperature(enabled)
                 onUpdateAssistantSettings({ enableTemperature: enabled })
-              }}
-            />
+              }}>
+              <SettingRowTitleSmall>
+                {t('chat.settings.temperature.label')}
+                <HelpTooltip title={t('chat.settings.temperature.tip')} />
+              </SettingRowTitleSmall>
+            </DescriptionSwitch>
           </Row>
           {enableTemperature ? (
             <Row align="middle" gutter={10}>
@@ -234,25 +237,19 @@ const SettingsTab: FC<Props> = (props) => {
           </Row>
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>{t('models.stream_output')}</SettingRowTitleSmall>
-            <Switch
+            <DescriptionSwitch
               size="sm"
               isSelected={streamOutput}
               onValueChange={(checked) => {
                 setStreamOutput(checked)
                 onUpdateAssistantSettings({ streamOutput: checked })
-              }}
-            />
+              }}>
+              <SettingRowTitleSmall>{t('models.stream_output')}</SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           <SettingDivider />
           <SettingRow>
-            <Row align="middle">
-              <SettingRowTitleSmall>
-                {t('chat.settings.max_tokens.label')}
-                <HelpTooltip title={t('chat.settings.max_tokens.tip')} />
-              </SettingRowTitleSmall>
-            </Row>
-            <Switch
+            <DescriptionSwitch
               size="sm"
               isSelected={enableMaxTokens}
               onValueChange={async (enabled) => {
@@ -268,8 +265,12 @@ const SettingsTab: FC<Props> = (props) => {
                 }
                 setEnableMaxTokens(enabled)
                 onUpdateAssistantSettings({ enableMaxTokens: enabled })
-              }}
-            />
+              }}>
+              <SettingRowTitleSmall>
+                {t('chat.settings.max_tokens.label')}
+                <HelpTooltip title={t('chat.settings.max_tokens.tip')} />
+              </SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           {enableMaxTokens && (
             <Row align="middle" gutter={10} style={{ marginTop: 10 }}>
@@ -302,30 +303,38 @@ const SettingsTab: FC<Props> = (props) => {
       <CollapsibleSettingGroup title={t('settings.messages.title')} defaultExpanded={true}>
         <SettingGroup>
           <SettingRow>
-            <SettingRowTitleSmall>{t('settings.messages.prompt')}</SettingRowTitleSmall>
-            <Switch size="sm" isSelected={showPrompt} onValueChange={setShowPrompt} />
+            <DescriptionSwitch size="sm" isSelected={showPrompt} onValueChange={setShowPrompt}>
+              <SettingRowTitleSmall>{t('settings.messages.prompt')}</SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>{t('settings.messages.use_serif_font')}</SettingRowTitleSmall>
-            <Switch
+            {/* <SettingRowTitleSmall>{t('settings.messages.use_serif_font')}</SettingRowTitleSmall> */}
+            <DescriptionSwitch
               size="sm"
               isSelected={messageFont === 'serif'}
-              onValueChange={(checked) => setMessageFont(checked ? 'serif' : 'system')}
-            />
+              onValueChange={(checked) => setMessageFont(checked ? 'serif' : 'system')}>
+              <SettingRowTitleSmall>{t('settings.messages.use_serif_font')}</SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>
+            {/* <SettingRowTitleSmall>
               {t('chat.settings.thought_auto_collapse.label')}
               <HelpTooltip title={t('chat.settings.thought_auto_collapse.tip')} />
-            </SettingRowTitleSmall>
-            <Switch size="sm" isSelected={thoughtAutoCollapse} onValueChange={setThoughtAutoCollapse} />
+            </SettingRowTitleSmall> */}
+            <DescriptionSwitch isSelected={thoughtAutoCollapse} onValueChange={setThoughtAutoCollapse}>
+              <SettingRowTitleSmall>
+                {t('chat.settings.thought_auto_collapse.label')}
+                <HelpTooltip title={t('chat.settings.thought_auto_collapse.tip')} />
+              </SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>{t('settings.messages.show_message_outline')}</SettingRowTitleSmall>
-            <Switch size="sm" isSelected={showMessageOutline} onValueChange={setShowMessageOutline} />
+            <DescriptionSwitch isSelected={showMessageOutline} onValueChange={setShowMessageOutline}>
+              <SettingRowTitleSmall>{t('settings.messages.show_message_outline')}</SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           <SettingDivider />
           <SettingRow>
@@ -414,11 +423,16 @@ const SettingsTab: FC<Props> = (props) => {
           </SettingRow>
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>
+            {/* <SettingRowTitleSmall>
               {t('settings.math.single_dollar.label')}
               <HelpTooltip title={t('settings.math.single_dollar.tip')} />
-            </SettingRowTitleSmall>
-            <Switch size="sm" isSelected={mathEnableSingleDollar} onValueChange={setMathEnableSingleDollar} />
+            </SettingRowTitleSmall> */}
+            <DescriptionSwitch size="sm" isSelected={mathEnableSingleDollar} onValueChange={setMathEnableSingleDollar}>
+              <SettingRowTitleSmall>
+                {t('settings.math.single_dollar.label')}
+                <HelpTooltip title={t('settings.math.single_dollar.tip')} />
+              </SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           <SettingDivider />
         </SettingGroup>
@@ -440,23 +454,32 @@ const SettingsTab: FC<Props> = (props) => {
           </SettingRow>
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>
+            {/* <SettingRowTitleSmall>
               {t('chat.settings.code_fancy_block.label')}
               <HelpTooltip title={t('chat.settings.code_fancy_block.tip')} />
-            </SettingRowTitleSmall>
-            <Switch size="sm" isSelected={codeFancyBlock} onValueChange={setCodeFancyBlock} />
+            </SettingRowTitleSmall> */}
+            <DescriptionSwitch size="sm" isSelected={codeFancyBlock} onValueChange={setCodeFancyBlock}>
+              <SettingRowTitleSmall>
+                {t('chat.settings.code_fancy_block.label')}
+                <HelpTooltip title={t('chat.settings.code_fancy_block.tip')} />
+              </SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>
+            {/* <SettingRowTitleSmall>
               {t('chat.settings.code_execution.title')}
               <HelpTooltip title={t('chat.settings.code_execution.tip')} />
-            </SettingRowTitleSmall>
-            <Switch
+            </SettingRowTitleSmall> */}
+            <DescriptionSwitch
               size="sm"
               isSelected={codeExecution.enabled}
-              onValueChange={(checked) => setCodeExecution({ enabled: checked })}
-            />
+              onValueChange={(checked) => setCodeExecution({ enabled: checked })}>
+              <SettingRowTitleSmall>
+                {t('chat.settings.code_execution.title')}
+                <HelpTooltip title={t('chat.settings.code_execution.tip')} />
+              </SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           {codeExecution.enabled && (
             <>
@@ -480,75 +503,90 @@ const SettingsTab: FC<Props> = (props) => {
           )}
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>{t('chat.settings.code_editor.title')}</SettingRowTitleSmall>
-            <Switch
+            {/* <SettingRowTitleSmall>{t('chat.settings.code_editor.title')}</SettingRowTitleSmall> */}
+            <DescriptionSwitch
               size="sm"
               isSelected={codeEditor.enabled}
-              onValueChange={(checked) => setCodeEditor({ enabled: checked })}
-            />
+              onValueChange={(checked) => setCodeEditor({ enabled: checked })}>
+              <SettingRowTitleSmall>{t('chat.settings.code_editor.title')}</SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           {codeEditor.enabled && (
             <>
               <SettingDivider />
               <SettingRow style={{ paddingLeft: 8 }}>
-                <SettingRowTitleSmall>{t('chat.settings.code_editor.highlight_active_line')}</SettingRowTitleSmall>
-                <Switch
+                {/* <SettingRowTitleSmall>
+                  {t('chat.settings.code_editor.highlight_active_line')}
+                  <HelpTooltip title={t('chat.settings.code_editor.highlight_active_line.tip')} />
+                </SettingRowTitleSmall> */}
+                <DescriptionSwitch
                   size="sm"
                   isSelected={codeEditor.highlightActiveLine}
-                  onValueChange={(checked) => setCodeEditor({ highlightActiveLine: checked })}
-                />
+                  onValueChange={(checked) => setCodeEditor({ highlightActiveLine: checked })}>
+                  <SettingRowTitleSmall>
+                    {t('chat.settings.code_editor.highlight_active_line')}
+                    <HelpTooltip title={t('chat.settings.code_editor.highlight_active_line.tip')} />
+                  </SettingRowTitleSmall>
+                </DescriptionSwitch>
               </SettingRow>
               <SettingDivider />
               <SettingRow style={{ paddingLeft: 8 }}>
-                <SettingRowTitleSmall>{t('chat.settings.code_editor.fold_gutter')}</SettingRowTitleSmall>
-                <Switch
+                {/* <SettingRowTitleSmall>{t('chat.settings.code_editor.fold_gutter')}</SettingRowTitleSmall> */}
+                <DescriptionSwitch
                   size="sm"
                   isSelected={codeEditor.foldGutter}
-                  onValueChange={(checked) => setCodeEditor({ foldGutter: checked })}
-                />
+                  onValueChange={(checked) => setCodeEditor({ foldGutter: checked })}>
+                  <SettingRowTitleSmall>{t('chat.settings.code_editor.fold_gutter')}</SettingRowTitleSmall>
+                </DescriptionSwitch>
               </SettingRow>
               <SettingDivider />
               <SettingRow style={{ paddingLeft: 8 }}>
-                <SettingRowTitleSmall>{t('chat.settings.code_editor.autocompletion')}</SettingRowTitleSmall>
-                <Switch
+                {/* <SettingRowTitleSmall>{t('chat.settings.code_editor.autocompletion')}</SettingRowTitleSmall> */}
+                <DescriptionSwitch
                   size="sm"
                   isSelected={codeEditor.autocompletion}
-                  onValueChange={(checked) => setCodeEditor({ autocompletion: checked })}
-                />
+                  onValueChange={(checked) => setCodeEditor({ autocompletion: checked })}>
+                  <SettingRowTitleSmall>{t('chat.settings.code_editor.autocompletion')}</SettingRowTitleSmall>
+                </DescriptionSwitch>
               </SettingRow>
               <SettingDivider />
               <SettingRow style={{ paddingLeft: 8 }}>
-                <SettingRowTitleSmall>{t('chat.settings.code_editor.keymap')}</SettingRowTitleSmall>
-                <Switch
+                {/* <SettingRowTitleSmall>{t('chat.settings.code_editor.keymap')}</SettingRowTitleSmall> */}
+                <DescriptionSwitch
                   size="sm"
                   isSelected={codeEditor.keymap}
-                  onValueChange={(checked) => setCodeEditor({ keymap: checked })}
-                />
+                  onValueChange={(checked) => setCodeEditor({ keymap: checked })}>
+                  <SettingRowTitleSmall>{t('chat.settings.code_editor.keymap')}</SettingRowTitleSmall>
+                </DescriptionSwitch>
               </SettingRow>
             </>
           )}
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>{t('chat.settings.show_line_numbers')}</SettingRowTitleSmall>
-            <Switch size="sm" isSelected={codeShowLineNumbers} onValueChange={setCodeShowLineNumbers} />
+            <DescriptionSwitch size="sm" isSelected={codeShowLineNumbers} onValueChange={setCodeShowLineNumbers}>
+              <SettingRowTitleSmall>{t('chat.settings.show_line_numbers')}</SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>{t('chat.settings.code_collapsible')}</SettingRowTitleSmall>
-            <Switch size="sm" isSelected={codeCollapsible} onValueChange={setCodeCollapsible} />
+            <DescriptionSwitch size="sm" isSelected={codeCollapsible} onValueChange={setCodeCollapsible}>
+              <SettingRowTitleSmall>{t('chat.settings.code_collapsible')}</SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>{t('chat.settings.code_wrappable')}</SettingRowTitleSmall>
-            <Switch size="sm" isSelected={codeWrappable} onValueChange={setCodeWrappable} />
+            <DescriptionSwitch size="sm" isSelected={codeWrappable} onValueChange={setCodeWrappable}>
+              <SettingRowTitleSmall>{t('chat.settings.code_wrappable')}</SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>
-              {t('chat.settings.code_image_tools.label')}
-              <HelpTooltip title={t('chat.settings.code_image_tools.tip')} />
-            </SettingRowTitleSmall>
-            <Switch size="sm" isSelected={codeImageTools} onValueChange={setCodeImageTools} />
+            <DescriptionSwitch size="sm" isSelected={codeImageTools} onValueChange={setCodeImageTools}>
+              <SettingRowTitleSmall>
+                {t('chat.settings.code_image_tools.label')}
+                <HelpTooltip title={t('chat.settings.code_image_tools.tip')} />
+              </SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
         </SettingGroup>
         <SettingDivider />
@@ -556,13 +594,18 @@ const SettingsTab: FC<Props> = (props) => {
       <CollapsibleSettingGroup title={t('settings.messages.input.title')} defaultExpanded={false}>
         <SettingGroup>
           <SettingRow>
-            <SettingRowTitleSmall>{t('settings.messages.input.show_estimated_tokens')}</SettingRowTitleSmall>
-            <Switch size="sm" isSelected={showInputEstimatedTokens} onValueChange={setShowInputEstimatedTokens} />
+            <DescriptionSwitch
+              size="sm"
+              isSelected={showInputEstimatedTokens}
+              onValueChange={setShowInputEstimatedTokens}>
+              <SettingRowTitleSmall>{t('settings.messages.input.show_estimated_tokens')}</SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>{t('settings.messages.input.paste_long_text_as_file')}</SettingRowTitleSmall>
-            <Switch size="sm" isSelected={pasteLongTextAsFile} onValueChange={setPasteLongTextAsFile} />
+            <DescriptionSwitch size="sm" isSelected={pasteLongTextAsFile} onValueChange={setPasteLongTextAsFile}>
+              <SettingRowTitleSmall>{t('settings.messages.input.paste_long_text_as_file')}</SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           {pasteLongTextAsFile && (
             <>
@@ -583,41 +626,55 @@ const SettingsTab: FC<Props> = (props) => {
           )}
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>{t('settings.messages.markdown_rendering_input_message')}</SettingRowTitleSmall>
-            <Switch
+            <DescriptionSwitch
               size="sm"
               isSelected={renderInputMessageAsMarkdown}
-              onValueChange={setRenderInputMessageAsMarkdown}
-            />
+              onValueChange={setRenderInputMessageAsMarkdown}>
+              <SettingRowTitleSmall>{t('settings.messages.markdown_rendering_input_message')}</SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           <SettingDivider />
           {!(language || navigator.language).startsWith('en') && (
             <>
               <SettingRow>
-                <SettingRowTitleSmall>{t('settings.input.auto_translate_with_space')}</SettingRowTitleSmall>
-                <Switch size="sm" isSelected={autoTranslateWithSpace} onValueChange={setAutoTranslateWithSpace} />
+                <DescriptionSwitch
+                  size="sm"
+                  isSelected={autoTranslateWithSpace}
+                  onValueChange={setAutoTranslateWithSpace}>
+                  <SettingRowTitleSmall>{t('settings.input.auto_translate_with_space')}</SettingRowTitleSmall>
+                </DescriptionSwitch>
               </SettingRow>
               <SettingDivider />
             </>
           )}
           <SettingRow>
-            <SettingRowTitleSmall>{t('settings.input.show_translate_confirm')}</SettingRowTitleSmall>
-            <Switch size="sm" isSelected={showTranslateConfirm} onValueChange={setShowTranslateConfirm} />
+            <DescriptionSwitch size="sm" isSelected={showTranslateConfirm} onValueChange={setShowTranslateConfirm}>
+              <SettingRowTitleSmall>{t('settings.input.show_translate_confirm')}</SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>{t('settings.messages.input.enable_quick_triggers')}</SettingRowTitleSmall>
-            <Switch size="sm" isSelected={enableQuickPanelTriggers} onValueChange={setEnableQuickPanelTriggers} />
+            <DescriptionSwitch
+              size="sm"
+              isSelected={enableQuickPanelTriggers}
+              onValueChange={setEnableQuickPanelTriggers}>
+              <SettingRowTitleSmall>{t('settings.messages.input.enable_quick_triggers')}</SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>{t('settings.messages.input.confirm_delete_message')}</SettingRowTitleSmall>
-            <Switch size="sm" isSelected={confirmDeleteMessage} onValueChange={setConfirmDeleteMessage} />
+            <DescriptionSwitch size="sm" isSelected={confirmDeleteMessage} onValueChange={setConfirmDeleteMessage}>
+              <SettingRowTitleSmall>{t('settings.messages.input.confirm_delete_message')}</SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>{t('settings.messages.input.confirm_regenerate_message')}</SettingRowTitleSmall>
-            <Switch size="sm" isSelected={confirmRegenerateMessage} onValueChange={setConfirmRegenerateMessage} />
+            <DescriptionSwitch
+              size="sm"
+              isSelected={confirmRegenerateMessage}
+              onValueChange={setConfirmRegenerateMessage}>
+              <SettingRowTitleSmall>{t('settings.messages.input.confirm_regenerate_message')}</SettingRowTitleSmall>
+            </DescriptionSwitch>
           </SettingRow>
           <SettingDivider />
           <SettingRow>

src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListGroup.tsx

@@ -60,7 +60,8 @@ const ModelListGroup: React.FC<ModelListGroupProps> = ({
           onSelectionChange: handleCollapseChange
         }}
         accordionItemProps={{
-          startContent: (
+          disableIndicatorAnimation: true,
+          indicator: (
             <Tooltip title={t('settings.models.manage.remove_whole_group')} mouseLeaveDelay={0}>
               <Button
                 variant="light"