@ai-group/chat-sdk 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/assets/arrow-down-blue.png +0 -0
- package/dist/cjs/components/XAiChatbot/XAiChatbot.stories.js +93 -88
- package/dist/cjs/components/XAiChatbot/XAiChatbot.stories.js.map +2 -2
- package/dist/cjs/components/XAiChatbot/index.d.ts +1 -5
- package/dist/cjs/components/XAiChatbot/index.js +37 -26
- package/dist/cjs/components/XAiChatbot/index.js.map +3 -3
- package/dist/cjs/components/XAiChatbot/styles.d.ts +4 -0
- package/dist/cjs/components/XAiChatbot/styles.js +31 -1
- package/dist/cjs/components/XAiChatbot/styles.js.map +2 -2
- package/dist/cjs/types/XAiChatbot.d.ts +2 -0
- package/dist/cjs/types/XAiChatbot.js.map +1 -1
- package/dist/esm/assets/arrow-down-blue.png +0 -0
- package/dist/esm/components/XAiChatbot/XAiChatbot.stories.js +64 -87
- package/dist/esm/components/XAiChatbot/XAiChatbot.stories.js.map +1 -1
- package/dist/esm/components/XAiChatbot/index.d.ts +1 -5
- package/dist/esm/components/XAiChatbot/index.js +160 -112
- package/dist/esm/components/XAiChatbot/index.js.map +1 -1
- package/dist/esm/components/XAiChatbot/styles.d.ts +4 -0
- package/dist/esm/components/XAiChatbot/styles.js +11 -7
- package/dist/esm/components/XAiChatbot/styles.js.map +1 -1
- package/dist/esm/types/XAiChatbot.d.ts +2 -0
- package/dist/esm/types/XAiChatbot.js.map +1 -1
- package/dist/umd/chat-sdk.min.js +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/XAiChatbot/index.tsx"],
|
|
4
|
-
"sourcesContent": ["// 文件: components/XAiChatbot/index.tsx\n\nimport React, {\n useRef,\n useState,\n useMemo,\n} from 'react';\nimport {\n Tooltip,\n GetProp,\n} from 'antd';\nimport {\n Bubble,\n Prompts,\n} from '@ant-design/x';\nimport {\n UserOutlined,\n RedoOutlined,\n CopyOutlined,\n DeleteOutlined,\n} from '@ant-design/icons';\nimport clsx from 'clsx';\nimport MarkdownIt from 'markdown-it';\nimport reactHtmlParser from 'react-html-parser';\nimport MarkdownGlobalStyle from '@/styles/markdown';\nimport {\n MessageStatus,\n MessageRole,\n Messages,\n} from '@/types/XAiMessage';\nimport {\n XAiChatbotProps,\n ActionItem,\n} from '@/types/XAiChatbot';\nimport emptyIcon from '@/assets/empty.png';\nimport arrowUp from '@/assets/arrow-up.png';\nimport arrowDown from '@/assets/arrow-down.png';\nimport thinkIcon from '@/assets/think.png';\nimport { useChatbotContext } from '@/hooks/useProviderContext';\nimport { useStyles, GlobalStyle } from './styles';\nimport XAiSender from '../XAiSender';\n\nconst md = new MarkdownIt({\n html: true,\n linkify: true,\n typographer: true,\n});\n\n// 自定义 link_open 渲染规则\nconst defaultRender = md.renderer.rules.link_open || ((tokens, idx, options, env, self) => {\n return self.renderToken(tokens, idx, options);\n});\n\n// a 标签打开规则\nmd.renderer.rules.link_open = (tokens, idx, options, env, self) => {\n // 添加 target=\"_blank\"\n const aIndex = tokens[idx].attrIndex('target');\n if (aIndex < 0) {\n tokens[idx].attrPush(['target', '_blank']);\n } else {\n tokens[idx].attrs![aIndex][1] = '_blank';\n }\n // 添加 rel=\"noopener noreferrer\"\n const relIndex = tokens[idx].attrIndex('rel');\n if (relIndex < 0) {\n tokens[idx].attrPush(['rel', 'noopener noreferrer']);\n } else {\n tokens[idx].attrs![relIndex][1] = 'noopener noreferrer';\n }\n return defaultRender(tokens, idx, options, env, self);\n};\n\nexport interface ActionHeaderProps {\n execute: any[];\n thinks: string,\n renderActionHeader?: (params: { execute: any[]; expanded: boolean; onToggle: () => void }) => React.ReactNode;\n}\n\n// 默认消息功能区\nconst defaultActions: ActionItem[] = [\n {\n key: 'redo',\n icon: <RedoOutlined />,\n tooltip: '重新生成',\n },\n {\n key: 'copy',\n icon: <CopyOutlined />,\n tooltip: '复制',\n },\n {\n key: 'delete',\n icon: <DeleteOutlined />,\n tooltip: '删除',\n },\n];\n\nconst XAiChatbot: React.FC<XAiChatbotProps> = (props) => {\n // 使用新的 Hook 来处理 Provider 上下文\n const { mergedProps } = useChatbotContext(props);\n\n const {\n navbarShow = false,\n navbar,\n renderNavbar = null,\n clearBtnShow = true,\n inputShow = true,\n // renderMessageContent,\n // quickReplies = [],\n // quickRepliesVisible = true,\n // onQuickReplyClick,\n loading: propLoading = false,\n messageTooltip,\n avatar,\n userAvatar,\n messages: propMessages,\n text = '',\n footerTips = '',\n empty = null,\n emptyStateImage = emptyIcon,\n emptyStateText = '我的智能体',\n messageActions = defaultActions,\n onMessagesActionsCallback,\n // 点击帮助消息\n onSuggestMessageClick,\n onSend,\n onClear,\n onStop,\n providerId,\n } = mergedProps;\n\n // 如果在 Provider 中，使用 Provider 的状态\n const messages = mergedProps.messages || propMessages || [];\n const loading = mergedProps.loading || propLoading;\n\n const [content, setContent] = useState<string>(text); // 输入框文本\n const styles = useStyles();\n const lastMessageId = useRef<string>('');\n const isScriptScrolling = useRef<boolean>(false);\n const chatId = providerId ? `za-chatbot-container-${providerId}` : 'za-chatbot-container';\n\n // 滚动到最底部\n const scrollToBottom = () => {\n isScriptScrolling.current = true;\n setTimeout(() => {\n const mainChatWrapper = document.getElementById(chatId);\n if (mainChatWrapper) {\n mainChatWrapper.scrollTop = mainChatWrapper?.scrollHeight;\n }\n isScriptScrolling.current = false;\n }, 0);\n };\n\n // 消息功能区组件\n const FooterActions: React.FC<{ data: Messages; lastMessage: boolean }> = ({ data, lastMessage = false }) => (\n <div className={clsx(styles.flex, styles.gap(13))}>\n {messageActions.map((action: ActionItem, index: number) => {\n if (!lastMessage && action.key === 'redo') return null;\n return (\n <Tooltip key={action.key} title={action.tooltip}>\n <span className={styles.cursor('pointer')} onClick={() => onMessagesActionsCallback?.(index, data)}>\n {action.icon}\n </span>\n </Tooltip>\n );\n })}\n </div>\n );\n\n // 消息底部区域\n const MessageFooter: React.FC<{ data: Messages; lastMessage: boolean }> = ({ data, lastMessage = false }) => (\n <>\n {messageTooltip?.(data)}\n <FooterActions data={data} lastMessage={lastMessage} />\n </>\n );\n\n // 聊天角色\n const rolesObject: GetProp<typeof Bubble.List, 'roles'> = {\n assistant: {\n placement: 'start',\n avatar: { icon: avatar || <UserOutlined className={clsx(styles.bg('#fde3cf'), styles.userAvatar)} /> },\n typing: { step: 5, interval: 20 },\n style: {\n maxWidth: 600,\n },\n classNames: {\n content: 'assistant-content',\n },\n },\n user: {\n placement: 'end',\n avatar: { icon: userAvatar || <UserOutlined className={clsx(styles.bg('#87d068'), styles.userAvatar)} /> },\n classNames: {\n content: 'user-content',\n },\n },\n suggestion: {\n placement: 'start',\n avatar: { icon: <UserOutlined />, style: { visibility: 'hidden' } },\n variant: 'borderless',\n },\n };\n\n // ActionHeader 组件\n const ActionHeader: React.FC<ActionHeaderProps> = ({ execute = [], thinks = '', renderActionHeader }) => {\n const [expanded, setExpanded] = useState(false);\n\n if (!execute || execute.length === 0) return null;\n if (renderActionHeader) {\n return renderActionHeader({ execute, expanded, onToggle: () => setExpanded((v) => !v) });\n }\n return (\n <div className={styles.actionHeaderWrapper}>\n { !expanded && (\n <div\n className={styles.actionTitle}\n onClick={() => setExpanded((v) => !v)}\n >\n <img src={thinkIcon} alt=\"icon\" className={styles.actionHeaderIcon} />\n <span className={styles.flex1}>运行过程</span>\n <img alt=\"展开icon\" src={arrowDown} className={styles.w('16px')} />\n </div>\n ) }\n {expanded && (\n <div className={styles.actionHeaderDetail}>\n <div className={styles.actionDetailTitle} onClick={() => setExpanded((v) => !v)}>\n <img src={thinkIcon} alt=\"\" className={clsx(styles.w(14))} />\n <div className={clsx(styles.flex1, styles.pl(10))}>隐藏运行过程</div>\n <img alt=\"收起icon\" src={arrowUp} className={styles.w('16px')} />\n </div>\n { thinks && <div className={styles.actionDetailContent}>\n <span>{thinks}</span>\n </div> }\n <div className={styles.executeWrapper}>\n {\n execute.map((action, idx) => {\n const thinkIcon = action?.expandIcon || action?.extra?.expandIcon || action?.extra?.icon || action?.icon;\n const thinkCost = action?.cost || action?.extra?.cost;\n return (\n <div key={action.uniqueId || idx} className={styles.actionHeaderDetailItem}>\n { thinkIcon && <img src={thinkIcon} alt=\"icon\" className={styles.actionHeaderIcon} /> }\n <span>{action?.name}</span>\n <span className={styles.actionHeaderCost}>{thinkCost ? `${thinkCost}s` : ''}</span>\n </div>\n );\n })\n }\n </div>\n </div>\n )}\n </div>\n );\n };\n\n // 触发发送\n const handleSend = (type: string, content: string) => {\n if (content.trim()) {\n // 直接使用合并后的 onSend，自动处理 Provider 和独立模式\n onSend?.(type, content);\n setContent(''); // 发送后清空输入框内容\n scrollToBottom();\n }\n };\n\n // 输出内容\n const handleChange = (content: string) => {\n setContent(content);\n }\n\n // 停止生成\n const handleStop = () => {\n onStop?.();\n }\n\n // 导航栏\n const NavBar: React.FC = () => {\n if (renderNavbar) {\n return renderNavbar();\n } if (navbar?.title) {\n return (\n <header className={styles.navbar}>\n {navbar.avatar && <img src={navbar.avatar} className={styles.avatar} alt=\"\" />}\n <div>\n <div className={styles.title}>{navbar.title}</div>\n <div className={styles.subtitle}>{navbar.subtitle}</div>\n </div>\n </header>\n );\n }\n return <></>;\n };\n\n // 确认清除\n const confirmClear = () => {\n onClear?.();\n };\n\n // 空状态\n const EmptyState = useMemo(() => () => (\n empty ? empty : <div className={styles.emptyWrapper}>\n <img src={emptyStateImage} alt=\"空状态图标\" className={styles.emptyImg} />\n <div className={clsx(styles.text(16), styles.weight(600), styles.textColor('#343434'))}>{emptyStateText}</div>\n </div>\n // eslint-disable-next-line react-hooks/exhaustive-deps\n ), [emptyStateImage, emptyStateText]);\n\n return (\n <>\n <GlobalStyle />\n <MarkdownGlobalStyle />\n <div id=\"x-ai-chatbot\" className={styles.wrapper}>\n { navbarShow && <NavBar /> }\n {/** 消息容器 */}\n <div className={styles.messageContainer}>\n {/* 消息列表主体 */}\n {\n messages?.length\n ? (\n <Bubble.List\n id={chatId}\n roles={rolesObject}\n className={styles.messageList}\n items={messages.map((msg: any) => {\n const { id, role, status, type, execute = [], thinks = '', extra = { noFooter: false } } = msg as Messages;\n // 最后一条 AI消息标识\n if (role === MessageRole.assistant) {\n lastMessageId.current = id;\n }\n // 会话内容\n const bubbleContent: any = {\n key: id,\n role,\n loading: status === MessageStatus.init,\n header: (() => <ActionHeader execute={execute} thinks={thinks} />),\n content: (() => {\n // 文本消息\n if (type === 'TextMessage') {\n // 用户消息\n if (role === 'user') {\n return (\n <div\n className=\"markdown-body\"\n style={{\n minWidth: 0,\n maxWidth: 600,\n }}\n >\n {msg.content?.text}\n </div>\n );\n }\n // 输出html字符串\n const html = md.render(msg.content?.text || '');\n // 生成React节点\n const htmlString = reactHtmlParser(html);\n return (\n <>\n <div\n className=\"markdown-body\"\n style={{\n minWidth: 0,\n maxWidth: 600,\n }}\n >\n {htmlString}\n </div>\n </>\n );\n }\n // 图片类型\n if (type === 'ImageMessage') {\n return (\n <div style={{ minWidth: 0, maxWidth: 600 }}>\n <img src={msg.content?.bytes} alt=\"\" style={{ maxWidth: 680 }} />\n </div>\n );\n }\n // 提示类型\n if (type === 'SuggestionMessage') {\n return (\n <Prompts\n vertical\n items={msg.content as any}\n onItemClick={(info) => {\n onSuggestMessageClick?.(info.data, id, 'text');\n if (info.data.description) {\n onSend?.('text', info.data.description as string);\n }\n }}\n />\n );\n }\n // 其他类型...\n return null;\n })(),\n };\n\n if (!extra.noFooter) {\n bubbleContent.footer = (() => {\n return (\n role === MessageRole.assistant && status !== MessageStatus.failed && (\n <>\n <MessageFooter data={msg as Messages} lastMessage={lastMessageId.current === id} />\n </>\n )\n );\n });\n }\n\n return bubbleContent;\n })}\n />\n )\n : (\n <EmptyState />\n )\n }\n </div>\n {/* 输入框 */}\n { inputShow && <XAiSender\n value={content}\n loading={loading}\n footerTips={footerTips}\n clearBtnShow={clearBtnShow}\n onChange={handleChange}\n onSubmit={handleSend}\n onStop={handleStop}\n onClear={confirmClear}\n /> }\n </div>\n </>\n );\n};\n\nexport default XAiChatbot;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,
|
|
6
|
-
"names": ["MarkdownIt", "React", "
|
|
4
|
+
"sourcesContent": ["// 文件: components/XAiChatbot/index.tsx\n\nimport React, {\n useRef,\n useState,\n useMemo,\n memo,\n} from 'react';\nimport {\n Tooltip,\n GetProp,\n} from 'antd';\nimport {\n Bubble,\n Prompts,\n} from '@ant-design/x';\nimport {\n UserOutlined,\n RedoOutlined,\n CopyOutlined,\n DeleteOutlined,\n} from '@ant-design/icons';\nimport clsx from 'clsx';\nimport MarkdownIt from 'markdown-it';\nimport reactHtmlParser from 'react-html-parser';\nimport MarkdownGlobalStyle from '@/styles/markdown';\nimport {\n MessageStatus,\n MessageRole,\n Messages,\n} from '@/types/XAiMessage';\nimport {\n XAiChatbotProps,\n ActionItem,\n} from '@/types/XAiChatbot';\nimport emptyIcon from '@/assets/empty.png';\nimport arrowUp from '@/assets/arrow-up.png';\nimport arrowDown from '@/assets/arrow-down.png';\nimport thinkIcon from '@/assets/think.png';\nimport groupIcon from '@/assets/group.png';\nimport arrowDownBlue from '@/assets/arrow-down-blue.png';\nimport { useChatbotContext } from '@/hooks/useProviderContext';\nimport { useStyles, GlobalStyle } from './styles';\nimport XAiSender from '../XAiSender';\n\nconst styles = useStyles();\n\nconst md = new MarkdownIt({\n html: true,\n linkify: true,\n typographer: true,\n});\n\n// 自定义 link_open 渲染规则\nconst defaultRender = md.renderer.rules.link_open || ((tokens, idx, options, env, self) => {\n return self.renderToken(tokens, idx, options);\n});\n\n// a 标签打开规则\nmd.renderer.rules.link_open = (tokens, idx, options, env, self) => {\n // 添加 target=\"_blank\"\n const aIndex = tokens[idx].attrIndex('target');\n if (aIndex < 0) {\n tokens[idx].attrPush(['target', '_blank']);\n } else {\n tokens[idx].attrs![aIndex][1] = '_blank';\n }\n // 添加 rel=\"noopener noreferrer\"\n const relIndex = tokens[idx].attrIndex('rel');\n if (relIndex < 0) {\n tokens[idx].attrPush(['rel', 'noopener noreferrer']);\n } else {\n tokens[idx].attrs![relIndex][1] = 'noopener noreferrer';\n }\n return defaultRender(tokens, idx, options, env, self);\n};\n\nexport interface ActionHeaderProps {\n execute: any[];\n thinks: string,\n}\n\n// ActionHeader 组件\nexport const ActionHeader: React.FC<ActionHeaderProps> = memo(({ execute = [], thinks = '' }) => {\n const styles = useStyles();\n const [expanded, setExpanded] = useState(true);\n const [executeExpanded, setExecuteExpanded] = useState(false);\n\n if (!execute || execute.length === 0 || !thinks) return null;\n\n const last = execute[execute.length - 1] || {};\n const { name } = last;\n const icon = last?.icon || last?.extra?.icon;\n\n return (\n <div className={styles.actionHeaderWrapper}>\n {!expanded && (\n <div className={styles.actionTitle} onClick={() => setExpanded(v => !v)}>\n <img src={thinkIcon} alt=\"icon\" className={styles.actionHeaderIcon} />\n <span className={styles.flex1}>运行过程</span>\n <img alt=\"展开icon\" src={arrowDown} className={styles.w('16px')} />\n </div>\n )}\n {expanded && (\n <div className={styles.actionHeaderDetail}>\n <div className={styles.actionDetailTitle} onClick={() => setExpanded(v => !v)}>\n <img src={thinkIcon} alt=\"\" className={clsx(styles.w(14))} />\n <div className={clsx(styles.flex1, styles.pl(10))}>隐藏运行过程</div>\n <img alt=\"收起icon\" src={arrowUp} className={styles.w('16px')} />\n </div>\n {thinks && (\n <div className={styles.actionDetailContent}>\n <span>{thinks}</span>\n </div>\n )}\n {!executeExpanded && (\n <div className={styles.executeHiddenWrapper} onClick={() => setExecuteExpanded(v => !v)}>\n {icon && <img src={icon} alt=\"icon\" />}\n <span className={styles.flex1}>{name}</span>\n <img alt=\"工具icon\" src={arrowDownBlue} className={styles.w('16px')} />\n </div>\n )}\n {executeExpanded && (\n <div className={styles.executeWrapper}>\n <div className={styles.executeTitle} onClick={() => setExecuteExpanded(v => !v)}>\n <img src={groupIcon} alt=\"icon\" className={styles.executeHeaderIcon} />\n <span className={styles.flex1}>隐藏运行详情</span>\n <img alt=\"展开详情icon\" src={arrowUp} className={styles.w('16px')} />\n </div>\n <div className={styles.executeContent}>\n {execute.map((action: any, idx: number) => {\n const thinkIcon = action?.expandIcon || action?.extra?.expandIcon || action?.extra?.icon || action?.icon;\n const thinkCost = action?.cost || action?.extra?.cost;\n return (\n <div key={action.uniqueId || idx} className={styles.actionHeaderDetailItem}>\n {thinkIcon && <img src={thinkIcon} alt=\"icon\" className={styles.actionHeaderIcon} />}\n <span>{action?.name}</span>\n <span className={styles.actionHeaderCost}>{thinkCost ? `${thinkCost}s` : ''}</span>\n </div>\n );\n })}\n </div>\n </div>\n )}\n </div>\n )}\n </div>\n );\n});\n\n// 默认消息功能区\nconst defaultActions: ActionItem[] = [\n {\n key: 'redo',\n icon: <RedoOutlined />,\n tooltip: '重新生成',\n },\n {\n key: 'copy',\n icon: <CopyOutlined />,\n tooltip: '复制',\n },\n {\n key: 'delete',\n icon: <DeleteOutlined />,\n tooltip: '删除',\n },\n];\n\n\nconst XAiChatbot: React.FC<XAiChatbotProps> = (props) => {\n // 使用新的 Hook 来处理 Provider 上下文\n const { mergedProps } = useChatbotContext(props);\n\n const {\n navbarShow = false,\n navbar,\n renderNavbar = null,\n clearBtnShow = true,\n inputShow = true,\n // renderMessageContent,\n // quickReplies = [],\n // quickRepliesVisible = true,\n // onQuickReplyClick,\n loading: propLoading = false,\n messageTooltip,\n avatar,\n userAvatar,\n messages: propMessages,\n text = '',\n footerTips = '',\n empty = null,\n emptyStateImage = emptyIcon,\n emptyStateText = '我的智能体',\n messageActions = defaultActions,\n onMessagesActionsCallback,\n // 点击帮助消息\n onSuggestMessageClick,\n onSend,\n onClear,\n onStop,\n providerId,\n // 消息顶部\n messageTop,\n } = mergedProps;\n\n // 如果在 Provider 中，使用 Provider 的状态\n const messages = mergedProps.messages || propMessages || [];\n const loading = mergedProps.loading || propLoading;\n\n const [content, setContent] = useState<string>(text); // 输入框文本\n const lastMessageId = useRef<string>('');\n const isScriptScrolling = useRef<boolean>(false);\n const chatId = providerId ? `za-chatbot-container-${providerId}` : 'za-chatbot-container';\n\n // 滚动到最底部\n const scrollToBottom = () => {\n isScriptScrolling.current = true;\n setTimeout(() => {\n const mainChatWrapper = document.getElementById(chatId);\n if (mainChatWrapper) {\n mainChatWrapper.scrollTop = mainChatWrapper?.scrollHeight;\n }\n isScriptScrolling.current = false;\n }, 0);\n };\n\n // 消息功能区组件\n const FooterActions: React.FC<{ data: Messages; lastMessage: boolean }> = ({ data, lastMessage = false }) => (\n <div className={clsx(styles.flex, styles.gap(13))}>\n {messageActions.map((action: ActionItem, index: number) => {\n if (!lastMessage && action.key === 'redo') return null;\n return (\n <Tooltip key={action.key} title={action.tooltip}>\n <span className={styles.cursor('pointer')} onClick={() => onMessagesActionsCallback?.(index, data)}>\n {action.icon}\n </span>\n </Tooltip>\n );\n })}\n </div>\n );\n\n // 消息底部区域\n const MessageFooter: React.FC<{ data: Messages; lastMessage: boolean }> = ({ data, lastMessage = false }) => (\n <>\n {messageTooltip?.(data)}\n <FooterActions data={data} lastMessage={lastMessage} />\n </>\n );\n\n // 聊天角色\n const rolesObject: GetProp<typeof Bubble.List, 'roles'> = {\n assistant: {\n placement: 'start',\n avatar: { icon: avatar || <UserOutlined className={clsx(styles.bg('#fde3cf'), styles.userAvatar)} /> },\n typing: { step: 5, interval: 20 },\n style: {\n maxWidth: 600,\n },\n classNames: {\n content: 'assistant-content',\n },\n },\n user: {\n placement: 'end',\n avatar: { icon: userAvatar || <UserOutlined className={clsx(styles.bg('#87d068'), styles.userAvatar)} /> },\n classNames: {\n content: 'user-content',\n },\n },\n suggestion: {\n placement: 'start',\n avatar: { icon: <UserOutlined />, style: { visibility: 'hidden' } },\n variant: 'borderless',\n },\n };\n\n // 触发发送\n const handleSend = (type: string, content: string) => {\n if (content.trim()) {\n // 直接使用合并后的 onSend，自动处理 Provider 和独立模式\n onSend?.(type, content);\n setContent(''); // 发送后清空输入框内容\n scrollToBottom();\n }\n };\n\n // 输出内容\n const handleChange = (content: string) => {\n setContent(content);\n }\n\n // 停止生成\n const handleStop = () => {\n onStop?.();\n }\n\n // 导航栏\n const NavBar: React.FC = () => {\n if (renderNavbar) {\n return renderNavbar();\n } if (navbar?.title) {\n return (\n <header className={styles.navbar}>\n {navbar.avatar && <img src={navbar.avatar} className={styles.avatar} alt=\"\" />}\n <div>\n <div className={styles.title}>{navbar.title}</div>\n <div className={styles.subtitle}>{navbar.subtitle}</div>\n </div>\n </header>\n );\n }\n return <></>;\n };\n\n // 确认清除\n const confirmClear = () => {\n onClear?.();\n };\n\n // 空状态\n const EmptyState = useMemo(() => () => (\n empty ? empty : <div className={styles.emptyWrapper}>\n <img src={emptyStateImage} alt=\"空状态图标\" className={styles.emptyImg} />\n <div className={clsx(styles.text(16), styles.weight(600), styles.textColor('#343434'))}>{emptyStateText}</div>\n </div>\n // eslint-disable-next-line react-hooks/exhaustive-deps\n ), [emptyStateImage, emptyStateText]);\n\n return (\n <>\n <GlobalStyle />\n <MarkdownGlobalStyle />\n <div id=\"x-ai-chatbot\" className={styles.wrapper}>\n { navbarShow && <NavBar /> }\n {/** 消息容器 */}\n <div className={styles.messageContainer}>\n {/* 消息列表主体 */}\n {\n messages?.length\n ? (\n <Bubble.List\n id={chatId}\n roles={rolesObject}\n className={styles.messageList}\n items={messages.map((msg: any) => {\n const { id, role, status, type, execute = [], thinks = '', extra = { noFooter: false } } = msg as Messages;\n const [expanded, setExpanded] = useState(false);\n const [executeExpanded, setExecuteExpanded] = useState(false);\n // 最后一条 AI消息标识\n if (role === MessageRole.assistant) {\n lastMessageId.current = id;\n }\n // 会话内容\n const bubbleContent: any = {\n key: id,\n role,\n loading: status === MessageStatus.init,\n header: (() => messageTop || \n <ActionHeader\n execute={execute}\n thinks={thinks}\n />),\n content: (() => {\n // 文本消息\n if (type === 'TextMessage') {\n // 用户消息\n if (role === 'user') {\n return (\n <div\n className=\"markdown-body\"\n style={{\n minWidth: 0,\n maxWidth: 600,\n }}\n >\n {msg.content?.text}\n </div>\n );\n }\n // 输出html字符串\n const html = md.render(msg.content?.text || '');\n // 生成React节点\n const htmlString = reactHtmlParser(html);\n return (\n <>\n <div\n className=\"markdown-body\"\n style={{\n minWidth: 0,\n maxWidth: 600,\n }}\n >\n {htmlString}\n </div>\n </>\n );\n }\n // 图片类型\n if (type === 'ImageMessage') {\n return (\n <div style={{ minWidth: 0, maxWidth: 600 }}>\n <img src={msg.content?.bytes} alt=\"\" style={{ maxWidth: 680 }} />\n </div>\n );\n }\n // 提示类型\n if (type === 'SuggestionMessage') {\n return (\n <Prompts\n vertical\n items={msg.content as any}\n onItemClick={(info) => {\n onSuggestMessageClick?.(info.data, id, 'text');\n if (info.data.description) {\n onSend?.('text', info.data.description as string);\n }\n }}\n />\n );\n }\n // 其他类型...\n return null;\n })(),\n };\n\n if (!extra.noFooter) {\n bubbleContent.footer = (() => {\n return (\n role === MessageRole.assistant && status !== MessageStatus.failed && (\n <>\n <MessageFooter data={msg as Messages} lastMessage={lastMessageId.current === id} />\n </>\n )\n );\n });\n }\n\n return bubbleContent;\n })}\n />\n )\n : (\n <EmptyState />\n )\n }\n </div>\n {/* 输入框 */}\n { inputShow && <XAiSender\n value={content}\n loading={loading}\n footerTips={footerTips}\n clearBtnShow={clearBtnShow}\n onChange={handleChange}\n onSubmit={handleSend}\n onStop={handleStop}\n onClear={confirmClear}\n /> }\n </div>\n </>\n );\n};\n\nexport default XAiChatbot;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MarkdownIt", "styles", "React", "thinkIcon", "arrowDown", "clsx", "arrowUp", "arrowDownBlue", "groupIcon", "_a", "emptyIcon", "content", "MarkdownGlobalStyle", "reactHtmlParser", "XAiSender"]
|
|
7
7
|
}
|
|
@@ -22,9 +22,13 @@ export declare const useStyles: () => {
|
|
|
22
22
|
actionHeaderIcon: string;
|
|
23
23
|
actionHeaderDetail: string;
|
|
24
24
|
actionDetailTitle: string;
|
|
25
|
+
executeHeaderIcon: string;
|
|
25
26
|
actionTitle: string;
|
|
26
27
|
actionHeaderDetailItem: string;
|
|
27
28
|
actionHeaderCost: string;
|
|
29
|
+
executeHiddenWrapper: string;
|
|
30
|
+
executeTitle: string;
|
|
31
|
+
executeContent: string;
|
|
28
32
|
executeWrapper: string;
|
|
29
33
|
} & {
|
|
30
34
|
w: (width: string | number) => string;
|
|
@@ -194,6 +194,7 @@ var useStyles = (0, import_common.withBasicStyles)(() => ({
|
|
|
194
194
|
border-left: 1px solid #C1C3CD;
|
|
195
195
|
padding-right: 16px;
|
|
196
196
|
padding-left: 11px;
|
|
197
|
+
margin-bottom: 12px;
|
|
197
198
|
margin-left: 25px;
|
|
198
199
|
font-weight: 400;
|
|
199
200
|
font-size: 14px;
|
|
@@ -222,6 +223,10 @@ var useStyles = (0, import_common.withBasicStyles)(() => ({
|
|
|
222
223
|
margin-bottom: 12px;
|
|
223
224
|
cursor: pointer;
|
|
224
225
|
`,
|
|
226
|
+
executeHeaderIcon: import_css.css`
|
|
227
|
+
height: 12px;
|
|
228
|
+
padding-right: 10px !important;
|
|
229
|
+
`,
|
|
225
230
|
actionTitle: import_css.css`
|
|
226
231
|
display: flex;
|
|
227
232
|
align-items: center;
|
|
@@ -250,10 +255,35 @@ var useStyles = (0, import_common.withBasicStyles)(() => ({
|
|
|
250
255
|
min-width: 32px;
|
|
251
256
|
text-align: right;
|
|
252
257
|
`,
|
|
258
|
+
executeHiddenWrapper: import_css.css`
|
|
259
|
+
background: #FFFFFF;
|
|
260
|
+
border-radius: 8px;
|
|
261
|
+
margin: 12px;
|
|
262
|
+
display: flex;
|
|
263
|
+
align-items: center;
|
|
264
|
+
gap: 8px;
|
|
265
|
+
height: 40px;
|
|
266
|
+
box-sizing: border-box;
|
|
267
|
+
padding: 0px 16px;
|
|
268
|
+
font-size: 14px;
|
|
269
|
+
margin-bottom: 12px;
|
|
270
|
+
color: #3961F2;
|
|
271
|
+
`,
|
|
272
|
+
executeTitle: import_css.css`
|
|
273
|
+
display: flex;
|
|
274
|
+
align-items: center;
|
|
275
|
+
padding: 6px 16px;
|
|
276
|
+
height: 40px;
|
|
277
|
+
box-sizing: border-box;
|
|
278
|
+
cursor: pointer;
|
|
279
|
+
`,
|
|
280
|
+
executeContent: import_css.css`
|
|
281
|
+
border-top: 1px solid rgba(0,0,0,0.08);
|
|
282
|
+
padding-top: 10px;
|
|
283
|
+
`,
|
|
253
284
|
executeWrapper: import_css.css`
|
|
254
285
|
background: #FFFFFF;
|
|
255
286
|
border-radius: 8px;
|
|
256
|
-
padding-top: 11px;
|
|
257
287
|
padding-bottom: 1px;
|
|
258
288
|
margin: 12px;
|
|
259
289
|
`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/XAiChatbot/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { css } from '@emotion/css';\nimport { css as globalCss, Global } from '@emotion/react';\nimport { withBasicStyles, primaryBlue, lightBlue, darkGray, lightGray, borderGray } from '@/styles/common';\n\nexport const useStyles = withBasicStyles(() => ({\n // 静态样式\n wrapper: css`\n display: flex;\n flex-direction: column;\n // max-height: 812px;\n min-height: 300px;\n max-width: 800px;\n width: 100%;\n height: 100%;\n min-width: 375px;\n // background-color: #fff;\n // border: 1px solid rgba(80,96,122,.15);\n border-radius: 12px;\n overflow: hidden;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,\n Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n `,\n\n navbar: css`\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 12px 16px;\n border-bottom: 1px solid ${borderGray};\n // background-color: #fff;\n `,\n\n userAvatar: css`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n width: 32px;\n border-radius: 50%;\n object-fit: cover;\n margin-right: 12px;\n `,\n\n avatar: css`\n width: 40px;\n height: 40px;\n border-radius: 50%;\n object-fit: cover;\n margin-right: 12px;\n border: 1px solid ${borderGray};\n `,\n\n title: css`\n font-weight: 600;\n font-size: 16px;\n color: ${darkGray};\n `,\n\n subtitle: css`\n font-size: 12px;\n color: ${lightGray};\n margin-top: 2px;\n `,\n\n messageContainer: css`\n flex: 1;\n overflow-y: auto;\n padding: 16px 0;\n // background-color: #fff;\n display: flex;\n flex-direction: column;\n gap: 10px;\n min-height: 0;\n position: relative;\n `,\n\n messageList: css`\n padding: 0 16px;\n `,\n\n emptyWrapper: css`\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: '#222';\n user-select: none;\n `,\n\n emptyImg: css`\n width: 60px;\n height: 60px;\n border-radius: 8px;\n margin-bottom: 16px;\n `,\n\n message: css`\n max-width: 70%;\n padding: 10px 14px;\n border-radius: 20px;\n background-color: ${lightBlue};\n color: ${darkGray};\n font-size: 14px;\n line-height: 1.4;\n word-break: break-word;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n `,\n\n messageRight: css`\n align-self: flex-end;\n background-color: ${primaryBlue};\n color: white;\n border-bottom-right-radius: 4px;\n border-bottom-left-radius: 20px;\n border-top-left-radius: 20px;\n border-top-right-radius: 20px;\n `,\n\n quickReplies: css`\n display: flex;\n gap: 8px;\n padding: 10px 16px;\n border-top: 1px solid ${borderGray};\n background-color: #fff;\n overflow-x: auto;\n `,\n\n replyItem: css`\n padding: 6px 12px;\n font-size: 13px;\n border: 1px solid ${primaryBlue};\n border-radius: 20px;\n background-color: #fff;\n color: ${primaryBlue};\n cursor: pointer;\n white-space: nowrap;\n user-select: none;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: ${primaryBlue};\n color: #fff;\n }\n `,\n\n highlight: css`\n background-color: ${primaryBlue};\n color: white;\n border-color: ${primaryBlue};\n `,\n\n inputBar: css`\n display: flex;\n align-items: center;\n padding: 10px 16px;\n border-top: 1px solid ${borderGray};\n background-color: #fff;\n `,\n\n input: css`\n flex: 1;\n padding: 8px 12px;\n border: 1px solid ${borderGray};\n border-radius: 20px;\n font-size: 14px;\n outline: none;\n \n &:focus {\n border-color: ${primaryBlue};\n box-shadow: 0 0 3px ${primaryBlue};\n }\n `,\n actionDetailContent: css`\n border-left: 1px solid #C1C3CD;\n padding-right: 16px;\n padding-left: 11px;\n margin-left: 25px;\n font-weight: 400;\n font-size: 14px;\n color: #767985;\n line-height: 20px;\n `,\n actionHeaderWrapper: css`\n margin-bottom: 12px;\n `,\n actionHeaderIcon: css`\n height: 14px;\n margin-right: 5px;\n `,\n actionHeaderDetail: css`\n background: #F3F5FA;\n border-radius: 8px;\n overflow: hidden;\n `,\n actionDetailTitle: css`\n display: flex;\n align-items: center;\n padding: 0 16px;\n box-sizing: border-box;\n background: #EDEFF5;\n height: 32px;\n margin-bottom: 12px;\n cursor: pointer;\n `,\n actionTitle: css`\n display: flex;\n align-items: center;\n padding: 0 16px;\n box-sizing: border-box;\n background: #EDEFF5;\n height: 32px;\n margin-bottom: 12px;\n cursor: pointer;\n border-radius: 8px;\n min-width: 200px;\n `,\n actionHeaderDetailItem: css`\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n padding: 0 16px;\n margin-bottom: 12px;\n color: #949494;\n `,\n actionHeaderCost: css`\n margin-left: auto;\n color: #888;\n font-size: 12px;\n min-width: 32px;\n text-align: right;\n `,\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,iBAAoB;AACpB,IAAAA,gBAAyC;AACzC,oBAA0F;AAEnF,IAAM,gBAAY,+BAAgB,OAAO;AAAA;AAAA,EAE9C,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBT,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,+BAKqB;AAAA;AAAA;AAAA,EAI7B,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWZ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMc;AAAA;AAAA,EAGtB,OAAO;AAAA;AAAA;AAAA,aAGI;AAAA;AAAA,EAGX,UAAU;AAAA;AAAA,aAEC;AAAA;AAAA;AAAA,EAIX,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYlB,aAAa;AAAA;AAAA;AAAA,EAIb,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUd,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOV,SAAS;AAAA;AAAA;AAAA;AAAA,wBAIa;AAAA,aACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOX,cAAc;AAAA;AAAA,wBAEQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQtB,cAAc;AAAA;AAAA;AAAA;AAAA,4BAIY;AAAA;AAAA;AAAA;AAAA,EAK1B,WAAW;AAAA;AAAA;AAAA,wBAGW;AAAA;AAAA;AAAA,aAGX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAOa;AAAA;AAAA;AAAA;AAAA,EAKxB,WAAW;AAAA,wBACW;AAAA;AAAA,oBAEJ;AAAA;AAAA,EAGlB,UAAU;AAAA;AAAA;AAAA;AAAA,4BAIgB;AAAA;AAAA;AAAA,EAI1B,OAAO;AAAA;AAAA;AAAA,wBAGe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMF;AAAA,4BACM;AAAA;AAAA;AAAA,EAG1B,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { css } from '@emotion/css';\nimport { css as globalCss, Global } from '@emotion/react';\nimport { withBasicStyles, primaryBlue, lightBlue, darkGray, lightGray, borderGray } from '@/styles/common';\n\nexport const useStyles = withBasicStyles(() => ({\n // 静态样式\n wrapper: css`\n display: flex;\n flex-direction: column;\n // max-height: 812px;\n min-height: 300px;\n max-width: 800px;\n width: 100%;\n height: 100%;\n min-width: 375px;\n // background-color: #fff;\n // border: 1px solid rgba(80,96,122,.15);\n border-radius: 12px;\n overflow: hidden;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,\n Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n `,\n\n navbar: css`\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 12px 16px;\n border-bottom: 1px solid ${borderGray};\n // background-color: #fff;\n `,\n\n userAvatar: css`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n width: 32px;\n border-radius: 50%;\n object-fit: cover;\n margin-right: 12px;\n `,\n\n avatar: css`\n width: 40px;\n height: 40px;\n border-radius: 50%;\n object-fit: cover;\n margin-right: 12px;\n border: 1px solid ${borderGray};\n `,\n\n title: css`\n font-weight: 600;\n font-size: 16px;\n color: ${darkGray};\n `,\n\n subtitle: css`\n font-size: 12px;\n color: ${lightGray};\n margin-top: 2px;\n `,\n\n messageContainer: css`\n flex: 1;\n overflow-y: auto;\n padding: 16px 0;\n // background-color: #fff;\n display: flex;\n flex-direction: column;\n gap: 10px;\n min-height: 0;\n position: relative;\n `,\n\n messageList: css`\n padding: 0 16px;\n `,\n\n emptyWrapper: css`\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: '#222';\n user-select: none;\n `,\n\n emptyImg: css`\n width: 60px;\n height: 60px;\n border-radius: 8px;\n margin-bottom: 16px;\n `,\n\n message: css`\n max-width: 70%;\n padding: 10px 14px;\n border-radius: 20px;\n background-color: ${lightBlue};\n color: ${darkGray};\n font-size: 14px;\n line-height: 1.4;\n word-break: break-word;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n `,\n\n messageRight: css`\n align-self: flex-end;\n background-color: ${primaryBlue};\n color: white;\n border-bottom-right-radius: 4px;\n border-bottom-left-radius: 20px;\n border-top-left-radius: 20px;\n border-top-right-radius: 20px;\n `,\n\n quickReplies: css`\n display: flex;\n gap: 8px;\n padding: 10px 16px;\n border-top: 1px solid ${borderGray};\n background-color: #fff;\n overflow-x: auto;\n `,\n\n replyItem: css`\n padding: 6px 12px;\n font-size: 13px;\n border: 1px solid ${primaryBlue};\n border-radius: 20px;\n background-color: #fff;\n color: ${primaryBlue};\n cursor: pointer;\n white-space: nowrap;\n user-select: none;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: ${primaryBlue};\n color: #fff;\n }\n `,\n\n highlight: css`\n background-color: ${primaryBlue};\n color: white;\n border-color: ${primaryBlue};\n `,\n\n inputBar: css`\n display: flex;\n align-items: center;\n padding: 10px 16px;\n border-top: 1px solid ${borderGray};\n background-color: #fff;\n `,\n\n input: css`\n flex: 1;\n padding: 8px 12px;\n border: 1px solid ${borderGray};\n border-radius: 20px;\n font-size: 14px;\n outline: none;\n \n &:focus {\n border-color: ${primaryBlue};\n box-shadow: 0 0 3px ${primaryBlue};\n }\n `,\n actionDetailContent: css`\n border-left: 1px solid #C1C3CD;\n padding-right: 16px;\n padding-left: 11px;\n margin-bottom: 12px;\n margin-left: 25px;\n font-weight: 400;\n font-size: 14px;\n color: #767985;\n line-height: 20px;\n `,\n actionHeaderWrapper: css`\n margin-bottom: 12px;\n `,\n actionHeaderIcon: css`\n height: 14px;\n margin-right: 5px;\n `,\n actionHeaderDetail: css`\n background: #F3F5FA;\n border-radius: 8px;\n overflow: hidden;\n `,\n actionDetailTitle: css`\n display: flex;\n align-items: center;\n padding: 0 16px;\n box-sizing: border-box;\n background: #EDEFF5;\n height: 32px;\n margin-bottom: 12px;\n cursor: pointer;\n `,\n executeHeaderIcon: css`\n height: 12px;\n padding-right: 10px !important;\n `,\n actionTitle: css`\n display: flex;\n align-items: center;\n padding: 0 16px;\n box-sizing: border-box;\n background: #EDEFF5;\n height: 32px;\n margin-bottom: 12px;\n cursor: pointer;\n border-radius: 8px;\n min-width: 200px;\n `,\n actionHeaderDetailItem: css`\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n padding: 0 16px;\n margin-bottom: 12px;\n color: #949494;\n `,\n actionHeaderCost: css`\n margin-left: auto;\n color: #888;\n font-size: 12px;\n min-width: 32px;\n text-align: right;\n `,\n executeHiddenWrapper: css`\n background: #FFFFFF;\n border-radius: 8px;\n margin: 12px;\n display: flex;\n align-items: center;\n gap: 8px;\n height: 40px;\n box-sizing: border-box;\n padding: 0px 16px;\n font-size: 14px;\n margin-bottom: 12px;\n color: #3961F2;\n `,\n executeTitle: css`\n display: flex;\n align-items: center;\n padding: 6px 16px;\n height: 40px;\n box-sizing: border-box;\n cursor: pointer;\n `,\n executeContent: css`\n border-top: 1px solid rgba(0,0,0,0.08);\n padding-top: 10px;\n `,\n executeWrapper: css`\n background: #FFFFFF;\n border-radius: 8px;\n padding-bottom: 1px;\n margin: 12px;\n `,\n}));\n\nexport const GlobalStyle: React.FC = () => (\n <Global\n styles={globalCss`\n .ant-bubble-footer {\n display: flex;\n align-items: center;\n min-width: 0,\n max-width: 600,\n /* 你想覆盖的其他样式 */\n }\n\n .ant-sender-content {\n textarea {\n word-break: break-all;\n }\n }\n\n .ant-avatar {\n background-color: transparent;\n }\n\n .ant-sender-actions-list {\n margin-left: -40px;\n }\n\n .ant-sender {\n box-shadow: none !important;\n }\n\n .ant-prompts-item {\n padding-block: 8px !important;\n }\n\n /* 用户消息气泡背景色 */\n .ant-bubble .user-content {\n background-color: #D8E0FD;\n }\n\n /* 助手消息气泡背景色 */\n .ant-bubble .assistant-content {\n background-color: transparent;\n padding: 0;\n }\n `}\n />\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,iBAAoB;AACpB,IAAAA,gBAAyC;AACzC,oBAA0F;AAEnF,IAAM,gBAAY,+BAAgB,OAAO;AAAA;AAAA,EAE9C,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBT,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,+BAKqB;AAAA;AAAA;AAAA,EAI7B,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWZ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMc;AAAA;AAAA,EAGtB,OAAO;AAAA;AAAA;AAAA,aAGI;AAAA;AAAA,EAGX,UAAU;AAAA;AAAA,aAEC;AAAA;AAAA;AAAA,EAIX,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYlB,aAAa;AAAA;AAAA;AAAA,EAIb,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUd,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOV,SAAS;AAAA;AAAA;AAAA;AAAA,wBAIa;AAAA,aACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOX,cAAc;AAAA;AAAA,wBAEQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQtB,cAAc;AAAA;AAAA;AAAA;AAAA,4BAIY;AAAA;AAAA;AAAA;AAAA,EAK1B,WAAW;AAAA;AAAA;AAAA,wBAGW;AAAA;AAAA;AAAA,aAGX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAOa;AAAA;AAAA;AAAA;AAAA,EAKxB,WAAW;AAAA,wBACW;AAAA;AAAA,oBAEJ;AAAA;AAAA,EAGlB,UAAU;AAAA;AAAA;AAAA;AAAA,4BAIgB;AAAA;AAAA;AAAA,EAI1B,OAAO;AAAA;AAAA;AAAA,wBAGe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMF;AAAA,4BACM;AAAA;AAAA;AAAA,EAG1B,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWrB,qBAAqB;AAAA;AAAA;AAAA,EAGrB,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAIlB,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpB,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUnB,mBAAmB;AAAA;AAAA;AAAA;AAAA,EAInB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYb,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASxB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOlB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EActB,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQd,gBAAgB;AAAA;AAAA;AAAA;AAAA,EAIhB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAMlB,EAAE;AAEK,IAAM,cAAwB,MACnC,6BAAAC,QAAA;AAAA,EAAC;AAAA;AAAA,IACC,QAAQ,cAAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CV;",
|
|
6
6
|
"names": ["import_react", "React", "globalCss"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/types/XAiChatbot.ts"],
|
|
4
|
-
"sourcesContent": ["import React, { ReactNode, RefObject,
|
|
4
|
+
"sourcesContent": ["import React, { ReactNode, RefObject, MouseEvent, ReactElement } from 'react';\nimport type { PromptProps } from '@ant-design/x';\nimport type { MessageType } from 'src/client/base';\nimport type { Messages } from './XAiMessage';\n\n// 类型定义\nexport interface User {\n id: string;\n name: string;\n avatar?: string;\n }\n\nexport interface MessageProps {\n _id: string;\n type: string;\n content: Record<string, any>;\n createdAt: number;\n user: User;\n position?: 'left' | 'right' | 'center' | 'pop';\n hasTime?: boolean;\n status?: 'pending' | 'sent' | 'fail';\n }\n\nexport interface QuickReplyItemProps {\n name: string;\n code: string;\n icon?: string;\n img?: string;\n isNew?: boolean;\n isHighlight?: boolean;\n }\n\nexport interface ComposerHandle {\n setText: (text: string) => void;\n }\n\nexport interface ScrollToEndOptions {\n animated?: boolean;\n force?: boolean;\n }\n\nexport interface MessageContainerHandle {\n scrollToEnd: (options?: ScrollToEndOptions) => void;\n }\n\nexport interface NavbarProps {\n title?: string;\n subtitle?: string;\n avatar?: string;\n}\n\nexport interface ToolbarItemProps {\n id: string;\n icon: string;\n label: string;\n disabled?: boolean;\n }\n\nexport interface IconButtonProps {\n icon: string;\n onClick: () => void;\n disabled?: boolean;\n }\n\nexport interface RecorderProps {\n onStart?: () => void;\n onStop?: (audioBlob: Blob) => void;\n onError?: (error: Error) => void;\n }\n\nexport type InputType = 'text' | 'voice';\n\n// chatbot 会话字段\nexport interface ChatbotMessageFields {\n messages?: MessageType[];\n setMessages?: React.Dispatch<React.SetStateAction<MessageType[]>>;\n /** 发送消息回调 */\n onSend?: (type: string, content: string) => void;\n /** 清空消息回调 */\n onClear?: () => void;\n /** 停止生成回调 */\n onStop?: () => void;\n}\n\nexport interface ActionItem {\n key?: string;\n icon: React.ReactNode;\n tooltip?: string;\n}\n\n/**\n * AI 聊天机器人组件\n */\nexport interface XAiChatbotProps extends ChatbotMessageFields {\n /** 宽屏断点 */\n wideBreakpoint?: string;\n /** 导航栏展示 */\n navbarShow?: boolean;\n /** 导航栏配置 */\n navbar?: NavbarProps;\n /** 导航栏渲染函数，会覆盖 navbar */\n renderNavbar?: () => ReactNode;\n /** 是否加载中 */\n loading?: boolean;\n /** 加载更多文案 */\n loadMoreText?: string;\n /** 在消息列表上面的渲染函数 */\n renderBeforeMessageList?: () => ReactNode;\n /** 消息列表 ref */\n messagesRef?: RefObject<MessageContainerHandle>;\n /** 下拉加载回调 */\n onRefresh?: () => Promise<any>;\n /** 滚动消息列表回调 */\n onScroll?: (event: React.UIEvent<HTMLDivElement, UIEvent>) => void;\n /** 消息内容渲染函数 */\n renderMessageContent?: (message: MessageProps) => ReactNode;\n /** 快捷短语列表 */\n quickReplies?: QuickReplyItemProps[];\n /** 快捷短语是否可见 */\n quickRepliesVisible?: boolean;\n // /** 点击快速回复回调 */\n // onQuickReplyClick?: (item: QuickReplyItemProps, index: number) => void;\n // /** 快捷短语的滚动回调 */\n // onQuickReplyScroll?: () => void;\n // /** 快捷短语渲染函数，会覆盖 quickReplies */\n // renderQuickReplies?: () => ReactNode;\n /** 输入框初始内容 */\n text?: string;\n /** 空状态渲染插槽 */\n empty?: ReactElement;\n /** 空状态图片 */\n emptyStateImage?: string;\n /** 空状态文案 */\n emptyStateText?: string;\n /** 输入框占位符 */\n placeholder?: string;\n /** 输入框粘贴图片后的回调 */\n onImageSend?: (file: File) => Promise<any>;\n /** 输入方式 */\n inputType?: InputType;\n // /** 输入方式切换回调 */\n // onInputTypeChange?: (inputType: InputType) => void;\n /** 语音输入配置 */\n recorder?: RecorderProps;\n /** 工具栏配置 */\n toolbar?: ToolbarItemProps[];\n /** AI头像 */\n avatar?: ReactNode;\n /** 用户头像 */\n userAvatar?: ReactNode;\n /** 发送按钮 */\n sendBtn?: ReactNode;\n /** 是否展示清空按钮 */\n clearBtnShow? : boolean;\n /** 工具栏点击回调 */\n onToolbarClick?: (item: ToolbarItemProps, event: MouseEvent) => void;\n /** 工具栏打开/关闭回调 */\n onAccessoryToggle?: (isAccessoryOpen: boolean) => void;\n /** 输入框右边图标按钮配置 */\n rightAction?: IconButtonProps;\n /** 上传按钮是否显示 */\n uploadBtnShow?: boolean;\n /** 底部文案 */\n footerTips?: string;\n /** 帮助消息点击回调 */\n onSuggestMessageClick?: (item: PromptProps, id: string) => void;\n /** 消息左下角展示字段 */\n messageTooltip?: (msg: Messages) => React.ReactNode;\n /** 消息右下角功能区 */\n messageActions?: ActionItem[];\n /** 消息右下角功能区点击回调 */\n onMessagesActionsCallback?: (index: number, data: Messages) => void; // 点击回调\n /** 输入组件 */\n Composer?: React.ElementType;\n /** 是否展示输入框 */\n inputShow?: boolean;\n /** 消息顶部 */\n messageHeader?: ReactNode;\n }\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
Binary file
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
2
|
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
4
|
-
import React, { useState } from 'react';
|
|
4
|
+
import React, { useEffect, useState } from 'react';
|
|
5
5
|
import { Divider } from 'antd';
|
|
6
6
|
import { MessageRole, MessageStatus } from "../../types/XAiMessage";
|
|
7
7
|
import documentIcon from "../../assets/document.svg";
|
|
@@ -47,33 +47,14 @@ var mockMessages = [{
|
|
|
47
47
|
text: '检索从北京到上海的车票数据给我'
|
|
48
48
|
},
|
|
49
49
|
parentMessageId: '1'
|
|
50
|
-
},
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
// type: 'TextMessage',
|
|
54
|
-
// createdAt: new Date(),
|
|
55
|
-
// status: MessageStatus.done,
|
|
56
|
-
// role: MessageRole.assistant,
|
|
57
|
-
// content: {
|
|
58
|
-
// text: '{"data":"车次 | 出发站 -> 到达站 | 出发时间 -> 到达时间 | 历时\\nC406(实际车次train_no: 560000C40603) 杭州东(telecode: HGH) -> 上海南(telecode: SNH) 20:01 -> 21:50 历时：01:49\\n- 二等座: 有票 47元\\n- 一等座: 有票 75元\\n- 无座: 有票 47元\\nC412(实际车次train_no: 560000C41202) 杭州东(telecode: HGH) -> 上海南(telecode: SNH) 18:21 -> 20:08 历时：01:47\\n- 二等座: 无票 47元\\n- 一等座: 无票 75元\\n- 无座: 有票 47元\\nG7360(实际车次train_no: 56000G736081) 杭州(telecode: HZH) -> 上海(telecode: SHH) 20:00 -> 21:39 历时：01:39\\n- 商务座: 剩余16张票 278元\\n- 一等座: 有票 149元\\n- 二等座: 有票 93元\\n- 无座: 有票 93元\\nC482(实际车次train_no: 560000C48220) 杭州(telecode: HZH) -> 上海南(telecode: SNH) 19:42 -> 21:20 历时：01:38\\n- 二等座: 有票 49元\\n- 一等座: 有票 77元\\n- 无座: 有票 49元\\nG8358(实际车次train_no: 56000G835800) 杭州西(telecode: HVU) -> 上海虹桥(telecode: AOH) 18:11 -> 19:38 历时：01:27\\n- 商务座: 剩余11张票 357元\\n- 一等座: 有票 163元\\n- 二等座: 有票 103元\\n- 无座: 有票 103元\\nG1440(实际车次train_no: 57000G144005) 杭州西(telecode: HVU) -> 上海虹桥(telecode: AOH) 20:55 -> 22:21 历时：01:26\\n- 商务座: 剩余17张票 320元\\n- 一等座: 有票 147元\\n- 二等座: 有票 92元\\n- 优选一等座: 有票 202元\\n- 无座: 有票 92元\\nC406(实际车次train_no: 560000C40603) 杭州东(telecode: HGH) -> 上海松江(telecode: IMH) 20:01 -> 21:25 历时：01:24\\n- 二等座: 有票 40元\\n- 一等座: 有票 63元\\n- 无座: 有票 40元\\nC3050(实际车次train_no: 52000C305000) 杭州西(telecode: HVU) -> 上海南(telecode: SNH) 19:34 -> 20:58 历时：01:24\\n- 商务座: 无票 351元\\n- 一等座: 剩余13张票 161元\\n- 二等座: 有票 101元\\n- 无座: 有票 101元\\nG7360(实际车次train_no: 56000G736081) 杭州(telecode: HZH) -> 上海西(telecode: SXH) 20:00 -> 21:23 历时：01:23\\n- 商务座: 剩余16张票 271元\\n- 一等座: 有票 144元\\n- 二等座: 有票 90元\\n- 无座: 有票 90元\\nG7140(实际车次train_no: 56000G714000) 杭州西(telecode: HVU) -> 上海虹桥(telecode: AOH) 18:38 -> 20:01 历时：01:23\\n- 商务座: 剩余3张票 357元\\n- 一等座: 剩余18张票 163元\\n- 二等座: 有票 103元\\n- 无座: 有票 103元\\nG8386(实际车次train_no: 54000G838601) 杭州西(telecode: HVU) -> 上海虹桥(telecode: AOH) 18:25 -> 19:48 历时：01:23\\n- 商务座: 剩余1张票 357元\\n- 一等座: 剩余18张票 163元\\n- 二等座: 有票 103元\\n- 无座: 有票 103元\\nC412(实际车次train_no: 560000C41202) 杭州东(telecode: HGH) -> 上海松江(telecode: IMH) 18:21 -> 19:42 历时：01:21\\n- 二等座: 无票 40元\\n- 一等座: 无票 63元\\n- 无座: 有票 40元\\nG7124(实际车次train_no: 56000G712400) 杭州西(telecode: HVU) -> 上海虹桥(telecode: AOH) 18:03 -> 19:24 历时：01:21\\n- 商务座: 剩余5张票 357元\\n- 一等座: 剩余5张票 163元\\n- 二等座: 有票 103元\\n- 无座: 有票 103元\\nG3092(实际车次train_no: 5n000G309205) 杭州西(telecode: HVU) -> 上海虹桥(telecode: AOH) 20:40 -> 21:59 历时：01:19\\n- 商务座: 剩余10张票 332元\\n- 一等座: 有票 152元\\n- 二等座: 有票 95元\\n- 无座: 有票 95元\\nG7112(实际车次train_no: 54000G711200) 杭州西(telecode: HVU) -> 上海虹桥(telecode: AOH) 20:12 -> 21:31 历时：01:19\\n- 二等座: 有票 110元\\n- 一等座: 有票 174元\\n- 无座: 有票 110元\\nG7584(实际车次train_no: 5e000G758405) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 17:51 -> 19:10 历时：01:19\\n- 商务座: 无票 263元\\n- 一等座: 无票 140元\\n- 二等座: 无票 87元\\n- 无座: 有票 87元\\nG7432(实际车次train_no: 5j000G743252) 杭州南(telecode: XHH) -> 上海虹桥(telecode: AOH) 17:55 -> 19:13 历时：01:18\\n- 商务座: 无票 298元\\n- 一等座: 无票 158元\\n- 二等座: 无票 98元\\n- 无座: 无票 98元\\nG7600(实际车次train_no: 5e000G760030) 杭州南(telecode: XHH) -> 上海南(telecode: SNH) 19:34 -> 20:50 历时：01:16\\n- 商务座: 剩余9张票 248元\\n- 一等座: 有票 132元\\n- 二等座: 有票 82元\\n- 无座: 有票 82元\\nG3078(实际车次train_no: 65000G307810) 杭州西(telecode: HVU) -> 上海虹桥(telecode: AOH) 21:12 -> 22:26 历时：01:14\\n- 商务座: 有票 320元\\n- 一等座: 有票 147元\\n- 二等座: 有票 92元\\n- 无座: 有票 92元\\nG8304(实际车次train_no: 56000G830410) 杭州西(telecode: HVU) -> 上海虹桥(telecode: AOH) 19:59 -> 21:11 历时：01:12\\n- 二等座: 有票 103元\\n- 一等座: 有票 163元\\n- 无座: 有票 103元\\nG8360(实际车次train_no: 5j000G836002) 杭州西(telecode: HVU) -> 上海虹桥(telecode: AOH) 19:15 -> 20:27 历时：01:12\\n- 商务座: 剩余2张票 405元\\n- 一等座: 无票 185元\\n- 二等座: 有票 116元\\n- 无座: 有票 116元\\nG7550(实际车次train_no: 5j000G755060) 杭州南(telecode: XHH) -> 上海虹桥(telecode: AOH) 18:35 -> 19:47 历时：01:12\\n- 商务座: 无票 298元\\n- 一等座: 无票 158元\\n- 二等座: 无票 98元\\n- 无座: 无票 98元\\nG100(实际车次train_no: 6x0000G1000A) 杭州西(telecode: HVU) -> 上海虹桥(telecode: AOH) 18:31 -> 19:43 历时：01:12\\n- 商务座: 剩余7张票 405元\\n- 一等座: 剩余19张票 185元\\n- 二等座: 有票 116元\\nG1306(实际车次train_no: 65000G130601) 杭州西(telecode: HVU) -> 上海南(telecode: SNH) 21:39 -> 22:49 历时：01:10\\n- 商务座: 剩余8张票 279元\\n- 一等座: 剩余15张票 128元\\n- 二等座: 有票 81元\\n- 无座: 有票 81元\\nG1372(实际车次train_no: 80000G13720S) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 21:02 -> 22:12 历时：01:10\\n- 商务座: 剩余12张票 219元\\n- 一等座: 有票 105元\\n- 二等座: 有票 65元\\n- 无座: 无票 65元\\nG7314(实际车次train_no: 52000G731401) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 19:18 -> 20:27 历时：01:09\\n- 商务座: 无票 242元\\n- 一等座: 无票 129元\\n- 二等座: 剩余5张票 80元\\n- 无座: 有票 80元\\nG7522(实际车次train_no: 5e000G752290) 杭州东(telecode: HGH) -> 上海南(telecode: SNH) 18:34 -> 19:41 历时：01:07\\n- 商务座: 剩余5张票 239元\\n- 一等座: 有票 127元\\n- 二等座: 有票 79元\\n- 无座: 有票 79元\\nG7310(实际车次train_no: 5a000G731004) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 17:47 -> 18:54 历时：01:07\\n- 商务座: 无票 263元\\n- 一等座: 无票 140元\\n- 二等座: 无票 87元\\n- 无座: 有票 87元\\nG7432(实际车次train_no: 5j000G743252) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 18:07 -> 19:13 历时：01:06\\n- 商务座: 无票 263元\\n- 一等座: 无票 140元\\n- 二等座: 无票 87元\\n- 无座: 无票 87元\\nG1388(实际车次train_no: 57000G138800) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 21:52 -> 22:56 历时：01:04\\n- 商务座: 剩余11张票 242元\\n- 一等座: 有票 117元\\n- 二等座: 有票 73元\\n- 无座: 有票 73元\\nG998(实际车次train_no: 6i0000G99800) 杭州西(telecode: HVU) -> 上海南(telecode: SNH) 21:24 -> 22:27 历时：01:03\\n- 商务座: 剩余4张票 315元\\n- 一等座: 剩余11张票 145元\\n- 二等座: 有票 91元\\n- 无座: 有票 91元\\nG1316(实际车次train_no: 5n000G131600) 杭州西(telecode: HVU) -> 上海南(telecode: SNH) 21:01 -> 22:04 历时：01:03\\n- 商务座: 剩余6张票 374元\\n- 一等座: 剩余6张票 172元\\n- 二等座: 有票 108元\\n- 无座: 有票 108元\\nG7338(实际车次train_no: 5j000G733831) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 20:25 -> 21:27 历时：01:02\\n- 商务座: 剩余9张票 219元\\n- 一等座: 有票 117元\\n- 二等座: 有票 73元\\n- 无座: 有票 73元\\nG1510(实际车次train_no: 4z000G15100D) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 18:01 -> 19:03 历时：01:02\\n- 商务座: 无票 263元\\n- 一等座: 无票 140元\\n- 二等座: 无票 87元\\n- 无座: 无票 87元\\nG7600(实际车次train_no: 5e000G760030) 杭州东(telecode: HGH) -> 上海南(telecode: SNH) 19:49 -> 20:50 历时：01:01\\n- 商务座: 剩余9张票 216元\\n- 一等座: 有票 115元\\n- 二等座: 有票 72元\\n- 无座: 有票 72元\\nG7360(实际车次train_no: 56000G736081) 杭州(telecode: HZH) -> 上海虹桥(telecode: AOH) 20:00 -> 21:00 历时：01:00\\n- 商务座: 剩余19张票 232元\\n- 一等座: 有票 124元\\n- 二等座: 有票 78元\\n- 无座: 有票 78元\\nG1350(实际车次train_no: 62000G135002) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 22:02 -> 23:01 历时：00:59\\n- 商务座: 剩余7张票 219元\\n- 一等座: 有票 105元\\n- 二等座: 有票 65元\\n- 无座: 有票 65元\\nG1506(实际车次train_no: 71000G150632) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 21:48 -> 22:47 历时：00:59\\n- 商务座: 剩余19张票 219元\\n- 一等座: 有票 105元\\n- 二等座: 有票 65元\\n- 无座: 有票 65元\\nG1334(实际车次train_no: 77000G13350F) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 19:57 -> 20:56 历时：00:59\\n- 商务座: 剩余14张票 242元\\n- 一等座: 剩余1张票 129元\\n- 二等座: 有票 80元\\n- 无座: 有票 80元\\nG1378(实际车次train_no: 80000G13780O) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 18:19 -> 19:18 历时：00:59\\n- 商务座: 无票 263元\\n- 一等座: 无票 140元\\n- 二等座: 无票 87元\\n- 无座: 无票 87元\\nG7600(实际车次train_no: 5e000G760030) 杭州南(telecode: XHH) -> 上海松江(telecode: IMH) 19:34 -> 20:32 历时：00:58\\n- 商务座: 剩余9张票 208元\\n- 一等座: 有票 111元\\n- 二等座: 有票 68元\\n- 无座: 有票 68元\\nG1302(实际车次train_no: 6e000G130206) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 20:50 -> 21:47 历时：00:57\\n- 商务座: 剩余14张票 263元\\n- 一等座: 有票 129元\\n- 二等座: 有票 80元\\n- 无座: 有票 80元\\nG7366(实际车次train_no: 56000G736606) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 20:14 -> 21:11 历时：00:57\\n- 商务座: 剩余4张票 242元\\n- 一等座: 有票 129元\\n- 二等座: 有票 80元\\n- 无座: 有票 80元\\nG7584(实际车次train_no: 5e000G758405) 杭州东(telecode: HGH) -> 上海松江(telecode: IMH) 17:51 -> 18:48 历时：00:57\\n- 商务座: 剩余2张票 212元\\n- 一等座: 剩余1张票 113元\\n- 二等座: 无票 70元\\n- 无座: 有票 70元\\nG7340(实际车次train_no: 5j000G734003) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 20:54 -> 21:50 历时：00:56\\n- 商务座: 剩余14张票 219元\\n- 一等座: 有票 117元\\n- 二等座: 有票 73元\\n- 无座: 有票 73元\\nG1638(实际车次train_no: 5n000G163800) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 21:45 -> 22:40 历时：00:55\\n- 商务座: 剩余9张票 219元\\n- 一等座: 有票 105元\\n- 二等座: 有票 65元\\n- 无座: 有票 65元\\nG7350(实际车次train_no: 5j000G735074) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 20:40 -> 21:35 历时：00:55\\n- 商务座: 剩余7张票 263元\\n- 一等座: 有票 140元\\n- 二等座: 有票 87元\\n- 无座: 有票 87元\\nG1328(实际车次train_no: 78000G13280E) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 20:35 -> 21:30 历时：00:55\\n- 商务座: 剩余6张票 242元\\n- 一等座: 剩余9张票 129元\\n- 二等座: 有票 80元\\n- 无座: 有票 80元\\nG7550(实际车次train_no: 5j000G755060) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 18:52 -> 19:47 历时：00:55\\n- 商务座: 无票 263元\\n- 一等座: 剩余1张票 140元\\n- 二等座: 无票 87元\\n- 无座: 无票 87元\\nG7528(实际车次train_no: 5j000G752802) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 21:27 -> 22:21 历时：00:54\\n- 商务座: 剩余12张票 219元\\n- 一等座: 剩余8张票 117元\\n- 二等座: 有票 73元\\n- 无座: 有票 73元\\nG7588(实际车次train_no: 5j000G758802) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 19:05 -> 19:59 历时：00:54\\n- 商务座: 无票 263元\\n- 一等座: 无票 140元\\n- 二等座: 无票 87元\\n- 无座: 剩余1张票 87元\\nG3060(实际车次train_no: 5n000G306000) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 20:10 -> 21:03 历时：00:53\\n- 商务座: 剩余2张票 242元\\n- 一等座: 有票 129元\\n- 二等座: 有票 80元\\n- 无座: 有票 80元\\nG7566(实际车次train_no: 5j000G756606) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 19:09 -> 20:02 历时：00:53\\n- 商务座: 剩余1张票 263元\\n- 一等座: 剩余3张票 140元\\n- 二等座: 无票 87元\\n- 无座: 有票 87元\\nG1640(实际车次train_no: 5n000G164000) 杭州东(telecode: HGH) -> 上海南(telecode: SNH) 22:38 -> 23:30 历时：00:52\\n- 商务座: 剩余12张票 216元\\n- 一等座: 有票 104元\\n- 二等座: 有票 65元\\n- 无座: 有票 65元\\nG1390(实际车次train_no: 5w000G139010) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 22:34 -> 23:26 历时：00:52\\n- 商务座: 有票 219元\\n- 一等座: 有票 105元\\n- 二等座: 有票 65元\\n- 无座: 有票 65元\\nG2190(实际车次train_no: 76000G21910F) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 21:35 -> 22:27 历时：00:52\\n- 商务座: 剩余17张票 219元\\n- 一等座: 有票 117元\\n- 二等座: 有票 73元\\n- 无座: 有票 73元\\nG1616(实际车次train_no: 71000G161602) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 18:29 -> 19:21 历时：00:52\\n- 商务座: 无票 242元\\n- 一等座: 无票 105元\\n- 二等座: 无票 65元\\n- 无座: 无票 65元\\nG7522(实际车次train_no: 5e000G752290) 杭州东(telecode: HGH) -> 上海松江(telecode: IMH) 18:34 -> 19:25 历时：00:51\\n- 商务座: 剩余8张票 194元\\n- 一等座: 有票 104元\\n- 二等座: 有票 64元\\n- 无座: 有票 64元\\nG7310(实际车次train_no: 5a000G731004) 杭州东(telecode: HGH) -> 上海松江(telecode: IMH) 17:47 -> 18:37 历时：00:50\\n- 商务座: 无票 212元\\n- 一等座: 无票 113元\\n- 二等座: 无票 70元\\n- 无座: 有票 70元\\nG7550(实际车次train_no: 5j000G755060) 杭州南(telecode: XHH) -> 金山北(telecode: EGH) 18:35 -> 19:24 历时：00:49\\n- 商务座: 无票 219元\\n- 一等座: 剩余2张票 116元\\n- 二等座: 无票 72元\\n- 无座: 有票 72元\\nG820(实际车次train_no: 6c0000G82002) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 21:07 -> 21:54 历时：00:47\\n- 商务座: 剩余11张票 242元\\n- 一等座: 有票 129元\\n- 二等座: 有票 80元\\n- 优选一等座: 有票 177元\\n- 无座: 有票 80元\\nG470(实际车次train_no: 640000G47100) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 21:11 -> 21:57 历时：00:46\\n- 商务座: 剩余19张票 242元\\n- 一等座: 有票 129元\\n- 二等座: 有票 80元\\n- 无座: 有票 80元\\nG240(实际车次train_no: 800000G24000) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 19:34 -> 20:20 历时：00:46\\n- 商务座: 剩余5张票 263元\\n- 一等座: 剩余3张票 140元\\n- 二等座: 有票 87元\\n- 无座: 有票 87元\\nG7312(实际车次train_no: 52000G731207) 杭州东(telecode: HGH) -> 上海南(telecode: SNH) 19:24 -> 20:10 历时：00:46\\n- 商务座: 剩余3张票 239元\\n- 一等座: 剩余4张票 127元\\n- 二等座: 有票 79元\\n- 无座: 有票 79元\\nG1386(实际车次train_no: 5u000G138620) 杭州东(telecode: HGH) -> 上海南(telecode: SNH) 19:01 -> 19:47 历时：00:46\\n- 商务座: 有票 239元\\n- 一等座: 有票 127元\\n- 二等座: 有票 79元\\n- 无座: 有票 79元\\nG7584(实际车次train_no: 5e000G758405) 杭州东(telecode: HGH) -> 金山北(telecode: EGH) 17:51 -> 18:37 历时：00:46\\n- 商务座: 剩余6张票 184元\\n- 一等座: 剩余17张票 98元\\n- 二等座: 剩余2张票 61元\\n- 无座: 有票 61元\\nG4918(实际车次train_no: 57000G49184G) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 23:20 -> 00:05 历时：00:45\\n- 商务座: 剩余7张票 242元\\n- 一等座: 剩余12张票 129元\\n- 二等座: 有票 80元\\n- 无座: 有票 80元\\nG1374(实际车次train_no: 80000G137410) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 22:30 -> 23:15 历时：00:45\\n- 商务座: 剩余18张票 219元\\n- 一等座: 有票 117元\\n- 二等座: 有票 73元\\n- 无座: 无票 73元\\nG7536(实际车次train_no: 5j000G753603) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 22:22 -> 23:07 历时：00:45\\n- 商务座: 剩余6张票 219元\\n- 一等座: 剩余11张票 105元\\n- 二等座: 有票 65元\\n- 无座: 有票 65元\\nG358(实际车次train_no: 780000G35800) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 22:19 -> 23:04 历时：00:45\\n- 商务座: 剩余17张票 242元\\n- 一等座: 有票 129元\\n- 二等座: 有票 80元\\n- 无座: 有票 80元\\nG822(实际车次train_no: 6c0000G82200) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 21:58 -> 22:43 历时：00:45\\n- 商务座: 剩余9张票 263元\\n- 一等座: 有票 140元\\n- 二等座: 有票 87元\\n- 无座: 有票 87元\\nG356(实际车次train_no: 780000G35600) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 21:16 -> 22:01 历时：00:45\\n- 商务座: 剩余18张票 263元\\n- 一等座: 有票 140元\\n- 二等座: 有票 87元\\n- 无座: 有票 87元\\nG7562(实际车次train_no: 5e000G756250) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 19:38 -> 20:23 历时：00:45\\n- 商务座: 有票 263元\\n- 一等座: 有票 140元\\n- 二等座: 有票 87元\\n- 无座: 有票 87元\\nG416(实际车次train_no: 5n0000G41600) 杭州东(telecode: HGH) -> 上海南(telecode: SNH) 19:30 -> 20:15 历时：00:45\\n- 商务座: 剩余6张票 239元\\n- 一等座: 剩余3张票 127元\\n- 二等座: 有票 79元\\n- 无座: 有票 79元\\nG500(实际车次train_no: 710000G50000) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 18:45 -> 19:30 历时：00:45\\n- 商务座: 剩余6张票 219元\\n- 一等座: 剩余6张票 117元\\n- 二等座: 剩余1张票 73元\\n- 无座: 有票 73元\\nG800(实际车次train_no: 650000G80000) 杭州东(telecode: HGH) -> 上海虹桥(telecode: AOH) 18:40 -> 19:25 历时：00:45\\n- 商务座: 剩余4张票 242元\\n- 一等座: 剩余18张票 129元\\n- 二等座: 有票 80元\\n- 无座: 有票 80元\\nG7600(实际车次train_no: 5e000G760030) 杭州东(telecode: HGH) -> 上海松江(telecode: IMH) 19:49 -> 20:32 历时：00:43\\n- 商务座: 剩余9张票 176元\\n- 一等座: 有票 94元\\n- 二等座: 有票 58元\\n- 无座: 有票 58元\\nG7338(实际车次train_no: 5j000G733831) 杭州东(telecode: HGH) -> 金山北(telecode: EGH) 20:25 -> 21:07 历时：00:42\\n- 商务座: 剩余9张票 153元\\n- 一等座: 有票 82元\\n- 二等座: 有票 51元\\n- 无座: 有票 51元\\nG1334(实际车次train_no: 77000G13350F) 杭州东(telecode: HGH) -> 金山北(telecode: EGH) 19:57 -> 20:36 历时：00:39\\n- 商务座: 剩余18张票 169元\\n- 一等座: 剩余4张票 90元\\n- 二等座: 有票 56元\\n- 无座: 有票 56元\\nG7550(实际车次train_no: 5j000G755060) 杭州东(telecode: HGH) -> 金山北(telecode: EGH) 18:52 -> 19:24 历时：00:32\\n- 商务座: 无票 184元\\n- 一等座: 剩余5张票 98元\\n- 二等座: 有票 61元\\n- 无座: 有票 61元\\n"}',
|
|
59
|
-
// },
|
|
60
|
-
// extra: {
|
|
61
|
-
// noFooter: true,
|
|
62
|
-
// },
|
|
63
|
-
// },
|
|
64
|
-
{
|
|
65
|
-
id: '3',
|
|
66
|
-
type: 'ImageMessage',
|
|
50
|
+
}, {
|
|
51
|
+
id: '22',
|
|
52
|
+
type: 'TextMessage',
|
|
67
53
|
createdAt: new Date(),
|
|
68
54
|
status: MessageStatus.done,
|
|
69
55
|
role: MessageRole.assistant,
|
|
70
|
-
extra: {
|
|
71
|
-
cost: 6.09,
|
|
72
|
-
token: 1999
|
|
73
|
-
},
|
|
74
56
|
content: {
|
|
75
|
-
|
|
76
|
-
bytes: 'https://gw.alipayobjects.com/zos/bmw-prod/b874caa9-4458-412a-9ac6-a61486180a62.svg'
|
|
57
|
+
text: '123'
|
|
77
58
|
},
|
|
78
59
|
thinks: "\u5177\u4F53\u6765\u8BF4\uFF0C\u7406\u8D54\u6D41\u7A0B\u4E00\u822C\u5305\u62EC\u4EE5\u4E0B\u51E0\u4E2A\u6B65\u9AA4:\n1.\u62A5\u6848:\u88AB\u4FDD\u9669\u4EBA\u6216\u5176\u6307\u5B9A\u7684\u53D7\u76CA\u4EBA\u5728\u77E5\u9053\u4FDD\u9669\u4E8B\u6545\u540E\uFF0C\u53CA\u65F6\u901A\u77E5\u4FDD\u9669\u4EBA\uFF0C\u5E76\u544A\u77E5\u4E8B\u6545\u53D1\u751F\u7684\u5177\u4F53\u60C5\u51B5\u3002\n2.\u63D0\u4EA4\u6750\u6599:\u88AB\u4FDD\u9669\u4EBA\u6216\u5176\u6307\u5B9A\u7684\u53D7\u76CA\u4EBA\u9700\u8981\u63D0\u4EA4\u76F8\u5173\u8BC1\u660E\u6750\u6599\uFF0C\u5982\u4E8B\u6545\u8BC1\u660E\u3001\u533B\u7597\u8BC1\u660E\u3001\u8D22\u4EA7\u635F\u5931\u8BC1\u660E\u7B49\u3002\n3.\u6838\u5B9A\u635F\u5931: \u4FDD\u9669\u4EBA\u4F1A\u5BF9\u63D0\u4EA4\u7684\u6750\u6599\u8FDB\u884C\u6838\u5B9A\uFF0C\u786E\u5B9A\u88AB\u4FDD\u9669\u4EBA\u7684\u635F\u5931\u60C5\u51B5\u3002\n4.\u534F\u5546\u8D54\u507F:\u5728\u786E\u5B9A\u88AB\u4FDD\u9669\u4EBA\u7684\u635F\u5931\u540E\uFF0C\u4FDD\u9669\u4EBA\u4F1A\u4E0E\u88AB\u4FDD\u9669\u4EBA\u6216\u5176\u6307\u5B9A\u7684\u53D7\u76CA\u4EBA\u534F\u5546\u8D54\u507F\u91D1\u989D\u3002\n5.\u652F\u4ED8\u8D54\u507F\u91D1:\u5728\u534F\u5546\u8FBE\u6210\u4E00\u81F4\u540E\uFF0C\u4FDD\u9669\u4EBA\u5411\u88AB\u4FDD\u9669\u4EBA\u6216\u5176\u6307\u5B9A\u7684\u53D7\u76CA\u4EBA\u652F\u4ED8\u8D54\u507F\u91D1\u9700\u8981\u6CE8\u610F\u3002",
|
|
79
60
|
execute: [
|
|
@@ -153,9 +134,29 @@ var mockMessages = [{
|
|
|
153
134
|
{
|
|
154
135
|
id: '5',
|
|
155
136
|
type: 'ActionExecutionMessage',
|
|
137
|
+
extra: {
|
|
138
|
+
icon: documentIcon
|
|
139
|
+
},
|
|
156
140
|
name: '运行完毕',
|
|
157
141
|
createdAt: new Date()
|
|
158
142
|
}],
|
|
143
|
+
extra: {
|
|
144
|
+
noFooter: true
|
|
145
|
+
}
|
|
146
|
+
}, {
|
|
147
|
+
id: '3',
|
|
148
|
+
type: 'ImageMessage',
|
|
149
|
+
createdAt: new Date(),
|
|
150
|
+
status: MessageStatus.done,
|
|
151
|
+
role: MessageRole.assistant,
|
|
152
|
+
extra: {
|
|
153
|
+
cost: 6.09,
|
|
154
|
+
token: 1999
|
|
155
|
+
},
|
|
156
|
+
content: {
|
|
157
|
+
format: 'svg',
|
|
158
|
+
bytes: 'https://gw.alipayobjects.com/zos/bmw-prod/b874caa9-4458-412a-9ac6-a61486180a62.svg'
|
|
159
|
+
},
|
|
159
160
|
parentMessageId: '2'
|
|
160
161
|
}, {
|
|
161
162
|
id: '4',
|
|
@@ -206,85 +207,59 @@ var BasicUsageStory = function BasicUsageStory(args) {
|
|
|
206
207
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
207
208
|
loading = _useState4[0],
|
|
208
209
|
setLoading = _useState4[1];
|
|
209
|
-
|
|
210
|
-
|
|
210
|
+
|
|
211
|
+
// 模拟随机字符串流式返回
|
|
212
|
+
var handleSendMessage = function handleSendMessage() {
|
|
211
213
|
setLoading(true);
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
createdAt: new Date(),
|
|
216
|
-
status: MessageStatus.pending,
|
|
217
|
-
role: MessageRole.user,
|
|
218
|
-
content: {
|
|
219
|
-
text: msg
|
|
220
|
-
}
|
|
221
|
-
};
|
|
222
|
-
setMessages(function (prev) {
|
|
223
|
-
return [].concat(_toConsumableArray(prev), [userMsg]);
|
|
224
|
-
});
|
|
225
|
-
var aiMsg = '';
|
|
226
|
-
var stream = ['好的，', '我正在为你查询', '相关信息...'];
|
|
214
|
+
|
|
215
|
+
// 模拟流式输出（向 mockMessages 第二条消息 content.text 追加）
|
|
216
|
+
var stream = ['我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '……'];
|
|
227
217
|
stream.forEach(function (chunk, idx) {
|
|
228
218
|
setTimeout(function () {
|
|
229
|
-
aiMsg += chunk;
|
|
230
219
|
setMessages(function (prev) {
|
|
231
|
-
var
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
220
|
+
var updated = _toConsumableArray(prev);
|
|
221
|
+
var targetIndex = 2; // mockMessages 的第二条（索引 1）
|
|
222
|
+
var targetMsg = updated[targetIndex];
|
|
223
|
+
|
|
224
|
+
// 确保该消息存在且是 TextMessage
|
|
225
|
+
if (targetMsg && targetMsg.type === 'TextMessage') {
|
|
226
|
+
// content 可能是多种类型，这里做类型守卫
|
|
227
|
+
if ('text' in targetMsg.content) {
|
|
228
|
+
updated[targetIndex] = _objectSpread(_objectSpread({}, targetMsg), {}, {
|
|
229
|
+
content: _objectSpread(_objectSpread({}, targetMsg.content), {}, {
|
|
230
|
+
// 模拟随机字符串流式拼接
|
|
231
|
+
text: targetMsg.content.text + chunk + Math.random().toString(36).slice(2, 5)
|
|
232
|
+
}),
|
|
233
|
+
thinks: targetMsg.thinks + chunk + Math.random().toString(36).slice(2, 5),
|
|
242
234
|
status: MessageStatus.pending
|
|
243
235
|
});
|
|
244
236
|
}
|
|
245
|
-
if (idx === 2) {
|
|
246
|
-
updated[aiIndex].status = MessageStatus.done;
|
|
247
|
-
setLoading(false);
|
|
248
|
-
}
|
|
249
|
-
return updated;
|
|
250
237
|
}
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
content: {
|
|
258
|
-
text: aiMsg
|
|
259
|
-
}
|
|
260
|
-
};
|
|
261
|
-
return [].concat(_toConsumableArray(prev), [aiMessage]);
|
|
262
|
-
});
|
|
263
|
-
if (idx === stream.length - 1) {
|
|
264
|
-
setTimeout(function () {
|
|
265
|
-
setMessages(function (prev) {
|
|
266
|
-
return prev.map(function (m) {
|
|
267
|
-
if (m.id === 'stream-ai') {
|
|
268
|
-
var doneMsg = _objectSpread(_objectSpread({}, m), {}, {
|
|
269
|
-
status: MessageStatus.done
|
|
270
|
-
});
|
|
271
|
-
return doneMsg;
|
|
272
|
-
}
|
|
273
|
-
return m;
|
|
274
|
-
});
|
|
238
|
+
|
|
239
|
+
// 最后一个流块时，标记完成
|
|
240
|
+
if (idx === stream.length - 1) {
|
|
241
|
+
setLoading(false);
|
|
242
|
+
updated[targetIndex] = _objectSpread(_objectSpread({}, updated[targetIndex]), {}, {
|
|
243
|
+
status: MessageStatus.done
|
|
275
244
|
});
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
|
|
245
|
+
}
|
|
246
|
+
return updated;
|
|
247
|
+
});
|
|
248
|
+
}, 200 * (idx + 1)); // 每个片段延迟 600ms 模拟流
|
|
279
249
|
});
|
|
280
250
|
};
|
|
251
|
+
useEffect(function () {
|
|
252
|
+
if (messages) {
|
|
253
|
+
handleSendMessage();
|
|
254
|
+
}
|
|
255
|
+
}, []);
|
|
281
256
|
|
|
282
|
-
//
|
|
257
|
+
// 清空消息
|
|
283
258
|
var handleClear = function handleClear() {
|
|
284
259
|
setMessages([]);
|
|
285
260
|
};
|
|
286
261
|
|
|
287
|
-
//
|
|
262
|
+
// 模拟按钮回调
|
|
288
263
|
var handleActions = function handleActions(index, data) {
|
|
289
264
|
console.log(index, data);
|
|
290
265
|
};
|
|
@@ -297,6 +272,8 @@ var BasicUsageStory = function BasicUsageStory(args) {
|
|
|
297
272
|
});
|
|
298
273
|
});
|
|
299
274
|
};
|
|
275
|
+
|
|
276
|
+
// tooltip
|
|
300
277
|
var ToolTip = function ToolTip(data) {
|
|
301
278
|
var _ref = (data === null || data === void 0 ? void 0 : data.extra) || {},
|
|
302
279
|
cost = _ref.cost,
|