From 093d04c386e8d5682d322809c613322b4bc2b741 Mon Sep 17 00:00:00 2001
From: Teo <cheesen.xu@gmail.com>
Date: Fri, 27 Jun 2025 12:15:39 +0800
Subject: [PATCH] fix(Selector): Fix the issue with the Selector component
 being selected. (#7600)

* fix(Selector): update value comparison logic to use 'some' for selected values

* feat(ModelSettings): add ChevronDown icon as suffix for Select components
---
 src/renderer/src/components/Selector.tsx                  | 4 ++--
 .../src/pages/settings/ModelSettings/ModelSettings.tsx    | 8 ++++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/components/Selector.tsx b/src/renderer/src/components/Selector.tsx
index 1fb0efa6e8..5c064c19d8 100644
--- a/src/renderer/src/components/Selector.tsx
+++ b/src/renderer/src/components/Selector.tsx
@@ -70,7 +70,7 @@ const Selector = <V extends string | number>({
       const findLabels = (opts: SelectorOption<V>[]): (string | ReactNode)[] => {
         const labels: (string | ReactNode)[] = []
         for (const opt of opts) {
-          if (selectedValues.includes(opt.value)) {
+          if (selectedValues.some((v) => v == opt.value)) {
             labels.push(opt.label)
           }
           if (opt.options) {
@@ -91,7 +91,7 @@ const Selector = <V extends string | number>({
     const mapOption = (option: SelectorOption<V>) => ({
       key: option.value,
       label: option.label,
-      extra: <CheckIcon>{selectedValues.includes(option.value) && <Check size={14} />}</CheckIcon>,
+      extra: <CheckIcon>{selectedValues.some((v) => v == option.value) && <Check size={14} />}</CheckIcon>,
       disabled: option.disabled,
       type: option.type || (option.options ? 'group' : undefined),
       children: option.options?.map(mapOption)
diff --git a/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx b/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx
index fbfc8bb05b..cf6dd7c41f 100644
--- a/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx
+++ b/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx
@@ -16,7 +16,7 @@ import { setTranslateModelPrompt } from '@renderer/store/settings'
 import { Model } from '@renderer/types'
 import { Button, Select, Tooltip } from 'antd'
 import { find, sortBy } from 'lodash'
-import { CircleHelp, FolderPen, Languages, MessageSquareMore, Rocket, Settings2 } from 'lucide-react'
+import { ChevronDown, CircleHelp, FolderPen, Languages, MessageSquareMore, Rocket, Settings2 } from 'lucide-react'
 import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -104,6 +104,7 @@ const ModelSettings: FC = () => {
             options={selectOptions}
             showSearch
             placeholder={t('settings.models.empty')}
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
           />
           <Button icon={<Settings2 size={16} />} style={{ marginLeft: 8 }} onClick={DefaultAssistantSettings.show} />
         </HStack>
@@ -125,6 +126,7 @@ const ModelSettings: FC = () => {
             options={selectOptions}
             showSearch
             placeholder={t('settings.models.empty')}
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
           />
           <Button icon={<Settings2 size={16} />} style={{ marginLeft: 8 }} onClick={TopicNamingModalPopup.show} />
         </HStack>
@@ -146,6 +148,7 @@ const ModelSettings: FC = () => {
             options={selectOptions}
             showSearch
             placeholder={t('settings.models.empty')}
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
           />
           <Button icon={<Settings2 size={16} />} style={{ marginLeft: 8 }} onClick={onUpdateTranslateModel} />
           {translateModelPrompt !== TRANSLATE_PROMPT && (
@@ -191,7 +194,8 @@ const ModelSettings: FC = () => {
               value={quickAssistantId || defaultAssistant.id}
               style={{ width: 360 }}
               onChange={(value) => dispatch(setQuickAssistantId(value))}
-              placeholder={t('settings.models.quick_assistant_selection')}>
+              placeholder={t('settings.models.quick_assistant_selection')}
+              suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}>
               <Select.Option key={defaultAssistant.id} value={defaultAssistant.id}>
                 <AssistantItem>
                   <ModelAvatar model={defaultAssistant.model || defaultModel} size={18} />