feat: highlight acitve topic icon

This commit is contained in:
kangfenmao 2024-09-05 14:36:19 +08:00
parent 0676ac8942
commit 08df6cb4f8

View File

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