refactor(SettingsTab): update Selector component usage for consistency

- Simplified Selector component usage in SettingsTab by removing deprecated props and updating to the new API.
- Added size and label props to enhance accessibility and user experience.
- Ensured consistent handling of selected keys and selection change events across multiple instances of Selector.

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

@@ -37,11 +37,7 @@ const Selector = <V extends string | number>({ items, onSelectionChange, ...rest
   }
 
   return (
-    <Select
+    <Select {...rest} items={items} onSelectionChange={handleSelectionChange}>
-      {...rest}
-      label={<label className="hidden">Select</label>}
-      items={items}
-      onSelectionChange={handleSelectionChange}>
       {({ value, label, ...restItem }: SelectorItem<V>) => (
         <SelectItem {...restItem} key={value} title={String(label)}>
           {label}

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

@@ -1,9 +1,7 @@
-import { RowFlex } from '@cherrystudio/ui'
+import { RowFlex, Selector, Switch } from '@cherrystudio/ui'
-import { Switch } from '@cherrystudio/ui'
 import { useMultiplePreferences, usePreference } from '@data/hooks/usePreference'
 import EditableNumber from '@renderer/components/EditableNumber'
 import Scrollbar from '@renderer/components/Scrollbar'
-import Selector from '@renderer/components/Selector'
 import { HelpTooltip } from '@renderer/components/TooltipIcons'
 import { DEFAULT_CONTEXTCOUNT, DEFAULT_MAX_TOKENS, DEFAULT_TEMPERATURE } from '@renderer/config/constant'
 import { isOpenAIModel } from '@renderer/config/models'
@@ -329,11 +327,13 @@ const SettingsTab: FC<Props> = (props) => {
           </SettingRow>
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>{t('message.message.style.label')}</SettingRowTitleSmall>
+            {/* <SettingRowTitleSmall>{t('message.message.style.label')}</SettingRowTitleSmall> */}
             <Selector
-              value={messageStyle}
+              size="sm"
-              onChange={(value) => setMessageStyle(value as 'plain' | 'bubble')}
+              label={t('message.message.style.label')}
-              options={[
+              selectedKeys={[messageStyle]}
+              onSelectionChange={(value) => setMessageStyle(value[0] as 'plain' | 'bubble')}
+              items={[
                 { value: 'plain', label: t('message.message.style.plain') },
                 { value: 'bubble', label: t('message.message.style.bubble') }
               ]}
@@ -341,11 +341,13 @@ const SettingsTab: FC<Props> = (props) => {
           </SettingRow>
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>{t('message.message.multi_model_style.label')}</SettingRowTitleSmall>
+            {/* <SettingRowTitleSmall>{t('message.message.multi_model_style.label')}</SettingRowTitleSmall> */}
             <Selector
-              value={multiModelMessageStyle}
+              size="sm"
-              onChange={(value) => setMultiModelMessageStyle(value)}
+              label={t('message.message.multi_model_style.label')}
-              options={[
+              selectedKeys={[multiModelMessageStyle]}
+              onSelectionChange={(value) => setMultiModelMessageStyle(value[0])}
+              items={[
                 { value: 'fold', label: t('message.message.multi_model_style.fold.label') },
                 { value: 'vertical', label: t('message.message.multi_model_style.vertical') },
                 { value: 'horizontal', label: t('message.message.multi_model_style.horizontal') },
@@ -355,11 +357,13 @@ const SettingsTab: FC<Props> = (props) => {
           </SettingRow>
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>{t('settings.messages.navigation.label')}</SettingRowTitleSmall>
+            {/* <SettingRowTitleSmall>{t('settings.messages.navigation.label')}</SettingRowTitleSmall> */}
             <Selector
-              value={messageNavigation}
+              size="sm"
-              onChange={(value) => setMessageNavigation(value as 'none' | 'buttons' | 'anchor')}
+              label={t('settings.messages.navigation.label')}
-              options={[
+              selectedKeys={[messageNavigation]}
+              onSelectionChange={(value) => setMessageNavigation(value[0] as 'none' | 'buttons' | 'anchor')}
+              items={[
                 { value: 'none', label: t('settings.messages.navigation.none') },
                 { value: 'buttons', label: t('settings.messages.navigation.buttons') },
                 { value: 'anchor', label: t('settings.messages.navigation.anchor') }
@@ -393,11 +397,13 @@ const SettingsTab: FC<Props> = (props) => {
       <CollapsibleSettingGroup title={t('settings.math.title')} defaultExpanded={true}>
         <SettingGroup>
           <SettingRow>
-            <SettingRowTitleSmall>{t('settings.math.engine.label')}</SettingRowTitleSmall>
+            {/* <SettingRowTitleSmall>{t('settings.math.engine.label')}</SettingRowTitleSmall> */}
             <Selector
-              value={mathEngine}
+              size="sm"
-              onChange={(value) => setMathEngine(value as MathEngine)}
+              label={t('settings.math.engine.label')}
-              options={[
+              selectedKeys={[mathEngine]}
+              onSelectionChange={(value) => setMathEngine(value[0] as MathEngine)}
+              items={[
                 { value: 'KaTeX', label: 'KaTeX' },
                 { value: 'MathJax', label: 'MathJax' },
                 { value: 'none', label: t('settings.math.engine.none') }
@@ -418,11 +424,13 @@ const SettingsTab: FC<Props> = (props) => {
       <CollapsibleSettingGroup title={t('chat.settings.code.title')} defaultExpanded={true}>
         <SettingGroup>
           <SettingRow>
-            <SettingRowTitleSmall>{t('message.message.code_style')}</SettingRowTitleSmall>
+            {/* <SettingRowTitleSmall>{t('message.message.code_style')}</SettingRowTitleSmall> */}
             <Selector
-              value={codeStyle}
+              size="sm"
-              onChange={(value) => onCodeStyleChange(value as CodeStyleVarious)}
+              label={t('message.message.code_style')}
-              options={themeNames.map((theme) => ({
+              selectedKeys={[codeStyle]}
+              onSelectionChange={(value) => onCodeStyleChange(value[0] as CodeStyleVarious)}
+              items={themeNames.map((theme) => ({
                 value: theme,
                 label: theme
               }))}
@@ -611,23 +619,27 @@ const SettingsTab: FC<Props> = (props) => {
           </SettingRow>
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>{t('settings.input.target_language.label')}</SettingRowTitleSmall>
+            {/* <SettingRowTitleSmall>{t('settings.input.target_language.label')}</SettingRowTitleSmall> */}
             <Selector
-              value={targetLanguage}
+              size="sm"
-              onChange={(value) => setTargetLanguage(value)}
+              label={t('settings.input.target_language.label')}
+              selectedKeys={[targetLanguage]}
+              onSelectionChange={(value) => setTargetLanguage(value[0])}
               placeholder={UNKNOWN.emoji + ' ' + UNKNOWN.label()}
-              options={translateLanguages.map((item) => {
+              items={translateLanguages.map((item) => {
                 return { value: item.langCode, label: item.emoji + ' ' + item.label() }
               })}
             />
           </SettingRow>
           <SettingDivider />
           <SettingRow>
-            <SettingRowTitleSmall>{t('settings.messages.input.send_shortcuts')}</SettingRowTitleSmall>
+            {/* <SettingRowTitleSmall>{}</SettingRowTitleSmall> */}
             <Selector
-              value={sendMessageShortcut}
+              size="sm"
-              onChange={(value) => setSendMessageShortcut(value as SendMessageShortcut)}
+              label={t('settings.messages.input.send_shortcuts')}
-              options={[
+              selectedKeys={[sendMessageShortcut]}
+              onSelectionChange={(value) => setSendMessageShortcut(value[0] as SendMessageShortcut)}
+              items={[
                 { value: 'Enter', label: getSendMessageShortcutLabel('Enter') },
                 { value: 'Ctrl+Enter', label: getSendMessageShortcutLabel('Ctrl+Enter') },
                 { value: 'Alt+Enter', label: getSendMessageShortcutLabel('Alt+Enter') },