Browse Source
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>pull/11684/head
afc163
6 months ago
committed by
GitHub
GitHub
27 changed files with 23514 additions and 44 deletions
File diff suppressed because it is too large
@ -0,0 +1,12 @@ |
|||||
|
// src/pages/chatbot/data.d.ts
|
||||
|
|
||||
|
export interface ConversationItem { |
||||
|
key: string; |
||||
|
label: string; |
||||
|
group?: string; |
||||
|
isDraft?: boolean; |
||||
|
} |
||||
|
|
||||
|
export type ParsedMessage = |
||||
|
| { role: 'user'; content: string } |
||||
|
| { role: 'assistant'; content: string; thinkContent?: string }; |
||||
@ -0,0 +1,326 @@ |
|||||
|
import { UserOutlined } from '@ant-design/icons'; |
||||
|
import { PageContainer } from '@ant-design/pro-components'; |
||||
|
import { Bubble, Conversations, Sender, Think, XProvider } from '@ant-design/x'; |
||||
|
import type { |
||||
|
BubbleItemType, |
||||
|
BubbleListProps, |
||||
|
} from '@ant-design/x/es/bubble/interface'; |
||||
|
import XMarkdown from '@ant-design/x-markdown'; |
||||
|
import { useXChat } from '@ant-design/x-sdk'; |
||||
|
import { Avatar, Card } from 'antd'; |
||||
|
import React, { useEffect, useMemo, useState } from 'react'; |
||||
|
|
||||
|
import type { ConversationItem, ParsedMessage } from './data'; |
||||
|
import { createChatProvider } from './service'; |
||||
|
import { useStyles } from './style'; |
||||
|
|
||||
|
const WELCOME_TEXT = '🤖 你好，有什么可以帮你？'; |
||||
|
|
||||
|
const TypewriterTitle: React.FC = () => { |
||||
|
const { styles } = useStyles(); |
||||
|
const [index, setIndex] = useState(0); |
||||
|
const done = index >= WELCOME_TEXT.length; |
||||
|
|
||||
|
useEffect(() => { |
||||
|
const timer = setInterval(() => { |
||||
|
setIndex((i) => { |
||||
|
if (i >= WELCOME_TEXT.length) { |
||||
|
clearInterval(timer); |
||||
|
return i; |
||||
|
} |
||||
|
return i + 1; |
||||
|
}); |
||||
|
}, 80); |
||||
|
return () => clearInterval(timer); |
||||
|
}, []); |
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
{WELCOME_TEXT.slice(0, index)} |
||||
|
{!done && <span className={styles.cursor}>|</span>} |
||||
|
</> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
const parser = (message: { content: string; role: string }): ParsedMessage => { |
||||
|
const { content, role } = message; |
||||
|
if (role !== 'assistant') return { role: 'user', content }; |
||||
|
|
||||
|
const trimmed = content.trimStart(); |
||||
|
|
||||
|
const fullMatch = trimmed.match(/^<think>([\s\S]*?)<\/think>([\s\S]*)$/); |
||||
|
if (fullMatch) { |
||||
|
return { |
||||
|
role: 'assistant', |
||||
|
thinkContent: fullMatch[1], |
||||
|
content: fullMatch[2].trimStart(), |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
const partialMatch = trimmed.match(/^<think>([\s\S]*)$/); |
||||
|
if (partialMatch) { |
||||
|
return { role: 'assistant', thinkContent: partialMatch[1], content: '' }; |
||||
|
} |
||||
|
|
||||
|
return { role: 'assistant', content }; |
||||
|
}; |
||||
|
|
||||
|
const STREAMING_ACTIVE = { hasNextChunk: true, enableAnimation: true }; |
||||
|
const STREAMING_IDLE = { hasNextChunk: false, enableAnimation: true }; |
||||
|
|
||||
|
const roleConfig: BubbleListProps['role'] = { |
||||
|
user: { |
||||
|
placement: 'end', |
||||
|
avatar: <Avatar icon={<UserOutlined />} />, |
||||
|
}, |
||||
|
ai: { |
||||
|
placement: 'start', |
||||
|
avatar: ( |
||||
|
<Avatar |
||||
|
style={{ |
||||
|
background: 'transparent', |
||||
|
fontSize: 22, |
||||
|
display: 'flex', |
||||
|
alignItems: 'center', |
||||
|
justifyContent: 'center', |
||||
|
}} |
||||
|
> |
||||
|
🤖 |
||||
|
</Avatar> |
||||
|
), |
||||
|
typing: { effect: 'typing', step: 2, interval: 20 }, |
||||
|
contentRender: ( |
||||
|
content: string, |
||||
|
info: { status?: string; loading?: boolean }, |
||||
|
) => { |
||||
|
if (info?.loading || !content) return undefined; |
||||
|
return ( |
||||
|
<XMarkdown |
||||
|
streaming={ |
||||
|
info?.status === 'updating' ? STREAMING_ACTIVE : STREAMING_IDLE |
||||
|
} |
||||
|
> |
||||
|
{content} |
||||
|
</XMarkdown> |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
const ChatbotPage: React.FC = () => { |
||||
|
const { styles } = useStyles(); |
||||
|
|
||||
|
const [conversations, setConversations] = useState<ConversationItem[]>([ |
||||
|
{ key: 'default', label: '💬 新对话', group: '今天', isDraft: true }, |
||||
|
{ |
||||
|
key: 'preset-1', |
||||
|
label: '🧩 Ant Design 的 Form 表单如何做联动校验？', |
||||
|
group: '今天', |
||||
|
}, |
||||
|
{ |
||||
|
key: 'preset-2', |
||||
|
label: '📋 ProTable 如何自定义工具栏按钮？', |
||||
|
group: '今天', |
||||
|
}, |
||||
|
{ |
||||
|
key: 'preset-3', |
||||
|
label: '🎨 如何用 antd-style 实现暗色主题切换？', |
||||
|
group: '昨天', |
||||
|
}, |
||||
|
{ |
||||
|
key: 'preset-4', |
||||
|
label: '🗂️ ProLayout 侧边菜单如何动态生成？', |
||||
|
group: '昨天', |
||||
|
}, |
||||
|
{ |
||||
|
key: 'preset-5', |
||||
|
label: '📊 Ant Design Charts 折线图数据格式', |
||||
|
group: '昨天', |
||||
|
}, |
||||
|
{ |
||||
|
key: 'preset-6', |
||||
|
label: '🚀 Ant Design Pro 如何接入后端权限系统？', |
||||
|
group: '更早', |
||||
|
}, |
||||
|
{ |
||||
|
key: 'preset-7', |
||||
|
label: '🔍 ProForm 中 Select 远程搜索怎么实现？', |
||||
|
group: '更早', |
||||
|
}, |
||||
|
{ |
||||
|
key: 'preset-8', |
||||
|
label: '⚙️ Ant Design Token 定制主题最佳实践', |
||||
|
group: '更早', |
||||
|
}, |
||||
|
]); |
||||
|
const [activeKey, setActiveKey] = useState<string>('default'); |
||||
|
const [inputValue, setInputValue] = useState(''); |
||||
|
|
||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
|
const provider = useMemo(() => createChatProvider() as any, []); |
||||
|
const { onRequest, abort, isRequesting, parsedMessages } = useXChat< |
||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
|
any, |
||||
|
ParsedMessage |
||||
|
>({ |
||||
|
provider, |
||||
|
conversationKey: activeKey, |
||||
|
parser, |
||||
|
requestPlaceholder: { role: 'assistant', content: '' }, |
||||
|
}); |
||||
|
|
||||
|
const sendMessage = (content: string) => { |
||||
|
setInputValue(''); |
||||
|
setConversations((prev) => |
||||
|
prev.map((c) => |
||||
|
c.key === activeKey && c.isDraft |
||||
|
? { ...c, label: content.slice(0, 20), isDraft: false } |
||||
|
: c, |
||||
|
), |
||||
|
); |
||||
|
onRequest({ messages: [{ role: 'user', content }] }); |
||||
|
}; |
||||
|
|
||||
|
const newChat = () => { |
||||
|
const key = crypto.randomUUID(); |
||||
|
setConversations((prev) => [ |
||||
|
{ key, label: '新对话', group: '今天', isDraft: true }, |
||||
|
...prev, |
||||
|
]); |
||||
|
setActiveKey(key); |
||||
|
}; |
||||
|
|
||||
|
const bubbleItems = useMemo<BubbleItemType[]>( |
||||
|
() => |
||||
|
parsedMessages.map((msg) => { |
||||
|
const parsed = msg.message as ParsedMessage; |
||||
|
const isAI = parsed.role === 'assistant'; |
||||
|
const thinkContent = |
||||
|
parsed.role === 'assistant' ? parsed.thinkContent : undefined; |
||||
|
|
||||
|
const item: BubbleItemType = { |
||||
|
key: msg.id, |
||||
|
role: isAI ? 'ai' : 'user', |
||||
|
content: parsed.content, |
||||
|
loading: isAI && msg.status === 'loading', |
||||
|
status: msg.status, |
||||
|
}; |
||||
|
|
||||
|
if (isAI && thinkContent) { |
||||
|
item.header = <Think>{thinkContent}</Think>; |
||||
|
} |
||||
|
|
||||
|
return item; |
||||
|
}), |
||||
|
[parsedMessages], |
||||
|
); |
||||
|
|
||||
|
const hasMessages = parsedMessages.length > 0; |
||||
|
|
||||
|
return ( |
||||
|
<PageContainer |
||||
|
ghost |
||||
|
childrenContentStyle={{ |
||||
|
paddingBlock: 0, |
||||
|
height: 'calc(100vh - 160px)', |
||||
|
display: 'flex', |
||||
|
flexDirection: 'column', |
||||
|
overflow: 'hidden', |
||||
|
}} |
||||
|
> |
||||
|
<Card |
||||
|
variant="borderless" |
||||
|
style={{ |
||||
|
height: '100%', |
||||
|
display: 'flex', |
||||
|
flexDirection: 'column', |
||||
|
overflow: 'hidden', |
||||
|
}} |
||||
|
styles={{ |
||||
|
body: { |
||||
|
flex: 1, |
||||
|
padding: 0, |
||||
|
overflow: 'hidden', |
||||
|
display: 'flex', |
||||
|
flexDirection: 'column', |
||||
|
}, |
||||
|
}} |
||||
|
> |
||||
|
<XProvider> |
||||
|
<div className={styles.layout}> |
||||
|
<div className={styles.sidebar}> |
||||
|
<Conversations |
||||
|
items={conversations} |
||||
|
activeKey={activeKey} |
||||
|
onActiveChange={setActiveKey} |
||||
|
groupable |
||||
|
menu={(conversation) => ({ |
||||
|
items: [{ key: 'delete', label: '删除', danger: true }], |
||||
|
onClick: ({ key }) => { |
||||
|
if (key === 'delete') { |
||||
|
setConversations((prev) => { |
||||
|
const next = prev.filter( |
||||
|
(c) => c.key !== conversation.key, |
||||
|
); |
||||
|
if (next.length === 0) { |
||||
|
const key = crypto.randomUUID(); |
||||
|
next.push({ |
||||
|
key, |
||||
|
label: '💬 新对话', |
||||
|
group: '今天', |
||||
|
isDraft: true, |
||||
|
}); |
||||
|
setActiveKey(key); |
||||
|
} else if (activeKey === conversation.key) { |
||||
|
setActiveKey(next[0]?.key ?? ''); |
||||
|
} |
||||
|
return next; |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
})} |
||||
|
creation={{ onClick: newChat, label: '新建对话' }} |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div className={styles.main}> |
||||
|
{hasMessages && ( |
||||
|
<div className={styles.messages}> |
||||
|
<Bubble.List |
||||
|
items={bubbleItems} |
||||
|
role={roleConfig} |
||||
|
autoScroll |
||||
|
styles={{ root: { maxWidth: 940 } }} |
||||
|
/> |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
<div |
||||
|
className={hasMessages ? styles.footer : styles.footerCenter} |
||||
|
> |
||||
|
{!hasMessages && ( |
||||
|
<div className={styles.welcomeTitle}> |
||||
|
<TypewriterTitle /> |
||||
|
</div> |
||||
|
)} |
||||
|
<Sender |
||||
|
value={inputValue} |
||||
|
onChange={setInputValue} |
||||
|
loading={isRequesting} |
||||
|
onSubmit={sendMessage} |
||||
|
onCancel={abort} |
||||
|
placeholder="输入消息，按 Enter 发送..." |
||||
|
autoSize={{ minRows: 4, maxRows: 8 }} |
||||
|
style={{ maxWidth: 940, width: '100%' }} |
||||
|
styles={{ input: { paddingBlock: 0 } }} |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</XProvider> |
||||
|
</Card> |
||||
|
</PageContainer> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default ChatbotPage; |
||||
@ -0,0 +1,18 @@ |
|||||
|
// src/pages/chatbot/service.ts
|
||||
|
import { OpenAIChatProvider, XRequest } from '@ant-design/x-sdk'; |
||||
|
|
||||
|
export const CHAT_API_URL = |
||||
|
process.env.CHAT_API_URL ?? |
||||
|
'https://api.x.ant.design/api/big_model_glm-4.5-flash'; |
||||
|
|
||||
|
/** |
||||
|
* Factory — call once per component mount (wrap in useMemo). |
||||
|
* OpenAIChatProvider handles SSE parsing and history accumulation internally. |
||||
|
*/ |
||||
|
export const createChatProvider = () => |
||||
|
new OpenAIChatProvider({ |
||||
|
request: XRequest(CHAT_API_URL, { |
||||
|
manual: true, |
||||
|
params: { model: 'glm-4.5-flash', stream: true }, |
||||
|
}), |
||||
|
}); |
||||
@ -0,0 +1,75 @@ |
|||||
|
// src/pages/chatbot/style.ts
|
||||
|
import { createStyles } from 'antd-style'; |
||||
|
|
||||
|
export const useStyles = createStyles(({ css, token }) => ({ |
||||
|
layout: css` |
||||
|
display: flex; |
||||
|
flex: 1; |
||||
|
overflow: hidden; |
||||
|
`,
|
||||
|
|
||||
|
sidebar: css` |
||||
|
width: 260px; |
||||
|
background: ${token.colorBgContainer}; |
||||
|
border-right: 1px solid ${token.colorBorderSecondary}; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
overflow: hidden; |
||||
|
`,
|
||||
|
|
||||
|
main: css` |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
overflow: hidden; |
||||
|
min-width: 0; |
||||
|
background: ${token.colorBgContainer}; |
||||
|
`,
|
||||
|
|
||||
|
messages: css` |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
padding: ${token.paddingMD}px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
|
||||
|
> * { |
||||
|
width: 100%; |
||||
|
} |
||||
|
`,
|
||||
|
|
||||
|
footer: css` |
||||
|
padding: ${token.paddingMD}px; |
||||
|
border-top: 1px solid ${token.colorBorderSecondary}; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
`,
|
||||
|
|
||||
|
footerCenter: css` |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: ${token.paddingLG}px; |
||||
|
gap: 32px; |
||||
|
margin-top: -10%; |
||||
|
`,
|
||||
|
|
||||
|
welcomeTitle: css` |
||||
|
font-size: 32px; |
||||
|
font-weight: 600; |
||||
|
color: ${token.colorText}; |
||||
|
text-align: center; |
||||
|
`,
|
||||
|
|
||||
|
cursor: css` |
||||
|
animation: chatbot-blink 0.8s step-end infinite; |
||||
|
|
||||
|
@keyframes chatbot-blink { |
||||
|
0%, 100% { opacity: 1; } |
||||
|
50% { opacity: 0; } |
||||
|
} |
||||
|
`,
|
||||
|
})); |
||||
@ -0,0 +1 @@ |
|||||
|
module.exports = {}; |
||||
Loading…
Reference in new issue