@ai-group/chat-sdk 3.0.5 → 3.0.6

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.
Files changed (64) hide show
  1. package/dist/cjs/components/XAdkChatbot/XAdkChatbot.stories.js +10 -0
  2. package/dist/cjs/components/XAdkChatbot/XAdkChatbot.stories.js.map +2 -2
  3. package/dist/cjs/components/XAdkChatbot/components/MarkdownRender/index.d.ts +1 -0
  4. package/dist/cjs/components/XAdkChatbot/components/MarkdownRender/index.js +2 -0
  5. package/dist/cjs/components/XAdkChatbot/components/MarkdownRender/index.js.map +2 -2
  6. package/dist/cjs/components/XAdkChatbot/components/MarkdownRender/styles.js +7 -1
  7. package/dist/cjs/components/XAdkChatbot/components/MarkdownRender/styles.js.map +2 -2
  8. package/dist/cjs/components/XAdkChatbot/index.js +18 -1
  9. package/dist/cjs/components/XAdkChatbot/index.js.map +2 -2
  10. package/dist/cjs/components/XAdkProvider/XAdkProvider.stories.js +2 -2
  11. package/dist/cjs/components/XAdkProvider/XAdkProvider.stories.js.map +1 -1
  12. package/dist/cjs/components/XAdkProvider/compound/Messages.js +63 -9
  13. package/dist/cjs/components/XAdkProvider/compound/Messages.js.map +3 -3
  14. package/dist/cjs/components/XAdkProvider/context/ChatActionContext.d.ts +5 -0
  15. package/dist/cjs/components/XAdkProvider/context/ChatActionContext.js.map +2 -2
  16. package/dist/cjs/components/XAdkProvider/context/ChatStateContext.d.ts +2 -0
  17. package/dist/cjs/components/XAdkProvider/context/ChatStateContext.js.map +2 -2
  18. package/dist/cjs/components/XAdkProvider/index.js +11 -5
  19. package/dist/cjs/components/XAdkProvider/index.js.map +2 -2
  20. package/dist/cjs/components/XAdkSender/XAdkSender.stories.d.ts +2 -2
  21. package/dist/cjs/components/XAdkSender/XAdkSender.stories.js.map +2 -2
  22. package/dist/cjs/hooks/useADKChat.d.ts +4 -0
  23. package/dist/cjs/hooks/useADKChat.js +24 -2
  24. package/dist/cjs/hooks/useADKChat.js.map +2 -2
  25. package/dist/cjs/types/ChatHook.d.ts +6 -1
  26. package/dist/cjs/types/ChatHook.js.map +1 -1
  27. package/dist/cjs/types/XAdkChatbot.d.ts +1 -1
  28. package/dist/cjs/types/XAdkChatbot.js.map +1 -1
  29. package/dist/cjs/types/XAdkProvider.d.ts +5 -0
  30. package/dist/cjs/types/XAdkProvider.js.map +1 -1
  31. package/dist/esm/components/XAdkChatbot/XAdkChatbot.stories.js +8 -0
  32. package/dist/esm/components/XAdkChatbot/XAdkChatbot.stories.js.map +1 -1
  33. package/dist/esm/components/XAdkChatbot/components/MarkdownRender/index.d.ts +1 -0
  34. package/dist/esm/components/XAdkChatbot/components/MarkdownRender/index.js +2 -0
  35. package/dist/esm/components/XAdkChatbot/components/MarkdownRender/index.js.map +1 -1
  36. package/dist/esm/components/XAdkChatbot/components/MarkdownRender/styles.js +1 -1
  37. package/dist/esm/components/XAdkChatbot/components/MarkdownRender/styles.js.map +1 -1
  38. package/dist/esm/components/XAdkChatbot/index.js +26 -5
  39. package/dist/esm/components/XAdkChatbot/index.js.map +1 -1
  40. package/dist/esm/components/XAdkProvider/XAdkProvider.stories.js +2 -2
  41. package/dist/esm/components/XAdkProvider/XAdkProvider.stories.js.map +1 -1
  42. package/dist/esm/components/XAdkProvider/compound/Messages.js +124 -11
  43. package/dist/esm/components/XAdkProvider/compound/Messages.js.map +1 -1
  44. package/dist/esm/components/XAdkProvider/context/ChatActionContext.d.ts +5 -0
  45. package/dist/esm/components/XAdkProvider/context/ChatActionContext.js.map +1 -1
  46. package/dist/esm/components/XAdkProvider/context/ChatStateContext.d.ts +2 -0
  47. package/dist/esm/components/XAdkProvider/context/ChatStateContext.js.map +1 -1
  48. package/dist/esm/components/XAdkProvider/index.js +23 -5
  49. package/dist/esm/components/XAdkProvider/index.js.map +1 -1
  50. package/dist/esm/components/XAdkSender/XAdkSender.stories.d.ts +2 -2
  51. package/dist/esm/components/XAdkSender/XAdkSender.stories.js +13 -13
  52. package/dist/esm/components/XAdkSender/XAdkSender.stories.js.map +1 -1
  53. package/dist/esm/hooks/useADKChat.d.ts +4 -0
  54. package/dist/esm/hooks/useADKChat.js +79 -28
  55. package/dist/esm/hooks/useADKChat.js.map +1 -1
  56. package/dist/esm/types/ChatHook.d.ts +6 -1
  57. package/dist/esm/types/ChatHook.js.map +1 -1
  58. package/dist/esm/types/XAdkChatbot.d.ts +1 -1
  59. package/dist/esm/types/XAdkChatbot.js.map +1 -1
  60. package/dist/esm/types/XAdkProvider.d.ts +5 -0
  61. package/dist/esm/types/XAdkProvider.js.map +1 -1
  62. package/dist/umd/chat-sdk.min.css +1 -1
  63. package/dist/umd/chat-sdk.min.js +1 -1
  64. package/package.json +1 -1
@@ -1,4 +1,4 @@
1
- import { IMessage, SendContent } from './index';
1
+ import { IMessage, SendContent } from "./index";
2
2
  /**
3
3
  * 聊天 Hook 标准接口
4
4
  * 所有自定义 Hook 必须实现这个接口
@@ -63,6 +63,11 @@ export interface ChatHookResult {
63
63
  setCurrentSessionDetail: (id: string) => void;
64
64
  /** 直接设置消息列表 */
65
65
  setMessages: (msgs: IMessage[] | ((prev: IMessage[]) => IMessage[])) => void;
66
+ /** 点赞/点踩消息(可选,自定义 Hook 可不实现) */
67
+ likeMessage?: (invocationId: string, isLike: 1 | -1, feedbackData?: {
68
+ feedbackTags?: string;
69
+ feedbackDescription?: string;
70
+ }) => Promise<boolean>;
66
71
  }
