Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-05 04:19:02 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat: highlight acitve topic icon

Browse Source
This commit is contained in:
kangfenmao 2024-09-05 14:36:19 +08:00
parent 0676ac8942
commit 08df6cb4f8
1 changed files with 20 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/renderer/src/pages/home/Assistants.tsx
View File

@ -25,7 +25,7 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
const { assistants, removeAssistant, addAssistant, updateAssistants } = useAssistants() const { assistants, removeAssistant, addAssistant, updateAssistants } = useAssistants()
const generating = useAppSelector((state) => state.runtime.generating) const generating = useAppSelector((state) => state.runtime.generating)
const { updateAssistant, removeAllTopics } = useAssistant(activeAssistant.id) const { updateAssistant, removeAllTopics } = useAssistant(activeAssistant.id)
const { toggleShowTopics } = useShowTopics() const { showTopics, toggleShowTopics } = useShowTopics()
const { t } = useTranslation() const { t } = useTranslation()
const onDelete = useCallback( const onDelete = useCallback(
@ -108,25 +108,22 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
return ( return (
<Container> <Container>
<DragableList list={assistants} onUpdate={updateAssistants}> <DragableList list={assistants} onUpdate={updateAssistants}>
{(assistant) => ( {(assistant) => {
<Dropdown key={assistant.id} menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}> const isCurrent = assistant.id === activeAssistant?.id
<AssistantItem return (
onClick={() => onSwitchAssistant(assistant)} <Dropdown key={assistant.id} menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}>
className={assistant.id === activeAssistant?.id ? 'active' : ''}> <AssistantItem onClick={() => onSwitchAssistant(assistant)} className={isCurrent ? 'active' : ''}>
<AssistantName className="name">{assistant.name || t('chat.default.name')}</AssistantName> <AssistantName className="name">{assistant.name || t('chat.default.name')}</AssistantName>
<ArrowRightButton <ArrowRightButton
className="arrow-button" className={`arrow-button ${isCurrent && showTopics ? 'active' : ''}`}
onClick={() => { onClick={() => isCurrent && toggleShowTopics()}>
if (assistant.id === activeAssistant?.id) { <i className="iconfont icon-gridlines" />
toggleShowTopics() </ArrowRightButton>
} {false && <TopicCount className="topics-count">{assistant.topics.length}</TopicCount>}
}}> </AssistantItem>
<i className="iconfont icon-gridlines" /> </Dropdown>
</ArrowRightButton> )
{false && <TopicCount className="topics-count">{assistant.topics.length}</TopicCount>} }}
</AssistantItem>
</Dropdown>
)}
</DragableList> </DragableList>
</Container> </Container>
) )
@ -188,7 +185,6 @@ const ArrowRightButton = styled.div`
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transition: all 0.2s ease;
width: 24px; width: 24px;
height: 24px; height: 24px;
min-width: 24px; min-width: 24px;
@ -203,6 +199,9 @@ const ArrowRightButton = styled.div`
&:hover { &:hover {
background-color: var(--color-background); background-color: var(--color-background);
} }
&.active {
background-color: var(--color-background);
}
` `
const TopicCount = styled.div` const TopicCount = styled.div`