💄 style: Add hyperlink to each topic & pinned agent (#10367)

*  feat: refactor TopicItem to use Link for navigation and improve URL handling

* 🐛 fix: remove enabled property from Gemini 3 Pro model definition

*  feat: add link to session chat in pinned agent list
This commit is contained in:
sxjeru
2025-11-24 15:20:24 +08:00
committed by GitHub
parent 27c1154210
commit 63e4b3d731
3 changed files with 53 additions and 33 deletions

View File

@@ -23,7 +23,6 @@ const ollamaCloudModels: AIChatModelCard[] = [
description:
'Gemini 3 Pro 是 Google 最智能的模型,具有 SOTA 推理和多模式理解,以及强大的代理和氛围编码功能。',
displayName: 'Gemini 3 Pro Preview',
enabled: true,
id: 'gemini-3-pro-preview',
releasedAt: '2025-11-20',
type: 'chat',

View File

@@ -1,10 +1,13 @@
import { Skeleton } from 'antd';
import { createStyles } from 'antd-style';
import qs from 'query-string';
import { Suspense, memo, useState } from 'react';
import { Flexbox } from 'react-layout-kit';
import { Link } from 'react-router-dom';
import { useChatStore } from '@/store/chat';
import { useGlobalStore } from '@/store/global';
import { useSessionStore } from '@/store/session';
import ThreadList from '../ThreadList';
import DefaultContent from './DefaultContent';
@@ -52,32 +55,43 @@ const TopicItem = memo<ConfigCellProps>(({ title, active, id, fav, threadId }) =
const { styles, cx } = useStyles();
const toggleConfig = useGlobalStore((s) => s.toggleMobileTopic);
const [toggleTopic] = useChatStore((s) => [s.switchTopic]);
const activeId = useSessionStore((s) => s.activeId);
const [isHover, setHovering] = useState(false);
const topicUrl = qs.stringifyUrl({
query: id ? { session: activeId, topic: id } : { session: activeId },
url: '/chat',
});
return (
<Flexbox style={{ position: 'relative' }}>
<Flexbox
align={'center'}
className={cx(styles.container, 'topic-item', active && !threadId && styles.active)}
distribution={'space-between'}
horizontal
onClick={() => {
<Link
onClick={(e) => {
e.preventDefault();
toggleTopic(id);
toggleConfig(false);
}}
onMouseEnter={() => {
setHovering(true);
}}
onMouseLeave={() => {
setHovering(false);
}}
to={topicUrl}
>
{!id ? (
<DefaultContent />
) : (
<TopicContent fav={fav} id={id} showMore={isHover} title={title} />
)}
</Flexbox>
<Flexbox
align={'center'}
className={cx(styles.container, 'topic-item', active && !threadId && styles.active)}
distribution={'space-between'}
horizontal
onMouseEnter={() => {
setHovering(true);
}}
onMouseLeave={() => {
setHovering(false);
}}
>
{!id ? (
<DefaultContent />
) : (
<TopicContent fav={fav} id={id} showMore={isHover} title={title} />
)}
</Flexbox>
</Link>
{active && (
<Suspense
fallback={

View File

@@ -3,7 +3,9 @@ import { Divider } from 'antd';
import { createStyles } from 'antd-style';
import isEqual from 'fast-deep-equal';
import { Flexbox } from 'react-layout-kit';
import { Link } from 'react-router-dom';
import { SESSION_CHAT_URL } from '@/const/url';
import { usePinnedAgentState } from '@/hooks/usePinnedAgentState';
import { useSwitchSession } from '@/hooks/useSwitchSession';
import { useSessionStore } from '@/store/session';
@@ -93,21 +95,26 @@ const PinList = () => {
placement={'right'}
title={sessionHelpers.getTitle(item.meta)}
>
<Flexbox
className={cx(
styles.ink,
isPinned && activeId === item.id ? styles.inkActive : undefined,
)}
<Link
onClick={(e) => {
e.preventDefault();
switchAgent(item.id);
}}
to={SESSION_CHAT_URL(item.id)}
>
<Avatar
avatar={sessionHelpers.getAvatar(item.meta)}
background={item.meta.backgroundColor}
onClick={() => {
switchAgent(item.id);
}}
size={40}
/>
</Flexbox>
<Flexbox
className={cx(
styles.ink,
isPinned && activeId === item.id ? styles.inkActive : undefined,
)}
>
<Avatar
avatar={sessionHelpers.getAvatar(item.meta)}
background={item.meta.backgroundColor}
size={40}
/>
</Flexbox>
</Link>
</Tooltip>
</Flexbox>
))}