67
72
  /**
68
73
  * Hook 工厂函数类型
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/types/ChatHook.ts"],
4
- "sourcesContent": ["import { IMessage, SendContent } from './index';\n\n/**\n * 聊天 Hook 标准接口\n * 所有自定义 Hook 必须实现这个接口\n *\n * @example\n * // 使用内置标准协议\n * <XAdkProvider url=\"...\" token=\"...\" config={...}>\n * <XAdkProvider.DefaultLayout />\n * </XAdkProvider>\n *\n * @example\n * // 使用自定义 Hook (GraphQL)\n * function MyApp() {\n * const chatData = useMyGraphQLChat({ endpoint: '...' });\n * return (\n * <XAdkProvider chatData={chatData}>\n * <XAdkProvider.DefaultLayout />\n * </XAdkProvider>\n * );\n * }\n */\nexport interface ChatHookResult {\n // ========== 状态 ==========\n\n /** 消息列表 */\n messages: IMessage[];\n\n /** 加载状态 */\n loading: boolean;\n\n /** 当前会话ID */\n currentSessionId: string;\n\n /** 开场白 */\n prologue: string;\n\n /** 建议问题列表 */\n suggestions: string[];\n\n /** 应用信息 */\n appInfo: any | null;\n\n /** 是否已初始化 */\n initialized: boolean;\n\n // ========== 会话列表 ==========\n\n /** 会话列表 */\n sessionList: any[];\n\n /** 会话分页信息 */\n sessionPagination: {\n total: number;\n pageNum: number;\n pageSize: number;\n };\n\n // ========== 操作方法 ==========\n\n /** 发送消息 */\n startChat: (content: SendContent) => void;\n\n /** 停止当前对话 */\n stopChat: () => void;\n\n /** 清空当前会话消息 */\n clearChat: () => void;\n\n /** 重新生成最后一条回复 */\n reChat: () => void;\n\n /** 发送建议问题 */\n suggestChat: (suggestion: string) => void;\n\n /** 确认函数调用 */\n confirmFnCall: (response: any) => void;\n\n /** 删除会话 */\n deleteSession: (id: string) => void;\n\n /** 更新会话标题 */\n updateSession: (id: string, title: string) => void;\n\n /** 切换会话 */\n setCurrentSessionDetail: (id: string) => void;\n\n /** 直接设置消息列表 */\n setMessages: (msgs: IMessage[] | ((prev: IMessage[]) => IMessage[])) => void;\n}\n\n/**\n * Hook 工厂函数类型\n *\n * @example\n * const useMyCustomChat: ChatHookFactory = (options) => {\n * // 实现自定义协议逻辑\n * return {\n * messages: [...],\n * loading: false,\n * startChat: (content) => { ... },\n * // ... 其他方法\n * };\n * };\n */\nexport type ChatHookFactory = (options: any) => ChatHookResult;\n"],
4
+ "sourcesContent": ["import { IMessage, SendContent } from \"./index\";\n\n/**\n * 聊天 Hook 标准接口\n * 所有自定义 Hook 必须实现这个接口\n *\n * @example\n * // 使用内置标准协议\n * <XAdkProvider url=\"...\" token=\"...\" config={...}>\n * <XAdkProvider.DefaultLayout />\n * </XAdkProvider>\n *\n * @example\n * // 使用自定义 Hook (GraphQL)\n * function MyApp() {\n * const chatData = useMyGraphQLChat({ endpoint: '...' });\n * return (\n * <XAdkProvider chatData={chatData}>\n * <XAdkProvider.DefaultLayout />\n * </XAdkProvider>\n * );\n * }\n */\nexport interface ChatHookResult {\n // ========== 状态 ==========\n\n /** 消息列表 */\n messages: IMessage[];\n\n /** 加载状态 */\n loading: boolean;\n\n /** 当前会话ID */\n currentSessionId: string;\n\n /** 开场白 */\n prologue: string;\n\n /** 建议问题列表 */\n suggestions: string[];\n\n /** 应用信息 */\n appInfo: any | null;\n\n /** 是否已初始化 */\n initialized: boolean;\n\n // ========== 会话列表 ==========\n\n /** 会话列表 */\n sessionList: any[];\n\n /** 会话分页信息 */\n sessionPagination: {\n total: number;\n pageNum: number;\n pageSize: number;\n };\n\n // ========== 操作方法 ==========\n\n /** 发送消息 */\n startChat: (content: SendContent) => void;\n\n /** 停止当前对话 */\n stopChat: () => void;\n\n /** 清空当前会话消息 */\n clearChat: () => void;\n\n /** 重新生成最后一条回复 */\n reChat: () => void;\n\n /** 发送建议问题 */\n suggestChat: (suggestion: string) => void;\n\n /** 确认函数调用 */\n confirmFnCall: (response: any) => void;\n\n /** 删除会话 */\n deleteSession: (id: string) => void;\n\n /** 更新会话标题 */\n updateSession: (id: string, title: string) => void;\n\n /** 切换会话 */\n setCurrentSessionDetail: (id: string) => void;\n\n /** 直接设置消息列表 */\n setMessages: (msgs: IMessage[] | ((prev: IMessage[]) => IMessage[])) => void;\n\n /** 点赞/点踩消息(可选,自定义 Hook 可不实现) */\n likeMessage?: (\n invocationId: string,\n isLike: 1 | -1,\n feedbackData?: { feedbackTags?: string; feedbackDescription?: string },\n ) => Promise<boolean>;\n}\n\n/**\n * Hook 工厂函数类型\n *\n * @example\n * const useMyCustomChat: ChatHookFactory = (options) => {\n * // 实现自定义协议逻辑\n * return {\n * messages: [...],\n * loading: false,\n * startChat: (content) => { ... },\n * // ... 其他方法\n * };\n * };\n */\nexport type ChatHookFactory = (options: any) => ChatHookResult;\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
@@ -214,7 +214,7 @@ export interface XAdkChatbotProps extends Partial<XAdkSenderProps> {
214
214
  welcome?: React.ReactNode;
215
215
  /** 显示函数调用详情 */
216
216
  showFnCallDetail?: boolean;
217
- /** 是否初始化 */
217
+ /** 是否初始化完成,初始化完成后自动滚动到最新消息 */
218
218
  initialized?: boolean;
219
219
  /** 提交回调 */
220
220
  onSubmit?: ({ text, files }: SendContent) => void;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/types/XAdkChatbot.ts"],
4
- "sourcesContent": ["import { JSX, ReactNode } from \"react\";\nimport { type XAdkSenderProps } from \"./XAdkSender\";\nimport { type SendContent } from \"./XAiSender\";\n\n/**\n * 消息分组接口\n */\nexport interface ChatGroup {\n id: string;\n role: \"user\" | \"bot\";\n msgs: IMessage[];\n invocationId?: string;\n allFiles: any[];\n /** 点赞状态: 1=赞, -1=踩, 0=未反馈 */\n isLike?: number;\n}\n\nexport interface IInvocation {\n id: string;\n name: string;\n spanId: string;\n traceId: string;\n parentSpanId: string;\n startTime: number;\n endTime: number;\n sessionId: string;\n invocationId: string;\n duration: number;\n attributes: Record<string, string>;\n botName: string;\n workspaceNo: string;\n status: number;\n agentName: string;\n agentNo: string;\n agentVersionNo: string;\n userId: string;\n}\n\nexport interface AgentRunRequest {\n stream?: boolean;\n sessionId: string | undefined;\n content: {\n parts: Array<{\n text?: string;\n functionResponse?: {\n id?: string;\n name?: string;\n response?: any;\n };\n }>;\n role: string;\n };\n files?: Array<{\n fileName: string;\n fileId?: string;\n tempUrl: string;\n type?: string;\n mimeType: string;\n }>;\n stateDelta?: any;\n}\nexport interface Blob {\n displayName?: string;\n mimeType?: string;\n data: string;\n}\n\nexport interface FunctionCall {\n id?: string;\n name: string;\n args: { [key: string]: any };\n}\n\nexport interface FunctionResponse {\n id?: string;\n name: string;\n response: { [key: string]: any };\n}\n\nexport interface FileData {\n displayName: string;\n mimeType: string;\n fileUri: string;\n}\n\nexport interface ExecutableCode {\n language: \"UNKNOWN\" | \"PYTHON\";\n code: string;\n}\n\nexport interface CodeExecutionResult {\n outcome: \"UNKNOWN\" | \"OK\" | \"FAILED\" | \"DEADLINE_EXCEEDED\";\n output: string;\n}\n\nexport interface Part {\n text?: string;\n inlineData?: Blob;\n functionCall?: FunctionCall;\n functionResponse?: FunctionResponse;\n thought?: boolean;\n fileData?: FileData;\n executableCode?: ExecutableCode;\n codeExecutionResult?: CodeExecutionResult;\n errorMessage?: string;\n}\n\nexport interface GenAiContent {\n role: string;\n parts: Part[];\n}\n\nexport interface LlmRequest {\n contents: GenAiContent[];\n}\n\nexport interface LlmResponse {\n partial?: boolean;\n content: GenAiContent;\n error?: string;\n errorMessage?: string;\n errorCode?: string;\n longRunningToolIds?: string[];\n}\n\nexport interface EventActions {\n message?: string;\n artifactDelta?: any;\n functionCall?: FunctionCall;\n functionResponse?: FunctionResponse;\n finishReason?: string;\n}\n\nexport interface Event extends LlmResponse {\n id?: string;\n author?: string;\n invocationId?: string;\n actions?: EventActions;\n longRunningToolIds?: string[];\n branch?: string;\n timestamp?: number;\n evalStatus?: any;\n failedMetric?: any;\n evalScore?: any;\n evalThreshold?: any;\n groundingMetadata?: {\n searchEntryPoint?: {\n renderedContent?: any;\n };\n };\n isLike?: number;\n sessionId?: string;\n}\n\nexport interface SessionState {\n [key: string]: unknown;\n}\n\nexport interface Session {\n id?: string;\n appName?: string;\n userId?: string;\n state?: SessionState;\n events?: Event[];\n lastUpdateTime?: number;\n}\n\nexport interface TimeTick {\n position: number;\n label: string;\n}\n\nexport interface IMessage {\n /** 前端生成的唯一标识 */\n id: string;\n /** 单次请求的唯一标识 */\n invocationId?: string;\n /** 单个Event的唯一标识,一个event里有可能有多个parts的消息 */\n eventId?: string;\n /** 消息发起人:智能体名称、user */\n author?: string;\n role: \"bot\" | \"user\";\n /** 时间戳 */\n timestamp?: number;\n isLoading?: boolean;\n /** 函数调用 */\n functionCall?: FunctionCall;\n /** 函数调用结果 */\n functionResponse?: FunctionResponse;\n /** 文件上传 */\n inlineData?: Blob;\n /** 文本消息 */\n text?: string;\n /** 文件信息 */\n fileData?: FileData[];\n /** 思考 */\n thought?: boolean;\n executableCode?: ExecutableCode;\n codeExecutionResult?: CodeExecutionResult;\n renderedContent?: any;\n /** 原始数据 */\n raw?: any;\n // 下面暂时没有用到\n evalStatus?: any;\n failedMetric?: any;\n evalScore?: any;\n evalThreshold?: any;\n invocationIndex?: any;\n finalResponsePartIndex?: any;\n toolUseIndex?: any;\n /** 是否赞/踩 */\n isLike?: number;\n}\n\nexport type ActionProps = (data: {\n message: ChatGroup;\n isLastBotMsg: boolean;\n}) => JSX.Element | null;\n\nexport interface XAdkChatbotProps extends Partial<XAdkSenderProps> {\n className?: string;\n style?: React.CSSProperties;\n // 加载状态\n loading?: boolean;\n /** 消息列表 */\n messages: IMessage[];\n /** 开场白 */\n prologue?: string;\n /** 建议回复 */\n suggestions?: string[];\n /** 欢迎页面 */\n welcome?: React.ReactNode;\n /** 显示函数调用详情 */\n showFnCallDetail?: boolean;\n /** 是否初始化 */\n initialized?: boolean;\n /** 提交回调 */\n onSubmit?: ({ text, files }: SendContent) => void;\n /** 函数调用确认回调 */\n onConfirm?: (fnCall: FunctionCall, confirmed: boolean) => void;\n /** 停止回调 */\n onStop?: () => void;\n /** 清除回调 */\n onClear?: () => void;\n /** 建议回复回调 */\n onSuggest?: (text: string) => void;\n\n // ========== 新增功能 ==========\n\n /** Agent 名称 (欢迎页面) */\n agentName?: string;\n /** Agent 图标 (欢迎页面) */\n agentIcon?: string;\n /** Agent 描述 (欢迎页面) */\n description?: string;\n\n /** 是否显示重试按钮 */\n showRetry?: boolean;\n /** 是否显示复制按钮 */\n showCopy?: boolean;\n /** 是否显示日志按钮 */\n showLog?: boolean;\n\n /** 重试回调 */\n onRetry?: () => void;\n /** 复制回调 */\n onCopy?: (text: string) => void;\n /** 查看日志回调 */\n onShowLog?: (invocationId: string, timestamp?: number) => void;\n\n /** 是否启用消息分组 (默认 true) */\n enableGrouping?: boolean;\n\n /** 是否自动解析 process 内容并展示思维链 (默认 true) */\n enableProcessParsing?: boolean;\n\n /** 消息功能区 */\n actions?: ActionProps;\n\n /**\n * Process 解析选项\n * @example\n * // 业务项目格式 (注释模式)\n * parseOptions={{ mode: 'comment' }}\n *\n * @example\n * // 自定义格式\n * parseOptions={{\n * mode: 'custom',\n * customPatterns: [\n * { regex: /\\[REASONING\\]([\\s\\S]*?)\\[\\/REASONING\\]/g, type: 'reasoning' }\n * ]\n * }}\n */\n parseOptions?: {\n mode?: \"xml\" | \"comment\" | \"custom\";\n customPatterns?: Array<{ regex: RegExp; type: string }>;\n finalMarker?: string;\n };\n\n /** 是否禁用输入 */\n disabled?: boolean;\n\n /** 是否流式响应 */\n stream?: boolean;\n}\n"],
4
+ "sourcesContent": ["import { JSX } from \"react\";\nimport { type XAdkSenderProps } from \"./XAdkSender\";\nimport { type SendContent } from \"./XAiSender\";\n\n/**\n * 消息分组接口\n */\nexport interface ChatGroup {\n id: string;\n role: \"user\" | \"bot\";\n msgs: IMessage[];\n invocationId?: string;\n allFiles: any[];\n /** 点赞状态: 1=赞, -1=踩, 0=未反馈 */\n isLike?: number;\n}\n\nexport interface IInvocation {\n id: string;\n name: string;\n spanId: string;\n traceId: string;\n parentSpanId: string;\n startTime: number;\n endTime: number;\n sessionId: string;\n invocationId: string;\n duration: number;\n attributes: Record<string, string>;\n botName: string;\n workspaceNo: string;\n status: number;\n agentName: string;\n agentNo: string;\n agentVersionNo: string;\n userId: string;\n}\n\nexport interface AgentRunRequest {\n stream?: boolean;\n sessionId: string | undefined;\n content: {\n parts: Array<{\n text?: string;\n functionResponse?: {\n id?: string;\n name?: string;\n response?: any;\n };\n }>;\n role: string;\n };\n files?: Array<{\n fileName: string;\n fileId?: string;\n tempUrl: string;\n type?: string;\n mimeType: string;\n }>;\n stateDelta?: any;\n}\nexport interface Blob {\n displayName?: string;\n mimeType?: string;\n data: string;\n}\n\nexport interface FunctionCall {\n id?: string;\n name: string;\n args: { [key: string]: any };\n}\n\nexport interface FunctionResponse {\n id?: string;\n name: string;\n response: { [key: string]: any };\n}\n\nexport interface FileData {\n displayName: string;\n mimeType: string;\n fileUri: string;\n}\n\nexport interface ExecutableCode {\n language: \"UNKNOWN\" | \"PYTHON\";\n code: string;\n}\n\nexport interface CodeExecutionResult {\n outcome: \"UNKNOWN\" | \"OK\" | \"FAILED\" | \"DEADLINE_EXCEEDED\";\n output: string;\n}\n\nexport interface Part {\n text?: string;\n inlineData?: Blob;\n functionCall?: FunctionCall;\n functionResponse?: FunctionResponse;\n thought?: boolean;\n fileData?: FileData;\n executableCode?: ExecutableCode;\n codeExecutionResult?: CodeExecutionResult;\n errorMessage?: string;\n}\n\nexport interface GenAiContent {\n role: string;\n parts: Part[];\n}\n\nexport interface LlmRequest {\n contents: GenAiContent[];\n}\n\nexport interface LlmResponse {\n partial?: boolean;\n content: GenAiContent;\n error?: string;\n errorMessage?: string;\n errorCode?: string;\n longRunningToolIds?: string[];\n}\n\nexport interface EventActions {\n message?: string;\n artifactDelta?: any;\n functionCall?: FunctionCall;\n functionResponse?: FunctionResponse;\n finishReason?: string;\n}\n\nexport interface Event extends LlmResponse {\n id?: string;\n author?: string;\n invocationId?: string;\n actions?: EventActions;\n longRunningToolIds?: string[];\n branch?: string;\n timestamp?: number;\n evalStatus?: any;\n failedMetric?: any;\n evalScore?: any;\n evalThreshold?: any;\n groundingMetadata?: {\n searchEntryPoint?: {\n renderedContent?: any;\n };\n };\n isLike?: number;\n sessionId?: string;\n}\n\nexport interface SessionState {\n [key: string]: unknown;\n}\n\nexport interface Session {\n id?: string;\n appName?: string;\n userId?: string;\n state?: SessionState;\n events?: Event[];\n lastUpdateTime?: number;\n}\n\nexport interface TimeTick {\n position: number;\n label: string;\n}\n\nexport interface IMessage {\n /** 前端生成的唯一标识 */\n id: string;\n /** 单次请求的唯一标识 */\n invocationId?: string;\n /** 单个Event的唯一标识,一个event里有可能有多个parts的消息 */\n eventId?: string;\n /** 消息发起人:智能体名称、user */\n author?: string;\n role: \"bot\" | \"user\";\n /** 时间戳 */\n timestamp?: number;\n isLoading?: boolean;\n /** 函数调用 */\n functionCall?: FunctionCall;\n /** 函数调用结果 */\n functionResponse?: FunctionResponse;\n /** 文件上传 */\n inlineData?: Blob;\n /** 文本消息 */\n text?: string;\n /** 文件信息 */\n fileData?: FileData[];\n /** 思考 */\n thought?: boolean;\n executableCode?: ExecutableCode;\n codeExecutionResult?: CodeExecutionResult;\n renderedContent?: any;\n /** 原始数据 */\n raw?: any;\n // 下面暂时没有用到\n evalStatus?: any;\n failedMetric?: any;\n evalScore?: any;\n evalThreshold?: any;\n invocationIndex?: any;\n finalResponsePartIndex?: any;\n toolUseIndex?: any;\n /** 是否赞/踩 */\n isLike?: number;\n}\n\nexport type ActionProps = (data: {\n message: ChatGroup;\n isLastBotMsg: boolean;\n}) => JSX.Element | null;\n\nexport interface XAdkChatbotProps extends Partial<XAdkSenderProps> {\n className?: string;\n style?: React.CSSProperties;\n // 加载状态\n loading?: boolean;\n /** 消息列表 */\n messages: IMessage[];\n /** 开场白 */\n prologue?: string;\n /** 建议回复 */\n suggestions?: string[];\n /** 欢迎页面 */\n welcome?: React.ReactNode;\n /** 显示函数调用详情 */\n showFnCallDetail?: boolean;\n /** 是否初始化完成,初始化完成后自动滚动到最新消息 */\n initialized?: boolean;\n /** 提交回调 */\n onSubmit?: ({ text, files }: SendContent) => void;\n /** 函数调用确认回调 */\n onConfirm?: (fnCall: FunctionCall, confirmed: boolean) => void;\n /** 停止回调 */\n onStop?: () => void;\n /** 清除回调 */\n onClear?: () => void;\n /** 建议回复回调 */\n onSuggest?: (text: string) => void;\n\n // ========== 新增功能 ==========\n\n /** Agent 名称 (欢迎页面) */\n agentName?: string;\n /** Agent 图标 (欢迎页面) */\n agentIcon?: string;\n /** Agent 描述 (欢迎页面) */\n description?: string;\n\n /** 是否显示重试按钮 */\n showRetry?: boolean;\n /** 是否显示复制按钮 */\n showCopy?: boolean;\n /** 是否显示日志按钮 */\n showLog?: boolean;\n\n /** 重试回调 */\n onRetry?: () => void;\n /** 复制回调 */\n onCopy?: (text: string) => void;\n /** 查看日志回调 */\n onShowLog?: (invocationId: string, timestamp?: number) => void;\n\n /** 是否启用消息分组 (默认 true) */\n enableGrouping?: boolean;\n\n /** 是否自动解析 process 内容并展示思维链 (默认 true) */\n enableProcessParsing?: boolean;\n\n /** 消息功能区 */\n actions?: ActionProps;\n\n /**\n * Process 解析选项\n * @example\n * // 业务项目格式 (注释模式)\n * parseOptions={{ mode: 'comment' }}\n *\n * @example\n * // 自定义格式\n * parseOptions={{\n * mode: 'custom',\n * customPatterns: [\n * { regex: /\\[REASONING\\]([\\s\\S]*?)\\[\\/REASONING\\]/g, type: 'reasoning' }\n * ]\n * }}\n */\n parseOptions?: {\n mode?: \"xml\" | \"comment\" | \"custom\";\n customPatterns?: Array<{ regex: RegExp; type: string }>;\n finalMarker?: string;\n };\n\n /** 是否禁用输入 */\n disabled?: boolean;\n\n /** 是否流式响应 */\n stream?: boolean;\n}\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
@@ -97,6 +97,11 @@ export interface XAdkProviderConfig {
97
97
  appNo?: string;
98
98
  chatProps?: ChatConfig;
99
99
  debug?: boolean;
100
+ /**
101
+ * 是否展示点赞/点踩按钮
102
+ * @default true
103
+ */
104
+ showFeedback?: boolean;
100
105
  }
101
106
  /**
102
107
  * XAdkProvider Props
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/types/XAdkProvider.ts"],
4
- "sourcesContent": ["import { ReactNode } from \"react\";\nimport {\n IMessage,\n Success,\n Event,\n Error,\n SendContent,\n ThemeType,\n} from \"@/types\";\n\nexport interface DebugOptions {\n url: string;\n sessionId?: string;\n config: any;\n token: string;\n type?: \"agentDebug\" | \"appDebug\";\n /**\n * 是否启用 Hook\n * 当使用自定义 chatData 时,应设置为 false 以避免内部 Hook 初始化\n * @default true\n */\n enabled?: boolean;\n onError?: (error: Error) => void;\n onSuccess?: (data: Success) => void;\n onStream?: (data: Event) => void;\n onMessage?: (content: string, data: IMessage) => void;\n}\n\n/**\n * 事件状态码枚举\n * @enum {string}\n * @version 1.0.0\n */\nexport enum EventCode {\n /** 切换会话 */\n SESSION_SWITCH = \"SESSION_SWITCH\",\n /** 开启新会话 */\n SESSION_CREATE = \"SESSION_CREATE\",\n}\n\nexport type handleEvent = {\n code: EventCode;\n message: string;\n data?: any;\n};\n/**\n * renderFooter insert 参数说明\n */\nexport interface FooterRenderArgs {\n message: IMessage;\n isLastBotMsg: boolean;\n isLastMsg: boolean;\n}\n\n/**\n * Provider 可通过 ref 暴露的方法句柄\n */\nexport interface XAdkProviderHandle {\n startChat: (content: SendContent) => void;\n stopChat: () => void;\n clearChat: () => void;\n deleteSession: (id: string) => void;\n updateSession: (id: string, title: string) => void;\n getAppInfo: () => any;\n getMessages: () => IMessage[];\n getSessions: () => any[];\n setMessages: (msgs: IMessage[]) => void;\n setCurrentSessionDetail: (id: string) => void;\n}\n\n/**\n * config.chatProps 中的配置\n */\nexport interface ChatConfig {\n /**\n * 是否展示清空按钮\n * @type {boolean}\n * @default false\n */\n clearBtnShow?: boolean;\n /**\n * 是否展示输入框\n * @type {boolean}\n * @default true\n */\n inputShow?: boolean;\n /**\n * 打字机效果速度(单位:毫秒)\n * @type {number}\n * @default 60\n * @version 1.0.0\n */\n textSpeed?: number;\n}\n\n/**\n * Provider config 整体配置结构\n */\nexport interface XAdkProviderConfig {\n session?: {\n showSessionList?: boolean;\n };\n /**\n * 初始化后是否默认展示第一条会话内容\n * @type {boolean}\n * @default false\n */\n showFirstSession?: boolean;\n allowUpload?: boolean;\n appNo?: string;\n chatProps?: ChatConfig;\n debug?: boolean;\n}\n\n/**\n * XAdkProvider Props\n */\nexport interface XAdkProviderProps {\n /**\n * AI 服务基础地址\n */\n url: string;\n /**\n * 认证 token\n */\n token: string;\n /**\n * 组件功能配置\n */\n config?: XAdkProviderConfig;\n /**\n * Provider 唯一标识\n */\n providerId?: string;\n /**\n * 消息成功回调\n */\n onSuccess?: (success: any) => void;\n /**\n * 流式消息回调\n */\n onStream?: (data: Event) => void;\n /**\n * 错误回调\n */\n onError?: (err: any) => void;\n /**\n * 每条消息回调\n */\n onMessage?: (content: string, data: IMessage) => void;\n /**\n * 事件回调\n */\n onEvent?: (event: handleEvent) => void;\n /**\n * React 子元素 - 支持 Compound Components\n */\n children?: ReactNode;\n}\n\n// XAiSDKProps 继承 XAdkProviderProps\nexport interface XAdkSDKProps extends XAdkProviderProps {\n /**\n * 主题类型\n * @type {ThemeType}\n * @default 'default'\n * @version 1.0.0\n */\n theme?: ThemeType;\n\n /**\n * 组件属性配置\n * @type {object}\n * @default undefined\n * @version 1.0.0\n */\n componentProps?: {\n /**\n * 组件ID\n * @type {string}\n * @default undefined\n * @version 1.0.0\n */\n id?: string;\n /** 支持任意 CSS 属性 */\n [key: string]: any;\n };\n}\n"],
4
+ "sourcesContent": ["import { ReactNode } from \"react\";\nimport {\n IMessage,\n Success,\n Event,\n Error,\n SendContent,\n ThemeType,\n} from \"@/types\";\n\nexport interface DebugOptions {\n url: string;\n sessionId?: string;\n config: any;\n token: string;\n type?: \"agentDebug\" | \"appDebug\";\n /**\n * 是否启用 Hook\n * 当使用自定义 chatData 时,应设置为 false 以避免内部 Hook 初始化\n * @default true\n */\n enabled?: boolean;\n onError?: (error: Error) => void;\n onSuccess?: (data: Success) => void;\n onStream?: (data: Event) => void;\n onMessage?: (content: string, data: IMessage) => void;\n}\n\n/**\n * 事件状态码枚举\n * @enum {string}\n * @version 1.0.0\n */\nexport enum EventCode {\n /** 切换会话 */\n SESSION_SWITCH = \"SESSION_SWITCH\",\n /** 开启新会话 */\n SESSION_CREATE = \"SESSION_CREATE\",\n}\n\nexport type handleEvent = {\n code: EventCode;\n message: string;\n data?: any;\n};\n/**\n * renderFooter insert 参数说明\n */\nexport interface FooterRenderArgs {\n message: IMessage;\n isLastBotMsg: boolean;\n isLastMsg: boolean;\n}\n\n/**\n * Provider 可通过 ref 暴露的方法句柄\n */\nexport interface XAdkProviderHandle {\n startChat: (content: SendContent) => void;\n stopChat: () => void;\n clearChat: () => void;\n deleteSession: (id: string) => void;\n updateSession: (id: string, title: string) => void;\n getAppInfo: () => any;\n getMessages: () => IMessage[];\n getSessions: () => any[];\n setMessages: (msgs: IMessage[]) => void;\n setCurrentSessionDetail: (id: string) => void;\n}\n\n/**\n * config.chatProps 中的配置\n */\nexport interface ChatConfig {\n /**\n * 是否展示清空按钮\n * @type {boolean}\n * @default false\n */\n clearBtnShow?: boolean;\n /**\n * 是否展示输入框\n * @type {boolean}\n * @default true\n */\n inputShow?: boolean;\n /**\n * 打字机效果速度(单位:毫秒)\n * @type {number}\n * @default 60\n * @version 1.0.0\n */\n textSpeed?: number;\n}\n\n/**\n * Provider config 整体配置结构\n */\nexport interface XAdkProviderConfig {\n session?: {\n showSessionList?: boolean;\n };\n /**\n * 初始化后是否默认展示第一条会话内容\n * @type {boolean}\n * @default false\n */\n showFirstSession?: boolean;\n allowUpload?: boolean;\n appNo?: string;\n chatProps?: ChatConfig;\n debug?: boolean;\n /**\n * 是否展示点赞/点踩按钮\n * @default true\n */\n showFeedback?: boolean;\n}\n\n/**\n * XAdkProvider Props\n */\nexport interface XAdkProviderProps {\n /**\n * AI 服务基础地址\n */\n url: string;\n /**\n * 认证 token\n */\n token: string;\n /**\n * 组件功能配置\n */\n config?: XAdkProviderConfig;\n /**\n * Provider 唯一标识\n */\n providerId?: string;\n /**\n * 消息成功回调\n */\n onSuccess?: (success: any) => void;\n /**\n * 流式消息回调\n */\n onStream?: (data: Event) => void;\n /**\n * 错误回调\n */\n onError?: (err: any) => void;\n /**\n * 每条消息回调\n */\n onMessage?: (content: string, data: IMessage) => void;\n /**\n * 事件回调\n */\n onEvent?: (event: handleEvent) => void;\n /**\n * React 子元素 - 支持 Compound Components\n */\n children?: ReactNode;\n}\n\n// XAiSDKProps 继承 XAdkProviderProps\nexport interface XAdkSDKProps extends XAdkProviderProps {\n /**\n * 主题类型\n * @type {ThemeType}\n * @default 'default'\n * @version 1.0.0\n */\n theme?: ThemeType;\n\n /**\n * 组件属性配置\n * @type {object}\n * @default undefined\n * @version 1.0.0\n */\n componentProps?: {\n /**\n * 组件ID\n * @type {string}\n * @default undefined\n * @version 1.0.0\n */\n id?: string;\n /** 支持任意 CSS 属性 */\n [key: string]: any;\n };\n}\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCO,IAAK,YAAL,kBAAKA,eAAL;AAEL,EAAAA,WAAA,oBAAiB;AAEjB,EAAAA,WAAA,oBAAiB;AAJP,SAAAA;AAAA,GAAA;",
6
6
  "names": ["EventCode"]
7
7
  }
@@ -49,6 +49,14 @@ var mockMessages = [{
49
49
  role: "bot",
50
50
  text: "React Hooks \u662F React 16.8 \u5F15\u5165\u7684\u65B0\u7279\u6027,\u5B83\u8BA9\u4F60\u5728\u4E0D\u7F16\u5199 class \u7684\u60C5\u51B5\u4E0B\u4F7F\u7528 state \u548C\u5176\u4ED6 React \u7279\u6027\u3002\n\n## \u5E38\u7528\u7684 Hooks\n\n### 1. useState\n\u7528\u4E8E\u5728\u51FD\u6570\u7EC4\u4EF6\u4E2D\u6DFB\u52A0\u72B6\u6001:\n\n```jsx\nconst [count, setCount] = useState(0);\n```\n\n### 2. useEffect\n\u7528\u4E8E\u5904\u7406\u526F\u4F5C\u7528:\n\n```jsx\nuseEffect(() => {\n document.title = `Count: ${count}`;\n}, [count]);\n```\n\n### 3. useContext\n\u7528\u4E8E\u8BBF\u95EE Context:\n\n```jsx\nconst theme = useContext(ThemeContext);\n```\n\n## \u4F18\u52BF\n\n- \u2705 \u4EE3\u7801\u66F4\u7B80\u6D01\n- \u2705 \u903B\u8F91\u590D\u7528\u66F4\u5BB9\u6613\n- \u2705 \u907F\u514D this \u76F8\u5173\u95EE\u9898\n- \u2705 \u66F4\u597D\u7684\u4EE3\u7801\u7EC4\u7EC7",
51
51
  invocationId: "inv-2"
52
+ }, {
53
+ id: "5",
54
+ role: "user",
55
+ text: "来一段富文本"
56
+ }, {
57
+ id: "6",
58
+ role: "bot",
59
+ text: "# 我是标题\n\n我是正文\n\n**我是加粗**\n\n*我是斜体*\n\n<u>我是下划线</u>\n\n- 我是无序列表\n \n- 1\n \n- 2\n \n\n1. 我是有序列表\n \n2. 1\n \n3. 2\n \n\n> 我是引用\n\n[我是链接](https://www.baidu.com)\n\n```\n我是代码库\n```"
52
60
  }];
53
61
 
54
62
  // ============================================
@@ -1 +1 @@
1
- {"version":3,"names":["React","useEffect","useState","Button","Space","XAdkChatbot","jsx","_jsx","jsxs","_jsxs","meta","title","component","parameters","layout","docs","description","tags","argTypes","loading","control","showFnCallDetail","mockMessages","id","role","text","invocationId","基础用法","render","_useState","_useState2","_slicedToArray","messages","setMessages","_useState3","_useState4","setLoading","userMsg","Date","now","toString","fileData","displayName","fileUri","mimeType","prev","concat","_toConsumableArray","setTimeout","botMsg","style","width","height","padding","border","borderRadius","overflow","children","initialized","开场白和建议","_useState5","_useState6","_useState7","_useState8","suggestions","setSuggestions","prologue","handleSuggest","onSuggest","流式输出","_useState9","_useState10","_useState11","_useState12","handleStart","fullText","currentText","index","interval","setInterval","length","newMessages","_objectSpread","clearInterval","marginBottom","type","onClick","disabled","onStop","自定义Footer","_useState13","_useState14","_useState15","Set","_useState16","likedMessages","setLikedMessages","handleLike","messageId","newSet","has","delete","add","customFooter","data","message","isLastBotMsg","isLiked","size","actions","函数调用","messagesWithFunctionCall","functionCall","name","args","city","date","思维链","messagesWithThought","thought","代码高亮","messagesWithCode","多轮对话","multiRoundMessages"],"sources":["../../../../src/components/XAdkChatbot/XAdkChatbot.stories.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { Button, Space } from \"antd\";\nimport XAdkChatbot from \"./index\";\nimport type { IMessage } from \"@/types\";\n\nconst meta: Meta<typeof XAdkChatbot> = {\n title: \"AI组件/XAdkChatbot 聊天消息组件\",\n component: XAdkChatbot,\n parameters: {\n layout: \"padded\",\n docs: {\n description: {\n component: `\n\n独立的聊天消息显示组件,用于渲染消息列表和建议问题。\n\n## 核心功能\n\n- 📝 **消息渲染**: 支持文本、Markdown、代码块、函数调用等\n- 💭 **思维链**: 支持显示 AI 推理过程\n- 🎯 **建议问题**: 显示和点击建议问题\n- 📌 **开场白**: 支持显示欢迎消息\n- 🔄 **加载状态**: 实时显示 AI 生成状态\n- 🎨 **自定义渲染**: 支持自定义消息底部内容\n\n## Props\n\n| 属性 | 类型 | 默认值 | 说明 |\n|------|------|--------|------|\n| messages | IMessage[] | [] | 消息列表 |\n| loading | boolean | false | 是否正在加载 |\n| prologue | string | - | 开场白 |\n| suggestions | string[] | [] | 建议问题 |\n| showFnCallDetail | boolean | false | 显示函数调用详情 |\n| footer | (msg) => ReactNode | - | 自定义消息底部 |\n| onSubmit | (content) => void | - | 发送消息回调 |\n| onStop | () => void | - | 停止生成回调 |\n| onClear | () => void | - | 清空消息回调 |\n| onSuggest | (text) => void | - | 点击建议回调 |\n| onConfirm | (fnCall, confirmed) => void | - | 确认函数调用 |\n `,\n },\n },\n },\n tags: [\"autodocs\"],\n argTypes: {\n loading: {\n description: \"是否正在加载(AI 生成中)\",\n control: \"boolean\",\n },\n showFnCallDetail: {\n description: \"是否显示函数调用详情\",\n control: \"boolean\",\n },\n },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n// Mock 消息数据\nconst mockMessages: IMessage[] = [\n {\n id: \"1\",\n role: \"user\",\n text: \"你好\",\n },\n {\n id: \"2\",\n role: \"bot\",\n text: \"你好!我是 AI 助手,很高兴为你服务。有什么我可以帮助你的吗?\",\n invocationId: \"inv-1\",\n },\n {\n id: \"3\",\n role: \"user\",\n text: \"介绍一下 React Hooks\",\n },\n {\n id: \"4\",\n role: \"bot\",\n text: `React Hooks 是 React 16.8 引入的新特性,它让你在不编写 class 的情况下使用 state 和其他 React 特性。\n\n## 常用的 Hooks\n\n### 1. useState\n用于在函数组件中添加状态:\n\n\\`\\`\\`jsx\nconst [count, setCount] = useState(0);\n\\`\\`\\`\n\n### 2. useEffect\n用于处理副作用:\n\n\\`\\`\\`jsx\nuseEffect(() => {\n document.title = \\`Count: \\${count}\\`;\n}, [count]);\n\\`\\`\\`\n\n### 3. useContext\n用于访问 Context:\n\n\\`\\`\\`jsx\nconst theme = useContext(ThemeContext);\n\\`\\`\\`\n\n## 优势\n\n- ✅ 代码更简洁\n- ✅ 逻辑复用更容易\n- ✅ 避免 this 相关问题\n- ✅ 更好的代码组织`,\n invocationId: \"inv-2\",\n },\n];\n\n// ============================================\n// 示例 1: 基础用法\n// ============================================\nexport const 基础用法: Story = {\n render: () => {\n const [messages, setMessages] = useState<IMessage[]>(mockMessages);\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {\n const userMsg: IMessage = {\n id: Date.now().toString(),\n role: \"user\",\n text: \"你好\",\n fileData: [\n {\n displayName: \"06f26c566fe4a3b5eaad678d0d270c97_origin.jpg\",\n fileUri:\n \"https://ai-platform-test.oss-cn-hangzhou.aliyuncs.com/ZABX/vidfnxlkpzxoa.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20260317T083458Z&X-Amz-SignedHeaders=host&X-Amz-Credential=LTAI5tSfMvkvWhU43Ev1cFJo%2F20260317%2Foss-cn-hangzhou%2Fs3%2Faws4_request&X-Amz-Expires=518400&X-Amz-Signature=14439e184614d76f1ca19437f76496a6d24a8aa537a29ebf61fb2af9d3f9b285\",\n mimeType: \"image/jpeg\",\n },\n {\n displayName: \"06f26c566fe4a3b5eaad678d0d270c98_origin.jpg\",\n fileUri:\n \"https://ai-platform-test.oss-cn-hangzhou.aliyuncs.com/ZABX/vidfnxlkpzxoa.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20260317T083458Z&X-Amz-SignedHeaders=host&X-Amz-Credential=LTAI5tSfMvkvWhU43Ev1cFJo%2F20260317%2Foss-cn-hangzhou%2Fs3%2Faws4_request&X-Amz-Expires=518400&X-Amz-Signature=14439e184614d76f1ca19437f76496a6d24a8aa537a29ebf61fb2af9d3f9b285\",\n mimeType: \"image/jpeg\",\n },\n ],\n };\n setMessages((prev) => [...prev, userMsg]);\n\n setLoading(true);\n setTimeout(() => {\n const botMsg: IMessage = {\n id: (Date.now() + 1).toString(),\n role: \"bot\",\n text: `这是对 \"用户\" 的模拟回复。`,\n invocationId: `inv-${Date.now()}`,\n };\n setMessages((prev) => [...prev, botMsg]);\n setLoading(false);\n }, 1000);\n }, []);\n\n return (\n <div\n style={{\n width: 700,\n height: \"600px\",\n padding: \"20px\",\n border: \"1px solid #f0f0f0\",\n borderRadius: \"8px\",\n overflow: \"hidden\",\n }}\n >\n <XAdkChatbot\n messages={messages}\n loading={loading}\n initialized={true}\n style={{ width: \"670px\" }}\n />\n </div>\n );\n },\n};\n\n// ============================================\n// 示例 2: 开场白和建议问题\n// ============================================\nexport const 开场白和建议: Story = {\n render: () => {\n const [messages, setMessages] = useState<IMessage[]>([]);\n const [suggestions, setSuggestions] = useState([\n \"什么是 React Hooks?\",\n \"如何使用 useState?\",\n \"useEffect 的作用是什么?\",\n ]);\n\n const prologue = \"你好!我是 AI 助手,专注于 React 开发相关的问题。\";\n\n const handleSuggest = (text: string) => {\n const userMsg: IMessage = {\n id: Date.now().toString(),\n role: \"user\",\n text,\n };\n setMessages([userMsg]);\n setSuggestions([]);\n\n setTimeout(() => {\n const botMsg: IMessage = {\n id: (Date.now() + 1).toString(),\n role: \"bot\",\n text: `这是对 \"${text}\" 的回答...`,\n invocationId: `inv-${Date.now()}`,\n };\n setMessages((prev) => [...prev, botMsg]);\n }, 1000);\n };\n\n return (\n <div\n style={{\n width: 700,\n height: \"600px\",\n border: \"1px solid #f0f0f0\",\n borderRadius: \"8px\",\n overflow: \"hidden\",\n }}\n >\n <XAdkChatbot\n messages={messages}\n loading={false}\n initialized={true}\n prologue={prologue}\n suggestions={suggestions}\n onSuggest={handleSuggest}\n />\n </div>\n );\n },\n};\n\n// ============================================\n// 示例 3: 流式输出\n// ============================================\nexport const 流式输出: Story = {\n render: () => {\n const [messages, setMessages] = useState<IMessage[]>([\n {\n id: \"1\",\n role: \"user\",\n text: \"给我讲一个故事\",\n },\n ]);\n const [loading, setLoading] = useState(false);\n\n const handleStart = () => {\n setLoading(true);\n\n const fullText =\n \"从前有座山,山里有座庙,庙里有个老和尚在给小和尚讲故事。讲什么呢?从前有座山,山里有座庙...\";\n let currentText = \"\";\n let index = 0;\n\n const botMsg: IMessage = {\n id: \"2\",\n role: \"bot\",\n text: \"\",\n invocationId: \"inv-1\",\n };\n\n setMessages((prev) => [...prev, botMsg]);\n\n const interval = setInterval(() => {\n if (index < fullText.length) {\n currentText += fullText[index];\n setMessages((prev) => {\n const newMessages = [...prev];\n newMessages[newMessages.length - 1] = {\n ...botMsg,\n text: currentText,\n };\n return newMessages;\n });\n index++;\n } else {\n clearInterval(interval);\n setLoading(false);\n }\n }, 50);\n };\n\n return (\n <div style={{ width: 700 }}>\n <div style={{ marginBottom: \"16px\" }}>\n <Button type=\"primary\" onClick={handleStart} disabled={loading}>\n 开始流式输出演示\n </Button>\n </div>\n <div\n style={{\n height: \"550px\",\n border: \"1px solid #f0f0f0\",\n borderRadius: \"8px\",\n overflow: \"hidden\",\n }}\n >\n <XAdkChatbot\n messages={messages}\n loading={loading}\n initialized={true}\n onStop={() => setLoading(false)}\n />\n </div>\n </div>\n );\n },\n};\n\n// ============================================\n// 示例 4: 自定义消息 Footer\n// ============================================\nexport const 自定义Footer: Story = {\n render: () => {\n const [messages] = useState<IMessage[]>(mockMessages);\n const [likedMessages, setLikedMessages] = useState<Set<string>>(new Set());\n\n const handleLike = (messageId: string) => {\n setLikedMessages((prev) => {\n const newSet = new Set(prev);\n if (newSet.has(messageId)) {\n newSet.delete(messageId);\n } else {\n newSet.add(messageId);\n }\n return newSet;\n });\n };\n\n const customFooter = (data: any) => {\n const { message, isLastBotMsg } = data;\n\n if (!isLastBotMsg) return null;\n\n const isLiked = likedMessages.has(message.id);\n\n return (\n <div style={{ padding: \"8px 0\" }}>\n <Space size=\"small\">\n <Button\n size=\"small\"\n type={isLiked ? \"primary\" : \"text\"}\n onClick={() => handleLike(message.id)}\n >\n {isLiked ? \"👍 已赞\" : \"👍 赞\"}\n </Button>\n <Button size=\"small\" type=\"text\">\n 👎 踩\n </Button>\n <Button size=\"small\" type=\"text\">\n 📋 复制\n </Button>\n <Button size=\"small\" type=\"text\">\n 🔄 重新生成\n </Button>\n </Space>\n </div>\n );\n };\n\n return (\n <div\n style={{\n width: 700,\n height: \"600px\",\n border: \"1px solid #f0f0f0\",\n borderRadius: \"8px\",\n overflow: \"hidden\",\n }}\n >\n <XAdkChatbot\n messages={messages}\n loading={false}\n initialized={true}\n actions={customFooter}\n />\n </div>\n );\n },\n};\n\n// ============================================\n// 示例 5: 函数调用\n// ============================================\nexport const 函数调用: Story = {\n render: () => {\n const messagesWithFunctionCall: IMessage[] = [\n {\n id: \"1\",\n role: \"user\",\n text: \"今天北京的天气怎么样?\",\n },\n {\n id: \"2\",\n role: \"bot\",\n functionCall: {\n id: \"call-1\",\n name: \"get_weather\",\n args: {\n city: \"北京\",\n date: \"2024-03-05\",\n },\n },\n invocationId: \"inv-1\",\n },\n {\n id: \"3\",\n role: \"bot\",\n text: \"根据天气查询,今天北京的天气是晴天,温度 15-25°C,空气质量良好,适合户外活动。\",\n invocationId: \"inv-1\",\n },\n ];\n\n return (\n <div\n style={{\n width: 700,\n height: \"600px\",\n border: \"1px solid #f0f0f0\",\n borderRadius: \"8px\",\n overflow: \"hidden\",\n }}\n >\n <XAdkChatbot\n messages={messagesWithFunctionCall}\n loading={false}\n initialized={true}\n showFnCallDetail={true}\n />\n </div>\n );\n },\n};\n\n// ============================================\n// 示例 6: 思维链\n// ============================================\nexport const 思维链: Story = {\n render: () => {\n const messagesWithThought: IMessage[] = [\n {\n id: \"1\",\n role: \"user\",\n text: \"帮我分析一下这个问题\",\n },\n {\n id: \"2\",\n role: \"bot\",\n text: \"让我分析一下这个问题...\",\n thought: true,\n invocationId: \"inv-1\",\n },\n {\n id: \"3\",\n role: \"bot\",\n text: \"首先,我需要理解问题的核心...\",\n thought: true,\n invocationId: \"inv-1\",\n },\n {\n id: \"4\",\n role: \"bot\",\n text: \"根据分析,我的结论是...(这是最终回答)\",\n thought: false,\n invocationId: \"inv-1\",\n },\n ];\n\n return (\n <div\n style={{\n width: 700,\n height: \"600px\",\n border: \"1px solid #f0f0f0\",\n borderRadius: \"8px\",\n overflow: \"hidden\",\n }}\n >\n <XAdkChatbot\n messages={messagesWithThought}\n loading={false}\n initialized={true}\n />\n </div>\n );\n },\n};\n\n// ============================================\n// 示例 7: 代码高亮\n// ============================================\nexport const 代码高亮: Story = {\n render: () => {\n const messagesWithCode: IMessage[] = [\n {\n id: \"1\",\n role: \"user\",\n text: \"写一个 React 组件\",\n },\n {\n id: \"2\",\n role: \"bot\",\n text: `这是一个简单的 React 计数器组件:\n\n\\`\\`\\`jsx\nimport React, { useState } from 'react';\n\nfunction Counter() {\n const [count, setCount] = useState(0);\n\n return (\n <div>\n <h1>Count: {count}</h1>\n <button onClick={() => setCount(count + 1)}>\n +1\n </button>\n <button onClick={() => setCount(count - 1)}>\n -1\n </button>\n </div>\n );\n}\n\nexport default Counter;\n\\`\\`\\`\n\n这个组件使用了 \\`useState\\` Hook 来管理计数器状态。`,\n invocationId: \"inv-1\",\n },\n ];\n\n return (\n <div\n style={{\n width: 700,\n height: \"600px\",\n border: \"1px solid #f0f0f0\",\n borderRadius: \"8px\",\n overflow: \"hidden\",\n }}\n >\n <XAdkChatbot\n messages={messagesWithCode}\n loading={false}\n initialized={true}\n />\n </div>\n );\n },\n};\n\n// ============================================\n// 示例 8: 多轮对话\n// ============================================\nexport const 多轮对话: Story = {\n render: () => {\n const multiRoundMessages: IMessage[] = [\n {\n id: \"1\",\n role: \"user\",\n text: \"React 是什么?\",\n },\n {\n id: \"2\",\n role: \"bot\",\n text: \"React 是一个用于构建用户界面的 JavaScript 库。\",\n invocationId: \"inv-1\",\n },\n {\n id: \"3\",\n role: \"user\",\n text: \"它有什么特点?\",\n },\n {\n id: \"4\",\n role: \"bot\",\n text: \"React 的主要特点包括:\\n1. 组件化\\n2. 虚拟 DOM\\n3. 单向数据流\\n4. JSX 语法\",\n invocationId: \"inv-2\",\n },\n {\n id: \"5\",\n role: \"user\",\n text: \"什么是虚拟 DOM?\",\n },\n {\n id: \"6\",\n role: \"bot\",\n text: \"虚拟 DOM 是真实 DOM 的 JavaScript 对象表示,React 通过对比虚拟 DOM 的变化来高效更新真实 DOM。\",\n invocationId: \"inv-3\",\n },\n ];\n\n return (\n <div\n style={{\n width: 700,\n height: \"600px\",\n border: \"1px solid #f0f0f0\",\n borderRadius: \"8px\",\n overflow: \"hidden\",\n }}\n >\n <XAdkChatbot\n messages={multiRoundMessages}\n loading={false}\n initialized={true}\n />\n </div>\n );\n },\n};\n"],"mappings":"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"}
1
+ {"version":3,"names":["React","useEffect","useState","Button","Space","XAdkChatbot","jsx","_jsx","jsxs","_jsxs","meta","title","component","parameters","layout","docs","description","tags","argTypes","loading","control","showFnCallDetail","mockMessages","id","role","text","invocationId","基础用法","render","_useState","_useState2","_slicedToArray","messages","setMessages","_useState3","_useState4","setLoading","userMsg","Date","now","toString","fileData","displayName","fileUri","mimeType","prev","concat","_toConsumableArray","setTimeout","botMsg","style","width","height","padding","border","borderRadius","overflow","children","initialized","开场白和建议","_useState5","_useState6","_useState7","_useState8","suggestions","setSuggestions","prologue","handleSuggest","onSuggest","流式输出","_useState9","_useState10","_useState11","_useState12","handleStart","fullText","currentText","index","interval","setInterval","length","newMessages","_objectSpread","clearInterval","marginBottom","type","onClick","disabled","onStop","自定义Footer","_useState13","_useState14","_useState15","Set","_useState16","likedMessages","setLikedMessages","handleLike","messageId","newSet","has","delete","add","customFooter","data","message","isLastBotMsg","isLiked","size","actions","函数调用","messagesWithFunctionCall","functionCall","name","args","city","date","思维链","messagesWithThought","thought","代码高亮","messagesWithCode","多轮对话","multiRoundMessages"],"sources":["../../../../src/components/XAdkChatbot/XAdkChatbot.stories.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { Button, Space } from \"antd\";\nimport XAdkChatbot from \"./index\";\nimport type { IMessage } from \"@/types\";\n\nconst meta: Meta<typeof XAdkChatbot> = {\n title: \"AI组件/XAdkChatbot 聊天消息组件\",\n component: XAdkChatbot,\n parameters: {\n layout: \"padded\",\n docs: {\n description: {\n component: `\n\n独立的聊天消息显示组件,用于渲染消息列表和建议问题。\n\n## 核心功能\n\n- 📝 **消息渲染**: 支持文本、Markdown、代码块、函数调用等\n- 💭 **思维链**: 支持显示 AI 推理过程\n- 🎯 **建议问题**: 显示和点击建议问题\n- 📌 **开场白**: 支持显示欢迎消息\n- 🔄 **加载状态**: 实时显示 AI 生成状态\n- 🎨 **自定义渲染**: 支持自定义消息底部内容\n\n## Props\n\n| 属性 | 类型 | 默认值 | 说明 |\n|------|------|--------|------|\n| messages | IMessage[] | [] | 消息列表 |\n| loading | boolean | false | 是否正在加载 |\n| prologue | string | - | 开场白 |\n| suggestions | string[] | [] | 建议问题 |\n| showFnCallDetail | boolean | false | 显示函数调用详情 |\n| footer | (msg) => ReactNode | - | 自定义消息底部 |\n| onSubmit | (content) => void | - | 发送消息回调 |\n| onStop | () => void | - | 停止生成回调 |\n| onClear | () => void | - | 清空消息回调 |\n| onSuggest | (text) => void | - | 点击建议回调 |\n| onConfirm | (fnCall, confirmed) => void | - | 确认函数调用 |\n `,\n },\n },\n },\n tags: [\"autodocs\"],\n argTypes: {\n loading: {\n description: \"是否正在加载(AI 生成中)\",\n control: \"boolean\",\n },\n showFnCallDetail: {\n description: \"是否显示函数调用详情\",\n control: \"boolean\",\n },\n },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n// Mock 消息数据\nconst mockMessages: IMessage[] = [\n {\n id: \"1\",\n role: \"user\",\n text: \"你好\",\n },\n {\n id: \"2\",\n role: \"bot\",\n text: \"你好!我是 AI 助手,很高兴为你服务。有什么我可以帮助你的吗?\",\n invocationId: \"inv-1\",\n },\n {\n id: \"3\",\n role: \"user\",\n text: \"介绍一下 React Hooks\",\n },\n {\n id: \"4\",\n role: \"bot\",\n text: `React Hooks 是 React 16.8 引入的新特性,它让你在不编写 class 的情况下使用 state 和其他 React 特性。\n\n## 常用的 Hooks\n\n### 1. useState\n用于在函数组件中添加状态:\n\n\\`\\`\\`jsx\nconst [count, setCount] = useState(0);\n\\`\\`\\`\n\n### 2. useEffect\n用于处理副作用:\n\n\\`\\`\\`jsx\nuseEffect(() => {\n document.title = \\`Count: \\${count}\\`;\n}, [count]);\n\\`\\`\\`\n\n### 3. useContext\n用于访问 Context:\n\n\\`\\`\\`jsx\nconst theme = useContext(ThemeContext);\n\\`\\`\\`\n\n## 优势\n\n- ✅ 代码更简洁\n- ✅ 逻辑复用更容易\n- ✅ 避免 this 相关问题\n- ✅ 更好的代码组织`,\n invocationId: \"inv-2\",\n },\n {\n id: \"5\",\n role: \"user\",\n text: \"来一段富文本\",\n },\n {\n id: \"6\",\n role: \"bot\",\n text: \"# 我是标题\\n\\n我是正文\\n\\n**我是加粗**\\n\\n*我是斜体*\\n\\n<u>我是下划线</u>\\n\\n- 我是无序列表\\n \\n- 1\\n \\n- 2\\n \\n\\n1. 我是有序列表\\n \\n2. 1\\n \\n3. 2\\n \\n\\n> 我是引用\\n\\n[我是链接](https://www.baidu.com)\\n\\n```\\n我是代码库\\n```\",\n },\n];\n\n// ============================================\n// 示例 1: 基础用法\n// ============================================\nexport const 基础用法: Story = {\n render: () => {\n const [messages, setMessages] = useState<IMessage[]>(mockMessages);\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {\n const userMsg: IMessage = {\n id: Date.now().toString(),\n role: \"user\",\n text: \"你好\",\n fileData: [\n {\n displayName: \"06f26c566fe4a3b5eaad678d0d270c97_origin.jpg\",\n fileUri:\n \"https://ai-platform-test.oss-cn-hangzhou.aliyuncs.com/ZABX/vidfnxlkpzxoa.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20260317T083458Z&X-Amz-SignedHeaders=host&X-Amz-Credential=LTAI5tSfMvkvWhU43Ev1cFJo%2F20260317%2Foss-cn-hangzhou%2Fs3%2Faws4_request&X-Amz-Expires=518400&X-Amz-Signature=14439e184614d76f1ca19437f76496a6d24a8aa537a29ebf61fb2af9d3f9b285\",\n mimeType: \"image/jpeg\",\n },\n {\n displayName: \"06f26c566fe4a3b5eaad678d0d270c98_origin.jpg\",\n fileUri:\n \"https://ai-platform-test.oss-cn-hangzhou.aliyuncs.com/ZABX/vidfnxlkpzxoa.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20260317T083458Z&X-Amz-SignedHeaders=host&X-Amz-Credential=LTAI5tSfMvkvWhU43Ev1cFJo%2F20260317%2Foss-cn-hangzhou%2Fs3%2Faws4_request&X-Amz-Expires=518400&X-Amz-Signature=14439e184614d76f1ca19437f76496a6d24a8aa537a29ebf61fb2af9d3f9b285\",\n mimeType: \"image/jpeg\",\n },\n ],\n };\n setMessages((prev) => [...prev, userMsg]);\n\n setLoading(true);\n setTimeout(() => {\n const botMsg: IMessage = {\n id: (Date.now() + 1).toString(),\n role: \"bot\",\n text: `这是对 \"用户\" 的模拟回复。`,\n invocationId: `inv-${Date.now()}`,\n };\n setMessages((prev) => [...prev, botMsg]);\n setLoading(false);\n }, 1000);\n }, []);\n\n return (\n <div\n style={{\n width: 700,\n height: \"600px\",\n padding: \"20px\",\n border: \"1px solid #f0f0f0\",\n borderRadius: \"8px\",\n overflow: \"hidden\",\n }}\n >\n <XAdkChatbot\n messages={messages}\n loading={loading}\n initialized={true}\n style={{ width: \"670px\" }}\n />\n </div>\n );\n },\n};\n\n// ============================================\n// 示例 2: 开场白和建议问题\n// ============================================\nexport const 开场白和建议: Story = {\n render: () => {\n const [messages, setMessages] = useState<IMessage[]>([]);\n const [suggestions, setSuggestions] = useState([\n \"什么是 React Hooks?\",\n \"如何使用 useState?\",\n \"useEffect 的作用是什么?\",\n ]);\n\n const prologue = \"你好!我是 AI 助手,专注于 React 开发相关的问题。\";\n\n const handleSuggest = (text: string) => {\n const userMsg: IMessage = {\n id: Date.now().toString(),\n role: \"user\",\n text,\n };\n setMessages([userMsg]);\n setSuggestions([]);\n\n setTimeout(() => {\n const botMsg: IMessage = {\n id: (Date.now() + 1).toString(),\n role: \"bot\",\n text: `这是对 \"${text}\" 的回答...`,\n invocationId: `inv-${Date.now()}`,\n };\n setMessages((prev) => [...prev, botMsg]);\n }, 1000);\n };\n\n return (\n <div\n style={{\n width: 700,\n height: \"600px\",\n border: \"1px solid #f0f0f0\",\n borderRadius: \"8px\",\n overflow: \"hidden\",\n }}\n >\n <XAdkChatbot\n messages={messages}\n loading={false}\n initialized={true}\n prologue={prologue}\n suggestions={suggestions}\n onSuggest={handleSuggest}\n />\n </div>\n );\n },\n};\n\n// ============================================\n// 示例 3: 流式输出\n// ============================================\nexport const 流式输出: Story = {\n render: () => {\n const [messages, setMessages] = useState<IMessage[]>([\n {\n id: \"1\",\n role: \"user\",\n text: \"给我讲一个故事\",\n },\n ]);\n const [loading, setLoading] = useState(false);\n\n const handleStart = () => {\n setLoading(true);\n\n const fullText =\n \"从前有座山,山里有座庙,庙里有个老和尚在给小和尚讲故事。讲什么呢?从前有座山,山里有座庙...\";\n let currentText = \"\";\n let index = 0;\n\n const botMsg: IMessage = {\n id: \"2\",\n role: \"bot\",\n text: \"\",\n invocationId: \"inv-1\",\n };\n\n setMessages((prev) => [...prev, botMsg]);\n\n const interval = setInterval(() => {\n if (index < fullText.length) {\n currentText += fullText[index];\n setMessages((prev) => {\n const newMessages = [...prev];\n newMessages[newMessages.length - 1] = {\n ...botMsg,\n text: currentText,\n };\n return newMessages;\n });\n index++;\n } else {\n clearInterval(interval);\n setLoading(false);\n }\n }, 50);\n };\n\n return (\n <div style={{ width: 700 }}>\n <div style={{ marginBottom: \"16px\" }}>\n <Button type=\"primary\" onClick={handleStart} disabled={loading}>\n 开始流式输出演示\n </Button>\n </div>\n <div\n style={{\n height: \"550px\",\n border: \"1px solid #f0f0f0\",\n borderRadius: \"8px\",\n overflow: \"hidden\",\n }}\n >\n <XAdkChatbot\n messages={messages}\n loading={loading}\n initialized={true}\n onStop={() => setLoading(false)}\n />\n </div>\n </div>\n );\n },\n};\n\n// ============================================\n// 示例 4: 自定义消息 Footer\n// ============================================\nexport const 自定义Footer: Story = {\n render: () => {\n const [messages] = useState<IMessage[]>(mockMessages);\n const [likedMessages, setLikedMessages] = useState<Set<string>>(new Set());\n\n const handleLike = (messageId: string) => {\n setLikedMessages((prev) => {\n const newSet = new Set(prev);\n if (newSet.has(messageId)) {\n newSet.delete(messageId);\n } else {\n newSet.add(messageId);\n }\n return newSet;\n });\n };\n\n const customFooter = (data: any) => {\n const { message, isLastBotMsg } = data;\n\n if (!isLastBotMsg) return null;\n\n const isLiked = likedMessages.has(message.id);\n\n return (\n <div style={{ padding: \"8px 0\" }}>\n <Space size=\"small\">\n <Button\n size=\"small\"\n type={isLiked ? \"primary\" : \"text\"}\n onClick={() => handleLike(message.id)}\n >\n {isLiked ? \"👍 已赞\" : \"👍 赞\"}\n </Button>\n <Button size=\"small\" type=\"text\">\n 👎 踩\n </Button>\n <Button size=\"small\" type=\"text\">\n 📋 复制\n </Button>\n <Button size=\"small\" type=\"text\">\n 🔄 重新生成\n </Button>\n </Space>\n </div>\n );\n };\n\n return (\n <div\n style={{\n width: 700,\n height: \"600px\",\n border: \"1px solid #f0f0f0\",\n borderRadius: \"8px\",\n overflow: \"hidden\",\n }}\n >\n <XAdkChatbot\n messages={messages}\n loading={false}\n initialized={true}\n actions={customFooter}\n />\n </div>\n );\n },\n};\n\n// ============================================\n// 示例 5: 函数调用\n// ============================================\nexport const 函数调用: Story = {\n render: () => {\n const messagesWithFunctionCall: IMessage[] = [\n {\n id: \"1\",\n role: \"user\",\n text: \"今天北京的天气怎么样?\",\n },\n {\n id: \"2\",\n role: \"bot\",\n functionCall: {\n id: \"call-1\",\n name: \"get_weather\",\n args: {\n city: \"北京\",\n date: \"2024-03-05\",\n },\n },\n invocationId: \"inv-1\",\n },\n {\n id: \"3\",\n role: \"bot\",\n text: \"根据天气查询,今天北京的天气是晴天,温度 15-25°C,空气质量良好,适合户外活动。\",\n invocationId: \"inv-1\",\n },\n ];\n\n return (\n <div\n style={{\n width: 700,\n height: \"600px\",\n border: \"1px solid #f0f0f0\",\n borderRadius: \"8px\",\n overflow: \"hidden\",\n }}\n >\n <XAdkChatbot\n messages={messagesWithFunctionCall}\n loading={false}\n initialized={true}\n showFnCallDetail={true}\n />\n </div>\n );\n },\n};\n\n// ============================================\n// 示例 6: 思维链\n// ============================================\nexport const 思维链: Story = {\n render: () => {\n const messagesWithThought: IMessage[] = [\n {\n id: \"1\",\n role: \"user\",\n text: \"帮我分析一下这个问题\",\n },\n {\n id: \"2\",\n role: \"bot\",\n text: \"让我分析一下这个问题...\",\n thought: true,\n invocationId: \"inv-1\",\n },\n {\n id: \"3\",\n role: \"bot\",\n text: \"首先,我需要理解问题的核心...\",\n thought: true,\n invocationId: \"inv-1\",\n },\n {\n id: \"4\",\n role: \"bot\",\n text: \"根据分析,我的结论是...(这是最终回答)\",\n thought: false,\n invocationId: \"inv-1\",\n },\n ];\n\n return (\n <div\n style={{\n width: 700,\n height: \"600px\",\n border: \"1px solid #f0f0f0\",\n borderRadius: \"8px\",\n overflow: \"hidden\",\n }}\n >\n <XAdkChatbot\n messages={messagesWithThought}\n loading={false}\n initialized={true}\n />\n </div>\n );\n },\n};\n\n// ============================================\n// 示例 7: 代码高亮\n// ============================================\nexport const 代码高亮: Story = {\n render: () => {\n const messagesWithCode: IMessage[] = [\n {\n id: \"1\",\n role: \"user\",\n text: \"写一个 React 组件\",\n },\n {\n id: \"2\",\n role: \"bot\",\n text: `这是一个简单的 React 计数器组件:\n\n\\`\\`\\`jsx\nimport React, { useState } from 'react';\n\nfunction Counter() {\n const [count, setCount] = useState(0);\n\n return (\n <div>\n <h1>Count: {count}</h1>\n <button onClick={() => setCount(count + 1)}>\n +1\n </button>\n <button onClick={() => setCount(count - 1)}>\n -1\n </button>\n </div>\n );\n}\n\nexport default Counter;\n\\`\\`\\`\n\n这个组件使用了 \\`useState\\` Hook 来管理计数器状态。`,\n invocationId: \"inv-1\",\n },\n ];\n\n return (\n <div\n style={{\n width: 700,\n height: \"600px\",\n border: \"1px solid #f0f0f0\",\n borderRadius: \"8px\",\n overflow: \"hidden\",\n }}\n >\n <XAdkChatbot\n messages={messagesWithCode}\n loading={false}\n initialized={true}\n />\n </div>\n );\n },\n};\n\n// ============================================\n// 示例 8: 多轮对话\n// ============================================\nexport const 多轮对话: Story = {\n render: () => {\n const multiRoundMessages: IMessage[] = [\n {\n id: \"1\",\n role: \"user\",\n text: \"React 是什么?\",\n },\n {\n id: \"2\",\n role: \"bot\",\n text: \"React 是一个用于构建用户界面的 JavaScript 库。\",\n invocationId: \"inv-1\",\n },\n {\n id: \"3\",\n role: \"user\",\n text: \"它有什么特点?\",\n },\n {\n id: \"4\",\n role: \"bot\",\n text: \"React 的主要特点包括:\\n1. 组件化\\n2. 虚拟 DOM\\n3. 单向数据流\\n4. JSX 语法\",\n invocationId: \"inv-2\",\n },\n {\n id: \"5\",\n role: \"user\",\n text: \"什么是虚拟 DOM?\",\n },\n {\n id: \"6\",\n role: \"bot\",\n text: \"虚拟 DOM 是真实 DOM 的 JavaScript 对象表示,React 通过对比虚拟 DOM 的变化来高效更新真实 DOM。\",\n invocationId: \"inv-3\",\n },\n ];\n\n return (\n <div\n style={{\n width: 700,\n height: \"600px\",\n border: \"1px solid #f0f0f0\",\n borderRadius: \"8px\",\n overflow: \"hidden\",\n }}\n >\n <XAdkChatbot\n messages={multiRoundMessages}\n loading={false}\n initialized={true}\n />\n </div>\n );\n },\n};\n"],"mappings":"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"}
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import "@ant-design/x-markdown/themes/light.css";
2
3
  export interface MarkdownRenderProps {
3
4
  text: string;
4
5
  }
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
2
  import XMarkdown from "@ant-design/x-markdown";
3
+ import "@ant-design/x-markdown/themes/light.css";
3
4
  import { CodeHighlighter } from "@ant-design/x";
4
5
  import { Flex } from "antd";
5
6
  import Latex from "@ant-design/x-markdown/plugins/Latex";
@@ -56,6 +57,7 @@ var MarkdownRender = function MarkdownRender(_ref) {
56
57
  className: styles.markdownHost,
57
58
  children: /*#__PURE__*/_jsx(XMarkdown, {
58
59
  content: markdown,
60
+ className: "x-markdown-light",
59
61
  paragraphTag: "div",
60
62
  config: {
61
63
  extensions: Latex()
@@ -1 +1 @@
1
- {"version":3,"names":["React","XMarkdown","CodeHighlighter","Flex","Latex","useStyles","BarsOutlined","BulbOutlined","ThunderboltOutlined","CheckCircleOutlined","jsx","_jsx","jsxs","_jsxs","CodeComponent","props","_className$match","className","children","lang","match","ThinkComponent","memo","type","titleMap","planning","replanning","reasoning","action","final_answer","iconMap","align","gap","style","color","margin","MarkdownRender","_ref","text","styles","markdown","replaceAll","markdownWrapper","markdownHost","content","paragraphTag","config","extensions","components","tag","code","streaming","enableAnimation","animationConfig","fadeDuration"],"sources":["../../../../../../src/components/XAdkChatbot/components/MarkdownRender/index.tsx"],"sourcesContent":["import React from \"react\";\nimport XMarkdown, { type ComponentProps } from \"@ant-design/x-markdown\";\nimport { CodeHighlighter } from \"@ant-design/x\";\nimport { Flex } from \"antd\";\nimport Latex from \"@ant-design/x-markdown/plugins/Latex\";\nimport { useStyles } from \"./styles\";\nimport {\n BarsOutlined,\n BulbOutlined,\n ThunderboltOutlined,\n CheckCircleOutlined,\n} from \"@ant-design/icons\";\n\nconst CodeComponent: React.FC<ComponentProps> = (props) => {\n const { className, children } = props;\n const lang = className?.match(/language-(\\S+)/)?.[1] || \"\";\n\n if (typeof children !== \"string\") return null;\n return <CodeHighlighter lang={lang}>{children}</CodeHighlighter>;\n};\n\nexport interface MarkdownRenderProps {\n text: string;\n}\n\nconst ThinkComponent = React.memo((props: ComponentProps) => {\n const type = (props.type || \"\") as string;\n const titleMap: Record<string, string> = {\n planning: \"规划\",\n replanning: \"重新规划\",\n reasoning: \"推理\",\n action: \"行动\",\n final_answer: \"最终答案\",\n };\n const iconMap = {\n planning: <BarsOutlined />,\n replanning: <BarsOutlined />,\n reasoning: <BulbOutlined />,\n action: <ThunderboltOutlined />,\n final_answer: <CheckCircleOutlined />,\n };\n\n return (\n <Flex align=\"center\" gap={8} style={{ color: \"#888\", margin: \"4px 0\" }}>\n {type in titleMap && iconMap[type as keyof typeof iconMap]}\n {titleMap[type] && <span>{titleMap[type]}</span>}\n </Flex>\n );\n});\n\nconst MarkdownRender: React.FC<MarkdownRenderProps> = ({ text }) => {\n const styles = useStyles();\n const markdown = text\n .replaceAll(/\\/\\*\\s*PLANNING\\s*\\*\\//g, '<tag type=\"planning\"></tag>')\n .replaceAll(/\\/\\*\\s*REPLANNING\\s*\\*\\//g, '<tag type=\"replanning\"></tag>')\n .replaceAll(/\\/\\*\\s*REASONING\\s*\\*\\//g, '<tag type=\"reasoning\"></tag>')\n .replaceAll(/\\/\\*\\s*ACTION\\s*\\*\\//g, '<tag type=\"action\"></tag>')\n .replaceAll(\n /\\/\\*\\s*FINAL_ANSWER\\s*\\*\\//g,\n '<tag type=\"final_answer\"></tag>',\n );\n\n return (\n <div className={styles.markdownWrapper}>\n <div className={styles.markdownHost}>\n <XMarkdown\n content={markdown}\n paragraphTag=\"div\"\n config={{\n extensions: Latex(),\n }}\n components={{\n tag: ThinkComponent,\n code: CodeComponent,\n }}\n streaming={{\n enableAnimation: true,\n animationConfig: {\n fadeDuration: 400,\n },\n }}\n />\n </div>\n </div>\n );\n};\n\nexport default MarkdownRender;\n"],"mappings":"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"}
1
+ {"version":3,"names":["React","XMarkdown","CodeHighlighter","Flex","Latex","useStyles","BarsOutlined","BulbOutlined","ThunderboltOutlined","CheckCircleOutlined","jsx","_jsx","jsxs","_jsxs","CodeComponent","props","_className$match","className","children","lang","match","ThinkComponent","memo","type","titleMap","planning","replanning","reasoning","action","final_answer","iconMap","align","gap","style","color","margin","MarkdownRender","_ref","text","styles","markdown","replaceAll","markdownWrapper","markdownHost","content","paragraphTag","config","extensions","components","tag","code","streaming","enableAnimation","animationConfig","fadeDuration"],"sources":["../../../../../../src/components/XAdkChatbot/components/MarkdownRender/index.tsx"],"sourcesContent":["import React from \"react\";\nimport XMarkdown, { type ComponentProps } from \"@ant-design/x-markdown\";\nimport \"@ant-design/x-markdown/themes/light.css\";\nimport { CodeHighlighter } from \"@ant-design/x\";\nimport { Flex } from \"antd\";\nimport Latex from \"@ant-design/x-markdown/plugins/Latex\";\nimport { useStyles } from \"./styles\";\nimport {\n BarsOutlined,\n BulbOutlined,\n ThunderboltOutlined,\n CheckCircleOutlined,\n} from \"@ant-design/icons\";\n\nconst CodeComponent: React.FC<ComponentProps> = (props) => {\n const { className, children } = props;\n const lang = className?.match(/language-(\\S+)/)?.[1] || \"\";\n\n if (typeof children !== \"string\") return null;\n return <CodeHighlighter lang={lang}>{children}</CodeHighlighter>;\n};\n\nexport interface MarkdownRenderProps {\n text: string;\n}\n\nconst ThinkComponent = React.memo((props: ComponentProps) => {\n const type = (props.type || \"\") as string;\n const titleMap: Record<string, string> = {\n planning: \"规划\",\n replanning: \"重新规划\",\n reasoning: \"推理\",\n action: \"行动\",\n final_answer: \"最终答案\",\n };\n const iconMap = {\n planning: <BarsOutlined />,\n replanning: <BarsOutlined />,\n reasoning: <BulbOutlined />,\n action: <ThunderboltOutlined />,\n final_answer: <CheckCircleOutlined />,\n };\n\n return (\n <Flex align=\"center\" gap={8} style={{ color: \"#888\", margin: \"4px 0\" }}>\n {type in titleMap && iconMap[type as keyof typeof iconMap]}\n {titleMap[type] && <span>{titleMap[type]}</span>}\n </Flex>\n );\n});\n\nconst MarkdownRender: React.FC<MarkdownRenderProps> = ({ text }) => {\n const styles = useStyles();\n const markdown = text\n .replaceAll(/\\/\\*\\s*PLANNING\\s*\\*\\//g, '<tag type=\"planning\"></tag>')\n .replaceAll(/\\/\\*\\s*REPLANNING\\s*\\*\\//g, '<tag type=\"replanning\"></tag>')\n .replaceAll(/\\/\\*\\s*REASONING\\s*\\*\\//g, '<tag type=\"reasoning\"></tag>')\n .replaceAll(/\\/\\*\\s*ACTION\\s*\\*\\//g, '<tag type=\"action\"></tag>')\n .replaceAll(\n /\\/\\*\\s*FINAL_ANSWER\\s*\\*\\//g,\n '<tag type=\"final_answer\"></tag>',\n );\n\n return (\n <div className={styles.markdownWrapper}>\n <div className={styles.markdownHost}>\n <XMarkdown\n content={markdown}\n className=\"x-markdown-light\"\n paragraphTag=\"div\"\n config={{\n extensions: Latex(),\n }}\n components={{\n tag: ThinkComponent,\n code: CodeComponent,\n }}\n streaming={{\n enableAnimation: true,\n animationConfig: {\n fadeDuration: 400,\n },\n }}\n />\n </div>\n </div>\n );\n};\n\nexport default MarkdownRender;\n"],"mappings":"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"}
@@ -5,7 +5,7 @@ import { withBasicStyles } from "../../../../styles/common";
5
5
  export var useStyles = withBasicStyles(function () {
6
6
  return {
7
7
  markdownWrapper: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: grid;\n grid-template-columns: minmax(0, 1fr); /* \u5173\u952E\uFF1A\u5141\u8BB8\u5185\u5BB9\u6536\u7F29 */\n max-width: 100%; /* \u81EA\u5B9A\u4E49\u6700\u5927\u5BBD\u5EA6 */\n margin: 0 auto;\n "]))),
8
- markdownHost: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n container-type: inline-size;\n width: 100%;\n overflow: auto;\n\n /* ===== Markdown \u57FA\u7840\u6392\u7248 ===== */\n\n p {\n margin: 8px 0;\n line-height: 1.6;\n }\n\n ul,\n ol {\n padding-left: 20px;\n }\n\n li {\n margin: 4px 0;\n }\n\n /* ===== Table \u6837\u5F0F ===== */\n\n table {\n border-collapse: collapse;\n width: 100%;\n max-width: 100%;\n margin: 12px 0;\n font-size: 14px;\n }\n\n thead {\n background: #fafafa;\n }\n\n th,\n td {\n border: 1px solid #e5e6eb;\n padding: 8px 12px;\n text-align: left;\n }\n\n th {\n font-weight: 600;\n }\n\n tbody tr:hover {\n background: #fafafa;\n }\n\n /* ===== Code ===== */\n\n pre {\n margin: 12px 0;\n }\n\n ant-highlightCode {\n max-width: min(100%, 80ch);\n overflow-x: auto;\n }\n\n /* ===== \u56FE\u7247 ===== */\n\n img {\n max-width: 100%;\n border-radius: 6px;\n }\n "])))
8
+ markdownHost: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n container-type: inline-size;\n width: 100%;\n overflow: auto;\n\n /* ===== Markdown \u57FA\u7840\u6392\u7248 ===== */\n\n p {\n margin: 8px 0;\n line-height: 1.6;\n }\n\n ul,\n ol {\n padding-left: 20px;\n margin-top: 0;\n margin-bottom: 8px;\n }\n\n li {\n margin: 0 0 4px 0 !important;\n }\n\n u {\n text-decoration: underline;\n }\n\n /* ===== Table \u6837\u5F0F ===== */\n\n table {\n border-collapse: collapse;\n width: 100%;\n max-width: 100%;\n margin: 12px 0;\n font-size: 14px;\n }\n\n thead {\n background: #fafafa;\n }\n\n th,\n td {\n border: 1px solid #e5e6eb;\n padding: 8px 12px;\n text-align: left;\n }\n\n th {\n font-weight: 600;\n }\n\n tbody tr:hover {\n background: #fafafa;\n }\n\n /* ===== Code ===== */\n\n pre {\n margin: 12px 0;\n }\n\n ant-highlightCode {\n max-width: min(100%, 80ch);\n overflow-x: auto;\n }\n\n /* ===== \u56FE\u7247 ===== */\n\n img {\n max-width: 100%;\n border-radius: 6px;\n }\n "])))
9
9
  };
10
10
  });
11
11
  export default useStyles;
@@ -1 +1 @@
1
- {"version":3,"names":["css","withBasicStyles","useStyles","markdownWrapper","_templateObject","_taggedTemplateLiteral","markdownHost","_templateObject2"],"sources":["../../../../../../src/components/XAdkChatbot/components/MarkdownRender/styles.tsx"],"sourcesContent":["import { css } from \"@emotion/css\";\nimport { withBasicStyles } from \"@/styles/common\";\n\nexport const useStyles = withBasicStyles(() => ({\n markdownWrapper: css`\n display: grid;\n grid-template-columns: minmax(0, 1fr); /* 关键:允许内容收缩 */\n max-width: 100%; /* 自定义最大宽度 */\n margin: 0 auto;\n `,\n\n markdownHost: css`\n container-type: inline-size;\n width: 100%;\n overflow: auto;\n\n /* ===== Markdown 基础排版 ===== */\n\n p {\n margin: 8px 0;\n line-height: 1.6;\n }\n\n ul,\n ol {\n padding-left: 20px;\n }\n\n li {\n margin: 4px 0;\n }\n\n /* ===== Table 样式 ===== */\n\n table {\n border-collapse: collapse;\n width: 100%;\n max-width: 100%;\n margin: 12px 0;\n font-size: 14px;\n }\n\n thead {\n background: #fafafa;\n }\n\n th,\n td {\n border: 1px solid #e5e6eb;\n padding: 8px 12px;\n text-align: left;\n }\n\n th {\n font-weight: 600;\n }\n\n tbody tr:hover {\n background: #fafafa;\n }\n\n /* ===== Code ===== */\n\n pre {\n margin: 12px 0;\n }\n\n ant-highlightCode {\n max-width: min(100%, 80ch);\n overflow-x: auto;\n }\n\n /* ===== 图片 ===== */\n\n img {\n max-width: 100%;\n border-radius: 6px;\n }\n `,\n}));\n\nexport default useStyles;\n"],"mappings":";;AAAA,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,eAAe;AAExB,OAAO,IAAMC,SAAS,GAAGD,eAAe,CAAC;EAAA,OAAO;IAC9CE,eAAe,EAAEH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,sBAAA,qOAKnB;IAEDC,YAAY,EAAEN,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA;EAoEnB,CAAC;AAAA,CAAC,CAAC;AAEH,eAAeH,SAAS"}
1
+ {"version":3,"names":["css","withBasicStyles","useStyles","markdownWrapper","_templateObject","_taggedTemplateLiteral","markdownHost","_templateObject2"],"sources":["../../../../../../src/components/XAdkChatbot/components/MarkdownRender/styles.tsx"],"sourcesContent":["import { css } from \"@emotion/css\";\nimport { withBasicStyles } from \"@/styles/common\";\n\nexport const useStyles = withBasicStyles(() => ({\n markdownWrapper: css`\n display: grid;\n grid-template-columns: minmax(0, 1fr); /* 关键:允许内容收缩 */\n max-width: 100%; /* 自定义最大宽度 */\n margin: 0 auto;\n `,\n\n markdownHost: css`\n container-type: inline-size;\n width: 100%;\n overflow: auto;\n\n /* ===== Markdown 基础排版 ===== */\n\n p {\n margin: 8px 0;\n line-height: 1.6;\n }\n\n ul,\n ol {\n padding-left: 20px;\n margin-top: 0;\n margin-bottom: 8px;\n }\n\n li {\n margin: 0 0 4px 0 !important;\n }\n\n u {\n text-decoration: underline;\n }\n\n /* ===== Table 样式 ===== */\n\n table {\n border-collapse: collapse;\n width: 100%;\n max-width: 100%;\n margin: 12px 0;\n font-size: 14px;\n }\n\n thead {\n background: #fafafa;\n }\n\n th,\n td {\n border: 1px solid #e5e6eb;\n padding: 8px 12px;\n text-align: left;\n }\n\n th {\n font-weight: 600;\n }\n\n tbody tr:hover {\n background: #fafafa;\n }\n\n /* ===== Code ===== */\n\n pre {\n margin: 12px 0;\n }\n\n ant-highlightCode {\n max-width: min(100%, 80ch);\n overflow-x: auto;\n }\n\n /* ===== 图片 ===== */\n\n img {\n max-width: 100%;\n border-radius: 6px;\n }\n `,\n}));\n\nexport default useStyles;\n"],"mappings":";;AAAA,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,eAAe;AAExB,OAAO,IAAMC,SAAS,GAAGD,eAAe,CAAC;EAAA,OAAO;IAC9CE,eAAe,EAAEH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,sBAAA,qOAKnB;IAEDC,YAAY,EAAEN,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA;EA0EnB,CAAC;AAAA,CAAC,CAAC;AAEH,eAAeH,SAAS"}
@@ -48,19 +48,40 @@ var XAdkChatbot = function XAdkChatbot(_ref) {
48
48
  enableGrouping = _ref$enableGrouping === void 0 ? true : _ref$enableGrouping,
49
49
  _ref$enableProcessPar = _ref.enableProcessParsing,
50
50
  enableProcessParsing = _ref$enableProcessPar === void 0 ? true : _ref$enableProcessPar,
51
- parseOptions = _ref.parseOptions;
51
+ parseOptions = _ref.parseOptions,
52
+ _ref$initialized = _ref.initialized,
53
+ initialized = _ref$initialized === void 0 ? false : _ref$initialized;
52
54
  var styles = useStyles();
53
55
  var listRef = useRef(null);
54
56
  var lastScrollTopRef = useRef(0);
55
57
  var userHasScrolledRef = useRef(false);
56
58
  var messagesEndRef = useRef(null);
59
+ var prevInitializedRef = useRef(false);
57
60
 
58
- // 滚动到底部
61
+ // 初始化完成时滚动到底部
59
62
  useEffect(function () {
60
- var _messagesEndRef$curre;
63
+ if (!initialized) return;
64
+ if (!messages.length) return;
65
+ if (prevInitializedRef.current) return; // 只在第一次 initialized+messages 就绪时触发
66
+ prevInitializedRef.current = true;
67
+ // 推迟到浏览器完成 paint 后执行,确保 DOM 高度已撑开
68
+ var timer = setTimeout(function () {
69
+ var _messagesEndRef$curre;
70
+ (_messagesEndRef$curre = messagesEndRef.current) === null || _messagesEndRef$curre === void 0 || _messagesEndRef$curre.scrollIntoView({
71
+ behavior: "auto"
72
+ });
73
+ }, 0);
74
+ return function () {
75
+ return clearTimeout(timer);
76
+ };
77
+ }, [initialized, messages]);
78
+
79
+ // 流式输出时滚动到底部
80
+ useEffect(function () {
81
+ var _messagesEndRef$curre2;
61
82
  if (!loading) return;
62
83
  if (userHasScrolledRef.current) return;
63
- (_messagesEndRef$curre = messagesEndRef.current) === null || _messagesEndRef$curre === void 0 || _messagesEndRef$curre.scrollIntoView({
84
+ (_messagesEndRef$curre2 = messagesEndRef.current) === null || _messagesEndRef$curre2 === void 0 || _messagesEndRef$curre2.scrollIntoView({
64
85
  behavior: "smooth"
65
86
  });
66
87
  }, [loading, messages]);
@@ -365,7 +386,7 @@ var XAdkChatbot = function XAdkChatbot(_ref) {
365
386
  })
366
387
  }))]
367
388
  }, group.id);
368
- }, [enableProcessParsing, parseOptions, showFnCallDetail, onConfirm, loading, showRetry, showCopy, showLog, onRetry, onCopy, onShowLog, styles]);
389
+ }, [enableProcessParsing, parseOptions, showFnCallDetail, onConfirm, loading, showRetry, showCopy, showLog, onRetry, onCopy, onShowLog, actions, styles]);
369
390
 
370
391
  // ========== 渲染用户消息组 ==========
371
392
  var renderUserGroup = useCallback(function (group) {