mirror of
https://github.com/lobehub/lobehub.git
synced 2026-03-28 13:39:28 +07:00
💄 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:
@@ -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',
|
||||
|
||||
@@ -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={
|
||||
|
||||
@@ -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>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user