[ { "path": ".codefuse/skills/components/SKILL.md", "content": "# Ant Design X 组件开发规范指南\n\n基于 antd 组件库最佳实践的完整开发规范，涵盖命名、架构、样式、测试等各个方面。\n\n## 1. 项目架构规范\n\n### 1.1 目录结构\n\n```\ncomponents/[组件名]/\n├── index.tsx # 组件入口文件\n├── [组件名].tsx # 主组件实现\n├── [子组件].tsx # 子组件实现\n├── style/\n│ ├── index.ts # 样式入口\n│ ├── token.ts # Token 定义\n│ └── [其他样式文件].ts\n├── demo/ # 示例代码\n│ ├── basic.tsx # 基础示例\n│ └── [其他示例].tsx\n├── __tests__/ # 测试文件\n│ └── index.test.tsx # 单元测试\n└── index.zh-CN.md # 中文文档\n```\n\n### 1.2 文件命名规范\n\n- 组件文件：PascalCase（如 `Button.tsx`）\n- 样式文件：camelCase（如 `buttonStyle.ts`）\n- 测试文件：`index.test.tsx` 或 `[组件名].test.tsx`\n- 示例文件：kebab-case（如 `basic.tsx`、`custom-filter.tsx`）\n\n## 2. 命名规范与语义化\n\n### 2.1 组件命名\n\n- **完整名称**：使用完整单词，避免缩写\n- **PascalCase**：组件名使用大驼峰命名\n- **语义化**：名称应准确描述组件功能\n\n```typescript\n// ✅ 正确\ninterface ButtonProps {}\ninterface TypographyTextProps {}\n\n// ❌ 错误\ninterface BtnProps {} // 缩写\ninterface TxtProps {} // 缩写\ninterface MyComponentProps {} // 语义不清\n```\n\n### 2.2 Props 命名规范\n\n#### 基础属性\n\n- **类型属性**：`type`（如 `type=\"primary\"`）\n- **状态属性**：`disabled`、`loading`、`open`\n- **尺寸属性**：`size`（`large` | `middle` | `small`）\n- **默认值**：`default` + 属性名（如 `defaultValue`）\n\n#### 功能属性\n\n- **可编辑**：`editable`（布尔或配置对象）\n- **可复制**：`copyable`（布尔或配置对象）\n- **可展开**：`expandable`（布尔或配置对象）\n\n#### 事件属性\n\n- **触发事件**：`on` + 事件名（如 `onClick`、`onChange`）\n- **子组件事件**：`on` + 子组件名 + 事件名（如 `onPanelClick`）\n- **前置事件**：`before` + 事件名（如 `beforeUpload`）\n- **后置事件**：`after` + 事件名（如 `afterClose`）\n\n### 2.3 CSS 类名规范\n\n```typescript\n// 组件前缀\nconst prefixCls = getPrefixCls('button', customizePrefixCls);\n\n// 状态类名\n`${prefixCls}-${type}` // 类型类名\n`${prefixCls}-disabled` // 禁用状态\n`${prefixCls}-loading` // 加载状态\n`${prefixCls}-${sizeCls}` // 尺寸类名\n// 组合类名\n`${prefixCls}-icon-only` // 仅图标按钮\n`${prefixCls}-two-chinese-chars`; // 中文字符间距\n```\n\n## 3. TypeScript 类型设计\n\n### 3.1 Props 接口定义\n\n```typescript\n// 基础 Props 接口\nexport interface ButtonProps extends React.ButtonHTMLAttributes {\n // 类型定义\n type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\n size?: 'large' | 'middle' | 'small';\n\n // 状态控制\n loading?: boolean | { delay?: number };\n disabled?: boolean;\n\n // 内容相关\n icon?: React.ReactNode;\n children?: React.ReactNode;\n\n // 样式相关\n className?: string;\n style?: React.CSSProperties;\n\n // 事件处理\n onClick?: (event: React.MouseEvent) => void;\n}\n\n// 配置对象类型\nexport interface CopyConfig {\n text?: string | (() => string | Promise);\n onCopy?: (event?: React.MouseEvent) => void;\n icon?: React.ReactNode;\n tooltips?: React.ReactNode;\n format?: 'text/plain' | 'text/html';\n}\n```\n\n### 3.2 泛型组件设计\n\n```typescript\n// 泛型组件支持不同元素类型\nexport interface BlockProps<\n C extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements,\n> extends TypographyProps {\n component?: C;\n // 其他属性...\n}\n\n// 使用示例\nconst Base = React.forwardRef((props, ref) => {\n const { component = 'div' as C, ...rest } = props;\n return React.createElement(component, rest);\n});\n```\n\n### 3.3 类型安全实践\n\n```typescript\n// 使用联合类型而非 enum\ntype ButtonType = 'primary' | 'default' | 'dashed' | 'text' | 'link';\n\n// 使用 as const 定义常量\nconst BUTTON_TYPES = ['primary', 'default', 'dashed', 'text', 'link'] as const;\n\n// 精确的类型定义\ninterface EllipsisConfig {\n rows?: number;\n expandable?: boolean | 'collapsible';\n suffix?: string;\n symbol?: React.ReactNode | ((expanded: boolean) => React.ReactNode);\n}\n```\n\n## 4. 组件架构模式\n\n### 4.1 复合组件模式\n\n```typescript\n// 主组件\nconst Button = React.forwardRef((props, ref) => {\n // 实现...\n});\n\n// 子组件\nButton.Group = ButtonGroup;\nButton.__ANT_BUTTON = true;\n\n// 使用\n\n \n \n\n```\n\n### 4.2 配置合并模式\n\n```typescript\n// 使用 useMergedConfig 合并布尔值和配置对象\nconst [enableEdit, editConfig] = useMergedConfig(editable);\n\n// 实现 useMergedConfig\nfunction useMergedConfig(config: boolean | T): [boolean, T] {\n const enable = Boolean(config);\n const mergedConfig = React.useMemo(() => {\n if (config === true) return {} as T;\n if (config === false) return {} as T;\n return config || ({} as T);\n }, [config]);\n return [enable, mergedConfig];\n}\n```\n\n### 4.3 受控与非受控模式\n\n```typescript\n// 使用 useControlledState 处理受控/非受控状态\nconst [editing, setEditing] = useControlledState(false, editConfig.editing);\n\n// useControlledState 实现\nfunction useControlledState(defaultValue: T, controlledValue?: T): [T, (value: T) => void] {\n const [internalValue, setInternalValue] = React.useState(defaultValue);\n const isControlled = controlledValue !== undefined;\n const value = isControlled ? controlledValue : internalValue;\n\n const setValue = React.useCallback(\n (newValue: T) => {\n if (!isControlled) {\n setInternalValue(newValue);\n }\n },\n [isControlled],\n );\n\n return [value, setValue];\n}\n```\n\n## 5. 样式系统规范\n\n### 5.1 CSS-in-JS 架构\n\n```typescript\n// Token 定义\nexport interface ComponentToken {\n // 颜色相关\n colorPrimary?: string;\n colorBgContainer?: string;\n\n // 尺寸相关\n controlHeight?: number;\n controlHeightSM?: number;\n controlHeightLG?: number;\n\n // 间距相关\n padding?: number;\n paddingSM?: number;\n paddingLG?: number;\n}\n\n// 样式生成函数\nconst genButtonStyle = (token: ButtonToken): CSSInterpolation => {\n return [\n // 基础样式\n genSharedButtonStyle(token),\n // 尺寸样式\n genSizeBaseButtonStyle(token),\n genSizeSmallButtonStyle(token),\n genSizeLargeButtonStyle(token),\n // 变体样式\n genVariantStyle(token),\n ];\n};\n\n// 样式导出\nexport default genStyleHooks('Button', genButtonStyle, prepareComponentToken, {\n unitless: { fontWeight: true },\n});\n```\n\n### 5.2 响应式设计\n\n```typescript\n// 使用 CSS 逻辑属性支持 RTL\nconst styles = {\n marginInlineStart: token.marginXS, // 替代 marginLeft\n marginInlineEnd: token.marginXS, // 替代 marginRight\n paddingBlock: token.paddingSM, // 替代 paddingTop/paddingBottom\n paddingInline: token.paddingSM, // 替代 paddingLeft/paddingRight\n};\n\n// 响应式断点\nconst responsiveStyles = {\n [token.screenXS]: {\n fontSize: token.fontSizeSM,\n },\n [token.screenMD]: {\n fontSize: token.fontSize,\n },\n [token.screenLG]: {\n fontSize: token.fontSizeLG,\n },\n};\n```\n\n### 5.3 主题定制支持\n\n```typescript\n// 支持 ConfigProvider 主题定制\nconst { getPrefixCls, direction } = React.useContext(ConfigContext);\nconst prefixCls = getPrefixCls('button', customizePrefixCls);\n\n// 支持语义化 className 和 style\nexport interface ButtonSemanticClassNames {\n root?: string;\n icon?: string;\n content?: string;\n}\n\nexport interface ButtonSemanticStyles {\n root?: React.CSSProperties;\n icon?: React.CSSProperties;\n content?: React.CSSProperties;\n}\n```\n\n## 6. 可访问性规范\n\n### 6.1 ARIA 属性\n\n```typescript\n// 正确的 ARIA 属性使用\n\n {children}\n\n\n// 键盘导航支持\nconst handleKeyDown = (event: React.KeyboardEvent) => {\n switch (event.key) {\n case 'Enter':\n case ' ':\n event.preventDefault();\n handleClick();\n break;\n case 'Escape':\n handleCancel();\n break;\n }\n};\n```\n\n### 6.2 焦点管理\n\n```typescript\n// 焦点状态样式\nconst focusStyles = {\n '&:focus-visible': {\n outline: `${token.lineWidthFocus}px solid ${token.colorPrimaryBorder}`,\n outlineOffset: 1,\n },\n};\n\n// 程序化焦点管理\nconst buttonRef = React.useRef(null);\nReact.useEffect(() => {\n if (autoFocus && buttonRef.current) {\n buttonRef.current.focus();\n }\n}, [autoFocus]);\n```\n\n## 7. 性能优化规范\n\n### 7.1 React 优化\n\n```typescript\n// 使用 React.memo 避免不必要的重渲染\nconst Button = React.memo(\n React.forwardRef((props, ref) => {\n // 组件实现\n }),\n);\n\n// 使用 useMemo 缓存计算结果\nconst classes = React.useMemo(() => {\n return clsx(prefixCls, `${prefixCls}-${type}`, `${prefixCls}-${size}`, className);\n}, [prefixCls, type, size, className]);\n\n// 使用 useCallback 缓存函数\nconst handleClick = React.useCallback(\n (event: React.MouseEvent) => {\n if (!disabled && !loading) {\n onClick?.(event);\n }\n },\n [disabled, loading, onClick],\n);\n```\n\n### 7.2 样式优化\n\n```typescript\n// 避免不必要的样式重计算\nconst useStyle = genStyleHooks(\n 'Button',\n (token) => {\n // 样式计算逻辑\n },\n prepareComponentToken,\n);\n\n// 使用 CSS containment\nconst containerStyles = {\n contain: 'layout style paint',\n contentVisibility: 'auto',\n};\n```\n\n## 8. 测试规范\n\n### 8.1 测试文件结构\n\n```typescript\n// __tests__/index.test.tsx\nimport React from 'react';\nimport { render, screen, fireEvent } from '@testing-library/react';\nimport Button from '../index';\n\ndescribe('Button', () => {\n it('should render correctly', () => {\n const { container } = render();\n expect(container.firstChild).toMatchSnapshot();\n });\n\n it('should handle click events', () => {\n const handleClick = jest.fn();\n render();\n\n fireEvent.click(screen.getByText('Click me'));\n expect(handleClick).toHaveBeenCalledTimes(1);\n });\n\n it('should be disabled when disabled prop is true', () => {\n render();\n expect(screen.getByText('Disabled')).toBeDisabled();\n });\n});\n```\n\n### 8.2 测试覆盖率要求\n\n- 单元测试覆盖率：100%\n- 集成测试：主要使用场景\n- 可访问性测试：键盘导航、屏幕阅读器\n- 视觉回归测试：UI 变化检测\n\n## 9. 文档规范\n\n### 9.1 API 文档格式\n\n```markdown\n| 参数 | 说明 | 类型 | 默认值 |\n| -------- | ---------------- | ------------------------------------------------------ | --------- |\n| type | 设置按钮类型 | `primary` \\| `default` \\| `dashed` \\| `text` \\| `link` | `default` |\n| size | 设置按钮大小 | `large` \\| `middle` \\| `small` | `middle` |\n| disabled | 按钮失效状态 | boolean | false |\n| loading | 设置按钮载入状态 | boolean \\| { delay: number } | false |\n| onClick | 点击按钮时的回调 | (event) => void | - |\n```\n\n### 9.2 示例代码规范\n\n```typescript\n// demo/basic.tsx\nimport React from 'react';\nimport { Button } from 'antd';\n\nconst App: React.FC = () => (\n <>\n \n \n \n \n \n \n);\n\nexport default App;\n```\n\n## 10. 国际化规范\n\n### 10.1 本地化配置\n\n```typescript\n// locale/zh_CN.ts\nexport default {\n Text: {\n edit: '编辑',\n copy: '复制',\n copied: '复制成功',\n expand: '展开',\n collapse: '收起',\n },\n};\n\n// 使用 useLocale 获取本地化\nconst [textLocale] = useLocale('Text', enUS.Text);\n```\n\n### 10.2 动态文本处理\n\n```typescript\n// 支持模板变量的本地化\nconst messages = {\n selected: '已选择 ${count} 项',\n};\n\n// 使用\nconst message = messages.selected.replace('${count}', count.toString());\n```\n\n## 11. 版本兼容规范\n\n### 11.1 向下兼容\n\n- 避免破坏性变更\n- 提供迁移指南\n- 保持 API 稳定性\n- 使用废弃警告\n\n```typescript\n// 废弃警告\nif (process.env.NODE_ENV !== 'production') {\n const warning = devUseWarning('Button');\n warning.deprecated(!iconPosition, 'iconPosition', 'iconPlacement');\n}\n```\n\n### 11.2 浏览器兼容\n\n- 支持 Chrome 80+\n- 支持服务端渲染\n- 支持 TypeScript 4.0+\n- 支持 React 18 ~ 19\n\n## 12. 发布规范\n\n### 12.1 版本管理\n\n- 遵循语义化版本（SemVer）\n- 主版本：破坏性变更\n- 次版本：新功能\n- 修订版本：Bug 修复\n\n### 12.2 变更日志\n\n```markdown\n## 5.0.0\n\n### 重大变更\n\n- 移除废弃的 `icon` 字符串用法\n- 重构样式系统，使用 CSS-in-JS\n\n### 新功能\n\n- 新增 `variant` 属性支持多种按钮变体\n- 新增语义化 className 和 style 支持\n\n### Bug 修复\n\n- 修复按钮在 disabled 状态下仍可点击的问题\n```\n\n---\n\n这套规范基于 antd 组件库的最佳实践，涵盖了从项目结构到发布流程的完整开发规范。遵循这些规范可以确保组件的一致性、可维护性和高质量。\n" }, { "path": ".editorconfig", "content": "# top-most EditorConfig file\nroot = true\n\n# Unix-style newlines with a newline ending every file\n[*.{js,css}]\nend_of_line = lf\ninsert_final_newline = true\nindent_style = space\nindent_size = 2\n" }, { "path": ".github/FUNDING.yml", "content": "# These are supported funding model platforms\n\ngithub: ant-design # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]\npatreon: # Replace with a single Patreon username\nopen_collective: ant-design # Replace with a single Open Collective username\nko_fi: # Replace with a single Ko-fi username\ntidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel\ncommunity_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry\nliberapay: # Replace with a single Liberapay username\nissuehunt: # Replace with a single IssueHunt username\nlfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry\npolar: # Replace with a single Polar username\nbuy_me_a_coffee: # Replace with a single Buy Me a Coffee username\nthanks_dev: # Replace with a single thanks.dev username\ncustom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.yml", "content": "name: 错误报告 🐛\ndescription: 提交一个 @ant-design/x 的 bug\nlabels: ['bug']\nbody:\n - type: markdown\n attributes:\n value: 感谢您的贡献！❤️ 请在上方写一个易于搜索的标题 ⬆️。\n validations:\n required: true\n - type: textarea\n attributes:\n label: 重现步骤\n description: |\n **⚠️ 我们无法重现的问题是无法修复的。**\n\n 请提供一个在线示例的链接和一组明确的步骤来重现这个错误。请参阅我们的[文档](https://github.com/ant-design/ant-design/wiki/%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%80%E5%B0%8F%E5%8C%96%E9%87%8D%E7%8E%B0%EF%BC%8C%E4%B8%BA%E4%BB%80%E4%B9%88%E8%BF%99%E6%98%AF%E5%BF%85%E9%9C%80%E7%9A%84%EF%BC%9F)了解如何构建重现案例。\n value: |\n 在线示例链接：（必填）\n\n 步骤：\n 1.\n 2.\n 3.\n - type: textarea\n attributes:\n label: 当前行为\n description: 描述实际发生的情况，而不是预期行为。\n - type: textarea\n attributes:\n label: 预期行为\n description: 描述应该发生的情况。\n - type: textarea\n attributes:\n label: 上下文\n description: 您想要完成什么？提供背景有助于我们提出在现实世界中更有用的解决方案。\n - type: input\n id: version\n attributes:\n label: 版本\n description: 使用的 @ant-design/x 版本是多少？\n validations:\n required: true\n - type: dropdown\n id: browsers\n attributes:\n label: 您在哪些浏览器上遇到了这个问题？\n multiple: true\n options:\n - Firefox\n - Chrome\n - Safari\n - Microsoft Edge\n - 其他\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.yml", "content": "name: 功能请求 💄\ndescription: 我想给 @ant-design/x 加个新功能\nlabels: ['feature request']\nbody:\n - type: markdown\n attributes:\n value: 感谢您的贡献！❤️ 请在上方写一个易于搜索的标题 ⬆️。\n - type: textarea\n attributes:\n label: 需求动机\n description: 要解决什么问题？提供背景有助于我们提出在现实世界中更有用的解决方案。\n - type: textarea\n attributes:\n label: 提议的 API 是什么样的？\n description: 描述您希望用什么样的 API 来解决这个问题，可以写一个具体的 markdown 代码块示例。\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": "\n\n[中文版模板 / Chinese template](https://github.com/ant-design/x/blob/master/.github/PULL_REQUEST_TEMPLATE_CN.md?plain=1)\n\n### 🤔 This is a ...\n\n- [ ] 🆕 New feature\n- [ ] 🐞 Bug fix\n- [ ] 📝 Site / documentation improvement\n- [ ] 📽️ Demo improvement\n- [ ] 💄 Component style improvement\n- [ ] 🤖 TypeScript definition improvement\n- [ ] 📦 Bundle size optimization\n- [ ] ⚡️ Performance optimization\n- [ ] ⭐️ Feature enhancement\n- [ ] 🌐 Internationalization\n- [ ] 🛠 Refactoring\n- [ ] 🎨 Code style optimization\n- [ ] ✅ Test Case\n- [ ] 🔀 Branch merge\n- [ ] ⏩ Workflow\n- [ ] ⌨️ Accessibility improvement\n- [ ] ❓ Other (about what?)\n\n### 🔗 Related Issues\n\n> - Describe the source of related requirements, such as links to relevant issue discussions.\n> - For example: close #xxxx, fix #xxxx\n\n### 💡 Background and Solution\n\n> - The specific problem to be addressed.\n> - List the final API implementation and usage if needed.\n> - If there are UI/interaction changes, consider providing screenshots or GIFs.\n\n### 📝 Change Log\n\n> - Read [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) like a cat tracks a laser pointer.\n> - Describe the impact of the changes on developers, not the solution approach.\n> - Reference: https://x.ant.design/changelog\n\n| Language | Changelog |\n| ---------- | --------- |\n| 🇺🇸 English | |\n| 🇨🇳 Chinese | |\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE_CN.md", "content": "\n\n[English Template / 英文模板](https://github.com/ant-design/x/blob/master/.github/PULL_REQUEST_TEMPLATE.md?plain=1)\n\n### 🤔 这个变动的性质是？\n\n- [ ] 🆕 新特性提交\n- [ ] 🐞 Bug 修复\n- [ ] 📝 站点、文档改进\n- [ ] 📽️ 演示代码改进\n- [ ] 💄 组件样式/交互改进\n- [ ] 🤖 TypeScript 定义更新\n- [ ] 📦 包体积优化\n- [ ] ⚡️ 性能优化\n- [ ] ⭐️ 功能增强\n- [ ] 🌐 国际化改进\n- [ ] 🛠 重构\n- [ ] 🎨 代码风格优化\n- [ ] ✅ 测试用例\n- [ ] 🔀 分支合并\n- [ ] ⏩ 工作流程\n- [ ] ⌨️ 无障碍改进\n- [ ] ❓ 其他改动（是关于什么的改动？）\n\n### 🔗 相关 Issue\n\n> 1. 描述相关需求的来源，如相关的 issue 讨论链接。\n> 2. 例如 close #xxxx、 fix #xxxx\n\n### 💡 需求背景和解决方案\n\n> 1. 要解决的具体问题。\n> 2. 列出最终的 API 实现和用法。\n> 3. 涉及UI/交互变动建议提供截图或 GIF。\n\n### 📝 更新日志\n\n> - 郑重地阅读 [如何维护更新日志](https://keepachangelog.com/zh-CN/1.1.0/)\n> - 描述改动对开发者有哪些影响，而非解决方式\n> - 可参考：https://x.ant.design/changelog-cn\n\n| 语言 | 更新描述 |\n| ------- | -------- |\n| 🇺🇸 英文 | |\n| 🇨🇳 中文 | |\n" }, { "path": ".github/dependabot.yml", "content": "# To get started with Dependabot version updates, you'll need to specify which\n# package ecosystems to update and where the package manifests are located.\n# Please see the documentation for all configuration options:\n# https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/about-dependabot-version-updates\n\nversion: 2\nupdates:\n - package-ecosystem: npm\n directory: /\n schedule:\n interval: weekly\n day: monday\n time: '10:00'\n timezone: Asia/Shanghai\n ignore:\n - dependency-name: '@ant-design/cssinjs'\n - dependency-name: dayjs\n versions: [1.x]\n - package-ecosystem: github-actions\n directory: /\n schedule:\n interval: monthly\n labels:\n - github-actions\n - dependencies\n - skip-verify-files\n" }, { "path": ".github/workflows/main.yml", "content": "name: ✅ test\non: [push, pull_request]\npermissions:\n contents: read\njobs:\n test:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v6\n - uses: utooland/setup-utoo@v1\n - run: ut install --ignore-scripts\n - run: ut prestart\n - run: ut lint\n - run: ut tsc\n - run: ut compile\n - run: ut coverage\n - run: ut test:dekko\n - uses: codecov/codecov-action@v5\n with:\n directories: packages/x,packages/x-markdown,packages/x-sdk\n token: ${{ secrets.CODECOV_TOKEN }}\n" }, { "path": ".github/workflows/markdown-benchmark.yml", "content": "name: Markdown Performance\n\non:\n pull_request:\n paths:\n - 'packages/x-markdown/**'\n push:\n paths:\n - 'packages/x-markdown/**'\n workflow_dispatch:\n\npermissions:\n contents: read\n pull-requests: write\n checks: write\n\njobs:\n benchmark:\n name: Performance BenchMark\n runs-on: ubuntu-latest\n timeout-minutes: 30\n\n steps:\n - name: Checkout code\n uses: actions/checkout@v6\n\n - name: Setup Node.js\n uses: actions/setup-node@v6\n with:\n node-version: '18'\n\n - name: Install dependencies\n run: npm install\n\n - name: Setup Playwright\n run: |\n cd packages/x-markdown\n npx playwright install --with-deps chromium\n\n - name: Run x-markdown benchmark\n id: benchmark\n run: |\n cd packages/x-markdown\n npm run benchmark\n\n - name: Check performance against thresholds\n id: check\n run: |\n cd packages/x-markdown\n node src/XMarkdown/__benchmark__/scripts/check-performance.js \\\n test-results/benchmark-results.json \\\n benchmark-check-report.txt\n\n - name: Comment PR with results\n if: |\n github.event_name == 'pull_request' &&\n github.event.pull_request.head.repo.full_name == github.repository\n uses: actions/github-script@v8\n with:\n script: |\n const fs = require('fs');\n const path = 'packages/x-markdown/src/XMarkdown/__benchmark__/benchmark-check-report.txt';\n\n let report = '⚠️ Performance benchmark report not found.';\n if (fs.existsSync(path)) {\n report = fs.readFileSync(path, 'utf8');\n }\n\n const { data: comments } = await github.rest.issues.listComments({\n owner: context.repo.owner,\n repo: context.repo.repo,\n issue_number: context.issue.number,\n });\n\n const botComment = comments.find(comment =>\n comment.user.type === 'Bot' &&\n comment.body.includes('📊 x-markdown Performance Report')\n );\n\n const commentBody = report + '\\n\\n---\\n*This comment is automatically generated by the x-markdown performance CI.*';\n\n if (botComment) {\n await github.rest.issues.updateComment({\n owner: context.repo.owner,\n repo: context.repo.repo,\n comment_id: botComment.id,\n body: commentBody\n });\n } else {\n await github.rest.issues.createComment({\n owner: context.repo.owner,\n repo: context.repo.repo,\n issue_number: context.issue.number,\n body: commentBody\n });\n }\n" }, { "path": ".github/workflows/pr-auto-merge.yml", "content": "# Used to merge master/feature branches with each other\nname: PR Auto Merge Bot\n\non:\n schedule:\n - cron: '*/5 * * * *'\n\npermissions:\n contents: read\n\njobs:\n pr-check-ci:\n if: github.repository == 'ant-design/x'\n permissions:\n checks: read # for actions-cool/check-pr-ci to get check reference\n contents: write # for actions-cool/check-pr-ci to merge PRs\n issues: write # for actions-cool/check-pr-ci to update issues\n pull-requests: write # for actions-cool/check-pr-ci to update PRs\n runs-on: ubuntu-latest\n steps:\n - uses: actions-cool/check-pr-ci@v1\n with:\n filter-label: BranchAutoMerge\n filter-creator-authority: write\n filter-head-ref: 'main, feature, next, main-merge-feature, feature-merge-main, next-merge-main, next-merge-feature'\n filter-support-fork: false\n skip-run-names: 'deploy preview, pr-check-ci, upstream workflow summary, suggest-related-links, download visual-regression report'\n conflict-review-body: 😅 This branch has conflicts that must be resolved!\n success-review: true\n success-merge: true\n merge-method: merge\n merge-title: 'chore: auto merge branches (#${number})'\n" }, { "path": ".github/workflows/pr-contributor-welcome.yml", "content": "# 当 PR 被合并时，留言欢迎加入共建群\nname: PullRequest Contributor Welcome\n\non:\n pull_request_target:\n types:\n - closed\n paths:\n - 'packages/**'\n\npermissions:\n contents: read\n\njobs:\n comment:\n permissions:\n issues: write # for actions-cool/maintain-one-comment to modify or create issue comments\n pull-requests: write # for actions-cool/maintain-one-comment to modify or create PR comments\n if: github.event.pull_request.merged == true && github.repository == 'ant-design/x'\n runs-on: ubuntu-latest\n steps:\n - name: get commit count\n id: get_commit_count\n run: |\n PR_AUTHOR=$(echo \"${{ github.event.pull_request.user.login }}\")\n RESULT_DATA=$(curl -s \"https://api.github.com/repos/${{ github.repository }}/commits?author=${PR_AUTHOR}&per_page=5\")\n DATA_LENGTH=$(echo $RESULT_DATA | jq 'if type == \"array\" then length else 0 end')\n echo \"COUNT=$DATA_LENGTH\" >> $GITHUB_OUTPUT\n - name: Comment on PR\n if: steps.get_commit_count.outputs.COUNT < 3\n uses: actions-cool/maintain-one-comment@v3\n with:\n token: ${{ secrets.GITHUB_TOKEN }}\n body: |\n 🎉 Thank you for your contribution! If you have not yet joined our DingTalk community group, please feel free to join us (when joining, please provide the link to this PR).\n\n 🎉 感谢您的贡献！如果您还没有加入钉钉社区群，请扫描下方二维码加入我们（加群时请提供此 PR 链接）。\n\n \"Thank\n\n \n body-include: \n" }, { "path": ".github/workflows/preview-build.yml", "content": "# Each PR will build preview site that help to check code is work as expect.\n\nname: Preview Build\n\non:\n pull_request:\n types: [opened, synchronize, reopened]\n\n# Cancel prev CI if new commit come\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}\n cancel-in-progress: true\n\npermissions:\n contents: read\n\njobs:\n build-site:\n name: build preview\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v6\n - uses: utooland/setup-utoo@v1\n - run: ut\n - run: ut prestart --workspaces\n - name: ut site\n id: site\n run: ut site --workspace packages/x\n env:\n NODE_OPTIONS: '--max_old_space_size=4096'\n - name: upload site artifact\n uses: actions/upload-artifact@v7\n with:\n name: site\n path: packages/x/_site/\n retention-days: 5\n # Upload PR id for next workflow use\n - name: Save PR number\n if: ${{ always() }}\n run: echo ${{ github.event.number }} > ./pr-id.txt\n\n - name: Upload PR number\n if: ${{ always() }}\n uses: actions/upload-artifact@v7\n with:\n name: pr\n path: ./pr-id.txt\n" }, { "path": ".github/workflows/preview-deploy.yml", "content": "# Each PR will build preview site that help to check code is work as expect.\n\nname: Preview Deploy\n\non:\n workflow_run:\n workflows: ['Preview Build']\n types:\n - completed\n\npermissions:\n contents: read\n actions: read\n\njobs:\n upstream-workflow-summary:\n name: upstream workflow summary\n runs-on: ubuntu-latest\n if: github.event.workflow_run.event == 'pull_request'\n outputs:\n jobs: ${{ steps.prep-summary.outputs.result }}\n build-success: ${{ steps.prep-summary.outputs.build-success }}\n build-failure: ${{ steps.prep-summary.outputs.build-failure }}\n steps:\n - name: summary jobs status\n uses: actions/github-script@v8\n id: prep-summary\n with:\n script: |\n const response = await github.rest.actions.listJobsForWorkflowRun({\n owner: context.repo.owner,\n repo: context.repo.repo,\n run_id: ${{ github.event.workflow_run.id }},\n });\n\n // { [name]: [conclusion] }, e.g. { 'build preview': 'success' }\n const jobs = (response.data?.jobs ?? []).reduce((acc, job) => {\n if(job?.status === 'completed' && 'name' in job && 'conclusion' in job) {\n acc[job.name] = job.conclusion;\n }\n return acc;\n }, {});\n\n const total = Object.keys(jobs).length;\n if(total === 0) core.setFailed('no jobs found');\n\n // the name here must be the same as `jobs.xxx.{name}` in preview-build.yml\n // set output\n core.setOutput('build-success', jobs['build preview'] === 'success');\n core.setOutput('build-failure', jobs['build preview'] === 'failure');\n return jobs;\n\n deploy-preview:\n name: deploy preview\n permissions:\n actions: read # for dawidd6/action-download-artifact to query and download artifacts\n issues: write # for actions-cool/maintain-one-comment to modify or create issue comments\n pull-requests: write # for actions-cool/maintain-one-comment to modify or create PR comments\n runs-on: ubuntu-latest\n needs: upstream-workflow-summary\n if: github.event.workflow_run.event == 'pull_request'\n steps:\n # We need get PR id first\n - name: download pr artifact\n uses: dawidd6/action-download-artifact@v16\n with:\n workflow: ${{ github.event.workflow_run.workflow_id }}\n run_id: ${{ github.event.workflow_run.id }}\n name: pr\n\n # Save PR id to output\n - name: save PR id\n id: pr\n run: |\n pr_id=$(> $GITHUB_OUTPUT\n\n # Download site artifact\n - name: download site artifact\n if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}\n uses: dawidd6/action-download-artifact@v16\n with:\n workflow: ${{ github.event.workflow_run.workflow_id }}\n run_id: ${{ github.event.workflow_run.id }}\n name: site\n\n - name: upload surge service\n id: deploy\n continue-on-error: true\n env:\n PR_ID: ${{ steps.pr.outputs.id }}\n run: |\n export DEPLOY_DOMAIN=https://preview-${PR_ID}-antd-x.surge.sh\n npx surge --project ./ --domain $DEPLOY_DOMAIN --token ${{ secrets.SURGE_TOKEN }}\n\n - name: success comment\n uses: actions-cool/maintain-one-comment@v3\n if: ${{ steps.deploy.outcome == 'success' }}\n with:\n token: ${{ secrets.GITHUB_TOKEN }}\n body: |\n [\"Preview](https://preview-${{ steps.pr.outputs.id }}-antd-x.surge.sh)\n \n body-include: ''\n number: ${{ steps.pr.outputs.id }}\n\n - name: failed comment\n if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-failure) || steps.deploy.outcome == 'failure' || failure() }}\n uses: actions-cool/maintain-one-comment@v3\n with:\n token: ${{ secrets.GITHUB_TOKEN }}\n body: |\n [\"Preview](https://preview-${{ steps.pr.outputs.id }}-antd-x.surge.sh)\n \n body-include: ''\n number: ${{ steps.pr.outputs.id }}\n" }, { "path": ".github/workflows/preview-start.yml", "content": "# When `preview-build` start. Leave a message on the PR\n#\n# 🚨🚨🚨 Important 🚨🚨🚨\n# Never do any `checkout` or `npm install` action!\n# `pull_request_target` will enable PR to access the secrets!\n\nname: Preview Start\n\non:\n pull_request_target:\n types: [opened, synchronize, reopened]\n\npermissions:\n contents: read\n\njobs:\n preview-start:\n permissions:\n issues: write # for actions-cool/maintain-one-comment to modify or create issue comments\n pull-requests: write # for actions-cool/maintain-one-comment to modify or create PR comments\n name: start preview info\n runs-on: ubuntu-latest\n steps:\n - name: update status comment\n uses: actions-cool/maintain-one-comment@v3\n with:\n token: ${{ secrets.GITHUB_TOKEN }}\n body: |\n [\"Prepare](https://preview-${{ github.event.number }}-ant-design.surge.sh)\n \n body-include: ''\n" }, { "path": ".github/workflows/release-dingtalk.yml", "content": "name: DingTalk Release Notification\n\non: create\n\npermissions:\n contents: read\n\njobs:\n release-helper:\n permissions:\n contents: write # for actions-cool/release-helper to create releases\n if: github.event.ref_type == 'tag'\n runs-on: ubuntu-latest\n steps:\n - name: Send to Ant Design X DingGroup\n uses: actions-cool/release-helper@v2\n with:\n trigger: tag\n changelogs: 'CHANGELOG.en-US.md, CHANGELOG.zh-CN.md'\n branch: 'main'\n tag: '2*'\n latest: '2*'\n dingding-token: ${{ secrets.DINGDING_BOT_TOKEN }} ${{ secrets.DINGDING_BOT_INTERNAL_TOKEN }} ${{ secrets.DINGDING_BOT_XMARKDOWN_TOKEN }}\n dingding-msg: CHANGELOG.zh-CN.md\n msg-title: '# Ant Design X {{v}} 发布日志'\n msg-poster: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*kjHUSYIdsnUAAAAAAAAAAAAADgCCAQ/original'\n msg-footer: '💬 前往 [**Ant Design X Releases**]({{url}}) 查看更新日志'\n prettier: true\n prerelease-filter: '-, a, b, A, B'\n" }, { "path": ".github/workflows/release-x.yml", "content": "name: 🆇 Release to X\n\non: create\n\njobs:\n tweet:\n runs-on: ubuntu-latest\n if: ${{ github.event.ref_type == 'tag' && !contains(github.event.ref, 'alpha') }}\n steps:\n - name: Tweet\n uses: nearform-actions/github-action-notify-twitter@master\n with:\n message: |\n 𝕏 Ant Design X just released @ant-design/x@${{ github.event.ref }} ✨🎊✨ Check out the full release note: https://github.com/ant-design/x/releases/tag/${{ github.event.ref }}\n twitter-app-key: ${{ secrets.TWITTER_API_KEY }}\n twitter-app-secret: ${{ secrets.TWITTER_API_SECRET }}\n twitter-access-token: ${{ secrets.TWITTER_ACCESS_TOKEN }}\n twitter-access-token-secret: ${{ secrets.TWITTER_ACCESS_TOKEN_SECRET }}\n" }, { "path": ".github/workflows/site-deploy.yml", "content": "# When pushing a tag. this workflow will trigger site deployment and fixed version address comments\n\nname: Deploy website\non:\n push:\n tags:\n - '2.*'\n workflow_dispatch:\n\npermissions:\n contents: write\n\njobs:\n build-and-deploy:\n runs-on: ubuntu-latest\n if: (startsWith(github.ref, 'refs/tags/') && (contains(github.ref_name, '-') == false)) || github.event_name == 'workflow_dispatch'\n steps:\n - name: checkout\n uses: actions/checkout@v6\n - uses: utooland/setup-utoo@v1\n - run: ut\n - name: build site\n run: ut run predeploy\n env:\n NODE_OPTIONS: --max_old_space_size=4096\n\n - name: build dist and bundle analyzer report\n run: ut compile\n env:\n ANALYZER: 1\n NODE_OPTIONS: --max_old_space_size=4096\n\n - name: Get version\n id: publish-version\n run: echo \"VERSION=$(echo ${{ github.ref_name }} | sed 's/\\./-/g')\" >> $GITHUB_OUTPUT\n\n - name: Deploy to GitHub Pages\n uses: peaceiris/actions-gh-pages@v4\n with:\n github_token: ${{ secrets.GITHUB_TOKEN }}\n publish_dir: ./_site\n force_orphan: true\n\n # Since force_orphan will not trigger Sync to Gitee, we need to force run it here\n - name: Sync to Gitee\n uses: wearerequired/git-mirror-action@v1\n env:\n SSH_PRIVATE_KEY: ${{ secrets.GITEE_SSH_PRIVATE_KEY }}\n with:\n source-repo: 'git@github.com:ant-design/x.git'\n destination-repo: 'git@gitee.com:ant-design/antd-x.git'\n\n - name: Deploy to Surge (with TAG)\n working-directory: ./packages/x\n run: |\n export DEPLOY_DOMAIN=ant-design-x-${{ steps.publish-version.outputs.VERSION }}.surge.sh\n npx surge --project ./_site --domain $DEPLOY_DOMAIN --token ${{ secrets.SURGE_TOKEN }}\n\n - name: Create Commit Comment\n uses: peter-evans/commit-comment@v4\n with:\n body: |\n - Documentation site for this release: https://ant-design-x-${{ steps.publish-version.outputs.VERSION }}.surge.sh\n" }, { "path": ".github/workflows/size-limit.yml", "content": "name: 📦 Size Limit\n\non:\n pull_request:\n types: [opened, synchronize]\n\npermissions:\n issues: write\n contents: read\n\njobs:\n size:\n permissions:\n contents: read\n pull-requests: write\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v6\n - uses: oven-sh/setup-bun@v2\n - name: size-limit\n uses: ant-design/size-limit-action@master\n with:\n github_token: ${{ secrets.GITHUB_TOKEN }}\n package_manager: npm\n build_script: compile\n" }, { "path": ".gitignore", "content": "*.iml\n.idea/\n.ipr\n.iws\n*~\n~*\n*.diff\n*.patch\n*.bak\n.DS_Store\nThumbs.db\n.project\n.*proj\n.svn/\n*.swp\n*.swo\n*.log\n*.log.*\n*.json.gzip\nnode_modules/\n.buildpath\n.settings\nnpm-debug.log\nnohup.out\n_site\n_data\ndist\nreport.html\nlib\nbin\nes\n\nelasticsearch-*\nconfig/base.yaml\n/.vscode/\ncoverage\nyarn.lock\npackage-lock.json\nbun.lock\nbun.lockb\npnpm-lock.yaml\nbun.lockb\n.pnpm-debug.log\npackages/*/components/**/*.js\npackages/*/components/**/*.jsx\n!packages/*/components/**/__tests__/**/*.js\n!packages/*/components/**/__tests__/**/*.js.snap\n/.history\n*.tmp\nartifacts.zip\noss-artifacts.zip\nserver/\n\n\n\npackages/*/.dumi/tmp\npackages/*/.dumi/tmp-test\npackages/*/.dumi/tmp-production\npackages/*/.dumi/preset/components-changelog*\npackages/*/.dumi/preset/misc-changelog.json\n\n# Image snapshot diff\n__diff_output__/\n__image_snapshots__/\n/jest-stare\n/imageSnapshots*\n/imageDiffSnapshots\n/visualRegressionReport*\n\n.devcontainer*\n.husky/prepare-commit-msg\n\n.eslintcache\n.node-version\n.node\n\n.env\nexamples/\n\npackages/x-markdown/plugins\npackages/x-markdown/themes\n\npackages/x/locale\n\n# Docs templates\npackages/x/scripts/previewEditor/index.html\npackages/x/components/version/version.ts\npackages/x/components/version/version.tsx\npackages/x/components/version/token.json\npackages/x/components/version/token-meta.json\npackages/x/components/theme/interface/XMarkdownComponents.ts\n\npackages/x-markdown/src/plugins/version/version.ts\npackages/x-markdown/src/plugins/version/plugin-meta.json\npackages/x-markdown/src/plugins/version/token-meta.json\npackages/x-markdown/src/plugins/version/token.json\npackages/x-markdown/src/version/version.ts\n\npackages/x-sdk/src/version/version.ts\n\n# Playwright (from benchmark)\npackages/x-markdown/test-results/\npackages/x-markdown/src/XMarkdown/__benchmark__/playwright-report/\npackages/x-markdown/src/XMarkdown/__benchmark__/blob-report/\npackages/x-markdown/src/XMarkdown/__benchmark__/playwright/.cache/\npackages/x-markdown/src/XMarkdown/__benchmark__/playwright/.auth/\npackages/x-markdown/src/XMarkdown/__benchmark__/test-results\n" }, { "path": ".husky/commit-msg", "content": "#!/usr/bin/env sh\n# npx commitlint --edit $1" }, { "path": ".husky/pre-commit", "content": "lint-staged" }, { "path": ".lintstagedrc.json", "content": "{\n \"*.{ts,tsx,js,jsx,json,css,sh}\": [\"biome check --write --no-errors-on-unmatched\"],\n \"*.{md,yml}\": [\"prettier --ignore-unknown --write\"]\n}\n" }, { "path": ".npmrc", "content": "legacy-peer-deps=true" }, { "path": ".prettierrc", "content": "{\n \"endOfLine\": \"lf\",\n \"semi\": true,\n \"singleQuote\": true,\n \"tabWidth\": 2,\n \"printWidth\": 100,\n \"proseWrap\": \"never\",\n \"trailingComma\": \"all\",\n \"jsxSingleQuote\": false\n}\n" }, { "path": "CHANGELOG.en-US.md", "content": "---\norder: 6\ntitle: Changelog\ntoc: false\ntimeline: true\ntag: vVERSION\n---\n\n`@ant-design/x` follows [Semantic Versioning 2.0.0](http://semver.org/).\n\n#### Release Schedule\n\n- Weekly release: Patch version for routine bugfix.\n- Monthly release: minor version at the end for new features.\n- Major version release for breaking change and new features.\n\n---\n\n## 2.4.0\n\n`2026-03-13`\n\n### @ant-design/x\n\n- 🐛 Fix incorrect event handling in `useShortcutKeys`.[#1822](https://github.com/ant-design/x/pull/1822) by [cxybd](https://github.com/cxybd)\n- 🔥 New component Folder. [#1797](https://github.com/ant-design/x/pull/1797) by [kimteayon](https://github.com/kimteayon)\n- 🆕 Enhanced FileCard's `description`, `mask`, and `onClick` configuration capabilities. [#1807](https://github.com/ant-design/x/pull/1807) by [kimteayon](https://github.com/kimteayon)\n\n### @ant-design/x-markdown\n\n- 🆕 XMarkdown streaming rendering adds `tail` configuration, supporting custom tail content and custom tail components while avoiding tail rendering before incomplete components. [#1296](https://github.com/ant-design/x/pull/1296) by [Div627](https://github.com/Div627)\n- 🐛 Fixed XMarkdown custom component streaming state detection to correctly handle void elements and isolate `streamStatus` across multiple instances with the same component name. [#1590](https://github.com/ant-design/x/pull/1590) by [Last-Order](https://github.com/Last-Order)\n- 🛠 Exported XMarkdown's `StreamCacheTokenType` type for external reuse of streaming-related types. [#1592](https://github.com/ant-design/x/pull/1592) by [Last-Order](https://github.com/Last-Order)\n- 📖 Added XMarkdown Playground and refreshed the streaming, examples, and data-display documentation, including the AntV Infographic example. [#1779](https://github.com/ant-design/x/pull/1779) by [Div627](https://github.com/Div627), [#1780](https://github.com/ant-design/x/pull/1780) by [Div627](https://github.com/Div627), [#1814](https://github.com/ant-design/x/pull/1814) by [Div627](https://github.com/Div627)\n\n### @ant-design/x-skill\n\n- 🆕 Released x-markdown skill. [#1813](https://github.com/ant-design/x/pull/1813) by [Div627](https://github.com/Div627)\n\n### Others\n\n- 🛠 Upgraded all components' useMergedState to useControlledState. [#1808](https://github.com/ant-design/x/pull/1808) by [kimteayon](https://github.com/kimteayon)\n- 📖 Optimized official website to improve user experience. [#1814](https://github.com/ant-design/x/pull/1814) by [Div627](https://github.com/Div627), [#1793](https://github.com/ant-design/x/pull/1793) by [kimteayon](https://github.com/kimteayon), [#1792](https://github.com/ant-design/x/pull/1792) by [Div627](https://github.com/Div627), [#1780](https://github.com/ant-design/x/pull/1780) by [Div627](https://github.com/Div627), [#1779](https://github.com/ant-design/x/pull/1779) by [Div627](https://github.com/Div627)\n\n## 2.3.0\n\n`2026-02-26`\n\n### @ant-design/x\n\n- 🆕 Conversation's onActiveChange callback now returns both the activated item and its key value, while updating useMergedState to useControlledState. [#1762](https://github.com/ant-design/x/pull/1762) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Optimized the visual presentation of Sender's disabled state buttons, unified the addition of transparent border handling to ensure consistent appearance across different button variants when disabled. [#1751](https://github.com/ant-design/x/pull/1751) by [Rain120](https://github.com/Rain120)\n\n### @ant-design/x-markdown\n\n- 🆕 XMarkdown adds escapeRawHtml property, allowing users to choose whether to escape raw HTML during rendering. [#1769](https://github.com/ant-design/x/pull/1769) by [Div627](https://github.com/Div627)\n- 🐛 Fixed XMarkdown rendering when encountering unclosed inline code in lists, ensuring list markers are preserved in special unclosed cases. [#1739](https://github.com/ant-design/x/pull/1739) by [Div627](https://github.com/Div627)\n- 🐛 Improved parsing of block-level LaTeX formulas, with more tolerant handling of trailing whitespace and indentation, enhancing compatibility with different line ending formats and reducing misjudgment and rendering issues. [#1744](https://github.com/ant-design/x/pull/1744) by [Waiter](https://github.com/Waiter)\n- 🐛 Optimized dark mode CodeHighlighter and Mermaid plugin styling issues. [#1766](https://github.com/ant-design/x/pull/1766) by [menghany](https://github.com/menghany)\n\n### @ant-design/x-sdk\n\n- 🆕 useXChat adds queueRequest method, implementing initialization message sending for ConversationKey and SessionId. [#1761](https://github.com/ant-design/x/pull/1761) by [kimteayon](https://github.com/kimteayon)\n\n### @ant-design/x-skill\n\n- 🆕 Added skill installation commands, simultaneously releasing three skills: use-x-chat, x-chat-provider, and x-request. [#1753](https://github.com/ant-design/x/pull/1753), [#1767](https://github.com/ant-design/x/pull/1767) by [kimteayon](https://github.com/kimteayon)\n\n### Others\n\n- 🛠 Fixed build errors caused by dependency upgrades. [#1754](https://github.com/ant-design/x/pull/1754) by [kimteayon](https://github.com/kimteayon)\n- 🛠 Resolved domhandler's ModuleNotFoundError in CodeSandbox preview. [#1754](https://github.com/ant-design/x/pull/1754) by [Div627](https://github.com/Div627)\n\n## 2.2.2\n\n`2026-02-06`\n\n### @ant-design/x\n\n- 🛠 Fixed some documentation and types to support AI Coding. [#1733](https://github.com/ant-design/x/pull/1733) by [kimteayon](https://github.com/kimteayon)\n- 💄 Fixed Bubble.List style and semantic issues. [#1731](https://github.com/ant-design/x/pull/1731) by [anxLiang](https://github.com/anxLiang)\n- 🐛 Fixed Sender insert node replacement issue when replaceCharacters is configured. [#1727](https://github.com/ant-design/x/pull/1727) by [kimteayon](https://github.com/kimteayon)\n\n## 2.2.1\n\n`2026-01-30`\n\n### @ant-design/x\n\n- 💄 Fixed Bubble.List style issues. [#1713](https://github.com/ant-design/x/pull/1713) by [anxLiang](https://github.com/anxLiang), [#1704](https://github.com/ant-design/x/pull/1704) by [anxLiang](https://github.com/anxLiang)\n- 🐛 Fixed Node environment build errors caused by other third-party dependencies `esm` paths. [#1708](https://github.com/ant-design/x/pull/1708) by [kimteayon](https://github.com/kimteayon)\n\n### @ant-design/x-markdown\n\n- 🐛 Fixed streaming rendering cache invalidation issue where cache would prematurely commit and cause rendering anomalies when list items contained inline code (like - \\code\\`\\` ). [#1709](https://github.com/ant-design/x/pull/1709) by [Div627](https://github.com/Div627)\n- 🆕 Custom code rendering now accepts language information. [#1705](https://github.com/ant-design/x/pull/1705) by [Aarebecca](https://github.com/Aarebecca)\n\n### @ant-design/x-sdk\n\n- 🆕 When XRequest is used together with Chat Provider, it will additionally obtain the assembled message. [#1714](https://github.com/ant-design/x/pull/1714) by [kimteayon](https://github.com/kimteayon)\n\n### Others\n\n- 📖 Optimized official website to improve user experience. [#1717](https://github.com/ant-design/x/pull/1717) by [kimteayon](https://github.com/kimteayon), [#1707](https://github.com/ant-design/x/pull/1707) by [Div627](https://github.com/Div627)\n\n## 2.2.0\n\n`2026-01-26`\n\n### @ant-design/x\n\n- Sender\n - 🐛 Fixed cursor insertion position error when cursor is at skill position. [#1633](https://github.com/ant-design/x/pull/1633) by [IsDyh01](https://github.com/IsDyh01)\n - 🛠 Refactored node insertion position capability and rewrote test cases. [#1612](https://github.com/ant-design/x/pull/1612) by [kimteayon](https://github.com/kimteayon)\n- XProvider\n - 🐛 Fixed `iconPrefixCls` setting not taking effect. [#1656](https://github.com/ant-design/x/pull/1656) by [kimteayon](https://github.com/kimteayon)\n - 🐛 Fixed `prefix` setting not taking effect. [#1642](https://github.com/ant-design/x/pull/1642) by [kimteayon](https://github.com/kimteayon)\n - 🐛 Fixed `layer` setting issue. [#1616](https://github.com/ant-design/x/pull/1616) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed forced `antd` dependency on `es` path causing Node environment build errors. [#1645](https://github.com/ant-design/x/pull/1645) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed ThoughtChain layout causing animation stuttering. [#1641](https://github.com/ant-design/x/pull/1641) by [IsDyh01](https://github.com/IsDyh01)\n- 🐛 Fixed Think layout causing animation stuttering. [#1636](https://github.com/ant-design/x/pull/1636) by [IsDyh01](https://github.com/IsDyh01)\n- 🐛 Fixed Sources setting position but unable to locate content issue. [#1683](https://github.com/ant-design/x/pull/1683) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed Bubble.List internal height change scrollbar change error issue. [#1690](https://github.com/ant-design/x/pull/1690) by [anxLiang](https://github.com/anxLiang)\n- 🆕 Added Mermaid settings initialization configuration and operation bar functionality. [#1631](https://github.com/ant-design/x/pull/1631) by [Div627](https://github.com/Div627)\n- 🆕 Added Attachments card type setting capability. [#1610](https://github.com/ant-design/x/pull/1610) by [kimteayon](https://github.com/kimteayon)\n\n### @ant-design/x-sdk\n\n- 🆕 XRequest added reconnection capability. [#1629](https://github.com/ant-design/x/pull/1629) by [hylin](https://github.com/hylin)\n- 🆕 XRequest and XStream support stream data parsing with configurable delimiters `streamSeparator`, `partSeparator`, `kvSeparator`, while adding polyfill for TextDecoderStream to improve compatibility, and fixing the issue where undefined values were added to stream results. [#1611](https://github.com/ant-design/x/pull/1611) by [kimteayon](https://github.com/kimteayon)\n\n### @ant-design/x-markdown\n\n- 🆕 Enhanced XMarkdown parser to support custom components with placeholder protection. [#1668](https://github.com/ant-design/x/pull/1668) by [yanghuanrong](https://github.com/yanghuanrong)\n- 🆕 Added XMarkdown performance benchmarking capability for streaming Markdown rendering based on Playwright Component Testing. [#1314](https://github.com/ant-design/x/pull/1314) by [Div627](https://github.com/Div627)\n- 🆕 Added XMarkdown streaming syntax support for inline code caching. [#1630](https://github.com/ant-design/x/pull/1630) by [Div627](https://github.com/Div627)\n\n### Others\n\n- 📖 Optimized official website to improve user experience. [#1675](https://github.com/ant-design/x/pull/1675) by [hongxuWei](https://github.com/hongxuWei), [#1644](https://github.com/ant-design/x/pull/1644) by [kimteayon](https://github.com/kimteayon), [#1658](https://github.com/ant-design/x/pull/1658) by [kimteayon](https://github.com/kimteayon), [#1646](https://github.com/ant-design/x/pull/1646) by [kimteayon](https://github.com/kimteayon), [#1651](https://github.com/ant-design/x/pull/1651) by [kimteayon](https://github.com/kimteayon), [#1650](https://github.com/ant-design/x/pull/1650) by [Div627](https://github.com/Div627), [#1635](https://github.com/ant-design/x/pull/1635) by [IsDyh01](https://github.com/IsDyh01), [#1627](https://github.com/ant-design/x/pull/1627) by [Alexzjt](https://github.com/Alexzjt), [#1615](https://github.com/ant-design/x/pull/1615) by [Yx0201](https://github.com/Yx0201)\n\n## 2.1.3\n\n`2026-01-04`\n\n### @ant-design/x\n\n- 🐛 Fixed an undeclared dependency issue in Sender by replacing `classnames` with `clsx` and enabling dependency checks in `biome.json`. [#1608](https://github.com/ant-design/x/pull/1608) by [kimteayon](https://github.com/kimteayon)\n- 📖 Optimized official website to improve user experience. [#1605](https://github.com/ant-design/x/pull/1605) by [kimteayon](https://github.com/kimteayon)\n\n## 2.1.2\n\n`2025-12-30`\n\n### @ant-design/x\n\n- 💄 Fixed Actions `disliked` className error issue. [#1521](https://github.com/ant-design/x/pull/1521) by [kimteayon](https://github.com/kimteayon)\n- Sender\n - 🛠 Overall refactoring of Sender component implementation, while fixing some detailed cursor issues. [#1515](https://github.com/ant-design/x/pull/1515) [#1548](https://github.com/ant-design/x/pull/1548) by [kimteayon](https://github.com/kimteayon)\n - 💄 Fixed Sender component actions style conflict with antd Button causing rendering errors. [#1535](https://github.com/ant-design/x/pull/1535) by [kimteayon](https://github.com/kimteayon)\n - 🐛 Fixed the issue where cursor was too small when placeholder was empty in slot mode `skill`. [#1537](https://github.com/ant-design/x/pull/1537) by [kimteayon](https://github.com/kimteayon)\n - 🐛 Fixed the issue where undo stack was not updated when pasting text. [#1527](https://github.com/ant-design/x/pull/1527) by [Chiaki-xps](https://github.com/Chiaki-xps)\n- 🐛 Removed Bubble.List automatic scrolling to bottom logic for new messages, changed to manual control. [#1548](https://github.com/ant-design/x/pull/1548) by [anxLiang](https://github.com/anxLiang)\n- 💄 Fixed Prompts component animation demo not working issue. [#1580](https://github.com/ant-design/x/pull/1580) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed Actions.Feedback tooltip display anomaly issue. [#1591](https://github.com/ant-design/x/pull/1591) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed Attachments calling `ref.select()` error when no parameters passed. [#1587](https://github.com/ant-design/x/pull/1587) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed FileCard `overflow` display button not updating issue, and Image display failure when no `src` in image display. [#1587](https://github.com/ant-design/x/pull/1587) by [kimteayon](https://github.com/kimteayon)\n\n### @ant-design/x-sdk\n\n- 🐛 Fixed XChat unable to remotely load historical messages issue. [#1593](https://github.com/ant-design/x/pull/1593) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed OpenAIChatProvider and DeepSeekChatProvider non-streaming requests rendering content twice issue. [#1593](https://github.com/ant-design/x/pull/1593) by [kimteayon](https://github.com/kimteayon)\n\n### @ant-design/x-markdown\n\n- 💄 Fixed XMarkdown animation font color error issue. [#1531](https://github.com/ant-design/x/pull/1531) by [Div627](https://github.com/Div627)\n\n### Others\n\n- 🛠 Overall dependency refactoring and upgrade. [#1448](https://github.com/ant-design/x/pull/1448) by [yoyo837](https://github.com/yoyo837)\n- 📖 Optimized official website to improve user experience. [#1508](https://github.com/ant-design/x/pull/1508) by [kimteayon](https://github.com/kimteayon), [#1516](https://github.com/ant-design/x/pull/1516) by [kimteayon](https://github.com/kimteayon), [#1529](https://github.com/ant-design/x/pull/1529) by [fireairforce](https://github.com/fireairforce), [#1549](https://github.com/ant-design/x/pull/1549) by [kimteayon](https://github.com/kimteayon), [#1551](https://github.com/ant-design/x/pull/1551) by [Chiaki-xps](https://github.com/Chiaki-xps), [#1553](https://github.com/ant-design/x/pull/1553) by [Chiaki-xps](https://github.com/Chiaki-xps), [#1555](https://github.com/ant-design/x/pull/1555) by [Chiaki-xps](https://github.com/Chiaki-xps), [#1543](https://github.com/ant-design/x/pull/1543) by [IsDyh01](https://github.com/IsDyh01), [#1558](https://github.com/ant-design/x/pull/1558) by [Chiaki-xps](https://github.com/Chiaki-xps), [#1557](https://github.com/ant-design/x/pull/1557) by [Chiaki-xps](https://github.com/Chiaki-xps), [#1562](https://github.com/ant-design/x/pull/1562) by [hustcc](https://github.com/hustcc), [#1569](https://github.com/ant-design/x/pull/1569) by [kimteayon](https://github.com/kimteayon), [#1561](https://github.com/ant-design/x/pull/1561) by [Chiaki-xps](https://github.com/Chiaki-xps), [#1584](https://github.com/ant-design/x/pull/1584) by [kimteayon](https://github.com/kimteayon), [#1581](https://github.com/ant-design/x/pull/1581) by [teimurjan](https://github.com/teimurjan)\n\n## 2.1.1\n\n`2025-12-10`\n\n### @ant-design/x\n\n- Sender\n - 🐛 Fixed the issue where send shortcuts enter and shift + enter were not controlled by the disabled state of the submit button, and fixed the inconsistency between `onSubmit` shortcut keys and button parameters. [#1472](https://github.com/ant-design/x/pull/1472) by [kimteayon](https://github.com/kimteayon)\n - 🐛 Fixed the missing `skill` parameter in `onChange`, fixed the issue where placeholder was not displayed when slot mode only showed skill capabilities, and refactored `onChange` logic. [#1477](https://github.com/ant-design/x/pull/1477) by [kimteayon](https://github.com/kimteayon)\n - 🐛 Fixed the issue where send shortcuts enter and shift + enter were not triggered when `input` type slot was activated and focused in slot mode. [#1498](https://github.com/ant-design/x/pull/1498) by [kimteayon](https://github.com/kimteayon)\n- Attachment\n - 🐛 Fixed the issue where the last file was not uploaded after setting `maxCount`. [#1486](https://github.com/ant-design/x/pull/1486) by [kimteayon](https://github.com/kimteayon)\n - 🐛 Fixed the antd warning issue after uploading images. [#1492](https://github.com/ant-design/x/pull/1492) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed Mermaid rendering jitter issue. [#1497](https://github.com/ant-design/x/pull/1497) by [Div627](https://github.com/Div627)\n- 📖 Optimized official website to improve user experience. [#1464](https://github.com/ant-design/x/pull/1464) by [IsDyh01](https://github.com/IsDyh01), [#1483](https://github.com/ant-design/x/pull/1483) by [Chiaki-xps](https://github.com/Chiaki-xps), [#1463](https://github.com/ant-design/x/pull/1463) by [J-Da-Shi](https://github.com/J-Da-Shi), [#1489](https://github.com/ant-design/x/pull/1489) by [Chiaki-xps](https://github.com/Chiaki-xps), [#1499](https://github.com/ant-design/x/pull/1499) by [kimteayon](https://github.com/kimteayon), [#1500](https://github.com/ant-design/x/pull/1500) by [kimteayon](https://github.com/kimteayon), [#1501](https://github.com/ant-design/x/pull/1501) by [Samoy](https://github.com/Samoy)\n- 🛠 Modified dependency configuration for `mermaid`. [#1475](https://github.com/ant-design/x/pull/1475) by [Div627](https://github.com/Div627)\n\n### @ant-design/x-sdk\n\n- 🐛 Optimized message flow throttling and emission logic to avoid deep update errors caused by high-frequency streaming updates, improving real-time message stability and performance. [#1418](https://github.com/ant-design/x/pull/1418) by [Afee2019](https://github.com/Afee2019)\n\n### @ant-design/x-markdown\n\n- 🛠 Optimized `sideEffects` configuration. [#1408](https://github.com/ant-design/x/pull/1408) by [hongxuWei](https://github.com/hongxuWei)\n\n## 2.1.0\n\n`2025-12-05`\n\n### @ant-design/x\n\n- 🐛 Fixed Bubble css token `typingContent` configuration not taking effect. [#1435](https://github.com/ant-design/x/pull/1435) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed multiple component style loss issues caused by antd upgrade to 6.0.1. [#1441](https://github.com/ant-design/x/pull/1441) by [kimteayon](https://github.com/kimteayon), [#1446](https://github.com/ant-design/x/pull/1446) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed Bubble.List scrolling compatibility issue in Safari browser. [#1392](https://github.com/ant-design/x/pull/1392) by [anxLiang](https://github.com/anxLiang)\n- 🔥 New components HighlightCode and Mermaid. [#1402](https://github.com/ant-design/x/pull/1402) by [Div627](https://github.com/Div627)\n- 🆕 Added semantic implementation for Actions. [#1443](https://github.com/ant-design/x/pull/1443) by [kimteayon](https://github.com/kimteayon)\n- 🆕 Added semantic implementation for Suggestion, removed duplicate Enter trigger events, fixed the issue of `onSubmit` method being executed multiple times, added complete data return of `selectedOptions` to `onSelect` method, and refactored the option implementation using `useMergedState`. [#1406](https://github.com/ant-design/x/pull/1406) by [kimteayon](https://github.com/kimteayon)\n- 📖 Optimized official website to improve user experience. [#1444](https://github.com/ant-design/x/pull/1444) by [kimteayon](https://github.com/kimteayon)\n- 🆕 Added new slot type `content` and skill function `skill` for Sender. [#1377](https://github.com/ant-design/x/pull/1377) by [kimteayon](https://github.com/kimteayon)\n\n### @ant-design/x-sdk\n\n- 🐛 Fixed DeepSeekChatProvider's improper handling of newline characters in `` tag format causing XMarkdown rendering anomalies. [#1445](https://github.com/ant-design/x/pull/1445) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed useXChat `setMessages` method call not triggering re-rendering. [#1450](https://github.com/ant-design/x/pull/1450) by [hylin](https://github.com/hylin)\n- 🐛 Fixed missing rc-util dependency declaration. [#1456](https://github.com/ant-design/x/pull/1456) by [hylin](https://github.com/hylin)\n\n### @ant-design/x-markdown\n\n- 🐛 Replaced useStreaming regex to resolve iOS compatibility issues. [#1457](https://github.com/ant-design/x/pull/1457) by [Div627](https://github.com/Div627)\n- 📖 Improved documentation to enhance user experience. [#1451](https://github.com/ant-design/x/pull/1451) by [Div627](https://github.com/Div627)\n- 🛠 Migrated UI plugins HighlightCode and Mermaid to @ant-design/x to achieve more reasonable dependency relationships. [#1402](https://github.com/ant-design/x/pull/1402) by [Div627](https://github.com/Div627)\n\n## 2.0.1\n\n`2025-12-03`\n\n### @ant-design/x\n\n- 🐛 Fixed multiple component style loss issues caused by antd upgrade to 6.0.1. [#1428](https://github.com/ant-design/x/pull/1428) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed antd error when using Attachments component. [#1395](https://github.com/ant-design/x/pull/1395) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed Sender component `allowSpeech` custom disable error. [#1398](https://github.com/ant-design/x/pull/1398) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed missing semantic configuration for Sender.Switch component. [#1396](https://github.com/ant-design/x/pull/1396) by [kimteayon](https://github.com/kimteayon)\n- 🛠 Fixed test case failures caused by version upgrades. [#1393](https://github.com/ant-design/x/pull/1393) by [kimteayon](https://github.com/kimteayon)\n- 📖 Added 1.x official website links. [#1386](https://github.com/ant-design/x/pull/1386) by [kimteayon](https://github.com/kimteayon), [#1394](https://github.com/ant-design/x/pull/1394) by [kimteayon](https://github.com/kimteayon)\n- 📖 Optimized official website to improve user experience. [#1384](https://github.com/ant-design/x/pull/1384) by [kimteayon](https://github.com/kimteayon), [#1416](https://github.com/ant-design/x/pull/1416) by [IsDyh01](https://github.com/IsDyh01)\n\n### @ant-design/x-sdk\n\n- 📖 Comprehensive updates to official website directory, documentation, and examples. [#1419](https://github.com/ant-design/x/pull/1419) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed useXChat `requestFallback` adding errorInfo parameter to resolve inability to get API error data. [#1419](https://github.com/ant-design/x/pull/1419) by [kimteayon](https://github.com/kimteayon)\n\n### @ant-design/x-markdown\n\n- 🐛 Fixed HighlightCode plugin copy code error. [#1414](https://github.com/ant-design/x/pull/1414) by [Jimi1126](https://github.com/Jimi1126)\n- 🐛 Fixed XMarkdown rendering special characters failure. [#1413](https://github.com/ant-design/x/pull/1413) by [Div627](https://github.com/Div627)\n- 🐛 Fixed XMarkdown cache reset logic not taking effect due to old references. [#1420](https://github.com/ant-design/x/pull/1420) by [Div627](https://github.com/Div627)\n\n## 2.0.0\n\n`2025-11-22`\n\n🏆 Ant Design X 2.0.0 has been released!\n\n`@ant-design/x` - Smart UI Construction Framework\n\nA React UI library based on the Ant Design system, specifically designed for AI-driven interfaces. It includes ready-to-use intelligent chat components and seamless integration with API services, enabling rapid development of smart application interfaces.\n\n`@ant-design/x-markdown` - High-performance streaming rendering engine\n\nA Markdown rendering solution optimized for streaming content, featuring robust extensibility and exceptional performance with support for formulas, code highlighting, Mermaid diagrams, and more, ensuring a seamless content display experience.\n\n`@ant-design/x-sdk` - AI Chat Data Flow Management\n\nProvide a complete set of tool APIs, out-of-the-box AI chat application data flow management, simplify development processes, and enhance development efficiency.\n\n##### Upgrade Required\n\n🌟 We have prepared an upgrade guide. Please check the [details](/docs/react/migration-v2-cn).\n\n## 2.0.0-alpha.16\n\n`2025-11-17`\n\n### @ant-design/x\n\n- 🛠 Removed the components property while promoting internal properties. [#1338](https://github.com/ant-design/x/pull/1338) by [kimteayon](https://github.com/kimteayon)\n- 🆕 FileCard adds image generation process and loading/rendering capabilities. [#1311](https://github.com/ant-design/x/pull/1311) by [kimteayon](https://github.com/kimteayon)\n- 🆕 Think upgrades `blink` animation styles to css token. [#1318](https://github.com/ant-design/x/pull/1318) by [kimteayon](https://github.com/kimteayon)\n- 🆕 ThoughtChain upgrades `blink` animation styles to css token. [#1318](https://github.com/ant-design/x/pull/1318) by [kimteayon](https://github.com/kimteayon)\n- 📖 Optimized the official site to enhance user experience. [#1335](https://github.com/ant-design/x/pull/1335) by [kimteayon](https://github.com/kimteayon), [#1329](https://github.com/ant-design/x/pull/1329) by [kimteayon](https://github.com/kimteayon)\n\n### @ant-design/x-markdown\n\n- 🛠 Optimized markdown rendering with useMemo, and updated basic demo text and animation demo text. [#1337](https://github.com/ant-design/x/pull/1337) by [Div627](https://github.com/Div627)\n- 🆕 XMarkdown renders HTML tags with `disabled` and `checked` attributes exposed. [#1328](https://github.com/ant-design/x/pull/1328) by [Div627](https://github.com/Div627)\n- 🆕 XMarkdown `hasNextChunk` adds table rendering processing capability. [#1322](https://github.com/ant-design/x/pull/1322) by [Div627](https://github.com/Div627)\n- 🐛 Fixed XMarkdown default table rendering styles. [#1324](https://github.com/ant-design/x/pull/1324) by [Div627](https://github.com/Div627)\n- 🆕 XMarkdown `incompleteMarkdownComponentMap` adds multiple type renderings. [#1325](https://github.com/ant-design/x/pull/1325) by [Div627](https://github.com/Div627)\n- 📖 Optimized the official site to enhance user experience. [#1326](https://github.com/ant-design/x/pull/1326) by [Div627](https://github.com/Div627)\n\n## 2.0.0-alpha.15\n\n`2025-11-07`\n\n### @ant-design/x\n\n- 🛠 Upgraded antd dependency version to `6.00-alpha.4`. [#1300](https://github.com/ant-design/x/pull/1300) by [kimteayon](https://github.com/kimteayon)\n- 📖 Optimized the official site to enhance user experience. [#1303](https://github.com/ant-design/x/pull/1303) by [kimteayon](https://github.com/kimteayon)\n\n### @ant-design/x-markdown\n\n- 🛠 Refactored markdown theme styles. [#1305](https://github.com/ant-design/x/pull/1305) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed the issue where `code` tag `streamStatus` state was incorrect. [#1307](https://github.com/ant-design/x/pull/1307) by [Div627](https://github.com/Div627)\n- 🛠 Transformed `index.less` to `index.css`. [#1306](https://github.com/ant-design/x/pull/1306) by [Div627](https://github.com/Div627)\n- 🐛 Fixed `SteamingOption` to `StreamingOption`. [#1301](https://github.com/ant-design/x/pull/1301) by [Div627](https://github.com/Div627)\n- 🐛 Fixed the issue where dompurifyConfig.ALLOWED_TAGS was incorrectly merged into ADD_TAGS. [#1297](https://github.com/ant-design/x/pull/1297) by [Div627](https://github.com/Div627)\n\n## 2.0.0-alpha.13\n\n`2025-10-30`\n\n### @ant-design/x\n\n- 🐛 Removed Bubble.List `suffix` property and modified typing through CSS Token. [#1285](https://github.com/ant-design/x/pull/1285) by [kimteayon](https://github.com/kimteayon)\n- 🆕 Added flashing animation effect to ThoughtChain.Item component. [#1278](https://github.com/ant-design/x/pull/1278) by [kimteayon](https://github.com/kimteayon)\n- 🆕 Added flashing animation effect to Think component. [#1278](https://github.com/ant-design/x/pull/1278) by [kimteayon](https://github.com/kimteayon)\n- 🆕 Added flashing animation effect to ThoughtChain component. [#1286](https://github.com/ant-design/x/pull/1286) by [kimteayon](https://github.com/kimteayon)\n- 🆕 Added fadeIn and fadeInLeft effects to Actions. [#1288](https://github.com/ant-design/x/pull/1288) by [kimteayon](https://github.com/kimteayon), [#1289](https://github.com/ant-design/x/pull/1289) by [kimteayon](https://github.com/kimteayon)\n- 🆕 Added fadeIn and fadeInLeft effects to Prompts. [#1289](https://github.com/ant-design/x/pull/1289) by [kimteayon](https://github.com/kimteayon)\n- 📖 Optimized the official site to enhance user experience. [#1290](https://github.com/ant-design/x/pull/1290) by [Rain120](https://github.com/Rain120)\n\n### @ant-design/x-markdown\n\n- 🐛 Fixed the issue where the renderer link passed in was overwritten. [#1276](https://github.com/ant-design/x/pull/1276) by [Div627](https://github.com/Div627)\n\n## 2.0.0-alpha.12\n\n`2025-10-29`\n\n### @ant-design/x\n\n- 🆕 Attachments Ref adds `select` method to support file selection capability, while fixing the issue where the upload button still appears after reaching the maximum quantity when a maximum limit is set. [#1266](https://github.com/ant-design/x/pull/1266) by [kimteayon](https://github.com/kimteayon)\n- 📖 Optimized the official site to enhance user experience. [#1269](https://github.com/ant-design/x/pull/1269) by [kimteayon](https://github.com/kimteayon), [#1274](https://github.com/ant-design/x/pull/1274) by [kimteayon](https://github.com/kimteayon)\n\n### @ant-design/x-markdown\n\n- 🐛 Fixed KaTeX plugin rendering failure and exception throwing issues, modified formula rendering rules to reduce rendering exceptions. [#1265](https://github.com/ant-design/x/pull/1265) by [Div627](https://github.com/Div627)\n- 📖 Added code examples for XMarkdown handling Chinese links. [#1270](https://github.com/ant-design/x/pull/1270) by [kimteayon](https://github.com/kimteayon)\n- 🆕 `code` and `pre` tags now return rendering status `streamStatus` and block-level identifier `block` during rendering. [#1272](https://github.com/ant-design/x/pull/1272) by [Div627](https://github.com/Div627)\n- 🐛 Fixed duplicate DOM keys when rendering markdown. [#1273](https://github.com/ant-design/x/pull/1273) by [Div627](https://github.com/Div627)\n\n## 2.0.0-alpha.11\n\n`2025-10-27`\n\n### @ant-design/x\n\n- 🆕 Sender slot configuration changed to mutable properties, in slot mode the `insert` method adds `replaceCharacters` parameter to support replacement functionality, and the `focus` method adds slot `key` configuration to support focusing on specific slots. [#1259](https://github.com/ant-design/x/pull/1259) by [kimteayon](https://github.com/kimteayon)\n- 🆕 Sources inline mode supports specifying the currently active panel, adds `activeKey` property, and optimizes panel switching interaction styles for better experience. [#1261](https://github.com/ant-design/x/pull/1261) by [kimteayon](https://github.com/kimteayon)\n- 🆕 Bubble.List optimized scrollbar layout, implementation, and semantics. [#1263](https://github.com/ant-design/x/pull/1263) by [kimteayon](https://github.com/kimteayon)\n\n### @ant-design/x-markdown\n\n- 🐛 Fixed inconsistent parameter structure issue for XMarkdown custom components under different states. [#1260](https://github.com/ant-design/x/pull/1260) by [Div627](https://github.com/Div627)\n- 📖 Added XMarkdown code examples. [#1262](https://github.com/ant-design/x/pull/1262) by [kimteayon](https://github.com/kimteayon)\n\n## 2.0.0-alpha.10\n\n`2025-10-23`\n\n### @ant-design/x\n\n- 🔥 New component Sources. [#1250](https://github.com/ant-design/x/pull/1250) by [hy993658052](https://github.com/hy993658052)\n- 🆕 Bubble adds two subcomponents: Bubble.System and Bubble.Divider. [#1239](https://github.com/ant-design/x/pull/1239) by [anxLiang](https://github.com/anxLiang) and [kimteayon](https://github.com/kimteayon)\n- Sender\n - 🆕 Added slot focus event functionality. [#1221](https://github.com/ant-design/x/pull/1221) by [kimteayon](https://github.com/kimteayon)\n - 🐛 Fixed the issue where `onPasteFile` callback data was incorrect when pasting multiple files in the input box. [#1221](https://github.com/ant-design/x/pull/1221) by [kimteayon](https://github.com/kimteayon)\n - 🐛 Fixed accessibility issues caused by SVG not being internationalized. [#1243](https://github.com/ant-design/x/pull/1243) by [kimteayon](https://github.com/kimteayon)\n- FileCard\n - 🆕 Added semantic implementation. [#1220](https://github.com/ant-design/x/pull/1220) by [kimteayon](https://github.com/kimteayon)\n - 🆕 Added support for `jfif` type. [#1248](https://github.com/ant-design/x/pull/1248) by [IsDyh01](https://github.com/IsDyh01)\n- 🆕 Attachments added semantic implementation. [#1220](https://github.com/ant-design/x/pull/1220) by [kimteayon](https://github.com/kimteayon)\n- 📖 Optimized the official site to enhance user experience. [#1216](https://github.com/ant-design/x/pull/1216) by [kimteayon](https://github.com/kimteayon), [#1217](https://github.com/ant-design/x/pull/1217) by [Div627](https://github.com/Div627), [#1218](https://github.com/ant-design/x/pull/1218) by [IsDyh01](https://github.com/IsDyh01), [#1224](https://github.com/ant-design/x/pull/1224) by [kimteayon](https://github.com/kimteayon), [#1232](https://github.com/ant-design/x/pull/1232) by [IsDyh01](https://github.com/IsDyh01), [#1233](https://github.com/ant-design/x/pull/1233) by [kimteayon](https://github.com/kimteayon), [#1243](https://github.com/ant-design/x/pull/1243) by [kimteayon](https://github.com/kimteayon), [#1247](https://github.com/ant-design/x/pull/1247) by [elrrrrrrr](https://github.com/elrrrrrrr)\n\n### @ant-design/x-markdown\n\n- 🆕 XMarkdown adds rendering component configuration `incomplete` for tags that need to be closed during the rendering process and corresponding functionality. [#1223](https://github.com/ant-design/x/pull/1223) by [Div627](https://github.com/Div627)\n- 🐛 Fixed the issue where XMarkdown `openLinksInNewTab` property configuration was ineffective. [#1253](https://github.com/ant-design/x/pull/1253) by [Div627](https://github.com/Div627)\n- 🐛 Fixed the issue of repeated rendering in XMarkdown animations. [#1255](https://github.com/ant-design/x/pull/1255) by [Div627](https://github.com/Div627)\n- 🆕 Enhanced XMarkdown's ability to identify formula rendering tags. [#1255](https://github.com/ant-design/x/pull/1255) by [Div627](https://github.com/Div627)\n\n### @ant-design/x-sdk\n\n- 🐛 Fixed the issue where useXChat handling stream data server errors caused parameter problems in the `requestFallback` callback. [#1224](https://github.com/ant-design/x/pull/1224) by [kimteayon](https://github.com/kimteayon)\n- 🆕 Added implementation for activeConversationKey in useXConversations. [#1252](https://github.com/ant-design/x/pull/1252) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed the non-multi-instance issue of useXChat `isRequesting`, and optimized the callback parameters for `requestPlaceholder` and `requestFallback`. [#1254](https://github.com/ant-design/x/pull/1254) by [kimteayon](https://github.com/kimteayon)\n\n## 2.0.0-alpha.9\n\n`2025-09-24`\n\n### @ant-design/x-markdown\n\n- 🐛 Fixed code highlighting plugin style loss, resolved component matching issues with nested child elements, and removed table text-align attribute from default styles. [#1212](https://github.com/ant-design/x/pull/1212) by [Div627](https://github.com/Div627)\n\n## 2.0.0-alpha.8\n\n`2025-09-22`\n\n### @ant-design/x\n\n- Bubble\n - 🆕 Bubble.List adds `extra` parameter, which supports custom functions with useXChat. [#1195](https://github.com/ant-design/x/pull/1195) by [kimteayon](https://github.com/kimteayon)\n - 🐛 Fixed the issue where the content height was fixed in the `loading` state. [#1178](https://github.com/ant-design/x/pull/1178) by [kimteayon](https://github.com/kimteayon)\n - 🐛 Fixed component type export naming error. [#1182](https://github.com/ant-design/x/pull/1182) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed ThoughtChain.Item component type export naming error. [#1178](https://github.com/ant-design/x/pull/1178) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed the issue of missing listening components in XProvider. [#1178](https://github.com/ant-design/x/pull/1178) by [kimteayon](https://github.com/kimteayon)\n\n### @ant-design/x-markdown\n\n- 🛠 Refactored animation-related implementation. [#1198](https://github.com/ant-design/x/pull/1198) by [Div627](https://github.com/Div627), [#1204](https://github.com/ant-design/x/pull/1204) by [Div627](https://github.com/Div627)\n- 🐛 Fixed plugin export type error, and added examples and documentation. [#1187](https://github.com/ant-design/x/pull/1187) by [Div627](https://github.com/Div627)\n- 🐛 Fixed rendering exception when switching Mermaid plugin. [#1175](https://github.com/ant-design/x/pull/1175) by [Div627](https://github.com/Div627)\n- 🆕 Added semantic implementation for HighlightCode and Mermaid plugins. [#1178](https://github.com/ant-design/x/pull/1178) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed incomplete theme style override in XMarkdown. [#1182](https://github.com/ant-design/x/pull/1182) by [kimteayon](https://github.com/kimteayon)\n\n### @ant-design/x-sdk\n\n- 🆕 useXChat `setMessage` now supports a callback function to get the original message, and `onRequest` and `onReload` add an `extra` parameter to support custom functions. [#1195](https://github.com/ant-design/x/pull/1195) by [kimteayon](https://github.com/kimteayon)\n\n### Others\n\n- 🆕 Updated the overall site documentation. [#1194](https://github.com/ant-design/x/pull/1194) by [kimteayon](https://github.com/kimteayon)\n- 🆕 Updated the showcase functionality, added 'Ultramodern' showcase. [#1184](https://github.com/ant-design/x/pull/1184) by [kimteayon](https://github.com/kimteayon), [#1195](https://github.com/ant-design/x/pull/1195) by [kimteayon](https://github.com/kimteayon), [#1194](https://github.com/ant-design/x/pull/1194) by [kimteayon](https://github.com/kimteayon)\n- 📖 Optimized the official site to enhance user experience. [#1170](https://github.com/ant-design/x/pull/1170) by [jinyang](https://github.com/jinyang), [#1186](https://github.com/ant-design/x/pull/1186) by [jinyang](https://github.com/jinyang), [#1192](https://github.com/ant-design/x/pull/1192) by [iamkun-2](https://github.com/iamkun-2), [#1193](https://github.com/ant-design/x/pull/1193) by [iamkun-2](https://github.com/iamkun-2), [#1197](https://github.com/ant-design/x/pull/1197) by [elrrrrrrr](https://github.com/elrrrrrrr), [#1199](https://github.com/ant-design/x/pull/1199) by [Div627](https://github.com/Div627)\n\n## 2.0.0-alpha.7\n\n`2025-09-14`\n\n### @ant-design/x\n\n- Bubble\n - 💄 Fixed the default `white-space` style issue. [#1147](https://github.com/ant-design/x/pull/1147) by [kimteayon](https://github.com/kimteayon)\n - 💄 Fixed missing semantics and incorrect height in `loading` state under Bubble.List. [#1162](https://github.com/ant-design/x/pull/1162) by [kimteayon](https://github.com/kimteayon)\n - 🐛 Fixed type export and documentation import errors. [#1160](https://github.com/ant-design/x/pull/1160) by [kimteayon](https://github.com/kimteayon)\n- 📖 Removed deprecated tools `useXAgent` and `useXChat`, and updated or replaced related documentation with `X SDK`. [#1148](https://github.com/ant-design/x/pull/1148) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed the missing `status` display issue in the FileCard component. [#1156](https://github.com/ant-design/x/pull/1156) by [hy993658052](https://github.com/hy993658052)\n- 🐛 Fixed the issue where the Sender component could not paste Excel cell text when file paste was enabled. [#1167](https://github.com/ant-design/x/pull/1167) by [kimteayon](https://github.com/kimteayon)\n\n### @ant-design/x-markdown\n\n- 🆕 Added Mermaid plugin operation functionality. [#1135](https://github.com/ant-design/x/pull/1135) by [Div627](https://github.com/Div627)\n- 🐛 Fixed the streaming effect in XMarkdown. [#1135](https://github.com/ant-design/x/pull/1135) by [Div627](https://github.com/Div627)\n- 🆕 Added plugin internationalization and theme customization features, along with documentation upgrades. [#1135](https://github.com/ant-design/x/pull/1135) by [kimteayon](https://github.com/kimteayon)\n- 🆕 Added `openLinksInNewTab` configuration for XMarkdown links and adjusted theme colors. [#1164](https://github.com/ant-design/x/pull/1164) by [Div627](https://github.com/Div627)\n- 🐛 Fixed style conflicts between XMarkdown and documentation markdown. [#1161](https://github.com/ant-design/x/pull/1161) by [kimteayon](https://github.com/kimteayon)\n\n### @ant-design/x-sdk\n\n- 🛠 Refactored the `isRequesting` property in the useXChat tool, upgrading it from a method to an observable variable. [#1168](https://github.com/ant-design/x/pull/1168) by [hylin](https://github.com/hylin)\n- 🆕 Added message `abort` status to the useXChat tool, fixed the `message` parameter error in the `requestFallback` callback method, and removed error state message filtering. [#1171](https://github.com/ant-design/x/pull/1171) by [kimteayon](https://github.com/kimteayon)\n\n### Others\n\n- 📖 Optimized the official site to enhance user experience. [#1169](https://github.com/ant-design/x/pull/1169) by [hylin](https://github.com/hylin)\n- 📖 Updated documentation for introduction, model integration, agent integration, X SDK, and template code. [#1171](https://github.com/ant-design/x/pull/1171) by [kimteayon](https://github.com/kimteayon)\n\n## 2.0.0-alpha.6\n\n`2025-08-28`\n\n### @ant-design/x\n\n- 🐛 Fixed the issue where pressing `Enter` in normal mode of the Sender component would trigger `Submit` when selecting a candidate word. [#1144](https://github.com/ant-design/x/pull/1144) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed the issue where the Sender component could not insert a new line when `submitType` was set to `shiftEnter` in slot mode. [#1143](https://github.com/ant-design/x/pull/1143) by [kimteayon](https://github.com/kimteayon)\n- 💄 Fixed the abnormal `margin` style when the `description` content of ThoughtChain.Item wrapped to a new line.\n- 🛠 Refactored the template room using `@ant-design/x-sdk`. [#1139](https://github.com/ant-design/x/pull/1139) by [hylin](https://github.com/hylin)\n- 🐛 Fixed the persistent display of the `prefix` in the Bubble component. [#1137](https://github.com/ant-design/x/pull/1137) by [anxLiang](https://github.com/anxLiang)\n- 📖 Added documentation to explain the scrolling container issue in Bubble.List. [#1133](https://github.com/ant-design/x/pull/1133) by [anxLiang](https://github.com/anxLiang)\n- 🐛 Fixed the issue where uploaded images in the Attachment component were not displayed. [#1140](https://github.com/ant-design/x/pull/1140) by [hy993658052](https://github.com/hy993658052)\n- 🐛 Fixed semantic issues and size display problems in the FileCard component. [#1130](https://github.com/ant-design/x/pull/1130) by [kimteayon](https://github.com/kimteayon)\n\n### Others\n\n- 📦 Upgraded the father configuration. [#1125](https://github.com/ant-design/x/pull/1125) by [fireairforce](https://github.com/fireairforce)\n- 📖 Optimized the official site to enhance user experience. [#1142](https://github.com/ant-design/x/pull/1142) by [kimteayon](https://github.com/kimteayon)\n\n## 2.0.0-alpha.5\n\n`2025-08-20`\n\n### @ant-design/x\n\n- 🆕 Added subcomponent features for Actions, including Actions.Copy, Actions.Audio, and Actions.Item. [#1121](https://github.com/ant-design/x/pull/1121) by [kimteayon](https://github.com/kimteayon)\n- Bubble\n - 🆕 Added functionality to render content with line breaks and tabs when `string content` is provided. [#1127](https://github.com/ant-design/x/pull/1127) by [anxLiang](https://github.com/anxLiang)\n - 🆕 Added semantic implementation. [#1116](https://github.com/ant-design/x/pull/1116) by [kimteayon](https://github.com/kimteayon)\n - 🐛 Optimized styles and type issues. [#1108](https://github.com/ant-design/x/pull/1108) by [anxLiang](https://github.com/anxLiang)\n- 🆕 Added semantic configuration for the Sender component. [#1116](https://github.com/ant-design/x/pull/1116) by [kimteayon](https://github.com/kimteayon)\n\n### @ant-design/x-sdk\n\n- 🛠 Overall optimization of X SDK. [#1114](https://github.com/ant-design/x/pull/1114) by [hylin](https://github.com/hylin)\n\n### Others\n\n- 📖 Refactored the template room using X SDK. [#1139](https://github.com/ant-design/x/pull/1139) by [hylin](https://github.com/hylin)\n- 📖 Optimized the official site to enhance user experience. [#1124](https://github.com/ant-design/x/pull/1124) by [kimteayon](https://github.com/kimteayon), [#1123](https://github.com/ant-design/x/pull/1123) by [kimteayon](https://github.com/kimteayon)\n- 🛠 Optimized the release process. [#1115](https://github.com/ant-design/x/pull/1115) by [kimteayon](https://github.com/kimteayon)\n\n## 2.0.0-alpha.3\n\n`2025-08-14`\n\n### @ant-design/x-markdown\n\n- 🛠 Optimized version logic, configuration, and documentation. [#1112](https://github.com/ant-design/x/pull/1112) by [Div627](https://github.com/Div627)\n\n## 2.0.0-alpha.1\n\n`2025-08-12`\n\n### @ant-design/x\n\n- 🛠 Refactored and upgraded the Bubble component. [#1100](https://github.com/ant-design/x/pull/1100) by [anxLiang](https://github.com/anxLiang), [#1077](https://github.com/ant-design/x/pull/1077) by [anxLiang](https://github.com/anxLiang)\n- 🛠 Refactored and upgraded the Bubble.List component. [#1077](https://github.com/ant-design/x/pull/1077) by [anxLiang](https://github.com/anxLiang)\n- 🐛 Fixed the issue where the `readOnly` and `loading` logic of the Bubble component did not take effect. [#1101](https://github.com/ant-design/x/pull/1101) by [kimteayon](https://github.com/kimteayon)\n\n### Others\n\n- 🛠 Optimized the release process. [#1098](https://github.com/ant-design/x/pull/1098) by [kimteayon](https://github.com/kimteayon)\n- 📖 Optimized the official site to enhance user experience. [#1087](https://github.com/ant-design/x/pull/1087) by [kimteayon](https://github.com/kimteayon)\n\n## 2.0.0-alpha.0\n\n`2025-08-05`\n\n### @ant-design/x\n\n- 🔥 Added new component FileCard. [#1094](https://github.com/ant-design/x/pull/1094) by [hy993658052](https://github.com/hy993658052)\n- 🔥 Added new component Notification. [#973](https://github.com/ant-design/x/pull/973) by [kimteayon](https://github.com/kimteayon)\n- 🔥 Added new component Think. [#970](https://github.com/ant-design/x/pull/970) [#966](https://github.com/ant-design/x/pull/966) [#946](https://github.com/ant-design/x/pull/946) by [hy993658052](https://github.com/hy993658052)\n- 🛠 Refactored and upgraded the Attachments component.\n- 🛠 Refactored and upgraded the Actions component. [#994](https://github.com/ant-design/x/pull/994) by [vanndxh](https://github.com/vanndxh)\n- 🛠 Refactored and upgraded the Conversations component. [#955](https://github.com/ant-design/x/pull/955) [#954](https://github.com/ant-design/x/pull/954) [#937](https://github.com/ant-design/x/pull/937) by [kimteayon](https://github.com/kimteayon)\n- 🛠 Refactored and upgraded the Sender component. [#1073](https://github.com/ant-design/x/pull/1073), [#962](https://github.com/ant-design/x/pull/962) by [kimteayon](https://github.com/kimteayon), [Chuck-Ray](https://github.com/Chuck-Ray)\n- 🛠 Refactored and upgraded the ThoughtChain component. [#985](https://github.com/ant-design/x/pull/985) by [kimteayon](https://github.com/kimteayon)\n- 🆕 Added `Ref` functionality to all components. [#1081](https://github.com/ant-design/x/pull/1081) by [kimteayon](https://github.com/kimteayon)\n- 🆕 Integrated internationalization logic into the XProvider component. [#952](https://github.com/ant-design/x/pull/952) by [kimteayon](https://github.com/kimteayon)\n\n### @ant-design/x-markdown\n\n- 🔥 Added new component XMarkdown. [#1060](https://github.com/ant-design/x/pull/1060), [#989](https://github.com/ant-design/x/pull/989) by [Div627](https://github.com/Div627)\n- 🔥 Added new plugin Latex. [#1060](https://github.com/ant-design/x/pull/1060), [#989](https://github.com/ant-design/x/pull/989) by [Div627](https://github.com/Div627)\n- 🔥 Added new plugin HighlightCode. [#1060](https://github.com/ant-design/x/pull/1060), [#989](https://github.com/ant-design/x/pull/989) by [Div627](https://github.com/Div627)\n- 🔥 Added new plugin Mermaid. [#1060](https://github.com/ant-design/x/pull/1060), [#989](https://github.com/ant-design/x/pull/989) by [Div627](https://github.com/Div627)\n\n### @ant-design/x-sdk\n\n- 🔥 Added new tool useXChat. [#1098](https://github.com/ant-design/x/pull/1098) by [hylin](https://github.com/hylin)\n- 🔥 Added new tool useXConversations. [#1098](https://github.com/ant-design/x/pull/1098) by [hylin](https://github.com/hylin)\n- 🔥 Added new tool Chat Provider. [#1098](https://github.com/ant-design/x/pull/1098) by [hylin](https://github.com/hylin)\n- 🔥 Added new tool XRequest. [#1098](https://github.com/ant-design/x/pull/1098) by [hylin](https://github.com/hylin)\n- 🔥 Added new tool XStream. [#1098](https://github.com/ant-design/x/pull/1098) by [hylin](https://github.com/hylin)\n\n### Others\n\n- 🛠 The overall framework has been upgraded to Monorepo.[#823](https://github.com/ant-design/x/pull/823) by [elrrrrrrr](https://github.com/elrrrrrrr)\n- 🛠 Upgraded all components to Ant Design V6. [#1012](https://github.com/ant-design/x/pull/1012) by [kimteayon](https://github.com/kimteayon)\n- 🛠 Upgraded and adjusted the release logic of Ant Design X. [#1098](https://github.com/ant-design/x/pull/1098), [#1009](https://github.com/ant-design/x/pull/1009) by [kimteayon](https://github.com/kimteayon)\n- 📖 Optimized the official site to enhance user experience. [#1083](https://github.com/ant-design/x/pull/1083) by [kimteayon](https://github.com/kimteayon), [#1001](https://github.com/ant-design/x/pull/1001) by [elrrrrrrr](https://github.com/elrrrrrrr)\n\n## 1.6.1\n\n`2025-09-12`\n\n- 🐛 Fixed ThoughtChain component `title` could not display the collapsed title when passing `ReactNode`. [#1172](https://github.com/ant-design/x/pull/1172) by [IsDyh01](https://github.com/IsDyh01)\n- 🐛 Fixed Sender component `LoadingButton` would display two icons when the `icon ` property is passed. [#1145](https://github.com/ant-design/x/pull/1145) by [IsDyh01](https://github.com/IsDyh01)\n- 🐛 Fixed semantic loss in Sender component `content`. [#703](https://github.com/ant-design/x/pull/703) by [HomyeeKing](https://github.com/HomyeeKing)\n- 🐛 Removed redundant condition checks in Bubble component typing effect prefix logic. [#1091](https://github.com/ant-design/x/pull/1091) by [AqingCyan](https://github.com/AqingCyan)\n- 🐛 Fixed missing `updating` status in useXChat. [#833](https://github.com/ant-design/x/pull/833) by [wzc520pyfm](https://github.com/wzc520pyfm)\n- 🐛 Fixed the exception in Suggestion component when items is an empty array in `useActive`. [#824](https://github.com/ant-design/x/pull/824) by [LengYXin](https://github.com/LengYXin)\n- 📖 Improved the official site for better user experience. [#960](https://github.com/ant-design/x/pull/960) by [wzc520pyfm](https://github.com/wzc520pyfm), [#1048](https://github.com/ant-design/x/pull/1048) by [wzc520pyfm](https://github.com/wzc520pyfm), [#1118](https://github.com/ant-design/x/pull/1118) by [afc163](https://github.com/afc163), [#1122](https://github.com/ant-design/x/pull/1122) by [fireairforce](https://github.com/fireairforce), [#1120](https://github.com/ant-design/x/pull/1120) by [IsDyh01](https://github.com/IsDyh01)\n\n## 1.6.0\n\n`2025-07-30`\n\n- 🆕 Attachments component `FileCard` adds icon and type configuration. [#1006](https://github.com/ant-design/x/pull/1006) by [kieranwv](https://github.com/kieranwv)\n- 📖 Added documentation and demo for Toolbox Agent integration. [#1063](https://github.com/ant-design/x/pull/1063) by [iamkun-2](https://github.com/iamkun-2)\n- 📖 Improved official site for better user experience. [#1054](https://github.com/ant-design/x/pull/1054) by [hylin](https://github.com/hylin), [#1056](https://github.com/hylin)\n\n## 1.5.0\n\n`2025-07-16`\n\n- 🆕 Added Bubble component support for `onScroll` event listener. [#1021](https://github.com/ant-design/x/pull/1021) by [QdabuliuQ](https://github.com/QdabuliuQ)\n- 🐛 Removed duplicate TypeScript type declaration in Bubble component. [#1032](https://github.com/ant-design/x/pull/1032) by [wzc520pyfm](https://github.com/wzc520pyfm)\n- 🐛 Fixed Conversations `onActiveChange` being triggered when a disabled `menu` item is clicked. [#1024](https://github.com/ant-design/x/pull/1024) by [QdabuliuQ](https://github.com/QdabuliuQ)\n- 🐛 Fixed semantic configuration for Attachments component `FileList`. [#1017](https://github.com/ant-design/x/pull/1017) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Added html configuration for Actions component. [#995](https://github.com/ant-design/x/pull/995) by [vanndxh](https://github.com/vanndxh)\n- 🐛 Fixed Conversations label display issue and improved semantic configuration. [#898](https://github.com/ant-design/x/pull/898) by [yuanliu147](https://github.com/yuanliu147)\n- 📖 Improved official site for better user experience. [#940](https://github.com/ant-design/x/pull/940) by [coding-ice](https://github.com/coding-ice), [#969](https://github.com/ant-design/x/pull/969) by [afc163](https://github.com/afc163), [#968](https://github.com/ant-design/x/pull/968) by [afc163](https://github.com/afc163), [#1019](https://github.com/ant-design/x/pull/1019) by [hylin](https://github.com/hylin),[#1036](https://github.com/ant-design/x/pull/1036) by [kimteayon](https://github.com/kimteayon)\n\n## 1.4.0\n\n`2025-05-30`\n\n- 🔥 New Component Actions.[#768](https://github.com/ant-design/x/pull/768) by [vanndxh](https://github.com/vanndxh)\n- 🐛 Fix the issue where Bubble.List `footer` and `header` cannot retrieve keys.[#876](https://github.com/ant-design/x/pull/876) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fix the issue of overflow and ellipsis of Conversations list titles.[#877](https://github.com/ant-design/x/pull/877) by [kimteayon](https://github.com/kimteayon)\n- 📖 Enhance the official website to improve user experience.[#816](https://github.com/ant-design/x/pull/816) by [Rain120](https://github.com/Rain120)、[#880](https://github.com/ant-design/x/pull/880) by [kimteayon](https://github.com/kimteayon)\n\n## 1.3.0\n\n`2025-05-21`\n\n- 📖 Add Conversation type export. [#258](https://github.com/ant-design/x/pull/258) by [ONLY-yours](https://github.com/ONLY-yours)\n- 💄 Fixed the issue that the Prompts scroll bar is always displayed. [#785](https://github.com/ant-design/x/pull/785) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fix Suggestion warning for using antd deprecated API `onDropdownVisibleChange`. [#827](https://github.com/ant-design/x/pull/827) by [zombieJ](https://github.com/zombieJ)\n- 🆕 Extend Bubble`content` to `footer` and `header` method implementation parameters, and add Demo implementation.[#683](https://github.com/ant-design/x/pull/683) by [L-Hknu](https://github.com/L-Hknu) and [kimteayon](https://github.com/kimteayon)\n- 📖 Fixed the security issue of Api Key being exposed on the site.[#840](https://github.com/ant-design/x/pull/840) by [kimteayon](https://github.com/kimteayon)\n- 📖 Enhance the official website to improve user experience.[#783](https://github.com/ant-design/x/pull/783) by [kimteayon](https://github.com/kimteayon) ,[#229](https://github.com/ant-design/x/pull/229) by [afc163](https://github.com/afc163) ,[#835](https://github.com/ant-design/x/pull/835) by [kimteayon](https://github.com/kimteayon) ,[#814](https://github.com/ant-design/x/pull/814) by [wzc520pyfm](https://github.com/wzc520pyfm)\n\n## 1.2.0\n\n`2025-04-25`\n\n- 🐛 Delete Conversations ellipsis tooltip , fix 'tooltip' display error issue.[#776](https://github.com/ant-design/x/pull/776) by [afc163](https://github.com/afc163)\n- 🐛 Fixed Attachments `image` card style.[#751](https://github.com/ant-design/x/pull/751) by [wzc520pyfm](https://github.com/wzc520pyfm)\n- 🐛 Fixed ThoughtChain controlled issue.[#752](https://github.com/ant-design/x/pull/752) by [Youzi2233](https://github.com/Youzi2233)\n- XRequest\n - 🆕 XRequestCallbacks adds an 'onStream' callback that allows for stream listening and abort operations.[#711](https://github.com/ant-design/x/pull/711) by [kimteayon](https://github.com/kimteayon)\n - 🐛 Fixed the issue of XRequestOptions changes not taking effect and added a demo.[#736](https://github.com/ant-design/x/pull/736) by [kimteayon](https://github.com/kimteayon)\n - 🆕 Add an example of model integration. [#725](https://github.com/ant-design/x/pull/725) by [kimteayon](https://github.com/kimteayon)\n - 📖 Inaccurate parameter naming in optimizing API methods.[#736](https://github.com/ant-design/x/pull/736) by [kimteayon](https://github.com/kimteayon)\n- useXAgent\n - 🆕 RequestFn adds an `onStream` callback that allows for stream listening and abort operations.[#711](https://github.com/ant-design/x/pull/711) by [kimteayon](https://github.com/kimteayon)\n - 🆕 RequestFn has added a `transformStream` transformation function for processing stream data.[#725](https://github.com/ant-design/x/pull/725) by [kimteayon](https://github.com/kimteayon)\n - 🐛 Fix the issue of XAgentConfig Preset changes not taking effect and add an example.[#736](https://github.com/ant-design/x/pull/736) by [kimteayon](https://github.com/kimteayon)\n - 🐛 Fix the issue of incorrect callback types for RequestFn `onSuccess` and update the corresponding demo. [#725](https://github.com/ant-design/x/pull/725) by [kimteayon](https://github.com/kimteayon)\n - 🆕 Add model access, Custom RequestParams,and customize `XRequestOptions`demos. [#725](https://github.com/ant-design/x/pull/725) by [kimteayon](https://github.com/kimteayon) ,[#711](https://github.com/ant-design/x/pull/711) by [kimteayon](https://github.com/kimteayon)\n- useXChat\n - 🆕 XChatConfig adds input and output generic types.[#725](https://github.com/ant-design/x/pull/725) by [kimteayon](https://github.com/kimteayon)\n - 🆕 XChatConfig adds `transformMessage` transformation function,which can transform `messages` when updating data and update to `messages` at the same time. [#711](https://github.com/ant-design/x/pull/711) by [kimteayon](https://github.com/kimteayon)\n - 🆕 XChatConfig adds `transformStream`conversion function for processing stream data.[#711](https://github.com/ant-design/x/pull/711) by [kimteayon](https://github.com/kimteayon)\n - 🆕 XChatConfig adds `resolveAbortController`callback function, which can obtain the`AbortController` controller for controlling the stream state.[#711](https://github.com/ant-design/x/pull/711) by [kimteayon](https://github.com/kimteayon)\n - 🆕 Add model access examples and remove incorrect abort examples. [#711](https://github.com/ant-design/x/pull/711) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed the issue of Sender `header` `border-radius` style overflow.[#732](https://github.com/ant-design/x/pull/732) by [Bao0630](https://github.com/Bao0630)\n- 📖 Add a copilot style model room.[#657](https://github.com/ant-design/x/pull/657) by [vanndxh](https://github.com/vanndxh)\n- 📖 Refactoring the independent model room.[#753](https://github.com/ant-design/x/pull/753) by [vanndxh](https://github.com/vanndxh)\n- 📖 Enhance the official website to improve user experience.[#730](https://github.com/ant-design/x/pull/730) by [afc163](https://github.com/afc163) ,[#758](https://github.com/ant-design/x/pull/758) by [coding-ice](https://github.com/coding-ice) , [#761](https://github.com/ant-design/x/pull/761) by [ONLY-yours](https://github.com/ONLY-yours)\n\n## 1.1.1\n\n`2025-04-14`\n\n- Bubble.List\n - 💄 Refactor Bubble.List, reduce unnecessary refreshes during updates.[#479](https://github.com/ant-design/x/pull/479) by [YumoImer](https://github.com/YumoImer)\n - 🐛 Fixed scrollbar styles issues of `Bubble.List` under dark theme.[#727](https://github.com/ant-design/x/pull/727) by [kimteayon](https://github.com/kimteayon)\n- Conversation\n - 🐛 Fixed style issues of `ul` and `li` in Conversation.[#726](https://github.com/ant-design/x/pull/726) by [kimteayon](https://github.com/kimteayon)\n - 🆕 Extended `getPopupContainer` for `menu`.[#698](https://github.com/ant-design/x/pull/698) by [yuxuan-ctrl](https://github.com/yuxuan-ctrl)\n- 🐛 Fixed ThoughtChain Collapse cannot unfold issue.[#720](https://github.com/ant-design/x/pull/720) by [kimteayon](https://github.com/kimteayon)\n- 🐛 Fixed Attachments image display style issue.[#708](https://github.com/ant-design/x/pull/708) by [hy993658052](https://github.com/hy993658052)\n- 💄 Refactor Sender,Control the 'disabled' attribute of custom `Actions`.[#666](https://github.com/ant-design/x/pull/666) by [afc163](https://github.com/afc163)\n- 📖 Enhance the official website to improve user experience.[#680](https://github.com/ant-design/x/pull/680) by [wzc520pyfm](https://github.com/wzc520pyfm),[#699](https://github.com/ant-design/x/pull/699) by [afc163](https://github.com/afc163),[#716](https://github.com/ant-design/x/pull/716) by [afc163](https://github.com/afc163),[#686](https://github.com/ant-design/x/pull/686) by [afc163](https://github.com/afc163),[#728](https://github.com/ant-design/x/pull/728) by [kimteayon](https://github.com/kimteayon)\n\n## 1.1.0\n\n`2025-03-28`\n\n- Sender\n - 🆕 Add `footer` to support custom footer content.[#654](https://github.com/ant-design/x/pull/654) by [kimteayon](https://github.com/kimteayon)\n - 🆕 Extended `autoSize` to support custom content height.[#637](https://github.com/ant-design/x/pull/637) by [Zhang-Wei-666](https://github.com/Zhang-Wei-666)\n - 📖 Add the declarations for `onFocus` and `onBlur` types.[#625](https://github.com/ant-design/x/pull/625) by [aojunhao123](https://github.com/aojunhao123)\n- 🆕 Extended Conversations `menu.trigger` to support custom menu trigger.[#630](https://github.com/ant-design/x/pull/630) by [kimteayon](https://github.com/kimteayon)\n- Attachments\n - 🆕 Extended `ImageProps` to support custom image configuration.[#613](https://github.com/ant-design/x/pull/613) by [hy993658052](https://github.com/hy993658052)\n - 📖 Add Attachments `onRemove` API documentation[#608](https://github.com/ant-design/x/pull/608) by [kimteayon](https://github.com/kimteayon)\n- 📖 Extended `GPT-Vis` rendering chart example.[#603](https://github.com/ant-design/x/pull/603) by [lvisei](https://github.com/lvisei)\n- 📦 Improved Chat Design X `peerDependencies`.[#611](https://github.com/ant-design/x/pull/611) by [pokerface9830](https://github.com/pokerface9830)\n- 📖 Enhance the official website to improve user experience.[#626](https://github.com/ant-design/x/pull/626) by [aojunhao123](https://github.com/aojunhao123),[#648](https://github.com/ant-design/x/pull/648) by [kimteayon](https://github.com/kimteayon),[#659](https://github.com/ant-design/x/pull/659) by [afc163](https://github.com/afc163),[#667](https://github.com/ant-design/x/pull/667) by [jin19980928](https://github.com/jin19980928)\n\n## 1.0.6\n\n`2025-03-14`\n\n- 🆕 Extended `Sender` file pasting can handle multiple files.[#505](https://github.com/ant-design/x/pull/500) by [ztkuaikuai](https://github.com/ztkuaikuai)\n- 🆕 Extended `BubbleList` role definition function.[#485](https://github.com/ant-design/x/pull/500) by [chenluda](https://github.com/chenluda)\n- 🐛 Fixed `Attachments` multi file horizontal scrollbar display.[#556](https://github.com/ant-design/x/pull/556) by [onefeng123 ](https://github.com/onefeng123)\n- 🐛 Fixed `Attachments` onRemove non effective issue.[#555](https://github.com/ant-design/x/pull/555) by [edison-tianhe ](https://github.com/edison-tianhe)\n- 🐛 Fixed `Sender` the issue of actions lacking `SpeechButton`.[#549](https://github.com/ant-design/x/pull/549) by [zombieJ ](https://github.com/zombieJ)\n- 🐛 Fixed `Attachments`the issue of file initialization display.[#524](https://github.com/ant-design/x/pull/524) by [ztkuaikuai ](https://github.com/ztkuaikuai)\n- 🐛 Fixed `Conversations`scroll bar issue.[#485](https://github.com/ant-design/x/pull/485) by [LofiSu](https://github.com/LofiSu)\n- 📖 Improved`Bubble` `typing` reduces unnecessary rendering.[#477](https://github.com/ant-design/x/pull/477) by [kxcy001123](https://github.com/kxcy001123)\n- 📦 Improved Chat Design X construct [#578](https://github.com/ant-design/x/pull/578),[#584](https://github.com/ant-design/x/pull/584) by [kimteayon](https://github.com/kimteayon), [#578](https://github.com/ant-design/x/pull/578) by [kimteayon](https://github.com/kimteayon),[#587](https://github.com/ant-design/x/pull/587) by [afc163](https://github.com/afc163)\n- 📖 Enhance the official website to improve user experience.[#484](https://github.com/ant-design/x/pull/484) by [ztkuaikuai](https://github.com/ztkuaikuai), [#495](https://github.com/ant-design/x/pull/495) by [ztkuaikuai](https://github.com/ztkuaikuai), [#522](https://github.com/ant-design/x/pull/522) by [liangchaofei](https://github.com/liangchaofei),[#537](https://github.com/ant-design/x/pull/537) by [wzc520pyfm](https://github.com/wzc520pyfm),[#553](https://github.com/ant-design/x/pull/553) by [PeachScript](https://github.com/PeachScript), [#578](https://github.com/ant-design/x/pull/578) by [kimteayon](https://github.com/kimteayon), [#585](https://github.com/ant-design/x/pull/585) by [MaricoHan](https://github.com/MaricoHan)\n\n## 1.0.5\n\n`2025-01-13`\n\n- 🐛 Fix `Attachment` remove icon style. [#460](https://github.com/ant-design/x/pull/460) by [Rain120](https://github.com/Rain120)\n- 🛠 Refactor `BubbleProps` to support `ContentType` type argument. [#403](https://github.com/ant-design/x/pull/403) by [YumoImer](https://github.com/YumoImer)\n- 🛠 Dev and site support React 19. [#432](https://github.com/ant-design/x/pull/432) by [YumoImer](https://github.com/YumoImer)\n- 📖 Enhance the official website to improve user experience. [#456](https://github.com/ant-design/x/pull/456), [#446](https://github.com/ant-design/x/pull/446), [#448](https://github.com/ant-design/x/pull/448), [#444](https://github.com/ant-design/x/pull/444), [#414](https://github.com/ant-design/x/pull/414), [#406](https://github.com/ant-design/x/pull/406), [#404](https://github.com/ant-design/x/pull/404) by [wzc520pyfm](https://github.com/wzc520pyfm), [YumoImer](https://github.com/YumoImer), [Rain120](https://github.com/Rain120), [afc163](https://github.com/afc163)\n\n## 1.0.4\n\n`2024-12-25`\n\n- 🆕 Extended `XStream` support for the cancel feature. [#319](https://github.com/ant-design/x/pull/319) by [ppbl](https://github.com/ppbl)\n- 🆕 Extended `Bubble` support for the `typing.suffix` feature. [#316](https://github.com/ant-design/x/pull/316) by [BQXBQX](https://github.com/BQXBQX)\n- 🆕 Extended `Sender` component's `onChange` parameter to include the `event` object. [#362](https://github.com/ant-design/x/pull/362) by [defaultjacky](https://github.com/defaultjacky)\n- 🆕 Enhanced the `Sender` component's `ref` to support focus control methods like `focus` and `blur`. [#397](https://github.com/ant-design/x/pull/397) by [YumoImer](https://github.com/YumoImer)\n- 🐛 Fixed styling issues in `ThoughtChain` when `cssVar` is not applied. [#373](https://github.com/ant-design/x/pull/373) by [YumoImer](https://github.com/YumoImer)\n- 📖 Added `Petercat` assistant feature. [#375](https://github.com/ant-design/x/pull/375) by [xingwanying](https://github.com/xingwanying)\n- 📖 Improved the official website for a better user experience. [#389](https://github.com/ant-design/x/pull/389), [#377](https://github.com/ant-design/x/pull/377), [#364](https://github.com/ant-design/x/pull/364), [#368](https://github.com/ant-design/x/pull/368) by [afc163](https://github.com/afc163), [YumoImer](https://github.com/YumoImer)\n\n## 1.0.3\n\n`2024-12-16`\n\n- 💄 Refactor the styles when `placement: 'end'` is set for `Bubble`. [#314](https://github.com/ant-design/x/pull/314) by [YumoImer](https://github.com/YumoImer)\n- 🐛 Fix occasional failure to trigger auto-scrolling when `autoScroll` is set in `Bubble.List`. [#336](https://github.com/ant-design/x/pull/336) by [anzhou99Ru](https://github.com/anzhou99Ru)\n- 📖 Enhance the official website to improve user experience. [#343](https://github.com/ant-design/x/pull/343), [#334](https://github.com/ant-design/x/pull/334), [#315](https://github.com/ant-design/x/pull/315), [#331](https://github.com/ant-design/x/pull/331) by [afc163](https://github.com/afc163), [YumoImer](https://github.com/YumoImer), [Wxh16144](https://github.com/Wxh16144)\n- 🛠 Fix errors encountered when running `pnpm lint`. [#313](https://github.com/ant-design/x/pull/313) by [BQXBQX](https://github.com/BQXBQX)\n\n## 1.0.2\n\n`2024-12-04`\n\n- 🛠 Enhanced `XRequest` to support parsing custom protocols. [#293](https://github.com/ant-design/x/pull/293) by [YumoImer](https://github.com/YumoImer)\n- 🐛 Fixed an issue where the preview buttons for `Attachment` did not toggle visibility properly. [#295](https://github.com/ant-design/x/pull/295) by [anzhou99](https://github.com/anzhou99)\n- 🐛 Fixed a bug in `useXChat` where the same message triggered `onUpdate` multiple times. [#298](https://github.com/ant-design/x/pull/298) by [YumoImer](https://github.com/YumoImer)\n- 📖 Added documentation for using `Bubble` with `GPT-Vis`. [#288](https://github.com/ant-design/x/pull/288) by [lvisei](https://github.com/lvisei)\n- 📦 Updated browser target configurations to reduce bundle size. [#282](https://github.com/ant-design/x/pull/282) by [afc163](https://github.com/afc163)\n- 🛠 Fixed errors when running `pnpm run prestart`. [#287](https://github.com/ant-design/x/pull/287) by [long36708](https://github.com/long36708)\n\n## 1.0.1\n\n`2024-11-29`\n\n- 🛠 Optimized TS types for `useXAgent` and `XStream`. [#272](https://github.com/ant-design/x/pull/272) by [YumoImer](https://github.com/YumoImer)\n- 🛠 Made the `agent` parameter optional to support data management functionality using only `useXChat`. [#271](https://github.com/ant-design/x/pull/271) by [YumoImer](https://github.com/YumoImer)\n- 💄 Adjusted `Conversations` style based on RICH design specification. [#242](https://github.com/ant-design/x/pull/242) by [YumoImer](https://github.com/YumoImer)\n- 🛠 Fixed ghost dependency issue that prevented the project from starting when using `pnpm`. [#223](https://github.com/ant-design/x/pull/223) by [YumoImer](https://github.com/YumoImer)\n- 🌈 Demonstrated the attachment upload functionality in the standalone template. [#250](https://github.com/ant-design/x/pull/250), [#265](https://github.com/ant-design/x/pull/265) by [kelvinelove](https://github.com/kelvinelove)\n- 📖 Fixed missing contributor information. [#212](https://github.com/ant-design/x/pull/212) by [afc163](https://github.com/afc163)\n- 📖 Optimized official site to enhance user experience. [#277](https://github.com/ant-design/x/pull/277), [#264](https://github.com/ant-design/x/pull/264), [#263](https://github.com/ant-design/x/pull/263), [#262](https://github.com/ant-design/x/pull/262), [#261](https://github.com/ant-design/x/pull/261), [#241](https://github.com/ant-design/x/pull/241), [#246](https://github.com/ant-design/x/pull/246), [#210](https://github.com/ant-design/x/pull/210), [#211](https://github.com/ant-design/x/pull/211) by [YumoImer](https://github.com/YumoImer), [afc163](https://github.com/afc163), [Rain-1214](https://github.com/Rain-1214), [kelvinelove](https://github.com/kelvinelove) and [tabzzz1](https://github.com/tabzzz1)\n- 📦 Updated browser targets to reduce bundle size. [#234](https://github.com/ant-design/x/pull/234) by [afc163](https://github.com/afc163)\n\n## 1.0.0\n\n`2024-11-22`\n\n🎉 We are thrilled to announce the official release of [Ant Design X](https://x.ant.design) 1.0.0!\n\n- 🌈 **Derived from Best Practices of Enterprise-Level AI Products**: Built on the RICH interaction paradigm, delivering an exceptional AI interaction experience.\n- 🧩 **Flexible and Diverse Atomic Components**: Covers most AI dialogue scenarios, empowering you to quickly build personalized AI interaction interfaces.\n- ⚡ **Out-of-the-Box Model Integration**: Easily connect with inference services compatible with OpenAI standards.\n- 🔄 **Efficient Management of Conversation Data Flows**: Provides powerful tools for managing data flows, enhancing development efficiency.\n- 📦 **Rich Template Support**: Offers multiple templates for quickly starting LUI application development.\n- 🛡 **Complete TypeScript Support**: Developed with TypeScript, ensuring robust type coverage to improve the development experience and reliability.\n- 🎨 **Advanced Theme Customization**: Supports fine-grained style adjustments to meet diverse use cases and personalization needs.\n\n## 1.0.0-alpha.12\n\n`2024-11-07`\n\n- 🔥 Sender support `onPasteFile` and Attachments support `ref.upload` for manual uploading, by [zombieJ](https://github.com/zombieJ) [#184](https://github.com/ant-design/x/pull/184)\n- 🔥 Sender `allowSpeech` support using third-part SDK, by [zombieJ](https://github.com/zombieJ) [#187](https://github.com/ant-design/x/pull/187)\n\n## 1.0.0-alpha.11\n\n`2024-11-06`\n\n- 🔥 New Component Welcome, by [zombieJ](https://github.com/zombieJ) [#179](https://github.com/ant-design/x/pull/179)\n- 🔥 Prompts support nest structure, by [zombieJ](https://github.com/zombieJ) [#181](https://github.com/ant-design/x/pull/181)\n- 🔥 Attachments support Attachments.FileCard component, by [zombieJ](https://github.com/zombieJ) [#182](https://github.com/ant-design/x/pull/182)\n\n## 1.0.0-alpha.10\n\n`2024-11-04`\n\n- 🐛 Fix Attachments drop upload could not trigger the upload request, by [YumoImer](https://github.com/YumoImer) [#178](https://github.com/ant-design/x/pull/178)\n\n## 1.0.0-alpha.9\n\n`2024-11-01`\n\n- 🐛 Fix the logic in the Attachments, by [YumoImer](https://github.com/YumoImer) [#174](https://github.com/ant-design/x/pull/174)\n- 🐛 Fix Sender.Header can not focus, by [zombieJ](https://github.com/zombieJ) [#175](https://github.com/ant-design/x/pull/175)\n\n## 1.0.0-alpha.7\n\n`2024-10-31`\n\n- 🐛 Fix Attachments first upload could not trigger the upload request, by [YumoImer](https://github.com/YumoImer) [#172](https://github.com/ant-design/x/pull/172)\n\n## 1.0.0-alpha.6\n\n`2024-10-25`\n\n- 🔥 New Component `Attachments`, by [zombieJ](https://github.com/zombieJ) [#168](https://github.com/ant-design/x/pull/168)\n- 🔥 New Tools `XStream`, by [YumoImer](https://github.com/YumoImer) [#138](https://github.com/ant-design/x/pull/138)\n- 🔥 New Tools `XRequest`, by [YumoImer](https://github.com/YumoImer) [#138](https://github.com/ant-design/x/pull/138)\n\n## 1.0.0-alpha.5\n\n`2024-10-23`\n\n- 🆕 Bubble support `loadingRender` to customize loading content. [#165](https://github.com/ant-design/x/pull/165)\n- 🐛 Fix components missing style when without XProvider. [#163](https://github.com/ant-design/x/pull/163)\n\n## 1.0.0-alpha.4\n\n`2024-10-17`\n\n- Sender\n - 🆕 Sender support `speech`, by [zombieJ](https://github.com/zombieJ) [#154](https://github.com/ant-design/x/pull/154)\n - 🆕 Sender support Sender.Header, by [zombieJ](https://github.com/zombieJ) [#156](https://github.com/ant-design/x/pull/156)\n - 🆕 Sender style adjust, by [zombieJ](https://github.com/zombieJ) [#151](https://github.com/ant-design/x/pull/151)\n- 📖 update group config for Components category, by [YumoImer](https://github.com/YumoImer) [#155](https://github.com/ant-design/x/pull/155)\n- 📖 tweak demo toggle button style , by [afc163](https://github.com/afc163) [#146](https://github.com/ant-design/x/pull/146)\n- 📖 Update README.md, by [afc163](https://github.com/afc163) [#142](https://github.com/ant-design/x/pull/142)\n\n## 1.0.0-alpha.3\n\n`2024-10-10`\n\n- Bubble\n - 🆕 Bubble support `variant` props, by [zombieJ](https://github.com/zombieJ) [#140](https://github.com/ant-design/x/pull/140)\n - 🆕 Bubble support `shape` props, by [zombieJ](https://github.com/zombieJ) [#144](https://github.com/ant-design/x/pull/144)\n - 🆕 Bubble support `header` and `footer` props, by [zombieJ](https://github.com/zombieJ) [#147](https://github.com/ant-design/x/pull/147)\n\n## 1.0.0-alpha.2\n\n`2024-09-27`\n\n- 🔥 New Component `XProvider` for global configuration, by [YumoImer](https://github.com/YumoImer) [#127](https://github.com/ant-design/x/pull/127)\n- 🔥 New Runtime Hook `useXChat` for data management, by [zombieJ](https://github.com/zombieJ) [#125](https://github.com/ant-design/x/pull/125)\n- 🔥 New Runtime Hook `useXAgent` for model scheduling, by [zombieJ](https://github.com/zombieJ) [#125](https://github.com/ant-design/x/pull/125)\n- 🆕 `ThoughtChain` component now support the `size` property, by [YumoImer](https://github.com/YumoImer) [#123](https://github.com/ant-design/x/pull/123)\n- 🛠 Updated `.lintstagedrc.json`, by [afc163](https://github.com/afc163) [#128](https://github.com/ant-design/x/pull/128)\n- 🛠 Updated dependency `cheerio` to `v1.0.0`, by [afc163](https://github.com/afc163) [#121](https://github.com/ant-design/x/pull/121)\n\n## 1.0.0-alpha.1\n\n`2024-09-10`\n\n### 🚀 Features\n\n- 🔥 feat: Suggestion 建议组件 by [ONLY-yours](https://github.com/ONLY-yours) in [#87](https://github.com/ant-design/x/pull/87)\n\n### 🐛 Fixes\n\n- 🐛 fix: change the Sender restProps type by [ONLY-yours](https://github.com/ONLY-yours) in [#101](https://github.com/ant-design/x/pull/101)\n- 🛠 fix: bun install by [afc163](https://github.com/afc163) in [#111](https://github.com/ant-design/x/pull/111)\n\n### 🛠 Refactors\n\n- 🛠 chore: add layer support by [zombieJ](https://github.com/zombieJ) in [#118](https://github.com/ant-design/x/pull/118)\n- 🛠 chore: speed up workflows by [afc163](https://github.com/afc163) in [#119](https://github.com/ant-design/x/pull/119)\n- 🛠 chore(deps-dev): bump the dev-dependencies group with 5 updates by [dependabot](https://github.com/dependabot) in [#120](https://github.com/ant-design/x/pull/120)\n- 🛠 chore: clean up README.md by [afc163](https://github.com/afc163) in [#102](https://github.com/ant-design/x/pull/102)\n- 🛠 chore: add issue templates by [afc163](https://github.com/afc163) in [#103](https://github.com/ant-design/x/pull/103)\n- 🛠 chore: add bun.lockb by [afc163](https://github.com/afc163) in [#108](https://github.com/ant-design/x/pull/108)\n- 🛠 chore: Delete index-style-only.js by [afc163](https://github.com/afc163) in [#106](https://github.com/ant-design/x/pull/106)\n- 🛠 chore: Update main.yml by [afc163](https://github.com/afc163) in [#105](https://github.com/ant-design/x/pull/105)\n- 🛠 chore: Update package.json by [afc163](https://github.com/afc163) in [#110](https://github.com/ant-design/x/pull/110)\n\n### 📖 Documentation\n\n- 📖 docs: Update README.md by [afc163](https://github.com/afc163) in [#104](https://github.com/ant-design/x/pull/104)\n- 📖 docs: Update codecov badge by [afc163](https://github.com/afc163) in [#112](https://github.com/ant-design/x/pull/112)\n\n## 1.0.0-alpha.0\n\n`2024-09-05`\n\n- 🔥 New Component Bubble. [#19](https://github.com/ant-design/x/pull/19) [li-jia-nan](https://github.com/li-jia-nan)\n - 🔥 Bubble support direction [#52](https://github.com/ant-design/x/pull/52) [li-jia-nan](https://github.com/li-jia-nan)\n- 🔥 New Component Bubble.List. [#57](https://github.com/ant-design/x/pull/57) [zombieJ](https://github.com/zombieJ)\n- 🔥 New Component Conversations. [#48](https://github.com/ant-design/x/pull/48) [YumoImer](https://github.com/YumoImer)\n- 🔥 New Component Prompts. [#55](https://github.com/ant-design/x/pull/55) [YumoImer](https://github.com/YumoImer)\n- 🔥 New Component Sender. [#46](https://github.com/ant-design/x/pull/46) [ONLY-yours](https://github.com/ONLY-yours)\n- 🔥 New Component ThoughtChain. [#86](https://github.com/ant-design/x/pull/86) [YumoImer](https://github.com/YumoImer)\n- 📦 Use `father` to build. [#84](https://github.com/ant-design/x/pull/84) [zombieJ](https://github.com/zombieJ)\n- 🛠 Fix ThemeContext instances being inconsistent when using `antd` es or lib package. [#88](https://github.com/ant-design/x/pull/88) [YumoImer](https://github.com/YumoImer)\n- 🛠 Refactor: API Naming Conventions [#73](https://github.com/ant-design/x/pull/73) [zombieJ](https://github.com/zombieJ)\n- 🛠 MISC: CI, Github Actions, Publish\n - 🛠 [#59](https://github.com/ant-design/x/pull/59) [zombieJ](https://github.com/zombieJ)\n - 🛠 [#62](https://github.com/ant-design/x/pull/62) [zombieJ](https://github.com/zombieJ)\n - 🛠 [#71](https://github.com/ant-design/x/pull/71) [ONLY-yours](https://github.com/ONLY-yours)\n - 🛠 [#72](https://github.com/ant-design/x/pull/72) [YumoImer](https://github.com/YumoImer)\n - 🛠 [#98](https://github.com/ant-design/x/pull/98) [YumoImer](https://github.com/YumoImer)\n- 📖 Update README.md\n - 📖 [#81](https://github.com/ant-design/x/pull/81) [zombieJ](https://github.com/zombieJ)\n - 📖 [#82](https://github.com/ant-design/x/pull/82) [zombieJ](https://github.com/zombieJ)\n - 📖 [#61](https://github.com/ant-design/x/pull/61) [afc163](https://github.com/afc163)\n\n## 0.0.0-alpha.0\n\n`2024-05-10`\n\n- MISC: Project initialization.\n" }, { "path": "CHANGELOG.zh-CN.md", "content": "---\norder: 6\ntitle: 更新日志\ntimeline: true\ntag: vVERSION\n---\n\n`@ant-design/x` 遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。\n\n#### 发布周期\n\n- 修订版本号：日常 bugfix 更新。\n- 次版本号：带有新特性的向下兼容的版本。\n- 主版本号：含有破坏性更新和新特性。\n\n---\n\n## 2.4.0\n\n`2026-03-13`\n\n### @ant-design/x\n\n- 🔥 新组件 Folder。[#1797](https://github.com/ant-design/x/pull/1797) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 强化 FileCard 的 `description`、`mask`、`onClick` 配置的能力。[#1807](https://github.com/ant-design/x/pull/1807) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### @ant-design/x-markdown\n\n- 🆕 XMarkdown 流式渲染新增 `tail` 配置，支持自定义尾缀内容与尾缀组件，并避免尾缀出现在未完成组件之前。[#1296](https://github.com/ant-design/x/pull/1296) 由 [Div627](https://github.com/Div627) 提交\n- 🐛 修复 XMarkdown 自定义组件流式状态识别问题，正确处理 void elements，并隔离同名组件多实例的 `streamStatus`。[#1590](https://github.com/ant-design/x/pull/1590) 由 [Last-Order](https://github.com/Last-Order) 提交\n- 🛠 导出 XMarkdown 的 `StreamCacheTokenType` 类型，便于外部复用流式渲染相关类型。[#1592](https://github.com/ant-design/x/pull/1592) 由 [Last-Order](https://github.com/Last-Order) 提交\n- 📖 新增 XMarkdown Playground，并重构 streaming、examples、data-display 文档，补充 AntV Infographic 示例。[#1779](https://github.com/ant-design/x/pull/1779) 由 [Div627](https://github.com/Div627) 提交、[#1780](https://github.com/ant-design/x/pull/1780) 由 [Div627](https://github.com/Div627) 提交、[#1814](https://github.com/ant-design/x/pull/1814) 由 [Div627](https://github.com/Div627) 提交\n\n### @ant-design/x-skill\n\n- 🆕 发布 x-markdown skill。[#1813](https://github.com/ant-design/x/pull/1813) 由 [Div627](https://github.com/Div627) 提交\n\n### 其他\n\n- 🐛 修复 useShortcutKeys 错误的事件处理。[#1822](https://github.com/ant-design/x/pull/1822) 由 [cxybd](https://github.com/cxybd) 提交\n- 🛠 将所有组件 useMergedState 升级为 useControlledState。[#1808](https://github.com/ant-design/x/pull/1808) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 📖 优化官网站点提升用户体验。[#1814](https://github.com/ant-design/x/pull/1814) 由 [Div627](https://github.com/Div627) 提交、[#1793](https://github.com/ant-design/x/pull/1793) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1792](https://github.com/ant-design/x/pull/1792) 由 [Div627](https://github.com/Div627) 提交、[#1780](https://github.com/ant-design/x/pull/1780) 由 [Div627](https://github.com/Div627) 提交、[#1779](https://github.com/ant-design/x/pull/1779) 由 [Div627](https://github.com/Div627) 提交\n\n## 2.3.0\n\n`2026-02-26`\n\n### @ant-design/x\n\n- 🆕 Conversation 的 onActiveChange 回调现在同时返回被激活的项及其键值，同时更新 useMergedState 为 useControlledState。[#1762](https://github.com/ant-design/x/pull/1762) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 优化 Sender 禁用状态按钮的视觉表现，统一添加透明边框处理，确保不同按钮变体在禁用时的外观一致。[#1751](https://github.com/ant-design/x/pull/1751) 由 [Rain120](https://github.com/Rain120) 提交\n\n### @ant-design/x-markdown\n\n- 🆕 XMarkdown 新增 escapeRawHtml 属性，允许用户在渲染时选择是否对原始 HTML 进行转义。[#1769](https://github.com/ant-design/x/pull/1769) 由 [Div627](https://github.com/Div627) 提交\n- 🐛 修复 XMarkdown 列表中遇到未闭合行内代码时的渲染，确保列表标记在特殊未闭合情况仍被保留。[#1739](https://github.com/ant-design/x/pull/1739) 由 [Div627](https://github.com/Div627) 提交\n- 🐛 改进了块级 LaTeX 公式的解析，对结尾处的空白与缩进处理更宽容，提升了对不同行尾格式的兼容性，减少误判与渲染问题。[#1744](https://github.com/ant-design/x/pull/1744) 由 [Waiter](https://github.com/Waiter) 提交\n- 🐛 优化深色模式 CodeHighlighter，Mermaid 插件样式问题。[#1766](https://github.com/ant-design/x/pull/1766) 由 [menghany](https://github.com/menghany) 提交\n\n### @ant-design/x-sdk\n\n- 🆕 useXChat 新增 queueRequest 方法，实现 ConversationKey 和 SessionId 的初始化消息发送。[#1761](https://github.com/ant-design/x/pull/1761) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### @ant-design/x-skill\n\n- 🆕 新增 skill 安装指令，同时发布 use-x-chat、x-chat-provider、x-request 三个 skill。[#1753](https://github.com/ant-design/x/pull/1768)、[#1767](https://github.com/ant-design/x/pull/1767) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### 其他\n\n- 🛠 修复了因依赖升级导致的构建错误问题。 [#1754](https://github.com/ant-design/x/pull/1754) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🛠 解决 CodeSandbox 预览中 domhandler 的 ModuleNotFoundError 错误。[#1754](https://github.com/ant-design/x/pull/1754) 由 [Div627](https://github.com/Div627) 提交\n\n## 2.2.2\n\n`2026-02-06`\n\n### @ant-design/x\n\n- 🛠 修复一些文档和类型来支持 AI Coding。[#1733](https://github.com/ant-design/x/pull/1733) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 💄 修复 Bubble.List 样式和语义化问题。[#1731](https://github.com/ant-design/x/pull/1731) 由 [anxLiang](https://github.com/anxLiang) 提交\n- 🐛 修复 Sender 插入节点配置了 replaceCharacters 时的替换问题。[#1727](https://github.com/ant-design/x/pull/1727) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n## 2.2.1\n\n`2026-01-30`\n\n### @ant-design/x\n\n- 💄 修复 Bubble.List 样式问题。[#1713](https://github.com/ant-design/x/pull/1713) 由 [anxLiang](https://github.com/anxLiang) 提交、[#1704](https://github.com/ant-design/x/pull/1704) 由 [anxLiang](https://github.com/anxLiang) 提交\n- 🐛 修复因其他三方依赖 `esm` 路径导致 Node 环境构建报错问题。[#1708](https://github.com/ant-design/x/pull/1708) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### @ant-design/x-markdown\n\n- 🐛 修复流式渲染缓存失效问题，当列表项包含行内代码（如 - \\code\\`\\` ）时，缓存会提前提交导致渲染异常。[#1709](https://github.com/ant-design/x/pull/1709) 由 [Div627](https://github.com/Div627) 提交\n- 🆕 自定义代码渲染支持接受语言信息。[#1705](https://github.com/ant-design/x/pull/1705) 由 [Aarebecca](https://github.com/Aarebecca) 提交\n\n### @ant-design/x-sdk\n\n- 🆕 XRequest 与 Chat Provider 一起使用时会额外获取到组装好的 message。[#1714](https://github.com/ant-design/x/pull/1714) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### 其他\n\n- 📖 优化官网站点提升用户体验。[#1717](https://github.com/ant-design/x/pull/1717) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1707](https://github.com/ant-design/x/pull/1707) 由 [Div627](https://github.com/Div627) 提交\n\n## 2.2.0\n\n`2026-01-26`\n\n### @ant-design/x\n\n- Sender\n - 🐛 修复光标在技能位置时插入位置错误问题。[#1633](https://github.com/ant-design/x/pull/1633) 由 [IsDyh01](https://github.com/IsDyh01) 提交\n - 🛠 重构插入节点位置能力，同时重写测试用例。[#1612](https://github.com/ant-design/x/pull/1612) 由 [kimteayon](https://github.com/kimteayon) 提交\n- XProvider\n - 🐛 修复设置 `iconPrefixCls` 不生效问题。[#1656](https://github.com/ant-design/x/pull/1656) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🐛 修复设置 `prefix` 不生效问题。[#1642](https://github.com/ant-design/x/pull/1642) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🐛 修复 `layer` 设置问题。 [#1616](https://github.com/ant-design/x/pull/1616) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复因强制 `antd` 依赖 `es` 路径导致 Node 环境构建报错问题。[#1645](https://github.com/ant-design/x/pull/1645) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 ThoughtChain 布局导致动画卡顿问题。[#1641](https://github.com/ant-design/x/pull/1641) 由 [IsDyh01](https://github.com/IsDyh01) 提交\n- 🐛 修复 Think 布局导致动画卡顿问题。[#1636](https://github.com/ant-design/x/pull/1636) 由 [IsDyh01](https://github.com/IsDyh01) 提交\n- 🐛 修复 Sources 设置了位置但无法定位内容问题。 [#1683](https://github.com/ant-design/x/pull/1683) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 Bubble.List 内部高度变化滚动条变化错误问题。[#1690](https://github.com/ant-design/x/pull/1690) 由 [anxLiang](https://github.com/anxLiang) 提交\n- 🆕 新增 Mermaid 设置初始化配置和操作栏功能。[#1631](https://github.com/ant-design/x/pull/1631) 由 [Div627](https://github.com/Div627) 提交\n- 🆕 新增 Attachments 设置卡片类型能力。[#1610](https://github.com/ant-design/x/pull/1610) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### @ant-design/x-sdk\n\n- 🆕 XRequest 新增重连接能力。[#1629](https://github.com/ant-design/x/pull/1629) 由 [hylin](https://github.com/hylin) 提交\n- 🆕 XRequest 和 XStream 支持流数据解析引入了可配置的分隔符 `streamSeparator`、`partSeparator`、`kvSeparator` 能力，同时为 TextDecoderStream 添加了 polyfill 以提高兼容性，修复了 undefined 值被添加到流结果中的问题。 [#1611](https://github.com/ant-design/x/pull/1611) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### @ant-design/x-markdown\n\n- 🆕 增强 XMarkdown 解析器，使其支持带占位符保护的自定义组件。[#1668](https://github.com/ant-design/x/pull/1668) 由 [yanghuanrong](https://github.com/yanghuanrong) 提交\n- 🆕 新增 XMarkdown 基于 Playwright Component Testing 实现流式 Markdown 渲染的性能基准测试能力。[#1314](https://github.com/ant-design/x/pull/1314) 由 [Div627](https://github.com/Div627) 提交\n- 🆕 新增 XMarkdown 流式语法对行内代码缓存的功能。[#1630](https://github.com/ant-design/x/pull/1630) 由 [Div627](https://github.com/Div627) 提交\n\n### 其他\n\n- 📖 优化官网站点提升用户体验。[#1675](https://github.com/ant-design/x/pull/1675) 由 [hongxuWei](https://github.com/hongxuWei) 提交、[#1644](https://github.com/ant-design/x/pull/1644) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1658](https://github.com/ant-design/x/pull/1658) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1646](https://github.com/ant-design/x/pull/1646) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1651](https://github.com/ant-design/x/pull/1651) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1650](https://github.com/ant-design/x/pull/1650) 由 [Div627](https://github.com/Div627) 提交、[#1635](https://github.com/ant-design/x/pull/1635) 由 [IsDyh01](https://github.com/IsDyh01) 提交、[#1627](https://github.com/ant-design/x/pull/1627) 由 [Alexzjt](https://github.com/Alexzjt) 提交、[#1615](https://github.com/ant-design/x/pull/1615) 由 [Yx0201](https://github.com/Yx0201) 提交\n\n## 2.1.3\n\n`2026-01-04`\n\n### @ant-design/x\n\n- 🐛 修复了 Sender 未声明依赖问题，将 `classnames` 替换为 `clsx` 并为 `biome.json` 配置了依赖引用检查。[#1608](https://github.com/ant-design/x/pull/1608) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 📖 优化官网站点提升用户体验。[#1605](https://github.com/ant-design/x/pull/1605) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n## 2.1.2\n\n`2025-12-30`\n\n### @ant-design/x\n\n- 💄 修复 Actions `disliked` 类名错误问题。[#1521](https://github.com/ant-design/x/pull/1521) 由 [kimteayon](https://github.com/kimteayon) 提交\n- Sender\n - 🛠 整体重构 Sender 组件实现，同时修复一些细节光标问题。[#1515](https://github.com/ant-design/x/pull/1515) [#1548](https://github.com/ant-design/x/pull/1548) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 💄 修复 Sender 组件 actions 与 antd Button 样式冲突导致渲染错误问题。[#1535](https://github.com/ant-design/x/pull/1535) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🐛 修复词槽模式 `skill` 情况下 placeholder 为空时光标太小异常的问题。[#1537](https://github.com/ant-design/x/pull/1537) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🐛 修复粘贴文字时撤销栈（undo）未更新问题。[#1527](https://github.com/ant-design/x/pull/1527) 由 [Chiaki-xps](https://github.com/Chiaki-xps) 提交\n- 🐛 移除 Bubble.List 新消息自动滚动到最底部的逻辑，改为手动控制。[#1548](https://github.com/ant-design/x/pull/1548) 由 [anxLiang](https://github.com/anxLiang) 提交\n- 💄 修复 Prompts 组件动画演示不生效问题。 [#1580](https://github.com/ant-design/x/pull/1580) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 Actions.Feedback tooltip 展示异常问题。[#1591](https://github.com/ant-design/x/pull/1591) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 Attachments 调用 `ref.select()` 未传参数时报错问题 [#1587](https://github.com/ant-design/x/pull/1587) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 FileCard `overflow` 展示时按钮未更新问题，以及图片展示时无 `src` 导致 Image 展示失败问题。 [#1587](https://github.com/ant-design/x/pull/1587) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### @ant-design/x-sdk\n\n- 🐛 修复 XChat 无法远程加载历史消息问题。[#1593](https://github.com/ant-design/x/pull/1593) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 OpenAIChatProvider 和 DeepSeekChatProvider 非流式请求渲染了两次内容问题。[#1593](https://github.com/ant-design/x/pull/1593) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### @ant-design/x-markdown\n\n- 💄 修复 XMarkdown 动画字体颜色错误问题。[#1531](https://github.com/ant-design/x/pull/1531) 由 [Div627](https://github.com/Div627) 提交\n\n### 其他\n\n- 🛠 整体的依赖重构升级。[#1448](https://github.com/ant-design/x/pull/1448) 由 [yoyo837](https://github.com/yoyo837) 提交\n- 📖 优化官网站点提升用户体验。[#1508](https://github.com/ant-design/x/pull/1508) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1516](https://github.com/ant-design/x/pull/1516) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1529](https://github.com/ant-design/x/pull/1529) 由 [fireairforce](https://github.com/fireairforce) 提交、[#1549](https://github.com/ant-design/x/pull/1549) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1551](https://github.com/ant-design/x/pull/1551) 由 [Chiaki-xps](https://github.com/Chiaki-xps) 提交、[#1553](https://github.com/ant-design/x/pull/1553) 由 [Chiaki-xps](https://github.com/Chiaki-xps) 提交、[#1555](https://github.com/ant-design/x/pull/1555) 由 [Chiaki-xps](https://github.com/Chiaki-xps) 提交、[#1543](https://github.com/ant-design/x/pull/1543) 由 [IsDyh01](https://github.com/IsDyh01) 提交、[#1558](https://github.com/ant-design/x/pull/1558) 由 [Chiaki-xps](https://github.com/Chiaki-xps) 提交、[#1557](https://github.com/ant-design/x/pull/1557) 由 [Chiaki-xps](https://github.com/Chiaki-xps) 提交、[#1562](https://github.com/ant-design/x/pull/1562) 由 [hustcc](https://github.com/hustcc) 提交、[#1569](https://github.com/ant-design/x/pull/1569) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1561](https://github.com/ant-design/x/pull/1561) 由 [Chiaki-xps](https://github.com/Chiaki-xps) 提交、[#1584](https://github.com/ant-design/x/pull/1584) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1581](https://github.com/ant-design/x/pull/1581) 由 [teimurjan](https://github.com/teimurjan) 提交\n\n## 2.1.1\n\n`2025-12-10`\n\n### @ant-design/x\n\n- Sender\n - 🐛 修复发送快捷键 enter 和 shift + enter 未受 submit 按钮 disabled 状态控制的问题，修复 `onSubmit` 快捷键和按钮参数不一致问题。 [#1472](https://github.com/ant-design/x/pull/1472) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🐛 修复 `onChange` 缺少 `skill` 参数问题，修复词槽模式仅展示技能能力时 placeholder 未展示问题，并重构 `onChange`逻辑。[#1477](https://github.com/ant-design/x/pull/1477) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🐛 修复词槽模式 `input` 类型词槽激活焦点时发送快捷键 enter 和 shift + enter 未触发问题。[#1498](https://github.com/ant-design/x/pull/1498) 由 [kimteayon](https://github.com/kimteayon) 提交\n- Attachment\n - 🐛 修复设置 `maxCount` 后最后一个文件未上传问题。[#1486](https://github.com/ant-design/x/pull/1486) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🐛 修复上传图片后 antd 报警告问题。[#1492](https://github.com/ant-design/x/pull/1492) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 Mermaid 渲染抖动问题。[#1497](https://github.com/ant-design/x/pull/1497) 由 [Div627](https://github.com/Div627) 提交\n- 📖 优化官网站点提升用户体验。[#1464](https://github.com/ant-design/x/pull/1464) 由 [IsDyh01](https://github.com/IsDyh01) 提交、[#1483](https://github.com/ant-design/x/pull/1483) 由 [Chiaki-xps](https://github.com/Chiaki-xps) 提交、[#1463](https://github.com/ant-design/x/pull/1463) 由 [J-Da-Shi](https://github.com/J-Da-Shi) 提交、[#1489](https://github.com/ant-design/x/pull/1489) 由 [Chiaki-xps](https://github.com/Chiaki-xps) 提交、[#1499](https://github.com/ant-design/x/pull/1499) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1500](https://github.com/ant-design/x/pull/1500) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1501](https://github.com/ant-design/x/pull/1501) 由 [Samoy](https://github.com/Samoy) 提交\n- 🛠 修改对 `mermaid` 的依赖配置。[#1475](https://github.com/ant-design/x/pull/1475) 由 [Div627](https://github.com/Div627) 提交\n\n### @ant-design/x-sdk\n\n- 🐛 优化消息流的节流与发射逻辑，避免高频流式更新导致的深度更新错误，提升实时消息稳定性与性能。[#1418](https://github.com/ant-design/x/pull/1418) 由 [Afee2019](https://github.com/Afee2019) 提交\n\n### @ant-design/x-markdown\n\n- 🛠 优化 `sideEffects` 配置。[#1408](https://github.com/ant-design/x/pull/1408) 由 [hongxuWei](https://github.com/hongxuWei) 提交\n\n## 2.1.0\n\n`2025-12-05`\n\n### @ant-design/x\n\n- 🐛 修复 Bubble css token `typingContent` 配置不生效问题。[#1435](https://github.com/ant-design/x/pull/1435) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复因 antd 升级到 6.0.1 导致多个组件样式丢失问题。[#1441](https://github.com/ant-design/x/pull/1441) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1446](https://github.com/ant-design/x/pull/1446) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 Bubble.List 在 safari 浏览器滚动兼容性问题。[#1392](https://github.com/ant-design/x/pull/1392) 由 [anxLiang](https://github.com/anxLiang) 提交\n- 🔥 新组件 HighlightCode 和 Mermaid。[#1402](https://github.com/ant-design/x/pull/1402) 由 [Div627](https://github.com/Div627) 提交\n- 🆕 Actions 新增语义化实现。[#1443](https://github.com/ant-design/x/pull/1443) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 Suggestion 新增语义化实现，移除重复的 Enter 触发事件，修复 `onSubmit` 方法多次执行的问题，`onSelect` 方法新增 `selectedOptions` 完整数据返回，同时对选项的实现使用 `useMergedState` 进行了重构。[#1406](https://github.com/ant-design/x/pull/1406) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 📖 优化官网站点提升用户体验。[#1444](https://github.com/ant-design/x/pull/1444) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 Sender 新的词槽类型 `content` 和技能功能 `skill`。[#1377](https://github.com/ant-design/x/pull/1377) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### @ant-design/x-sdk\n\n- 🐛 修复 DeepSeekChatProvider 对 `` 标签格式换行处理不当导致 XMarkdown 格式渲染异常问题。[#1445](https://github.com/ant-design/x/pull/1445) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 useXChat `setMessages` 方法调用未触发渲染问题。[#1450](https://github.com/ant-design/x/pull/1450) 由 [hylin](https://github.com/hylin) 提交\n- 🐛 修复 rc-util 依赖未声明问题。[#1456](https://github.com/ant-design/x/pull/1456) 由 [hylin](https://github.com/hylin) 提交\n\n### @ant-design/x-markdown\n\n- 🐛 替换 useStreaming 正则解决 ios 兼容性问题。[#1457](https://github.com/ant-design/x/pull/1457) 由 [Div627](https://github.com/Div627) 提交\n- 📖 完善文档提升用户体验。[#1451](https://github.com/ant-design/x/pull/1451) 由 [Div627](https://github.com/Div627) 提交\n- 🛠 迁移 UI 插件 HighlightCode 和 Mermaid 到 @ant-design/x 达成更合理的依赖关系。[#1402](https://github.com/ant-design/x/pull/1402) 由 [Div627](https://github.com/Div627) 提交\n\n## 2.0.1\n\n`2025-12-03`\n\n### @ant-design/x\n\n- 🐛 修复因 antd 升级到 6.0.1 导致多个组件样式丢失问题。[#1428](https://github.com/ant-design/x/pull/1428) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 Attachments 组件使用时 antd 报错问题。[#1395](https://github.com/ant-design/x/pull/1395) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 Sender 组件 `allowSpeech` 自定义时 disable 错误问题。[#1398](https://github.com/ant-design/x/pull/1398) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 Sender.Switch 组件语义化配置缺失问题。[#1396](https://github.com/ant-design/x/pull/1396) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🛠 修复因版本升级导致的测试用例失败。[#1393](https://github.com/ant-design/x/pull/1393) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 📖 新增 1.x 官网链接。[#1386](https://github.com/ant-design/x/pull/1386) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1394](https://github.com/ant-design/x/pull/1394) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 📖 优化官网站点提升用户体验。[#1384](https://github.com/ant-design/x/pull/1384) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1416](https://github.com/ant-design/x/pull/1416) 由 [IsDyh01](https://github.com/IsDyh01) 提交\n\n### @ant-design/x-sdk\n\n- 📖 官网目录、文档、示例全面更新。[#1419](https://github.com/ant-design/x/pull/1419) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 useXChat `requestFallback` 新增 errorInfo 参数解决无法获取接口错误数据问题。[#1419](https://github.com/ant-design/x/pull/1419) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### @ant-design/x-markdown\n\n- 🐛 修复插件 HighlightCode 复制代码错误问题。[#1414](https://github.com/ant-design/x/pull/1414) 由 [Jimi1126](https://github.com/Jimi1126) 提交\n- 🐛 修复 XMarkdown 渲染特殊字符失败问题。[#1413](https://github.com/ant-design/x/pull/1413) 由 [Div627](https://github.com/Div627) 提交\n- 🐛 修复 XMarkdown 缓存重置逻辑因旧引用未生效问题。[#1420](https://github.com/ant-design/x/pull/1420) 由 [Div627](https://github.com/Div627) 提交\n\n## 2.0.0\n\n`2025-11-22`\n\n🏆 Ant Design X 2.0.0 已发布！\n\n`@ant-design/x` - 智能界面构建框架\n\n基于 Ant Design 设计体系的 React UI 库、专为 AI 驱动界面设计，开箱即用的智能对话组件、无缝集成 API 服务，快速搭建智能应用界面。\n\n`@ant-design/x-markdown` - 高性能流式渲染引擎\n\n专为流式内容优化的 Markdown 渲染解决方案、强大的扩展能力，支持公式、代码高亮、mermaid 图表等极致性能表现，确保流畅的内容展示体验。\n\n`@ant-design/x-sdk` - AI 对话数据流管理\n\n提供完整的工具 API 集合、开箱即用的 AI 对话应用数据流管理、简化开发流程，提升开发效率。\n\n##### 升级必读\n\n🌟 我们准备了升级文档，查看[详情](/docs/react/migration-v2-cn)。\n\n## 2.0.0-alpha.16\n\n`2025-11-17`\n\n### @ant-design/x\n\n- 🛠 删除 components 属性，同时将内部属性提升。[#1338](https://github.com/ant-design/x/pull/1338) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 FileCard 新增图片生成过程以及加载、渲染能力。[#1311](https://github.com/ant-design/x/pull/1311) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 Think 将 `blink` 动画样式升级为 css token。[#1318](https://github.com/ant-design/x/pull/1318) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 ThoughtChain 将 `blink` 动画样式升级为 css token。[#1318](https://github.com/ant-design/x/pull/1318) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 📖 优化官网站点提升用户体验。[#1335](https://github.com/ant-design/x/pull/1335) 由 [kimteayon](https://github.com/kimteayon)、[#1329](https://github.com/ant-design/x/pull/1329) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### @ant-design/x-markdown\n\n- 🛠 使用 useMemo 优化 markdown 渲染，同时修改基本演示文本和动画演示文本。[#1337](https://github.com/ant-design/x/pull/1337) 由 [Div627](https://github.com/Div627) 提交\n- 🆕 XMarkdown 渲染 HTML 标签对 `disabled` 和 `checked` 属性透出。[#1328](https://github.com/ant-design/x/pull/1328) 由 [Div627](https://github.com/Div627) 提交\n- 🆕 XMarkdown `hasNextChunk` 增加对表格渲染处理的能力。[#1322](https://github.com/ant-design/x/pull/1322) 由 [Div627](https://github.com/Div627) 提交\n- 🐛 修复 XMarkdown 默认的表格渲染的样式。[#1324](https://github.com/ant-design/x/pull/1324) 由 [Div627](https://github.com/Div627) 提交\n- 🆕 XMarkdown `incompleteMarkdownComponentMap` 新增多个类型渲染。[#1325](https://github.com/ant-design/x/pull/1325) 由 [Div627](https://github.com/Div627) 提交\n- 📖 优化官网站点提升用户体验。[#1326](https://github.com/ant-design/x/pull/1326) 由 [Div627](https://github.com/Div627)。\n\n## 2.0.0-alpha.15\n\n`2025-11-07`\n\n### @ant-design/x\n\n- 🛠 升级 antd 依赖版本到 `6.00-alpha.4`。[#1300](https://github.com/ant-design/x/pull/1300) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 📖 优化官网站点提升用户体验。[#1303](https://github.com/ant-design/x/pull/1303) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### @ant-design/x-markdown\n\n- 🛠 重构 markdown 主题样式。[#1305](https://github.com/ant-design/x/pull/1305) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 `code` 标签 `streamStatus` 状态错误问题。[#1307](https://github.com/ant-design/x/pull/1307) 由 [Div627](https://github.com/Div627) 提交\n- 🛠 将 `index.less` 改造为 `index.css`。[#1306](https://github.com/ant-design/x/pull/1306) 由 [Div627](https://github.com/Div627) 提交\n- 🐛 修复 `SteamingOption` 为 `StreamingOption`。[#1301](https://github.com/ant-design/x/pull/1301) 由 [Div627](https://github.com/Div627) 提交\n- 🐛 修复 dompurifyConfig.ALLOWED_TAGS 被错误合并到 ADD_TAGS 的问题。[#1297](https://github.com/ant-design/x/pull/1297) 由 [Div627](https://github.com/Div627) 提交\n\n## 2.0.0-alpha.13\n\n`2025-10-30`\n\n### @ant-design/x\n\n- 🐛 删除 Bubble.List `suffix` 属性，并通过 CSS Token 修改来 typing。[#1285](https://github.com/ant-design/x/pull/1285) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 ThoughtChain.Item 组件新增闪动效果。[#1278](https://github.com/ant-design/x/pull/1278) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 Think 组件新增闪动效果。[#1278](https://github.com/ant-design/x/pull/1278) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 ThoughtChain 组件新增闪动效果。[#1286](https://github.com/ant-design/x/pull/1286) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 Actions 新增 fadeIn 和 fadeInLeft 效果。[#1288](https://github.com/ant-design/x/pull/1288) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1289](https://github.com/ant-design/x/pull/1289) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 Prompts 新增 fadeIn 和 fadeInLeft 效果。[#1289](https://github.com/ant-design/x/pull/1289) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 📖 优化官网站点提升用户体验。[#1290](https://github.com/ant-design/x/pull/1290) 由 [Rain120](https://github.com/Rain120)。\n\n### @ant-design/x-markdown\n\n- 🐛 修复传入的 renderer link 被覆盖问题。[#1276](https://github.com/ant-design/x/pull/1276) 由 [Div627](https://github.com/Div627) 提交\n\n## 2.0.0-alpha.12\n\n`2025-10-29`\n\n### @ant-design/x\n\n- 🆕 Attachments Ref 新增 `select` 方法支持选择文件的能力，同时修复设置了最大数量，并达到了最大数量后仍显示上传按钮的问题。[#1266](https://github.com/ant-design/x/pull/1266) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 📖 优化官网站点提升用户体验。[#1269](https://github.com/ant-design/x/pull/1269) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1274](https://github.com/ant-design/x/pull/1274) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### @ant-design/x-markdown\n\n- 🐛 修复 KaTeX 插件渲染失败抛出异常的问题，修改公式渲染规则减少渲染异常。[#1265](https://github.com/ant-design/x/pull/1265) 由 [Div627](https://github.com/Div627) 提交\n- 📖 新增 XMarkdown 处理中文链接的代码示例。[#1270](https://github.com/ant-design/x/pull/1270) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 `code` 和 `pre` 标签渲染时返回渲染状态 `streamStatus` 以及块级标识 `block`。[#1272](https://github.com/ant-design/x/pull/1272) 由 [Div627](https://github.com/Div627) 提交\n- 🐛 修复渲染 markdown 时重复的 DOM key。[#1273](https://github.com/ant-design/x/pull/1273) 由 [Div627](https://github.com/Div627) 提交\n\n## 2.0.0-alpha.11\n\n`2025-10-27`\n\n### @ant-design/x\n\n- 🆕 Sender 词槽配置改为可变属性，词槽模式下 `insert` 方法新增 `replaceCharacters` 属性入参，支持新增替换功能，同时 `focus` 方法新增词槽 `key` 的配置以支持指定词槽的 `focus` 功能。[#1259](https://github.com/ant-design/x/pull/1259) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 Sources 行内模式支持指定当前激活的面板，新增 `activeKey` 属性，同时优化面板切换的交互样式，使体验更好。[#1261](https://github.com/ant-design/x/pull/1261) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 Bubble.List 对滚动条布局和实现以及语义化进行了优化。[#1263](https://github.com/ant-design/x/pull/1263) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### @ant-design/x-markdown\n\n- 🐛 修复 XMarkdown 自定义组件不同状态下入参结构不一致问题。[#1260](https://github.com/ant-design/x/pull/1260) 由 [Div627](https://github.com/Div627) 提交\n- 📖 新增 XMarkdown 代码示例。[#1262](https://github.com/ant-design/x/pull/1262) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n## 2.0.0-alpha.10\n\n`2025-10-23`\n\n### @ant-design/x\n\n- 🔥 新组件 Sources。[#1250](https://github.com/ant-design/x/pull/1250) 由 [hy993658052](https://github.com/hy993658052) 提交\n- 🆕 Bubble 新增 Bubble.System 和 Bubble.Divider 两个子组件。[#1239](https://github.com/ant-design/x/pull/1239) 由 [anxLiang](https://github.com/anxLiang) 和 [kimteayon](https://github.com/kimteayon) 提交\n- Sender\n- 🆕 新增词槽焦点事件功能。[#1221](https://github.com/ant-design/x/pull/1221) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复输入框 `onPasteFile` 粘贴多文件回调数据错误问题。[#1221](https://github.com/ant-design/x/pull/1221) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 svg 未做国际化导致的无障碍问题。[#1243](https://github.com/ant-design/x/pull/1243) 由 [kimteayon](https://github.com/kimteayon) 提交\n- FileCard\n- 🆕 新增语义化实现。[#1220](https://github.com/ant-design/x/pull/1220) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 新增 `jfif` 类型支持。[#1248](https://github.com/ant-design/x/pull/1248) 由 [IsDyh01](https://github.com/IsDyh01) 提交\n- 🆕 Attachments 新增语义化实现。[#1220](https://github.com/ant-design/x/pull/1220) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 📖 优化官网站点提升用户体验。[#1216](https://github.com/ant-design/x/pull/1216) 由 [kimteayon](https://github.com/kimteayon) 提交， [#1217](https://github.com/ant-design/x/pull/1217) 由 [Div627](https://github.com/Div627) 提交，[#1218](https://github.com/ant-design/x/pull/1218) 由 [IsDyh01](https://github.com/IsDyh01) 提交，[#1224](https://github.com/ant-design/x/pull/1224) 由 [kimteayon](https://github.com/ kimteayon) 提交，[#1232](https://github.com/ant-design/x/pull/1232) 由 [IsDyh01](https://github.com/IsDyh01) 提交，[#1233](https://github.com/ant-design/x/pull/1233) 由 [kimteayon](https://github.com/kimteayon) 提交，[#1243](https://github.com/ant-design/x/pull/1243) 由 [kimteayon](https://github.com/kimteayon) 提交，[#1247](https://github.com/ant-design/x/pull/1247) 由 [elrrrrrrr](https://github.com/elrrrrrrr) 提交\n\n### @ant-design/x-markdown\n\n- 🆕 XMarkdown 新增需闭合标签语法的过程中的渲染组件配置 `incomplete` 以及对应功能。[#1223](https://github.com/ant-design/x/pull/1223) 由 [Div627](https://github.com/Div627) 提交\n- 🐛 修复 XMarkdown openLinksInNewTab 属性配置失效问题。[#1253](https://github.com/ant-design/x/pull/1253) 由 [Div627](https://github.com/Div627) 提交\n- 🐛 修复 XMarkdown 动画重复渲染问题。[#1255](https://github.com/ant-design/x/pull/1255) 由 [Div627](https://github.com/Div627) 提交\n- 🆕 健壮 XMarkdown 对公式渲染标签识别能力。[#1255](https://github.com/ant-design/x/pull/1255) 由 [Div627](https://github.com/Div627) 提交\n\n### @ant-design/x-sdk\n\n- 🐛 修复 useXChat 处理流数据服务器错误导致 `requestFallback` 回调入参问题。[#1224](https://github.com/ant-design/x/pull/1224) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 useXConversations 新增 activeConversationKey 的实现。[#1252](https://github.com/ant-design/x/pull/1252) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 useXChat `isRequesting` 非多实例问题，以及优化 `requestPlaceholder` 和 `requestFallback` 回调入参。[#1254](https://github.com/ant-design/x/pull/1254) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n## 2.0.0-alpha.9\n\n`2025-09-24`\n\n### @ant-design/x-markdown\n\n- 🐛 修复代码高亮插件样式丢失、组件无法匹配嵌套子元素的问题，并移除默认样式中的 table text-align 属性。[#1212](https://github.com/ant-design/x/pull/1212) 由 [Div627](https://github.com/Div627) 提交\n\n## 2.0.0-alpha.8\n\n`2025-09-22`\n\n### @ant-design/x\n\n- Bubble\n - 🆕 Bubble.List 新增 `extra` 参数，配合 useXChat 已支持自定义功能。[#1195](https://github.com/ant-design/x/pull/1195) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🐛 修复 `loading` 状态下内容高度被固定问题。[#1178](https://github.com/ant-design/x/pull/1178) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🐛 修复组件类型导出命名错误问题。[#1182](https://github.com/ant-design/x/pull/1182) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 ThoughtChain.Item 组件类型导出命名错误问题。[#1178](https://github.com/ant-design/x/pull/1178) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 XProvider 监听组件缺少问题。[#1178](https://github.com/ant-design/x/pull/1178) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### @ant-design/x-markdown\n\n- 🛠 重构动画相关实现。[#1198](https://github.com/ant-design/x/pull/1198) 由 [Div627](https://github.com/Div627) 提交、[#1204](https://github.com/ant-design/x/pull/1204) 由 [Div627](https://github.com/Div627) 提交\n- 🐛 修复插件导出类型错误问题，以及新增示例和文档[#1187](https://github.com/ant-design/x/pull/1187) 由 [Div627](https://github.com/Div627) 提交\n- 🐛 修复 Mermaid 插件切换时渲染异常。[#1175](https://github.com/ant-design/x/pull/1175) 由 [Div627](https://github.com/Div627) 提交\n- 🆕 补充 HighlightCode 插件和 Mermaid 插件语义化实现。[#1178](https://github.com/ant-design/x/pull/1178) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 XMarkdown 主题样式覆盖不全问题。 [#1182](https://github.com/ant-design/x/pull/1182) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### @ant-design/x-sdk\n\n- 🆕 useXChat `setMessage` 支持使用回调函数支持获取原始消息，同时 `onRequest` 和 `onReload` 新增 `extra` 参数以支持自定义功能。 [#1195](https://github.com/ant-design/x/pull/1195) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### 其他\n\n- 🆕 更新站点整体文档。 [#1194](https://github.com/ant-design/x/pull/1194) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 更新样板间功能，新增'现代感'样板间。 [#1184](https://github.com/ant-design/x/pull/1184) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1195](https://github.com/ant-design/x/pull/1195) 由 [kimteayon](https://github.com/kimteayon) 提交、 [#1194](https://github.com/ant-design/x/pull/1194) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 📖 优化官网站点提升用户体验。[#1170](https://github.com/ant-design/x/pull/1170) 由 [jinyang](https://github.com/jinyang) 提交、[#1186](https://github.com/ant-design/x/pull/1186) 由 [jinyang](https://github.com/jinyang) 提交、[#1192](https://github.com/ant-design/x/pull/1192) 由 [iamkun-2](https://github.com/iamkun-2) 提交、[#1193](https://github.com/ant-design/x/pull/1193) 由 [iamkun-2](https://github.com/iamkun-2) 提交、[#1197](https://github.com/ant-design/x/pull/1197) 由 [elrrrrrrr](https://github.com/elrrrrrrr) 提交、[#1199](https://github.com/ant-design/x/pull/1199) 由 [Div627](https://github.com/Div627) 提交\n\n## 2.0.0-alpha.7\n\n`2025-09-14`\n\n### @ant-design/x\n\n- Bubble\n - 💄 修复默认 `white-space` 样式问题。[#1147](https://github.com/ant-design/x/pull/1147) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 💄 修复语义化缺失以及 `loading` 状态下在 Bubble.List 下高度错误问题。[#1162](https://github.com/ant-design/x/pull/1162) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🐛 修复类型导出和文档引入错误问题。[#1160](https://github.com/ant-design/x/pull/1160) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 📖 删除下线工具 `useXAgent` 和 `useXChat`，以及对应的文档引用删除或者替换为 `X SDK`。[#1148](https://github.com/ant-design/x/pull/1148) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 FileCard 组件 `status` 展示缺失问题。[#1156](https://github.com/ant-design/x/pull/1156) 由 [hy993658052](https://github.com/hy993658052) 提交\n- 🐛 修复 Sender 组件开启文件粘贴功能时无法粘贴 Excel 单元格文本数据问题。[#1167](https://github.com/ant-design/x/pull/1167) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### @ant-design/x-markdown\n\n- 🆕 新增 Mermaid 插件操作功能。[#1135](https://github.com/ant-design/x/pull/1135) 由 [Div627](https://github.com/Div627) 提交\n- 🐛 修复 XMarkdown 流式效果。[#1135](https://github.com/ant-design/x/pull/1135) 由 [Div627](https://github.com/Div627) 提交\n- 🆕 新增插件国际化和主题定制功能，以及文档升级。[#1135](https://github.com/ant-design/x/pull/1135) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 新增 XMarkdown 链接 `openLinksInNewTab` 配置、以及主题颜色调整。[#1164](https://github.com/ant-design/x/pull/1164) 由 [Div627](https://github.com/Div627) 提交\n- 🐛 修复 XMarkdown 与文档 markdown 样式冲突问题。[#1161](https://github.com/ant-design/x/pull/1161) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### @ant-design/x-sdk\n\n- 🛠 重构 useXChat 工具 `isRequesting` 属性，由方法升级为可监控变量。[#1168](https://github.com/ant-design/x/pull/1168) 由 [hylin](https://github.com/hylin) 提交\n- 🆕 新增 useXChat 工具消息 `abort` 状态，同时修复 `requestFallback` 回调方法 `message` 参数错误以及删掉对错误状态的消息过滤。[#1171](https://github.com/ant-design/x/pull/1171) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### 其他\n\n- 📖 优化官网站点提升用户体验。[#1169](https://github.com/ant-design/x/pull/1169) 由 [hylin](https://github.com/hylin) 提交\n- 📖 更新官网介绍、模型接入、百宝箱智能体接入、X SDK 等文档，以及样板间代码更新。[#1171](https://github.com/ant-design/x/pull/1171) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n## 2.0.0-alpha.6\n\n`2025-08-28`\n\n### @ant-design/x\n\n- 🐛 修复 Sender 普通模式点击 `Enter` 选中文候选词时触发 `Submit` 的问题。[#1144](https://github.com/ant-design/x/pull/1144) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 Sender 词槽模式 `submitType` 为 `shiftEnter` 时无法换行问题。[#1143](https://github.com/ant-design/x/pull/1143) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 💄 修复 ThoughtChain.Item `description` 内容过多换行后 `margin` 样式异常。由 [kimteayon](https://github.com/kimteayon) 提交\n- 🛠 使用 `@ant-design/x-sdk` 重构样板间。[#1139](https://github.com/ant-design/x/pull/1139) 由 [hylin](https://github.com/hylin) 提交\n- 🐛 修复 Bubble `prefix` 持续展示。[#1137](https://github.com/ant-design/x/pull/1137) 由 [anxLiang](https://github.com/anxLiang) 提交\n- 📖 补充 Bubble.List 文档解释滚动容器问题。[#1133](https://github.com/ant-design/x/pull/1133) 由 [anxLiang](https://github.com/anxLiang) 提交\n- 🐛 修复 Attachment 组件上传图片未展示图片问题。[#1140](https://github.com/ant-design/x/pull/1140) 由 [hy993658052](https://github.com/hy993658052) 提交\n- 🐛 修复 FileCard 语义化问题以及卡片大小展示问题。[#1130](https://github.com/ant-design/x/pull/1130) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### 其他\n\n- 📦 升级 father 配置。[#1125](https://github.com/ant-design/x/pull/1125) 由 [fireairforce](https://github.com/fireairforce) 提交\n- 📖 优化官网站点提升用户体验。[#1142](https://github.com/ant-design/x/pull/1142) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n## 2.0.0-alpha.5\n\n`2025-08-20`\n\n### @ant-design/x\n\n- 🆕 新增 Actions 子组件功能，Actions.Copy、Actions.Audio、Actions.Item。[#1121](https://github.com/ant-design/x/pull/1121) 由 [kimteayon](https://github.com/kimteayon) 提交\n- Bubble\n - 🆕 新增 `string content` 时渲染带换行符、制表符的功能。[#1127](https://github.com/ant-design/x/pull/1127) 由 [anxLiang](https://github.com/anxLiang) 提交\n - 🆕 新增语义化实现。[#1116](https://github.com/ant-design/x/pull/1116) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🐛 优化样式和类型问题。[#1108](https://github.com/ant-design/x/pull/1108) 由 [anxLiang](https://github.com/anxLiang) 提交\n- 🆕 新增 Sender 组件语义化配置。[#1116](https://github.com/ant-design/x/pull/1116) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### @ant-design/x-sdk\n\n- 🛠 整体优化 X SDK。[#1114](https://github.com/ant-design/x/pull/1114) 由 [hylin](https://github.com/hylin) 提交\n\n### 其他\n\n- 📖 使用 X SDK 重构样板间。[#1139](https://github.com/ant-design/x/pull/1139) 由 [hylin](https://github.com/hylin) 提交\n- 📖 优化官网站点提升用户体验。[#1124](https://github.com/ant-design/x/pull/1124) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1123](https://github.com/ant-design/x/pull/1123) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🛠 发布链路优化。[#1115](https://github.com/ant-design/x/pull/1115) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n## 2.0.0-alpha.3\n\n`2025-08-14`\n\n### @ant-design/x-markdown\n\n- 🛠 优化 version 逻辑以及配置、文档。[#1112](https://github.com/ant-design/x/pull/1112) 由 [Div627](https://github.com/Div627) 提交\n\n## 2.0.0-alpha.1\n\n`2025-08-12`\n\n### @ant-design/x\n\n- 🛠 重构升级组件 Bubble。[#1100](https://github.com/ant-design/x/pull/1100) 由 [anxLiang](https://github.com/anxLiang) 提交、[#1077](https://github.com/ant-design/x/pull/1077) 由 [anxLiang](https://github.com/anxLiang) 提交\n- 🛠 重构升级组件 Bubble.List。[#1077](https://github.com/ant-design/x/pull/1077) 由 [anxLiang](https://github.com/anxLiang) 提交\n- 🐛 修复 Bubble 组件 `readOnly` 和 `loading` 逻辑不生效问题。[#1101](https://github.com/ant-design/x/pull/1101) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### 其他\n\n- 🛠 发布链路优化。[#1098](https://github.com/ant-design/x/pull/1098) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1009](https://github.com/ant-design/x/pull/1009) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 📖 优化官网站点提升用户体验。[#1087](https://github.com/ant-design/x/pull/1087) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n## 2.0.0-alpha.0\n\n`2025-08-05`\n\n### @ant-design/x\n\n- 🔥 新组件 FileCard。[#1094](https://github.com/ant-design/x/pull/1094) 由 [hy993658052](https://github.com/hy993658052) 提交\n- 🔥 新组件 Notification。[#973](https://github.com/ant-design/x/pull/973) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🔥 新组件 Think。[#970](https://github.com/ant-design/x/pull/970) [#966](https://github.com/ant-design/x/pull/966) [#946](https://github.com/ant-design/x/pull/946) 由 [hy993658052](https://github.com/hy993658052) 提交\n- 🛠 重构升级组件 Attachments。\n- 🛠 重构升级组件 Actions。[#994](https://github.com/ant-design/x/pull/994) 由 [vanndxh](https://github.com/vanndxh) 提交\n- 🛠 重构升级组件 Conversations。[#937](https://github.com/ant-design/x/pull/937) [#954](https://github.com/ant-design/x/pull/954) [#955](https://github.com/ant-design/x/pull/955) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🛠 重构升级组件 Sender。[#1073](https://github.com/ant-design/x/pull/1073) 由 [kimteayon](https://github.com/kimteayon) 提交、[#962](https://github.com/ant-design/x/pull/962) 由 [Chuck-Ray](https://github.com/Chuck-Ray) 提交\n- 🛠 重构升级组件 ThoughtChain。[#985](https://github.com/ant-design/x/pull/985) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 全部组件 `Ref` 功能补全。[#1081](https://github.com/ant-design/x/pull/1081) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🆕 XProvider 组件国际化逻辑接入。[#952](https://github.com/ant-design/x/pull/952) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n### @ant-design/x-markdown\n\n- 🔥 新组件 XMarkdown。[#1060](https://github.com/ant-design/x/pull/1060) 由 [Div627](https://github.com/Div627) 提交、[#989](https://github.com/ant-design/x/pull/989) 由 [Div627](https://github.com/Div627) 提交\n- 🔥 新插件 Latex。[#1060](https://github.com/ant-design/x/pull/1060) 由 [Div627](https://github.com/Div627) 提交、[#989](https://github.com/ant-design/x/pull/989) 由 [Div627](https://github.com/Div627) 提交\n- 🔥 新插件 HighlightCode。[#1060](https://github.com/ant-design/x/pull/1060) 由 [Div627](https://github.com/Div627) 提交、[#989](https://github.com/ant-design/x/pull/989) 由 [Div627](https://github.com/Div627) 提交\n- 🔥 新插件 Mermaid。[#1060](https://github.com/ant-design/x/pull/1060) 由 [Div627](https://github.com/Div627) 提交、[#989](https://github.com/ant-design/x/pull/989) 由 [Div627](https://github.com/Div627) 提交\n\n### @ant-design/x-sdk\n\n- 🔥 新工具 useXChat。[#1098](https://github.com/ant-design/x/pull/1098) 由 [hylin](https://github.com/hylin) 提交\n- 🔥 新工具 useXConversations。[#1098](https://github.com/ant-design/x/pull/1098) 由 [hylin](https://github.com/hylin) 提交\n- 🔥 新工具 Chat Provider。[#1098](https://github.com/ant-design/x/pull/1098) 由 [hylin](https://github.com/hylin) 提交\n- 🔥 新工具 XRequest。[#1098](https://github.com/ant-design/x/pull/1098) 由 [hylin](https://github.com/hylin) 提交\n- 🔥 新工具 XStream。[#1098](https://github.com/ant-design/x/pull/1098) 由 [hylin](https://github.com/hylin) 提交\n\n### 其他\n\n- 🛠 整体框架升级为 Monorepo。[#823](https://github.com/ant-design/x/pull/823) 由 [elrrrrrrr](https://github.com/elrrrrrrr) 提交\n- 🛠 整体组件升级 Ant Design V6。[#1012](https://github.com/ant-design/x/pull/1012) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🛠 Ant Design X 发布逻辑升级调整。[#1098](https://github.com/ant-design/x/pull/1098) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1009](https://github.com/ant-design/x/pull/1009) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 📖 优化官网站点提升用户体验。[#1083](https://github.com/ant-design/x/pull/1083) 由 [kimteayon](https://github.com/kimteayon) 提交、[#1001](https://github.com/ant-design/x/pull/1001) 由 [elrrrrrrr](https://github.com/elrrrrrrr) 提交\n\n## 1.6.1\n\n`2025-09-12`\n\n- 🐛 修复 ThoughtChain 组件 `title` 传入 `ReactNode` 时折叠标题无法显示问题。[#1172](https://github.com/ant-design/x/pull/1172) 由 [IsDyh01](https://github.com/IsDyh01) 提交\n- 🐛 修复 Sender 组件 `LoadingButton` 传入 `icon` 属性时同时显示两个图标问题。[#1145](https://github.com/ant-design/x/pull/1145) 由 [IsDyh01](https://github.com/IsDyh01) 提交\n- 🐛 修复 Sender 组件 `content` 语义化缺失问题。[#703](https://github.com/ant-design/x/pull/703) 由 [HomyeeKing](https://github.com/HomyeeKing) 提交\n- 🐛 移除 Bubble 组件打字效果公共前缀逻辑中的冗余条件判断。[#1091](https://github.com/ant-design/x/pull/1091) 由 [AqingCyan](https://github.com/AqingCyan) 提交\n- 🐛 修复 useXChat `updating` 状态缺失问题。[#833](https://github.com/ant-design/x/pull/833) 由 [wzc520pyfm](https://github.com/wzc520pyfm) 提交\n- 🐛 修复 Suggestion 组件 `useActive` 中 items 为空数组导致的异常。[#824](https://github.com/ant-design/x/pull/824) 由 [LengYXin](https://github.com/LengYXin) 提交\n- 📖 优化官网站点提升用户体验。[#960](https://github.com/ant-design/x/pull/960) 由 [wzc520pyfm](https://github.com/wzc520pyfm) 提交、[#1048](https://github.com/ant-design/x/pull/1048) 由 [wzc520pyfm](https://github.com/wzc520pyfm) 提交、[#1118](https://github.com/ant-design/x/pull/1118) 由 [afc163](https://github.com/afc163) 提交、[#1122](https://github.com/ant-design/x/pull/1122) 由 [fireairforce](https://github.com/fireairforce) 提交、[#1120](https://github.com/ant-design/x/pull/1120) 由 [IsDyh01](https://github.com/IsDyh01) 提交\n\n## 1.6.0\n\n`2025-07-30`\n\n- 🆕 Attachments 组件 `FileCard` 新增图标和类型的配置能力。[#1006](https://github.com/ant-design/x/pull/1006) 由 [kieranwv](https://github.com/kieranwv) 提交\n- 📖 新增百宝箱智能体接入文档和样板间。[#1063](https://github.com/ant-design/x/pull/1063) 由 [iamkun-2](https://github.com/iamkun-2) 提交\n- 📖 优化官网站点提升用户体验。[#1054](https://github.com/ant-design/x/pull/1054) 由 [hylin](https://github.com/hylin) 提交、[#1056](https://github.com/ant-design/x/pull/1056) 由 [hylin](https://github.com/hylin) 提交\n\n## 1.5.0\n\n`2025-07-16`\n\n- 🆕 补充 Bubble 组件对滚动事件 `onScroll` 的监听。[#1021](https://github.com/ant-design/x/pull/1021) 由 [QdabuliuQ](https://github.com/QdabuliuQ) 提交\n- 🐛 移除 Bubble 重复的 TS 类型定义。[#1032](https://github.com/ant-design/x/pull/1032) 由 [wzc520pyfm](https://github.com/wzc520pyfm) 提交\n- 🐛 修复 Conversations 组件点击禁用的 `menu` 导致触发 `onActiveChange` 的问题。[#1024](https://github.com/ant-design/x/pull/1024) 由 [QdabuliuQ](https://github.com/QdabuliuQ) 提交\n- 🐛 修复 Attachments 组件 `FileList` 语义化配置。[#1017](https://github.com/ant-design/x/pull/1017) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 补充 Actions 组件 html 配置。[#995](https://github.com/ant-design/x/pull/995) 由 [vanndxh](https://github.com/vanndxh) 提交\n- 🐛 修复 Conversations label 标签展示问题，同时补充语义化配置。[#898](https://github.com/ant-design/x/pull/898) 由 [yuanliu147](https://github.com/yuanliu147) 提交\n- 📖 优化官网站点提升用户体验。[#940](https://github.com/ant-design/x/pull/940) 由 [coding-ice](https://github.com/coding-ice) 提交、[#969](https://github.com/ant-design/x/pull/969) 由 [afc163](https://github.com/afc163) 提交、[#968](https://github.com/ant-design/x/pull/968) 由 [afc163](https://github.com/afc163) 提交、[#1019](https://github.com/ant-design/x/pull/1019) 由 [hylin](https://github.com/hylin) 提交、[#1036](https://github.com/ant-design/x/pull/1036) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n## 1.4.0\n\n`2025-05-30`\n\n- 🔥 新组件 操作列表 - Actions。[#768](https://github.com/ant-design/x/pull/768) 由 [vanndxh](https://github.com/vanndxh) 提交\n- 🐛 修复 Bubble.List `footer` 和 `header` 无法获取 key 的问题。[#876](https://github.com/ant-design/x/pull/876) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 Conversations 列表标题溢出截断失效问题。[#877](https://github.com/ant-design/x/pull/877) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 📖 优化官网站点提升用户体验。[#816](https://github.com/ant-design/x/pull/816) 由 [Rain120](https://github.com/Rain120) 提交、[#880](https://github.com/ant-design/x/pull/880) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n## 1.3.0\n\n`2025-05-21`\n\n- 📖 新增 Conversation 类型导出。[#258](https://github.com/ant-design/x/pull/258) 由 [ONLY-yours](https://github.com/ONLY-yours) 提交\n- 💄 修复 Prompts 滚动条始终显示问题。[#785](https://github.com/ant-design/x/pull/785) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 Suggestion 警告使用 antd 废弃 API `onDropdownVisibleChange` 的问题。[#827](https://github.com/ant-design/x/pull/827) 由 [zombieJ](https://github.com/zombieJ) 提交\n- 🆕 扩展 Bubble `content` 到 `footer` 和 `header` 的方法实现参数，同时补充 Demo 实现。[#683](https://github.com/ant-design/x/pull/683) 由 [L-Hknu](https://github.com/L-Hknu) 和 [kimteayon](https://github.com/kimteayon) 提交\n- 📖 修复 Api Key 在站点露出的安全问题。[#840](https://github.com/ant-design/x/pull/840) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 📖 优化官网站点提升用户体验。[#783](https://github.com/ant-design/x/pull/783) 由 [kimteayon](https://github.com/kimteayon) 提交、[#229](https://github.com/ant-design/x/pull/229) 由 [afc163](https://github.com/afc163) 提交、[#835](https://github.com/ant-design/x/pull/835) 由 [kimteayon](https://github.com/kimteayon) 、[#814](https://github.com/ant-design/x/pull/814) 由 [wzc520pyfm](https://github.com/wzc520pyfm) 提交\n\n## 1.2.0\n\n`2025-04-25`\n\n- 🐛 删除 Conversations 溢出省略逻辑修复 `tooltip` 展示错误的问题。[#776](https://github.com/ant-design/x/pull/776) 由 [afc163](https://github.com/afc163) 提交\n- 🐛 修复 Attachments `image` 卡片样式问题。[#751](https://github.com/ant-design/x/pull/751) 由 [wzc520pyfm](https://github.com/wzc520pyfm) 提交\n- 🐛 修复 ThoughtChain 受控问题。[#752](https://github.com/ant-design/x/pull/752) 由 [Youzi2233](https://github.com/Youzi2233) 提交\n- XRequest\n - 🆕 XRequestCallbacks 新增 `onStream` 回调，可对流监听和终止操作。[#711](https://github.com/ant-design/x/pull/711) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🐛 修复 XRequestOptions 变更不生效问题，并新增示例。[#736](https://github.com/ant-design/x/pull/736) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🆕 新增模型接入示例。[#725](https://github.com/ant-design/x/pull/725) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 📖 优化 API 方法参数命名不准确问题。[#736](https://github.com/ant-design/x/pull/736) 由 [kimteayon](https://github.com/kimteayon) 提交\n- useXAgent\n - 🆕 RequestFn 新增 `onStream` 回调，可对流监听和终止操作。[#711](https://github.com/ant-design/x/pull/711) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🆕 RequestFn 新增 `transformStream` 转换函数，用于处理流数据。[#725](https://github.com/ant-design/x/pull/725) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🐛 修复 XAgentConfigPreset 变更不生效问题，并新增示例。[#736](https://github.com/ant-design/x/pull/736) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🐛 修复 RequestFn `onSuccess` 回调类型错误问题，同时更新对应示例。[#725](https://github.com/ant-design/x/pull/725) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🆕 新增模型接入、自定义入参、变更配置示例。[#725](https://github.com/ant-design/x/pull/725) 由 [kimteayon](https://github.com/kimteayon) 提交、[#711](https://github.com/ant-design/x/pull/711) 由 [kimteayon](https://github.com/kimteayon) 提交\n- useXChat\n - 🆕 XChatConfig 新增 Input 和 Output 泛型类型。[#725](https://github.com/ant-design/x/pull/725) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🆕 XChatConfig 新增 `transformMessage` 转换函数，可在更新数据时对 `messages` 做转换，同时会更新到 `messages`。[#711](https://github.com/ant-design/x/pull/711) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🆕 XChatConfig 新增 `transformStream` 转换函数，用于处理流数据。[#711](https://github.com/ant-design/x/pull/711) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🆕 XChatConfig 新增 `resolveAbortController` 回调函数，可获得 `AbortController` 控制器，用于控制流状态。[#711](https://github.com/ant-design/x/pull/711) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🆕 新增模型接入示例，删除错误的终止流示例。[#711](https://github.com/ant-design/x/pull/711) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 Sender `header` 圆角样式溢出问题。[#732](https://github.com/ant-design/x/pull/732) 由 [Bao0630](https://github.com/Bao0630) 提交\n- 📖 新增助手式样板间。[#657](https://github.com/ant-design/x/pull/657) 由 [vanndxh](https://github.com/vanndxh) 提交\n- 📖 重构独立式样板间。[#753](https://github.com/ant-design/x/pull/753) 由 [vanndxh](https://github.com/vanndxh) 提交\n- 📖 优化官网站点提升用户体验。[#730](https://github.com/ant-design/x/pull/730) 由 [afc163](https://github.com/afc163) 提交、[#758](https://github.com/ant-design/x/pull/758) 由 [coding-ice](https://github.com/coding-ice) 提交、 [#761](https://github.com/ant-design/x/pull/761) 由 [ONLY-yours](https://github.com/ONLY-yours) 提交\n\n## 1.1.1\n\n`2025-04-14`\n\n- Bubble.List\n - 💄 优化 Bubble.List 更新时减少不必要的刷新。[#479](https://github.com/ant-design/x/pull/479) 由 [YumoImer](https://github.com/YumoImer) 提交\n - 🐛 修复 Bubble.List 暗黑主题下滚动条样式不兼容问题。[#727](https://github.com/ant-design/x/pull/727) 由 [kimteayon](https://github.com/kimteayon) 提交\n- Conversation\n - 🐛 修复 Conversation 内 ul 和 li 的样式问题。[#726](https://github.com/ant-design/x/pull/726) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🆕 新增 `menu` 的 `getPopupContainer` 的实现。[#698](https://github.com/ant-design/x/pull/698) 由 [yuxuan-ctrl](https://github.com/yuxuan-ctrl) 提交\n- 🐛 修复 ThoughtChain 折叠面板无法展开问题。[#720](https://github.com/ant-design/x/pull/720) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 🐛 修复 Attachments 图片展示样式问题。[#708](https://github.com/ant-design/x/pull/708) 由 [hy993658052](https://github.com/hy993658052) 提交\n- 💄 优化 Sender，使自定义 Actions 的 `disabled` 属性受控。[#666](https://github.com/ant-design/x/pull/666) 由 [afc163](https://github.com/afc163) 提交\n- 📖 优化官网站点提升用户体验。[#680](https://github.com/ant-design/x/pull/680) 由 [wzc520pyfm](https://github.com/wzc520pyfm) 提交、[#699](https://github.com/ant-design/x/pull/699) 由 [afc163](https://github.com/afc163) 提交、[#716](https://github.com/ant-design/x/pull/716) 由 [afc163](https://github.com/afc163) 提交、[#686](https://github.com/ant-design/x/pull/686) 由 [afc163](https://github.com/afc163) 提交、[#728](https://github.com/ant-design/x/pull/728) 由 [kimteayon](https://github.com/kimteayon) 提交\n\n## 1.1.0\n\n`2025-03-28`\n\n- Sender\n - 🆕 新增 `footer` 支持自定义底部内容。[#654](https://github.com/ant-design/x/pull/654) 由 [kimteayon](https://github.com/kimteayon) 提交\n - 🆕 扩展 `autoSize` 支持配置内容高度。[#637](https://github.com/ant-design/x/pull/637) 由 [Zhang-Wei-666](https://github.com/Zhang-Wei-666) 提交\n - 📖 补充 `onFocus` 和 `onBlur` 类型声明。[#625](https://github.com/ant-design/x/pull/625) 由 [aojunhao123](https://github.com/aojunhao123) 提交\n- 🆕 扩展 Conversations 组件 `menu.trigger` 支持自定义菜单触发器。[#630](https://github.com/ant-design/x/pull/630) 由 [kimteayon](https://github.com/kimteayon) 提交\n- Attachments\n - 🆕 扩展 `ImageProps` 支持自定义图像展示配置。[#613](https://github.com/ant-design/x/pull/613) 由 [hy993658052](https://github.com/hy993658052) 提交\n - 📖 补充 Attachments 组件 `onRemove` API 文档。[#608](https://github.com/ant-design/x/pull/608) 由 [kimteayon](https://github.com/kimteayon) 提交\n- 📖 补充 `GPT-Vis` 渲染图表示例。[#603](https://github.com/ant-design/x/pull/603) 由 [lvisei](https://github.com/lvisei) 提交\n- 📦 优化 Chat Design X `peerDependencies`。[#611](https://github.com/ant-design/x/pull/611) 由 [pokerface9830](https://github.com/pokerface9830) 提交\n- 📖 优化官网站点提升用户体验。[#626](https://github.com/ant-design/x/pull/626) 由 [aojunhao123](https://github.com/aojunhao123) 提交、[#648](https://github.com/ant-design/x/pull/648) 由 [kimteayon](https://github.com/kimteayon) 提交、[#659](https://github.com/ant-design/x/pull/659) 由 [afc163](https://github.com/afc163) 提交、[#667](https://github.com/ant-design/x/pull/667) 由 [jin19980928](https://github.com/jin19980928) 提交\n\n## 1.0.6\n\n`2025-03-14`\n\n- 🆕 扩展 `Sender` 文件粘贴可处理多个文件。[#505](https://github.com/ant-design/x/pull/500) 由 [ztkuaikuai](https://github.com/ztkuaikuai) 提交\n- 🆕 扩展 `BubbleList` 角色定义功能。[#500](https://github.com/ant-design/x/pull/500) 由 [chenluda](https://github.com/chenluda) 提交\n- 🐛 修复 `Attachments` 组件多文件横向滚动条展示。[#556](https://github.com/ant-design/x/pull/556) 由 [onefeng123](https://github.com/onefeng123) 提交\n- 🐛 修复 `Attachments` 组件 onRemove 不生效问题。[#555](https://github.com/ant-design/x/pull/555) 由 [edison-tianhe](https://github.com/edison-tianhe) 提交\n- 🐛 修复 `Sender` 组件 actions 缺少 SpeechButton 组件的问题。[#549](https://github.com/ant-design/x/pull/549) 由 [zombieJ](https://github.com/zombieJ) 提交\n- 🐛 修复 `Attachments` 组件文件初始化展示问题。[#524](https://github.com/ant-design/x/pull/524) 由 [ztkuaikuai](https://github.com/ztkuaikuai) 提交\n- 🐛 修复 `Conversations` 组件滚动条问题。[#485](https://github.com/ant-design/x/pull/485) 由 [LofiSu](https://github.com/LofiSu) 提交\n- 📖 优化 `Bubble` 组件 typing 减少不必要的渲染。[#477](https://github.com/ant-design/x/pull/477) 由 [kxcy001123](https://github.com/kxcy001123) 提交\n- 📦 优化 Chat Design X 构建 [#578](https://github.com/ant-design/x/pull/578)，[#584](https://github.com/ant-design/x/pull/584) 由 [kimteayon](https://github.com/kimteayon) 提交、 [#578](https://github.com/ant-design/x/pull/578) 由 [kimteayon](https://github.com/kimteayon) 提交、[#587](https://github.com/ant-design/x/pull/587) 由 [afc163](https://github.com/afc163) 提交\n- 📖 优化官网站点提升用户体验。[#484](https://github.com/ant-design/x/pull/484) 由 [ztkuaikuai](https://github.com/ztkuaikuai) 提交、 [#495](https://github.com/ant-design/x/pull/495) 由 [ztkuaikuai](https://github.com/ztkuaikuai) 提交、 [#522](https://github.com/ant-design/x/pull/522) 由 [liangchaofei](https://github.com/liangchaofei) 提交、[#537](https://github.com/ant-design/x/pull/537) 由 [wzc520pyfm](https://github.com/wzc520pyfm) 提交、 [#553](https://github.com/ant-design/x/pull/553) 由 [PeachScript](https://github.com/PeachScript) 提交、 [#578](https://github.com/ant-design/x/pull/578) 由 [kimteayon](https://github.com/kimteayon) 提交 、 [#585](https://github.com/ant-design/x/pull/585) 由 [MaricoHan](https://github.com/MaricoHan) 提交\n\n## 1.0.5\n\n`2025-01-13`\n\n- 🐛 修复 `Attachment` 组件移除图标的样式问题。[#460](https://github.com/ant-design/x/pull/460) 由 [Rain120](https://github.com/Rain120) 提交\n- 🛠 重构 `BubbleProps`，支持 `ContentType` 类型参数。[#403](https://github.com/ant-design/x/pull/403) 由 [YumoImer](https://github.com/YumoImer) 提交\n- 🛠 开发环境和网站支持 React 19。[#432](https://github.com/ant-design/x/pull/432) 由 [YumoImer](https://github.com/YumoImer) 提交\n- 📖 优化官网站点提升用户体验。[#456](https://github.com/ant-design/x/pull/456)， [#446](https://github.com/ant-design/x/pull/446)， [#448](https://github.com/ant-design/x/pull/448)， [#444](https://github.com/ant-design/x/pull/444)， [#414](https://github.com/ant-design/x/pull/414)， [#406](https://github.com/ant-design/x/pull/406)， [#404](https://github.com/ant-design/x/pull/404) 由 [wzc520pyfm](https://github.com/wzc520pyfm)， [YumoImer](https://github.com/YumoImer)， [Rain120](https://github.com/Rain120)， [afc163](https://github.com/afc163) 提交\n\n## 1.0.4\n\n`2024-12-25`\n\n- 🆕 扩展 `XStream` 对取消功能的支持。[#319](https://github.com/ant-design/x/pull/319) 由 [ppbl](https://github.com/ppbl) 提交\n- 🆕 扩展 `Bubble` 对 `typing.suffix` 打字后缀的支持。[#316](https://github.com/ant-design/x/pull/316) 由 [BQXBQX](https://github.com/BQXBQX) 提交\n- 🆕 扩展 `Sender` 组件 `onChange` 对 `event` 事件参数的支持。[#362](https://github.com/ant-design/x/pull/362) 由 [defaultjacky](https://github.com/defaultjacky) 提交\n- 🆕 扩展 `Sender` 组件 `ref` 对 `focus`、`blur` 等焦点控制能力的支持。[#397](https://github.com/ant-design/x/pull/397) 由 [YumoImer](https://github.com/YumoImer) 提交\n- 🐛 修复 `ThoughtChain` 在非 cssVar 下的样式问题。[#373](https://github.com/ant-design/x/pull/373) 由 [YumoImer](https://github.com/YumoImer) 提交\n- 📖 添加 `Petercat` 助理功能。[#375](https://github.com/ant-design/x/pull/375) 由 [xingwanying](https://github.com/xingwanying) 提交\n- 📖 优化官网站点提升用户体验。[#389](https://github.com/ant-design/x/pull/389)、[#377](https://github.com/ant-design/x/pull/377)、[#364](https://github.com/ant-design/x/pull/364)、[#368](https://github.com/ant-design/x/pull/368) 由 [afc163](https://github.com/afc163)、[YumoImer](https://github.com/YumoImer) 提交\n\n## 1.0.3\n\n`2024-12-16`\n\n- 💄 优化 `Bubble` 设置 `placement: 'end'` 后的样式。[#314](https://github.com/ant-design/x/pull/314) 由 [YumoImer](https://github.com/YumoImer) 提交\n- 🐛 修复 `Bubble.List` 设置 `autoScroll` 后偶现无法触发自动滚动的问题。[#336](https://github.com/ant-design/x/pull/336) 由 [anzhou99Ru](https://github.com/anzhou99Ru) 提交\n- 📖 优化官网站点提升用户体验。[#343](https://github.com/ant-design/x/pull/343)、[#334](https://github.com/ant-design/x/pull/334)、[#315](https://github.com/ant-design/x/pull/315)、[#331](https://github.com/ant-design/x/pull/331) 由 [afc163](https://github.com/afc163)、[YumoImer](https://github.com/YumoImer)、[Wxh16144](https://github.com/Wxh16144) 提交\n- 🛠 修复 `pnpm lint` 时的错误。[#313](https://github.com/ant-design/x/pull/313) 由 [BQXBQX](https://github.com/BQXBQX) 提交\n\n## 1.0.2\n\n`2024-12-04`\n\n- 🛠 优化 `XRequest` 支持对自定义协议解析。[#293](https://github.com/ant-design/x/pull/293) 由 [YumoImer](https://github.com/YumoImer) 提交\n- 🐛 修复 `Attachment` 前后预览按钮无法正常显隐的问题。[#295](https://github.com/ant-design/x/pull/295) 由 [anzhou99](https://github.com/anzhou99) 提交\n- 🐛 修复 `useXChat` 对同一条消息重复触发 `onUpdate` 的问题。[#298](https://github.com/ant-design/x/pull/298) 由 [YumoImer](https://github.com/YumoImer) 提交\n- 📖 添加 `Bubble` 配合 `GPT-Vis` 的使用演示文档。[#288](https://github.com/ant-design/x/pull/288) 由 [lvisei](https://github.com/lvisei) 提交\n- 📦 更新浏览器目标配置减少打包体积。[#282](https://github.com/ant-design/x/pull/282) 由 [afc163](https://github.com/afc163) 提交\n- 🛠 修复运行 `pnpm run prestart` 的错误。[#287](https://github.com/ant-design/x/pull/287) 由 [long36708](https://github.com/long36708) 提交\n\n## 1.0.1\n\n`2024-11-29`\n\n- 🛠 优化 `useXAgent` 和 `XStream` 的 TS 类型。[#272](https://github.com/ant-design/x/pull/272) 由 [YumoImer](https://github.com/YumoImer) 提交\n- 🛠 调整 `agent` 参数设为可选，以支持仅使用 `useXChat` 的数据管理功能。[#271](https://github.com/ant-design/x/pull/271) 由 [YumoImer](https://github.com/YumoImer) 提交\n- 💄 调整 `Conversations` 样式基于 RICH 设计规范。[#242](https://github.com/ant-design/x/pull/242) 由 [YumoImer](https://github.com/YumoImer) 提交\n- 🛠 修复使用 `pnpm` 启动项目时幽灵依赖导致无法启动的问题。[#223](https://github.com/ant-design/x/pull/223) 由 [YumoImer](https://github.com/YumoImer) 提交\n- 🌈 独立式样板间支持附件上传功能演示。[#250](https://github.com/ant-design/x/pull/250)、[#265](https://github.com/ant-design/x/pull/265) 由 [kelvinelove](https://github.com/kelvinelove) 提交\n- 📖 修复缺失的贡献者信息。[#212](https://github.com/ant-design/x/pull/212) 由 [afc163](https://github.com/afc163) 提交\n- 📖 优化官网站点提升用户体验。[#277](https://github.com/ant-design/x/pull/277)、[#264](https://github.com/ant-design/x/pull/264)、[#263](https://github.com/ant-design/x/pull/263)、[#262](https://github.com/ant-design/x/pull/262)、[#261](https://github.com/ant-design/x/pull/261)、[#241](https://github.com/ant-design/x/pull/241)、[#246](https://github.com/ant-design/x/pull/246)、[#210](https://github.com/ant-design/x/pull/210)、[#211](https://github.com/ant-design/x/pull/211) 由 [YumoImer](https://github.com/YumoImer)、[afc163](https://github.com/afc163)、[Rain-1214](https://github.com/Rain-1214)、[kelvinelove](https://github.com/kelvinelove)、[tabzzz1](https://github.com/tabzzz1) 提交\n- 📦 更新浏览器目标减少打包体积。[#234](https://github.com/ant-design/x/pull/234) 由 [afc163](https://github.com/afc163) 提交\n\n## 1.0.0\n\n`2024-11-22`\n\n🎉 我们非常开心的宣布 [Ant Design X](https://x.ant.design) 1.0.0 版本正式发布啦～\n\n- 🌈 **源自企业级 AI 产品的最佳实践**：基于 RICH 交互范式，提供卓越的 AI 交互体验\n- 🧩 **灵活多样的原子组件**：覆盖绝大部分 AI 对话场景，助力快速构建个性化 AI 交互页面\n- ⚡ **开箱即用的模型对接能力**：轻松对接符合 OpenAI 标准的模型推理服务\n- 🔄 **高效管理对话数据流**：提供好用的数据流管理功能，让开发更高效\n- 📦 **丰富的样板间支持**：提供多种模板，快速启动 LUI 应用开发\n- 🛡 **TypeScript 全覆盖**：采用 TypeScript 开发，提供完整类型支持，提升开发体验与可靠性\n- 🎨 **深度主题定制能力**：支持细粒度的样式调整，满足各种场景的个性化需求\n\n![demos](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*UAEeSbJfuM8AAAAAAAAAAAAADgCCAQ/fmt.webp)\n\n## 1.0.0-alpha.12\n\n`2024-11-07`\n\n- 🔥 Sender 支持 `onPasteFile` 事件与 Attachments 支持 `ref.upload` 手动上传文件。[#184](https://github.com/ant-design/x/pull/184) 由 [zombieJ](https://github.com/zombieJ) 提交\n- 🔥 Sender `allowSpeech` 支持受控使用三方语音 SDK。 [#187](https://github.com/ant-design/x/pull/187) 由 [zombieJ](https://github.com/zombieJ) 提交\n\n## 1.0.0-alpha.11\n\n`2024-11-06`\n\n- 🔥 新组件 欢迎 - Welcome。 [#179](https://github.com/ant-design/x/pull/179) 由 [zombieJ](https://github.com/zombieJ) 提交\n- 🔥 Prompts 支持嵌套层级展示。[#181](https://github.com/ant-design/x/pull/181)由 [zombieJ](https://github.com/zombieJ) 提交\n- 🔥 Attachments 支持 Attachments.FileCard 子组件。[#182](https://github.com/ant-design/x/pull/182) 由 [zombieJ](https://github.com/zombieJ) 提交\n\n## 1.0.0-alpha.10\n\n`2024-11-04`\n\n- 🐛 修复 Attachments 组件使用拖动上传时无法触发上传请求的问题。[#178](https://github.com/ant-design/x/pull/178) 由 [YumoImer](https://github.com/YumoImer) 提交\n\n## 1.0.0-alpha.9\n\n`2024-11-01`\n\n- 🐛 修复 Attachments 组件内的代码逻辑问题。[#174](https://github.com/ant-design/x/pull/174) 由 [YumoImer](https://github.com/YumoImer) 提交\n- 🐛 修复 Sender.Header 内不可以聚焦的问题。[#175](https://github.com/ant-design/x/pull/175) 由[zombieJ](https://github.com/zombieJ) 提交\n\n## 1.0.0-alpha.7\n\n`2024-10-31`\n\n- 🐛 修复 Attachments 组件第一次上传时无法触发上传请求的问题。 [#172](https://github.com/ant-design/x/pull/172) 由 [YumoImer](https://github.com/YumoImer) 提交\n\n## 1.0.0-alpha.6\n\n`2024-10-25`\n\n- 🔥 新组件 附件 - `Attachments`。[#168](https://github.com/ant-design/x/pull/168) 由 [zombieJ](https://github.com/zombieJ) [#168](https://github.com/ant-design/x/pull/168) 提交\n- 🔥 新工具 流 - `XStream`。[#138](https://github.com/ant-design/x/pull/138) 由 [YumoImer](https://github.com/YumoImer) 提交\n- 🔥 新工具 请求 - `XRequest`。[#138](https://github.com/ant-design/x/pull/138) 由 [YumoImer](https://github.com/YumoImer) 提交\n\n## 1.0.0-alpha.5\n\n`2024-10-23`\n\n- 🆕 Bubble 支持 `loadingRender` 以自定义加载状态。[#165](https://github.com/ant-design/x/pull/165)\n- 🐛 修复不包裹 XProvider 时，组件样式丢失的问题。[#163](https://github.com/ant-design/x/pull/163)\n\n## 1.0.0-alpha.4\n\n`2024-10-17`\n\n- Sender\n - 🆕 Sender 支持 `speech` 语音功能。[#154](https://github.com/ant-design/x/pull/154) 由 [zombieJ](https://github.com/zombieJ) 提交\n - 🆕 Sender 支持 `Sender.Header`。[#156](https://github.com/ant-design/x/pull/156) 由 [zombieJ](https://github.com/zombieJ) 提交\n - 🆕 Sender 样式调整。[#151](https://github.com/ant-design/x/pull/151) 由 [zombieJ](https://github.com/zombieJ) 提交\n- 📖 更新文档页面下的组配置。[#155](https://github.com/ant-design/x/pull/155) 由 [YumoImer](https://github.com/YumoImer) 提交\n- 📖 调整示例切换按钮样式。[#146](https://github.com/ant-design/x/pull/146) 由 [afc163](https://github.com/afc163) 提交\n- 📖 更新 README.md。[#142](https://github.com/ant-design/x/pull/142) 由 [afc163](https://github.com/afc163) 提交\n\n## 1.0.0-alpha.3\n\n`2024-10-10`\n\n- Bubble\n - 🆕 Bubble 新增 `variant` 变体支持，由 [zombieJ](https://github.com/zombieJ) 完成 [#140](https://github.com/ant-design/x/pull/140)\n - 🆕 Bubble 新增 `shape` 形状支持，由 [zombieJ](https://github.com/zombieJ) 完成 [#144](https://github.com/ant-design/x/pull/144)\n - 🆕 Bubble 新增 `header` 和 `footer` 支持自定义头部与底部内容并添加对应语义化 `className`，由 [zombieJ](https://github.com/zombieJ) 完成 [#147](https://github.com/ant-design/x/pull/147)\n\n## 1.0.0-alpha.2\n\n`2024-09-27`\n\n- 🔥 新增 `XProvider` 全局化配置组件，由 [YumoImer](https://github.com/YumoImer) 完成 [#127](https://github.com/ant-design/x/pull/127)\n- 🔥 新增 运行时钩子 `useXChat` 数据管理，由 [zombieJ](https://github.com/zombieJ) 完成 [#125](https://github.com/ant-design/x/pull/125)\n- 🔥 新增 运行时钩子 `useXAgent` 模型调度，由 [zombieJ](https://github.com/zombieJ) 完成 [#125](https://github.com/ant-design/x/pull/125)\n- 🆕 `ThoughtChain` 思维链组件支持 `size` 属性，由 [YumoImer](https://github.com/YumoImer) 完成 [#123](https://github.com/ant-design/x/pull/123)\n- 🛠 更新 `.lintstagedrc.json`。 由 [afc163](https://github.com/afc163) 完成 [#128](https://github.com/ant-design/x/pull/128)\n- 🛠 更新依赖 `cheerio` 至 `v1.0.0`。 由 [afc163](https://github.com/afc163) 完成 [#121](https://github.com/ant-design/x/pull/121)\n\n## 1.0.0-alpha.1\n\n`2024-09-10`\n\n### 🚀 新特性\n\n- 🔥 新增：`Suggestion` 建议组件，由 [ONLY-yours](https://github.com/ONLY-yours) 完成 [#87](https://github.com/ant-design/x/pull/87)\n\n### 🐛 修复\n\n- 🐛 修复：更改 `Sender` 的 `restProps` 类型，由 [ONLY-yours](https://github.com/ONLY-yours) 完成 [#101](https://github.com/ant-design/x/pull/101)\n- 🛠 修复：`bun install` 问题，由 [afc163](https://github.com/afc163) 完成 [#111](https://github.com/ant-design/x/pull/111)\n\n### 🛠 重构\n\n- 🛠 重构：添加层级支持，由 [zombieJ](https://github.com/zombieJ) 完成 [#118](https://github.com/ant-design/x/pull/118)\n- 🛠 重构：加速工作流，由 [afc163](https://github.com/afc163) 完成 [#119](https://github.com/ant-design/x/pull/119)\n- 🛠 重构：升级开发依赖的 5 个更新，由 [dependabot](https://github.com/dependabot) 完成 [#120](https://github.com/ant-design/x/pull/120)\n- 🛠 重构：清理 `README.md`，由 [afc163](https://github.com/afc163) 完成 [#102](https://github.com/ant-design/x/pull/102)\n- 🛠 重构：添加 issue 模板，由 [afc163](https://github.com/afc163) 完成 [#103](https://github.com/ant-design/x/pull/103)\n- 🛠 重构：添加 `bun.lockb`，由 [afc163](https://github.com/afc163) 完成 [#108](https://github.com/ant-design/x/pull/108)\n- 🛠 删除 `index-style-only.js`，由 [afc163](https://github.com/afc163) 完成 [#106](https://github.com/ant-design/x/pull/106)\n- 🛠 重构：更新 `main.yml`，由 [afc163](https://github.com/afc163) 完成 [#105](https://github.com/ant-design/x/pull/105)\n- 🛠 重构：更新 `package.json`，由 [afc163](https://github.com/afc163) 完成 [#110](https://github.com/ant-design/x/pull/110)\n\n### 📖 文档\n\n- 📖 文档：更新 `README.md`，由 [afc163](https://github.com/afc163) 完成 [#104](https://github.com/ant-design/x/pull/104)\n- 📖 文档：更新 `codecov` 徽章，由 [afc163](https://github.com/afc163) 完成 [#112](https://github.com/ant-design/x/pull/112)\n\n## 1.0.0-alpha.0\n\n`2024-09-05`\n\n- 🔥 新组件 Bubble。 [#19](https://github.com/ant-design/x/pull/19) [li-jia-nan](https://github.com/li-jia-nan)\n - 🔥 Bubble 支持方向 [#52](https://github.com/ant-design/x/pull/52) [li-jia-nan](https://github.com/li-jia-nan)\n- 🔥 新组件 Bubble.List。 [#57](https://github.com/ant-design/x/pull/57) [zombieJ](https://github.com/zombieJ)\n- 🔥 新组件 Conversations。 [#48](https://github.com/ant-design/x/pull/48) [YumoImer](https://github.com/YumoImer)\n- 🔥 新组件 Prompts。 [#55](https://github.com/ant-design/x/pull/55) [YumoImer](https://github.com/YumoImer)\n- 🔥 新组件 Sender。 [#46](https://github.com/ant-design/x/pull/46) [ONLY-yours](https://github.com/ONLY-yours)\n- 🔥 新组件 ThoughtChain。 [#86](https://github.com/ant-design/x/pull/86) [YumoImer](https://github.com/YumoImer)\n- 📦 使用 `father` 构建。 [#84](https://github.com/ant-design/x/pull/84) [zombieJ](https://github.com/zombieJ)\n- 🛠 修复使用 `antd` 的 es 或 lib 包时 ThemeContext 实例不一致的问题。 [#88](https://github.com/ant-design/x/pull/88) [YumoImer](https://github.com/YumoImer)\n- 🛠 重构：API 命名规范 [#73](https://github.com/ant-design/x/pull/73) [zombieJ](https://github.com/zombieJ)\n- 🛠 杂项：CI、Github Actions、发布\n - 🛠 [#59](https://github.com/ant-design/x/pull/59) [zombieJ](https://github.com/zombieJ)\n - 🛠 [#62](https://github.com/ant-design/x/pull/62) [zombieJ](https://github.com/zombieJ)\n - 🛠 [#71](https://github.com/ant-design/x/pull/71) [ONLY-yours](https://github.com/ONLY-yours)\n - 🛠 [#72](https://github.com/ant-design/x/pull/72) [YumoImer](https://github.com/YumoImer)\n - 🛠 [#98](https://github.com/ant-design/x/pull/98) [YumoImer](https://github.com/YumoImer)\n- 📖 更新 README.md\n - 📖 [#81](https://github.com/ant-design/x/pull/81) [zombieJ](https://github.com/zombieJ)\n - 📖 [#82](https://github.com/ant-design/x/pull/82) [zombieJ](https://github.com/zombieJ)\n - 📖 [#61](https://github.com/ant-design/x/pull/61) [afc163](https://github.com/afc163)\n\n## 0.0.0-alpha.0\n\n`2024-05-10`\n\n- MISC: 项目初始化。\n" }, { "path": "CNAME", "content": "x.ant.design" }, { "path": "README-zh_CN.md", "content": "
\n\n\n\n

Ant Design X

\n\n打造卓越 AI 界面解决方案，引领智能新体验。\n\n[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] ![GitHub contributors][github-contributors] [![Follow zhihu][zhihu-image]][zhihu-url] [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/ant-design/x)\n\n| Package | Latest Version | Download stats | Bundle Size | JSDelivr |\n| :-- | :-- | :-- | :-- | :-- |\n| `@ant-design/x` | [![npm version][x-version-image]][x-version-url] | [![npm downloads][x-downloads-image]][x-downloads-url] | [![bundle size][x-bundle-size-image]][x-bundle-size-url] | [![jsdelivr][x-jsdelivr-image]][x-jsdelivr-url] |\n| `@ant-design/x-markdown` | [![npm version][x-markdown-version-image]][x-markdown-version-url] | [![npm downloads][x-markdown-downloads-image]][x-markdown-downloads-url] | [![bundle size][x-markdown-bundle-size-image]][x-markdown-bundle-size-url] | [![jsdelivr][x-markdown-jsdelivr-image]][x-markdown-jsdelivr-url] |\n| `@ant-design/x-sdk` | [![npm version][x-sdk-version-image]][x-sdk-version-url] | [![npm downloads][x-sdk-downloads-image]][x-sdk-downloads-url] | [![bundle size][x-sdk-bundle-size-image]][x-sdk-bundle-size-url] | [![jsdelivr][x-sdk-jsdelivr-image]][x-sdk-jsdelivr-url] |\n| `@ant-design/x-skill` | [![npm version][x-skill-version-image]][x-skill-version-url] | [![npm downloads][x-skill-downloads-image]][x-skill-downloads-url] | [![bundle size][x-skill-bundle-size-image]][x-skill-bundle-size-url] | [![jsdelivr][x-skill-jsdelivr-image]][x-skill-jsdelivr-url] |\n\n[更新日志](./CHANGELOG.zh-CN.md) · [报告一个 Bug][github-issues-bug-report] · [想新增特性？][github-issues-feature-request] · [English](./README.md) · 中文\n\n[x-version-image]: https://img.shields.io/npm/v/@ant-design/x.svg?style=flat-square\n[x-version-url]: https://www.npmjs.com/package/@ant-design/x\n[x-downloads-image]: https://img.shields.io/npm/dm/@ant-design/x.svg?style=flat\n[x-downloads-url]: https://www.npmjs.com/package/@ant-design/x\n[x-bundle-size-image]: https://img.shields.io/bundlephobia/minzip/@ant-design/x\n[x-bundle-size-url]: https://bundlephobia.com/result?p=@ant-design/x\n[x-package-size-image]: https://packagephobia.com/badge?p=@ant-design/x\n[x-package-size-url]: https://packagephobia.com/result?p=@ant-design/x\n[x-jsdelivr-image]: https://data.jsdelivr.com/v1/package/npm/@ant-design/x/badge\n[x-jsdelivr-url]: https://www.jsdelivr.com/package/npm/@ant-design/x\n[x-markdown-version-image]: https://img.shields.io/npm/v/@ant-design/x-markdown.svg?style=flat\n[x-markdown-version-url]: https://www.npmjs.com/package/@ant-design/x-markdown\n[x-markdown-downloads-image]: https://img.shields.io/npm/dm/@ant-design/x-markdown.svg?style=flat\n[x-markdown-downloads-url]: https://www.npmjs.com/package/@ant-design/x-markdown\n[x-markdown-bundle-size-image]: https://img.shields.io/bundlephobia/minzip/@ant-design/x-markdown\n[x-markdown-bundle-size-url]: https://bundlephobia.com/result?p=@ant-design/x-markdown\n[x-markdown-package-size-image]: https://packagephobia.com/badge?p=@ant-design/x-markdown\n[x-markdown-package-size-url]: https://packagephobia.com/result?p=@ant-design/x-markdown\n[x-markdown-jsdelivr-image]: https://data.jsdelivr.com/v1/package/npm/@ant-design/x-markdown/badge\n[x-markdown-jsdelivr-url]: https://www.jsdelivr.com/package/npm/@ant-design/x-markdown\n[x-sdk-version-image]: https://img.shields.io/npm/v/@ant-design/x-sdk.svg?style=flat\n[x-sdk-version-url]: https://www.npmjs.com/package/@ant-design/x-sdk\n[x-sdk-downloads-image]: https://img.shields.io/npm/dm/@ant-design/x-sdk.svg?style=flat\n[x-sdk-downloads-url]: https://www.npmjs.com/package/@ant-design/x-sdk\n[x-sdk-bundle-size-image]: https://img.shields.io/bundlephobia/minzip/@ant-design/x-sdk\n[x-sdk-bundle-size-url]: https://bundlephobia.com/result?p=@ant-design/x-sdk\n[x-sdk-package-size-image]: https://packagephobia.com/badge?p=@ant-design/x-sdk\n[x-sdk-package-size-url]: https://packagephobia.com/result?p=@ant-design/x-sdk\n[x-sdk-jsdelivr-image]: https://data.jsdelivr.com/v1/package/npm/@ant-design/x-sdk/badge\n[x-sdk-jsdelivr-url]: https://www.jsdelivr.com/package/npm/@ant-design/x-sdk\n[x-skill-version-image]: https://img.shields.io/npm/v/@ant-design/x-skill.svg?style=flat-square\n[x-skill-version-url]: https://www.npmjs.com/package/@ant-design/x-skill\n[x-skill-downloads-image]: https://img.shields.io/npm/dm/@ant-design/x-skill.svg?style=flat\n[x-skill-downloads-url]: https://www.npmjs.com/package/@ant-design/x-skill\n[x-skill-bundle-size-image]: https://img.shields.io/bundlephobia/minzip/@ant-design/x-skill\n[x-skill-bundle-size-url]: https://bundlephobia.com/result?p=@ant-design/x-skill\n[x-skill-package-size-image]: https://packagephobia.com/badge?p=@ant-design/x-skill\n[x-skill-package-size-url]: https://packagephobia.com/result?p=@ant-design/x-skill\n[x-skill-jsdelivr-image]: https://data.jsdelivr.com/v1/package/npm/@ant-design/x-skill/badge\n[x-skill-jsdelivr-url]: https://www.jsdelivr.com/package/npm/@ant-design/x-skill\n[npm-image]: https://img.shields.io/npm/v/@ant-design/x.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/@ant-design/x\n[github-action-image]: https://github.com/ant-design/x/actions/workflows/main.yml/badge.svg\n[github-action-url]: https://github.com/ant-design/x/actions/workflows/main.yml\n[codecov-image]: https://codecov.io/gh/ant-design/x/graph/badge.svg?token=wrCCsyTmdi\n[codecov-url]: https://codecov.io/gh/ant-design/x\n[download-image]: https://img.shields.io/npm/dm/@ant-design/x.svg?style=flat-square\n[download-url]: https://npmjs.org/package/@ant-design/x\n[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@ant-design/x?style=flat-square\n[bundlephobia-url]: https://bundlephobia.com/package/@ant-design/x\n[github-issues-bug-report]: https://github.com/ant-design/x/issues/new?template=bug-report.yml\n[github-issues-feature-request]: https://github.com/ant-design/x/issues/new?template=bug-feature-request.yml\n[antd-image]: https://img.shields.io/badge/-Ant%20Design-blue?labelColor=black&logo=antdesign&style=flat-square\n[antd-url]: https://ant.design\n[zhihu-image]: https://img.shields.io/badge/-Ant%20Design-white?logo=zhihu\n[zhihu-url]: https://www.zhihu.com/column/c_1564262000561106944\n[github-contributors]: https://img.shields.io/github/contributors-anon/ant-design/x\n\n
\n\n![demos](https://github.com/user-attachments/assets/8f6b56b9-3619-4ddc-9105-ca0eb7af070f)\n\n## 🌈 开箱即用的大模型企业级组件\n\n`@ant-design/x` 基于 RICH 交互范式，在不同的交互阶段提供了大量的原子组件，帮助你灵活搭建你的 AI 应用，详情点击[这里](packages/x/README-zh_CN.md)。\n\n## ⚡️ 对接模型智能体服务 & 高效管理数据流\n\n`@ant-design/x-sdk` 提供了一系列的工具API，旨在提供开发者开箱即用的管理AI应用数据流，详情点击[这里](packages/x-sdk/README-zh_CN.md)。\n\n## ✨ Markdown 渲染器\n\n`@ant-design/x-markdown` 旨在提供流式友好、强拓展性和高性能的 Markdown 渲染器。提供流式渲染公式、代码高亮、mermaid 等能力，详情点击[这里](packages/x-markdown/README-zh_CN.md)。\n\n## 🚀 Skill\n\n`@ant-design/x-skill` 是专为 Ant Design X 打造的智能技能库，提供了一系列精心设计的 Agent 技能。这些技能能够显著提升开发效率，帮助您快速构建高质量的 AI 对话应用，并有效解决开发过程中遇到的各种问题，详情点击[这里](packages/x-skill/README-zh_CN.md)。\n\n## 谁在使用\n\nAnt Design X 广泛用于蚂蚁集团内由 AI 驱动的用户交互界面。如果你的公司和产品使用了 Ant Design X，欢迎到 [这里](https://github.com/ant-design/x/issues/126) 留言。\n\n## 本地研发\n\n> antx 通过 [npm-workspace](https://docs.npmjs.com/cli/v11/using-npm/workspaces) 来组织代码，推荐使用 npm 或 [utoo](https://github.com/umijs/mako/tree/next) 进行本地研发。\n\n```bash\n\n# 安装 utoo\n$ npm i -g utoo\n\n# 安装项目依赖 (by utoo)\n$ ut [install]\n\n# 启动项目\n$ ut start # 方式一: 通过主包的 script 启动\n$ ut start --workspace packages/x # 方式二: 通过 workspace 参数启动\n$ ut start --workspace @ant-design/x # 方式三: 通过 package.name 启动 (utoo only)\n$ cd packages/x && ut start # 方式四: 进入子包目录单独启动\n\n\n# 添加依赖\n$ ut install [pkg@version] # 为主包添加依赖\n$ ut install [pkg@version] --workspace packages/x # 为子包添加依赖\n$ cd packages/x && ut install [pkg@version] # 为子包添加依赖\n\n# 依赖更新\n$ ut update # utoo only\n```\n\n## 如何贡献\n\n在任何形式的参与前，请先阅读 [贡献者文档](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md)。如果你希望参与贡献，欢迎提交 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或给我们 [报告 Bug](http://new-issue.ant.design/)。\n\n> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。\n\n## 社区互助\n\n如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。\n\n通过 GitHub Discussions 提问时，建议使用 `Q&A` 标签。\n\n1. [GitHub Discussions](https://github.com/ant-design/x/discussions)\n2. [GitHub Issues](https://github.com/ant-design/x/issues)\n\n\n \"Contribution\n \n" }, { "path": "README.md", "content": "
\n\n\n\n

Ant Design X

\n\nBuild excellent AI interfaces and pioneer intelligent new experiences.\n\n[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] ![GitHub contributors][github-contributors] [![Follow zhihu][zhihu-image]][zhihu-url] [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/ant-design/x)\n\n| Package | Latest Version | Download stats | Bundle Size | JSDelivr |\n| :-- | :-- | :-- | :-- | :-- |\n| `@ant-design/x` | [![npm version][x-version-image]][x-version-url] | [![npm downloads][x-downloads-image]][x-downloads-url] | [![bundle size][x-bundle-size-image]][x-bundle-size-url] | [![jsdelivr][x-jsdelivr-image]][x-jsdelivr-url] |\n| `@ant-design/x-markdown` | [![npm version][x-markdown-version-image]][x-markdown-version-url] | [![npm downloads][x-markdown-downloads-image]][x-markdown-downloads-url] | [![bundle size][x-markdown-bundle-size-image]][x-markdown-bundle-size-url] | [![jsdelivr][x-markdown-jsdelivr-image]][x-markdown-jsdelivr-url] |\n| `@ant-design/x-sdk` | [![npm version][x-sdk-version-image]][x-sdk-version-url] | [![npm downloads][x-sdk-downloads-image]][x-sdk-downloads-url] | [![bundle size][x-sdk-bundle-size-image]][x-sdk-bundle-size-url] | [![jsdelivr][x-sdk-jsdelivr-image]][x-sdk-jsdelivr-url] |\n| `@ant-design/x-skill` | [![npm version][x-skill-version-image]][x-skill-version-url] | [![npm downloads][x-skill-downloads-image]][x-skill-downloads-url] | [![bundle size][x-skill-bundle-size-image]][x-skill-bundle-size-url] | [![jsdelivr][x-skill-jsdelivr-image]][x-skill-jsdelivr-url] |\n\n[Changelog](./CHANGELOG.en-US.md) · [Report a Bug][github-issues-bug-report] · [Request a Feature][github-issues-feature-request] · English · [中文](./README-zh_CN.md)\n\n[x-version-image]: https://img.shields.io/npm/v/@ant-design/x.svg?style=flat-square\n[x-version-url]: https://www.npmjs.com/package/@ant-design/x\n[x-downloads-image]: https://img.shields.io/npm/dm/@ant-design/x.svg?style=flat\n[x-downloads-url]: https://www.npmjs.com/package/@ant-design/x\n[x-bundle-size-image]: https://img.shields.io/bundlephobia/minzip/@ant-design/x\n[x-bundle-size-url]: https://bundlephobia.com/result?p=@ant-design/x\n[x-package-size-image]: https://packagephobia.com/badge?p=@ant-design/x\n[x-package-size-url]: https://packagephobia.com/result?p=@ant-design/x\n[x-jsdelivr-image]: https://data.jsdelivr.com/v1/package/npm/@ant-design/x/badge\n[x-jsdelivr-url]: https://www.jsdelivr.com/package/npm/@ant-design/x\n[x-markdown-version-image]: https://img.shields.io/npm/v/@ant-design/x-markdown.svg?style=flat\n[x-markdown-version-url]: https://www.npmjs.com/package/@ant-design/x-markdown\n[x-markdown-downloads-image]: https://img.shields.io/npm/dm/@ant-design/x-markdown.svg?style=flat\n[x-markdown-downloads-url]: https://www.npmjs.com/package/@ant-design/x-markdown\n[x-markdown-bundle-size-image]: https://img.shields.io/bundlephobia/minzip/@ant-design/x-markdown\n[x-markdown-bundle-size-url]: https://bundlephobia.com/result?p=@ant-design/x-markdown\n[x-markdown-package-size-image]: https://packagephobia.com/badge?p=@ant-design/x-markdown\n[x-markdown-package-size-url]: https://packagephobia.com/result?p=@ant-design/x-markdown\n[x-markdown-jsdelivr-image]: https://data.jsdelivr.com/v1/package/npm/@ant-design/x-markdown/badge\n[x-markdown-jsdelivr-url]: https://www.jsdelivr.com/package/npm/@ant-design/x-markdown\n[x-sdk-version-image]: https://img.shields.io/npm/v/@ant-design/x-sdk.svg?style=flat\n[x-sdk-version-url]: https://www.npmjs.com/package/@ant-design/x-sdk\n[x-sdk-downloads-image]: https://img.shields.io/npm/dm/@ant-design/x-sdk.svg?style=flat\n[x-sdk-downloads-url]: https://www.npmjs.com/package/@ant-design/x-sdk\n[x-sdk-bundle-size-image]: https://img.shields.io/bundlephobia/minzip/@ant-design/x-sdk\n[x-sdk-bundle-size-url]: https://bundlephobia.com/result?p=@ant-design/x-sdk\n[x-sdk-package-size-image]: https://packagephobia.com/badge?p=@ant-design/x-sdk\n[x-sdk-package-size-url]: https://packagephobia.com/result?p=@ant-design/x-sdk\n[x-sdk-jsdelivr-image]: https://data.jsdelivr.com/v1/package/npm/@ant-design/x-sdk/badge\n[x-sdk-jsdelivr-url]: https://www.jsdelivr.com/package/npm/@ant-design/x-sdk\n[x-skill-version-image]: https://img.shields.io/npm/v/@ant-design/x-skill.svg?style=flat-square\n[x-skill-version-url]: https://www.npmjs.com/package/@ant-design/x-skill\n[x-skill-downloads-image]: https://img.shields.io/npm/dm/@ant-design/x-skill.svg?style=flat\n[x-skill-downloads-url]: https://www.npmjs.com/package/@ant-design/x-skill\n[x-skill-bundle-size-image]: https://img.shields.io/bundlephobia/minzip/@ant-design/x-skill\n[x-skill-bundle-size-url]: https://bundlephobia.com/result?p=@ant-design/x-skill\n[x-skill-package-size-image]: https://packagephobia.com/badge?p=@ant-design/x-skill\n[x-skill-package-size-url]: https://packagephobia.com/result?p=@ant-design/x-skill\n[x-skill-jsdelivr-image]: https://data.jsdelivr.com/v1/package/npm/@ant-design/x-skill/badge\n[x-skill-jsdelivr-url]: https://www.jsdelivr.com/package/npm/@ant-design/x-skill\n[npm-image]: https://img.shields.io/npm/v/@ant-design/x.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/@ant-design/x\n[github-action-image]: https://github.com/ant-design/x/actions/workflows/main.yml/badge.svg\n[github-action-url]: https://github.com/ant-design/x/actions/workflows/main.yml\n[codecov-image]: https://codecov.io/gh/ant-design/x/graph/badge.svg?token=wrCCsyTmdi\n[codecov-url]: https://codecov.io/gh/ant-design/x\n[download-image]: https://img.shields.io/npm/dm/@ant-design/x.svg?style=flat-square\n[download-url]: https://npmjs.org/package/@ant-design/x\n[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@ant-design/x?style=flat-square\n[bundlephobia-url]: https://bundlephobia.com/package/@ant-design/x\n[github-issues-bug-report]: https://github.com/ant-design/x/issues/new?template=bug-report.yml\n[github-issues-feature-request]: https://github.com/ant-design/x/issues/new?template=bug-feature-request.yml\n[antd-image]: https://img.shields.io/badge/-Ant%20Design-blue?labelColor=black&logo=antdesign&style=flat-square\n[antd-url]: https://ant.design\n[zhihu-image]: https://img.shields.io/badge/-Ant%20Design-white?logo=zhihu\n[zhihu-url]: https://www.zhihu.com/column/c_1564262000561106944\n[github-contributors]: https://img.shields.io/github/contributors-anon/ant-design/x\n\n
\n\n![demos](https://github.com/user-attachments/assets/8f6b56b9-3619-4ddc-9105-ca0eb7af070f)\n\n## 🌈 Enterprise-level LLM Components Out of the Box\n\n`@ant-design/x` provides a rich set of atomic components for different interaction stages based on the RICH interaction paradigm, helping you flexibly build your AI applications. See details [here](packages/x/README.md).\n\n## ⚡️ Connect to Model Agents & Efficiently Manage Data Streams\n\n`@ant-design/x-sdk` provides a set of utility APIs to help developers manage AI application data streams out of the box. See details [here](packages/x-sdk/README.md).\n\n## ✨ Markdown Renderer\n\n`@ant-design/x-markdown` aims to provide a streaming-friendly, highly extensible, and high-performance Markdown renderer. It supports streaming rendering of formulas, code highlighting, mermaid, and more. See details [here](packages/x-markdown/README.md).\n\n## 🚀 Skill\n\n`@ant-design/x-skill` is an intelligent skill library specially designed for Ant Design X, providing a series of carefully designed Agent skills. These skills can significantly improve development efficiency, help you quickly build high-quality AI conversation applications, and effectively solve various problems encountered during development. See details [here](packages/x-skill/README.md).\n\n## Who's using\n\nAnt Design X is widely used in AI-driven user interfaces within Ant Group. If your company or product uses Ant Design X, feel free to leave a message [here](https://github.com/ant-design/x/issues/126).\n\n## Local Development\n\n> antx uses [npm-workspace](https://docs.npmjs.com/cli/v11/using-npm/workspaces) to organize code. We recommend using npm or [utoo](https://github.com/umijs/mako/tree/next) for local development.\n\n```bash\n# Install utoo\n$ npm i -g utoo\n\n# Install project dependencies (by utoo)\n$ ut [install]\n\n# Start project\n$ ut start # Method 1: Start via main package script\n$ ut start --workspace packages/x # Method 2: Start via workspace param\n$ ut start --workspace @ant-design/x # Method 3: Start via package.name (utoo only)\n$ cd packages/x && ut start # Method 4: Enter subpackage dir and start\n\n# Add dependency\n$ ut install [pkg@version] # Add to main package\n$ ut install [pkg@version] --workspace packages/x # Add to subpackage\n$ cd packages/x && ut install [pkg@version] # Add to subpackage\n\n# Update dependencies\n$ ut update # utoo only\n```\n\n## How to Contribute\n\nBefore participating in any form, please read the [Contributor Guide](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md). If you wish to contribute, feel free to submit a [Pull Request](https://github.com/ant-design/ant-design/pulls) or [report a Bug](http://new-issue.ant.design/).\n\n> We highly recommend reading [How To Ask Questions The Smart Way](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way), [How to Ask Questions in Open Source Community](https://github.com/seajs/seajs/issues/545), [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs.html), and [How to Submit Unanswerable Questions to Open Source Projects](https://zhuanlan.zhihu.com/p/25795393). Better questions are more likely to get help.\n\n## Community Support\n\nIf you encounter problems during use, you can seek help through the following channels. We also encourage experienced users to help newcomers through these channels.\n\nWhen asking questions on GitHub Discussions, it is recommended to use the `Q&A` tag.\n\n1. [GitHub Discussions](https://github.com/ant-design/x/discussions)\n2. [GitHub Issues](https://github.com/ant-design/x/issues)\n\n\n \"Contribution\n \n" }, { "path": "biome.json", "content": "{\n \"files\": {\n \"ignoreUnknown\": true,\n \"includes\": [\n \"**\",\n \"!**/.dumi/tmp*\",\n \"!**/dist/**/*\",\n \"!**/es/**/*\",\n \"!**/lib/**/*\",\n \"!**/bin/**/*\",\n \"!**/_site/**/*\",\n \"!**/server/**/*\",\n \"!**/node_modules\",\n \"!**/coverage\",\n \"!**/package.json\",\n \"!**/x-markdown/plugins/**/*\",\n \"!**/x-markdown/themes/**/*\",\n \"!**/tests/index.html\",\n \"!**/scripts/visual-regression/report-template.html\"\n ]\n },\n \"formatter\": {\n \"enabled\": true,\n \"indentStyle\": \"space\",\n \"lineWidth\": 100,\n \"indentWidth\": 2\n },\n \"javascript\": {\n \"jsxRuntime\": \"reactClassic\",\n \"formatter\": {\n \"quoteStyle\": \"single\"\n }\n },\n \"linter\": {\n \"rules\": {\n \"style\": {\n \"useImportType\": \"off\",\n \"useNumberNamespace\": \"off\",\n \"useNodejsImportProtocol\": \"off\",\n \"noNonNullAssertion\": \"off\",\n \"noUnusedTemplateLiteral\": \"off\",\n \"useAsConstAssertion\": \"error\",\n \"useDefaultParameterLast\": \"error\",\n \"useEnumInitializers\": \"error\",\n \"useSelfClosingElements\": \"error\",\n \"useSingleVarDeclarator\": \"error\",\n \"noInferrableTypes\": \"error\",\n \"noUselessElse\": \"error\",\n \"noParameterAssign\": \"off\"\n },\n \"complexity\": {\n \"noUselessTypeConstraint\": \"off\",\n \"noForEach\": \"off\",\n \"noUselessFragments\": \"off\"\n },\n \"correctness\": {\n \"useExhaustiveDependencies\": \"off\",\n \"useUniqueElementIds\": \"off\",\n \"noVoidTypeReturn\": \"off\",\n \"noUndeclaredDependencies\": \"error\"\n },\n \"suspicious\": {\n \"noGlobalIsNan\": \"off\",\n \"noGlobalIsFinite\": \"off\",\n \"noExplicitAny\": \"off\",\n \"noArrayIndexKey\": \"off\",\n \"noConfusingVoidType\": \"off\",\n \"noThenProperty\": \"off\",\n \"noTsIgnore\": \"off\",\n \"noImplicitAnyLet\": \"off\",\n \"noNonNullAssertedOptionalChain\": \"off\"\n },\n \"performance\": {\n \"noDelete\": \"off\",\n \"noAccumulatingSpread\": \"off\"\n },\n \"a11y\": {\n \"noAriaHiddenOnFocusable\": \"off\",\n \"useSemanticElements\": \"off\",\n \"useKeyWithClickEvents\": \"off\",\n \"noStaticElementInteractions\": \"off\",\n \"useValidAnchor\": \"off\",\n \"useAnchorContent\": \"off\"\n }\n }\n },\n \"overrides\": [\n {\n \"includes\": [\n \"**/*.test.ts\",\n \"**/*.test.tsx\",\n \"**/tests/**/*\",\n \"**/scripts/**/*\",\n \"**/.dumi/**/*\"\n ],\n \"linter\": {\n \"rules\": {\n \"style\": {\n \"noParameterAssign\": \"off\"\n },\n \"suspicious\": {\n \"noThenProperty\": \"off\",\n \"noImplicitAnyLet\": \"off\"\n },\n \"complexity\": {\n \"noUselessFragments\": \"off\"\n },\n \"a11y\": {\n \"useValidAnchor\": \"off\",\n \"useAnchorContent\": \"off\",\n \"useKeyWithClickEvents\": \"off\"\n }\n }\n }\n },\n {\n \"includes\": [\"**/packages/x/components/**/*/demo/**/*\", \"**/packages/x-sdk/src/**/*\"],\n \"linter\": {\n \"rules\": {\n \"correctness\": {\n \"noVoidTypeReturn\": \"off\",\n \"noUnusedPrivateClassMembers\": \"off\"\n },\n \"a11y\": {\n \"useValidAnchor\": \"off\",\n \"useAnchorContent\": \"off\",\n \"useKeyWithClickEvents\": \"off\"\n }\n }\n }\n },\n {\n \"includes\": [\"**/packages/x-markdown/src/**/*\"],\n \"linter\": {\n \"rules\": {\n \"correctness\": {\n \"noVoidTypeReturn\": \"off\"\n },\n \"complexity\": {\n \"noImportantStyles\": \"off\"\n },\n \"a11y\": {\n \"useValidAnchor\": \"off\",\n \"useAnchorContent\": \"off\",\n \"useKeyWithClickEvents\": \"off\"\n }\n }\n }\n },\n {\n \"includes\": [\"**/packages/x/components/notification/**/*\"],\n \"linter\": {\n \"rules\": {\n \"correctness\": {\n \"noUnusedPrivateClassMembers\": \"off\"\n }\n }\n }\n },\n {\n \"includes\": [\n \"**/node_modules/**\",\n \"**/dist/**\",\n \"**/es/**\",\n \"**/lib/**\",\n \"**/bin/**\",\n \"**/_site/**\",\n \"**/coverage/**\",\n \"**/scripts/**\",\n \"**/.fatherrc.ts\",\n \"**/tests/**\",\n \"**/__tests__/**\",\n \"**/demo/**\",\n \"**/.dumi/**\",\n \"packages/x/docs/**\"\n ],\n \"linter\": {\n \"rules\": {\n \"correctness\": {\n \"noUndeclaredDependencies\": \"off\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"x-mono\",\n \"version\": \"2.4.0\",\n \"private\": true,\n \"scripts\": {\n \"presite\": \"npm run prestart --workspaces\",\n \"predeploy\": \"npm run site\",\n \"deploy\": \"gh-pages -d _site -b gh-pages -f\",\n \"site\": \"npm run site --workspace packages/x && cp -rf packages/x/_site ./_site && cp CNAME _site\",\n \"compile\": \"npm run compile --workspaces\",\n \"version\": \"npm run version --workspaces\",\n \"start\": \"npm run start --workspace packages/x\",\n \"prestart\": \"npm run prestart --workspaces\",\n \"pretest\": \"npm run pretest --workspaces\",\n \"publish-version\": \"tsx ./scripts/synchronize-version.ts\",\n \"prepublishOnly\": \"tsx ./scripts/pre-publish.ts\",\n \"precompile\": \"npm run precompile --workspaces\",\n \"prepare\": \"husky\",\n \"size-limit\": \"size-limit\",\n \"lint\": \"npm run lint --workspaces\",\n \"tsc\": \"npm run tsc --workspaces\",\n \"test\": \"npm run test --workspaces\",\n \"coverage\": \"npm run test --workspaces\",\n \"test:dekko\": \"npm run test:dekko --workspaces\",\n \"test:package-diff\": \"npm run test:package-diff --workspaces\"\n },\n \"license\": \"MIT\",\n \"workspaces\": [\n \"packages/*\"\n ],\n \"devDependencies\": {\n \"@ant-design/tools\": \"^19.1.0\",\n \"@biomejs/biome\": \"^2.0.5\",\n \"@codecov/webpack-plugin\": \"^1.4.0\",\n \"@madccc/duplicate-package-checker-webpack-plugin\": \"^1.0.0\",\n \"@size-limit/file\": \"^12.0.0\",\n \"@testing-library/react\": \"^16.3.0\",\n \"antd\": \"^6.1.1\",\n \"circular-dependency-plugin\": \"^5.2.2\",\n \"dekko\": \"^0.2.1\",\n \"encoding\": \"^0.1.13\",\n \"father\": \"^4.6.10\",\n \"gh-pages\": \"^6.3.0\",\n \"glob\": \"^13.0.0\",\n \"husky\": \"^9.1.6\",\n \"lint-staged\": \"^16.3.1\",\n \"marked-emoji\": \"^2.0.1\",\n \"prettier\": \"^3.3.3\",\n \"react-markdown\": \"^10.1.0\",\n \"size-limit\": \"^12.0.0\"\n },\n \"size-limit\": [\n {\n \"path\": \"./packages/x/dist/antdx.min.js\",\n \"limit\": \"500 KiB\"\n },\n {\n \"path\": \"./packages/x-sdk/dist/x-sdk.min.js\",\n \"limit\": \"350 KiB\"\n },\n {\n \"path\": \"./packages/x-markdown/dist/x-markdown.min.js\",\n \"limit\": \"150 KiB\"\n },\n {\n \"path\": \"./packages/x-markdown/dist/plugins/latex.min.js\",\n \"limit\": \"300 KiB\"\n }\n ],\n \"description\": \"Craft AI-driven interfaces effortlessly\",\n \"homepage\": \"https://x.ant.design\",\n \"bugs\": {\n \"url\": \"https://github.com/ant-design/x/issues\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/ant-design/x\"\n },\n \"funding\": {\n \"type\": \"opencollective\",\n \"url\": \"https://opencollective.com/ant-design\"\n },\n \"overrides\": {\n \"@emotion/hash\": \"^0.9.2\",\n \"react-is\": \"^18.3.1\"\n }\n}\n" }, { "path": "packages/x/.dumi/components/SemanticPreview.tsx", "content": "import { XProvider } from '@ant-design/x';\nimport set from '@rc-component/util/lib/utils/set';\nimport { Col, Flex, Popover, Row, Tag, Typography, theme } from 'antd';\nimport { createStyles, css } from 'antd-style';\nimport { clsx } from 'clsx';\n/* eslint-disable react-hooks-extra/no-direct-set-state-in-use-effect */\nimport React from 'react';\n\nconst MARK_BORDER_SIZE = 2;\n\nconst useStyle = createStyles(({ token }, markPos: [number, number, number, number]) => ({\n container: css`\n position: relative;\n `,\n colWrap: css`\n border-right: 1px solid ${token.colorBorderSecondary};\n display: flex;\n justify-content: center;\n align-items: center;\n padding: ${token.paddingMD}px;\n overflow: hidden;\n `,\n listWrap: css`\n display: flex;\n flex-direction: column;\n list-style: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n `,\n listItem: css`\n cursor: pointer;\n padding: ${token.paddingSM}px;\n transition: background-color ${token.motionDurationFast} ease;\n &:hover {\n background-color: ${token.controlItemBgHover};\n }\n &:not(:first-of-type) {\n border-top: 1px solid ${token.colorBorderSecondary};\n }\n `,\n marker: css`\n position: absolute;\n border: ${MARK_BORDER_SIZE}px solid ${token.colorWarning};\n box-sizing: border-box;\n z-index: 999999;\n box-shadow: 0 0 0 1px #fff;\n pointer-events: none;\n inset-inline-start: ${markPos[0] - MARK_BORDER_SIZE}px;\n top: ${markPos[1] - MARK_BORDER_SIZE}px;\n width: ${markPos[2] + MARK_BORDER_SIZE * 2}px;\n height: ${markPos[3] + MARK_BORDER_SIZE * 2}px;\n `,\n markerActive: css`\n opacity: 1;\n `,\n markerNotActive: css`\n opacity: 0;\n `,\n markerMotion: css`\n transition:\n opacity ${token.motionDurationSlow} ease,\n all ${token.motionDurationSlow} ease;\n `,\n markerNotMotion: css`\n transition: opacity ${token.motionDurationSlow} ease;\n `,\n}));\n\nfunction getSemanticCells(semanticPath: string) {\n return semanticPath.split('.');\n}\n\nconst getMarkClassName = (semanticKey: string) =>\n `semantic-mark-${semanticKey}`.replace(/\\./g, '-');\n\nexport interface SemanticPreviewProps {\n componentName: string;\n semantics: { name: string; desc: string; version?: string }[];\n children: React.ReactElement | ((injectProps: any) => React.ReactElement);\n height?: number;\n}\n\nconst SemanticPreview: React.FC = (props) => {\n const { semantics = [], children, height, componentName = 'Component' } = props;\n const { token } = theme.useToken();\n\n // ======================= Semantic =======================\n\n const semanticClassNames = React.useMemo>(() => {\n let classNames: Record = {};\n\n semantics.forEach((semantic) => {\n const pathCell = getSemanticCells(semantic.name);\n classNames = set(classNames, pathCell, getMarkClassName(semantic.name));\n });\n\n return classNames;\n }, [semantics]);\n\n const injectProps = {\n classNames: semanticClassNames,\n };\n\n const cloneNode =\n typeof children === 'function'\n ? children(injectProps)\n : React.cloneElement(children, injectProps);\n\n // ======================== Hover =========================\n const containerRef = React.useRef(null);\n\n const timerRef = React.useRef>(null);\n\n const [positionMotion, setPositionMotion] = React.useState(false);\n const [hoverSemantic, setHoverSemantic] = React.useState(null);\n const [markPos, setMarkPos] = React.useState<[number, number, number, number]>([0, 0, 0, 0]);\n\n const { styles } = useStyle(markPos);\n\n React.useEffect(() => {\n if (hoverSemantic) {\n const targetClassName = getMarkClassName(hoverSemantic);\n const targetElement = containerRef.current?.querySelector(`.${targetClassName}`);\n const containerRect = containerRef.current?.getBoundingClientRect();\n const targetRect = targetElement?.getBoundingClientRect();\n\n setMarkPos([\n (targetRect?.left || 0) - (containerRect?.left || 0),\n (targetRect?.top || 0) - (containerRect?.top || 0),\n targetRect?.width || 0,\n targetRect?.height || 0,\n ]);\n\n timerRef.current = setTimeout(() => {\n setPositionMotion(true);\n }, 10);\n } else {\n timerRef.current = setTimeout(() => {\n setPositionMotion(false);\n }, 500);\n }\n return () => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n };\n }, [hoverSemantic]);\n\n // ======================== Render ========================\n return (\n
\n \n \n {cloneNode}\n \n \n
    \n {semantics.map((semantic) => (\n \n 
    \n                      \n                        {`<${componentName}\n  classNames={{\n    ${semantic.name}: 'my-${componentName.toLowerCase()}',\n  }}\n  styles={{\n    ${semantic.name}: { color: 'red' },\n  }}\n>\n  ...\n`}\n                      \n
    \n \n }\n >\n setHoverSemantic(semantic.name)}\n onMouseLeave={() => setHoverSemantic(null)}\n >\n \n \n \n {semantic.name}\n \n {semantic.version && {semantic.version}}\n \n \n {semantic.desc}\n \n \n \n \n ))}\n
\n \n \n \n
\n );\n};\n\nexport default SemanticPreview;\n" }, { "path": "packages/x/.dumi/global.css", "content": ".demo-logo {\n width: 120px;\n min-width: 120px;\n height: 32px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 6px;\n margin-inline-end: 24px;\n}\n\n.demo-logo-vertical {\n height: 32px;\n margin: 16px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 6px;\n}\n\nhtml {\n scrollbar-width: thin;\n scrollbar-color: #eaeaea transparent;\n}\n" }, { "path": "packages/x/.dumi/hooks/use.ts", "content": "function use(promise: PromiseLike): T {\n const internal: PromiseLike & {\n status?: 'pending' | 'fulfilled' | 'rejected';\n value?: T;\n reason?: any;\n } = promise;\n if (internal.status === 'fulfilled') {\n return internal.value as T;\n }\n if (internal.status === 'rejected') {\n throw internal.reason;\n }\n if (internal.status === 'pending') {\n throw internal;\n }\n internal.status = 'pending';\n internal.then(\n (result) => {\n internal.status = 'fulfilled';\n internal.value = result;\n },\n (reason) => {\n internal.status = 'rejected';\n internal.reason = reason;\n },\n );\n throw internal;\n}\n\nexport default use;\n" }, { "path": "packages/x/.dumi/hooks/useDark.tsx", "content": "import React from 'react';\n\nexport const DarkContext = React.createContext(false);\n" }, { "path": "packages/x/.dumi/hooks/useFetch/cache.ts", "content": "export default class FetchCache {\n private cache: Map> = new Map();\n\n get(key: string) {\n return this.cache.get(key);\n }\n\n set(key: string, value: PromiseLike) {\n this.cache.set(key, value);\n }\n\n promise(key: string, promiseFn: () => PromiseLike): PromiseLike {\n const cached = this.get(key);\n if (cached) {\n return cached;\n }\n const promise = promiseFn();\n this.set(key, promise);\n return promise;\n }\n}\n" }, { "path": "packages/x/.dumi/hooks/useFetch/index.ts", "content": "import fetch from 'cross-fetch';\nimport React from 'react';\n\nimport FetchCache from './cache';\n\nconst cache = new FetchCache();\n\nconst useFetch = (options: string | { request: () => PromiseLike; key: string }) => {\n let request;\n let key;\n if (typeof options === 'string') {\n request = () => fetch(options).then((res) => res.json());\n key = options;\n } else {\n request = options.request;\n key = options.key;\n }\n return React.use(cache.promise(key, request));\n};\n\nexport default useFetch;\n" }, { "path": "packages/x/.dumi/hooks/useLayoutState.ts", "content": "import { startTransition, useState } from 'react';\n\nconst useLayoutState: typeof useState = (\n ...args: Parameters>\n): ReturnType> => {\n const [state, setState] = useState(...args);\n\n const setLayoutState: typeof setState = (...setStateArgs) => {\n startTransition(() => {\n setState(...setStateArgs);\n });\n };\n\n return [state, setLayoutState];\n};\n\nexport default useLayoutState;\n" }, { "path": "packages/x/.dumi/hooks/useLocale.ts", "content": "import { useIntl } from 'dumi';\n\nexport interface LocaleMap<\n K extends PropertyKey = PropertyKey,\n V extends string | ((...params: any[]) => string) = string,\n> {\n cn: Record;\n en: Record;\n}\n\nconst useLocale = <\n K extends PropertyKey = PropertyKey,\n V extends string | ((...params: any[]) => string) = string,\n>(\n localeMap?: LocaleMap,\n): [Record, 'cn' | 'en'] => {\n const { locale } = useIntl();\n const localeType = locale === 'zh-CN' ? 'cn' : 'en';\n return [localeMap?.[localeType]!, localeType] as const;\n};\n\nexport default useLocale;\n" }, { "path": "packages/x/.dumi/hooks/useLocation.ts", "content": "import { useLocation as useDumiLocation } from 'dumi';\nimport * as React from 'react';\n\nimport useLocale from './useLocale';\n\nfunction clearPath(path: string) {\n return path.replace('-cn', '').replace(/\\/$/, '');\n}\n\nexport default function useLocation() {\n const location = useDumiLocation();\n const { search } = location;\n const [, localeType] = useLocale();\n\n const getLink = React.useCallback(\n (path: string, hash?: string | { cn: string; en: string }) => {\n let pathname = clearPath(path);\n\n if (localeType === 'cn') {\n pathname = `${pathname}-cn`;\n }\n\n if (search) {\n pathname = `${pathname}${search}`;\n }\n\n if (hash) {\n let hashStr: string;\n if (typeof hash === 'object') {\n hashStr = hash[localeType];\n } else {\n hashStr = hash;\n }\n\n pathname = `${pathname}#${hashStr}`;\n }\n\n return pathname;\n },\n [localeType, search],\n );\n\n return {\n ...location,\n pathname: clearPath(location.pathname),\n getLink,\n };\n}\n" }, { "path": "packages/x/.dumi/hooks/useLottie.ts", "content": "import type { AnimationConfig, AnimationItem, LottiePlayer } from 'lottie-web';\nimport React from 'react';\n\ninterface UseLottieOptions extends Omit {\n renderer?: 'svg' | 'canvas' | 'html';\n lazyLoad?: boolean;\n disabled?: boolean;\n rootMargin?: string;\n path?: string;\n}\n\n// 用于确保 lottie-web 只加载一次\nlet lottiePromise: Promise | null = null;\n\nconst loadLottie = async (): Promise => {\n if (!lottiePromise) {\n lottiePromise = new Promise((resolve, reject) => {\n if ((window as any)?.lottie) {\n resolve((window as any).lottie);\n return;\n }\n\n const script = document.createElement('script');\n script.src =\n 'https://gw.alipayobjects.com/os/lib/lottie-web/5.12.2/build/player/lottie_svg.min.js';\n script.async = true;\n script.onload = () => resolve((window as any).lottie);\n script.onerror = reject;\n document.body.appendChild(script);\n });\n }\n return lottiePromise;\n};\n\nconst useLottie = (options: UseLottieOptions) => {\n const { lazyLoad = true, rootMargin = '200px', disabled = false, ...lottieOptions } = options;\n const stableLottieOptions = React.useMemo(() => lottieOptions, []);\n\n const containerRef = React.useRef(null);\n const [isIntersected, setIsIntersected] = React.useState(!lazyLoad);\n const animationInstanceRef = React.useRef(null);\n const [error, setError] = React.useState(null);\n const [animationInstance, setAnimationInstance] = React.useState();\n React.useEffect(() => {\n if (disabled) return;\n let mounted = true;\n\n const initAnimation = async () => {\n if (!animationInstanceRef.current && (!lazyLoad || isIntersected)) {\n if (!containerRef.current) return;\n\n try {\n const lottie = await loadLottie();\n\n if (!mounted) return;\n\n const animation = lottie.loadAnimation({\n container: containerRef.current,\n renderer: 'svg', // 默认使用 SVG 渲染，性能更好\n ...stableLottieOptions,\n });\n setAnimationInstance(animation);\n animationInstanceRef.current = animation;\n } catch (err) {\n if (mounted) {\n setError(err as Error);\n console.error('Failed to load Lottie animation:', err);\n }\n }\n }\n };\n\n initAnimation();\n\n return () => {\n mounted = false;\n if (animationInstanceRef.current) {\n animationInstanceRef.current.destroy();\n animationInstanceRef.current = null;\n }\n };\n }, [isIntersected, lazyLoad, stableLottieOptions, disabled]);\n\n React.useEffect(() => {\n if (disabled) return;\n\n if (lazyLoad) {\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (entry.isIntersecting) {\n setIsIntersected(true);\n }\n },\n { root: null, rootMargin, threshold: 0 },\n );\n\n if (containerRef.current) {\n observer.observe(containerRef.current);\n }\n\n return () => {\n if (containerRef.current) {\n observer.unobserve(containerRef.current);\n }\n };\n }\n }, [lazyLoad, rootMargin, disabled]);\n\n return [\n containerRef,\n animationInstance,\n {\n isIntersected,\n error,\n },\n ] as const;\n};\n\nexport default useLottie;\n" }, { "path": "packages/x/.dumi/hooks/useMenu.tsx", "content": "import { version } from '@ant-design/x';\nimport type { MenuProps } from 'antd';\nimport { Flex, Tag } from 'antd';\nimport { createStyles } from 'antd-style';\nimport { clsx } from 'clsx';\nimport { useFullSidebarData, useSidebarData } from 'dumi';\nimport React, { useMemo } from 'react';\nimport Link from '../theme/common/Link';\nimport useLocation from './useLocation';\n\nfunction isVersionNumber(value?: string) {\n return value && /^\\d+\\.\\d+\\.\\d+$/.test(value);\n}\n\nconst getTagColor = (val?: string) => {\n if (isVersionNumber(val)) {\n return 'success';\n }\n if (val?.toUpperCase() === 'NEW') {\n return 'success';\n }\n if (val?.toUpperCase() === 'UPDATED') {\n return 'processing';\n }\n if (val?.toUpperCase() === 'DEPRECATED') {\n return 'red';\n }\n return 'success';\n};\n\nconst useStyle = createStyles(({ css, token }) => ({\n link: css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n `,\n tag: css`\n margin-inline-end: 0;\n `,\n subtitle: css`\n font-weight: normal;\n font-size: ${token.fontSizeSM}px;\n opacity: 0.8;\n `,\n}));\n\ninterface MenuItemLabelProps {\n before?: React.ReactNode;\n after?: React.ReactNode;\n link: string;\n title: React.ReactNode;\n subtitle?: React.ReactNode;\n search?: string;\n tag?: string;\n className?: string;\n}\n\nconst MenuItemLabelWithTag: React.FC = (props) => {\n const { styles } = useStyle();\n const { before, after, link, title, subtitle, search, tag, className } = props;\n\n if (!before && !after) {\n return (\n \n \n {title}\n {subtitle && {subtitle}}\n \n {tag && (\n \n {tag.replace(/VERSION/i, version)}\n \n )}\n \n );\n }\n return (\n \n {before}\n {title}\n {subtitle && {subtitle}}\n {after}\n \n );\n};\n\nexport interface UseMenuOptions {\n before?: React.ReactNode;\n after?: React.ReactNode;\n}\n\nconst useMenu = (options: UseMenuOptions = {}): readonly [MenuProps['items'], string] => {\n const fullData = useFullSidebarData();\n const { pathname, search } = useLocation();\n const sidebarData = useSidebarData();\n const { before, after } = options;\n\n const menuItems = useMemo(() => {\n const sidebarItems = [...(sidebarData ?? [])];\n\n // // 将设计文档未分类的放在最后\n // if (pathname.startsWith('/docs/spec')) {\n // const notGrouped = sidebarItems.splice(0, 1);\n // sidebarItems.push(...notGrouped);\n // }\n\n // 把 /changelog 拼到开发文档中\n if (pathname.startsWith('/docs/react')) {\n const changelogData = Object.entries(fullData).find(([key]) =>\n key.startsWith('/changelog'),\n )?.[1];\n if (changelogData) {\n sidebarItems.splice(1, 0, changelogData[0]);\n }\n }\n if (pathname.startsWith('/changelog')) {\n const reactDocData = Object.entries(fullData).find(([key]) =>\n key.startsWith('/docs/react'),\n )?.[1];\n if (reactDocData) {\n sidebarItems.unshift(reactDocData[0]);\n sidebarItems.push(...reactDocData.slice(1));\n }\n }\n\n return (\n sidebarItems?.reduce>((result, group) => {\n if (group?.title) {\n // 设计文档特殊处理二级分组\n if (pathname.startsWith('/docs/spec')) {\n const childrenGroup = group.children.reduce<\n Record[number]['children']>\n >((childrenResult, child) => {\n const type = child.frontmatter?.type ?? 'default';\n if (!childrenResult[type]) {\n childrenResult[type] = [];\n }\n childrenResult[type].push(child);\n return childrenResult;\n }, {});\n const childItems = [];\n childItems.push(\n ...(childrenGroup.default?.map((item) => ({\n label: (\n \n {before}\n {item?.title}\n {after}\n \n ),\n key: item.link.replace(/(-cn$)/g, ''),\n })) ?? []),\n );\n Object.entries(childrenGroup).forEach(([type, children]) => {\n if (type !== 'default') {\n childItems.push({\n type: 'group',\n label: type,\n key: type,\n children: children?.map((item) => ({\n label: (\n \n {before}\n {item?.title}\n {after}\n \n ),\n key: item.link.replace(/(-cn$)/g, ''),\n })),\n });\n }\n });\n result.push({\n label: group?.title,\n key: group?.title,\n children: childItems,\n });\n } else {\n result.push({\n type: 'group',\n label: group?.title,\n key: group?.title,\n children: group.children?.map((item) => ({\n label: (\n \n ),\n key: item.link.replace(/(-cn$)/g, ''),\n })),\n });\n }\n } else {\n const list = group.children || [];\n // 如果有 date 字段，我们就对其进行排序\n if (list.every((info) => info?.frontmatter?.date)) {\n list.sort((a, b) => (a.frontmatter?.date > b.frontmatter?.date ? -1 : 1));\n }\n result.push(\n ...list.map((item) => ({\n label: (\n \n ),\n key: item.link.replace(/(-cn$)/g, ''),\n })),\n );\n }\n return result;\n }, []) ?? []\n );\n }, [sidebarData, fullData, pathname, search, options]);\n\n return [menuItems, pathname] as const;\n};\n\nexport default useMenu;\n" }, { "path": "packages/x/.dumi/hooks/useScrollY.ts", "content": "import React from 'react';\n\nconst getSnapshot = () => window.scrollY;\n\nconst getServerSnapshot = () => 0;\n\nconst useScrollY = () => {\n const [scrollYDirection, setScrollYDirection] = React.useState<'down' | 'up'>();\n\n const subscribe = React.useCallback((callback: () => void) => {\n let ticking = false;\n let scrollY = window.scrollY;\n\n const handleScroll = () => {\n if (!ticking) {\n requestAnimationFrame(() => {\n callback();\n setScrollYDirection(scrollY > window.scrollY ? 'up' : 'down');\n scrollY = window.scrollY;\n ticking = false;\n });\n\n ticking = true;\n }\n };\n\n window.addEventListener('scroll', handleScroll);\n\n return () => window.removeEventListener('scroll', handleScroll);\n }, []);\n\n const scrollY = React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n\n return {\n scrollY,\n scrollYDirection,\n };\n};\n\nexport default useScrollY;\n" }, { "path": "packages/x/.dumi/hooks/useThemeAnimation.ts", "content": "import { removeCSS, updateCSS } from '@rc-component/util/lib/Dom/dynamicCSS';\nimport { useTheme } from 'antd-style';\nimport { useEffect, useRef } from 'react';\n\nconst viewTransitionStyle = `\n::view-transition-old(root),\n::view-transition-new(root) {\n animation: none;\n mix-blend-mode: normal;\n}\n\n.dark::view-transition-old(root) {\n z-index: 1;\n}\n\n.dark::view-transition-new(root) {\n z-index: 999;\n}\n\n::view-transition-old(root) {\n z-index: 999;\n}\n\n::view-transition-new(root) {\n z-index: 1;\n}\n`;\n\nconst useThemeAnimation = () => {\n const { colorBgElevated } = useTheme();\n\n const animateRef = useRef<{ colorBgElevated: string }>({ colorBgElevated });\n\n const startAnimationTheme = (clipPath: string[], isDark: boolean) => {\n updateCSS(\n `\n * {\n transition: none !important;\n }\n `,\n 'disable-transition',\n );\n\n document.documentElement\n .animate(\n {\n clipPath: isDark ? [...clipPath].reverse() : clipPath,\n },\n {\n duration: 500,\n easing: 'ease-in',\n pseudoElement: isDark ? '::view-transition-old(root)' : '::view-transition-new(root)',\n },\n )\n .addEventListener('finish', () => {\n removeCSS('disable-transition');\n });\n };\n\n const toggleAnimationTheme = (\n event: React.MouseEvent,\n isDark: boolean,\n ) => {\n if (!(event && typeof document.startViewTransition === 'function')) {\n return;\n }\n const time = Date.now();\n const x = event.clientX;\n const y = event.clientY;\n const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));\n updateCSS(\n `\n [data-prefers-color='dark'] {\n color-scheme: light !important;\n }\n\n [data-prefers-color='light'] {\n color-scheme: dark !important;\n }\n `,\n 'color-scheme',\n );\n document\n .startViewTransition(async () => {\n // wait for theme change end\n while (colorBgElevated === animateRef.current.colorBgElevated) {\n await new Promise((resolve) => setTimeout(resolve, 1000 / 60));\n }\n const root = document.documentElement;\n root.classList.remove(isDark ? 'dark' : 'light');\n root.classList.add(isDark ? 'light' : 'dark');\n })\n .ready.then(() => {\n // eslint-disable-next-line no-console\n console.log(`Theme transition finished in ${Date.now() - time}ms`);\n const clipPath = [\n `circle(0px at ${x}px ${y}px)`,\n `circle(${endRadius}px at ${x}px ${y}px)`,\n ];\n removeCSS('color-scheme');\n startAnimationTheme(clipPath, isDark);\n });\n };\n\n // inject transition style\n useEffect(() => {\n if (typeof document.startViewTransition === 'function') {\n updateCSS(viewTransitionStyle, 'view-transition-style');\n }\n }, []);\n\n useEffect(() => {\n if (colorBgElevated !== animateRef.current.colorBgElevated) {\n animateRef.current.colorBgElevated = colorBgElevated;\n }\n }, [colorBgElevated]);\n\n return toggleAnimationTheme;\n};\n\nexport default useThemeAnimation;\n" }, { "path": "packages/x/.dumi/loading.js", "content": "// must be .js file, can't modify to be .ts file!\n\nexport { default } from './theme/common/Loading';\n" }, { "path": "packages/x/.dumi/pages/404/index.tsx", "content": "import { HomeOutlined } from '@ant-design/icons';\nimport { Button, Result } from 'antd';\nimport { useLocation } from 'dumi';\nimport React, { useEffect } from 'react';\n\nimport Link from '../../theme/common/Link';\nimport * as utils from '../../theme/utils';\n\nexport interface NotFoundProps {\n router: {\n push: (pathname: string) => void;\n replace: (pathname: string) => void;\n };\n}\n\nconst DIRECT_MAP: Record = {\n 'docs/spec/download': 'docs/resources',\n 'docs/spec/work-with-us': 'docs/resources',\n};\n\nconst NotFoundPage: React.FC = ({ router }) => {\n const { pathname } = useLocation();\n\n const isZhCN = utils.isZhCN(pathname);\n\n useEffect(() => {\n const directLinks = Object.keys(DIRECT_MAP);\n for (let i = 0; i < directLinks.length; i += 1) {\n const matchPath = directLinks[i];\n if (pathname.includes(matchPath)) {\n router.replace(utils.getLocalizedPathname(`/${DIRECT_MAP[matchPath]}`, isZhCN).pathname);\n }\n }\n\n // Report if necessary\n const { yuyanMonitor } = window as any;\n yuyanMonitor?.log({\n code: 11,\n msg: `Page not found: ${location.href}; Source: ${document.referrer}`,\n });\n }, []);\n\n return (\n \n \n \n }\n />\n );\n};\n\nexport default NotFoundPage;\n" }, { "path": "packages/x/.dumi/pages/index/common/Container.tsx", "content": "import { createStyles } from 'antd-style';\nimport { clsx } from 'clsx';\nimport React from 'react';\n\nconst useStyle = createStyles(({ token, css }) => {\n return {\n container: css`\n width: 100%;\n margin: 0 auto;\n max-width: ${token.pcMaxWidth - token.pcContainerMargin * 2}px;\n font-family: AlibabaPuHuiTi, ${token.fontFamily}, sans-serif;\n\n @media only screen and (max-width: ${token.pcMaxWidth}px) {\n max-width: calc(100vw - ${token.pcContainerMargin * 2}px);\n }\n\n @media only screen and (max-width: ${token.mobileMaxWidth}px) {\n max-width: calc(100vw - ${token.marginLG * 2}px);\n }\n `,\n title: css`\n font-size: 48px;\n color: #fff;\n text-align: center;\n padding-bottom: ${token.padding}px;\n\n @media only screen and (max-width: ${token.mobileMaxWidth}px) {\n font-size: ${token.fontSizeHeading1}px;\n }\n `,\n desc: css`\n color: ${token.colorTextSecondary};\n max-width: 880px !important;\n margin: 0 auto;\n text-align: center;\n padding-bottom: ${token.padding}px;\n `,\n };\n});\n\nexport interface ContainerProps extends Omit, 'title'> {\n children?: React.ReactNode;\n title?: React.ReactNode;\n desc?: React.ReactNode;\n}\n\nconst Container: React.FC = (props) => {\n const { styles } = useStyle();\n return (\n \n {props.title &&

{props.title}

}\n {props.desc &&

{props.desc}

}\n {props.children}\n \n );\n};\n\nexport default Container;\n" }, { "path": "packages/x/.dumi/pages/index/common/CustomizationProvider.tsx", "content": "import { XProvider } from '@ant-design/x';\nimport { createStyles } from 'antd-style';\nimport React from 'react';\n\nexport const useCustomizationBgStyle = createStyles(({ token, css }) => {\n return {\n background: css`\n background: linear-gradient(135deg, #ffffff26 14%, #ffffff0d 59%) !important;\n overflow: hidden;\n position: auto;\n\n &::after {\n content: '';\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border-radius: inherit;\n pointer-events: none;\n position: absolute;\n top: 0;\n bottom: 0;\n inset-inline-start: 0;\n inset-inline-end: 0;\n padding: ${token.lineWidth}px;\n background: linear-gradient(180deg, #ffffff26 0%, #ffffff00 100%);\n mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n mask-composite: exclude;\n };\n `,\n };\n});\n\nexport const LOCALES = {\n cn: {\n greeting: '你好, 我是全新 AI 产品创造助手',\n greeting_short: '你好, 我是 Ant Design X',\n description: '基于 Ant Design 的 AGI 产品智能解决方案, 创造更美好的智能视界',\n description_short: '基于 Ant Design 的 AGI 产品智能解决方案, 创造更美好的智能视界',\n help_text: '我可以帮您: ',\n\n conversations_group: '最近对话',\n send_placeholder: '输入 / 获取建议',\n\n hot_question: '热门话题',\n\n question1: 'Ant Design X 全新升级了什么? ',\n question2: 'Ant Design X 推出全新 RICH 设计规范 ',\n question3: 'Ant Design X 组件资产有哪些? ',\n question4: '快来了解全新AI时代的设计范式! ',\n\n design_guide: 'Rich 设计指南',\n\n empathy: 'AI 理解用户诉求并解决',\n persona: 'AI 对外的人设及形象',\n conversation: 'AI 如何表达用户能听懂',\n interface: 'AI 兼顾“chat” & “do” 行为',\n },\n en: {\n greeting: 'Hello, I am your AI Product Design Assistant',\n greeting_short: 'Hello, I am Ant Design X',\n description:\n \"Powered by Ant Design's AGI solution to enhance intelligent, aesthetic visual experiences\",\n description_short: 'Aesthetic visual experiences',\n help_text: 'I can assist you with:',\n\n conversations_group: 'History',\n send_placeholder: 'Type / to get suggestions',\n\n hot_question: 'Hot Topics',\n\n question1: 'What are the new upgrades in X?',\n question2: 'X has introduced the new RICH design guide.',\n question3: 'What are the component assets in X?',\n question4: 'Discover new design for the AI!',\n\n design_guide: 'Rich Design Guidelines',\n\n empathy: 'AI that understands and addresses user needs',\n persona: \"Defining AI's persona and presentation\",\n conversation: 'Ensuring AI communicates clearly',\n interface: \"Balancing 'chat' & 'do' functionalities\",\n },\n};\n\nexport const DESIGN_STAGE_COLOR = {\n AWAKE: {\n START: '#6fb3e2',\n END: '#6c57ff',\n },\n EXPRESS: {\n START: '#6dd6f5',\n END: '#108c44',\n },\n CONFIRM: {\n START: '#ba2cb8',\n END: '#6c37e8',\n },\n FEEDBACK: {\n START: '#f7c348',\n END: '#f75972',\n },\n COMMON: {\n START: '#d857ff',\n END: '#8594ff',\n },\n};\n\nconst useStyle = createStyles(({ token, css }) => {\n const borderRadius = 20;\n\n return {\n welcome: css`\n display: flex;\n align-items: center;\n gap: ${token.paddingXS}px;\n position: relative;\n box-sizing: border-box;\n border-radius: ${borderRadius}px;\n padding: 18px;\n\n .ant-welcome-title {\n font-size: ${token.fontSize}px;\n font-weight: 400;\n }\n\n .ant-welcome-description {\n font-size: ${token.fontSizeSM - 1}px;\n opacity: 0.65; \n }\n `,\n prompts: css`\n border-radius: ${borderRadius}px !important;\n position: relative;\n\n .ant-prompts-desc {\n font-size: ${token.fontSizeSM}px !important;\n opacity: 0.9;\n }\n .ant-prompts-label {\n font-size: ${token.fontSize}px !important;\n font-weight: 400;\n }\n\n .ant-prompts-title {\n font-size: ${token.fontSize}px !important;\n padding-bottom: ${token.paddingXS}px;\n }\n `,\n sender: css`\n border-radius: ${borderRadius * 2}px;\n height: 44px;\n display: flex;\n align-items: center;\n\n .ant-sender-content {\n padding: 0px ${token.paddingSM}px;\n }\n `,\n conversations: css`\n padding: ${token.padding}px;\n padding-top: 0;\n border-radius: ${borderRadius}px;\n position: relative;\n `,\n suggestion: css`\n border-radius: ${borderRadius}px;\n position: relative;\n `,\n };\n});\n\nconst CustomizationProvider: React.FC<{ children: React.ReactNode }> = (props) => {\n const { styles } = useStyle();\n\n return (\n \n {props.children}\n \n );\n};\n\nexport default CustomizationProvider;\n" }, { "path": "packages/x/.dumi/pages/index/common/CustomizationSender.tsx", "content": "import { Sender, type SenderProps } from '@ant-design/x';\nimport { Button } from 'antd';\nimport { createStyles } from 'antd-style';\nimport React from 'react';\n\nexport const useStyle = createStyles(({ css, token }) => {\n return {\n sender: css`\n margin-inline: ${token.paddingSM * 2}px;\n background: linear-gradient(135deg, #ffffff26 14%, #ffffff0d 59%);\n position: relative;\n border: none;\n cursor: pointer;\n :hover {\n opacity: 0.85;\n }\n `,\n };\n});\n\nconst CustomizationSender: React.FC = (props) => {\n const { styles } = useStyle();\n return (\n {\n return (\n props?.onSubmit?.(props.value!)}\n icon={\n \n }\n />\n );\n }}\n {...props}\n />\n );\n};\n\nexport default CustomizationSender;\n" }, { "path": "packages/x/.dumi/pages/index/common/Introduction.tsx", "content": "import { createStyles } from 'antd-style';\nimport React from 'react';\n\nimport Link, { type LinkProps } from '../../../theme/common/Link';\nimport Container, { type ContainerProps } from './Container';\nimport CustomizationProvider from './CustomizationProvider';\n\nconst useStyle = createStyles(({ token, css }) => {\n const introRadius = 24;\n return {\n container: css`\n overflow: hidden;\n `,\n content: css`\n display: grid;\n width: 100%;\n gap: ${token.padding + token.paddingSM}px;\n margin-top: ${token.marginXXL}px;\n `,\n item: css`\n background: #0c0e10cc;\n border-radius: ${introRadius}px;\n padding: ${token.padding + token.paddingSM}px;\n overflow: hidden;\n position: relative;\n cursor: pointer;\n\n & :hover::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: ${introRadius}px;\n padding: ${token.lineWidth * 2}px;\n background: linear-gradient(180deg, #ffffff20 0%, #ffffff0d 100%);\n mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n mask-composite: exclude;\n }\n `,\n item_header: css`\n `,\n item_content: css`\n display: flex;\n align-items: center;\n gap: ${token.paddingSM}px;\n `,\n item_icon: css`\n width: 32px;\n height: 32px;\n padding: ${token.paddingSM}px;\n border-radius: ${introRadius / 2}px;\n background: #ffffff1a;\n box-shadow: inset 0px 1px 1.5px 0px #ffffff80;\n `,\n item_title: css`\n display: flex;\n align-items: center;\n gap: ${token.paddingXS}px;\n font-size: ${token.fontSizeHeading4}px;\n font-weight: bold;\n margin-bottom: ${token.paddingXS}px;\n `,\n item_desc: css`\n text-align: start;\n font-size: ${token.fontSizeSM}px;\n opacity: 0.65;\n `,\n item_tag: css`\n border-radius: 4px;\n color: transparent;\n height: 24px;\n line-height: 24px;\n box-sizing: border-box;\n font-size: ${token.fontSizeSM}px;\n padding: 0 8px;\n position: relative;\n overflow: hidden;\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n\n width: 100%;\n height: 100%;\n\n background: #ffffff;\n opacity: 0.1;\n }\n `,\n };\n});\n\nexport interface IntroductionItem extends Omit, 'title'> {\n title?: React.ReactNode;\n desc?: React.ReactNode;\n tag?: React.ReactNode;\n startColor?: string;\n endColor?: string;\n icon?: string;\n to?: LinkProps['to'];\n header?: React.ReactNode;\n}\n\ninterface IntroductionProps extends ContainerProps {\n column?: number;\n items?: IntroductionItem[];\n cardStyle?: React.CSSProperties;\n}\n\nconst Introduction: React.FC = (props) => {\n const { styles } = useStyle();\n\n return (\n \n \n {props.items?.map((item) => {\n const itemChildren = (\n <>\n {item.header && (\n
\n {item.header}\n
\n )}\n
\n {item.icon && {item.icon}}\n
\n

\n {item.title}\n {item.tag && (\n \n {item.tag}\n \n )}\n

\n

{item.desc}

\n
\n
\n \n );\n // 如果 to 是以 http 开头，使用 标签而不是 \n if (item.to && typeof item.to === 'string' && item.to.startsWith('http')) {\n return (\n \n {itemChildren}\n \n );\n }\n if (item.to) {\n return (\n \n {itemChildren}\n \n );\n }\n return (\n
\n {itemChildren}\n
\n );\n })}\n \n \n );\n};\n\nexport default Introduction;\n" }, { "path": "packages/x/.dumi/pages/index/components/CompIntroduction/Customization.tsx", "content": "import { DeleteOutlined, EditOutlined, EnterOutlined } from '@ant-design/icons';\nimport type { BubbleProps, ConversationsProps, PromptsProps, WelcomeProps } from '@ant-design/x';\nimport { Bubble, Conversations, Prompts, Suggestion, Welcome } from '@ant-design/x';\nimport { createStyles } from 'antd-style';\nimport React from 'react';\nimport useLocale from '../../../../hooks/useLocale';\nimport { LOCALES, useCustomizationBgStyle } from '../../common/CustomizationProvider';\nimport CustomizationSender from '../../common/CustomizationSender';\n\nconst useStyle = createStyles(({ token, css }) => {\n return {\n actions: css`\n width: 230px;\n display: flex;\n align-items: end;\n justify-content: end;\n gap: ${token.paddingSM}px;\n opacity: 0.65;\n `,\n };\n});\n\nexport const CustomizationWelcome: React.FC = (props) => {\n const [locale] = useLocale(LOCALES);\n\n const {\n styles: { background },\n } = useCustomizationBgStyle();\n\n return (\n \n );\n};\n\nexport const CustomizationPrompts: React.FC = (props) => {\n const [locale] = useLocale(LOCALES);\n\n const {\n styles: { background },\n } = useCustomizationBgStyle();\n\n return (\n \n );\n};\n\nexport const CustomizationSuggestion: React.FC = () => {\n const [locale] = useLocale(LOCALES);\n\n return (\n \n {({ onTrigger, onKeyDown }) => {\n return (\n {\n if (nextVal === '/') {\n onTrigger();\n } else if (!nextVal) {\n onTrigger(false);\n }\n }}\n onKeyDown={onKeyDown}\n value=\"/\"\n placeholder={locale.send_placeholder}\n />\n );\n }}\n \n );\n};\n\nexport const CustomizationBubble: React.FC = (props) => {\n const { styles } = useStyle();\n const [locale] = useLocale(LOCALES);\n\n const {\n styles: { background },\n } = useCustomizationBgStyle();\n\n return (\n \n \n \n \n \n }\n {...props}\n content={props.content || locale.question1}\n />\n );\n};\n\nexport const CustomConversations: React.FC = (props) => {\n const [locale] = useLocale(LOCALES);\n\n return (\n \n );\n};\n" }, { "path": "packages/x/.dumi/pages/index/components/CompIntroduction/index.tsx", "content": "import { createStyles } from 'antd-style';\nimport React from 'react';\n\nimport useLocale from '../../../../hooks/useLocale';\nimport { DESIGN_STAGE_COLOR } from '../../common/CustomizationProvider';\nimport Introduction, { type IntroductionItem } from '../../common/Introduction';\nimport SiteContext from '../SiteContext';\nimport { CustomizationBubble, CustomizationPrompts, CustomizationWelcome } from './Customization';\n\nconst locales = {\n cn: {\n title: '组件丰富 , 选用自如',\n desc: 'Ant Design X 全新 AI 组件 , 大量实用组件满足你的需求 , 灵活定制与拓展',\n\n welcome_title: '欢迎组件',\n welcome_desc: '开箱即用、易于配置、极致体验的通用图表库',\n welcome_tag: '唤醒',\n\n prompts_title: '用户推荐',\n prompts_desc: '让首次接触AI产品的用户快速理解AI能做什么',\n prompts_tag: '唤醒',\n\n suggestion_title: '快捷命令',\n suggestion_desc: '开箱即用、易于配置、极致体验的通用图表库',\n suggestion_tag: '表达',\n\n bubble_title: '进度加载',\n bubble_desc: '开箱即用、易于配置、极致体验的通用图表库',\n bubble_tag: '确认',\n\n actions_title: '结果操作',\n actions_desc: '开箱即用、易于配置、极致体验的通用图表库',\n actions_tag: '反馈',\n\n conversations_title: '管理对话',\n conversations_desc: '开箱即用、易于配置、极致体验的通用图表库',\n conversations_tag: '通用',\n },\n en: {\n title: 'Components Rich, Easy to Use',\n desc: 'Ant Design X’s new AI components offer a wide range of practical options to meet your needs, with flexible customization and expansion',\n\n welcome_title: 'Welcome',\n welcome_desc: 'Ready to use, easy to set up, with great user experience',\n welcome_tag: 'Activate',\n\n prompts_title: 'User Guide',\n prompts_desc: 'Helps new users quickly understand AI capabilities',\n prompts_tag: 'Activate',\n\n suggestion_title: 'Quick Commands',\n suggestion_desc: 'Ready to use, easy to set up, with great user experience',\n suggestion_tag: 'Execute',\n\n bubble_title: 'Loading Progress',\n bubble_desc: 'Ready to use, easy to set up, with great user experience',\n bubble_tag: 'Confirm',\n\n actions_title: 'Results',\n actions_desc: 'Ready to use, easy to set up, with great user experience',\n actions_tag: 'Feedback',\n\n conversations_title: 'Manage Chats',\n conversations_desc: 'Ready to use, easy to set up, with great user experience',\n conversations_tag: 'General',\n },\n};\n\nconst useStyle = createStyles(({ css }) => {\n return {\n header: css`\n height: 280px;\n display: flex;\n align-items: center;\n justify-content: center;\n `,\n };\n});\n\nconst CompIntroduction: React.FC = () => {\n const { styles } = useStyle();\n const [locale, lang] = useLocale(locales);\n const isZhCN = lang === 'cn';\n const { isMobile } = React.useContext(SiteContext);\n\n const items: IntroductionItem[] = [\n {\n title: locale.welcome_title,\n desc: locale.welcome_desc,\n tag: locale.welcome_tag,\n startColor: DESIGN_STAGE_COLOR.AWAKE.START,\n endColor: DESIGN_STAGE_COLOR.AWAKE.END,\n header: (\n
\n \n
\n ),\n },\n {\n title: locale.prompts_title,\n desc: locale.prompts_desc,\n tag: locale.prompts_tag,\n startColor: DESIGN_STAGE_COLOR.AWAKE.START,\n endColor: DESIGN_STAGE_COLOR.AWAKE.END,\n header: (\n
\n \n
\n ),\n },\n {\n title: locale.suggestion_title,\n desc: locale.suggestion_desc,\n tag: locale.suggestion_tag,\n startColor: DESIGN_STAGE_COLOR.EXPRESS.START,\n endColor: DESIGN_STAGE_COLOR.EXPRESS.END,\n header: (\n
\n \n
\n ),\n },\n {\n title: locale.bubble_title,\n desc: locale.bubble_desc,\n tag: locale.bubble_tag,\n startColor: DESIGN_STAGE_COLOR.CONFIRM.START,\n endColor: DESIGN_STAGE_COLOR.CONFIRM.END,\n header: (\n
\n \n
\n ),\n },\n {\n title: locale.actions_title,\n desc: locale.actions_desc,\n tag: locale.actions_tag,\n startColor: DESIGN_STAGE_COLOR.FEEDBACK.START,\n endColor: DESIGN_STAGE_COLOR.FEEDBACK.END,\n header: (\n
\n \n
\n ),\n },\n {\n title: locale.conversations_title,\n desc: locale.conversations_desc,\n tag: locale.conversations_tag,\n startColor: DESIGN_STAGE_COLOR.COMMON.START,\n endColor: DESIGN_STAGE_COLOR.COMMON.END,\n header: (\n
\n \n
\n ),\n },\n ];\n\n return (\n \n );\n};\n\nexport default CompIntroduction;\n" }, { "path": "packages/x/.dumi/pages/index/components/DesignBanner.tsx", "content": "import { createStyles } from 'antd-style';\nimport { useLocation, useNavigate } from 'dumi';\nimport React, { lazy, Suspense, useEffect, useRef } from 'react';\nimport useLocale from '../../../hooks/useLocale';\nimport { getLocalizedPathname, isZhCN } from '../../../theme/utils';\nimport Container from '../common/Container';\n\nconst locales = {\n cn: {\n title: 'AI 设计范式 - RICH',\n desc: '我们致力于构建 AI 设计理论，并在蚂蚁内部海量 AI 产品中实践、迭代。在此过程中，RICH 设计范式应运而生：角色（Role）、意图（Intention）、会话（Conversation）和混合界面（Hybrid UI） ',\n },\n en: {\n title: 'AI Design Paradigm - RICH',\n desc: \"We focus on developing AI design theory, iterating it across Ant Group's AI products, leading to the RICH design paradigm: Role, Intention, Conversation, and Hybrid UI.\",\n },\n};\n\nconst useStyle = createStyles(({ css }) => {\n return {\n container: css`\n height: 500px;\n overflow: hidden;\n cursor: pointer;\n `,\n lottie: css`\n width: 100%;\n height: auto;\n transform: translate(0, -20%);\n `,\n };\n});\n\nconst DesignBanner: React.FC = () => {\n const [locale] = useLocale(locales);\n\n const { pathname, search } = useLocation();\n const navigate = useNavigate();\n\n const { styles } = useStyle();\n\n const LottieComponent = lazy(() => import('./Lottie'));\n\n const lottieRef = useRef<{ animation: any }>(null);\n\n const onScrollFn = () => {\n if (window?.scrollY > 600) {\n lottieRef?.current?.animation?.play?.();\n }\n };\n useEffect(() => {\n window.addEventListener('scroll', onScrollFn);\n return () => {\n window.removeEventListener('scroll', onScrollFn);\n };\n }, []);\n return (\n \n navigate(getLocalizedPathname('docs/spec/introduce', isZhCN(pathname), search))\n }\n >\n \n \n \n \n );\n};\n\nexport default DesignBanner;\n" }, { "path": "packages/x/.dumi/pages/index/components/DesignFramework.tsx", "content": "import { createStyles } from 'antd-style';\nimport { useLocation } from 'dumi';\nimport React, { useContext } from 'react';\n\nimport useLocale from '../../../hooks/useLocale';\nimport SiteContext from '../../../theme/slots/SiteContext';\nimport * as utils from '../../../theme/utils';\nimport Introduction from '../common/Introduction';\n\nconst locales = {\n cn: {\n title: 'AI 设计语言与研发框架',\n desc: '配套生态 , 让你快速搭建网站应用',\n\n values: 'RICH 设计指南',\n valuesDesc: '意图、角色、会话、混合 UI',\n guide: '组件设计指引',\n guideDesc: '全局样式、设计模式',\n lib: '组件库',\n libDesc: 'Ant Design of React / Angular / Vue',\n\n // Secondary\n antd: 'Ant Design',\n antdDesc: '企业级 UI 设计语言和 React 组件库',\n antdMobile: 'Ant Design Mobile',\n antdMobileDesc: 'Ant Design移动端 UI 组件库',\n antv: 'AntV',\n antvDesc: '全新一代数据可视化解决方案',\n },\n en: {\n title: 'Design & Framework',\n desc: 'An ecosystem for rapid web app development',\n\n values: 'RICH Design Guide',\n valuesDesc: 'Intention, Role, Conversation, Hybrid',\n guide: 'Design guide',\n guideDesc: 'Global style and design pattern',\n lib: 'Components Libraries',\n libDesc: 'Ant Design of React / Angular / Vue',\n\n // Secondary\n antd: 'Ant Design',\n antdDesc:\n 'Help designers/developers building beautiful products more flexible and working with happiness',\n antdMobile: 'Ant Design Mobile',\n antdMobileDesc: 'Mobile UI component library',\n antv: 'AntV',\n antvDesc: 'New generation of data visualization solutions',\n },\n};\n\nconst useStyle = () => {\n return createStyles(({ token, css }) => ({\n container: css`\n `,\n header: css`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 270px;\n\n `,\n card: css`\n padding: ${token.paddingSM}px;\n border-radius: ${token.borderRadius * 2}px;\n box-shadow:\n 0 1px 2px rgba(0, 0, 0, 0.03),\n 0 1px 6px -1px rgba(0, 0, 0, 0.02),\n 0 2px 4px rgba(0, 0, 0, 0.02);\n\n background: #ffffff1a;\n border-radius: 24px; \n\n img {\n width: 100%;\n vertical-align: top;\n border-radius: ${token.borderRadius}px;\n }\n `,\n\n cardMini: css`\n background: #ffffff1a;\n border-radius: 24px; \n display: block;\n border-radius: ${token.borderRadius * 2}px;\n padding: ${token.paddingMD}px ${token.paddingLG}px;\n\n img {\n height: 48px;\n }\n `,\n }))();\n};\n\nconst DesignFramework: React.FC = () => {\n const [locale] = useLocale(locales);\n const { styles } = useStyle();\n const { pathname, search } = useLocation();\n const isZhCN = utils.isZhCN(pathname);\n const { isMobile } = useContext(SiteContext);\n\n const items = [\n {\n title: locale.values,\n desc: locale.valuesDesc,\n header: (\n
\n \n
\n ),\n to: utils.getLocalizedPathname('/docs/spec/introduce', isZhCN, search),\n },\n {\n title: locale.guide,\n desc: locale.guideDesc,\n header: (\n
\n \n
\n ),\n to: utils.getLocalizedPathname('/docs/spec/hybrid-ui-design', isZhCN, search),\n },\n {\n title: locale.lib,\n desc: locale.libDesc,\n header: (\n
\n \n
\n ),\n to: utils.getLocalizedPathname('/components/overview', isZhCN, search),\n },\n {\n title: locale.antd,\n desc: locale.antdDesc,\n icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*dUzuRJes4pUAAAAAAAAAAAAADgCCAQ/original',\n to: 'https://ant.design/',\n },\n {\n title: locale.antdMobile,\n desc: locale.antdMobileDesc,\n icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*rzh3RoWC9zAAAAAAAAAAAAAADgCCAQ/original',\n to: 'https://mobile.ant.design/',\n },\n {\n title: locale.antv,\n desc: locale.antvDesc,\n icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*9MFyQ77L6E4AAAAAAAAAAAAADgCCAQ/fmt.webp',\n to: 'https://antv.vision/',\n },\n ];\n\n return (\n \n );\n};\n\nexport default DesignFramework;\n" }, { "path": "packages/x/.dumi/pages/index/components/DesignGuide.tsx", "content": "import { Button } from 'antd';\nimport { createStyles } from 'antd-style';\nimport { useLocation, useNavigate } from 'dumi';\nimport React from 'react';\nimport useLocale from '../../../hooks/useLocale';\nimport { getLocalizedPathname, isZhCN } from '../../../theme/utils';\nimport Container from '../common/Container';\nimport { DESIGN_STAGE_COLOR } from '../common/CustomizationProvider';\n\nconst comma = '\\u00A0,\\u00A0\\u00A0\\u00A0';\n\nconst locales = {\n cn: {\n title: 'AI 界面解决方案',\n desc: '基于RICH，延续熟悉的 Ant Design 设计语言，全新 AGI 混合界面（Hybrid-UI）解决方案，完美融合 GUI 和自然会话交互。从唤醒到表达，从过程到反馈，合适的组件恰当的呈现在所有的人机互动过程中。',\n\n awaken: '唤醒',\n awaken_title: `轻松唤醒${comma}即刻吸引`,\n awaken_desc: '可以让首次接触的用户快速理解AI能做什么, 告知用户AI可实现的意图范围, 降低用户成本',\n awaken_action: '从唤醒开始',\n\n express: '表达',\n express_title: `简单表达${comma}随时反馈`,\n express_desc: '让用户知道如何快捷且正确的表达意图, 减少AI的不理解风险, 看清自己发送的内容',\n express_action: '从表达开始',\n\n confirm: '确认',\n confirm_title: `过程确认${comma}尽在掌握`,\n confirm_desc: '让用户知道该任务的AI执行运转情况, 缓解用户等待焦虑, 有掌控感',\n confirm_action: '从确认开始',\n\n feedback: '反馈',\n feedback_title: `结果反馈${comma}谁能不信`,\n feedback_desc: '让用户清晰看到并信任AI任务完成的情况, 并快速应用AI生成结果',\n feedback_action: '从反馈开始',\n },\n en: {\n title: 'AI Interface Solution',\n desc: 'Building on the RICH paradigm and Ant Design language, the AGI Hybrid-UI solution blends GUI with natural conversation, presenting optimal components at each stage of human-computer interaction.',\n\n awaken: 'Awaken',\n awaken_title: `Effortlessly Awaken${comma}Instantly Engage`,\n awaken_desc:\n 'Helps new users quickly understand what AI can do, informs them of the AI’s capability range, and lowers entry barriers.',\n awaken_action: 'Start with Awaken',\n\n express: 'Express',\n express_title: `Simple Express${comma}Instant Feedback`,\n express_desc:\n 'Guides users on how to express intentions effectively, reducing misunderstandings with AI and clarifying their input.',\n express_action: 'Start with Express',\n\n confirm: 'Confirm',\n confirm_title: `Process Confirm${comma}Fully in Control`,\n confirm_desc:\n 'Keeps users informed of the AI’s task execution status, easing wait-time anxiety and providing a sense of control.',\n confirm_action: 'Start with Confirm',\n\n feedback: 'Feedback',\n feedback_title: `Result Feedback${comma}Built-in Trust`,\n feedback_desc:\n 'Clearly displays AI task completion, fostering trust, and enabling quick application of AI-generated results.',\n feedback_action: 'Start with Feedback',\n },\n};\n\nconst useStyle = createStyles(({ token, css }) => {\n return {\n container: css`\n `,\n content: css`\n display: flex;\n justify-content: space-between;\n padding-top: ${token.pcContainerMargin}px;\n `,\n chain: css`\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 540px;\n `,\n chain_item: css`\n display: flex;\n gap: ${token.paddingLG}px;\n color: #ffffff;\n `,\n chain_item_content: css`\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: ${token.paddingLG}px;\n overflow: hidden;\n \n `,\n chain_item_line: css`\n height: 300px;\n width: 4px;\n margin: 0 auto;\n `,\n chain_item_label: css`\n font-size: ${token.fontSizeHeading4}px;\n font-weight: bold;\n line-height: 40px;\n `,\n chain_item_title: css`\n font-size: ${token.fontSizeHeading1 + 10}px;\n line-height: 56px;\n font-weight: bold;\n\n @media only screen and (max-width: ${token.mobileMaxWidth}px) {\n font-size: ${token.fontSizeHeading2}px;\n }\n `,\n chain_item_desc: css`\n font-size: ${token.fontSizeHeading5}px;\n line-height: 32px;\n opacity: 0.65;\n `,\n chain_item_action: css`\n background: #ffffff1a;\n position: relative;\n border-radius: 40px;\n width: min-content;\n padding: ${token.paddingLG}px;\n overflow: hidden;\n font-size: ${token.fontSizeHeading5}px;\n font-weight: bold;\n opacity: 0.9;\n border: none !important;\n\n &::after {\n content: '';\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border-radius: inherit;\n\n position: absolute;\n top: 0;\n bottom: 0;\n inset-inline-start: 0;\n inset-inline-end: 0;\n\n padding: ${token.lineWidth}px;\n background: linear-gradient(180deg, #ffffff26 0%, #ffffff00 100%);\n mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n mask-composite: exclude;\n };\n `,\n\n chain_item_icon: css`\n width: 40px;\n height: 40px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n\n img {\n width: auto;\n height: 40px;\n position: absolute;\n }\n `,\n };\n});\n\nconst DesignGuide: React.FC = () => {\n const [locale] = useLocale(locales);\n const { styles } = useStyle();\n const { pathname, search } = useLocation();\n const navigate = useNavigate();\n\n const items = [\n {\n icon: 'https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/f14LTKOFxRsAAAAAQbAAAAgADtFMAQFr/original',\n label: locale.awaken,\n title: locale.awaken_title,\n desc: locale.awaken_desc,\n action: locale.awaken_action,\n startColor: DESIGN_STAGE_COLOR.AWAKE.START,\n endColor: DESIGN_STAGE_COLOR.AWAKE.END,\n path: 'components/welcome',\n },\n {\n icon: 'https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/dGfqSaM9ZxoAAAAAQaAAAAgADtFMAQFr/original',\n label: locale.express,\n title: locale.express_title,\n desc: locale.express_desc,\n action: locale.express_action,\n startColor: DESIGN_STAGE_COLOR.EXPRESS.START,\n endColor: DESIGN_STAGE_COLOR.EXPRESS.END,\n path: 'components/attachments',\n },\n {\n icon: 'https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/BQaCTIUU-CkAAAAAQZAAAAgADtFMAQFr/original',\n label: locale.confirm,\n title: locale.confirm_title,\n desc: locale.confirm_desc,\n action: locale.confirm_action,\n startColor: DESIGN_STAGE_COLOR.CONFIRM.START,\n endColor: DESIGN_STAGE_COLOR.CONFIRM.END,\n path: 'components/think',\n },\n {\n icon: 'https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/r-DuSZG-9NIAAAAAQdAAAAgADtFMAQFr/original',\n label: locale.feedback,\n title: locale.feedback_title,\n desc: locale.feedback_desc,\n action: locale.feedback_action,\n startColor: DESIGN_STAGE_COLOR.FEEDBACK.START,\n endColor: DESIGN_STAGE_COLOR.FEEDBACK.END,\n path: 'components/actions',\n },\n ];\n\n return (\n \n
\n
\n {items.map((item, index) => {\n const titleParts = item.title.split(item.label);\n return (\n
\n
\n
\n \"icon\"\n \n
\n \n
\n
\n
\n {index + 1}.\n {item.label}\n
\n
\n {titleParts[0]}\n \n {item.label}\n \n \n {titleParts[1]}\n \n
\n
{item.desc}
\n \n navigate(getLocalizedPathname(item.path, isZhCN(pathname), search))\n }\n >\n {item.action}\n \n
\n
\n );\n })}\n
\n
\n \n );\n};\n\nexport default DesignGuide;\n" }, { "path": "packages/x/.dumi/pages/index/components/Lottie.tsx", "content": "import type { AnimationItem } from 'lottie-web';\nimport React, { useEffect, useImperativeHandle } from 'react';\nimport useLottie from '../../../hooks/useLottie';\n\ninterface Props {\n path: string;\n className?: string;\n onLoad?: (animation: AnimationItem, lottieRef: React.RefObject) => void;\n config?: {\n autoplay: boolean;\n };\n ref?: any;\n}\nconst Lottie: React.FC = ({ path, className, config, ref, onLoad }) => {\n const [lottieRef, animation] = useLottie({\n renderer: 'svg',\n loop: false,\n autoplay: config?.autoplay === undefined ? true : config?.autoplay,\n path,\n });\n\n useImperativeHandle(ref, () => {\n return {\n animation,\n lottieRef,\n };\n }, [animation, lottieRef.current]);\n\n useEffect(() => {\n if (!animation) return;\n onLoad?.(animation, lottieRef);\n return () => {\n animation?.destroy();\n };\n }, [animation]);\n return
;\n};\n\nexport default Lottie;\n" }, { "path": "packages/x/.dumi/pages/index/components/MainBanner.tsx", "content": "import { Button } from 'antd';\nimport { createStyles } from 'antd-style';\nimport { clsx } from 'clsx';\nimport { useLocation } from 'dumi';\nimport type { AnimationDirection, AnimationItem } from 'lottie-web';\nimport React, { lazy, Suspense, useRef } from 'react';\nimport useLocale from '../../../hooks/useLocale';\nimport Link from '../../../theme/common/Link';\nimport { getLocalizedPathname, isZhCN } from '../../../theme/utils';\nimport Container from '../common/Container';\nimport type { SiteContextProps } from './SiteContext';\nimport SiteContext from './SiteContext';\n\nconst locales = {\n cn: {\n slogan: 'AI 体验新秩序',\n desc: 'Ant Design 团队匠心呈现 RICH 设计范式，打造卓越 AI 界面解决方案，引领智能新体验。',\n start: '开始使用',\n design: '设计语言',\n },\n en: {\n slogan: 'New AI Experience',\n desc: 'The Ant Design team presents the RICH paradigm, crafting superior AI interface solutions and pioneering intelligent experiences.',\n start: 'Get Started',\n design: 'Get Design',\n },\n};\n\nconst useStyle = createStyles(({ token, css }) => {\n const minBannerWidth = token.mobileMaxWidth - token.padding * 2;\n\n return {\n banner: css`\n width: 100vw;\n height: calc(100vh - 160px);\n min-height: 600px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n font-family: AlibabaPuHuiTi, ${token.fontFamily}, sans-serif;\n\n @media only screen and (max-width: ${token.mobileMaxWidth}px) {\n height: calc(100vh - ${token.paddingLG}px);\n }\n `,\n background: css`\n width: 100%;\n height: 100vh;\n position: absolute;\n filter: blur(50px);\n background: linear-gradient(135deg, #ffffff26 14%, #ffffff0d 59%);\n `,\n container: css`\n height: 100%;\n max-height: calc(100vh - ${token.headerHeight * 2}px);\n position: relative;\n `,\n title: css`\n max-width: ${minBannerWidth}px;\n position: absolute;\n top: 50%;\n inset-inline-start: 0;\n transform: translateY(-50%);\n z-index: 1;\n\n @media only screen and (max-width: ${token.mobileMaxWidth}px) {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n gap: ${token.paddingXS}px;\n }\n `,\n lottie: css`\n position: absolute;\n top: 50%;\n inset-inline-end: 0;\n transform: translate(${token.pcContainerMargin}px, -40%);\n z-index: 0;\n\n @media only screen and (max-width: ${token.mobileMaxWidth}px) {\n display: none;\n }\n `,\n lottie_rtl: css`\n transform: translate(${token.pcContainerMargin * -2}px, -40%) !important;\n `,\n name: css`\n font-size: 80px !important;\n line-height: 1.3;\n color: ${token.colorText};\n font-weight: bold;\n\n @media only screen and (max-width: ${token.mobileMaxWidth}px) {\n font-size: 54px !important;\n }\n `,\n desc: css`\n font-size: ${token.fontSizeHeading5}px;\n font-weight: 400;\n max-width: 500px;\n color: ${token.colorText};\n opacity: 0.65;\n margin: ${token.marginLG}px 0 ${token.marginLG * 2}px 0;\n \n `,\n iAlphabet: css`\n position: relative;\n font-size: 60px;\n display: inline-block;\n\n @media only screen and (max-width: ${token.mobileMaxWidth}px) {\n transform: scale(0.7);\n top: 6px;\n }\n `,\n iAlphabetStar: css`\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 22px;\n height: 22px;\n background: no-repeat center url('https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*RMOpRLHgA9wAAAAAAAAAAAAADgCCAQ/original');\n background-size: cover;\n\n &::before {\n content: '';\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border-radius: inherit;\n position: absolute;\n background: radial-gradient(circle, #fe8aff 0%, #fe8aff00 100%);\n filter: blur(12px);\n };\n `,\n content: css`\n display: flex;\n gap: ${token.paddingLG}px;\n flex-wrap: wrap;\n `,\n btn: css`\n height: 56px;\n border: none;\n border-radius: 40px;\n padding: 0 40px;\n display: inline-block;\n font-size: 18px;\n cursor: pointer;\n font-weight: 600;\n box-shadow: ${token.boxShadow};\n position: relative;\n\n @media only screen and (max-width: ${token.mobileMaxWidth}px) {\n padding: 0 ${token.paddingLG}px;\n }\n `,\n startBtn: css`\n background: linear-gradient(90deg, #c7deff 0%, #ffffffd9 76%);\n color: #14204c;\n position: relative;\n\n ::after {\n content: '';\n position: absolute;\n border-radius: 40px;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.5);\n opacity: 0;\n z-index: -1;\n transition: opacity 0.2s;\n }\n\n :hover::after {\n opacity: 1;\n }\n `,\n designBtn: css`\n background: #ffffff1a;\n backdrop-filter: blur(40px);\n border: ${token.lineWidth}px solid transparent;\n\n &::after {\n content: '';\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border-radius: inherit;\n\n position: absolute;\n top: 0;\n bottom: 0;\n inset-inline-start: 0;\n inset-inline-end: 0;\n\n padding: ${token.lineWidth}px;\n background: linear-gradient(180deg, #ffffff26 0%, #ffffff00 100%);\n mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n mask-composite: exclude;\n };\n `,\n };\n});\n\nconst MainBanner: React.FC = () => {\n const [locale] = useLocale(locales);\n\n const { pathname, search } = useLocation();\n\n const { direction, isMobile } = React.useContext(SiteContext);\n\n const { styles } = useStyle();\n\n const LottieComponent = lazy(() => import('./Lottie'));\n\n const animationDirection = useRef(1);\n\n const onLoad = (animation: AnimationItem) => {\n animation?.addEventListener('complete', () => {\n animation.loop = true;\n animation.setSpeed(0.7);\n animation.playSegments([100, 150], false);\n });\n };\n const onBackgroundLoad = (animation: AnimationItem) => {\n animation?.addEventListener('complete', () => {\n animationDirection.current = animationDirection.current === -1 ? 1 : -1;\n animation.setDirection(animationDirection.current);\n animation.setSpeed(0.6);\n animation.play();\n });\n };\n\n return (\n
\n \n \n \n \n
\n

\n Ant Des\n \n I\n \n gn X\n

\n

{locale.slogan}

\n
{locale.desc}
\n\n
\n \n \n \n \n \n \n
\n
\n {!isMobile && (\n \n \n \n )}\n \n
\n );\n};\n\nexport default MainBanner;\n" }, { "path": "packages/x/.dumi/pages/index/components/SceneIntroduction/Assistant.tsx", "content": "import type { BubbleItemType } from '@ant-design/x';\nimport { Bubble, Prompts, Welcome } from '@ant-design/x';\nimport { DefaultChatProvider, useXChat, XRequest, XRequestOptions } from '@ant-design/x-sdk';\nimport { Flex, type GetProp, Skeleton } from 'antd';\nimport { createStyles } from 'antd-style';\nimport React from 'react';\nimport useLocale from '../../../../hooks/useLocale';\nimport CustomizationProvider, { LOCALES } from '../../common/CustomizationProvider';\nimport CustomizationSender from '../../common/CustomizationSender';\n\nconst sleep = () => new Promise((resolve) => setTimeout(resolve, 1000));\n\ninterface ChatInput {\n query: string;\n}\n\nconst roles: GetProp = {\n ai: {\n placement: 'start',\n typing: { effect: 'typing', step: 5, interval: 20 },\n style: {\n maxWidth: 600,\n },\n styles: {\n content: {\n borderRadius: 16,\n },\n },\n },\n local: {\n placement: 'end',\n styles: {\n content: {\n borderRadius: 16,\n background: '#3877FF',\n },\n },\n contentRender(content: ChatInput) {\n return content?.query;\n },\n },\n};\n\nconst useStyle = createStyles(({ token, css }) => {\n return {\n container: css`\n display: flex;\n padding: ${token.paddingXL}px 0px;\n box-sizing: border-box;\n flex-direction: column;\n gap: ${token.paddingSM}px;\n height: 100%;\n width: 350px;\n background: #0000001a;\n `,\n content: css`\n padding: ${token.paddingXL}px;\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ${token.padding}px;\n `,\n bubble_list: css`\n flex: 1;\n `,\n placeholder_bubble: css`\n .ant-welcome {\n padding: 0;\n }\n\n .ant-welcome-title {\n font-size: 16px !important;\n font-weight: 500 !important;\n opacity: 0.9;\n }\n\n .ant-welcome-description {\n font-size: 12px;\n opacity: 0.65;\n }\n\n .ant-welcome-icon {\n img {\n transform: scale(1.2);\n margin-inline-end: 10px;\n }\n }\n\n .ant-bubble-content {\n overflow: hidden;\n background: linear-gradient(135deg, #ffffff26 14%, #ffffff0d 59%) !important;\n width: 100%;\n border-radius: 16px;\n padding: 24px;\n }\n\n .ant-prompts {\n padding: 0;\n }\n\n .ant-prompts-item {\n background: rgba(255, 255, 255, 0.05);\n box-sizing: border-box;\n padding: 8px 16px;\n font-size: 12px;\n height: 36px;\n line-height: 36px;\n border: none;\n flex: 1;\n }\n `,\n };\n});\n\nconst AssistantScene: React.FC = () => {\n const { styles } = useStyle();\n const [locale] = useLocale(LOCALES);\n\n const [content, setContent] = React.useState('');\n\n const [provider] = React.useState(\n new DefaultChatProvider({\n request: XRequest('https://api.example.com/chat', {\n manual: true,\n fetch: async (\n _: Parameters[0],\n options: XRequestOptions,\n ) => {\n await sleep();\n const params = options?.params;\n return Promise.resolve(\n new Response(JSON.stringify([`Mock success return. You said: ${params?.query}`]), {\n headers: { 'Content-Type': 'application/json' },\n }),\n );\n },\n }),\n }),\n );\n\n const { onRequest, messages, isRequesting } = useXChat({\n provider,\n requestPlaceholder: 'Waiting...',\n requestFallback: 'Mock failed return. Please try again later.',\n });\n\n const placeholderMessage: BubbleItemType = {\n role: 'system',\n key: 'placeholder',\n variant: 'borderless',\n className: styles.placeholder_bubble,\n content: (\n \n }\n variant=\"borderless\"\n title={locale.greeting_short}\n description={locale.description_short}\n />\n ),\n footer: (\n {\n onRequest({ query: item.data.description as string });\n }}\n vertical\n items={[\n {\n key: '1-1',\n description: locale.question1,\n },\n {\n key: '1-2',\n description: locale.question2,\n },\n {\n key: '1-3',\n description: locale.question3,\n },\n {\n key: '1-4',\n description: locale.question4,\n },\n ]}\n />\n ),\n };\n\n return (\n \n \n
\n \n \n \n
\n
\n ({\n key: id,\n loading: status === 'loading',\n role: status === 'local' ? 'local' : 'ai',\n content: message,\n })),\n ]}\n />\n {\n if (!nextContent) return;\n onRequest({ query: nextContent });\n setContent('');\n }}\n />\n
\n \n \n );\n};\n\nexport default AssistantScene;\n" }, { "path": "packages/x/.dumi/pages/index/components/SceneIntroduction/Independent.tsx", "content": "import type { BubbleItemType } from '@ant-design/x';\nimport { Bubble, Prompts, Welcome } from '@ant-design/x';\nimport { DefaultChatProvider, useXChat, XRequest, XRequestOptions } from '@ant-design/x-sdk';\nimport { type GetProp, Tag } from 'antd';\nimport { createStyles } from 'antd-style';\nimport React from 'react';\nimport useLocale from '../../../../hooks/useLocale';\nimport CustomizationProvider, { LOCALES } from '../../common/CustomizationProvider';\nimport CustomizationSender from '../../common/CustomizationSender';\n\ninterface ChatInput {\n query: string;\n}\n\nconst sleep = () => new Promise((resolve) => setTimeout(resolve, 1000));\n\nconst roles: GetProp = {\n ai: {\n placement: 'start',\n typing: { effect: 'typing', step: 5, interval: 20 },\n styles: {\n content: {\n borderRadius: 16,\n },\n },\n },\n local: {\n placement: 'end',\n styles: {\n content: {\n borderRadius: 16,\n background: '#3877FF',\n },\n },\n contentRender(content: ChatInput) {\n return content?.query;\n },\n },\n};\n\nconst useStyle = createStyles(({ token, css }) => {\n return {\n container: css`\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n align-items: center;\n gap: ${token.padding}px;\n height: 100%;\n justify-content: space-between;\n padding-block: ${token.paddingXL}px;\n `,\n bubble_list: css`\n flex: 1;\n `,\n placeholder_bubble: css`\n .ant-welcome {\n padding: 0;\n margin-bottom: ${token.marginSM}px;\n }\n\n .ant-welcome-title {\n font-size: 16px !important;\n font-weight: 500 !important;\n opacity: 0.9;\n }\n\n .ant-welcome-description {\n font-size: 12px;\n opacity: 0.65;\n }\n\n .ant-welcome-icon {\n img {\n transform: scale(1.2);\n margin-inline-end: 10px;\n }\n }\n\n .ant-bubble-content {\n overflow: hidden;\n background: linear-gradient(135deg, #ffffff26 14%, #ffffff0d 59%) !important;\n width: 100%;\n border-radius: 16px;\n padding: 24px;\n }\n\n .ant-prompts-content {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n }\n\n .ant-tag {\n background: linear-gradient(45deg, #ffffff33 0%, #ffffff00 100%);\n border: 1px solid #ffffff4d;\n border-radius: 4px;\n margin: 0;\n width: 18px;\n height: 18px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .ant-prompts {\n padding: 0;\n }\n\n .ant-prompts-desc {\n line-height: 2 !important;\n }\n\n .ant-prompts-item {\n background: rgba(255, 255, 255, 0.05);\n padding: 16px;\n border: none;\n flex: 1;\n height: 100%;\n }\n `,\n };\n});\n\nconst IndependentScene: React.FC = () => {\n const { styles } = useStyle();\n const [locale] = useLocale(LOCALES);\n const [content, setContent] = React.useState('');\n\n const [provider] = React.useState(\n new DefaultChatProvider({\n request: XRequest('https://api.example.com/chat', {\n manual: true,\n fetch: async (\n _: Parameters[0],\n options: XRequestOptions,\n ) => {\n await sleep();\n const params = options?.params;\n return Promise.resolve(\n new Response(JSON.stringify([`Mock success return. You said: ${params?.query}`]), {\n headers: { 'Content-Type': 'application/json' },\n }),\n );\n },\n }),\n }),\n );\n\n const { onRequest, messages, isRequesting } = useXChat({\n provider,\n requestPlaceholder: 'Waiting...',\n requestFallback: 'Mock failed return. Please try again later.',\n });\n\n const placeholderMessage: BubbleItemType = {\n role: 'system',\n key: 'placeholder',\n variant: 'borderless',\n className: styles.placeholder_bubble,\n content: (\n
\n \n }\n title={locale.greeting}\n description={locale.description}\n variant=\"borderless\"\n />\n {\n onRequest({\n query: item.data.description as string,\n });\n }}\n styles={{\n subItem: {\n background: 'none',\n padding: '4px 0',\n },\n }}\n items={[\n {\n key: '1',\n label: locale.hot_question,\n children: [\n {\n key: '1-1',\n icon: 1,\n description: locale.question1,\n },\n {\n key: '1-2',\n icon: 2,\n description: locale.question2,\n },\n {\n key: '1-3',\n icon: 3,\n description: locale.question3,\n },\n {\n key: '1-4',\n icon: 4,\n description: locale.question4,\n },\n ],\n },\n {\n key: '2',\n label: locale.design_guide,\n children: [\n {\n key: '2-1',\n icon: 1,\n description: locale.empathy,\n },\n {\n key: '2-2',\n icon: 2,\n description: locale.persona,\n },\n {\n key: '2-3',\n icon: 3,\n description: locale.conversation,\n },\n {\n key: '2-4',\n icon: 4,\n description: locale.interface,\n },\n ],\n },\n ]}\n />\n
\n ),\n };\n\n return (\n \n
\n ({\n key: id,\n loading: status === 'loading',\n role: status === 'local' ? 'local' : 'ai',\n content: message,\n })),\n ]}\n />\n {\n if (!nextContent) return;\n onRequest({\n query: nextContent,\n });\n setContent('');\n }}\n />\n
\n \n );\n};\n\nexport default IndependentScene;\n" }, { "path": "packages/x/.dumi/pages/index/components/SceneIntroduction/Nest.tsx", "content": "import { createStyles } from 'antd-style';\nimport React from 'react';\nimport useLocale from '../../../../hooks/useLocale';\nimport { LOCALES, useCustomizationBgStyle } from '../../common/CustomizationProvider';\nimport CustomizationSender from '../../common/CustomizationSender';\n\nconst useStyle = createStyles(({ token, css }) => {\n return {\n container: css`\n display: flex;\n height: 100%;\n width: 100%;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: ${token.paddingLG}px;\n `,\n title: css`\n font-size: 42px;\n color: #ffffff3f;\n line-height: 50px;\n font-weight: 500;\n `,\n };\n});\n\nconst NestScene: React.FC = () => {\n const { styles } = useStyle();\n\n const {\n styles: { background },\n } = useCustomizationBgStyle();\n\n const [locale] = useLocale(LOCALES);\n return (\n
\n
{locale.greeting_short}
\n \n
\n );\n};\n\nexport default NestScene;\n" }, { "path": "packages/x/.dumi/pages/index/components/SceneIntroduction/index.tsx", "content": "import { Button, Carousel } from 'antd';\nimport { createStyles } from 'antd-style';\nimport { clsx } from 'clsx';\nimport React from 'react';\n\nimport useLocale from '../../../../hooks/useLocale';\nimport Container from '../../common/Container';\nimport SiteContext from '../SiteContext';\nimport AssistantScene from './Assistant';\nimport Independent from './Independent';\nimport NestScene from './Nest';\n\nconst locales = {\n cn: {\n title: '试一试 , 多种 AI 场景体验',\n desc: '提供多场景解决方案 , 帮助用户提高与 AI 协作效率',\n\n independent_title: 'Web 独立式',\n independent_desc: '自然语言为主 , 几乎没有界面操作',\n\n assistant_title: 'Web 助手式',\n assistant_desc: '自然语言和界面操作均衡配合使用',\n\n nest_title: 'Web 嵌入式',\n nest_desc: '界面操作为主 , 偶尔唤起AI指令',\n\n app_title: 'App 端',\n app_desc: '疯狂研发中 , 敬请期待',\n },\n en: {\n title: 'Multiple AI Scenario Experiences',\n desc: 'Offering multi-scenario solutions to help users enhance collaboration efficiency with AI',\n\n independent_title: 'Web - Independent',\n independent_desc: 'Primarily LUI',\n\n assistant_title: 'Web - Assistant',\n assistant_desc: 'Mix of LUI and GUI',\n\n nest_title: 'Web - Nest',\n nest_desc: 'Mainly UI-driven',\n\n app_title: 'Mobile - APP',\n app_desc: 'In development, stay tuned',\n },\n};\n\nconst useStyle = createStyles(({ token, css }) => {\n return {\n container: css`\n position: relative;\n\n @media screen and (max-width: ${token.mobileMaxWidth}px) {\n height: 100vh;\n }\n `,\n content_bg: css`\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(10%, -20%);\n `,\n content: css`\n display: flex;\n justify-content: space-between;\n gap: ${token.paddingXL}px;\n width: 100%;\n margin-top: ${token.pcContainerMargin / 2}px;\n `,\n mobile_content: css`\n margin: ${token.marginXXL}px 0;\n\n h3 {\n text-align: center;\n font-size: ${token.fontSizeHeading3}px;\n }\n\n p {\n text-align: center;\n opacity: 0.65;\n }\n\n img {\n width: 100%;\n background: #0c0e10cc;\n border-radius: 12px;\n margin-top: ${token.margin}px;\n }\n `,\n tab: css`\n width: 280px;\n display: flex;\n flex-direction: column;\n gap: ${token.margin}px;\n `,\n tab_content: css`\n width: 890px;\n height: 600px;\n box-sizing: border-box;\n background-image: url(https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*RxJMSbQRvTUAAAAAAAAAAAAADgCCAQ/fmt.avif);\n background-repeat: no-repeat;\n background-size: cover;\n z-index: 2;\n `,\n item: css`\n position: relative;\n border-radius: 20px;\n height: 86px;\n padding: ${token.padding}px;\n box-sizing: border-box;\n display: flex;\n gap: 4px;\n flex-direction: column;\n align-items: flex-start;\n cursor: pointer;\n border: none !important;\n `,\n 'item-disabled': css`\n h3,p {\n color: ${token.colorTextDisabled};\n }\n `,\n 'item-active': css`\n background: #ffffff1a;\n\n &::after {\n content: '';\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border-radius: inherit;\n\n position: absolute;\n top: 0;\n bottom: 0;\n inset-inline-start: 0;\n inset-inline-end: 0;\n\n padding: ${token.lineWidth}px;\n background: linear-gradient(180deg, #ffffff26 0%, #ffffff00 100%);\n mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n mask-composite: exclude;\n };\n `,\n item_title: css`\n font-size: ${token.fontSizeHeading4}px;\n color: #ffffff;\n font-weight: 500;\n `,\n item_desc: css`\n font-size: 14px;\n color: #ffffff;\n line-height: 22px;\n opacity: 0.65;\n `,\n };\n});\n\nconst SceneBanner: React.FC = () => {\n const { styles } = useStyle();\n const [locale] = useLocale(locales);\n\n const { isMobile } = React.useContext(SiteContext);\n\n const tabItems = [\n {\n key: 'independent',\n title: locale.independent_title,\n desc: locale.independent_desc,\n content: ,\n img: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*YVjbTqbc7ngAAAAAAAAAAAAADgCCAQ/fmt.avif',\n },\n {\n key: 'assistant',\n title: locale.assistant_title,\n desc: locale.assistant_desc,\n content: ,\n img: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*kCojRo0SoAAAAAAAAAAAAAAADgCCAQ/fmt.avif',\n },\n {\n key: 'nest',\n title: locale.nest_title,\n desc: locale.nest_desc,\n content: ,\n img: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*krfsT5zBSuUAAAAAAAAAAAAADgCCAQ/fmt.avif',\n },\n {\n key: 'app',\n title: locale.app_title,\n desc: locale.app_desc,\n disabled: true,\n content: null,\n },\n ];\n\n const [active, setActive] = React.useState(tabItems[0].key);\n\n const genHandleActive = (key: string) => () => setActive(key);\n\n const activeContent = tabItems.find((item) => item.key === active)?.content;\n\n return (\n \n {!isMobile && (\n \n )}\n {isMobile ? (\n \n {tabItems.map(\n (item) =>\n item.img && (\n
\n

{item.title}

\n

{item.desc}

\n \"item.img\"\n
\n ),\n )}\n \n ) : (\n
\n
\n {tabItems.map((item) => (\n \n

{item.title}

\n

{item.desc}

\n \n ))}\n
\n {!!activeContent &&
{activeContent}
}\n
\n )}\n \n );\n};\n\nexport default SceneBanner;\n" }, { "path": "packages/x/.dumi/pages/index/components/SiteContext.ts", "content": "import SiteContext from '../../../theme/slots/SiteContext';\n\nexport type { SiteContextProps } from '../../../theme/slots/SiteContext';\n\nexport default SiteContext;\n" }, { "path": "packages/x/.dumi/pages/index/index.tsx", "content": "import { createStyles } from 'antd-style';\nimport { clsx } from 'clsx';\nimport React, { lazy, Suspense } from 'react';\nimport DesignBanner from './components/DesignBanner';\nimport MainBanner from './components/MainBanner';\n\nconst useStyle = createStyles(({ token, css }) => {\n return {\n section: css`\n background: linear-gradient(180deg, #1e2226e6 0%, #1c2024 38%, #16191c 100%);\n border-radius: 40px 40px 0 0;\n backdrop-filter: blur(40px);\n display: flex;\n flex-direction: column;\n gap: ${token.pcContainerMargin}px;\n padding: ${token.pcContainerMargin}px 0;\n `,\n container: css`\n margin-top: -40px;\n `,\n framework: css`\n border-radius: 0;\n background-image: linear-gradient(90deg, #5a37e6 0%, #0059c9 100%);\n `,\n };\n});\n\nconst Homepage: React.FC = () => {\n const { styles } = useStyle();\n\n const DesignFramework = lazy(() => import('./components/DesignFramework'));\n\n const CompIntroduction = lazy(() => import('./components/CompIntroduction'));\n\n const SceneIntroduction = lazy(() => import('./components/SceneIntroduction'));\n\n const DesignGuide = lazy(() => import('./components/DesignGuide'));\n\n return (\n
\n \n
\n \n
\n
\n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n
\n
\n );\n};\n\nexport default Homepage;\n" }, { "path": "packages/x/.dumi/pages/index-cn/index.ts", "content": "import Homepage from '../index/index';\n\nexport default Homepage;\n" }, { "path": "packages/x/.dumi/preset/.gitkeep", "content": "" }, { "path": "packages/x/.dumi/rehypeAntd.ts", "content": "import assert from 'assert';\nimport type { HastRoot, UnifiedTransformer } from 'dumi';\nimport { unistUtilVisit } from 'dumi';\n\n/**\n * plugin for modify hast tree when docs compiling\n */\nfunction rehypeAntd(): UnifiedTransformer {\n return (tree, vFile) => {\n const { filename } = vFile.data.frontmatter as any;\n\n unistUtilVisit.visit(tree, 'element', (node, i, parent) => {\n if (node.tagName === 'DumiDemoGrid') {\n // replace DumiDemoGrid to DemoWrapper, to implement demo toolbar\n node.tagName = 'DemoWrapper';\n } else if (node.tagName === 'ResourceCards') {\n const propNames = ['title', 'cover', 'description', 'src', 'official'];\n const contentNode = node.children[0];\n\n assert(\n contentNode.type === 'text',\n `ResourceCards content must be plain text!\\nat ${filename}`,\n );\n\n // clear children\n node.children = [];\n\n // generate JSX props\n (node as any).JSXAttributes = [\n {\n type: 'JSXAttribute',\n name: 'resources',\n value: JSON.stringify(\n contentNode.value\n .trim()\n .split('\\n')\n .reduce((acc, cur) => {\n // match text from ` - 桌面组件 Sketch 模板包`\n const [, isProp, val] = cur.match(/(\\s+)?-\\s(.+)/)!;\n\n if (!isProp) {\n // create items when match title\n acc.push({ [propNames[0]]: val });\n } else {\n // add props when match others\n const prev = acc[acc.length - 1];\n\n prev[propNames[Object.keys(prev).length]] = val;\n }\n\n return acc;\n }, []),\n ),\n },\n ];\n } else if (\n node.type === 'element' &&\n node.tagName === 'Table' &&\n /^(components|docs\\/x-sdk|docs\\/x-markdown)/.test(filename)\n ) {\n if (!node.properties) return;\n node.properties.className ??= [];\n (node.properties.className as string[]).push('component-api-table');\n } else if (node.type === 'element' && (node.tagName === 'Link' || node.tagName === 'a')) {\n const { tagName } = node;\n node.properties!.sourceType = tagName;\n node.tagName = 'LocaleLink';\n } else if (node.type === 'element' && node.tagName === 'video') {\n node.tagName = 'VideoPlayer';\n } else if (node.tagName === 'SourceCode') {\n const { lang } = node.properties!;\n\n if (typeof lang === 'string' && lang.startsWith('sandpack')) {\n const code = (node.children[0] as any).value as string;\n const configRegx = /^const sandpackConfig = ([\\s\\S]*?});/;\n const [configString] = code.match(configRegx) || [];\n /* biome-ignore lint/security/noGlobalEval: used in documentation */ /* eslint-disable-next-line no-eval */\n const config = configString && eval(`(${configString.replace(configRegx, '$1')})`);\n Object.keys(config || {}).forEach((key) => {\n if (typeof config[key] === 'object') {\n config[key] = JSON.stringify(config[key]);\n }\n });\n\n parent!.children.splice(i!, 1, {\n type: 'element',\n tagName: 'Sandpack',\n properties: {\n ...config,\n },\n children: [\n {\n type: 'text',\n value: code.replace(configRegx, '').trim(),\n },\n ],\n });\n }\n }\n });\n };\n}\n\nexport default rehypeAntd;\n" }, { "path": "packages/x/.dumi/remarkAnchor.ts", "content": "import type { UnifiedTransformer } from 'dumi';\nimport { unistUtilVisit } from 'dumi';\n\nlet toSlug: typeof import('github-slugger').slug;\n\n// workaround to import pure esm module\n(async () => {\n ({ slug: toSlug } = await import('github-slugger'));\n})();\n\nconst isNil = (value: any) => value == null;\n\nconst toArr = (value: T | T[]) => {\n if (isNil(value)) return [];\n return Array.isArray(value) ? value : [value];\n};\n\nconst patch = (context: Record, key: string, value: any) => {\n if (!context[key]) {\n context[key] = value;\n }\n return context[key];\n};\n\ninterface Options {\n level?: number;\n}\n\nconst remarkAnchor = (opt: Options = {}): UnifiedTransformer => {\n // https://regex101.com/r/WDjkK0/1\n const RE = /\\s*\\{#([^}]+)\\}$/;\n\n const realOpt = {\n level: [1, 2, 3, 4, 5, 6],\n ...opt,\n };\n\n return function transformer(tree) {\n const ids = new Set();\n\n unistUtilVisit.visit(tree, 'heading', (node) => {\n if (toArr(realOpt.level).indexOf(node.depth) === -1) {\n return unistUtilVisit.CONTINUE;\n }\n\n const lastChild = node.children.at(-1);\n\n if (lastChild?.type === 'text') {\n const text = lastChild.value;\n const match = text.match(RE);\n if (match) {\n const id = match[1];\n if (id !== toSlug(id)) {\n throw new Error(\n `Expected header ID to be a valid slug. You specified: {#${id}}. Replace it with: {#${toSlug(id)}}`,\n );\n }\n\n node.data ??= {};\n node.data.hProperties = { ...node.data.hProperties, id };\n\n lastChild.value = text.replace(RE, '');\n\n if (lastChild.value === '') {\n node.children.pop();\n }\n if (ids.has(id)) {\n throw new Error(`Cannot have a duplicate header with id \"${id}\" on the page.\n Rename the section or give it an explicit unique ID. For example: #### Arguments {#setstate-arguments}`);\n }\n\n ids.add(id);\n\n const data = patch(node, 'data', {});\n patch(data, 'id', id);\n patch(data, 'htmlAttributes', {});\n patch(data, 'hProperties', {});\n patch(data.htmlAttributes, 'id', id);\n patch(data.hProperties, 'id', id);\n }\n }\n });\n };\n};\n\nexport default remarkAnchor;\n" }, { "path": "packages/x/.dumi/remarkAntd.ts", "content": "import type { UnifiedTransformer } from 'dumi';\nimport { unistUtilVisit } from 'dumi';\n\nfunction remarkMeta(): UnifiedTransformer {\n return (tree, vFile) => {\n // read frontmatter\n unistUtilVisit.visit(tree, 'yaml', (node) => {\n if (!/(^|[\\n\\r])description:/.test(node.value)) {\n (vFile.data.frontmatter as any).__autoDescription = true;\n }\n });\n };\n}\n\nexport default remarkMeta;\n" }, { "path": "packages/x/.dumi/theme/SiteThemeProvider.tsx", "content": "import { theme as antdTheme, ConfigProvider } from 'antd';\nimport type { ThemeConfig } from 'antd/es/config-provider';\nimport type { ThemeProviderProps } from 'antd-style';\nimport { ThemeProvider } from 'antd-style';\nimport React, { useContext } from 'react';\n\ninterface NewToken {\n bannerHeight: number;\n headerHeight: number;\n alertHeight: number;\n menuItemBorder: number;\n mobileMaxWidth: number;\n siteMarkdownCodeBg: string;\n antCls: string;\n iconCls: string;\n marginFarXS: number;\n marginFarSM: number;\n marginFar: number;\n codeFamily: string;\n contentMarginTop: number;\n anchorTop: number;\n indexRadius: number;\n pcMaxWidth: number;\n pcContainerMargin: number;\n}\n\n// 通过给 antd-style 扩展 CustomToken 对象类型定义，可以为 useTheme 中增加相应的 token 对象\ndeclare module 'antd-style' {\n export interface CustomToken extends NewToken {}\n}\nconst alertHeight = 40;\nconst headerHeight = 80;\nconst bannerHeight = 38;\nconst indexRadius = 24;\nconst pcMaxWidth = 1560;\n\nconst SiteThemeProvider: React.FC> = ({ children, theme, ...rest }) => {\n const { getPrefixCls, iconPrefixCls } = useContext(ConfigProvider.ConfigContext);\n const rootPrefixCls = getPrefixCls();\n const { token } = antdTheme.useToken();\n React.useEffect(() => {\n // 需要注意与 components/config-provider/demo/holderRender.tsx 配置冲突\n ConfigProvider.config({ theme: theme as ThemeConfig });\n }, [theme]);\n\n return (\n \n {...rest}\n theme={theme}\n customToken={{\n headerHeight,\n alertHeight,\n bannerHeight,\n indexRadius,\n pcMaxWidth,\n pcContainerMargin: 100,\n menuItemBorder: 2,\n mobileMaxWidth: 767.99,\n siteMarkdownCodeBg: token.colorFillTertiary,\n antCls: `.${rootPrefixCls}`,\n iconCls: `.${iconPrefixCls}`,\n /** 56 */\n marginFarXS: (token.marginXXL / 6) * 7,\n /** 80 */\n marginFarSM: (token.marginXXL / 3) * 5,\n /** 96 */\n marginFar: token.marginXXL * 2,\n codeFamily: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`,\n contentMarginTop: 40,\n anchorTop: headerHeight + token.margin,\n }}\n >\n {children}\n \n );\n};\n\nexport default SiteThemeProvider;\n" }, { "path": "packages/x/.dumi/theme/builtins/APITable/index.tsx", "content": "import React from 'react';\n\nconst APITable: React.FC = () => (\n // TODO: implement api table, depend on the new markdown data structure passed\n <>API Table\n);\n\nexport default APITable;\n" }, { "path": "packages/x/.dumi/theme/builtins/Antd.tsx", "content": "import * as all from 'antd';\nimport * as React from 'react';\n\ninterface AntdProps {\n component: keyof typeof all;\n}\n\nfunction Antd(props: AntdProps) {\n const { component, ...restProps } = props;\n // biome-ignore lint/performance/noDynamicNamespaceImportAccess: it is useful\n const Component = (all[component] ?? React.Fragment) as React.ComponentType;\n\n return ;\n}\n\nexport default Antd;\n" }, { "path": "packages/x/.dumi/theme/builtins/Audio/index.tsx", "content": "import { SoundOutlined } from '@ant-design/icons';\nimport { createStyles } from 'antd-style';\nimport React from 'react';\n\nconst useStyle = createStyles(({ css, token }) => {\n const { paddingXXS, fontSizeXL, motionDurationSlow, colorLink, colorLinkHover, colorLinkActive } =\n token;\n return {\n playBtn: css`\n display: inline-flex;\n justify-content: center;\n align-items: center;\n column-gap: ${paddingXXS}px;\n margin: 0;\n `,\n icon: css`\n font-size: ${fontSizeXL}px;\n color: ${colorLink};\n transition: all ${motionDurationSlow};\n &:hover {\n color: ${colorLinkHover};\n }\n &:active {\n color: ${colorLinkActive};\n }\n `,\n };\n});\n\ninterface AudioProps {\n id?: string;\n}\n\nconst AudioControl: React.FC> = ({ id, children }) => {\n const { styles } = useStyle();\n const onClick: React.MouseEventHandler = () => {\n const audio = document.querySelector(`#${id}`);\n audio?.play();\n };\n return (\n \n {children}\n \n \n );\n};\n\nexport default AudioControl;\n" }, { "path": "packages/x/.dumi/theme/builtins/Badge/index.tsx", "content": "import { Tag, TagProps } from 'antd';\nimport * as React from 'react';\n\n// https://github.com/umijs/dumi/blob/master/src/client/theme-default/builtins/Badge/index.tsx\ninterface BadgeProps extends TagProps {\n type: 'info' | 'warning' | 'error' | 'success';\n}\n\nconst colorMap = {\n info: 'blue',\n warning: 'orange',\n error: 'red',\n success: 'green',\n};\n\nexport default ({ type = 'info', ...props }: BadgeProps) => (\n \n);\n" }, { "path": "packages/x/.dumi/theme/builtins/ColorChunk/index.tsx", "content": "import type { ColorInput } from '@ant-design/fast-color';\nimport { FastColor } from '@ant-design/fast-color';\nimport { Popover } from 'antd';\nimport { createStyles } from 'antd-style';\nimport * as React from 'react';\n\nconst useStyle = createStyles(({ token, css }) => ({\n codeSpan: css`\n padding: 0.2em 0.4em;\n font-size: 0.9em;\n background: ${token.siteMarkdownCodeBg};\n border-radius: ${token.borderRadius}px;\n font-family: monospace;\n `,\n dot: css`\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n margin-inline-end: ${token.marginXXS}px;\n border: 1px solid ${token.colorSplit};\n `,\n}));\n\ninterface ColorChunkProps {\n value: ColorInput;\n enablePopover?: boolean;\n}\n\nconst ColorChunk: React.FC> = (props) => {\n const { styles, theme } = useStyle();\n const { value, children, enablePopover } = props;\n\n const dotColor = React.useMemo(() => new FastColor(value).toHexString(), [value]);\n\n let dotNode = (\n \n \n {children ?? dotColor}\n \n );\n\n if (enablePopover) {\n dotNode = (\n
\n \n \n
\n {groups\n .filter((i) => i?.title)\n .map((group) => {\n const components = group?.children?.filter(\n (component) =>\n !search.trim() ||\n component?.title?.toLowerCase()?.includes(search.trim().toLowerCase()) ||\n (component?.subtitle || '').toLowerCase().includes(search.trim().toLowerCase()),\n );\n return components?.length ? (\n
\n \n <Flex gap=\"small\" align=\"center\">\n <span style={{ fontSize: 24 }}>{group?.title}</span>\n <Tag style={{ display: 'block' }}>{components.length}</Tag>\n </Flex>\n \n \n {components.map((component) => {\n let url = component.link;\n /** 是否是外链 */\n const isExternalLink = url.startsWith('http');\n\n if (!isExternalLink) {\n url += urlSearch;\n }\n\n const cardContent = (\n onClickCard(url)}\n styles={{\n body: {\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'bottom right',\n backgroundImage: `url(${component.tag || ''})`,\n },\n }}\n size=\"small\"\n className={styles.componentsOverviewCard}\n title={\n
\n {component.title} {component.subtitle}\n
\n }\n >\n
\n \n
\n \n );\n\n const linkContent = isExternalLink ? (\n \n {cardContent}\n \n ) : (\n \n {cardContent}\n \n );\n\n return (\n \n {linkContent}\n \n );\n })}\n \n
\n ) : null;\n })}\n
\n \n );\n};\n\nexport default memo(Overview);\n" }, { "path": "packages/x/.dumi/theme/builtins/ComponentTokenTable/index.tsx", "content": "import { LinkOutlined, QuestionCircleOutlined, RightOutlined } from '@ant-design/icons';\nimport { XProvider } from '@ant-design/x';\nimport tokenData from '@ant-design/x/es/version/token.json';\nimport tokenMeta from '@ant-design/x/es/version/token-meta.json';\nimport { Flex, Popover, Table, Typography } from 'antd';\nimport { createStyles, css, useTheme } from 'antd-style';\nimport { getDesignToken } from 'antd-token-previewer';\nimport React, { useMemo, useState } from 'react';\n\nimport useLocale from '../../../hooks/useLocale';\nimport type { TokenData } from '../TokenTable';\nimport { useColumns } from '../TokenTable';\n\nconst compare = (token1: string, token2: string) => {\n const hasColor1 = token1.toLowerCase().includes('color');\n const hasColor2 = token2.toLowerCase().includes('color');\n if (hasColor1 && !hasColor2) {\n return -1;\n }\n if (!hasColor1 && hasColor2) {\n return 1;\n }\n return token1 < token2 ? -1 : 1;\n};\n\nconst defaultToken: any = getDesignToken();\nconst xTokenData: any = tokenData;\nconst xTokenMeta: any = tokenMeta;\n\nconst locales = {\n cn: {\n token: 'Token 名称',\n description: '描述',\n type: '类型',\n value: '默认值',\n componentToken: '组件 Token',\n globalToken: '全局 Token',\n componentComment: '这里是你的组件 token',\n globalComment: '这里是你的全局 token',\n help: '如何定制？',\n customizeTokenLink: '/docs/react/customize-theme-cn#修改主题变量',\n customizeComponentTokenLink: '/docs/react/customize-theme-cn#修改组件变量',\n },\n en: {\n token: 'Token Name',\n description: 'Description',\n type: 'Type',\n value: 'Default Value',\n componentToken: 'Component Token',\n globalToken: 'Global Token',\n componentComment: 'here is your component tokens',\n globalComment: 'here is your global tokens',\n help: 'How to use?',\n customizeTokenLink: '/docs/react/customize-theme#customize-design-token',\n customizeComponentTokenLink: 'docs/react/customize-theme#customize-component-token',\n },\n};\n\nconst useStyle = createStyles(({ token }) => ({\n tableTitle: css`\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n line-height: 40px;\n gap: ${token.marginXS}px;\n `,\n arrowIcon: css`\n font-size: ${token.fontSizeLG}px;\n & svg {\n transition: all ${token.motionDurationSlow};\n }\n `,\n help: css`\n font-size: ${token.fontSizeSM}px;\n font-weight: normal;\n color: #999;\n a {\n color: #999;\n }\n `,\n tokenTitle: css`\n font-size: ${token.fontSizeLG}px;\n font-weight: bold;\n `,\n}));\n\ninterface SubTokenTableProps {\n defaultOpen?: boolean;\n title: string;\n helpText: React.ReactNode;\n helpLink: string;\n tokens: string[];\n component?: string;\n comment?: {\n componentComment?: string;\n globalComment?: string;\n };\n}\n\nconst SubTokenTable: React.FC = (props) => {\n const { defaultOpen, tokens, title, helpText, helpLink, component, comment } = props;\n const [, lang] = useLocale(locales);\n const token = useTheme();\n const columns = useColumns();\n\n const [open, setOpen] = useState(defaultOpen ?? process.env.NODE_ENV !== 'production');\n\n const { styles } = useStyle();\n\n if (!tokens.length) {\n return null;\n }\n\n const data = tokens\n .sort(component ? undefined : compare)\n .map((name) => {\n const meta = component\n ? xTokenMeta.components[component].find((item: { token: string }) => item.token === name)\n : xTokenMeta.global?.[name];\n\n if (!meta) {\n return null as unknown as TokenData;\n }\n\n return {\n name,\n desc: lang === 'cn' ? meta.desc : meta.descEn,\n type: meta.type,\n value: component ? xTokenData[component].component[name] : defaultToken[name],\n };\n })\n .filter(Boolean);\n\n const code = component\n ? `\n ...\n`\n : `\n ...\n`;\n\n return (\n <>\n
setOpen(!open)}>\n \n \n {title}\n \n 
\n                  {code}\n
\n \n \n {helpText}\n \n \n }\n >\n \n \n {helpText}\n \n \n \n
\n {open && (\n \n \n size=\"middle\"\n columns={columns}\n bordered\n dataSource={data}\n style={{ marginBottom: token.margin }}\n pagination={false}\n rowKey={(record) => record.name}\n />\n \n )}\n \n );\n};\n\nexport interface ComponentTokenTableProps {\n component: string;\n}\n\nconst ComponentTokenTable: React.FC = ({ component }) => {\n const [locale] = useLocale(locales);\n const [mergedGlobalTokens] = useMemo(() => {\n const globalTokenSet = new Set();\n\n component.split(',').forEach((comp) => {\n const { global: globalTokens = [] } = xTokenData?.[comp] || {};\n\n globalTokens.forEach((token: string) => {\n globalTokenSet.add(token);\n });\n });\n\n return [Array.from(globalTokenSet)] as const;\n }, [component]);\n\n return (\n <>\n {xTokenMeta?.components?.[component] && (\n item.token)}\n component={component}\n comment={{\n componentComment: locale.componentComment,\n globalComment: locale.globalComment,\n }}\n />\n )}\n \n \n );\n};\n\nexport default React.memo(ComponentTokenTable);\n" }, { "path": "packages/x/.dumi/theme/builtins/Container/index.tsx", "content": "/**\n * copied: https://github.com/arvinxx/dumi-theme-antd-style/tree/master/src/builtins/Container\n */\n\nimport { Alert } from 'antd';\nimport * as React from 'react';\n\nimport useStyles from './style';\n\ninterface ContainerProps {\n type: 'info' | 'warning' | 'success' | 'error';\n title?: string;\n}\n\nconst Container: React.FC> = ({\n type,\n title,\n children,\n}) => {\n const { styles, cx } = useStyles();\n\n return (\n
\n \n {children}\n
\n }\n className={styles.alert}\n />\n \n );\n};\n\nexport default Container;\n" }, { "path": "packages/x/.dumi/theme/builtins/Container/style.ts", "content": "import { createStyles } from 'antd-style';\n\nconst useStyles = createStyles(({ token, prefixCls, css }) => ({\n container: css`\n margin: ${token.marginXS}px 0;\n `,\n\n alert: css`\n .${prefixCls}-alert-message {\n font-weight: bold;\n }\n `,\n\n /* 使用 `&&` 加一点点权重 */\n desc: css`\n && p {\n margin: 0;\n }\n `,\n}));\n\nexport default useStyles;\n" }, { "path": "packages/x/.dumi/theme/builtins/DemoWrapper/index.tsx", "content": "import { BugOutlined, CodeOutlined, ExperimentOutlined } from '@ant-design/icons';\nimport { XProvider } from '@ant-design/x';\nimport { css, Global } from '@emotion/react';\nimport { Button, Tooltip } from 'antd';\nimport { DumiDemo, DumiDemoGrid, FormattedMessage } from 'dumi';\nimport React, { Suspense } from 'react';\n\nimport useLayoutState from '../../../hooks/useLayoutState';\nimport useLocale from '../../../hooks/useLocale';\nimport DemoContext from '../../slots/DemoContext';\nimport DemoFallback from '../Previewer/DemoFallback';\n\nconst locales = {\n cn: {\n enableCssVar: '启用 CSS 变量',\n disableCssVar: '禁用 CSS 变量',\n },\n en: {\n enableCssVar: 'Enable CSS Var',\n disableCssVar: 'Disable CSS Var',\n },\n};\n\nconst DemoWrapper: typeof DumiDemoGrid = ({ items }) => {\n const { showDebug, setShowDebug } = React.use(DemoContext);\n const [locale] = useLocale(locales);\n\n const [expandAll, setExpandAll] = useLayoutState(false);\n const [enableCssVar, setEnableCssVar] = useLayoutState(true);\n\n const handleVisibleToggle = () => {\n setShowDebug?.(!showDebug);\n };\n\n const handleExpandToggle = () => {\n setExpandAll(!expandAll);\n };\n\n const handleCssVarToggle = () => {\n setEnableCssVar((v) => !v);\n };\n\n const demos = React.useMemo(\n () =>\n items.reduce((acc, item) => {\n const { previewerProps } = item;\n const { debug } = previewerProps;\n if (debug && !showDebug) {\n return acc;\n }\n return acc.concat({\n ...item,\n previewerProps: {\n ...previewerProps,\n expand: expandAll,\n // always override debug property, because dumi will hide debug demo in production\n debug: false,\n /**\n * antd extra marker for the original debug\n * @see https://github.com/ant-design/ant-design/pull/40130#issuecomment-1380208762\n */\n originDebug: debug,\n },\n });\n }, []),\n [expandAll, showDebug],\n );\n\n return (\n
\n \n \n \n }\n >\n }\n onClick={handleExpandToggle}\n className={expandAll ? 'icon-enabled' : ''}\n />\n \n \n }\n >\n }\n onClick={handleVisibleToggle}\n className={showDebug ? 'icon-enabled' : ''}\n />\n \n \n }\n onClick={handleCssVarToggle}\n className={enableCssVar ? 'icon-enabled' : ''}\n />\n \n \n \n (\n }>\n \n \n )}\n />\n \n
\n );\n};\n\nexport default DemoWrapper;\n" }, { "path": "packages/x/.dumi/theme/builtins/IconSearch/Category.tsx", "content": "import { App } from 'antd';\nimport { createStyles } from 'antd-style';\nimport { useIntl } from 'dumi';\nimport * as React from 'react';\n\nimport CopyableIcon from './CopyableIcon';\nimport type { CategoriesKeys } from './fields';\nimport type { ThemeType } from './IconSearch';\n\nconst useStyle = createStyles(({ token, css }) => ({\n anticonsList: css`\n margin: ${token.margin}px 0;\n overflow: hidden;\n direction: ltr;\n list-style: none;\n display: grid;\n grid-gap: ${token.margin}px;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n padding: 0;\n `,\n copiedCode: css`\n padding: 0 ${token.paddingXXS}px;\n font-size: ${token.fontSizeSM}px;\n background-color: ${token.colorBgLayout};\n border-radius: ${token.borderRadiusXS}px;\n `,\n}));\n\ninterface CategoryProps {\n title: CategoriesKeys;\n icons: string[];\n theme: ThemeType;\n newIcons: string[];\n}\n\nconst Category: React.FC = (props) => {\n const { message } = App.useApp();\n const { icons, title, newIcons, theme } = props;\n const { styles } = useStyle();\n const intl = useIntl();\n const [justCopied, setJustCopied] = React.useState(null);\n const copyId = React.useRef | null>(null);\n const onCopied = React.useCallback((type: string, text: string) => {\n message.success(\n \n {text} copied 🎉\n ,\n );\n setJustCopied(type);\n copyId.current = setTimeout(() => {\n setJustCopied(null);\n }, 2000);\n }, []);\n React.useEffect(\n () => () => {\n if (copyId.current) {\n clearTimeout(copyId.current);\n }\n },\n [],\n );\n return (\n
\n

{intl.formatMessage({ id: `app.docs.components.icon.category.${title}` })}

\n
    \n {icons.map((name) => (\n \n ))}\n
\n
\n );\n};\n\nexport default Category;\n" }, { "path": "packages/x/.dumi/theme/builtins/IconSearch/CopyableIcon.tsx", "content": "import * as AntdIcons from '@ant-design/icons';\nimport { App, Badge } from 'antd';\nimport { createStyles } from 'antd-style';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport CopyToClipboard from 'react-copy-to-clipboard';\n\nimport type { ThemeType } from './IconSearch';\n\nconst allIcons: { [key: PropertyKey]: any } = AntdIcons;\n\nconst useStyle = createStyles(({ token, css }) => {\n const { antCls, iconCls } = token;\n return {\n iconItem: css`\n display: inline-flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-inline-start: 0 !important;\n margin-inline-end: 0 !important;\n padding-inline-start: 0 !important;\n padding-inline-end: 0 !important;\n position: relative;\n width: 200px;\n height: 100px;\n overflow: hidden;\n color: #555;\n text-align: center;\n list-style: none;\n background-color: inherit;\n border-radius: ${token.borderRadiusSM}px;\n cursor: pointer;\n transition: all ${token.motionDurationSlow} ease-in-out;\n ${token.iconCls} {\n margin: ${token.marginXS}px 0;\n font-size: 36px;\n transition: transform ${token.motionDurationSlow} ease-in-out;\n will-change: transform;\n }\n &:hover {\n color: ${token.colorWhite};\n background-color: ${token.colorPrimary};\n ${iconCls} {\n transform: scale(1.3);\n }\n ${antCls}-badge {\n color: ${token.colorWhite};\n }\n }\n &.TwoTone:hover {\n background-color: #8ecafe;\n }\n &.copied:hover {\n color: rgba(255, 255, 255, 0.2);\n }\n &::after {\n content: 'Copied!';\n position: absolute;\n top: 0;\n inset-inline-start: 0;\n width: 100%;\n height: 100%;\n line-height: 100px;\n color: ${token.colorTextLightSolid};\n text-align: center;\n background-color: ${token.colorPrimary};\n opacity: 0;\n transition: all ${token.motionDurationSlow} cubic-bezier(0.18, 0.89, 0.32, 1.28);\n }\n &.copied::after {\n opacity: 1;\n }\n `,\n anticonCls: css`\n display: block;\n font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\n white-space: nowrap;\n text-align: center;\n transform: scale(0.8);\n ${antCls}-badge {\n transition: color ${token.motionDurationSlow} ease-in-out;\n }\n `,\n };\n});\n\nexport interface CopyableIconProps {\n name: string;\n isNew: boolean;\n theme: ThemeType;\n justCopied: string | null;\n onCopied: (type: string, text: string) => void;\n}\n\nconst CopyableIcon: React.FC = (props) => {\n const { message } = App.useApp();\n const { name, isNew, justCopied, theme, onCopied } = props;\n const { styles } = useStyle();\n const onCopy = (text: string, result: boolean) => {\n if (result) {\n onCopied(name, text);\n } else {\n message.error('Copy icon name failed, please try again.');\n }\n };\n return (\n `} onCopy={onCopy}>\n
  • \n {React.createElement(allIcons[name])}\n \n {name}\n \n
    • \n     \n );\n};\n\nexport default CopyableIcon;\n" }, { "path": "packages/x/.dumi/theme/builtins/IconSearch/IconSearch.tsx", "content": "import Icon, * as AntdIcons from '@ant-design/icons';\nimport { Affix, Empty, Input, Segmented } from 'antd';\nimport type { SegmentedOptions } from 'antd/es/segmented';\nimport { createStyles, useTheme } from 'antd-style';\nimport { useIntl } from 'dumi';\nimport debounce from 'lodash/debounce';\nimport type { CSSProperties } from 'react';\nimport React, { useCallback, useMemo, useState } from 'react';\n\nimport Category from './Category';\nimport type { CategoriesKeys } from './fields';\nimport { categories } from './fields';\nimport { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';\n\nexport enum ThemeType {\n Filled = 'Filled',\n Outlined = 'Outlined',\n TwoTone = 'TwoTone',\n}\n\nconst allIcons: { [key: string]: any } = AntdIcons;\n\nconst useStyle = createStyles(({ token, css }) => ({\n iconSearchAffix: css`\n display: flex;\n transition: all ${token.motionDurationSlow};\n justify-content: space-between;\n `,\n}));\n\ninterface IconSearchState {\n theme: ThemeType;\n searchKey: string;\n}\n\nconst IconSearch: React.FC = () => {\n const intl = useIntl();\n const { styles } = useStyle();\n const [displayState, setDisplayState] = useState({\n searchKey: '',\n theme: ThemeType.Outlined,\n });\n const token = useTheme();\n\n const newIconNames: string[] = [];\n\n const handleSearchIcon = debounce((e: React.ChangeEvent) => {\n setDisplayState((prevState) => ({ ...prevState, searchKey: e.target.value }));\n }, 300);\n\n const handleChangeTheme = useCallback((value: ThemeType) => {\n setDisplayState((prevState) => ({ ...prevState, theme: value as ThemeType }));\n }, []);\n\n const renderCategories = useMemo(() => {\n const { searchKey = '', theme } = displayState;\n\n const categoriesResult = Object.keys(categories)\n .map((key) => {\n let iconList = categories[key as CategoriesKeys];\n if (searchKey) {\n const matchKey = searchKey\n\n .replace(/^<([a-z]*)\\s\\/>$/gi, (_, name) => name)\n .replace(/(Filled|Outlined|TwoTone)$/, '')\n .toLowerCase();\n iconList = iconList.filter((iconName) => iconName.toLowerCase().includes(matchKey));\n }\n\n const ignore = [\n 'CopyrightCircle', // same as Copyright\n 'DollarCircle', // same as Dollar\n ];\n iconList = iconList.filter((icon) => !ignore.includes(icon));\n\n return {\n category: key,\n icons: iconList\n .map((iconName) => iconName + theme)\n .filter((iconName) => allIcons[iconName]),\n };\n })\n .filter(({ icons }) => !!icons.length)\n .map(({ category, icons }) => (\n \n ));\n return categoriesResult.length ? categoriesResult : ;\n }, [displayState.searchKey, displayState.theme]);\n\n const [searchBarAffixed, setSearchBarAffixed] = useState(false);\n const { borderRadius, colorBgContainer, anchorTop } = token;\n\n const affixedStyle: CSSProperties = {\n boxShadow: 'rgba(50, 50, 93, 0.25) 0 6px 12px -2px, rgba(0, 0, 0, 0.3) 0 3px 7px -3px',\n padding: 8,\n margin: -8,\n borderRadius,\n backgroundColor: colorBgContainer,\n };\n\n const memoizedOptions = React.useMemo>(\n () => [\n {\n value: ThemeType.Outlined,\n icon: ,\n label: intl.formatMessage({ id: 'app.docs.components.icon.outlined' }),\n },\n {\n value: ThemeType.Filled,\n icon: ,\n label: intl.formatMessage({ id: 'app.docs.components.icon.filled' }),\n },\n {\n value: ThemeType.TwoTone,\n icon: ,\n label: intl.formatMessage({ id: 'app.docs.components.icon.two-tone' }),\n },\n ],\n [intl],\n );\n\n return (\n
    \n \n
    \n \n size=\"large\"\n value={displayState.theme}\n options={memoizedOptions}\n onChange={handleChangeTheme}\n />\n \n
    \n     \n {renderCategories}\n
    \n );\n};\n\nexport default IconSearch;\n" }, { "path": "packages/x/.dumi/theme/builtins/IconSearch/fields.ts", "content": "import * as AntdIcons from '@ant-design/icons/lib/icons';\n\nconst all = Object.keys(AntdIcons)\n .map((n) => n.replace(/(Outlined|Filled|TwoTone)$/, ''))\n .filter((n, i, arr) => arr.indexOf(n) === i);\n\nconst direction = [\n 'StepBackward',\n 'StepForward',\n 'FastBackward',\n 'FastForward',\n 'Shrink',\n 'ArrowsAlt',\n 'Down',\n 'Up',\n 'Left',\n 'Right',\n 'CaretUp',\n 'CaretDown',\n 'CaretLeft',\n 'CaretRight',\n 'UpCircle',\n 'DownCircle',\n 'LeftCircle',\n 'RightCircle',\n 'DoubleRight',\n 'DoubleLeft',\n 'VerticalLeft',\n 'VerticalRight',\n 'VerticalAlignTop',\n 'VerticalAlignMiddle',\n 'VerticalAlignBottom',\n 'Forward',\n 'Backward',\n 'Rollback',\n 'Enter',\n 'Retweet',\n 'Swap',\n 'SwapLeft',\n 'SwapRight',\n 'ArrowUp',\n 'ArrowDown',\n 'ArrowLeft',\n 'ArrowRight',\n 'PlayCircle',\n 'UpSquare',\n 'DownSquare',\n 'LeftSquare',\n 'RightSquare',\n 'Login',\n 'Logout',\n 'MenuFold',\n 'MenuUnfold',\n 'BorderBottom',\n 'BorderHorizontal',\n 'BorderInner',\n 'BorderOuter',\n 'BorderLeft',\n 'BorderRight',\n 'BorderTop',\n 'BorderVerticle',\n 'PicCenter',\n 'PicLeft',\n 'PicRight',\n 'RadiusBottomleft',\n 'RadiusBottomright',\n 'RadiusUpleft',\n 'RadiusUpright',\n 'Fullscreen',\n 'FullscreenExit',\n];\n\nconst suggestion = [\n 'Question',\n 'QuestionCircle',\n 'Plus',\n 'PlusCircle',\n 'Pause',\n 'PauseCircle',\n 'Minus',\n 'MinusCircle',\n 'PlusSquare',\n 'MinusSquare',\n 'Info',\n 'InfoCircle',\n 'Exclamation',\n 'ExclamationCircle',\n 'Close',\n 'CloseCircle',\n 'CloseSquare',\n 'Check',\n 'CheckCircle',\n 'CheckSquare',\n 'ClockCircle',\n 'Warning',\n 'IssuesClose',\n 'Stop',\n];\n\nconst editor = [\n 'Edit',\n 'Form',\n 'Copy',\n 'Scissor',\n 'Delete',\n 'Snippets',\n 'Diff',\n 'Highlight',\n 'AlignCenter',\n 'AlignLeft',\n 'AlignRight',\n 'BgColors',\n 'Bold',\n 'Italic',\n 'Underline',\n 'Strikethrough',\n 'Redo',\n 'Undo',\n 'ZoomIn',\n 'ZoomOut',\n 'FontColors',\n 'FontSize',\n 'LineHeight',\n 'Dash',\n 'SmallDash',\n 'SortAscending',\n 'SortDescending',\n 'Drag',\n 'OrderedList',\n 'UnorderedList',\n 'RadiusSetting',\n 'ColumnWidth',\n 'ColumnHeight',\n];\n\nconst data = [\n 'AreaChart',\n 'PieChart',\n 'BarChart',\n 'DotChart',\n 'LineChart',\n 'RadarChart',\n 'HeatMap',\n 'Fall',\n 'Rise',\n 'Stock',\n 'BoxPlot',\n 'Fund',\n 'Sliders',\n];\n\nconst logo = [\n 'Android',\n 'Apple',\n 'Windows',\n 'Ie',\n 'Chrome',\n 'Github',\n 'Aliwangwang',\n 'Dingding',\n 'WeiboSquare',\n 'WeiboCircle',\n 'TaobaoCircle',\n 'Html5',\n 'Weibo',\n 'Twitter',\n 'Wechat',\n 'WhatsApp',\n 'Youtube',\n 'AlipayCircle',\n 'Taobao',\n 'Dingtalk',\n 'Skype',\n 'Qq',\n 'MediumWorkmark',\n 'Gitlab',\n 'Medium',\n 'Linkedin',\n 'GooglePlus',\n 'Dropbox',\n 'Facebook',\n 'Codepen',\n 'CodeSandbox',\n 'CodeSandboxCircle',\n 'Amazon',\n 'Google',\n 'CodepenCircle',\n 'Alipay',\n 'AntDesign',\n 'AntCloud',\n 'Aliyun',\n 'Zhihu',\n 'Slack',\n 'SlackSquare',\n 'Behance',\n 'BehanceSquare',\n 'Dribbble',\n 'DribbbleSquare',\n 'Instagram',\n 'Yuque',\n 'Alibaba',\n 'Yahoo',\n 'Reddit',\n 'Sketch',\n 'WechatWork',\n 'OpenAI',\n 'Discord',\n 'X',\n 'Bilibili',\n 'Pinterest',\n 'TikTok',\n 'Spotify',\n 'Twitch',\n 'Linux',\n 'Java',\n 'JavaScript',\n 'Python',\n 'Ruby',\n 'DotNet',\n 'Kubernetes',\n 'Docker',\n 'Baidu',\n 'HarmonyOS',\n];\n\nconst datum = [...direction, ...suggestion, ...editor, ...data, ...logo];\n\nconst other = all.filter((n) => !datum.includes(n));\n\nexport const categories = {\n direction,\n suggestion,\n editor,\n data,\n logo,\n other,\n};\n\nexport default categories;\n\nexport type Categories = typeof categories;\nexport type CategoriesKeys = keyof Categories;\n" }, { "path": "packages/x/.dumi/theme/builtins/IconSearch/index.tsx", "content": "import { Skeleton } from 'antd';\nimport { createStyles } from 'antd-style';\nimport React, { Suspense } from 'react';\n\nconst IconSearch = React.lazy(() => import('./IconSearch'));\n\nconst useStyle = createStyles(({ token, css }) => ({\n searchWrapper: css`\n display: flex;\n gap: ${token.padding}px;\n > *:first-child {\n flex: 0 0 328px;\n }\n > *:last-child {\n flex: 1;\n }\n `,\n fallbackWrapper: css`\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n > * {\n flex: 0 0 15%;\n margin: ${token.marginXXS}px 0;\n }\n `,\n skeletonWrapper: css`\n text-align: center;\n\n > * {\n width: 100% !important;\n }\n `,\n}));\n\nconst IconSearchFallback: React.FC = () => {\n const { styles } = useStyle();\n\n return (\n <>\n
    \n \n \n
    \n \n
    \n {Array.from({ length: 24 }).map((_, index) => (\n
    \n \n
    \n ))}\n
    \n \n );\n};\n\nexport default () => (\n }>\n \n \n);\n" }, { "path": "packages/x/.dumi/theme/builtins/IconSearch/themeIcons.tsx", "content": "import type { CustomIconComponentProps } from '@ant-design/icons/es/components/Icon';\nimport * as React from 'react';\n\ntype CustomIconComponent = React.ComponentType<\n CustomIconComponentProps | React.SVGProps\n>;\n\nexport const FilledIcon: CustomIconComponent = (props) => {\n const path =\n 'M864 64H160C107 64 64 107 64 160v' +\n '704c0 53 43 96 96 96h704c53 0 96-43 96-96V16' +\n '0c0-53-43-96-96-96z';\n return (\n \n Filled Icon\n \n \n );\n};\n\nexport const OutlinedIcon: CustomIconComponent = (props) => {\n const path =\n 'M864 64H160C107 64 64 107 64 160v7' +\n '04c0 53 43 96 96 96h704c53 0 96-43 96-96V160c' +\n '0-53-43-96-96-96z m-12 800H172c-6.6 0-12-5.4-' +\n '12-12V172c0-6.6 5.4-12 12-12h680c6.6 0 12 5.4' +\n ' 12 12v680c0 6.6-5.4 12-12 12z';\n return (\n \n Outlined Icon\n \n \n );\n};\n\nexport const TwoToneIcon: CustomIconComponent = (props) => {\n const path =\n 'M16 512c0 273.932 222.066 496 496 49' +\n '6s496-222.068 496-496S785.932 16 512 16 16 238.' +\n '066 16 512z m496 368V144c203.41 0 368 164.622 3' +\n '68 368 0 203.41-164.622 368-368 368z';\n return (\n \n TwoTone Icon\n \n \n );\n};\n" }, { "path": "packages/x/.dumi/theme/builtins/ImagePreview/index.tsx", "content": "import toArray from '@rc-component/util/lib/Children/toArray';\nimport { Image } from 'antd';\nimport { clsx } from 'clsx';\nimport React from 'react';\n\ninterface ImagePreviewProps {\n className?: string;\n /** Do not show padding & background */\n pure?: boolean;\n}\n\nfunction isGood(className: string): boolean {\n return /\\bgood\\b/i.test(className);\n}\n\nfunction isBad(className: string): boolean {\n return /\\bbad\\b/i.test(className);\n}\n\nfunction isInline(className: string): boolean {\n return /\\binline\\b/i.test(className);\n}\n\nfunction isGoodBadImg(imgMeta: any): boolean {\n return imgMeta.isGood || imgMeta.isBad;\n}\n\nfunction isCompareImg(imgMeta: any): boolean {\n return isGoodBadImg(imgMeta) || imgMeta.inline;\n}\n\ninterface MateType {\n className: string;\n alt: string;\n description: string;\n src: string;\n isGood: boolean;\n isBad: boolean;\n inline: boolean;\n}\n\nconst ImagePreview: React.FC> = (props) => {\n const { children, className: rootClassName, pure } = props;\n const imgs = toArray(children).filter((ele) => ele.type === 'img');\n\n const imgsMeta = imgs.map>((img) => {\n const { alt, description, src, className } = img.props;\n return {\n className,\n alt,\n description,\n src,\n isGood: isGood(className),\n isBad: isBad(className),\n inline: isInline(className),\n };\n });\n\n const imagesList = imgsMeta.map((meta, index) => {\n const metaCopy = { ...meta };\n delete metaCopy.description;\n delete metaCopy.isGood;\n delete metaCopy.isBad;\n return (\n
    \n
    \n {meta.alt}\n
    \n
    \n );\n });\n\n const comparable =\n (imgs.length === 2 && imgsMeta.every(isCompareImg)) ||\n (imgs.length >= 2 && imgsMeta.every(isGoodBadImg));\n\n const style: React.CSSProperties = comparable\n ? { width: `${(100 / imgs.length).toFixed(3)}%` }\n : {};\n\n const hasCarousel = imgs.length > 1 && !comparable;\n\n const previewClassName = clsx(rootClassName, 'clearfix', 'preview-image-boxes', {\n 'preview-image-boxes-compare': comparable,\n 'preview-image-boxes-with-carousel': hasCarousel,\n });\n\n // ===================== Render =====================\n const imgWrapperCls = 'preview-image-wrapper';\n\n return (\n
    \n {!imgs.length && (\n \n {children}\n
    \n )}\n\n {imagesList.map((_, index) => {\n if (!comparable && index !== 0) {\n return null;\n }\n const coverMeta = imgsMeta[index];\n const imageWrapperClassName = clsx(imgWrapperCls, {\n good: coverMeta.isGood,\n bad: coverMeta.isBad,\n });\n\n return (\n
    \n
    \n {coverMeta.alt}\n
    \n
    {coverMeta.alt}
    \n \n
    \n );\n })}\n \n );\n};\n\nexport default ImagePreview;\n" }, { "path": "packages/x/.dumi/theme/builtins/InlinePopover/index.tsx", "content": "import { PictureOutlined } from '@ant-design/icons';\nimport { Image, Tooltip, Typography } from 'antd';\nimport React from 'react';\n\nimport useLocale from '../../../hooks/useLocale';\n\nconst locales = {\n cn: {\n tip: '预览',\n },\n en: {\n tip: 'Preview',\n },\n};\n\nexport interface InlinePopoverProps {\n previewURL?: string;\n}\n\n// 鼠标悬浮弹出 Popover 组件，用于帮助用户更快看到一些属性对应的预览效果\nconst InlinePopover: React.FC = (props) => {\n const { previewURL } = props;\n const [locale] = useLocale(locales);\n const [visible, setVisible] = React.useState(false);\n\n return (\n <>\n \n setVisible(true)}>\n \n \n \n\n {\n setVisible(value);\n },\n }}\n />\n \n );\n};\n\nexport default InlinePopover;\n" }, { "path": "packages/x/.dumi/theme/builtins/InstallDependencies/bun.tsx", "content": "import { createStyles, css } from 'antd-style';\nimport { clsx } from 'clsx';\nimport React from 'react';\n\ninterface IconProps {\n className?: string;\n style?: React.CSSProperties;\n}\n\nconst useStyle = createStyles(() => ({\n iconWrap: css`\n display: inline-flex;\n align-items: center;\n line-height: 0;\n text-align: center;\n vertical-align: -0.125em;\n `,\n}));\n\nconst BunIcon: React.FC = (props) => {\n const { className, style } = props;\n const { styles } = useStyle();\n return (\n \n \n Bun Logo\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default BunIcon;\n" }, { "path": "packages/x/.dumi/theme/builtins/InstallDependencies/index.tsx", "content": "import { XProvider } from '@ant-design/x';\nimport type { Tab } from '@rc-component/tabs/lib/interface';\nimport { Tabs } from 'antd';\nimport SourceCode from 'dumi/theme-default/builtins/SourceCode';\nimport React from 'react';\n\nimport BunLogo from './bun';\nimport NpmLogo from './npm';\nimport PnpmLogo from './pnpm';\nimport UtooLogo from './utoo';\nimport YarnLogo from './yarn';\n\ninterface InstallProps {\n npm?: string;\n yarn?: string;\n pnpm?: string;\n bun?: string;\n utoo?: string;\n}\n\nconst InstallDependencies: React.FC = (props) => {\n const { npm, yarn, pnpm, bun, utoo } = props;\n const items: Tab[] = [\n {\n key: 'npm',\n label: 'npm',\n children: npm ? {npm} : null,\n icon: ,\n },\n {\n key: 'yarn',\n label: 'yarn',\n children: yarn ? {yarn} : null,\n icon: ,\n },\n {\n key: 'pnpm',\n label: 'pnpm',\n children: pnpm ? {pnpm} : null,\n icon: ,\n },\n {\n key: 'bun',\n label: 'Bun',\n children: bun ? {bun} : null,\n icon: ,\n },\n {\n key: 'utoo',\n label: 'utoo',\n children: utoo ? {utoo} : null,\n icon: ,\n },\n ].filter((item) => item.children);\n\n return (\n \n \n \n );\n};\n\nexport default InstallDependencies;\n" }, { "path": "packages/x/.dumi/theme/builtins/InstallDependencies/npm.tsx", "content": "import { createStyles, css } from 'antd-style';\nimport { clsx } from 'clsx';\nimport React from 'react';\n\ninterface IconProps {\n className?: string;\n style?: React.CSSProperties;\n}\n\nconst useStyle = createStyles(() => ({\n iconWrap: css`\n display: inline-flex;\n align-items: center;\n line-height: 0;\n text-align: center;\n vertical-align: -0.125em;\n `,\n}));\n\nconst NpmIcon: React.FC = (props) => {\n const { className, style } = props;\n const { styles } = useStyle();\n return (\n \n \n npm icon\n \n \n \n );\n};\n\nexport default NpmIcon;\n" }, { "path": "packages/x/.dumi/theme/builtins/InstallDependencies/pnpm.tsx", "content": "import { createStyles, css } from 'antd-style';\nimport { clsx } from 'clsx';\nimport React from 'react';\n\ninterface IconProps {\n className?: string;\n style?: React.CSSProperties;\n}\n\nconst useStyle = createStyles(() => ({\n iconWrap: css`\n display: inline-flex;\n align-items: center;\n line-height: 0;\n text-align: center;\n vertical-align: -0.125em;\n `,\n}));\n\nconst PnpmIcon: React.FC = (props) => {\n const { className, style } = props;\n const { styles } = useStyle();\n return (\n \n \n pnpm icon\n \n \n \n );\n};\n\nexport default PnpmIcon;\n" }, { "path": "packages/x/.dumi/theme/builtins/InstallDependencies/utoo.tsx", "content": "import { createStyles, css } from 'antd-style';\nimport { clsx } from 'clsx';\nimport React from 'react';\n\ninterface IconProps {\n className?: string;\n style?: React.CSSProperties;\n}\n\nconst useStyle = createStyles(() => ({\n iconWrap: css`\n display: inline-flex;\n align-items: center;\n line-height: 0;\n text-align: center;\n vertical-align: -0.125em;\n `,\n}));\n\nconst UtooIcon: React.FC = (props) => {\n const { className, style } = props;\n const { styles } = useStyle();\n return (\n \n \n Utoo Logo\n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default UtooIcon;\n" }, { "path": "packages/x/.dumi/theme/builtins/InstallDependencies/yarn.tsx", "content": "import { createStyles, css } from 'antd-style';\nimport { clsx } from 'clsx';\nimport React from 'react';\n\ninterface IconProps {\n className?: string;\n style?: React.CSSProperties;\n}\n\nconst useStyle = createStyles(() => ({\n iconWrap: css`\n display: inline-flex;\n align-items: center;\n line-height: 0;\n text-align: center;\n vertical-align: -0.125em;\n `,\n}));\n\nconst YarnIcon: React.FC = (props) => {\n const { className, style } = props;\n const { styles } = useStyle();\n return (\n \n \n yarn icon\n \n \n \n );\n};\n\nexport default YarnIcon;\n" }, { "path": "packages/x/.dumi/theme/builtins/LocaleLink/index.tsx", "content": "import * as React from 'react';\n\nimport useLocale from '../../../hooks/useLocale';\nimport Link from '../../../theme/common/Link';\n\ntype LinkProps = Parameters[0];\n\nexport interface LocaleLinkProps extends LinkProps {\n sourceType: 'a' | 'Link';\n}\n\nconst LocaleLink: React.FC> = ({\n sourceType,\n to,\n ...props\n}) => {\n const Component = sourceType === 'a' ? 'a' : Link;\n\n const [, localeType] = useLocale();\n\n const localeTo = React.useMemo(() => {\n if (!to || typeof to !== 'string') {\n return to;\n }\n\n // Auto locale switch\n const cells = to.match(/(\\/[^#]*)(#.*)?/);\n if (cells) {\n let path = cells[1].replace(/\\/$/, '');\n const hash = cells[2] || '';\n\n if (localeType === 'cn' && !path.endsWith('-cn')) {\n path = `${path}-cn`;\n } else if (localeType === 'en' && path.endsWith('-cn')) {\n path = path.replace(/-cn$/, '');\n }\n\n return `${path}${hash}`;\n }\n\n return to;\n }, [to]);\n\n const linkProps: LocaleLinkProps = {\n ...props,\n } as LocaleLinkProps;\n\n if (to) {\n linkProps.to = localeTo;\n }\n\n return ;\n};\n\nexport default LocaleLink;\n" }, { "path": "packages/x/.dumi/theme/builtins/MarkdownPluginsOverView.tsx", "content": "import PluginMeta from '@ant-design/x-markdown/plugins/version/plugin-meta.json';\nimport { List } from 'antd';\nimport { createStyles, css } from 'antd-style';\nimport { Link } from 'dumi';\nimport React from 'react';\nimport useLocale from '../../hooks/useLocale';\n\ninterface PluginItem {\n plugin: string;\n [key: string]: any;\n}\n\nconst useStyle = createStyles(({ token }) => ({\n container: css`\n border-radius: ${token.borderRadiusLG}px;\n border: 1px solid ${token.colorSplit};\n `,\n item: css`\n a {\n width: 100%;\n }\n cursor: pointer;\n transition: all ${token.motionDurationMid} ${token.motionEaseInOut};\n &:hover {\n background-color: ${token.colorFillQuaternary};\n }\n `,\n itemMeta: css`\n padding-inline: ${token.padding}px};\n `,\n}));\n\nconst MarkdownPluginsOverView: React.FC = () => {\n // ======================== locale =========================\n const [_, lang] = useLocale();\n\n // ======================== style =========================\n\n const { styles } = useStyle();\n\n // ======================== info =========================\n const getInfo = (item: any) => {\n const description = lang === 'cn' ? item?.desc : item?.descEn;\n const hrefBase = item?.plugin?.toLowerCase();\n const href =\n lang === 'cn' ? `/x-markdowns/plugin-${hrefBase}-cn` : `/x-markdowns/plugin-${hrefBase}`;\n return {\n description,\n href,\n };\n };\n\n // ======================== Render ========================\n return (\n {\n const info = getInfo(item);\n return (\n \n \n \n \n \n );\n }}\n />\n );\n};\n\nexport default MarkdownPluginsOverView;\n" }, { "path": "packages/x/.dumi/theme/builtins/Palette/index.ts", "content": "import Palette from '../../common/Color/Palette';\n\nexport default Palette;\n" }, { "path": "packages/x/.dumi/theme/builtins/Previewer/CodeBlockButton.tsx", "content": "import { Tooltip } from 'antd';\nimport { FormattedMessage } from 'dumi';\nimport React, { Suspense } from 'react';\n\n// import { ping } from '../../utils';\n\n// let pingDeferrer: PromiseLike;\n\n// const codeBlockJs =\n// 'https://renderoffice.a' +\n// 'lipay' +\n// 'objects.com/p' +\n// '/yuyan/180020010001206410/parseFileData-v1.0.1.js';\n\n// function useShowCodeBlockButton() {\n// const [showCodeBlockButton, setShowCodeBlockButton] = useState(false);\n\n// useEffect(() => {\n// pingDeferrer ??= new Promise((resolve) => {\n// ping((status) => {\n// if (status !== 'timeout' && status !== 'error') {\n// // Async insert `codeBlockJs` into body end\n// const script = document.createElement('script');\n// script.src = codeBlockJs;\n// script.async = true;\n// document.body.appendChild(script);\n\n// return resolve(true);\n// }\n// return resolve(false);\n// });\n// });\n// pingDeferrer.then(setShowCodeBlockButton);\n// }, []);\n\n// return showCodeBlockButton;\n// }\n\ninterface CodeBlockButtonProps {\n title?: string;\n dependencies: Record;\n jsx: string;\n}\n\nconst CodeBlockButton: React.FC = ({ title, dependencies = {}, jsx }) => {\n const showCodeBlockButton = false; //useShowCodeBlockButton();\n\n const codeBlockPrefillConfig = {\n title: `${title} - antd@${dependencies.antd}`,\n js: `${\n /import React(\\D*)from 'react';/.test(jsx) ? '' : `import React from 'react';\\n`\n }import { createRoot } from 'react-dom/client';\\n${jsx.replace(\n /export default/,\n 'const ComponentDemo =',\n )}\\n\\ncreateRoot(mountNode).render();\\n`,\n css: '',\n json: JSON.stringify({ name: 'antd-demo', dependencies }, null, 2),\n };\n\n return showCodeBlockButton ? (\n }>\n
    \n {\n (window as any).openHituCodeBlock?.(JSON.stringify(codeBlockPrefillConfig));\n }}\n />\n
    \n     \n ) : null;\n};\n\nexport default (props: CodeBlockButtonProps) => (\n \n \n \n);\n" }, { "path": "packages/x/.dumi/theme/builtins/Previewer/CodePreviewer.tsx", "content": "import { LinkOutlined, ThunderboltOutlined, UpOutlined } from '@ant-design/icons';\nimport type { Project } from '@stackblitz/sdk';\nimport stackblitzSdk from '@stackblitz/sdk';\nimport { Alert, Badge, Flex, Tooltip } from 'antd';\nimport { createStyles, css } from 'antd-style';\nimport { clsx } from 'clsx';\nimport { FormattedMessage, useLiveDemo, useSiteData } from 'dumi';\nimport { pickBy } from 'lodash';\nimport LZString from 'lz-string';\n/* eslint-disable react-hooks-extra/no-direct-set-state-in-use-effect */\nimport React, { useEffect, useRef, useState } from 'react';\nimport useLocation from '../../../hooks/useLocation';\nimport BrowserFrame from '../../common/BrowserFrame';\nimport ClientOnly from '../../common/ClientOnly';\nimport CodePreview from '../../common/CodePreview';\nimport EditButton from '../../common/EditButton';\nimport CodePenIcon from '../../icons/CodePenIcon';\nimport CodeSandboxIcon from '../../icons/CodeSandboxIcon';\nimport ExternalLinkIcon from '../../icons/ExternalLinkIcon';\nimport DemoContext from '../../slots/DemoContext';\nimport LiveError from '../../slots/LiveError';\nimport SiteContext from '../../slots/SiteContext';\nimport CodeBlockButton from './CodeBlockButton';\nimport type { AntdPreviewerProps } from './Previewer';\n\nconst { ErrorBoundary } = Alert;\n\nfunction compress(string: string): string {\n return LZString.compressToBase64(string)\n .replace(/\\+/g, '-') // Convert '+' to '-'\n .replace(/\\//g, '_') // Convert '/' to '_'\n .replace(/=+$/, ''); // Remove ending '='\n}\n\nconst track = ({ type, demo }: { type: string; demo: string }) => {\n if (!window.gtag) {\n return;\n }\n window.gtag('event', 'demo', { event_category: type, event_label: demo });\n};\n\nconst useStyle = createStyles(({ token }) => {\n const { borderRadius } = token;\n return {\n stickyBox: css`\n position: sticky;\n bottom: 0;\n z-index: 1;\n `,\n codeHideBtn: css`\n width: 100%;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0 0 ${borderRadius}px ${borderRadius}px;\n border-top: 1px solid ${token.colorSplit};\n color: ${token.colorTextSecondary};\n transition: all ${token.motionDurationMid} ease-in-out;\n background-color: ${token.colorBgElevated};\n cursor: pointer;\n &:hover {\n color: ${token.colorPrimary};\n }\n span {\n margin-inline-end: ${token.marginXXS}px;\n }\n `,\n };\n});\n\nconst CodePreviewer: React.FC = (props) => {\n const {\n asset,\n expand,\n iframe,\n demoUrl,\n children,\n title,\n description,\n originDebug,\n jsx = '',\n style,\n compact,\n background,\n filename,\n version,\n simplify,\n clientOnly,\n pkgDependencyList,\n pkgPeerDependencies,\n } = props;\n\n const { codeType } = React.use(DemoContext);\n\n const { pkg } = useSiteData();\n const location = useLocation();\n\n const { styles } = useStyle();\n\n const entryName = 'index.tsx';\n const entryCode = asset.dependencies[entryName].value;\n const otherCodeObject = pickBy(asset.dependencies, (_, key) => key.startsWith('.'));\n\n const previewDemo = useRef(null);\n const demoContainer = useRef(null);\n const {\n node: liveDemoNode,\n error: liveDemoError,\n setSource: setLiveDemoSource,\n } = useLiveDemo(asset.id, {\n iframe: Boolean(iframe),\n containerRef: demoContainer as React.RefObject,\n });\n const anchorRef = useRef(null);\n const codeSandboxIconRef = useRef(null);\n const codepenIconRef = useRef(null);\n const [codeExpand, setCodeExpand] = useState(false);\n const { theme } = React.use(SiteContext);\n\n const { hash, pathname, search } = location;\n const docsOnlineUrl = `https://ant-design-x.antgroup.com${pathname}${search}#${asset.id}`;\n\n const [showOnlineUrl, setShowOnlineUrl] = useState(false);\n\n useEffect(() => {\n const regexp = /preview-(\\d+)-ant-design/; // matching PR preview addresses\n setShowOnlineUrl(\n process.env.NODE_ENV === 'development' || regexp.test(window.location.hostname),\n );\n }, []);\n\n const handleCodeExpand = (demo: string) => {\n setCodeExpand((prev) => !prev);\n track({ type: 'expand', demo });\n };\n\n useEffect(() => {\n if (asset.id === hash.slice(1)) {\n anchorRef.current?.click();\n }\n }, []);\n\n useEffect(() => {\n setCodeExpand(expand);\n }, [expand]);\n\n const mergedChildren = !iframe && clientOnly ? {children} : children;\n const demoUrlWithTheme = `${demoUrl}${theme.includes('dark') ? '?theme=dark' : ''}`;\n\n if (!previewDemo.current) {\n previewDemo.current = iframe ? (\n \n \n \n ) : (\n mergedChildren\n );\n }\n\n const codeBoxClass = clsx('code-box', {\n expand: codeExpand,\n 'code-box-debug': originDebug,\n 'code-box-simplify': simplify,\n });\n\n const localizedTitle = title;\n const highlightClass = clsx('highlight-wrapper', {\n 'highlight-wrapper-expand': codeExpand,\n });\n\n const html = `\n \n\n \n \n \n \n \n \n
    \n \n \n\n `;\n\n const tsconfig = {\n compilerOptions: {\n target: 'esnext',\n module: 'esnext',\n esModuleInterop: true,\n moduleResolution: 'node',\n jsx: 'react',\n jsxFactory: 'React.createElement',\n jsxFragmentFactory: 'React.Fragment',\n },\n };\n\n const suffix = codeType === 'tsx' ? 'tsx' : 'js';\n const antdVersion = pkgPeerDependencies.antd ?? '5.x';\n\n const dependencies = (jsx as string).split('\\n').reduce>(\n (acc, line) => {\n const matches = line.match(/import .+? from '(.+)';$/);\n if (matches?.[1]) {\n const paths = matches[1].split('/');\n const dep = paths[0].startsWith('@') ? `${paths[0]}/${paths[1]}` : paths[0];\n acc[dep] ??= pkgDependencyList[dep] ?? 'latest';\n }\n return acc;\n },\n { '@ant-design/x': pkg.version, antd: antdVersion },\n );\n\n dependencies['@ant-design/icons'] = 'latest';\n\n if (suffix === 'tsx') {\n dependencies['@types/react'] = '^18.0.0';\n dependencies['@types/react-dom'] = '^18.0.0';\n }\n\n dependencies.react = '^18.0.0';\n dependencies['react-dom'] = '^18.0.0';\n\n const codepenPrefillConfig = {\n title: `${localizedTitle} - @ant-design/x@${dependencies['@ant-design/x']}`,\n html,\n js: `const { createRoot } = ReactDOM;\\n${jsx\n .replace(/import\\s+(?:React,\\s+)?{(\\s+[^}]*\\s+)}\\s+from\\s+'react'/, `const { $1 } = React;`)\n .replace(/import\\s+{(\\s+[^}]*\\s+)}\\s+from\\s+'antd';/, 'const { $1 } = antd;')\n .replace(/import\\s+{(\\s+[^}]*\\s+)}\\s+from\\s+'@ant-design\\/x';/, 'const { $1 } = antdx;')\n .replace(/import\\s+{(\\s+[^}]*\\s+)}\\s+from\\s+'@ant-design\\/icons';/, 'const { $1 } = icons;')\n .replace(\"import moment from 'moment';\", '')\n .replace(\"import React from 'react';\", '')\n .replace(/import\\s+{\\s+(.*)\\s+}\\s+from\\s+'react-router';/, 'const { $1 } = ReactRouter;')\n .replace(\n /import\\s+{\\s+(.*)\\s+}\\s+from\\s+'react-router-dom';/,\n 'const { $1 } = ReactRouterDOM;',\n )\n .replace(/([A-Za-z]*)\\s+as\\s+([A-Za-z]*)/, '$1:$2')\n .replace(\n /export default/,\n 'const ComponentDemo =',\n )}\\n\\ncreateRoot(mountNode).render();\\n`,\n editors: '001',\n css: '',\n js_external: [\n 'react@18.x/umd/react.development.js',\n 'react-dom@18.x/umd/react-dom.development.js',\n 'dayjs@1/dayjs.min.js',\n `@ant-design/cssinjs@${pkgDependencyList['@ant-design/cssinjs']}/dist/umd/cssinjs.min.js`,\n `@ant-design/icons/dist/index.umd.js`,\n `antd@${antdVersion}/dist/antd-with-locales.min.js`,\n `@ant-design/x@${pkg.version}/dist/antdx.min.js`,\n ]\n .map((url) => `https://unpkg.com/${url}`)\n .join(';'),\n js_pre_processor: 'typescript',\n };\n\n // Reorder source code\n let parsedSourceCode = suffix === 'tsx' ? entryCode : jsx;\n let importReactContent = \"import React from 'react';\";\n const importReactReg = /import React(\\D*)from 'react';/;\n const matchImportReact = parsedSourceCode.match(importReactReg);\n if (matchImportReact) {\n [importReactContent] = matchImportReact;\n parsedSourceCode = parsedSourceCode.replace(importReactReg, '').trim();\n }\n const demoJsContent = `\n${importReactContent}\nimport './index.css';\n${parsedSourceCode}\n `.trim();\n const indexCssContent = (style || '')\n .trim()\n .replace(new RegExp(`#${asset.id}\\\\s*`, 'g'), '')\n .replace('', '')\n .replace('`,\n };\n });\n return styles.filter(Boolean);\n}\n\nexport const getHash = (str: string, length = 8) =>\n createHash('md5').update(str).digest('hex').slice(0, length);\n\n/**\n * extends dumi internal tech stack, for customize previewer props\n */\nclass AntdReactTechStack extends ReactTechStack {\n generatePreviewerProps(...[props, opts]: any) {\n props.pkgDependencyList = { ...devDependencies, ...dependencies };\n props.pkgPeerDependencies = peerDependencies;\n props.jsx ??= '';\n\n if (opts.type === 'code-block') {\n props.jsx = opts?.entryPointCode ? tsToJs(opts.entryPointCode) : '';\n }\n\n if (opts.type === 'external') {\n // try to find md file with the same name as the demo tsx file\n const arr = opts.mdAbsPath.split('.');\n const locale = arr[arr.length - 2];\n const mdPath = opts.fileAbsPath!.replace(/\\.\\w+$/, '.md');\n const md = fs.existsSync(mdPath) ? fs.readFileSync(mdPath, 'utf-8') : '';\n\n const codePath = opts.fileAbsPath!.replace(/\\.\\w+$/, '.tsx');\n const code = fs.existsSync(codePath) ? fs.readFileSync(codePath, 'utf-8') : '';\n\n props.jsx = tsToJs(code);\n\n if (md) {\n // extract description & css style from md file\n const blocks: Record = {};\n\n const lines = md.split('\\n');\n\n let blockName = '';\n let cacheList: string[] = [];\n\n // Get block name\n const getBlockName = (text: string) => {\n if (text.startsWith('## ')) {\n return text.replace('## ', '').trim();\n }\n\n if (text.startsWith('```css') || text.startsWith('\n \n\n \n {{reportContent}}\n\n \n \n\n" }, { "path": "packages/x/scripts/visual-regression/upload.js", "content": "/* eslint-disable no-restricted-syntax, no-console */\n// Attention: use all node builtin modules except `ali-oss`\n// Must keep our ak/sk safe\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nconst OSS = require('ali-oss');\nconst path = require('path');\nconst fs = require('fs');\nconst assert = require('assert');\n\n// node scripts/visual-regression/upload.js ./visualRegressionReport.tar.gz --ref=pr-id\n// node scripts/visual-regression/upload.js ./imageSnapshots.tar.gz --ref=master-commitId\n\nconst args = process.argv.slice(2);\nif (args.length < 2) {\n console.error('Usage: node scripts/visual-regression/upload.js --ref=');\n process.exit(1);\n}\n\nconst ALI_OSS_BUCKET = 'antd-visual-diff';\n\nfunction retry(promise, retries, delay) {\n return new Promise((resolve, reject) => {\n const attempt = () => {\n promise.then(resolve).catch((error) => {\n if (retries > 0) {\n setTimeout(() => {\n attempt();\n }, delay);\n retries--;\n } else {\n reject(error);\n }\n });\n };\n\n attempt();\n });\n}\n\n/**\n * Extract the tar file path and ref value from the cli arguments\n * @param {string[]} cliArgs\n */\nfunction parseArgs(cliArgs) {\n const filepath = cliArgs[0];\n let refValue = '';\n\n for (let i = 1; i < cliArgs.length; i++) {\n if (cliArgs[i].startsWith('--ref=')) {\n refValue = cliArgs[i].substring(6);\n break;\n }\n }\n\n assert(filepath, 'filepath is required');\n assert(refValue, 'refValue is required');\n\n return [filepath, refValue];\n}\n\nasync function walkDir(dirPath) {\n const fileList = [];\n\n const files = await fs.promises.readdir(dirPath);\n\n for (const file of files) {\n const filePath = path.join(dirPath, file);\n const fileStat = fs.statSync(filePath);\n\n if (fileStat.isDirectory()) {\n // Recursively call this func for subdirs\n // eslint-disable-next-line no-await-in-loop\n fileList.push(...(await walkDir(filePath)));\n } else {\n fileList.push(filePath);\n }\n }\n\n return fileList;\n}\n\n/**\n *\n * @param {import('ali-oss')} client\n * @param {*} filePath\n * @param {*} refValue\n */\nasync function uploadFile(client, filePath, refValue) {\n const headers = {\n // https://help.aliyun.com/zh/oss/user-guide/object-acl\n 'x-oss-object-acl': 'public-read',\n // https://help.aliyun.com/zh/oss/developer-reference/prevent-objects-from-being-overwritten-by-objects-that-have-the-same-names-3\n 'x-oss-forbid-overwrite': 'false',\n 'Content-Disposition': 'inline',\n };\n // Set content-type to allow individual preview of images\n if (path.extname(filePath) === '.png') {\n headers['Content-Type'] = 'image/png';\n }\n\n console.log('Uploading file: %s', filePath);\n try {\n const targetFilePath = path.relative(process.cwd(), filePath);\n const r1 = await client.put(`${refValue}/${targetFilePath}`, filePath, {\n headers,\n timeout: 60000 * 2,\n });\n console.log('Uploading file successfully: %s', r1.name);\n } catch (err) {\n console.error('Uploading file failed: %s', err);\n throw err;\n }\n}\n\nasync function boot() {\n const [filepath, refValue] = parseArgs(args);\n\n const fileOrFolderName = filepath;\n // check if exists\n const filePath = path.resolve(process.cwd(), fileOrFolderName);\n\n if (!fs.existsSync(filePath)) {\n console.error('File not exists: %s', filePath);\n process.exit(1);\n }\n\n const client = new OSS({\n endpoint: 'oss-cn-shanghai.aliyuncs.com',\n accessKeyId: process.env.ALI_OSS_AK_ID,\n accessKeySecret: process.env.ALI_OSS_AK_SECRET,\n bucket: ALI_OSS_BUCKET,\n });\n\n // if is a file then upload it directly\n const stat = fs.statSync(filePath);\n if (stat.isFile()) {\n const doUpload = uploadFile(client, filePath, refValue);\n try {\n await retry(doUpload, 3, 1000);\n } catch (err) {\n console.error('Uploading file failed after retry %s, error: %s', 3, err);\n process.exit(1);\n }\n return;\n }\n\n if (stat.isDirectory()) {\n const fileList = await walkDir(filePath);\n for (const file of fileList) {\n const doUpload = uploadFile(client, file, refValue);\n try {\n // eslint-disable-next-line no-await-in-loop\n await retry(doUpload, 3, 1000);\n } catch (err) {\n console.error('Uploading file failed after retry %s, error: %s', 3, err);\n process.exit(1);\n }\n }\n }\n}\n\nboot();\n" }, { "path": "packages/x/tests/__mocks__/@rc-component/trigger.tsx", "content": "import type { TriggerProps, TriggerRef } from '@rc-component/trigger';\nimport MockTrigger from '@rc-component/trigger/lib/mock';\nimport * as React from 'react';\n\nimport { TriggerMockContext } from '../../shared/demoTestContext';\n\nlet OriginTrigger = jest.requireActual('@rc-component/trigger');\nOriginTrigger = OriginTrigger.default ?? OriginTrigger;\n\nconst ForwardTrigger = React.forwardRef((props, ref) => {\n const context = React.useContext(TriggerMockContext);\n\n const mergedPopupVisible = context?.popupVisible ?? props.popupVisible;\n (global as any).triggerProps = props;\n\n const mergedProps: TriggerProps = {\n ...props,\n popupVisible: mergedPopupVisible,\n };\n\n if (context?.mock === false) {\n return ;\n }\n return ;\n});\n\nexport default ForwardTrigger;\n" }, { "path": "packages/x/tests/__mocks__/@rc-component/virtual-list.ts", "content": "import List from '@rc-component/virtual-list/lib/mock';\n\nexport default List;\n" }, { "path": "packages/x/tests/__mocks__/copy-to-clipboard.ts", "content": "const copy: ((str?: string, options?: object) => void) & {\n lastStr?: string;\n lastOptions?: object;\n} = (str = '', options = {}) => {\n copy.lastStr = str;\n copy.lastOptions = options;\n};\n\nexport default copy;\n" }, { "path": "packages/x/tests/__mocks__/mermaid.js", "content": "// Mock mermaid to avoid syntax issues in tests\nconst mermaid = {\n initialize: jest.fn(),\n render: jest.fn().mockResolvedValue({\n svg: 'Mocked Mermaid Diagram',\n }),\n parse: jest.fn().mockResolvedValue(true),\n};\n\nmodule.exports = mermaid;\n" }, { "path": "packages/x/tests/__snapshots__/changelog.test.ts.snap", "content": "// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing\n\nexports[`component changelog match snapshot misc changelog snapshot 1`] = `\n[\n \" - 🤖 导出 \\`MappingAlgorithm\\` 作为 Design Token 主题算法的类型。[#43953](https://github.com/ant-design/ant-design/pull/43953)\",\n \"- 🔥 组件 ComponentToken 支持配置 \\`algorithm\\` 参数，添加配置即可像全局 Token 一样由部分修改的 token 计算派生 token 的值并用于组件样式中。[#43810](https://github.com/ant-design/ant-design/pull/43810) [@MadCcc](https://github.com/MadCcc)\",\n \"- 💄 \\`@ant-design/icons\\` 优化了 CloseCircleFilled / CloseSquareFilled / CloseOutlined / CloseCircleOutlined / CloseSquareOutlined / ExportOutlined / ImportOutlined 等图标的设计。[824500](https://github.com/ant-design/ant-design-icons/commit/824500349894a87562f033dbdc5e3c5d301a2f5c)\",\n \"- 💄 修复和其他使用 \\`@ant-design/cssinjs\\` 的组件库混合使用，antd 的样式总是会插入在最前面，以避免加载顺序导致的样式覆盖问题。[#43847](https://github.com/ant-design/ant-design/pull/43847)\",\n \"- 🛠 解决 vite、rollup、meteor、microbundle 等构建工具中遇到的循环依赖问题，并增加相关的检测。[#42750](https://github.com/ant-design/ant-design/pull/42750)，感谢 [@jrr997](https://github.com/jrr997)、[@kiner-tang](https://github.com/kiner-tang) 和 [@MuxinFeng](https://github.com/MuxinFeng) 的贡献。\",\n \"- 🐞 杂项：修复样式特性支持检测时部分浏览器因为未重绘导致出现滚动条的问题。[#43358](https://github.com/ant-design/ant-design/pull/43358) [@LeeeeeeM](https://github.com/LeeeeeeM)\",\n \"- 💄 Design Token 将 \\`colorLink\\` 添加至 seed token 中, \\`colorLinkHover\\` 和 \\`colorLinkActive\\` 将会由 \\`colorLink\\` 计算得出。[#43183](https://github.com/ant-design/ant-design/pull/43183) [@MadCcc](https://github.com/MadCcc)\",\n \"- 🆕 Design Token 新增静态方法 \\`getDesignToken\\` 用于获取完整的主题 token。[#42723](https://github.com/ant-design/ant-design/pull/42723) [@MadCcc](https://github.com/MadCcc)\",\n \"- 💄 修复部分全局 Design Token 无法覆盖组件样式的问题。[#42535](https://github.com/ant-design/ant-design/pull/42535) [@MadCcc](https://github.com/MadCcc)\",\n \"- 🇱🇹 为 \\`lt_LT\\` 添加缺失的部分文案。[#42664](https://github.com/ant-design/ant-design/pull/42664) [@Digital-512](https://github.com/Digital-512)\",\n \"- 🛠 全局移除 \\`rc-util/lib/Dom/addEventListener\\` 引入的 \\`addEventListener\\` 方法，用原生代替。[#42464](https://github.com/ant-design/ant-design/pull/42464) [@li-jia-nan](https://github.com/li-jia-nan)\",\n \"- 🛠 优化 @ant-design/icons 的 bundle 体积大小。修复 TwoTone 类的图标色为 5.0 的新主色。[#42443](https://github.com/ant-design/ant-design/pull/42443)\",\n \"- 🌐 添加 \\`mn_MN\\` 中缺失的翻译。[#42512](https://github.com/ant-design/ant-design/pull/42512) [@ariunbatb](https://github.com/ariunbatb)\",\n \"- 🤖 组件 ComponentToken 名称规范化。[#42184](https://github.com/ant-design/ant-design/pull/42184)\",\n \"- 🐞 修复 \\`@ant-design/cssinjs\\` 中 CSS 属性值为 \\`undefined\\` 时 cssinjs 报错的问题。[#41896](https://github.com/ant-design/ant-design/pull/41896)\",\n \"- 🐞 杂项：箭头元素兼容旧版本不支持 \\`clip-path: path()\\` 的浏览器。 [#41872](https://github.com/ant-design/ant-design/pull/41872)\",\n \"- 🇩🇪 修复德语本地化文案。[#41780](https://github.com/ant-design/ant-design/pull/41780) [@aaarichter](https://github.com/aaarichter)\",\n \"- 🇩🇪 补充 \\`de_DE\\` 遗漏的国际化。[#41747](https://github.com/ant-design/ant-design/pull/41747) [@eldarcodes](https://github.com/eldarcodes)\",\n \"- 🛠 使用 \\`useMemo\\` 重构部分组件代码。[#41533](https://github.com/ant-design/ant-design/pull/41533) [#41550](https://github.com/ant-design/ant-design/pull/41550) [@li-jia-nan](https://github.com/li-jia-nan)\",\n \" - 🇻🇳 修复越南语本地化文案。[#41320](https://github.com/ant-design/ant-design/pull/41320) [@trongtai37](https://github.com/trongtai37) [#41345](https://github.com/ant-design/ant-design/pull/41345) [@duypham90](https://github.com/duypham90)\",\n \" - 🇲🇲 添加缅甸语本地化文案。[#41366](https://github.com/ant-design/ant-design/pull/41366) [@enson0131](https://github.com/enson0131)\",\n \" - 🇸🇪 完善 \\`sv_SE\\` 语言缺失内容。[#41424](https://github.com/ant-design/ant-design/pull/41424) [@dhalenok](https://github.com/dhalenok)\",\n \" - 🤖 优化 Design Token 的类型提示和说明。[#41297](https://github.com/ant-design/ant-design/pull/41297) [@arvinxx](https://github.com/arvinxx)\",\n \"- 🌐 更新韩语国际化，添加国际化阿姆哈拉语。[#41103](https://github.com/ant-design/ant-design/pull/41103) [@li-jia-nan](https://github.com/li-jia-nan)\",\n \"- 🛠 重命名 token 中的预设颜色，如 \\`blue-1\\` 变为 \\`blue1\\`，废弃原有的 token。[#41071](https://github.com/ant-design/ant-design/pull/41071)\",\n \"- 💄 Design Token 为组件聚焦时的 \\`outline\\` 提供新的 AliasToken \\`lineWidthFocus\\`。[#40840](https://github.com/ant-design/ant-design/pull/40840)\",\n \"- 🐞 杂项：修复部分组件箭头形状问题。[#40971](https://github.com/ant-design/ant-design/pull/40971)\",\n \"- 🛠 重写 \\`useLocale\\` 方法，对外暴露 \\`localeCode\\`。[#40884](https://github.com/ant-design/ant-design/pull/40884) [@li-jia-nan](https://github.com/li-jia-nan)\",\n \"- 🛠 重构：使用 \\`useLocale\\` 替换 LocaleReceiver 组件，并删除 LocaleReceiver 组件。[#40870](https://github.com/ant-design/ant-design/pull/40870) [@li-jia-nan](https://github.com/li-jia-nan)\",\n \"- 💄 Design Token 修改组件聚焦下的 \\`outline\\` 为默认 \\`4px\\`。[#40839](https://github.com/ant-design/ant-design/pull/40839)\",\n \"- 🇮🇷 增加了伊朗本地化。[#40895](https://github.com/ant-design/ant-design/pull/40895) [@majidsadr](https://github.com/majidsadr)\",\n \" - 🇰🇷 更新韩国本地化文案。[#40716](https://github.com/ant-design/ant-design/pull/40716) [@owjs3901](https://github.com/owjs3901)\",\n \" - 🇷🇺/🇺🇦 补全 \\`ru_RU\\` 和 \\`uk_UA\\` 文案。[#40656](https://github.com/ant-design/ant-design/pull/40656) [@eldarcodes](https://github.com/eldarcodes)\",\n \"- 🛠 重构水波纹视效，以支持多个水波纹同时触发了。[#39705](https://github.com/ant-design/ant-design/pull/39705) [@li-jia-nan](https://github.com/li-jia-nan)\",\n \"- 💄 Design Token 优化 \\`boxShadow\\` token 分级。[#40516](https://github.com/ant-design/ant-design/pull/40516)\",\n \" - 🤖 杂项：新增 \\`Breakpoint\\` \\`ThemeConfig\\` \\`GlobalToken\\` 类型导出。[#40508](https://github.com/ant-design/ant-design/pull/40508) [@Kamahl19](https://github.com/Kamahl19)\",\n \" - 🇮🇳 补全 \\`ta_IN\\` 文案。[#39936](https://github.com/ant-design/ant-design/pull/39936) [@KIRUBASHANKAR26](https://github.com/KIRUBASHANKAR26)\",\n \"- 💄 Design Token 优化 focus \\`outline\\` 计算逻辑，替换 \\`lineWidth\\` 为 \\`lineWidthBold\\`。[#40291](https://github.com/ant-design/ant-design/pull/40291) [@simonpfish](https://github.com/simonpfish)\",\n \"- 💄 杂项：重写部分组件样式以兼容部分对 \\`:not\\` 支持不完全的旧版浏览器。[#40264](https://github.com/ant-design/ant-design/pull/40264)\",\n \"- 🌐 修复 \\`pt_BR\\` 缺失的国际化。[#40270](https://github.com/ant-design/ant-design/pull/40270) [@rafaelncarvalho](https://github.com/rafaelncarvalho)\",\n \"- 🐞 修复 locale 文件丢失的问题。[#40116](https://github.com/ant-design/ant-design/pull/40116)\",\n \"- 🐞 修复 \\`rc-motion\\` 部分组件动画闪烁的问题。[react-component/motion#39](https://github.com/react-component/motion/pull/39)\",\n \"- 🌐 增加缺失的泰米尔语翻译。[#39936](https://github.com/ant-design/ant-design/pull/39936) [@KIRUBASHANKAR26](https://github.com/KIRUBASHANKAR26)\",\n \"- 📖 官网主题编辑器添加主题上传功能。[#39621](https://github.com/ant-design/ant-design/pull/39621) [@BoyYangzai](https://github.com/BoyYangzai)\",\n \"- 📦 在构建流程中去掉对 IE 等旧版本浏览器的支持以减少包体积。[#38779](https://github.com/ant-design/ant-design/pull/38779)\",\n \"- 🐞 Design Token 修复组件字体错误问题。[#39806](https://github.com/ant-design/ant-design/pull/39806)\",\n \" - 🤖 修复部分 Design Token 缺少类型提示的问题。[#39754](https://github.com/ant-design/ant-design/pull/39754)\",\n \"- 🛠 简化 lodash 方法引用。[#39599](https://github.com/ant-design/ant-design/pull/39599) [#39602](https://github.com/ant-design/ant-design/pull/39602)\",\n \" - 🇧🇪 补全 \\`fr_BE\\` 文案。[#39415](https://github.com/ant-design/ant-design/pull/39415) [@azro352](https://github.com/azro352)\",\n \" - 🇨🇦 补全 \\`fr_CA\\` 文案。[#39416](https://github.com/ant-design/ant-design/pull/39416) [@azro352](https://github.com/azro352)\",\n \" - 🇪🇸 补全 \\`eu_ES\\` 文案。[#39371](https://github.com/ant-design/ant-design/pull/39371) [@Ian-Inizias](https://github.com/Ian-Inizias)\",\n \"- 🌐 修正 \\`vi_VN\\` 国际化描述。[#39279](https://github.com/ant-design/ant-design/pull/39279) [@nghiepdev](https://github.com/nghiepdev)\",\n \"- 🌐 修正 \\`he_IL\\` 国际化描述。[#39280](https://github.com/ant-design/ant-design/pull/39280) [@Ran-Sagy](https://github.com/Ran-Sagy)\",\n \"- 🐞 修复 \\`@ant-design/cssinjs\\` dev 下动态 hashId 导致的 ssr 注水失败的问题。[#39069](https://github.com/ant-design/ant-design/pull/39069)\",\n \"- 💄 Design Token 优化错误色的默认算法。[#38933](https://github.com/ant-design/ant-design/pull/38933)\",\n \"- 💄 修复 RTL 模式下的样式问题。[#38829](https://github.com/ant-design/ant-design/pull/38829) [@Wxh16144](https://github.com/Wxh16144)\",\n \"- 🐞 修复 \\`reset.css\\` 不会被打包的问题。[#38956](https://github.com/ant-design/ant-design/pull/38956) [@passerV](https://github.com/passerV)\",\n \"- 🛠 清除残留 \\`Moment.js\\` 依赖。[#38762](https://github.com/ant-design/ant-design/pull/38762)\",\n \"- 🛠 修复外部暴露类 \\`CompoundedComponent\\` 的组件的类型报错。[#38666](https://github.com/ant-design/ant-design/pull/38666) [@wangcch](https://github.com/wangcch)\",\n \"- 🛠 重新添加 \\`lib\\` 产物。[#38832](https://github.com/ant-design/ant-design/pull/38832) [@chunsch](https://github.com/chunsch)\",\n \" - 🤖 Export Design Token \\`MappingAlgorithm\\` as type of theme algorithm. [#43953](https://github.com/ant-design/ant-design/pull/43953)\",\n \"- 🔥 Component Token support \\`algorithm\\` to calculate derivative tokens same as global. [#43810](https://github.com/ant-design/ant-design/pull/43810) [@MadCcc](https://github.com/MadCcc)\",\n \"- 🐞 Optimized the import method for \\`@ant-design/icons\\` to avoid importing all icons. [#43915](https://github.com/ant-design/ant-design/pull/43915) [@ssxenon01](https://github.com/ssxenon01)\",\n \"- 💄 Optimized \\`@ant-design/icons\\` the design of icons including CloseCircleFilled/CloseSquareFilled/CloseOutlined/CloseCircleOutlined/CloseSquareOutlined/ExportOutlined/ImportOutlined. [824500](https://github.com/ant-design/ant-design-icons/commit/824500349894a87562f033dbdc5e3c5d301a2f5c)\",\n \"- 💄 Fix when using with other component libraries that use \\`@ant-design/cssinjs\\`, antd styles will always be inserted at the top to avoid style override issues caused by loading order. [#43847](https://github.com/ant-design/ant-design/pull/43847)\",\n \"- 🛠 Resolved Circular dependency issue in vite, rollup, meteor and microbundle. [#42750](https://github.com/ant-design/ant-design/pull/42750). Thanks to [@jrr997](https://github.com/jrr997), [@kiner-tang](https://github.com/kiner-tang) and [@MuxinFeng](https://github.com/MuxinFeng) for their contributions.\",\n \"- 🐞 MISC: Fixed an issue where some browsers had scroll bars that were not redrawn when style feature support was detected. [#43358](https://github.com/ant-design/ant-design/pull/43358) [@LeeeeeeM](https://github.com/LeeeeeeM)\",\n \"- 💄 Design Token add \\`colorLink\\` to the seed token, and \\`colorLinkHover\\` and \\`colorLinkActive\\` will be calculated from colorLink. [#43183](https://github.com/ant-design/ant-design/pull/43183) [@MadCcc](https://github.com/MadCcc)\",\n \" - 🛠 Improve BreadCrumb behavior when receiving a null title. [#43099](https://github.com/ant-design/ant-design/pull/43099) [@Asanio06](https://github.com/Asanio06)\",\n \"- 🆕 Add static function \\`getDesignToken\\` to access full Design Token. [#42723](https://github.com/ant-design/ant-design/pull/42723) [@MadCcc](https://github.com/MadCcc)\",\n \" - 🛠 Migrate Timenline less variables. [#42491](https://github.com/ant-design/ant-design/pull/42491) [@jrr997](https://github.com/jrr997)\",\n \"- 💄 Fix Design Token that global token should be able to override component style. [#42535](https://github.com/ant-design/ant-design/pull/42535) [@MadCcc](https://github.com/MadCcc)\",\n \"- 🇱🇹 Add missing i18n for \\`lt_LT\\` locale. [#42664](https://github.com/ant-design/ant-design/pull/42664) [@Digital-512](https://github.com/Digital-512)\",\n \"- 🛠 Remove \\`addEventListener\\` from \\`rc-util/lib/Dom/addEventListener\\` and use native \\`addEventListener\\` instead. [#42464](https://github.com/ant-design/ant-design/pull/42464) [@li-jia-nan](https://github.com/li-jia-nan)\",\n \"- 🛠 Reduce 1KB @ant-design/icons bundle size. Fix TwoTone icon color to primary color of 5.0. [#42443](https://github.com/ant-design/ant-design/pull/42443)\",\n \"- 🌐 Add missing translation for \\`mn_MN\\`. [#42512](https://github.com/ant-design/ant-design/pull/42512) [@ariunbatb](https://github.com/ariunbatb)\",\n \"- 🤖 Component Token name canonicalization. [#42184](https://github.com/ant-design/ant-design/pull/42184)\",\n \"- 🐞 Fix \\`@ant-design/cssinjs\\` that cssinjs may crash if CSS value is \\`undefined\\`. [#41896](https://github.com/ant-design/ant-design/pull/41896)\",\n \"- 🐞 MISC: Arrow element support more old browsers which do not support \\`clip-path: path()\\`. [#41872](https://github.com/ant-design/ant-design/pull/41872)\",\n \"- 🇩🇪 Fix typo in German locale. [#41780](https://github.com/ant-design/ant-design/pull/41780) [@aaarichter](https://github.com/aaarichter)\",\n \"- 🇩🇪 Add missing translations for \\`de_DE\\`. [#41747](https://github.com/ant-design/ant-design/pull/41747) [@eldarcodes](https://github.com/eldarcodes)\",\n \"- 🛠 Refactor some components by using \\`useMemo\\`. [#41533](https://github.com/ant-design/ant-design/pull/41533) [#41550](https://github.com/ant-design/ant-design/pull/41550) [@li-jia-nan](https://github.com/li-jia-nan)\",\n \" - 🇲🇲 Added Burmese locale. [#41366](https://github.com/ant-design/ant-design/pull/41366) [@enson0131](https://github.com/enson0131)\",\n \" - 🇻🇳 Fix Vietnamese locale text. [#41320](https://github.com/ant-design/ant-design/pull/41320) [@trongtai37](https://github.com/trongtai37) [#41345](https://github.com/ant-design/ant-design/pull/41345) [@duypham90](https://github.com/duypham90)\",\n \" - 🇸🇪 Add the missing content of \\`sv_SE\\` language. [#41424](https://github.com/ant-design/ant-design/pull/41424) [@dhalenok](https://github.com/dhalenok)\",\n \" - 🤖 Improve Design Token most alias token meta info. [#41297](https://github.com/ant-design/ant-design/pull/41297) [@arvinxx](https://github.com/arvinxx)\",\n \"- 🌐 Update ko_KR、Added Amharic Language. [#41103](https://github.com/ant-design/ant-design/pull/41103) [@li-jia-nan](https://github.com/li-jia-nan)\",\n \"- 🛠 Rename preset colors in token, .e.g \\`blue-1\\` to \\`blue1\\`, and deprecate tokens before. [#41071](https://github.com/ant-design/ant-design/pull/41071)\",\n \"- 💄 Provide Design Token new AliasToken \\`lineWidthFocus\\` for \\`outline-width\\` of focused component. [#40840](https://github.com/ant-design/ant-design/pull/40840)\",\n \"- 🐞 MISC: Fix arrow shape in some components. [#40971](https://github.com/ant-design/ant-design/pull/40971)\",\n \"- 🛠 Rewrote the \\`useLocale\\` method and exposed \\`localeCode\\` to the public. [#40884](https://github.com/ant-design/ant-design/pull/40884) [@li-jia-nan](https://github.com/li-jia-nan)\",\n \"- 🛠 Refactored: replaced the LocaleReceiver component with \\`useLocale\\` and removed the LocaleReceiver component. [#40870](https://github.com/ant-design/ant-design/pull/40870) [@li-jia-nan](https://github.com/li-jia-nan)\",\n \"- 💄 Changed Design Token the component's focus \\`outline\\` to the default \\`4px\\`.[#40839](https://github.com/ant-design/ant-design/pull/40839)\",\n \"- 🇮🇷 Added Iranian localization. [#40895](https://github.com/ant-design/ant-design/pull/40895) [@majidsadr](https://github.com/majidsadr)\",\n \" - 🇰🇷 Update ko_KR locale. [#40716](https://github.com/ant-design/ant-design/pull/40716) [@owjs3901](https://github.com/owjs3901)\",\n \" - 🇷🇺/🇺🇦 add missing translations for ru_RU and uk_UA. [#40656](https://github.com/ant-design/ant-design/pull/40656) [@eldarcodes](https://github.com/eldarcodes)\",\n \"- 🛠 Refactored the water ripple visual effect to trigger multiple water ripples at the same time. [#39705](https://github.com/ant-design/ant-design/pull/39705) [@li-jia-nan](https://github.com/li-jia-nan)\",\n \"- 💄 Optimize Design Token \\`boxShadow\\` tokens. [#40516](https://github.com/ant-design/ant-design/pull/40516)\",\n \" - 🤖 MISC: Add \\`Breakpoint\\` \\`ThmeConfig\\` \\`GlobalToken\\` type export. [#40508](https://github.com/ant-design/ant-design/pull/40508) [@Kamahl19](https://github.com/Kamahl19)\",\n \" - 🇮🇳 Add \\`ta_IN\\` local. [#39936](https://github.com/ant-design/ant-design/pull/39936) [@KIRUBASHANKAR26](https://github.com/KIRUBASHANKAR26)\",\n \"- 💄 Optimize Design Token calculation logic of focus \\`outline\\`, replace \\`lineWidth\\` with \\`lineWidthBold\\`. [#40291](https://github.com/ant-design/ant-design/pull/40291) [@simonpfish](https://github.com/simonpfish)\",\n \"- 💄 MISC: Rewrite part component style to compatible the browser that not support concat \\`:not\\` selector. [#40264](https://github.com/ant-design/ant-design/pull/40264)\",\n \"- 🌐 Fix missing translation for \\`pt_BR\\`. [#40270](https://github.com/ant-design/ant-design/pull/40270) [@rafaelncarvalho](https://github.com/rafaelncarvalho)\",\n \"- 🐞 Fix missing locale file. [#40116](https://github.com/ant-design/ant-design/pull/40116)\",\n \"- 🐞 Fix \\`rc-motion\\` animation flicking in some components. [react-component/motion#39](https://github.com/react-component/motion/pull/39)\",\n \"- 🌐 Add missing ta_IN translations. [#39936](https://github.com/ant-design/ant-design/pull/39936) [@KIRUBASHANKAR26](https://github.com/KIRUBASHANKAR26)\",\n \"- 📖 Theme Editor supports uploading themes. [#39621](https://github.com/ant-design/ant-design/pull/39621) [@BoyYangzai](https://github.com/BoyYangzai)\",\n \"- 📦 Remove IE and other legacy browsers from browserslist to reduce bundle size.[#38779](https://github.com/ant-design/ant-design/pull/38779)\",\n \"- 🐞 Fix Design Token wrong \\`font-family\\` of components. [#39806](https://github.com/ant-design/ant-design/pull/39806)\",\n \" - 🤖 Fix missing type defination for Design Token. [#39754](https://github.com/ant-design/ant-design/pull/39754)\",\n \"- 🛠 Simplified lodash method introduction. [#39599](https://github.com/ant-design/ant-design/pull/39599) [#39602](https://github.com/ant-design/ant-design/pull/39602)\",\n \" - 🇧🇪 Add \\`fr_BE\\` locale. [#39415](https://github.com/ant-design/ant-design/pull/39415) [@azro352](https://github.com/azro352)\",\n \" - 🇨🇦 Add \\`fr_CA\\` locale. [#39416](https://github.com/ant-design/ant-design/pull/39416) [@azro352](https://github.com/azro352)\",\n \" - 🇪🇸 Add \\`eu_ES\\` locale. [#39371](https://github.com/ant-design/ant-design/pull/39371) [@Ian-Inizias](https://github.com/Ian-Inizias)\",\n \"- 🌐 Fix \\`vi_VN\\` i18n mistake. [#39279](https://github.com/ant-design/ant-design/pull/39279) [@nghiepdev](https://github.com/nghiepdev)\",\n \"- 🌐 Fix \\`he_IL\\` i18n mistake. [#39280](https://github.com/ant-design/ant-design/pull/39280) [@Ran-Sagy](https://github.com/Ran-Sagy)\",\n \"- 🐞 Fix \\`@ant-design/cssinjs\\` ssr warning in dev mode caused by dynamic hashId. [#39069](https://github.com/ant-design/ant-design/pull/39069)\",\n \"- 💄 Optimize Design Token default algorithm for error color. [#38933](https://github.com/ant-design/ant-design/pull/38933)\",\n \"- 💄 Optimize the style issue in RTL mode. [#38829](https://github.com/ant-design/ant-design/pull/38829) [@Wxh16144](https://github.com/Wxh16144)\",\n \"- 🐞 Fix that \\`dist/reset.css\\` may be dropped in production. [#38956](https://github.com/ant-design/ant-design/pull/38956) [@passerV](https://github.com/passerV)\",\n \"- 🛠 Remove \\`Moment.js\\` dependency. [#38762](https://github.com/ant-design/ant-design/pull/38762)\",\n \"- 🛠 Fix \\`CompoundedComponent\\` ts error. [#38666](https://github.com/ant-design/ant-design/pull/38666) [@wangcch](https://github.com/wangcch)\",\n \"- 🛠 Rollback \\`lib\\` in package. [#38832](https://github.com/ant-design/ant-design/pull/38832) [@chunsch](https://github.com/chunsch)\",\n]\n`;\n" }, { "path": "packages/x/tests/__snapshots__/index.test.ts.snap", "content": "// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing\n\nexports[`antd dist files exports modules correctly 1`] = `\n[\n \"Actions\",\n \"Attachments\",\n \"Bubble\",\n \"CodeHighlighter\",\n \"Conversations\",\n \"FileCard\",\n \"Folder\",\n \"Mermaid\",\n \"Prompts\",\n \"Sender\",\n \"SenderSwitch\",\n \"Sources\",\n \"Suggestion\",\n \"Think\",\n \"ThoughtChain\",\n \"Welcome\",\n \"XProvider\",\n \"notification\",\n \"version\",\n]\n`;\n" }, { "path": "packages/x/tests/changelog.test.ts", "content": "/* eslint-disable global-require */\nimport path from 'path';\n\nconst testDist = process.env.LIB_DIR === 'dist' || process.env.CHANGELOG_TEST;\n\n// This test is used to ensure changelog includes related component\ndescribe('component changelog match snapshot', () => {\n const testFn = testDist ? it : it.skip;\n\n testFn('misc changelog snapshot', () => {\n const changelog = require(path.join(process.cwd(), '.dumi', 'preset', 'misc-changelog.json'));\n expect(changelog).toMatchSnapshot();\n });\n});\n" }, { "path": "packages/x/tests/dekko/dist.test.ts", "content": "import chalk from 'chalk';\nimport $ from 'dekko';\n\n$('dist').isDirectory().hasFile('antdx.js').hasFile('antdx.min.js').hasFile('antdx.min.js.map');\n\n// eslint-disable-next-line no-console\nconsole.log(chalk.green('✨ `dist` directory is valid.'));\n" }, { "path": "packages/x/tests/dekko/index.test.ts", "content": "import './dist.test';\nimport './lib.test';\n// Not applied yet\n// import './use-client.test';\n" }, { "path": "packages/x/tests/dekko/lib.test.ts", "content": "import chalk from 'chalk';\nimport $ from 'dekko';\n\n$('lib').isDirectory().hasFile('index.js').hasFile('index.d.ts');\n\n$('lib/*')\n .filter(\n (filename: string) =>\n !filename.endsWith('index.js') &&\n !filename.endsWith('index.d.ts') &&\n !filename.endsWith('.map'),\n )\n .isDirectory()\n .filter(\n (filename: string) =>\n !filename.endsWith('style') &&\n !filename.endsWith('_util') &&\n !filename.endsWith('locale') &&\n !filename.endsWith('theme'),\n )\n .hasFile('index.js')\n .hasFile('index.d.ts');\n\n// eslint-disable-next-line no-console\nconsole.log(chalk.green('✨ `lib` directory is valid.'));\n" }, { "path": "packages/x/tests/dekko/use-client.test.ts", "content": "import fs from 'node:fs';\nimport chalk from 'chalk';\nimport $ from 'dekko';\n\nconst includeUseClient = (filename: string) =>\n fs.readFileSync(filename).toString().includes('\"use client\"');\n\nif (process.env.LIB_DIR === 'dist') {\n $('dist/*')\n .isFile()\n .assert(\"doesn't contain use client\", (filename: string) => !includeUseClient(filename));\n} else {\n $('{es,lib}/index.js')\n .isFile()\n .assert('contain use client', (filename: string) => includeUseClient(filename));\n\n $('{es,lib}/*/index.js')\n .isFile()\n .assert('contain use client', (filename: string) => includeUseClient(filename));\n\n // check tsx files\n $('{es,lib}/typography/*.js')\n .isFile()\n .assert('contain use client', (filename: string) => includeUseClient(filename));\n\n $('{es,lib}/typography/Base/*.js')\n .isFile()\n .filter((filename: string) => !filename.endsWith('/util.js'))\n .assert('contain use client', (filename: string) => includeUseClient(filename));\n}\n\n// eslint-disable-next-line no-console\nconsole.log(chalk.green('✨ use client passed!'));\n" }, { "path": "packages/x/tests/index.html", "content": "\n\n \n \n \n Amazing Antd\n \n \n\n \n
    \n \n\n" }, { "path": "packages/x/tests/index.test.ts", "content": "/* eslint-disable global-require */\nimport { version as packageVersion } from '../package.json';\n\nconst testDist = process.env.LIB_DIR === 'dist';\nconst testDistMin = process.env.LIB_DIR === 'dist-min';\n\ndescribe('antd dist files', () => {\n // https://github.com/ant-design/ant-design/issues/1638\n // https://github.com/ant-design/ant-design/issues/1968\n it('exports modules correctly', () => {\n let antd;\n if (testDist) {\n antd = require('../dist/antd');\n } else if (testDistMin) {\n antd = require('../dist/antd.min');\n } else {\n antd = require('../components');\n }\n expect(Object.keys(antd)).toMatchSnapshot();\n });\n\n // https://github.com/ant-design/ant-design/issues/1970\n // https://github.com/ant-design/ant-design/issues/1804\n if (testDist) {\n it('antd.js should export version', () => {\n const antd = require('../dist/antd');\n expect(antd).toBeTruthy();\n expect(antd.version).toBe(packageVersion);\n });\n\n it('antd.min.js should export version', () => {\n const antd = require('../dist/antd.min');\n expect(antd).toBeTruthy();\n expect(antd.version).toBe(packageVersion);\n });\n }\n});\n" }, { "path": "packages/x/tests/setup-streams.ts", "content": "import type { DOMWindow } from 'jsdom';\nimport {\n ReadableStream,\n ReadableStreamDefaultReader,\n TransformStream,\n WritableStream,\n} from 'web-streams-polyfill';\n\n/**\n * https://github.com/oven-sh/bun/issues/5648\n *\n * @description Polyfill for TextDecoderStream\n *\n * Copyright 2016 Google Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * Polyfill for TextEncoderStream and TextDecoderStream\n *\n * Modified by Sukka (https://skk.moe) to increase compatibility and performance with Bun.\n */\nexport class PolyfillTextDecoderStream extends TransformStream {\n readonly encoding: string;\n readonly fatal: boolean;\n readonly ignoreBOM: boolean;\n\n constructor(\n encoding = 'utf-8',\n { fatal = false, ignoreBOM = false }: ConstructorParameters[1] = {},\n ) {\n const decoder = new TextDecoder(encoding, { fatal, ignoreBOM });\n super({\n transform(chunk: Uint8Array, controller: TransformStreamDefaultController) {\n const decoded = decoder.decode(chunk, { stream: true });\n if (decoded.length > 0) {\n controller.enqueue(decoded);\n }\n },\n flush(controller: TransformStreamDefaultController) {\n // If {fatal: false} is in options (the default), then the final call to\n // decode() can produce extra output (usually the unicode replacement\n // character 0xFFFD). When fatal is true, this call is just used for its\n // side-effect of throwing a TypeError exception if the input is\n // incomplete.\n const output = decoder.decode();\n if (output.length > 0) {\n controller.enqueue(output);\n }\n },\n });\n\n this.encoding = encoding;\n this.fatal = fatal;\n this.ignoreBOM = ignoreBOM;\n }\n}\n\nexport function setupStreamsPolyfill(win: Window | DOMWindow) {\n Object.defineProperty(win, 'ReadableStream', {\n writable: true,\n value: ReadableStream,\n });\n\n Object.defineProperty(win, 'TransformStream', {\n writable: true,\n value: TransformStream,\n });\n\n Object.defineProperty(win, 'WritableStream', {\n writable: true,\n value: WritableStream,\n });\n\n Object.defineProperty(win, 'ReadableStreamDefaultReader', {\n writable: true,\n value: ReadableStreamDefaultReader,\n });\n\n Object.defineProperty(win, 'TextDecoderStream', {\n writable: true,\n value: PolyfillTextDecoderStream,\n });\n}\n" }, { "path": "packages/x/tests/setup.ts", "content": "/* eslint-disable no-console */\n\nimport type { DOMWindow } from 'jsdom';\nimport util from 'util';\nimport { setupStreamsPolyfill } from './setup-streams';\n\nconst originConsoleErr = console.error;\n\nconst ignoreWarns = ['validateDOMNesting', 'on an unmounted component', 'not wrapped in act'];\n\n// Hack off React warning to avoid too large log in CI.\nconsole.error = (...args) => {\n const str = args.join('').replace(/\\n/g, '');\n if (ignoreWarns.every((warn) => !str.includes(warn))) {\n originConsoleErr(...args);\n }\n};\n\ntype Writeable = { -readonly [P in keyof T]: T[P] };\n\n// This function can not move to external file since jest setup not support\nexport function fillWindowEnv(window: Window | DOMWindow) {\n const win = window as Writeable & typeof globalThis;\n\n win.resizeTo = (width, height) => {\n win.innerWidth = width || win.innerWidth;\n win.innerHeight = height || win.innerHeight;\n win.dispatchEvent(new Event('resize'));\n };\n win.scrollTo = () => {};\n // ref: https://github.com/ant-design/ant-design/issues/18774\n if (!win.matchMedia) {\n Object.defineProperty(win, 'matchMedia', {\n writable: true,\n configurable: true,\n value: jest.fn((query) => ({\n matches: query.includes('max-width'),\n addListener: jest.fn(),\n removeListener: jest.fn(),\n })),\n });\n }\n\n // Fix css-animation or @rc-component/motion deps on these\n // https://github.com/react-component/motion/blob/9c04ef1a210a4f3246c9becba6e33ea945e00669/src/util/motion.ts#L27-L35\n // https://github.com/yiminghe/css-animation/blob/a5986d73fd7dfce75665337f39b91483d63a4c8c/src/Event.js#L44\n win.AnimationEvent = win.AnimationEvent || win.Event;\n win.TransitionEvent = win.TransitionEvent || win.Event;\n\n // ref: https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom\n // ref: https://github.com/jsdom/jsdom/issues/2524\n Object.defineProperty(win, 'TextEncoder', {\n writable: true,\n value: util.TextEncoder,\n });\n Object.defineProperty(win, 'TextDecoder', {\n writable: true,\n value: util.TextDecoder,\n });\n\n setupStreamsPolyfill(win);\n}\n\n/* eslint-disable global-require */\nif (typeof window !== 'undefined') {\n fillWindowEnv(window);\n}\n\nglobal.requestAnimationFrame = global.requestAnimationFrame || global.setTimeout;\nglobal.cancelAnimationFrame = global.cancelAnimationFrame || global.clearTimeout;\n" }, { "path": "packages/x/tests/setupAfterEnv.ts", "content": "import '@testing-library/jest-dom';\n\nimport { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';\nimport { defaultConfig as defaultConfigES } from 'antd/es/theme/internal';\nimport { defaultConfig as defaultConfigLib } from 'antd/lib/theme/internal';\nimport { toHaveNoViolations } from 'jest-axe';\nimport jsdom from 'jsdom';\nimport format, { plugins } from 'pretty-format';\n\n// Mock `scrollTo` since jsdom do not support it\nspyElementPrototypes(HTMLElement, {\n scrollTo: jest.fn(),\n});\n\n// Not use dynamic hashed for test env since version will change hash dynamically.\ndefaultConfigLib.hashed = false;\ndefaultConfigES.hashed = false;\n\nif (process.env.LIB_DIR === 'dist') {\n jest.mock('antd', () => jest.requireActual('../dist/antd'));\n} else if (process.env.LIB_DIR === 'dist-min') {\n jest.mock('antd', () => jest.requireActual('../dist/antd.min'));\n} else if (process.env.LIB_DIR === 'es') {\n jest.mock('antd', () => jest.requireActual('../es'));\n jest.mock('../es/theme/internal', () => {\n const esTheme = jest.requireActual('../es/theme/internal');\n if (esTheme.defaultConfig) {\n esTheme.defaultConfig.hashed = false;\n }\n\n return esTheme;\n });\n}\n\nfunction cleanup(node: HTMLElement) {\n const childList = Array.from(node.childNodes);\n node.innerHTML = '';\n childList.forEach((child) => {\n if (!(child instanceof Text)) {\n node.appendChild(cleanup(child as any));\n } else if (child.textContent) {\n node.appendChild(child);\n }\n });\n return node;\n}\n\nfunction formatHTML(nodes: any) {\n let cloneNodes: any;\n if (Array.isArray(nodes) || nodes instanceof HTMLCollection || nodes instanceof NodeList) {\n cloneNodes = Array.from(nodes).map((node) => cleanup(node.cloneNode(true) as any));\n } else {\n cloneNodes = cleanup(nodes.cloneNode(true));\n }\n\n const htmlContent = format(cloneNodes, {\n plugins: [plugins.DOMCollection, plugins.DOMElement],\n });\n\n const filtered = htmlContent\n .split('\\n')\n .filter((line) => line.trim())\n .join('\\n');\n\n return filtered;\n}\n\n/**\n * React 17 & 18 will have different behavior in some special cases:\n *\n * React 17:\n *\n * ```html\n * Hello World \n * ```\n *\n * React 18:\n *\n * ```html\n * Hello World \n * ```\n *\n * These diff is nothing important in front end but will break in snapshot diff.\n */\nexpect.addSnapshotSerializer({\n test: (element) =>\n typeof HTMLElement !== 'undefined' &&\n (element instanceof HTMLElement ||\n element instanceof DocumentFragment ||\n element instanceof HTMLCollection ||\n (Array.isArray(element) && element[0] instanceof HTMLElement)),\n print: (element) => formatHTML(element),\n});\n\n/** Demo Test only accept render as SSR to make sure align with both `server` & `client` side */\nexpect.addSnapshotSerializer({\n test: (node) => node && typeof node === 'object' && node.type === 'demo' && node.html,\n // @ts-ignore\n print: ({ html }) => {\n const { JSDOM } = jsdom;\n const { document } = new JSDOM().window;\n document.body.innerHTML = html;\n\n const children = Array.from(document.body.childNodes);\n\n // Clean up `data-reactroot` since React 18 do not have this\n // @ts-ignore\n children.forEach((ele: HTMLElement) => {\n if (typeof ele.removeAttribute === 'function') {\n ele.removeAttribute('data-reactroot');\n }\n });\n\n return formatHTML(children.length > 1 ? children : children[0]);\n },\n});\n\nexpect.extend(toHaveNoViolations);\n" }, { "path": "packages/x/tests/shared/__snapshots__/demoTest.tsx.snap", "content": "// Bun Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`renders components/x-request/demo/basic.tsx correctly 1`] = `\n{\n \"html\": \"
    Request Log
    Status-
    Update Times0
    \",\n \"type\": \"demo\",\n}\n`;\n\nexports[`renders components/x-request/demo/requestParams.tsx correctly 1`] = `\n{\n \"html\": \"
    Request Log
    Status-
    Update Times0
    \",\n \"type\": \"demo\",\n}\n`;\n\nexports[`renders components/x-request/demo/model.tsx correctly 1`] = `\n{\n \"html\": \"
    Request Logrequest undefined
    Status-
    Update Times0
    \",\n \"type\": \"demo\",\n}\n`;\n\nexports[`renders components/x-request/demo/request-options.tsx correctly 1`] = `\n{\n \"html\": \"

    baseURL: https://api.example.com/chat/v1

    model: gpt-3.5-turbo

    dangerouslyApiKey: Bearer sk-your-dangerouslyApiKey

    Request Log
    Status-
    Update Times0
    \",\n \"type\": \"demo\",\n}\n`;\n\nexports[`renders components/x-request/demo/custom-transformer.tsx correctly 1`] = `\n{\n \"html\": \"
    Mock Custom Protocol - Log
    \",\n \"type\": \"demo\",\n}\n`;\n" }, { "path": "packages/x/tests/shared/accessibilityTest.tsx", "content": "import { render } from '@testing-library/react';\nimport { axe } from 'jest-axe';\nimport React from 'react';\n\n// eslint-disable-next-line jest/no-export\nexport default function accessibilityTest(Component: React.ComponentType) {\n describe(`accessibility`, () => {\n it(`component does not have any violations`, async () => {\n jest.useRealTimers();\n const { container } = render();\n const results = await axe(container);\n expect(results).toHaveNoViolations();\n });\n });\n}\n" }, { "path": "packages/x/tests/shared/demoTest.tsx", "content": "import { createCache, StyleProvider } from '@ant-design/cssinjs';\nimport { XProvider } from '@ant-design/x';\nimport { globSync } from 'glob';\nimport kebabCase from 'lodash/kebabCase';\nimport path from 'path';\nimport React from 'react';\nimport { renderToString } from 'react-dom/server';\n\nimport { resetWarned } from '../../components/_util/warning';\nimport { render } from '../utils';\nimport { TriggerMockContext } from './demoTestContext';\nimport { excludeWarning, isSafeWarning } from './excludeWarning';\nimport rootPropsTest from './rootPropsTest';\n\nexport { rootPropsTest };\n\nrequire('isomorphic-fetch');\n\nexport type Options = {\n skip?: boolean | string[];\n testingLib?: boolean;\n testRootProps?: false | object;\n /**\n * Not check component `displayName`, check path only\n */\n nameCheckPathOnly?: boolean;\n};\n\nexport function baseTest(doInject: boolean, component: string, options: Options = {}) {\n const files = globSync(`./components/${component}/demo/*.tsx`).filter(\n (file) => !file.includes('_semantic'),\n );\n files.forEach((file) => {\n // to compatible windows path\n file = file.split(path.sep).join('/');\n const testMethod =\n options.skip === true ||\n (Array.isArray(options.skip) && options.skip.some((c) => file.includes(c)))\n ? test.skip\n : test;\n\n // function doTest(name: string, openTrigger = false) {\n testMethod(\n doInject ? `renders ${file} extend context correctly` : `renders ${file} correctly`,\n () => {\n resetWarned();\n\n const errSpy = excludeWarning();\n\n Date.now = jest.fn(() => new Date('2016-11-22').getTime());\n jest.useFakeTimers().setSystemTime(new Date('2016-11-22'));\n\n let Demo = require(`../../${file}`).default;\n // Inject Trigger status unless skipped\n Demo = typeof Demo === 'function' ? : Demo;\n if (doInject) {\n Demo = (\n \n {Demo}\n \n );\n }\n\n // Inject cssinjs cache to avoid create `;\n }\n\n await page.evaluate(\n (innerHTML: string, ssrStyle: string, triggerClassName?: string) => {\n const root = document.querySelector('#root')!;\n root.innerHTML = innerHTML;\n const head = document.querySelector('head')!;\n head.innerHTML += ssrStyle;\n // Inject open trigger with block style\n if (triggerClassName) {\n document.querySelectorAll(`.${triggerClassName}`).forEach((node) => {\n const blockStart = document.createElement('div');\n const blockEnd = document.createElement('div');\n node.parentNode?.insertBefore(blockStart, node);\n node.parentNode?.insertBefore(blockEnd, node.nextSibling);\n });\n }\n },\n html,\n styleStr,\n openTriggerClassName || '',\n );\n\n if (!options.onlyViewport) {\n // Get scroll height of the rendered page and set viewport\n const bodyHeight = await page.evaluate(() => document.body.scrollHeight);\n await page.setViewport({ width: 800, height: bodyHeight });\n }\n\n const image = await page.screenshot({\n fullPage: !options.onlyViewport,\n });\n\n await fse.writeFile(path.join(snapshotPath, `${identifier}${suffix}.png`), image);\n\n MockDate.reset();\n page.off('request', onRequestHandle);\n });\n }\n\n Object.entries(themes).forEach(([key, algorithm]) => {\n test(\n `component image screenshot should correct ${key}`,\n `.${key}`,\n \n {component}\n
    ,\n );\n test(\n `[CSS Var] component image screenshot should correct ${key}`,\n `.${key}.css-var`,\n \n {component}\n ,\n );\n });\n}\n\ntype Options = {\n skip?: boolean | string[];\n onlyViewport?: boolean | string[];\n /** Use SSR render instead. Only used when the third part deps component */\n ssr?: boolean;\n /** Open Trigger to check the popup render */\n openTriggerClassName?: string;\n};\n\n// eslint-disable-next-line jest/no-export\nexport function imageDemoTest(component: string, options: Options = {}) {\n let describeMethod = options.skip === true ? describe.skip : describe;\n const files = globSync(`./components/${component}/demo/*.tsx`).filter(\n (file) => !file.includes('_semantic'),\n );\n\n files.forEach((file) => {\n if (Array.isArray(options.skip) && options.skip.some((c) => file.endsWith(c))) {\n describeMethod = describe.skip;\n } else {\n describeMethod = describe;\n }\n describeMethod(`Test ${file} image`, () => {\n // eslint-disable-next-line global-require\n let Demo = require(`../../${file}`).default;\n if (typeof Demo === 'function') {\n Demo = ;\n }\n imageTest(Demo, `${component}-${path.basename(file, '.tsx')}`, {\n onlyViewport:\n options.onlyViewport === true ||\n (Array.isArray(options.onlyViewport) &&\n options.onlyViewport.some((c) => file.endsWith(c))),\n ssr: options.ssr,\n openTriggerClassName: options.openTriggerClassName,\n });\n });\n });\n}\n" }, { "path": "packages/x/tests/shared/mountTest.tsx", "content": "import React from 'react';\n\nimport { render } from '../utils';\n\n// eslint-disable-next-line jest/no-export\nexport default function mountTest(Component: React.ComponentType) {\n describe(`mount and unmount`, () => {\n // https://github.com/ant-design/ant-design/pull/18441\n it(`component could be updated and unmounted without errors`, () => {\n const { unmount, rerender } = render();\n expect(() => {\n rerender();\n unmount();\n }).not.toThrow();\n });\n });\n}\n" }, { "path": "packages/x/tests/shared/rootPropsTest.tsx", "content": "/* eslint-disable global-require, jest/no-export */\nimport React from 'react';\n\nimport { XProvider } from '../../components';\n\nimport { render, waitFakeTimer } from '../utils';\nimport { TriggerMockContext } from './demoTestContext';\n\nexport interface Options {\n name?: string;\n findRootElements?: (\n container: HTMLElement,\n ) => Element | HTMLCollection | Element[] | NodeListOf;\n expectCount?: number;\n beforeRender?: () => void;\n afterRender?: (container: HTMLElement) => void;\n props?: object;\n}\n\nfunction isSingleNode(node: any): node is Element {\n return node && node instanceof HTMLElement;\n}\n\nexport default function rootPropsTest(\n component: string | string[],\n customizeRender?: (\n component: React.ComponentType & Record,\n props: any,\n ) => React.ReactNode,\n options?: Options,\n) {\n const componentNames = Array.isArray(component) ? component : [component];\n const [componentName, subComponentName] = componentNames;\n\n const Component = require(`../../components/${componentName}`).default as any;\n const name = options?.name ? `(${options.name})` : '';\n\n describe(`RootProps${name}`, () => {\n let passed = false;\n\n beforeEach(() => {\n passed = false;\n jest.useFakeTimers();\n document.body.innerHTML = '';\n });\n\n afterEach(() => {\n if (!passed || process.env.DEBUG === 'true') {\n // eslint-disable-next-line no-console\n console.log(document.body.innerHTML);\n }\n jest.useRealTimers();\n });\n\n it(['rootClassName', subComponentName].filter((v) => v).join(' '), async () => {\n const rootClassName = 'TEST_ROOT_CLS';\n\n if (options?.beforeRender) {\n options?.beforeRender();\n }\n\n const Demo = () => {\n const holderRef = React.useRef(null);\n const [show, setShow] = React.useState(false);\n React.useEffect(() => {\n setShow(true);\n }, []);\n\n const sharedProps = {\n value: 1,\n rootClassName,\n open: true,\n ...options?.props,\n };\n\n const node = customizeRender ? (\n customizeRender(Component, sharedProps)\n ) : (\n \n );\n\n const triggerContext = React.useMemo(() => ({ mock: false }), []);\n\n return (\n \n
    \n {show && holderRef.current!}>{node}}\n
    \n     \n );\n };\n\n const { container } = render();\n await waitFakeTimer();\n\n if (options?.afterRender) {\n options?.afterRender(container);\n }\n\n await waitFakeTimer();\n\n const holder = container.querySelector('#holder')!;\n let customizeFindNodes = options?.findRootElements?.(holder);\n if (isSingleNode(customizeFindNodes)) {\n customizeFindNodes = [customizeFindNodes];\n }\n const childList = Array.from(customizeFindNodes ?? holder.children);\n\n expect(childList.length).toBeGreaterThan(0);\n if (options?.expectCount) {\n expect(childList).toHaveLength(options.expectCount);\n }\n\n childList.forEach((ele) => {\n expect(ele).toHaveClass(rootClassName);\n\n // `rootClassName` should not show in children element\n expect(ele.querySelector(`.${rootClassName}`)).toBeFalsy();\n });\n\n passed = true;\n });\n });\n}\n" }, { "path": "packages/x/tests/shared/rtlTest.tsx", "content": "import dayjs from 'dayjs';\nimport MockDate from 'mockdate';\nimport React from 'react';\nimport { XProvider } from '../../components';\nimport { render } from '../utils';\n\nconst rtlTest = (Component: React.ComponentType, mockDate = false) => {\n describe('rtl render', () => {\n it('component should be rendered correctly in RTL direction', () => {\n if (mockDate) {\n MockDate.set(dayjs('2000-09-28').valueOf());\n }\n const { container } = render(\n \n \n ,\n );\n expect(container.firstChild).toMatchSnapshot();\n if (mockDate) {\n MockDate.reset();\n }\n });\n });\n};\n\n// eslint-disable-next-line jest/no-export\nexport default rtlTest;\n" }, { "path": "packages/x/tests/shared/themeTest.tsx", "content": "import type { ThemeConfig } from 'antd';\nimport React from 'react';\nimport { XProvider } from '../../components';\nimport { render } from '../utils';\n\nconst themeOptions: ThemeConfig = {\n components: {\n Button: {\n fontWeight: 600,\n },\n },\n};\n\nconst themeTest = (Component: React.ComponentType) => {\n describe('test theme', () => {\n it('component should be rendered correctly when configuring the theme.components', () => {\n const { container } = render(\n \n \n ,\n );\n expect(container.firstChild).toMatchSnapshot();\n });\n });\n};\n\nexport default themeTest;\n" }, { "path": "packages/x/tests/utils.tsx", "content": "import { _rs as onEsResize } from '@rc-component/resize-observer/es/utils/observerUtil';\nimport { _rs as onLibResize } from '@rc-component/resize-observer/lib/utils/observerUtil';\nimport type { RenderOptions, RenderResult } from '@testing-library/react';\nimport { act, render } from '@testing-library/react';\nimport MockDate from 'mockdate';\nimport type { ReactElement } from 'react';\nimport React, { createRef, StrictMode } from 'react';\n\nexport function assertsExist(item?: T): asserts item is T {\n expect(item).not.toBeUndefined();\n expect(item).not.toBeNull();\n}\n\nexport function setMockDate(dateString = '2017-09-18T03:30:07.795') {\n MockDate.set(dateString);\n}\n\nexport function resetMockDate() {\n MockDate.reset();\n}\n\nconst globalTimeout = global.setTimeout;\n\nexport const sleep = async (timeout = 0) => {\n await act(async () => {\n await new Promise((resolve) => {\n globalTimeout(resolve, timeout);\n });\n });\n};\n\nconst customRender = (ui: ReactElement, options?: Omit): RenderResult => {\n try {\n return render(ui, { wrapper: StrictMode, ...options });\n } catch (error) {\n console.error(error);\n throw error;\n }\n};\n\nexport function renderHook(func: () => T): { result: React.RefObject } {\n const result = createRef();\n\n const Demo: React.FC = () => {\n (result as any).current = func();\n\n return null;\n };\n\n customRender();\n\n return { result };\n}\n\n/**\n * Pure render like `@testing-lib` render which will not wrap with StrictMode.\n *\n * Please only use with render times times of memo usage case.\n */\nconst pureRender = render;\n\nexport { pureRender, customRender as render };\n\nexport const triggerResize = (target: Element) => {\n const originGetBoundingClientRect = target.getBoundingClientRect;\n\n target.getBoundingClientRect = () => ({ width: 510, height: 903 }) as DOMRect;\n\n act(() => {\n onLibResize([{ target } as ResizeObserverEntry]);\n onEsResize([{ target } as ResizeObserverEntry]);\n });\n\n target.getBoundingClientRect = originGetBoundingClientRect;\n};\n\n/**\n * Wait for a time delay. Will wait `advanceTime * times` ms.\n *\n * @param advanceTime Default 1000\n * @param times Default 20\n */\nexport async function waitFakeTimer(advanceTime = 1000, times = 20) {\n for (let i = 0; i < times; i += 1) {\n // eslint-disable-next-line no-await-in-loop\n await act(async () => {\n await Promise.resolve();\n\n if (advanceTime > 0) {\n jest.advanceTimersByTime(advanceTime);\n } else {\n jest.runAllTimers();\n }\n });\n }\n}\n\nexport * from '@testing-library/react';\n" }, { "path": "packages/x/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.base.json\",\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"@@/*\": [\".dumi/tmp/*\"],\n \"@ant-design/x\": [\"components/index.ts\"],\n \"@ant-design/x/es/*\": [\"components/*\"],\n \"@ant-design/x/lib/*\": [\"components/*\"],\n \"@ant-design/x/locale/*\": [\"components/locale/*\"],\n \"@ant-design/x-markdown\": [\"../x-markdown/src/index.ts\"],\n \"@ant-design/x-markdown/es/*\": [\"../x-markdown/src/*\"],\n \"@ant-design/x-markdown/lib/*\": [\"../x-markdown/src/*\"],\n \"@ant-design/x-markdown/plugins/*\": [\"../x-markdown/src/plugins/*\"],\n \"@ant-design/x-sdk\": [\"../x-sdk/src/index.ts\"],\n \"@ant-design/x-skill/*\": [\"../x-skill/src/*\"],\n \"@ant-design/x-sdk/es/*\": [\"../x-sdk/src/*\"],\n \"@ant-design/x-sdk/lib/*\": [\"../x-sdk/src/*\"]\n }\n },\n \"include\": [\".dumirc.ts\", \"**/*\"]\n}\n" }, { "path": "packages/x/typings/custom-typings.d.ts", "content": "// https://github.com/facebook/create-react-app/blob/f09d3d3a52c1b938cecc977c2bbc0942ea0a7e70/packages/react-scripts/lib/react-app.d.ts#L42-L49\ndeclare module '*.svg' {\n import type * as React from 'react';\n\n export const ReactComponent: React.FC>;\n\n const src: string;\n export default src;\n}\n\ndeclare module '@rc-component/util*';\n\ndeclare module 'jsonml-to-react-element';\n\ndeclare module 'jsonml.js/*';\n\ndeclare module '*.json' {\n const value: any;\n export const version: string;\n export default value;\n}\n\ndeclare module '@npmcli/run-script' {\n export default function runScript(options: {\n [key: string]: string | string[] | boolean | NodeJS.ProcessEnv;\n }): Promise;\n}\n\ndeclare module '@microflash/rehype-figure';\n\ndeclare module 'dekko';\n" }, { "path": "packages/x/typings/index.d.ts", "content": "/// \n" }, { "path": "packages/x/typings/jest.d.ts", "content": "declare namespace jest {\n interface Matchers {\n toHaveNoViolations(): R;\n }\n}\n" }, { "path": "packages/x-markdown/.fatherrc.ts", "content": "import { codecovWebpackPlugin } from '@codecov/webpack-plugin';\nimport DuplicatePackageCheckerPlugin from '@madccc/duplicate-package-checker-webpack-plugin';\nimport CircularDependencyPlugin from 'circular-dependency-plugin';\nimport { defineConfig } from 'father';\nimport path from 'path';\n\nclass CodecovWebpackPlugin {\n private options;\n constructor(options = {}) {\n this.options = options;\n }\n apply(compiler: any) {\n return codecovWebpackPlugin(this.options).apply(compiler);\n }\n}\n\nexport default defineConfig({\n plugins: ['@rc-component/father-plugin'],\n targets: {\n chrome: 80,\n },\n esm: {\n input: 'src',\n ignores: ['**/__tests__/**'],\n overrides: {\n 'src/plugins': {\n output: 'plugins',\n },\n 'src/themes': {\n output: 'themes',\n },\n },\n },\n cjs: {\n ignores: ['**/__tests__/**'],\n input: 'src',\n },\n umd: {\n entry: {\n 'src/index.ts': {\n name: 'XMarkdown',\n sourcemap: true,\n generateUnminified: true,\n output: {\n path: 'dist/',\n filename: 'x-markdown',\n },\n },\n 'src/plugins/Latex/index.ts': {\n name: 'Latex',\n sourcemap: true,\n generateUnminified: true,\n output: {\n path: 'dist/plugins',\n filename: 'latex',\n },\n },\n },\n bundler: 'webpack',\n // bundler: 'utoopack',\n concatenateModules: true,\n rootPath: path.resolve(__dirname, '../../'),\n externals: {\n react: {\n root: 'React',\n commonjs: 'react',\n commonjs2: 'react',\n },\n 'react-dom': {\n root: 'ReactDOM',\n commonjs: 'react-dom',\n commonjs2: 'react-dom',\n },\n },\n transformRuntime: {\n absoluteRuntime: process.cwd(),\n },\n chainWebpack: (memo, { env }) => {\n if (env === 'production') {\n memo.plugin('codecov').use(CodecovWebpackPlugin, [\n {\n enableBundleAnalysis: true,\n bundleName: 'x-markdown',\n uploadToken: process.env.CODECOV_TOKEN,\n gitService: 'github',\n },\n ]);\n memo.plugin('circular-dependency-checker').use(CircularDependencyPlugin, [\n {\n failOnError: true,\n },\n ]);\n memo.plugin('duplicate-package-checker').use(DuplicatePackageCheckerPlugin, [\n {\n verbose: true,\n emitError: true,\n },\n ]);\n }\n return memo;\n },\n },\n});\n" }, { "path": "packages/x-markdown/.jest.js", "content": "const compileModules = [\n '@rc-component',\n 'react-sticky-box',\n 'rc-tween-one',\n '@babel',\n '@ant-design',\n 'countup.js',\n '.pnpm',\n 'react-syntax-highlighter',\n 'mermaid',\n 'khroma',\n 'd3',\n 'd3-',\n];\n\nconst resolve = (p) => require.resolve(`@ant-design/tools/lib/jest/${p}`);\n\nconst ignoreList = [];\n\n// cnpm use `_` as prefix\n['', '_'].forEach((prefix) => {\n compileModules.forEach((module) => {\n ignoreList.push(`${prefix}${module}`);\n });\n});\n\nconst transformIgnorePatterns = [\n // Ignore modules without es dir.\n // Update: @babel/runtime should also be transformed\n `[/\\\\\\\\]node_modules[/\\\\\\\\](?!${ignoreList.join('|')})[^/\\\\\\\\]+?[/\\\\\\\\](?!(es)[/\\\\\\\\])`,\n];\n\nfunction getTestRegex(libDir) {\n if (['dist', 'lib', 'es', 'dist-min'].includes(libDir)) {\n return 'demo\\\\.test\\\\.(j|t)sx?$';\n }\n return '.*\\\\.test\\\\.(j|t)sx?$';\n}\n\nmodule.exports = {\n verbose: true,\n testEnvironment: '@happy-dom/jest-environment',\n setupFiles: ['./tests/setup.ts', 'jest-canvas-mock'],\n setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'],\n moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],\n modulePathIgnorePatterns: [],\n moduleNameMapper: {\n '\\\\.(css|less)$': 'identity-obj-proxy',\n '^@ant-design/x-markdown$': '/components/index',\n '^@ant-design/x-markdown/es/(.*)$': '/components/$1',\n '^@ant-design/x-markdown/lib/(.*)$': '/components/$1',\n '^@ant-design/x/es/(.*)$': '/../x/components/$1',\n '^@ant-design/x/locale/en_US$': '/../x/components/locale/en_US',\n },\n testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node', 'image.test.js', 'image.test.ts'],\n transform: {\n '\\\\.tsx?$': resolve('codePreprocessor'),\n '\\\\.(m?)js$': resolve('codePreprocessor'),\n '\\\\.md$': resolve('demoPreprocessor'),\n '\\\\.(jpg|png|gif|svg)$': resolve('imagePreprocessor'),\n },\n extensionsToTreatAsEsm: ['.ts', '.tsx'],\n testRegex: getTestRegex(process.env.LIB_DIR),\n collectCoverageFrom: [\n 'src/**/*.{ts,tsx}',\n '!src/**/__benchmark__/**',\n '!src/*/style/index.tsx',\n '!src/style/index.tsx',\n '!src/*/locale/index.tsx',\n '!src/*/__tests__/type.test.tsx',\n '!src/**/*/interface.{ts,tsx}',\n '!src/*/__tests__/image.test.{ts,tsx}',\n '!src/__tests__/node.test.tsx',\n '!src/*/demo/*.tsx',\n ],\n transformIgnorePatterns,\n globals: {\n 'ts-jest': {\n tsConfig: './tsconfig.test.json',\n useESM: true,\n },\n },\n testEnvironmentOptions: {\n url: 'http://localhost/x-mardown',\n },\n bail: true,\n maxWorkers: '50%',\n};\n" }, { "path": "packages/x-markdown/BUG_VERSIONS.json", "content": "{}\n" }, { "path": "packages/x-markdown/LICENSE", "content": "MIT LICENSE\n\nCopyright (c) 2015-present Ant UED, https://xtech.antfin.com/\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n" }, { "path": "packages/x-markdown/README-zh_CN.md", "content": "
    \n\n\n\n

    Ant Design X Markdown

    \n\n流式友好、强拓展性和高性能的 Markdown 渲染器\n\n[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url]\n\n[![NPM downloads][download-image]][download-url] [![][bundlephobia-image]][bundlephobia-url] [![antd][antd-image]][antd-url] [![Follow zhihu][zhihu-image]][zhihu-url]\n\n[更新日志](../../CHANGELOG.zh-CN.md) · [报告一个 Bug][github-issues-bug-report] · [想新增特性？][github-issues-feature-request] · [English](./README.md) · 中文\n\n[npm-image]: https://img.shields.io/npm/v/@ant-design/x-markdown.svg?style=flat-square\n[npm-url]: https://www.npmjs.com/package/@ant-design/x-markdown\n[github-action-image]: https://github.com/ant-design/x/actions/workflows/main.yml/badge.svg\n[github-action-url]: https://github.com/ant-design/x/actions/workflows/main.yml\n[codecov-image]: https://codecov.io/gh/ant-design/x/graph/badge.svg?token=wrCCsyTmdi\n[codecov-url]: https://codecov.io/gh/ant-design/x\n[download-image]: https://img.shields.io/npm/dm/@ant-design/x-markdown.svg?style=flat-square\n[download-url]: https://npmjs.org/package/@ant-design/x-markdown\n[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@ant-design/x-markdown?style=flat-square\n[bundlephobia-url]: https://bundlephobia.com/package/@ant-design/x-markdown\n[github-issues-bug-report]: https://github.com/ant-design/x/issues/new?template=bug-report.yml\n[github-issues-feature-request]: https://github.com/ant-design/x/issues/new?template=bug-feature-request.yml\n[antd-image]: https://img.shields.io/badge/-Ant%20Design-blue?labelColor=black&logo=antdesign&style=flat-square\n[antd-url]: https://ant.design\n[zhihu-image]: https://img.shields.io/badge/-Ant%20Design-white?logo=zhihu\n[zhihu-url]: https://www.zhihu.com/column/c_1564262000561106944\n\n
    \n\n## ✨ 特性\n\n使用 [`marked`](https://github.com/markedjs/marked) 作为基础 markdown 渲染器，具备 marked 的所有特性。\n\n- 🚀 为速度而生。\n- 🤖 流式友好，大模型Markdown渲染解决方案。\n- ⬇️ 低级编译器，用于解析 Markdown，无需长时间缓存或阻塞。\n- ⚖️ 轻量级，同时实现所有支持的风格和规范的 markdown 功能。\n- 🔐 默认安全，无 dangerouslySetInnerHTML XSS 攻击。\n- 🎨 可自定义组件，传递你自己的组件来代替 \\ for ## hi。\n- 🔧 丰富的插件，有很多插件可供选择。\n- 😊 兼容，100% 符合 CommonMark，100% 符合 GFM 插件。\n\n## 兼容环境\n\n与 [`marked`](https://github.com/markedjs/marked) 保持一致。为了提高整体 markdown 对于系统的兼容性支持，可以自定义 polyfill，来提高兼容性。\n\n| [\"Edge\"](https://godban.github.io/browsers-support-badges/)
    Edge | [\"Firefox\"](https://godban.github.io/browsers-support-badges/)
    Firefox | [\"Chrome\"](https://godban.github.io/browsers-support-badges/)
    Chrome | [\"Safari\"](https://godban.github.io/browsers-support-badges/)
    Safari | [\"Opera\"](https://godban.github.io/browsers-support-badges/)
    Opera |\n| --- | --- | --- | --- | --- |\n| >= 92 | >= 90 | >= 92 | >= 15.4 | >= 78 |\n\n## 支持的 Markdown 规范\n\n- [Markdown 1.0.0](https://daringfireball.net/projects/markdown/)\n- [CommonMark](https://github.com/commonmark/commonmark-spec/wiki/Markdown-Flavors)\n- [GitHub Flavored Markdown (GFM)](https://github.github.com/gfm/)\n\n## 📦 安装\n\n### 使用 npm 或 yarn 或 pnpm 或 bun 安装 或 utoo 安装\n\n**我们推荐使用 [npm](https://www.npmjs.com/) 或 [yarn](https://github.com/yarnpkg/yarn/) 或 [pnpm](https://pnpm.io/zh/) 或 [bun](https://bun.sh/) 或 [utoo](https://github.com/umijs/mako/tree/next) 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。\n\n```bash\nnpm install @ant-design/x-markdown\n```\n\n```bash\nyarn add @ant-design/x-markdown\n```\n\n```bash\npnpm add @ant-design/x-markdown\n```\n\n```bash\nut install @ant-design/x-markdown\n```\n\n### 浏览器引入\n\n在浏览器中使用 `script` 和 `link` 标签直接引入文件，并使用全局变量 `XMarkdown`。\n\n我们在 npm 发布包内的 dist 目录下提供了 `x-markdown.js`、`x-markdown.min.js` 和 `x-markdown.min.js.map`。\n\n> **强烈不推荐使用已构建文件**，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。\n\n> 注意：`x-markdown.js` 、 `x-markdown.min.js` 和 `x-markdown.min.js.map`。依赖 `react`、`react-dom`请确保提前引入这些文件。\n\n## 示例\n\n```tsx\nimport React from 'react';\nimport { XMarkdown } from '@ant-design/x-markdown';\nconst content = `\n# Hello World\n\n### 欢迎使用 XMarkdown！\n\n- 项目1\n- 项目2\n- 项目3\n`;\n\nconst App = () => ;\n\nexport default App;\n```\n\n## 插件\n\n`@ant-design/x-markdown` 提供了丰富的插件，你可以通过 `plugins` 属性来使用这些插件。插件详情查看[插件集](../x/docs/x-markdown/plugins.zh-CN.md)。\n\n## 主题\n\n`@ant-design/x-markdown` 提供了主题可供选择。主题详情查看[主题](../x/docs/x-markdown/themes.zh-CN.md)。\n\n## 🌈 开箱即用的大模型企业级组件\n\n`@ant-design/x` 基于 RICH 交互范式，在不同的交互阶段提供了大量的原子组件，帮助你灵活搭建你的 AI 应用，详情点击[这里](packages/x/README-zh_CN.md)。\n\n## ⚡️ 对接模型智能体服务 & 高效管理数据流\n\n`@ant-design/x-sdk` 提供了一系列的工具API，旨在提供开发者开箱即用的管理AI应用数据流，详情点击[这里](packages/x-sdk/README-zh_CN.md)。\n\n## 如何贡献\n\n在任何形式的参与前，请先阅读 [贡献者文档](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md)。如果你希望参与贡献，欢迎提交 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或给我们 [报告 Bug](http://new-issue.ant.design/)。\n\n> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。\n\n## 社区互助\n\n如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。\n\n通过 GitHub Discussions 提问时，建议使用 `Q&A` 标签。\n\n1. [GitHub Discussions](https://github.com/ant-design/x/discussions)\n2. [GitHub Issues](https://github.com/ant-design/x/issues)\n\n\n \"Contribution\n \n" }, { "path": "packages/x-markdown/README.md", "content": "
    \n\n\n\n

    Ant Design X Markdown

    \n\nStreaming-friendly, highly extensible, and high-performance Markdown renderer\n\n[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url]\n\n[![NPM downloads][download-image]][download-url] [![][bundlephobia-image]][bundlephobia-url] [![antd][antd-image]][antd-url] [![Follow zhihu][zhihu-image]][zhihu-url]\n\n[Changelog](./CHANGELOG.md) · [Report a Bug][github-issues-bug-report] · [Request a Feature][github-issues-feature-request] · English · [中文](./README-zh_CN.md)\n\n[npm-image]: https://img.shields.io/npm/v/@ant-design/x-markdown.svg?style=flat-square\n[npm-url]: https://www.npmjs.com/package/@ant-design/x-markdown\n[github-action-image]: https://github.com/ant-design/x/actions/workflows/main.yml/badge.svg\n[github-action-url]: https://github.com/ant-design/x/actions/workflows/main.yml\n[codecov-image]: https://codecov.io/gh/ant-design/x/graph/badge.svg?token=wrCCsyTmdi\n[codecov-url]: https://codecov.io/gh/ant-design/x\n[download-image]: https://img.shields.io/npm/dm/@ant-design/x-markdown.svg?style=flat-square\n[download-url]: https://npmjs.org/package/@ant-design/x-markdown\n[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@ant-design/x-markdown?style=flat-square\n[bundlephobia-url]: https://bundlephobia.com/package/@ant-design/x-markdown\n[github-issues-bug-report]: https://github.com/ant-design/x/issues/new?template=bug-report.yml\n[github-issues-feature-request]: https://github.com/ant-design/x/issues/new?template=bug-feature-request.yml\n[antd-image]: https://img.shields.io/badge/-Ant%20Design-blue?labelColor=black&logo=antdesign&style=flat-square\n[antd-url]: https://ant.design\n[zhihu-image]: https://img.shields.io/badge/-Ant%20Design-white?logo=zhihu\n[zhihu-url]: https://www.zhihu.com/column/c_1564262000561106944\n\n
    \n\n## ✨ Features\n\nUses [`marked`](https://github.com/markedjs/marked) as the base markdown renderer, with all features of marked.\n\n- 🚀 Born for speed.\n- 🤖 Streaming-friendly, LLM Markdown rendering solution.\n- ⬇️ Low-level compiler for parsing Markdown, no long-term caching or blocking.\n- ⚖️ Lightweight, implements all supported styles and markdown specs.\n- 🔐 Secure by default, no dangerouslySetInnerHTML XSS attacks.\n- 🎨 Customizable components, pass your own components to replace \\ for ## hi.\n- 🔧 Rich plugins, many plugins available.\n- 😊 Compatible, 100% CommonMark, 100% GFM plugin support.\n\n## Compatibility\n\nConsistent with [`marked`](https://github.com/markedjs/marked). For better overall markdown compatibility, you can customize polyfills as needed.\n\n| \"Edge\" Edge | \"Firefox\" Firefox | \"Chrome\" Chrome | \"Safari\" Safari | \"Opera\" Opera |\n| --- | --- | --- | --- | --- |\n| >= 92 | >= 90 | >= 92 | >= 15.4 | >= 78 |\n\n## Supported Markdown Specs\n\n- [Markdown 1.0.0](https://daringfireball.net/projects/markdown/)\n- [CommonMark](https://github.com/commonmark/commonmark-spec/wiki/Markdown-Flavors)\n- [GitHub Flavored Markdown (GFM)](https://github.github.com/gfm/)\n\n## 📦 Installation\n\n### Using npm, yarn, pnpm, bun, or utoo\n\n**We recommend using [npm](https://www.npmjs.com/), [yarn](https://github.com/yarnpkg/yarn/), [pnpm](https://pnpm.io/), [bun](https://bun.sh/), or [utoo](https://github.com/umijs/mako/tree/next) for development.** This allows for easy debugging in development and safe production deployment, enjoying the benefits of the entire ecosystem and toolchain. If your network is slow, try [cnpm](https://github.com/cnpm/cnpm).\n\n```bash\nnpm install @ant-design/x-markdown\n```\n\n```bash\nyarn add @ant-design/x-markdown\n```\n\n```bash\npnpm add @ant-design/x-markdown\n```\n\n```bash\nut install @ant-design/x-markdown\n```\n\n### Browser Import\n\nUse `script` and `link` tags to directly import files in the browser, and use the global variable `XMarkdown`.\n\nWe provide `x-markdown.js`, `x-markdown.min.js`, and `x-markdown.min.js.map` in the dist directory of the npm package.\n\n> **Strongly not recommended to use built files**, as this prevents on-demand loading and makes it difficult to get quick bug fixes for underlying dependency modules.\n\n> Note: `x-markdown.js`, `x-markdown.min.js`, and `x-markdown.min.js.map` depend on `react` and `react-dom`. Please ensure these files are imported in advance.\n\n## Example\n\n```tsx\nimport React from 'react';\nimport { XMarkdown } from '@ant-design/x-markdown';\nconst content = `\n# Hello World\n\n### Welcome to XMarkdown!\n\n- Item 1\n- Item 2\n- Item 3\n`;\n\nconst App = () => ;\n\nexport default App;\n```\n\n## Plugins\n\n`@ant-design/x-markdown` provides a rich set of plugins. You can use them via the `plugins` prop. See [Plugins Collection](../x/docs/x-markdown/plugins.md) for details.\n\n## Themes\n\n`@ant-design/x-markdown` provides several themes. See [Themes](../x/docs/x-markdown/themes.md) for details.\n\n## 🌈 Enterprise-level LLM Components Out of the Box\n\n`@ant-design/x` provides a rich set of atomic components for different interaction stages based on the RICH interaction paradigm, helping you flexibly build your AI applications. See details [here](../x/README.md).\n\n## ⚡️ Connect to Model Agents & Efficiently Manage Data Streams\n\n`@ant-design/x-sdk` provides a set of utility APIs to help developers manage AI application data streams out of the box. See details [here](../x-sdk/README.md).\n\n## How to Contribute\n\nBefore participating in any form, please read the [Contributor Guide](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md). If you wish to contribute, feel free to submit a [Pull Request](https://github.com/ant-design/ant-design/pulls) or [report a Bug](http://new-issue.ant.design/).\n\n> We highly recommend reading [How To Ask Questions The Smart Way](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way), [How to Ask Questions in Open Source Community](https://github.com/seajs/seajs/issues/545), [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs.html), and [How to Submit Unanswerable Questions to Open Source Projects](https://zhuanlan.zhihu.com/p/25795393). Better questions are more likely to get help.\n\n## Community Support\n\nIf you encounter problems during use, you can seek help through the following channels. We also encourage experienced users to help newcomers through these channels.\n\nWhen asking questions on GitHub Discussions, it is recommended to use the `Q&A` tag.\n\n1. [GitHub Discussions](https://github.com/ant-design/x/discussions)\n2. [GitHub Issues](https://github.com/ant-design/x/issues)\n\n\n \"Contribution\n \n" }, { "path": "packages/x-markdown/jest-puppeteer.config.js", "content": "// jest-puppeteer.config.js\nmodule.exports = {\n launch: {\n ignoreDefaultArgs: ['--disable-extensions'],\n args: [\n // Required for Docker version of Puppeteer\n '--no-sandbox',\n '--disable-setuid-sandbox',\n // This will write shared memory files into /tmp instead of /dev/shm,\n // because Docker’s default for /dev/shm is 64MB\n '--disable-dev-shm-usage',\n ],\n },\n};\n" }, { "path": "packages/x-markdown/mako.config.json", "content": "{\n \"optimization\": {\n \"skipModules\": false,\n \"concatenateModules\": false\n },\n \"codeSplitting\": {\n \"strategy\": \"auto\"\n }\n}\n" }, { "path": "packages/x-markdown/package.json", "content": "{\n \"name\": \"@ant-design/x-markdown\",\n \"version\": \"2.4.0\",\n \"scripts\": {\n \"compile\": \"father build\",\n \"tsc\": \"tsc --noEmit\",\n \"prepublishOnly\": \"tsx ../../scripts/pre-publish.ts x-markdown\",\n \"lint\": \"npm run version && npm run tsc && npm run lint:script && npm run lint:md\",\n \"lint:md\": \"remark . -f -q\",\n \"lint:script\": \"biome lint\",\n \"pretest\": \"npm run prestart\",\n \"predist\": \"npm run prestart\",\n \"test\": \"jest --config .jest.js --no-cache --collect-coverage\",\n \"coverage\": \"jest --config .jest.js --no-cache --collect-coverage --coverage\",\n \"plugin:meta\": \"tsx scripts/generate-plugin-meta.ts\",\n \"prestart\": \"npm run version && npm run plugin:meta\",\n \"precompile\": \"npm run prestart\",\n \"version\": \"tsx scripts/generate-version.ts\",\n \"test:dekko\": \"tsx ./tests/dekko/index.test.ts\",\n \"clean\": \"rm -rf es lib coverage plugins dist themes\",\n \"test:package-diff\": \"antd-tools run package-diff\",\n \"token:meta\": \"tsx scripts/generate-token-meta.ts\",\n \"token:statistic\": \"tsx scripts/collect-token-statistic.ts\",\n \"benchmark\": \"cd src/XMarkdown/__benchmark__ && node scripts/run-benchmark.js\",\n \"benchmark:check\": \"cd src/XMarkdown/__benchmark__ && node scripts/check-performance.js ./test-results/benchmark-results.json ./benchmark-check-report.txt\"\n },\n \"sideEffects\": [\n \"**/*.css\"\n ],\n \"main\": \"lib/index.js\",\n \"module\": \"es/index.js\",\n \"typings\": \"es/index.d.ts\",\n \"files\": [\n \"dist\",\n \"es\",\n \"lib\",\n \"plugins\",\n \"themes\"\n ],\n \"homepage\": \"https://x.ant.design/x-markdowns/introduce\",\n \"bugs\": {\n \"url\": \"https://github.com/ant-design/x/issues\"\n },\n \"keywords\": [\n \"AI\",\n \"Agent\",\n \"Copilot\",\n \"ant\",\n \"markdown\",\n \"framework\",\n \"react\"\n ],\n \"license\": \"MIT\",\n \"description\": \"placeholder for @ant-design/x-markdown\",\n \"dependencies\": {\n \"clsx\": \"^2.1.1\",\n \"dompurify\": \"^3.2.6\",\n \"html-react-parser\": \"^5.2.13\",\n \"katex\": \"^0.16.22\",\n \"marked\": \"^15.0.12\"\n },\n \"devDependencies\": {\n \"@playwright/experimental-ct-react\": \"^1.56.1\",\n \"@playwright/test\": \"^1.56.1\",\n \"@types/dompurify\": \"^3.0.5\",\n \"@types/lodash.throttle\": \"^4.1.9\",\n \"@types/markdown-it\": \"^14.1.2\",\n \"@types/react\": \"^19.0.2\",\n \"@types/react-dom\": \"^19.0.2\",\n \"@types/react-syntax-highlighter\": \"^15.5.13\",\n \"@umijs/mako\": \"^0.11.10\",\n \"markdown-it\": \"^14.0.0\",\n \"markdown-it-katex\": \"^2.0.3\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"react-markdown\": \"^10.1.0\",\n \"rehype-katex\": \"^7.0.1\",\n \"rehype-raw\": \"^7.0.0\",\n \"remark-gfm\": \"^4.0.1\",\n \"remark-math\": \"^6.0.0\",\n \"streamdown\": \"^2.4.0\",\n \"vite\": \"^8.0.0\"\n },\n \"peerDependencies\": {\n \"react\": \">=18.0.0\",\n \"react-dom\": \">=18.0.0\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/ant-design/x\"\n }\n}\n" }, { "path": "packages/x-markdown/scripts/generate-plugin-meta.ts", "content": "import fs from 'fs-extra';\nimport type { DeclarationReflection } from 'typedoc';\nimport { Application, TSConfigReader, TypeDocReader } from 'typedoc';\n\nfunction getPluginMeta(list?: DeclarationReflection[]) {\n return (list || []).map((item) => {\n return {\n plugin: item.name,\n desc:\n item.comment?.blockTags\n ?.find((tag) => tag.tag === '@desc')\n ?.content.reduce((result, str) => result.concat(str.text), '') || '',\n descEn:\n item.comment?.blockTags\n ?.find((tag) => tag.tag === '@descEN')\n ?.content.reduce((result, str) => result.concat(str.text), '') || '',\n };\n });\n}\n\nconst main = async () => {\n const app = await (Application as any).bootstrap(\n {\n // typedoc options here\n entryPoints: ['src/plugins/type.ts'],\n skipErrorChecking: true,\n logLevel: 'Error',\n },\n [new TSConfigReader(), new TypeDocReader()],\n );\n\n const project = await app.convert();\n\n let pluginMeta: Record = {};\n if (project) {\n // Project may not have converted correctly\n const output = 'src/plugins/version/plugin-meta.json';\n\n // eslint-disable-next-line no-restricted-syntax\n project?.children?.forEach((file: any) => {\n pluginMeta = getPluginMeta(file.children);\n });\n\n fs.writeJsonSync(output, pluginMeta, { spaces: 2, encoding: 'utf-8' });\n // eslint-disable-next-line no-console\n console.log(`✅ Plugin Meta has been written to ${output}`);\n }\n};\n\nmain();\n" }, { "path": "packages/x-markdown/scripts/generate-version.ts", "content": "import fs from 'fs';\nimport path from 'path';\n\nconst packageJsonPath = path.join(__dirname, '..', 'package.json');\nconst packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));\nconst version = packageJson.version;\n\nfs.writeFileSync(\n path.join(__dirname, '..', 'src', 'version', 'version.ts'),\n `export default '${version}';`,\n 'utf8',\n);\n\nfs.writeFileSync(\n path.join(__dirname, '..', 'src', 'plugins', 'version', 'version.ts'),\n `export default '${version}';`,\n 'utf8',\n);\n" }, { "path": "packages/x-markdown/src/XMarkdown/AnimationText.tsx", "content": "import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { AnimationConfig } from './interface';\n\nexport interface AnimationTextProps {\n text: string;\n animationConfig?: AnimationConfig;\n}\n\nconst AnimationText = React.memo((props) => {\n const { text, animationConfig } = props;\n const { fadeDuration = 200, easing = 'ease-in-out' } = animationConfig || {};\n const [chunks, setChunks] = useState([]);\n const prevTextRef = useRef('');\n\n useEffect(() => {\n if (text === prevTextRef.current) return;\n\n if (!(prevTextRef.current && text.indexOf(prevTextRef.current) === 0)) {\n setChunks([text]);\n prevTextRef.current = text;\n return;\n }\n\n const newText = text.slice(prevTextRef.current.length);\n if (!newText) return;\n\n setChunks((prev) => [...prev, newText]);\n prevTextRef.current = text;\n }, [text]);\n\n const animationStyle = useMemo(\n () => ({\n animation: `x-markdown-fade-in ${fadeDuration}ms ${easing} forwards`,\n color: 'inherit',\n }),\n [fadeDuration, easing],\n );\n\n return (\n <>\n {chunks.map((text, index) => (\n \n {text}\n \n ))}\n \n );\n});\n\nexport default AnimationText;\n" }, { "path": "packages/x-markdown/src/XMarkdown/DebugPanel/DebugPanel.css", "content": ".x-markdown-debug-panel {\n position: fixed;\n z-index: 9999;\n right: 0;\n background: rgba(0, 0, 0, 0.85);\n border-radius: 8px;\n padding: 12px;\n font-family:\n \"SF Mono\", \"Monaco\", \"Inconsolata\", \"Fira Mono\", \"Droid Sans Mono\", \"Source Code Pro\", monospace;\n font-size: 12px;\n color: #fff;\n width: 180px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n backdrop-filter: blur(8px);\n user-select: none;\n transition: box-shadow 0.2s;\n}\n\n.x-markdown-debug-panel:hover {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);\n}\n\n.x-markdown-debug-row {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n.x-markdown-debug-row:last-child {\n margin-bottom: 0;\n}\n\n.x-markdown-debug-label {\n color: rgba(255, 255, 255, 0.65);\n font-weight: 500;\n min-width: 60px;\n}\n\n.x-markdown-debug-value {\n font-weight: 600;\n min-width: 50px;\n text-align: right;\n}\n\n.x-markdown-debug-chart {\n margin-left: auto;\n}\n\n/* Actions */\n.x-markdown-debug-actions {\n display: flex;\n gap: 8px;\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.x-markdown-debug-action {\n flex: 1;\n padding: 6px 12px;\n background: rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 4px;\n color: #fff;\n font-size: 11px;\n font-family: inherit;\n cursor: pointer;\n transition: all 0.2s;\n font-weight: 500;\n}\n\n.x-markdown-debug-action:hover {\n background: rgba(255, 255, 255, 0.15);\n border-color: rgba(255, 255, 255, 0.3);\n}\n\n.x-markdown-debug-action:active {\n transform: scale(0.98);\n}\n\n/* Record Button */\n.x-markdown-debug-record-btn.recording {\n background: rgba(255, 77, 79, 0.2);\n border-color: #ff4d4f;\n animation: recording-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes recording-pulse {\n 0%,\n 100% {\n box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.4);\n }\n 50% {\n box-shadow: 0 0 0 8px rgba(255, 77, 79, 0);\n }\n}\n\n/* Modal Overlay */\n.x-markdown-debug-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.75);\n backdrop-filter: blur(4px);\n z-index: 10000;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: fadeIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Modal */\n.x-markdown-debug-modal {\n background: rgba(30, 30, 30, 0.95);\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n max-width: 90vw;\n max-height: 90vh;\n overflow: auto;\n animation: slideIn 0.3s ease-out;\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n@keyframes slideIn {\n from {\n transform: translateY(-20px);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n/* Modal Header */\n.x-markdown-debug-modal-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.x-markdown-debug-close-btn {\n width: 32px;\n height: 32px;\n border-radius: 6px;\n background: rgba(255, 255, 255, 0.1);\n border: none;\n color: #fff;\n font-size: 18px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n}\n\n.x-markdown-debug-close-btn:hover {\n background: rgba(255, 77, 79, 0.3);\n}\n\n/* Modal Content */\n.x-markdown-debug-modal-content {\n padding: 24px;\n}\n\n/* Stats Summary */\n.x-markdown-debug-stats-summary {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.x-markdown-debug-stat-item {\n background: rgba(255, 255, 255, 0.05);\n border-radius: 8px;\n padding: 16px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.x-markdown-debug-stat-label {\n font-size: 11px;\n color: rgba(255, 255, 255, 0.6);\n margin-bottom: 8px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.x-markdown-debug-stat-value {\n font-size: 20px;\n font-weight: 700;\n color: #fff;\n}\n\n/* Chart */\n.x-markdown-debug-chart-full {\n background: rgba(255, 255, 255, 0.02);\n border-radius: 8px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.x-markdown-debug-chart-full .fps-line,\n.x-markdown-debug-chart-full .memory-line {\n filter: drop-shadow(0 0 4px currentColor);\n}\n\n/* Legend */\n.x-markdown-debug-legend {\n display: flex;\n gap: 24px;\n justify-content: center;\n margin-top: 16px;\n}\n\n.x-markdown-debug-legend-item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: rgba(255, 255, 255, 0.8);\n}\n\n.x-markdown-debug-legend-color {\n width: 12px;\n height: 12px;\n border-radius: 2px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .x-markdown-debug-stats-summary {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n" }, { "path": "packages/x-markdown/src/XMarkdown/DebugPanel/DebugPanel.tsx", "content": "import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport './DebugPanel.css';\n\ninterface PerformanceSnapshot {\n timestamp: number;\n fps: number;\n memory: number;\n}\n\ninterface Position {\n x: number;\n y: number;\n}\n\ninterface DragState {\n isDragging: boolean;\n startX: number;\n startY: number;\n initialX: number;\n initialY: number;\n}\n\nconst CONSTANTS = {\n FPS_THRESHOLD: { GOOD: 55, WARNING: 40 },\n COLORS: { GOOD: '#52c41a', WARNING: '#faad14', DANGER: '#ff4d4f' },\n CHART: { WIDTH: 750, HEIGHT: 400, PADDING: 80 },\n} as const;\n\nconst getInitialPosition = (): Position => {\n if (typeof window === 'undefined') {\n return { x: 12, y: 12 };\n }\n return {\n x: window.innerWidth - 220,\n y: window.innerHeight / 2 - 100,\n };\n};\n\nconst DebugPanel: React.FC = () => {\n const [fps, setFps] = useState(0);\n const [memory, setMemory] = useState(0);\n const [isRecording, setIsRecording] = useState(false);\n const [showModal, setShowModal] = useState(false);\n const [records, setRecords] = useState([]);\n const [position, setPosition] = useState(getInitialPosition());\n const [isMounted, setIsMounted] = useState(false);\n\n const recordingRef = useRef([]);\n const frameTimesRef = useRef([]);\n const lastTimeRef = useRef(0);\n const frameCountRef = useRef(0);\n const animationRef = useRef(undefined);\n const dragRef = useRef({\n isDragging: false,\n startX: 0,\n startY: 0,\n initialX: 0,\n initialY: 0,\n });\n\n useEffect(() => {\n // 仅在客户端运行\n if (typeof window === 'undefined') return;\n\n // 仅在客户端初始化\n if (!isMounted) {\n setIsMounted(true);\n lastTimeRef.current = performance.now();\n }\n\n const update = () => {\n const now = performance.now();\n const delta = now - lastTimeRef.current;\n\n frameTimesRef.current.push(delta);\n if (frameTimesRef.current.length > 60) frameTimesRef.current.shift();\n\n frameCountRef.current++;\n if (delta >= 1000) {\n const currentFps = Math.round((frameCountRef.current * 1000) / delta);\n const currentMemory = getMemoryUsage();\n\n setFps(currentFps);\n setMemory(currentMemory);\n\n if (isRecording) {\n recordingRef.current.push({\n timestamp: Date.now(),\n fps: currentFps,\n memory: currentMemory,\n });\n }\n\n frameCountRef.current = 0;\n lastTimeRef.current = now;\n }\n\n animationRef.current = requestAnimationFrame(update);\n };\n\n animationRef.current = requestAnimationFrame(update);\n return () => {\n if (animationRef.current !== undefined) {\n cancelAnimationFrame(animationRef.current);\n }\n };\n }, [isRecording, isMounted]);\n\n const getMemoryUsage = (): number => {\n const perf = performance as Performance & { memory?: { usedJSHeapSize: number } };\n return perf.memory ? Math.round(perf.memory.usedJSHeapSize / 1024 / 1024) : 0;\n };\n\n const formatMemory = (mb: number): string => {\n if (mb < 1) return `${Math.round(mb * 1024)} KB`;\n if (mb >= 1024) return `${(mb / 1024).toFixed(2)} GB`;\n return `${mb.toFixed(2)} MB`;\n };\n\n const getFpsColor = (value: number): string => {\n if (value >= CONSTANTS.FPS_THRESHOLD.GOOD) return CONSTANTS.COLORS.GOOD;\n if (value >= CONSTANTS.FPS_THRESHOLD.WARNING) return CONSTANTS.COLORS.WARNING;\n return CONSTANTS.COLORS.DANGER;\n };\n\n const toggleRecording = useCallback(() => {\n if (isRecording) {\n setIsRecording(false);\n setRecords([...recordingRef.current]);\n setShowModal(true);\n } else {\n recordingRef.current = [];\n setIsRecording(true);\n }\n }, [isRecording]);\n\n const handleMouseDown = useCallback(\n (e: React.MouseEvent) => {\n if ((e.target as HTMLElement).closest('.x-markdown-debug-action')) return;\n\n dragRef.current = {\n isDragging: true,\n startX: e.clientX,\n startY: e.clientY,\n initialX: position.x,\n initialY: position.y,\n };\n },\n [position],\n );\n\n const handleMouseMove = useCallback((e: MouseEvent) => {\n if (!dragRef.current.isDragging) return;\n const dx = e.clientX - dragRef.current.startX;\n const dy = e.clientY - dragRef.current.startY;\n setPosition({ x: dragRef.current.initialX + dx, y: dragRef.current.initialY + dy });\n }, []);\n\n const handleMouseUp = useCallback(() => {\n dragRef.current.isDragging = false;\n }, []);\n\n useEffect(() => {\n // 仅在客户端运行\n if (typeof window === 'undefined') return;\n\n document.addEventListener('mousemove', handleMouseMove);\n document.addEventListener('mouseup', handleMouseUp);\n return () => {\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleMouseUp);\n };\n }, [handleMouseMove, handleMouseUp]);\n\n const PerformanceChart = () => {\n if (!records.length) return null;\n\n const { WIDTH, HEIGHT, PADDING } = CONSTANTS.CHART;\n const chartWidth = WIDTH - PADDING * 2;\n const chartHeight = HEIGHT - PADDING * 2;\n\n const startTime = records[0]?.timestamp ?? 0;\n const endTime = records[records.length - 1]?.timestamp ?? 0;\n const duration = endTime - startTime || 1;\n\n const maxFps = Math.max(...records.map((r) => r.fps), 60);\n const maxMemory = Math.max(...records.map((r) => r.memory), 0) * 1.1;\n\n const avgFps =\n records.length > 0 ? records.reduce((sum, r) => sum + r.fps, 0) / records.length : 0;\n const avgMemory =\n records.length > 0 ? records.reduce((sum, r) => sum + r.memory, 0) / records.length : 0;\n const minFps = records.length > 0 ? Math.min(...records.map((r) => r.fps)) : 0;\n const maxFpsValue = records.length > 0 ? Math.max(...records.map((r) => r.fps)) : 0;\n\n const createPoints = (key: 'fps' | 'memory', max: number) =>\n records\n .map((r) => {\n const x = PADDING + ((r.timestamp - startTime) / duration) * chartWidth;\n const y = PADDING + chartHeight - (r[key] / max) * chartHeight;\n return `${x},${y}`;\n })\n .join(' ');\n\n return (\n
    \n
    \n
    \n
    Duration
    \n
    {(duration / 1000).toFixed(2)}s
    \n
    \n
    \n
    FPS Avg
    \n
    \n {avgFps.toFixed(1)}\n
    \n
    \n
    \n
    FPS Range
    \n
    \n {minFps} - {maxFpsValue}\n
    \n
    \n
    \n
    Memory Avg
    \n
    {formatMemory(avgMemory)}
    \n
    \n
    \n\n \n Performance Chart\n {[0, 0.25, 0.5, 0.75, 1].map((ratio) => (\n \n \n \n \n ))}\n\n \n \n\n \n {maxFps.toFixed(0)}\n \n \n 0\n \n \n FPS\n \n\n \n {formatMemory(maxMemory)}\n \n \n {formatMemory(0)}\n \n \n Memory\n \n\n \n 0s\n \n \n {(duration / 1000).toFixed(1)}s\n \n \n\n
    \n
    \n \n FPS\n
    \n
    \n \n Memory\n
    \n
    \n
    \n );\n };\n\n return (\n <>\n \n
    \n FPS\n \n {fps}\n \n
    \n
    \n Memory\n {formatMemory(memory)}\n
    \n
    \n \n {isRecording ? '⏹ Stop' : '⏺ Record'}\n \n {records.length > 0 && !isRecording && (\n setShowModal(true)}\n >\n 📊 View\n \n )}\n
    \n \n\n {showModal && records.length > 0 ? (\n
    setShowModal(false)}>\n
    e.stopPropagation()}>\n
    \n \n Performance Recording\n \n setShowModal(false)}\n >\n ✕\n \n
    \n \n
    \n
    \n ) : null}\n \n );\n};\n\nexport default DebugPanel;\n" }, { "path": "packages/x-markdown/src/XMarkdown/DebugPanel/index.ts", "content": "export { default } from './DebugPanel';\n" }, { "path": "packages/x-markdown/src/XMarkdown/__benchmark__/README.md", "content": "# Markdown 渲染器性能基准测试\n\n> 流式渲染场景下的性能对比分析\n\n## 🚀 快速开始\n\n```bash\ncd packages/x-markdown\nnpm run benchmark # 一键运行完整测试\n```\n\n## 📊 支持的渲染器\n\n| 渲染器 | 类型 | 特点 |\n| ------------------ | ------------ | ------------------ |\n| **marked** | 传统解析器 | 流行度高，性能中等 |\n| **markdown-it** | 可配置解析器 | 插件丰富，稍慢 |\n| **react-markdown** | React组件 | 集成度高，性能较低 |\n| **x-markdown** | 高性能渲染器 | 本项目优化版本 |\n| **streamdown** | 流式渲染 | 专为流式场景设计 |\n\n## 📈 性能指标\n\n| 指标 | 说明 | 理想值 |\n| ------------- | ------------ | -------- |\n| **渲染时长** | 完整渲染耗时 | 越低越好 |\n| **平均FPS** | 渲染流畅度 | >45 FPS |\n| **FPS标准差** | 帧率稳定性 | <10 |\n| **内存峰值** | 最大内存占用 | 越低越好 |\n| **内存增量** | 新增内存使用 | 越低越好 |\n\n## 📁 输出报告\n\n### 标准报告\n\n- `benchmark-report.html` - 主要性能报告\n- `benchmark-results.json` - 原始数据\n\n### 增强报告\n\n- `benchmark-comparison.html` - 详细对比分析\n- `benchmark-historical.html` - 历史趋势\n- `benchmark-history.json` - 历史数据\n\n## 🎯 示例结果\n\n```\n┌─────────┬────────────────┬──────────────┬──────────┬─────────────┐\n│ 排名 │ 渲染器 │ 时长(ms) │ FPS │ 内存(MB) │\n├─────────┼────────────────┼──────────────┼──────────┼─────────────┤\n│ 🥇 │ streamdown │ 3,987 │ 58.3 │ 20.12 │\n│ 🥈 │ x-markdown │ 4,456 │ 52.8 │ 22.34 │\n│ 🥉 │ marked │ 5,234 │ 45.2 │ 25.43 │\n│ 4 │ markdown-it │ 6,123 │ 38.7 │ 28.91 │\n│ 5 │ react-markdown │ 7,891 │ 32.1 │ 35.67 │\n└─────────┴────────────────┴──────────────┴──────────┴─────────────┘\n```\n\n## ⚙️ 自定义测试\n\n编辑 `performance.spec.tsx`：\n\n```typescript\nconst RUN_COUNT = 3; // 运行次数\nconst renderers = [...]; // 测试的渲染器\nconst updateInterval = 100; // 更新频率(ms)\n```\n\n## 🔧 环境要求\n\n- **Node.js**: ≥ 16.0.0\n- **内存**: ≥ 4GB 可用\n- **浏览器**: Chromium (自动安装)\n- **系统**: macOS/Linux/Windows\n\n## 🚨 故障排除\n\n| 问题 | 解决方案 |\n| ---------- | ------------------------ |\n| 依赖错误 | `npm install` |\n| 浏览器缺失 | `npx playwright install` |\n| 内存不足 | 关闭其他程序 |\n| 权限问题 | 使用管理员权限运行 |\n\n## 💡 最佳实践\n\n1. **测试前**：关闭无关应用，清理浏览器缓存\n2. **测试中**：避免系统干扰，保持网络稳定\n3. **测试后**：保存结果，建立性能基线\n" }, { "path": "packages/x-markdown/src/XMarkdown/__benchmark__/components/MarkdownRenderer.tsx", "content": "import MarkdownIt from 'markdown-it';\n// @ts-ignore - benchmark only, ignore type checking\nimport markdownItKatex from 'markdown-it-katex';\nimport { Marked } from 'marked';\nimport React, { FC } from 'react';\nimport ReactMarkdown from 'react-markdown';\nimport rehypeKatex from 'rehype-katex';\nimport rehypeRaw from 'rehype-raw';\nimport remarkGfm from 'remark-gfm';\nimport remarkMath from 'remark-math';\nimport { Streamdown } from 'streamdown';\nimport getLatex from '../../../plugins/Latex';\nimport XMarkdown from '../../index';\n\ntype MarkdownRendererProps = {\n md: string;\n hasNextChunk?: boolean;\n};\n\nconst md = new MarkdownIt();\n// benchmark only: bypass TS check\nmd.use(markdownItKatex);\nconst marked = new Marked({ extensions: getLatex() });\n\nconst MarkedRenderer: FC = (props) => (\n \n);\n\nconst MarkdownItRenderer: FC = (props) => {\n return (\n // biome-ignore lint/security/noDangerouslySetInnerHtml: benchmark only\n
    \n );\n};\n\nconst ReactMarkdownRenderer: FC = (props) => (\n
    \n \n {props.md}\n \n
    \n);\n\nconst XMarkdownRenderer: FC = (props) => (\n
    \n \n {props.md}\n \n
    \n);\n\nconst StreamdownRenderer: FC = (props) => (\n
    \n \n {props.md}\n \n
    \n);\n\nconst Empty = () =>
    ;\n\nexport {\n MarkedRenderer,\n MarkdownItRenderer,\n ReactMarkdownRenderer,\n XMarkdownRenderer,\n StreamdownRenderer,\n Empty,\n};\n" }, { "path": "packages/x-markdown/src/XMarkdown/__benchmark__/playwright/index.html", "content": "\n\n \n \n \n Testing Page\n \n \n
    \n \n \n\n" }, { "path": "packages/x-markdown/src/XMarkdown/__benchmark__/playwright/index.tsx", "content": "// Import styles, initialize component theme here.\n// import '../src/common.css';\n" }, { "path": "packages/x-markdown/src/XMarkdown/__benchmark__/playwright-ct.config.ts", "content": "import { defineConfig, devices } from '@playwright/experimental-ct-react';\n\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nexport default defineConfig({\n testDir: './',\n /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */\n snapshotDir: './__snapshots__',\n /* Output directory for test results */\n outputDir: './test-results',\n /* Maximum time one test can run for. */\n timeout: 10 * 1000,\n /* Run tests in files in parallel */\n fullyParallel: true,\n /* Fail the build on CI if you accidentally left test.only in the source code. */\n forbidOnly: !!process.env.CI,\n /* Retry on CI only */\n retries: process.env.CI ? 2 : 0,\n /* Opt out of parallel tests on CI. */\n workers: 1,\n /* Reporter to use. See https://playwright.dev/docs/test-reporters */\n reporter: 'html',\n /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */\n use: {\n /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */\n trace: 'on-first-retry',\n /* Show browser window - use headless mode in CI */\n headless: !!process.env.CI,\n\n /* Port to use for Playwright component endpoint. */\n ctPort: 3100,\n },\n\n /* Configure projects for major browsers */\n projects: [\n {\n name: 'chromium',\n use: { ...devices['Desktop Chrome'] },\n },\n ],\n});\n" }, { "path": "packages/x-markdown/src/XMarkdown/__benchmark__/scripts/check-performance.js", "content": "#!/usr/bin/env node\n/**\n * Performance Threshold Check Script\n * 检查 benchmark 结果是否满足性能阈值要求\n */\n\nconst fs = require('fs');\nconst path = require('path');\n\n// 性能阈值配置 - 基于实际基准测试数据设定\nconst PERFORMANCE_THRESHOLDS = {\n 'x-markdown': {\n short: {\n maxDuration: 5000,\n minAvgFPS: 60,\n maxStdDevFPS: 9999,\n maxMemoryDelta: 30,\n },\n medium: {\n maxDuration: 15000,\n minAvgFPS: 60,\n maxStdDevFPS: 9999,\n maxMemoryDelta: 50,\n },\n long: {\n maxDuration: 85000,\n minAvgFPS: 60,\n maxStdDevFPS: 9999,\n maxMemoryDelta: 100,\n },\n },\n};\n\nfunction loadBenchmarkResults(resultsPath) {\n if (!fs.existsSync(resultsPath)) {\n console.warn(`⚠️ Benchmark results not found: ${resultsPath}`);\n console.log('📝 Creating empty benchmark results file...');\n\n // 创建空的基准测试结果\n const emptyResults = [\n {\n name: 'x-markdown',\n textLength: 250,\n textType: 'short',\n duration: 0,\n fcp: 0,\n avgFPS: 60,\n stdDevFPS: 0,\n maxMemory: 0,\n avgAvgMemory: 0,\n memoryDelta: 0,\n systemInfo: { userAgent: '', deviceMemory: 0, hardwareConcurrency: 0 },\n timeline: { fps: [], memory: [], timestamps: [] },\n },\n {\n name: 'x-markdown',\n textLength: 1500,\n textType: 'medium',\n duration: 0,\n fcp: 0,\n avgFPS: 60,\n stdDevFPS: 0,\n maxMemory: 0,\n avgAvgMemory: 0,\n memoryDelta: 0,\n systemInfo: { userAgent: '', deviceMemory: 0, hardwareConcurrency: 0 },\n timeline: { fps: [], memory: [], timestamps: [] },\n },\n {\n name: 'x-markdown',\n textLength: 8000,\n textType: 'long',\n duration: 0,\n fcp: 0,\n avgFPS: 60,\n stdDevFPS: 0,\n maxMemory: 0,\n avgAvgMemory: 0,\n memoryDelta: 0,\n systemInfo: { userAgent: '', deviceMemory: 0, hardwareConcurrency: 0 },\n timeline: { fps: [], memory: [], timestamps: [] },\n },\n ];\n\n // 确保目录存在\n const dir = path.dirname(resultsPath);\n if (!fs.existsSync(dir)) {\n fs.mkdirSync(dir, { recursive: true });\n }\n\n fs.writeFileSync(resultsPath, JSON.stringify(emptyResults, null, 2));\n return emptyResults;\n }\n\n try {\n const data = fs.readFileSync(resultsPath, 'utf-8');\n return JSON.parse(data);\n } catch (error) {\n console.error(`❌ Error reading benchmark results: ${error.message}`);\n process.exit(1);\n }\n}\n\nfunction checkThresholds(results) {\n const failures = [];\n const warnings = [];\n\n results.forEach((result) => {\n if (result.name !== 'x-markdown') return;\n\n const { textType, duration, avgFPS, stdDevFPS, memoryDelta } = result;\n const thresholds = PERFORMANCE_THRESHOLDS['x-markdown'][textType];\n\n if (!thresholds) {\n warnings.push(`⚠️ No thresholds defined for ${textType} text`);\n return;\n }\n\n // 跳过零值结果（可能是空数据）\n if (duration === 0 && avgFPS === 60 && memoryDelta === 0) {\n warnings.push(`⚠️ ${textType} text: No benchmark data available, using default values`);\n return;\n }\n\n // 检查各项指标\n if (duration > thresholds.maxDuration) {\n failures.push(\n `❌ ${textType} text: Duration ${duration.toFixed(0)}ms exceeds threshold ${thresholds.maxDuration}ms`,\n );\n } else if (duration > thresholds.maxDuration * 0.9) {\n warnings.push(\n `⚠️ ${textType} text: Duration ${duration.toFixed(0)}ms is close to threshold ${thresholds.maxDuration}ms`,\n );\n }\n\n if (avgFPS < thresholds.minAvgFPS) {\n failures.push(\n `❌ ${textType} text: Avg FPS ${avgFPS.toFixed(1)} is below threshold ${thresholds.minAvgFPS}`,\n );\n } else if (avgFPS < thresholds.minAvgFPS * 1.1) {\n warnings.push(\n `⚠️ ${textType} text: Avg FPS ${avgFPS.toFixed(1)} is close to threshold ${thresholds.minAvgFPS}`,\n );\n }\n\n if (stdDevFPS > thresholds.maxStdDevFPS) {\n failures.push(\n `❌ ${textType} text: FPS StdDev ${stdDevFPS.toFixed(2)} exceeds threshold ${thresholds.maxStdDevFPS}`,\n );\n }\n\n const memoryDeltaMB = memoryDelta / 1024 / 1024;\n if (memoryDeltaMB > thresholds.maxMemoryDelta) {\n failures.push(\n `❌ ${textType} text: Memory delta ${memoryDeltaMB.toFixed(2)}MB exceeds threshold ${thresholds.maxMemoryDelta}MB`,\n );\n } else if (memoryDeltaMB > thresholds.maxMemoryDelta * 0.9) {\n warnings.push(\n `⚠️ ${textType} text: Memory delta ${memoryDeltaMB.toFixed(2)}MB is close to threshold ${thresholds.maxMemoryDelta}MB`,\n );\n }\n });\n\n return { failures, warnings };\n}\n\nfunction generateReport(currentResults) {\n const { failures, warnings } = checkThresholds(currentResults);\n\n let report = '\\n📊 Performance Benchmark Report\\n';\n report += `${'='.repeat(80)}\\n\\n`;\n\n // x-markdown 结果摘要\n const xMarkdownResults = currentResults.filter((r) => r.name === 'x-markdown');\n if (xMarkdownResults.length > 0) {\n report += '🎯 x-markdown Performance Results:\\n';\n report += `${'-'.repeat(80)}\\n`;\n\n xMarkdownResults.forEach((result) => {\n const memoryDeltaMB = result.memoryDelta / 1024 / 1024;\n const hasData = result.duration > 0;\n\n report += `\\n${result.textType.toUpperCase()} Text (${result.textLength} chars):\\n`;\n if (hasData) {\n report += ` ⏱️ Duration: ${result.duration.toFixed(0)}ms\\n`;\n report += ` 🎯 Avg FPS: ${result.avgFPS.toFixed(1)} (StdDev: ${result.stdDevFPS.toFixed(2)})\\n`;\n report += ` 🧠 Memory Delta: ${memoryDeltaMB.toFixed(2)}MB\\n`;\n report += ` 📊 FCP: ${result.fcp.toFixed(0)}ms\\n`;\n } else {\n report += ` ⚠️ No benchmark data available\\n`;\n }\n });\n report += '\\n';\n }\n\n // 显示警告\n if (warnings.length > 0) {\n report += '\\n⚠️ Warnings:\\n';\n warnings.forEach((warning) => {\n report += ` ${warning}\\n`;\n });\n report += '\\n';\n }\n\n // 显示失败\n if (failures.length > 0) {\n report += '\\n❌ Performance Threshold Failures:\\n';\n failures.forEach((failure) => {\n report += ` ${failure}\\n`;\n });\n report += '\\n';\n } else if (xMarkdownResults.some((r) => r.duration > 0)) {\n report += '\\n✅ All performance checks passed!\\n\\n';\n }\n\n report += `${'='.repeat(80)}\\n`;\n\n return { report, hasFailures: failures.length > 0 };\n}\n\nfunction main() {\n const resultsPath = process.argv[2] || './test-results/benchmark-results.json';\n const outputPath = process.argv[3] || './benchmark-check-report.txt';\n\n console.log('🔍 Checking performance thresholds...\\n');\n\n try {\n const results = loadBenchmarkResults(resultsPath);\n const { report, hasFailures } = generateReport(results);\n\n // 确保输出目录存在\n const outputDir = path.dirname(outputPath);\n if (!fs.existsSync(outputDir)) {\n fs.mkdirSync(outputDir, { recursive: true });\n }\n\n // 保存报告\n fs.writeFileSync(outputPath, report);\n console.log(report);\n console.log(`\\n📝 Report saved to: ${outputPath}`);\n\n // 输出 GitHub Actions 注释（如果是在 CI 环境中）\n if (process.env.GITHUB_OUTPUT) {\n fs.appendFileSync(process.env.GITHUB_OUTPUT, `report< r.duration === 0);\n if (process.env.CI && hasOnlyWarnings) {\n console.log('⚠️ CI environment: Allowing warnings for missing benchmark data');\n process.exit(0);\n }\n\n process.exit(1);\n }\n\n console.log('\\n✅ All performance checks passed!');\n process.exit(0);\n } catch (error) {\n console.error(`❌ Error in performance check: ${error.message}`);\n\n // 在CI环境中，创建错误报告\n if (process.env.CI) {\n const errorReport = `\\n📊 Performance Benchmark Report\\n${'='.repeat(80)}\\n\\n❌ Error: ${error.message}\\n\\n${'='.repeat(80)}\\n`;\n fs.writeFileSync(outputPath, errorReport);\n\n if (process.env.GITHUB_OUTPUT) {\n fs.appendFileSync(process.env.GITHUB_OUTPUT, `report< __benchmark__/ -> XMarkdown/ -> src/ -> x-markdown/ -> packages/ -> x/ (root)\n const rootDir = path.join(__dirname, '../../../../../../');\n const lockFilePath = path.join(rootDir, 'package-lock.json');\n\n if (!fs.existsSync(lockFilePath)) {\n console.log('📦 Generating package-lock.json...');\n await runCommand('npm', ['install'], { cwd: rootDir });\n }\n\n // Install Playwright browsers from the project root where package-lock.json exists\n console.log('🌐 Installing Playwright browsers...');\n await runCommand('npx', ['playwright', 'install', 'chromium'], { cwd: rootDir });\n\n // Clean up old test results\n console.log('🧹 Cleaning up old test results...');\n const testResultsDir = path.join(__dirname, '../test-results');\n if (fs.existsSync(testResultsDir)) {\n fs.rmSync(testResultsDir, { recursive: true, force: true });\n }\n\n // Run the full benchmark suite\n console.log('🏃 Running performance tests for all renderers...');\n const configPath = path.join(__dirname, '..', 'playwright-ct.config.ts');\n await runCommand('npx', ['playwright', 'test', '-c', configPath, '--reporter=line'], {\n cwd: path.join(__dirname, '..'),\n });\n\n console.log('\\n✅ Benchmark completed successfully!');\n console.log('📊 Report locations:');\n console.log(` HTML Report: ${path.join(__dirname, '../test-results/benchmark-report.html')}`);\n console.log(` JSON Data: ${path.join(__dirname, '../test-results/benchmark-results.json')}`);\n}\n\nfunction runCommand(command, args, options = {}) {\n return new Promise((resolve, reject) => {\n const process = spawn(command, args, {\n stdio: 'inherit',\n ...options,\n });\n\n process.on('close', (code) => {\n if (code === 0) {\n resolve();\n } else {\n reject(new Error(`process error, exit: ${code}`));\n }\n });\n\n process.on('error', reject);\n });\n}\n\nrunFullBenchmark().catch(console.error);\n" }, { "path": "packages/x-markdown/src/XMarkdown/__benchmark__/tests/benchmark.config.ts", "content": "/**\n * Streaming Markdown rendering performance test configuration\n * All configurable parameters are centrally managed\n */\n\nexport const TEXT_CATEGORIES = {\n short: { min: 0, max: 280, name: 'Short Text' },\n medium: { min: 280, max: 2000, name: 'Medium Text' },\n long: { min: 2000, max: 20000, name: 'Long Text' },\n} as const;\n\nexport const BENCHMARK_CONFIG = {\n // Chunk rendering configuration\n CHUNK_SIZE: 6, // Number of characters rendered per chunk\n UPDATE_INTERVAL: 50, // Interval between chunks (ms)\n RUN_COUNT: 3, // Number of runs per test case - simplified to 3 times\n\n // Test text length configuration\n TEST_TEXT_LENGTHS: {\n short: 250, // Short text character count\n medium: 1500, // Medium text character count\n long: 8000, // Long text character count\n },\n\n // Timeout configuration\n TIMEOUT: 600_000, // Shortened timeout for individual test cases (ms)\n\n // Debug configuration\n DEBUG: {\n ENABLE_TRACING: true, // Disable performance tracing for speed\n ENABLE_SCREENSHOTS: false, // Disable screenshots\n ENABLE_SNAPSHOTS: false, // Disable snapshots\n },\n} as const;\n\n// Dynamically configure renderers based on CI environment\nconst isCI = process.env.CI === 'true' || process.env.GITHUB_ACTIONS === 'true';\nexport const RENDERERS = isCI\n ? (['x-markdown'] as const) // Only test x-markdown renderer in CI\n : (['x-markdown', 'react-markdown', 'streamdown'] as const); // Test additional renderers in non-CI environments\n\n// Test file path\nexport const TEST_FILE_PATH = 'test.md';\n" }, { "path": "packages/x-markdown/src/XMarkdown/__benchmark__/tests/performance.spec.tsx", "content": "import { test } from '@playwright/experimental-ct-react';\nimport fs from 'fs';\nimport path from 'path';\nimport React from 'react';\nimport {\n Empty,\n MarkdownItRenderer,\n MarkedRenderer,\n ReactMarkdownRenderer,\n StreamdownRenderer,\n XMarkdownRenderer,\n} from '../components/MarkdownRenderer';\nimport { BENCHMARK_CONFIG, RENDERERS, TEST_FILE_PATH, TEXT_CATEGORIES } from './benchmark.config';\n\n// --- 类型定义和配置 ---\ninterface BenchmarkResult {\n name: string;\n textLength: number;\n textType: 'short' | 'medium' | 'long';\n duration: number;\n fcp: number; // 新增：FCP (First Contentful Paint)\n avgFPS: number;\n stdDevFPS: number;\n maxMemory: number;\n avgAvgMemory: number;\n memoryDelta: number;\n systemInfo: {\n userAgent: string;\n deviceMemory: number;\n hardwareConcurrency: number;\n };\n timeline: {\n fps: number[];\n memory: number[];\n timestamps: number[];\n };\n}\n\ninterface RunResult {\n duration: number;\n fcp: number;\n avgFPS: number;\n minFPS: number;\n maxFPS: number;\n maxMemory: number;\n avgMemory: number;\n totalFrames: number;\n fpsSamples: number[];\n memorySamples: number[];\n timestamps: number[];\n}\n\nconst fullText = fs.readFileSync(path.resolve(__dirname, TEST_FILE_PATH), 'utf-8');\nconst { CHUNK_SIZE, UPDATE_INTERVAL, RUN_COUNT, TEST_TEXT_LENGTHS } = BENCHMARK_CONFIG;\n\n// 根据文本长度生成测试文本\nfunction generateTextByLength(length: number): string {\n if (length <= fullText.length) {\n return fullText.substring(0, length);\n }\n\n // 如果需要的文本长度超过现有文本，则重复内容\n let result = '';\n while (result.length < length) {\n result += fullText;\n }\n return result.substring(0, length);\n}\n\n// 获取不同长度的测试文本\nconst testTexts = {\n short: generateTextByLength(TEST_TEXT_LENGTHS.short),\n medium: generateTextByLength(TEST_TEXT_LENGTHS.medium),\n long: generateTextByLength(TEST_TEXT_LENGTHS.long),\n};\n\nconst getRenderer = (name: string, md = '') => {\n switch (name) {\n case 'marked': {\n return ;\n }\n case 'markdown-it': {\n return ;\n }\n case 'react-markdown': {\n return ;\n }\n case 'x-markdown': {\n return ;\n }\n case 'streamdown': {\n return ;\n }\n default: {\n return ;\n }\n }\n};\n\ninterface PerformanceWindow extends Window {\n fpsSamples: number[];\n memorySamples: number[];\n timestamps: number[];\n startTime: number;\n lastFrameTime: number;\n initialMemory: number;\n fcpTime: number;\n}\n\ninterface PerformanceMemory {\n usedJSHeapSize: number;\n}\n\ninterface ExtendedPerformance extends Performance {\n memory?: PerformanceMemory;\n}\n\n/**\n * 在浏览器环境中注入性能跟踪脚本\n */\nasync function injectPerformanceTracker(page: any) {\n await page.evaluate(() => {\n const perfWindow = window as unknown as PerformanceWindow;\n const perf = performance as ExtendedPerformance;\n\n perfWindow.fpsSamples = [];\n perfWindow.memorySamples = [];\n perfWindow.timestamps = [];\n perfWindow.startTime = performance.now();\n perfWindow.lastFrameTime = performance.now();\n perfWindow.initialMemory = perf.memory?.usedJSHeapSize || 0;\n perfWindow.fcpTime = 0;\n\n const trackFPS = () => {\n const now = performance.now();\n const frameTime = now - perfWindow.lastFrameTime;\n if (frameTime > 0) {\n const fps = 1000 / frameTime;\n perfWindow.fpsSamples.push(fps);\n perfWindow.timestamps.push(now - perfWindow.startTime);\n\n if (perf.memory) {\n perfWindow.memorySamples.push(perf.memory.usedJSHeapSize);\n }\n }\n perfWindow.lastFrameTime = now;\n requestAnimationFrame(trackFPS);\n };\n\n // FCP 测量逻辑\n const observer = new MutationObserver(() => {\n const containers = document.querySelectorAll('.markdown-container');\n const hasContent = Array.from(containers).some(\n (container) =>\n container.children.length > 0 ||\n (container.textContent && container.textContent.trim().length > 0),\n );\n\n if (perfWindow.fcpTime === 0 && hasContent) {\n perfWindow.fcpTime = performance.now();\n observer.disconnect();\n }\n });\n\n // 立即开始观察，确保能捕获到首次内容渲染\n observer.observe(document.body, { childList: true, subtree: true, characterData: true });\n\n // 设置超时保护，防止FCP永远不触发\n setTimeout(() => {\n if (perfWindow.fcpTime === 0) {\n perfWindow.fcpTime = performance.now();\n observer.disconnect();\n }\n }, 1000);\n\n requestAnimationFrame(trackFPS);\n });\n}\n\n/**\n * 单次运行的测量逻辑\n */\nasync function measureSingleRun({\n page,\n name,\n browserName,\n component,\n testText,\n textType,\n}: {\n name: string;\n page: any;\n component: any;\n browserName: string;\n testText: string;\n textType: 'short' | 'medium' | 'long';\n}): Promise {\n await page.addInitScript(() => {\n Object.defineProperty(document, 'hidden', { value: false, writable: true });\n if ('caches' in window) {\n caches.keys().then((keys) =>\n keys.forEach((key) => {\n caches.delete(key);\n }),\n );\n }\n if ('gc' in window) {\n (window as any).gc();\n }\n\n // 确保 performance.memory 可用\n if (!('memory' in performance)) {\n (performance as any).memory = {\n usedJSHeapSize: 0,\n };\n }\n });\n\n await page.context().tracing.start({\n screenshots: false, // 禁用截图以减少开销\n snapshots: false, // 禁用快照以减少开销\n title: `Markdown_Stream_Perf_${browserName}_${name}_${textType}`,\n });\n\n // 确保浏览器有performance.memory API\n await page.addInitScript(() => {\n if (!('memory' in performance)) {\n Object.defineProperty(performance, 'memory', {\n value: {\n usedJSHeapSize: 0,\n totalJSHeapSize: 0,\n jsHeapSizeLimit: 0,\n },\n writable: true,\n });\n }\n });\n\n await injectPerformanceTracker(page);\n\n // 优化：等待第一次渲染完成，确保初始的 FPS 采样已启动\n await page.waitForTimeout(500);\n\n const startTime = await page.evaluate(() => (window as any).startTime);\n\n // 3. 流式渲染过程\n let currentText = '';\n for (let i = 0; i < testText.length; i += CHUNK_SIZE) {\n currentText = testText.substring(0, i + CHUNK_SIZE);\n\n // 关键优化：使用 setProps/update 触发更新\n await component.update(getRenderer(name, currentText));\n\n // 模拟网络延迟/流速\n await page.waitForTimeout(UPDATE_INTERVAL);\n }\n\n // 4. 等待内容完全稳定（例如，代码高亮等异步任务完成）\n // 使用更健壮的方式来等待内容渲染完成\n try {\n // 等待markdown容器出现\n await page.locator('.markdown-container').waitFor({ state: 'attached', timeout: 5000 });\n\n // 等待内容非空\n await page.waitForFunction(\n () => {\n const containers = document.querySelectorAll('.markdown-container');\n if (containers.length === 0) return false;\n\n // 检查任意一个容器是否有内容\n return Array.from(containers).some(\n (container) =>\n container.children.length > 0 ||\n (container.textContent && container.textContent.trim().length > 0),\n );\n },\n { timeout: 10000 },\n );\n\n // 额外等待一小段时间确保异步渲染完成\n await page.waitForTimeout(500);\n } catch (error) {\n console.warn(`Warning: Content stabilization wait failed for ${name}:`, error);\n // 打印当前页面状态用于调试\n const debugInfo = await page.evaluate(() => ({\n bodyContent: document.body?.innerHTML || 'empty',\n bodyText: document.body?.textContent?.trim() || 'empty',\n hasChildren: document.body?.children.length || 0,\n containers: document.querySelectorAll('.markdown-container').length,\n url: window.location.href,\n }));\n console.warn(`Debug info for ${name}:`, debugInfo);\n // 即使等待失败也继续，避免测试完全中断\n }\n\n const endTime = await page.evaluate(() => performance.now());\n const totalDuration = endTime - startTime;\n\n // 5. 停止跟踪并收集指标\n const finalMetrics = await page.evaluate((duration: number) => {\n const perfWindow = window as unknown as PerformanceWindow;\n const validFpsSamples = perfWindow.fpsSamples.filter((fps: number) => fps > 1 && fps < 120);\n\n const sum = (arr: number[]) => arr.reduce((a, b) => a + b, 0);\n\n return {\n duration,\n fcp: Math.max(0, perfWindow.fcpTime - perfWindow.startTime),\n avgFPS: validFpsSamples.length > 0 ? sum(validFpsSamples) / validFpsSamples.length : 0,\n minFPS: validFpsSamples.length > 0 ? Math.min(...validFpsSamples) : 0,\n maxFPS: validFpsSamples.length > 0 ? Math.max(...validFpsSamples) : 0,\n maxMemory: perfWindow.memorySamples.length > 0 ? Math.max(...perfWindow.memorySamples) : 0,\n avgMemory:\n perfWindow.memorySamples.length > 0\n ? sum(perfWindow.memorySamples) / perfWindow.memorySamples.length\n : 0,\n totalFrames: perfWindow.fpsSamples.length || 0,\n fpsSamples: validFpsSamples,\n memorySamples: perfWindow.memorySamples,\n timestamps: perfWindow.timestamps,\n };\n }, totalDuration);\n\n await page.context().tracing.stop({\n path: `test-results/trace-${name}-${Date.now()}.zip`,\n });\n\n return finalMetrics as RunResult;\n}\n\nasync function measure({\n page,\n name,\n browserName,\n mount,\n textType,\n}: {\n name: string;\n page: any;\n mount: any;\n browserName: string;\n textType: 'short' | 'medium' | 'long';\n}): Promise {\n const testText = testTexts[textType];\n const textLength = testText.length;\n\n console.log(\n `\\n📊 ${browserName} · ${name} · ${TEXT_CATEGORIES[textType].name} · ${RUN_COUNT} 轮测试`,\n );\n\n const component = await mount(getRenderer(name));\n const runs: RunResult[] = [];\n for (let i = 0; i < RUN_COUNT; i++) {\n console.log(` Iteration ${i + 1}/${RUN_COUNT}`);\n const result = await measureSingleRun({\n name,\n page,\n browserName,\n component,\n testText,\n textType,\n });\n runs.push(result);\n\n await page.evaluate(() => {\n if ('gc' in window) (window as any).gc();\n });\n await page.waitForTimeout(1000);\n }\n\n // 计算聚合统计值\n const avg = (key: keyof RunResult) =>\n runs.reduce((sum, r) => sum + (r[key] as number), 0) / runs.length;\n\n const avgDuration = avg('duration');\n const avgFCP = avg('fcp');\n const avgFPS = avg('avgFPS');\n const avgMaxMemory = avg('maxMemory');\n const avgAvgMemory = avg('avgMemory');\n\n // 标准差计算 - 添加保护避免除以0\n const fpsValues = runs.map((r) => r.avgFPS).filter((fps) => fps > 0);\n const meanFPS = avgFPS;\n const stdDevFPS =\n fpsValues.length > 0\n ? Math.sqrt(fpsValues.reduce((sum, fps) => sum + (fps - meanFPS) ** 2, 0) / fpsValues.length)\n : 0;\n\n // 收集系统信息\n const systemInfo = await page.evaluate(() => ({\n userAgent: navigator.userAgent,\n deviceMemory: (navigator as any).deviceMemory || 0,\n hardwareConcurrency: navigator.hardwareConcurrency || 0,\n }));\n\n // 内存增量计算 (使用第一次运行的初始内存)\n const initialMemory = runs[0].memorySamples[0] || 0;\n const memoryDelta = Math.max(0, avgMaxMemory - initialMemory);\n\n return {\n name,\n textLength,\n textType,\n duration: avgDuration,\n fcp: avgFCP,\n avgFPS,\n stdDevFPS,\n maxMemory: avgMaxMemory,\n avgAvgMemory,\n memoryDelta,\n systemInfo,\n timeline: {\n fps: runs[0].fpsSamples,\n memory: runs[0].memorySamples,\n timestamps: runs[0].timestamps,\n },\n };\n}\n\ntest.describe('Streaming Markdown Benchmark', async () => {\n const results: Array = [];\n\n // 为每个文本长度类别创建测试组\n for (const textType of ['short', 'medium', 'long'] as const) {\n test.describe(`${TEXT_CATEGORIES[textType].name}测试`, () => {\n for (const rendererName of RENDERERS) {\n test(`${rendererName}-${textType}`, async ({ page, mount, browserName }) => {\n try {\n test.setTimeout(BENCHMARK_CONFIG.TIMEOUT * RUN_COUNT);\n const result = await measure({\n name: rendererName,\n page,\n mount,\n browserName,\n textType,\n });\n results.push(result);\n } catch (error) {\n console.error(`Error in ${rendererName}-${textType}:`, error);\n results.push({\n name: rendererName,\n textLength: testTexts[textType].length,\n textType,\n duration: 0,\n fcp: 0,\n avgFPS: 0,\n stdDevFPS: 0,\n maxMemory: 0,\n avgAvgMemory: 0,\n memoryDelta: 0,\n systemInfo: { userAgent: '', deviceMemory: 0, hardwareConcurrency: 0 },\n timeline: { fps: [], memory: [], timestamps: [] },\n });\n }\n });\n }\n });\n }\n\n test.afterAll(async () => {\n if (results.length === 0) return;\n\n console.log('\\n\\n========================================================================');\n console.log('✅ 流式 Markdown 渲染 Benchmark 结果 (按文本长度分类)');\n console.log('========================================================================');\n\n // 按文本类型分组显示结果\n const groupedResults = {\n short: results.filter((r) => r.textType === 'short'),\n medium: results.filter((r) => r.textType === 'medium'),\n long: results.filter((r) => r.textType === 'long'),\n };\n\n for (const [type, typeResults] of Object.entries(groupedResults)) {\n if (typeResults.length === 0) continue;\n\n console.log(\n `\\n📊 ${TEXT_CATEGORIES[type as keyof typeof TEXT_CATEGORIES].name} (${typeResults[0].textLength} 字符)`,\n );\n console.log('='.repeat(50));\n\n console.table(\n typeResults.map((r) => ({\n Renderer: r.name,\n 'Duration(s) ↓': (r.duration / 1000).toFixed(2), // 总渲染时间，越低越好\n 'FCP(s) ↓': (r.fcp / 1000).toFixed(2), // 首次内容绘制，越低越好\n 'Avg FPS ↑': r.avgFPS.toFixed(1), // 平均帧率，越高越好\n 'StdDev FPS ↓': r.stdDevFPS.toFixed(2), // 帧率标准差，越低越流畅\n 'Memory Delta(MB) ↓': (r.memoryDelta / 1024 / 1024).toFixed(2), // 内存增量，越低越好\n 'Avg Memory(MB) ↓': (r.avgAvgMemory / 1024 / 1024).toFixed(2), // 平均内存\n })),\n );\n }\n\n // 显示跨文本长度的性能对比\n console.log('\\n\\n📈 跨文本长度性能对比');\n console.log('='.repeat(50));\n\n const comparisonData = [];\n for (const renderer of RENDERERS) {\n const rendererResults = results.filter((r) => r.name === renderer);\n if (rendererResults.length === 0) continue;\n\n const shortResult = rendererResults.find((r) => r.textType === 'short');\n const mediumResult = rendererResults.find((r) => r.textType === 'medium');\n const longResult = rendererResults.find((r) => r.textType === 'long');\n\n comparisonData.push({\n Renderer: renderer,\n '短文本(ms)': shortResult ? Math.round(shortResult.duration) : '-',\n '中文本(ms)': mediumResult ? Math.round(mediumResult.duration) : '-',\n '长文本(ms)': longResult ? Math.round(longResult.duration) : '-',\n 性能衰减:\n longResult && shortResult\n ? `${((longResult.duration / shortResult.duration - 1) * 100).toFixed(1)}%`\n : '-',\n });\n }\n\n console.table(comparisonData);\n\n console.log('\\nℹ️ 提示:');\n console.log(` - 分块大小: ${CHUNK_SIZE} 字符`);\n console.log(` - 模拟流速: ${UPDATE_INTERVAL} ms/块`);\n console.log(` - 测试配置: ${RUN_COUNT} 次运行取平均值`);\n console.log(' - 性能分析: 关注 **FCP** (用户等待时间) 和 **StdDev FPS** (卡顿程度)。');\n\n // Write benchmark results to JSON file\n const resultsDir = path.join(process.cwd(), 'test-results');\n const resultsPath = path.join(resultsDir, 'benchmark-results.json');\n\n // Ensure results directory exists\n if (!fs.existsSync(resultsDir)) {\n fs.mkdirSync(resultsDir, { recursive: true });\n }\n\n // Write results to JSON file\n fs.writeFileSync(resultsPath, JSON.stringify(results, null, 2), 'utf-8');\n console.log(`\\n📊 Benchmark results saved to: ${resultsPath}`);\n });\n});\n" }, { "path": "packages/x-markdown/src/XMarkdown/__benchmark__/tests/test.md", "content": "# Performance Test Document - Complex Markdown Structure Benchmark\n\n## 1. Introduction and Overview\n\nThis document is specifically designed to test the performance of Markdown parsers, containing various complex Markdown structures and large amounts of content. By parsing this document, we can comprehensively evaluate the parser's performance metrics when handling large-scale, complex structures.\n\n### 1.1 Test Objectives\n\n- Evaluate the parser's ability to handle large files\n- Test parsing efficiency of complex nested structures\n- Verify support for various Markdown extended syntax\n- Measure memory usage and CPU utilization\n\n### 1.2 Document Structure Description\n\nThis document contains the following main sections:\n\n1. Multi-level heading structure\n2. Large text content\n3. Complex table structures\n4. Various code blocks and syntax highlighting\n5. Nested list structures\n6. Quotes and annotations\n7. Links and images\n8. Mathematical formulas (if supported)\n\n## 2. Technical Specifications and Standards\n\n### 2.1 Markdown Standard Support\n\n| Feature | Standard Support | Extended Support | Notes |\n| ------------- | ---------------- | ---------------- | ----------------------------- |\n| Basic Syntax | ✅ | ✅ | Fully supported |\n| Tables | ✅ | ✅ | Support alignment and nesting |\n| Code Blocks | ✅ | ✅ | Support syntax highlighting |\n| Task Lists | ❌ | ✅ | Requires extended support |\n| Math Formulas | ❌ | ✅ | Requires MathJax or KaTeX |\n| Flowcharts | ❌ | ✅ | Requires Mermaid support |\n| Footnotes | ❌ | ✅ | Requires extended syntax |\n\n### 2.2 Performance Benchmark Requirements\n\n```yaml\nperformance:\n parsing:\n max_time: 1000ms\n max_memory: 50MB\n rendering:\n max_time: 2000ms\n max_memory: 100MB\n file_size:\n min: 100KB\n max: 1MB\n```\n\n## 3. Detailed Content Sections\n\n### 3.1 Long-form Content Test\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.\n\nNemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.\n\n### 3.2 Nested Structure Test\n\n#### 3.2.1 Three-level Nested Headings\n\n##### 3.2.1.1 Four-level Nested Headings\n\n###### 3.2.1.1.1 Five-level Nested Headings\n\nThis is a deeply nested heading structure used to test the parser's ability to handle deep-level headings.\n\n#### 3.2.2 List Nesting Test\n\n1. First-level list item\n - Second-level unordered list\n - Third-level unordered list\n 1. Fourth-level ordered list\n - Fifth-level mixed list\n - Sixth-level deep nesting\n - Seventh-level extreme nesting\n - Eighth-level test\n - Ninth-level boundary test\n - Tenth-level maximum nesting\n\n2. Complex list item content test\n - **Bold text** in lists\n - _Italic text_ in lists\n - `Code snippets` in lists\n - [Link text](https://example.com) in lists\n - ![Image alt](https://via.placeholder.com/50x50) in lists\n\n### 3.3 Code Block Test\n\n#### 3.3.1 Multi-language Code Highlighting\n\n```javascript\n// JavaScript code example\nclass PerformanceTest {\n constructor(name) {\n this.name = name;\n this.startTime = Date.now();\n }\n\n measureTime() {\n const endTime = Date.now();\n return endTime - this.startTime;\n }\n\n async runTests() {\n const results = [];\n for (let i = 0; i < 1000; i++) {\n results.push(await this.singleTest(i));\n }\n return results;\n }\n}\n\nconst test = new PerformanceTest('markdown-parser');\ntest.runTests().then(console.log);\n```\n\n```python\n# Python code example\nimport asyncio\nimport time\nfrom typing import List, Dict\n\nclass MarkdownBenchmark:\n def __init__(self, file_path: str):\n self.file_path = file_path\n self.results = []\n\n async def parse_file(self) -> Dict[str, float]:\n start_time = time.time()\n # Simulate complex markdown parsing process\n with open(self.file_path, 'r', encoding='utf-8') as f:\n content = f.read()\n # Complex parsing logic would be here\n parsed = self._complex_parse(content)\n\n end_time = time.time()\n return {\n 'duration': end_time - start_time,\n 'file_size': len(content),\n 'parsed_length': len(parsed)\n }\n\n def _complex_parse(self, content: str) -> str:\n # Simulate complex parsing process\n return content.upper()\n\nif __name__ == \"__main__\":\n benchmark = MarkdownBenchmark(\"test.md\")\n asyncio.run(benchmark.parse_file())\n```\n\n```sql\n-- SQL query example\nSELECT\n p.id,\n p.title,\n p.content,\n p.created_at,\n COUNT(c.id) as comment_count,\n AVG(r.rating) as avg_rating\nFROM\n posts p\nLEFT JOIN\n comments c ON p.id = c.post_id\nLEFT JOIN\n ratings r ON p.id = r.post_id\nWHERE\n p.status = 'published'\n AND p.created_at >= DATE_SUB(NOW(), INTERVAL 30 DAY)\nGROUP BY\n p.id\nORDER BY\n avg_rating DESC,\n comment_count DESC\nLIMIT 100;\n```\n\n```json\n{\n \"benchmark\": {\n \"name\": \"markdown-parser-performance\",\n \"version\": \"1.0.0\",\n \"tests\": [\n {\n \"name\": \"parsing-speed\",\n \"iterations\": 1000,\n \"expected\": {\n \"max_time_ms\": 1000,\n \"max_memory_mb\": 50\n }\n },\n {\n \"name\": \"rendering-speed\",\n \"iterations\": 100,\n \"expected\": {\n \"max_time_ms\": 2000,\n \"max_memory_mb\": 100\n }\n }\n ],\n \"metrics\": {\n \"file_size\": \"1MB\",\n \"complexity\": \"high\",\n \"structures\": [\"tables\", \"code\", \"lists\", \"quotes\", \"math\"]\n }\n }\n}\n```\n\n#### 3.3.2 Line Number Display Test\n\n```javascript {1,3-5}\n// This line shows line numbers\nfunction test() {\n // These lines also show line numbers\n const a = 1;\n const b = 2;\n return a + b; // This line does not show line numbers\n}\n```\n\n### 3.4 Math Formula Test (if supported)\n\n#### 3.4.1 Inline Formulas\n\nThis is an inline math formula: $E=mc^2$, it should render correctly. \nInline formula with Greek: $\\alpha + \\beta = \\gamma$. \nInline fraction: $\\frac{a}{b} + \\frac{c}{d} = \\frac{ad+bc}{bd}$.\n\n#### 3.4.2 Block Formulas\n\n$$\n\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}\n$$\n\n$$\n\\begin{align}\n\\frac{d}{dx}\\left( \\int_{0}^{x} f(u)\\,du\\right) &= f(x) \\\\\n\\frac{d}{dx}\\left( \\int_{a(x)}^{b(x)} f(u)\\,du\\right) &= f(b(x))b'(x) - f(a(x))a'(x)\n\\end{align}\n$$\n\n$$\n\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}\n$$\n\n$$\n\\mathbf{A} = \\begin{pmatrix}\n1 & 2 & 3 \\\\\n4 & 5 & 6 \\\\\n7 & 8 & 9\n\\end{pmatrix}\n$$\n\n$$\n\\lim_{x \\to 0} \\frac{\\sin x}{x} = 1\n$$\n\n### 3.5 Task List Test\n\n#### 3.5.1 Basic Task Lists\n\n- [x] Completed task\n- [ ] Incomplete task\n- [x] Another completed task\n- [ ] Todo item 1\n- [ ] Todo item 2\n\n#### 3.5.2 Nested Task Lists\n\n- [x] Main task\n - [x] Subtask 1\n - [ ] Subtask 2\n - [x] Sub-subtask 1\n - [ ] Sub-subtask 2\n- [ ] Independent task\n\n### 3.6 Table Complexity Test\n\n#### 3.6.1 Basic Complex Table\n\n| Header1 | Header2 | Header3 | Header4 | Header5 |\n| --------------- | -------- | -------- | ------------------ | --------------------------- |\n| Cell1 | Cell2 | Cell3 | Cell4 | Cell5 |\n| Merge cell test | | | Span three columns | |\n| New row1 | **Bold** | _Italic_ | `Code` | [Link](https://example.com) |\n\n#### 3.6.2 Nested Content Table\n\n| Feature | Description | Example | Status |\n| ---------- | ----------------------- | ---------------------------------------------- | ------ |\n| Images | Support image insertion | ![Example](https://via.placeholder.com/100x50) | ✅ |\n| Math | Support LaTeX | $E=mc^2$ | ⚠️ |\n| Flowcharts | Support Mermaid | `mermaid
    graph LR
    A-->B` | ❌ |\n| Tables | Support complex tables | As shown above | ✅ |\n\n#### 3.6.3 Large Data Table\n\n| ID | Name | Type | Size | Created | Modified | Permissions | Owner | Group | Notes |\n| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |\n| 1 | document.md | file | 1024KB | 2024-01-01 10:00:00 | 2024-01-02 11:30:00 | 644 | user1 | group1 | Main document |\n| 2 | image.png | file | 2048KB | 2024-01-01 10:30:00 | 2024-01-01 10:30:00 | 755 | user2 | group2 | Example image |\n| 3 | folder | dir | 4096KB | 2024-01-01 09:00:00 | 2024-01-03 14:20:00 | 755 | user1 | group1 | Project folder |\n| 4 | script.js | file | 512KB | 2024-01-02 15:00:00 | 2024-01-02 15:30:00 | 700 | user3 | group3 | Config file |\n| 5 | data.json | file | 256KB | 2024-01-03 09:15:00 | 2024-01-03 09:15:00 | 644 | user1 | group1 | Data file |\n\n### 3.7 Quote and Annotation Test\n\n> This is a quote block used to test quote format parsing.\n>\n> Quotes can contain multi-line content and support internal formatting:\n>\n> - **Bold text** in quotes\n> - _Italic text_ in quotes\n> - `Code snippets` in quotes\n>\n> > Nested quote\n> >\n> > > Three-level nested quote\n> > >\n> > > This is the deepest quote content, containing [links](https://example.com) and **formatted text**.\n\n### 3.8 Link and Image Test\n\n#### 3.8.1 Various Link Formats\n\n- [Inline link](https://example.com)\n- [Link with title](https://example.com 'Link title')\n- [Relative link](../README.md)\n- [Anchor link](#introduction-and-overview)\n- \n- [Reference link][reference]\n\n[reference]: https://example.com 'Reference link'\n\n#### 3.8.2 Image Test\n\n![Regular image](https://via.placeholder.com/200x100) ![Image with alt](https://via.placeholder.com/200x100 'Image title') ![Small icon](https://via.placeholder.com/16x16)\n\n## 4. Repetitive Content Test (increasing file size)\n\n### 4.1 Repeated Paragraph 1\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\n### 4.2 Repeated Paragraph 2\n\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n\n### 4.3 Repeated Paragraph 3\n\nSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.\n\n### 4.4 Repeated Paragraph 4\n\nNemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.\n\n### 4.5 Repeated Paragraph 5\n\nNeque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.\n\n## 5. Large Table Data\n\n### 5.1 Performance Test Data Table\n\n| Test Case | File Size | Parse Time | Memory Usage | CPU Usage | Status |\n| ---------------- | --------- | ---------- | ------------ | --------- | ------ |\n| Small file | 1KB | 5ms | 2MB | 5% | ✅ |\n| Medium file | 10KB | 25ms | 5MB | 15% | ✅ |\n| Large file | 100KB | 150ms | 15MB | 45% | ✅ |\n| Extra large file | 1MB | 1200ms | 50MB | 85% | ⚠️ |\n| Extreme file | 10MB | 15000ms | 200MB | 95% | ❌ |\n\n### 5.2 Feature Support Matrix\n\n| Parser | Basic Syntax | Tables | Code Highlighting | Math Formulas | Flowcharts | Footnotes | Task Lists |\n| --- | --- | --- | --- | --- | --- | --- | --- |\n| ParserA | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ |\n| ParserB | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ |\n| ParserC | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |\n| ParserD | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |\n\n## 6. Complex Nested Structure Test\n\n### 6.1 Code Blocks in Lists\n\n1. Code block in ordered list\n\n ```python\n def test_function():\n print(\"This is a code block in an ordered list\")\n return True\n ```\n\n2. Another code block\n ```javascript\n const listItemCode = () => {\n console.log('JavaScript code in list item');\n };\n ```\n\n### 6.2 Lists in Quotes\n\n> Lists in quotes:\n>\n> 1. First item\n> - Subitem 1\n> - Subitem 2\n> 2. Second item\n> - Subitem A\n> - Subitem B\n\n### 6.3 Code in Tables\n\n| Language | Example Code | Description |\n| ---------- | ----------------------------------- | --------------- |\n| Python | `print(\"Hello World\")` | Simple output |\n| JavaScript | `console.log(\"Hello World\")` | Console output |\n| Java | `System.out.println(\"Hello World\")` | Standard output |\n\n## 7. Boundary Test Cases\n\n### 7.1 Special Character Test\n\n#### 7.1.1 Escape Characters\n\n\\*This is not italic\\* \\*\\*This is not bold\\*\\* \\`This is not code\\` \\[This is not a link\\](https://example.com)\n\n#### 7.1.2 HTML Entities\n\n
    HTML entity test
    \n© 2024 Copyright\n™ Trademark symbol\n& \" '\n\n### 7.2 Extreme Format Test\n\n**Bold text with _italic_ text** _Italic text with **bold** text_ ~~Strikethrough text with **bold** text~~\n\n### 7.3 Link Nesting Test\n\n- [Link with `code`](https://example.com)\n- [Link with **bold**](https://example.com)\n- [Link with _italic_](https://example.com)\n\n## 8. Summary\n\nThis document contains rich Markdown structures and content for comprehensive testing of Markdown parser performance. By parsing this document containing various complex elements, we can effectively evaluate the parser's performance in real-world application scenarios.\n\n### 8.1 Test Points Summary\n\n1. **Parsing Speed**: Document size is approximately 1MB, contains large amounts of complex structures\n2. **Memory Usage**: Requires processing large amounts of nested structures and formatted content\n3. **Feature Completeness**: Tests support for various Markdown extended syntax\n4. **Error Handling**: Includes boundary cases and special character tests\n\n### 8.2 Performance Metrics\n\n- Total document characters: ~15,000 characters\n- Maximum heading level: 6 levels\n- Number of tables: 10\n- Number of code blocks: 15\n- Maximum list nesting level: 10 levels\n- Number of images: 5\n- Number of links: 20\n\n---\n\n_This document was generated in 2024, specifically for Markdown parser performance testing._\n" }, { "path": "packages/x-markdown/src/XMarkdown/__tests__/AnimationText.test.tsx", "content": "import { act, render, screen } from '@testing-library/react';\nimport React from 'react';\nimport AnimationText from '../AnimationText';\n\ndescribe('AnimationText Component', () => {\n beforeEach(() => {\n jest.useFakeTimers();\n });\n\n afterEach(() => {\n jest.useRealTimers();\n });\n\n it('should render text without animation when no change', () => {\n render();\n expect(screen.getByText('test')).toBeInTheDocument();\n });\n\n it('should apply custom animation config', () => {\n const customConfig = {\n fadeDuration: 300,\n easing: 'ease-in',\n };\n render();\n expect(screen.getByText('test')).toBeInTheDocument();\n });\n\n it('should handle text animation with fade effect', () => {\n render(\n ,\n );\n\n expect(screen.getByText('Hello')).toBeInTheDocument();\n\n // Test text update with animation\n render(\n ,\n );\n expect(screen.getByText('Hello World')).toBeInTheDocument();\n });\n\n it('should handle animation completion when elapsed time exceeds fadeDuration', () => {\n render(\n ,\n );\n\n // Mock performance.now and requestAnimationFrame\n const mockNow = jest.spyOn(performance, 'now');\n const mockRaf = jest.spyOn(window, 'requestAnimationFrame');\n\n mockNow.mockReturnValue(1000);\n let rafCallback: FrameRequestCallback = () => {};\n mockRaf.mockImplementation((callback) => {\n rafCallback = callback;\n return 1;\n });\n\n render(\n ,\n );\n\n // Test the animation callback with elapsed >= fadeDuration\n act(() => {\n mockNow.mockReturnValue(1101); // 101ms elapsed >= 100ms fadeDuration\n rafCallback(1101);\n });\n\n // The text should be fully updated\n expect(screen.getByText('Hello World')).toBeInTheDocument();\n\n mockNow.mockRestore();\n mockRaf.mockRestore();\n });\n\n it('should handle startTimeRef being null in animation callback', () => {\n const { rerender } = render(\n ,\n );\n\n // Mock requestAnimationFrame to directly call the callback\n const mockRaf = jest.spyOn(window, 'requestAnimationFrame');\n mockRaf.mockImplementation((callback) => {\n // Call the callback with a timestamp, but we'll ensure startTimeRef is null\n callback(1000);\n return 1;\n });\n\n // Force re-render to trigger animation logic\n rerender(\n ,\n );\n\n // This should not throw any errors and should early return\n expect(() => {\n act(() => {\n jest.advanceTimersByTime(50);\n });\n }).not.toThrow();\n\n mockRaf.mockRestore();\n });\n\n it('should handle empty text', () => {\n const { container } = render();\n expect(container.querySelector('span')).not.toBeInTheDocument();\n });\n\n it('should handle null/undefined children gracefully', () => {\n const { container } = render();\n // When text is null/undefined, it gets converted to empty string and renders empty span\n expect(container.querySelectorAll('span')).toHaveLength(1);\n expect(container.querySelector('span')).toBeEmptyDOMElement();\n });\n\n it('should handle text that is not a prefix of previous text', () => {\n render(\n ,\n );\n\n expect(screen.getByText('Hello')).toBeInTheDocument();\n\n // Test text that is not a prefix (completely different text)\n render(\n ,\n );\n expect(screen.getByText('World')).toBeInTheDocument();\n });\n\n it('should handle same text re-render without animation', () => {\n const { rerender } = render(\n ,\n );\n\n expect(screen.getByText('Hello')).toBeInTheDocument();\n\n // Re-render with same text\n rerender(\n ,\n );\n expect(screen.getByText('Hello')).toBeInTheDocument();\n });\n\n it('should test animation loop with requestAnimationFrame', () => {\n // Skip this test as it requires complex animation logic testing\n // The actual animation behavior is tested in other test cases\n expect(true).toBe(true);\n });\n\n it('should use default animation values when config is not provided', () => {\n render();\n expect(screen.getByText('test')).toBeInTheDocument();\n });\n});\n" }, { "path": "packages/x-markdown/src/XMarkdown/__tests__/DebugPanel.test.tsx", "content": "import { act, fireEvent, render, screen } from '@testing-library/react';\nimport React from 'react';\nimport '@testing-library/jest-dom';\nimport DebugPanel from '../DebugPanel/DebugPanel';\n\n// Mock performance API with incremental values to ensure delta >= 1000\nlet performanceNowValue = 1000;\nconst mockPerformance = {\n now: jest.fn(() => {\n const value = performanceNowValue;\n performanceNowValue += 2000;\n return value;\n }),\n memory: {\n usedJSHeapSize: 1024 * 1024 * 50,\n },\n};\n\n// Store RAF callbacks for manual triggering\nlet rafCallbacks: FrameRequestCallback[] = [];\nlet mockRafId = 1;\n\nconst mockRequestAnimationFrame = jest.fn((callback: FrameRequestCallback) => {\n rafCallbacks.push(callback);\n return mockRafId++;\n});\n\nconst mockCancelAnimationFrame = jest.fn(() => {});\n\n// Helper to trigger all RAF callbacks\nconst triggerRaf = () => {\n const callbacks = [...rafCallbacks];\n rafCallbacks = [];\n callbacks.forEach((cb) => {\n try {\n cb(16);\n } catch (e) {\n console.error(e);\n // Ignore errors\n }\n });\n};\n\n// Mock window dimensions\nObject.defineProperty(window, 'innerWidth', { value: 1024, writable: true });\nObject.defineProperty(window, 'innerHeight', { value: 768, writable: true });\n\ndescribe('DebugPanel', () => {\n let originalAddEventListener: typeof document.addEventListener;\n let originalRemoveEventListener: typeof document.removeEventListener;\n let mouseMoveHandler: ((e: MouseEvent) => void) | null = null;\n let mouseUpHandler: ((e: MouseEvent) => void) | null = null;\n\n beforeEach(() => {\n jest.clearAllMocks();\n jest.useFakeTimers();\n rafCallbacks = [];\n performanceNowValue = 1000;\n mockRafId = 1;\n mouseMoveHandler = null;\n mouseUpHandler = null;\n\n mockPerformance.now.mockClear();\n\n Object.defineProperty(global, 'performance', {\n value: mockPerformance,\n writable: true,\n });\n\n global.requestAnimationFrame = mockRequestAnimationFrame;\n global.cancelAnimationFrame = mockCancelAnimationFrame;\n\n // Capture event listeners to test drag handlers\n originalAddEventListener = document.addEventListener;\n originalRemoveEventListener = document.removeEventListener;\n\n document.addEventListener = jest.fn(\n (event: string, handler: EventListenerOrEventListenerObject) => {\n if (event === 'mousemove') {\n mouseMoveHandler = handler as (e: MouseEvent) => void;\n }\n if (event === 'mouseup') {\n mouseUpHandler = handler as (e: MouseEvent) => void;\n }\n return originalAddEventListener.call(document, event, handler);\n },\n ) as any;\n\n document.removeEventListener = jest.fn(\n (event: string, handler: EventListenerOrEventListenerObject) => {\n if (event === 'mousemove') {\n mouseMoveHandler = null;\n }\n if (event === 'mouseup') {\n mouseUpHandler = null;\n }\n return originalRemoveEventListener.call(document, event, handler);\n },\n ) as any;\n });\n\n afterEach(() => {\n jest.runOnlyPendingTimers();\n jest.useRealTimers();\n document.addEventListener = originalAddEventListener;\n document.removeEventListener = originalRemoveEventListener;\n });\n\n describe('Basic Rendering', () => {\n it('should render correctly', () => {\n const { container } = render();\n expect(container).toMatchSnapshot();\n });\n\n it('should display FPS and Memory labels', () => {\n render();\n expect(screen.getByText('FPS')).toBeInTheDocument();\n expect(screen.getByText('Memory')).toBeInTheDocument();\n });\n\n it('should display record button', () => {\n render();\n expect(screen.getByText('⏺ Record')).toBeInTheDocument();\n });\n });\n\n describe('Recording Functionality', () => {\n it('should start recording when record button is clicked', () => {\n render();\n fireEvent.click(screen.getByText('⏺ Record'));\n expect(screen.getByText('⏹ Stop')).toBeInTheDocument();\n });\n\n it('should stop recording when stop button is clicked', () => {\n render();\n fireEvent.click(screen.getByText('⏺ Record'));\n fireEvent.click(screen.getByText('⏹ Stop'));\n expect(screen.getByText('⏺ Record')).toBeInTheDocument();\n });\n\n it('should record data with RAF triggers', () => {\n render();\n fireEvent.click(screen.getByText('⏺ Record'));\n\n act(() => {\n triggerRaf();\n triggerRaf();\n });\n\n fireEvent.click(screen.getByText('⏹ Stop'));\n\n act(() => {\n triggerRaf();\n });\n\n expect(screen.getByText('⏺ Record')).toBeInTheDocument();\n });\n\n it('should collect performance data during recording', () => {\n render();\n\n fireEvent.click(screen.getByText('⏺ Record'));\n\n act(() => {\n // Trigger enough RAF cycles to collect data\n for (let i = 0; i < 5; i++) {\n triggerRaf();\n }\n });\n\n fireEvent.click(screen.getByText('⏹ Stop'));\n\n act(() => {\n triggerRaf();\n });\n\n expect(screen.getByText('⏺ Record')).toBeInTheDocument();\n });\n });\n\n describe('Memory Display', () => {\n it('should display memory value', () => {\n render();\n expect(screen.getByText(/50\\.00 MB|0 KB/)).toBeInTheDocument();\n });\n\n it('should handle missing performance.memory', () => {\n const perfWithoutMemory = { ...mockPerformance };\n delete (perfWithoutMemory as any).memory;\n\n Object.defineProperty(global, 'performance', {\n value: perfWithoutMemory,\n writable: true,\n });\n\n render();\n expect(screen.getByText('0')).toBeInTheDocument();\n });\n\n it('should update memory when RAF triggers', () => {\n render();\n\n act(() => {\n triggerRaf();\n });\n\n expect(screen.getByText('Memory')).toBeInTheDocument();\n });\n });\n\n describe('Drag Functionality', () => {\n it('should handle mouse down event', () => {\n render();\n const panel = screen.getByText('FPS').parentElement?.parentElement;\n expect(panel).toBeInTheDocument();\n\n if (panel) {\n fireEvent.mouseDown(panel, { clientX: 100, clientY: 100 });\n }\n });\n\n it('should not start dragging when clicking on action buttons', () => {\n render();\n const recordButton = screen.getByText('⏺ Record');\n fireEvent.mouseDown(recordButton, { clientX: 100, clientY: 100 });\n expect(screen.getByText('⏺ Record')).toBeInTheDocument();\n });\n\n it('should handle complete drag flow', () => {\n const { container } = render();\n const panel = container.querySelector('.x-markdown-debug-panel');\n\n expect(panel).toBeInTheDocument();\n\n if (panel) {\n fireEvent.mouseDown(panel, { clientX: 100, clientY: 100 });\n\n act(() => {\n // Trigger mouse move through captured handler to cover lines 153-156\n if (mouseMoveHandler) {\n mouseMoveHandler(new MouseEvent('mousemove', { clientX: 120, clientY: 120 }));\n mouseMoveHandler(new MouseEvent('mousemove', { clientX: 140, clientY: 140 }));\n }\n });\n\n act(() => {\n // Trigger mouse up through captured handler to cover line 160\n if (mouseUpHandler) {\n mouseUpHandler(new MouseEvent('mouseup'));\n }\n });\n\n // Cursor should be either 'grab' or 'grabbing' depending on React state update timing\n expect(['grab', 'grabbing']).toContain((panel as HTMLElement)?.style.cursor);\n }\n });\n\n it('should update position on mouse move', () => {\n const { container } = render();\n const panel = container.querySelector('.x-markdown-debug-panel');\n\n expect(panel).toBeInTheDocument();\n\n if (panel) {\n fireEvent.mouseDown(panel, { clientX: 100, clientY: 100 });\n\n act(() => {\n if (mouseMoveHandler) {\n mouseMoveHandler(new MouseEvent('mousemove', { clientX: 150, clientY: 150 }));\n }\n });\n\n expect((panel as HTMLElement)?.style.cursor).toBeTruthy();\n }\n });\n\n it('should stop dragging on mouse up', () => {\n const { container } = render();\n const panel = container.querySelector('.x-markdown-debug-panel');\n\n expect(panel).toBeInTheDocument();\n\n if (panel) {\n fireEvent.mouseDown(panel, { clientX: 100, clientY: 100 });\n\n act(() => {\n if (mouseMoveHandler) {\n mouseMoveHandler(new MouseEvent('mousemove', { clientX: 150, clientY: 150 }));\n }\n if (mouseUpHandler) {\n mouseUpHandler(new MouseEvent('mouseup'));\n }\n });\n\n expect((panel as HTMLElement)?.style.cursor).toBe('grab');\n }\n });\n\n it('should trigger handleMouseMove multiple times', () => {\n const { container } = render();\n const panel = container.querySelector('.x-markdown-debug-panel');\n\n if (panel) {\n fireEvent.mouseDown(panel, { clientX: 100, clientY: 100 });\n\n act(() => {\n // Multiple mouse moves to ensure lines 153-156 are covered\n if (mouseMoveHandler) {\n mouseMoveHandler(new MouseEvent('mousemove', { clientX: 110, clientY: 110 }));\n mouseMoveHandler(new MouseEvent('mousemove', { clientX: 120, clientY: 120 }));\n mouseMoveHandler(new MouseEvent('mousemove', { clientX: 130, clientY: 130 }));\n mouseMoveHandler(new MouseEvent('mousemove', { clientX: 140, clientY: 140 }));\n }\n });\n\n act(() => {\n if (mouseUpHandler) {\n mouseUpHandler(new MouseEvent('mouseup'));\n }\n });\n\n // Cursor should be either 'grab' or 'grabbing' depending on React state update timing\n expect(['grab', 'grabbing']).toContain((panel as HTMLElement)?.style.cursor);\n }\n });\n });\n\n describe('Modal Functionality', () => {\n it('should not show modal initially', () => {\n render();\n expect(screen.queryByText('Performance Recording')).not.toBeInTheDocument();\n });\n\n it('should show modal after recording with data', () => {\n render();\n\n fireEvent.click(screen.getByText('⏺ Record'));\n\n act(() => {\n // Trigger multiple RAF cycles to collect data\n for (let i = 0; i < 10; i++) {\n triggerRaf();\n }\n });\n\n fireEvent.click(screen.getByText('⏹ Stop'));\n\n act(() => {\n triggerRaf();\n });\n\n // Try to find view button and modal\n const viewButton = screen.queryByText('📊 View');\n if (viewButton) {\n fireEvent.click(viewButton);\n const modal = screen.queryByText('Performance Recording');\n expect(modal).toBeInTheDocument();\n }\n });\n\n it('should render modal overlay and content', () => {\n render();\n\n fireEvent.click(screen.getByText('⏺ Record'));\n\n act(() => {\n for (let i = 0; i < 10; i++) {\n triggerRaf();\n }\n });\n\n fireEvent.click(screen.getByText('⏹ Stop'));\n\n act(() => {\n triggerRaf();\n });\n\n const viewButton = screen.queryByText('📊 View');\n if (viewButton) {\n fireEvent.click(viewButton);\n\n // Check for modal overlay\n const modalOverlay = document.querySelector('.x-markdown-debug-modal-overlay');\n if (modalOverlay) {\n expect(modalOverlay).toBeInTheDocument();\n }\n\n // Check for modal content\n const modalContent = document.querySelector('.x-markdown-debug-modal');\n if (modalContent) {\n expect(modalContent).toBeInTheDocument();\n }\n }\n });\n\n it('should close modal when clicking close button', () => {\n render();\n\n fireEvent.click(screen.getByText('⏺ Record'));\n\n act(() => {\n for (let i = 0; i < 10; i++) {\n triggerRaf();\n }\n });\n\n fireEvent.click(screen.getByText('⏹ Stop'));\n\n act(() => {\n triggerRaf();\n });\n\n const viewButton = screen.queryByText('📊 View');\n if (viewButton) {\n fireEvent.click(viewButton);\n\n const closeButton = screen.queryByText('✕');\n if (closeButton) {\n fireEvent.click(closeButton);\n }\n }\n });\n\n it('should close modal when clicking overlay', () => {\n render();\n\n fireEvent.click(screen.getByText('⏺ Record'));\n\n act(() => {\n for (let i = 0; i < 10; i++) {\n triggerRaf();\n }\n });\n\n fireEvent.click(screen.getByText('⏹ Stop'));\n\n act(() => {\n triggerRaf();\n });\n\n const viewButton = screen.queryByText('📊 View');\n if (viewButton) {\n fireEvent.click(viewButton);\n\n const overlay = screen\n .queryByText('Performance Recording')\n ?.closest('.x-markdown-debug-modal-overlay');\n if (overlay) {\n fireEvent.click(overlay);\n }\n }\n });\n });\n\n describe('PerformanceChart', () => {\n it('should not render chart when no records', () => {\n render();\n expect(screen.queryByRole('img')).not.toBeInTheDocument();\n });\n\n it('should render chart when data is collected', () => {\n render();\n\n fireEvent.click(screen.getByText('⏺ Record'));\n\n act(() => {\n triggerRaf();\n triggerRaf();\n });\n\n fireEvent.click(screen.getByText('⏹ Stop'));\n\n act(() => {\n triggerRaf();\n });\n\n expect(screen.getByText('⏺ Record')).toBeInTheDocument();\n });\n\n it('should render chart with all elements', () => {\n render();\n\n fireEvent.click(screen.getByText('⏺ Record'));\n\n act(() => {\n for (let i = 0; i < 15; i++) {\n triggerRaf();\n }\n });\n\n fireEvent.click(screen.getByText('⏹ Stop'));\n\n act(() => {\n triggerRaf();\n });\n\n const viewButton = screen.queryByText('📊 View');\n if (viewButton) {\n fireEvent.click(viewButton);\n\n // Check for SVG chart\n const svg = document.querySelector('.x-markdown-debug-chart-full');\n if (svg) {\n expect(svg).toBeInTheDocument();\n }\n }\n });\n });\n\n describe('Cleanup', () => {\n it('should cleanup event listeners on unmount', () => {\n const { unmount } = render();\n unmount();\n\n expect(document.removeEventListener).toHaveBeenCalledWith('mousemove', expect.any(Function));\n expect(document.removeEventListener).toHaveBeenCalledWith('mouseup', expect.any(Function));\n });\n\n it('should cancel animation frame on unmount', () => {\n mockRequestAnimationFrame.mockImplementation((callback) => {\n setTimeout(callback, 16);\n return 123;\n });\n\n const { unmount } = render();\n jest.advanceTimersByTime(16);\n unmount();\n\n expect(mockCancelAnimationFrame).toHaveBeenCalled();\n });\n });\n\n describe('FPS Display', () => {\n it('should display FPS value', () => {\n render();\n expect(screen.getByText('0')).toBeInTheDocument();\n });\n\n it('should apply correct color for low FPS', () => {\n render();\n const fpsElement = screen.getByText('0');\n expect(fpsElement).toHaveStyle('color: #ff4d4f');\n });\n\n it('should update FPS on RAF trigger', () => {\n render();\n\n act(() => {\n triggerRaf();\n });\n\n expect(screen.getByText('FPS')).toBeInTheDocument();\n });\n\n it('should apply warning color for medium FPS', () => {\n // Reset performance.now to simulate lower FPS\n performanceNowValue = 1000;\n render();\n\n act(() => {\n triggerRaf();\n });\n\n // FPS should be displayed\n expect(screen.getByText('FPS')).toBeInTheDocument();\n });\n\n it('should apply good color for high FPS', () => {\n // Reset and trigger RAF to get FPS reading\n performanceNowValue = 1000;\n render();\n\n act(() => {\n triggerRaf();\n });\n\n expect(screen.getByText('FPS')).toBeInTheDocument();\n });\n });\n\n describe('Memory Format Edge Cases', () => {\n it('should handle zero memory', () => {\n mockPerformance.memory.usedJSHeapSize = 0;\n render();\n expect(screen.getByText('0')).toBeInTheDocument();\n });\n\n it('should handle small memory in KB', () => {\n mockPerformance.memory.usedJSHeapSize = 512 * 1024;\n render();\n expect(screen.getByText('0 KB')).toBeInTheDocument();\n });\n\n it('should handle large memory in GB', () => {\n mockPerformance.memory.usedJSHeapSize = 2 * 1024 * 1024 * 1024;\n render();\n expect(screen.getByText('Memory')).toBeInTheDocument();\n });\n });\n\n describe('Coverage - Critical Paths', () => {\n it('should cover drag event handlers thoroughly', () => {\n const { container } = render();\n const panel = container.querySelector('.x-markdown-debug-panel');\n\n if (panel) {\n // First drag cycle\n fireEvent.mouseDown(panel, { clientX: 100, clientY: 100 });\n\n act(() => {\n if (mouseMoveHandler) {\n // These calls cover lines 153-156\n mouseMoveHandler(new MouseEvent('mousemove', { clientX: 110, clientY: 110 }));\n mouseMoveHandler(new MouseEvent('mousemove', { clientX: 120, clientY: 120 }));\n mouseMoveHandler(new MouseEvent('mousemove', { clientX: 130, clientY: 130 }));\n }\n\n if (mouseUpHandler) {\n // This covers line 160\n mouseUpHandler(new MouseEvent('mouseup'));\n }\n });\n\n // Second drag cycle\n fireEvent.mouseDown(panel, { clientX: 200, clientY: 200 });\n\n act(() => {\n if (mouseMoveHandler) {\n mouseMoveHandler(new MouseEvent('mousemove', { clientX: 210, clientY: 210 }));\n mouseMoveHandler(new MouseEvent('mousemove', { clientX: 220, clientY: 220 }));\n }\n\n if (mouseUpHandler) {\n mouseUpHandler(new MouseEvent('mouseup'));\n }\n });\n\n expect((panel as HTMLElement)?.style.cursor).toBe('grab');\n }\n });\n\n it('should ensure modal JSX is rendered', () => {\n const { container } = render();\n\n // Start recording\n fireEvent.click(screen.getByText('⏺ Record'));\n\n // Force data collection\n act(() => {\n for (let i = 0; i < 20; i++) {\n triggerRaf();\n }\n });\n\n // Stop recording - this should trigger showModal(true)\n fireEvent.click(screen.getByText('⏹ Stop'));\n\n act(() => {\n triggerRaf();\n });\n\n // Check for view button\n const viewButton = screen.queryByText('📊 View');\n if (viewButton) {\n fireEvent.click(viewButton);\n\n // Check for all modal elements\n const modal = screen.queryByText('Performance Recording');\n if (modal) {\n expect(modal).toBeInTheDocument();\n\n // Check for modal header\n const header = document.querySelector('.x-markdown-debug-modal-header');\n if (header) {\n expect(header).toBeInTheDocument();\n }\n\n // Check for close button\n const closeButton = screen.queryByText('✕');\n if (closeButton) {\n expect(closeButton).toBeInTheDocument();\n }\n }\n }\n\n expect(container.querySelector('.x-markdown-debug-panel')).toBeInTheDocument();\n });\n\n it('should test getInitialPosition with various window sizes', () => {\n const sizes = [\n { width: 1024, height: 768 },\n { width: 1920, height: 1080 },\n { width: 2560, height: 1440 },\n { width: 3840, height: 2160 },\n ];\n\n sizes.forEach(({ width, height }) => {\n Object.defineProperty(window, 'innerWidth', { value: width, writable: true });\n Object.defineProperty(window, 'innerHeight', { value: height, writable: true });\n\n const { container } = render();\n const panel = container.querySelector('.x-markdown-debug-panel');\n\n expect(panel).toBeInTheDocument();\n expect((panel as HTMLElement)?.style.left).toBeTruthy();\n expect((panel as HTMLElement)?.style.top).toBeTruthy();\n });\n });\n\n it('should test all memory formatting functions', () => {\n const testCases = [\n { size: 0 },\n { size: 512 * 1024 },\n { size: 1024 * 1024 },\n { size: 1024 * 1024 * 500 },\n { size: 1024 * 1024 * 1024 },\n { size: 2 * 1024 * 1024 * 1024 },\n ];\n\n testCases.forEach(({ size }) => {\n mockPerformance.memory.usedJSHeapSize = size;\n const { container } = render();\n expect(container.querySelector('.x-markdown-debug-panel')).toBeInTheDocument();\n });\n });\n\n it('should test FPS color thresholds', () => {\n render();\n\n // Low FPS (danger color)\n const fpsElement = screen.getByText('0');\n expect(fpsElement).toHaveStyle('color: #ff4d4f');\n\n act(() => {\n triggerRaf();\n });\n });\n\n it('should complete full recording and modal display cycle', () => {\n const { container } = render();\n\n // Initial state\n expect(screen.getByText('⏺ Record')).toBeInTheDocument();\n\n // Start recording\n fireEvent.click(screen.getByText('⏺ Record'));\n expect(screen.getByText('⏹ Stop')).toBeInTheDocument();\n\n // Collect data\n act(() => {\n for (let i = 0; i < 15; i++) {\n triggerRaf();\n }\n });\n\n // Stop recording\n fireEvent.click(screen.getByText('⏹ Stop'));\n\n act(() => {\n triggerRaf();\n });\n\n // Check for view button\n expect(screen.getByText('⏺ Record')).toBeInTheDocument();\n const viewButton = screen.queryByText('📊 View');\n\n if (viewButton) {\n fireEvent.click(viewButton);\n\n // Modal should be visible\n const modal = screen.queryByText('Performance Recording');\n if (modal) {\n expect(modal).toBeInTheDocument();\n\n // Try to close via close button\n const closeButton = screen.queryByText('✕');\n if (closeButton) {\n fireEvent.click(closeButton);\n }\n }\n }\n\n expect(container.querySelector('.x-markdown-debug-panel')).toBeInTheDocument();\n });\n\n it('should test non-recording path in RAF update', () => {\n const { container } = render();\n\n // Don't start recording, just trigger RAF\n act(() => {\n triggerRaf();\n triggerRaf();\n });\n\n // FPS should update even without recording\n expect(screen.getByText('FPS')).toBeInTheDocument();\n expect(container.querySelector('.x-markdown-debug-panel')).toBeInTheDocument();\n });\n\n it('should test drag handler when not dragging', () => {\n render();\n\n // Trigger mouse move without mouse down first\n act(() => {\n if (mouseMoveHandler) {\n mouseMoveHandler(new MouseEvent('mousemove', { clientX: 100, clientY: 100 }));\n }\n });\n\n // Panel should still be rendered normally\n expect(screen.getByText('FPS')).toBeInTheDocument();\n });\n\n it('should test frameTimesRef shift when length exceeds 60', () => {\n render();\n\n fireEvent.click(screen.getByText('⏺ Record'));\n\n act(() => {\n // Trigger many RAF cycles to fill frameTimesRef\n for (let i = 0; i < 65; i++) {\n triggerRaf();\n }\n });\n\n fireEvent.click(screen.getByText('⏹ Stop'));\n\n act(() => {\n triggerRaf();\n });\n\n expect(screen.getByText('⏺ Record')).toBeInTheDocument();\n });\n\n it('should test modal stopPropagation on content click', () => {\n render();\n\n fireEvent.click(screen.getByText('⏺ Record'));\n\n act(() => {\n for (let i = 0; i < 10; i++) {\n triggerRaf();\n }\n });\n\n fireEvent.click(screen.getByText('⏹ Stop'));\n\n act(() => {\n triggerRaf();\n });\n\n const viewButton = screen.queryByText('📊 View');\n if (viewButton) {\n fireEvent.click(viewButton);\n\n // Click on modal content (should not close modal)\n const modalContent = document.querySelector('.x-markdown-debug-modal');\n if (modalContent) {\n fireEvent.click(modalContent);\n }\n\n // Modal should still be visible\n const modal = screen.queryByText('Performance Recording');\n if (modal) {\n expect(modal).toBeInTheDocument();\n }\n }\n });\n\n it('should test toggleRecording reset when starting new recording', () => {\n const { container } = render();\n\n // First recording\n fireEvent.click(screen.getByText('⏺ Record'));\n\n act(() => {\n for (let i = 0; i < 10; i++) {\n triggerRaf();\n }\n });\n\n fireEvent.click(screen.getByText('⏹ Stop'));\n\n act(() => {\n triggerRaf();\n });\n\n // Start second recording - should reset recordingRef\n fireEvent.click(screen.getByText('⏺ Record'));\n\n act(() => {\n for (let i = 0; i < 10; i++) {\n triggerRaf();\n }\n });\n\n fireEvent.click(screen.getByText('⏹ Stop'));\n\n act(() => {\n triggerRaf();\n });\n\n expect(container.querySelector('.x-markdown-debug-panel')).toBeInTheDocument();\n });\n });\n\n describe('Snapshot Tests', () => {\n it('should match snapshot when recording', () => {\n const { container } = render();\n fireEvent.click(screen.getByText('⏺ Record'));\n expect(container).toMatchSnapshot();\n });\n\n it('should match snapshot after stopping recording', () => {\n const { container } = render();\n\n fireEvent.click(screen.getByText('⏺ Record'));\n\n act(() => {\n triggerRaf();\n triggerRaf();\n });\n\n fireEvent.click(screen.getByText('⏹ Stop'));\n\n act(() => {\n triggerRaf();\n });\n\n expect(container).toMatchSnapshot();\n });\n\n it('should match snapshot with modal open', () => {\n const { container } = render();\n\n fireEvent.click(screen.getByText('⏺ Record'));\n\n act(() => {\n for (let i = 0; i < 10; i++) {\n triggerRaf();\n }\n });\n\n fireEvent.click(screen.getByText('⏹ Stop'));\n\n act(() => {\n triggerRaf();\n });\n\n const viewButton = screen.queryByText('📊 View');\n if (viewButton) {\n fireEvent.click(viewButton);\n }\n\n expect(container).toMatchSnapshot();\n });\n });\n});\n" }, { "path": "packages/x-markdown/src/XMarkdown/__tests__/Parser.test.ts", "content": "import Parser, { escapeHtml } from '../core/Parser';\n\ndescribe('Parser', () => {\n it('should render paragraphs with custom tag when paragraphTag is provided', () => {\n const parser = new Parser({ paragraphTag: 'div' });\n const result = parser.parse('This is a paragraph.');\n expect(result).toBe('
    This is a paragraph.
    \\n');\n });\n\n it('should render paragraphs with default p tag when paragraphTag is not provided', () => {\n const parser = new Parser();\n const result = parser.parse('This is a paragraph.');\n expect(result).toBe('

    This is a paragraph.

    \\n');\n });\n\n it('should render multiple paragraphs with custom tag', () => {\n const parser = new Parser({ paragraphTag: 'section' });\n const result = parser.parse('This is the first paragraph.\\n\\nThis is the second paragraph.');\n expect(result).toBe(\n '
    This is the first paragraph.
    \\n
    This is the second paragraph.
    \\n',\n );\n });\n\n describe('openLinksInNewTab', () => {\n it('should add target=\"_blank\" and rel=\"noopener noreferrer\" to links when openLinksInNewTab is true', () => {\n const parser = new Parser({ openLinksInNewTab: true });\n const result = parser.parse('[Example](https://example.com)');\n expect(result).toBe(\n '

    Example

    \\n',\n );\n });\n\n it('should not add target and rel attributes when openLinksInNewTab is false', () => {\n const parser = new Parser({ openLinksInNewTab: false });\n const result = parser.parse('[Example](https://example.com)');\n expect(result).toBe('

    Example

    \\n');\n });\n\n it('should not add target and rel attributes when openLinksInNewTab is not provided', () => {\n const parser = new Parser();\n const result = parser.parse('[Example](https://example.com)');\n expect(result).toBe('

    Example

    \\n');\n });\n\n it('should handle links with title attribute when openLinksInNewTab is true', () => {\n const parser = new Parser({ openLinksInNewTab: true });\n const result = parser.parse('[Example](https://example.com \"Example Title\")');\n expect(result).toBe(\n '

    Example

    \\n',\n );\n });\n\n it('should handle multiple links in content', () => {\n const parser = new Parser({ openLinksInNewTab: true });\n const result = parser.parse(\n '[Link1](https://example1.com) and [Link2](https://example2.com)',\n );\n expect(result).toBe(\n '

    Link1 and Link2

    \\n',\n );\n });\n\n it('should handle reference-style links', () => {\n const parser = new Parser({ openLinksInNewTab: true });\n const result = parser.parse('[Example][1]\\n\\n[1]: https://example.com');\n expect(result).toBe(\n '

    Example

    \\n',\n );\n });\n\n it('should work with custom marked config and openLinksInNewTab', () => {\n const parser = new Parser({\n markedConfig: { breaks: true },\n openLinksInNewTab: true,\n });\n const result = parser.parse('[Example](https://example.com)');\n expect(result).toBe(\n '

    Example

    \\n',\n );\n });\n });\n\n describe('protectCustomTagNewlines', () => {\n it('should protect newlines inside custom tags when protectCustomTagNewlines is true', () => {\n const parser = new Parser({\n protectCustomTagNewlines: true,\n components: { CustomComponent: 'div' },\n });\n const content = 'First line\\n\\nSecond line';\n const result = parser.parse(content);\n expect(result).toContain('First line\\n\\nSecond line');\n expect(result).not.toMatch(/First line<\\/p>\\s*

    Second line/);\n });\n\n it('should not protect newlines when protectCustomTagNewlines is false', () => {\n const parser = new Parser({\n protectCustomTagNewlines: false,\n components: { CustomComponent: 'div' },\n });\n const content = 'First line\\n\\nSecond line';\n const result = parser.parse(content);\n expect(result).toContain('

    ');\n });\n\n it('should work normally when protectCustomTagNewlines is true but no custom components', () => {\n const parser = new Parser({\n protectCustomTagNewlines: true,\n });\n const result = parser.parse('This is a paragraph.\\n\\nThis is another paragraph.');\n expect(result).toBe('

    This is a paragraph.

    \\n

    This is another paragraph.

    \\n');\n });\n\n it('should handle multiple custom tags', () => {\n const parser = new Parser({\n protectCustomTagNewlines: true,\n components: { CustomComponent1: 'div', CustomComponent2: 'span' },\n });\n const content =\n 'First\\n\\nSecond and Third\\n\\nFourth';\n const result = parser.parse(content);\n expect(result).toContain('First\\n\\nSecond');\n expect(result).toContain('Third\\n\\nFourth');\n });\n\n it('should only protect newlines in outermost custom tags', () => {\n const parser = new Parser({\n protectCustomTagNewlines: true,\n components: { Outer: 'div', Inner: 'span' },\n });\n const content = 'Outer start\\nInner\\n\\ncontent\\n\\nOuter end';\n const result = parser.parse(content);\n expect(result).toContain(\n 'Outer start\\nInner\\n\\ncontent\\n\\nOuter end',\n );\n });\n\n it('should handle custom tags with attributes', () => {\n const parser = new Parser({\n protectCustomTagNewlines: true,\n components: { CustomComponent: 'div' },\n });\n const content = 'First line\\n\\nSecond line';\n const result = parser.parse(content);\n expect(result).toContain('class=\"test\"');\n expect(result).toContain('First line\\n\\nSecond line');\n });\n\n it('should handle self-closing custom tags', () => {\n const parser = new Parser({\n protectCustomTagNewlines: true,\n components: { CustomComponent: 'div' },\n });\n const content = ' and Content\\n\\nhere';\n const result = parser.parse(content);\n expect(result).toContain('');\n expect(result).toContain('Content\\n\\nhere');\n });\n\n it('should protect newlines only in custom tags, not in regular markdown', () => {\n const parser = new Parser({\n protectCustomTagNewlines: true,\n components: { CustomComponent: 'div' },\n });\n const content =\n 'Regular paragraph.\\n\\nCustom\\n\\ncontent\\n\\nAnother paragraph.';\n const result = parser.parse(content);\n expect(result).toContain('

    Regular paragraph.

    ');\n expect(result).toContain('Custom\\n\\ncontent');\n expect(result).toContain('

    Another paragraph.

    ');\n });\n\n it('should handle custom tags without double newlines', () => {\n const parser = new Parser({\n protectCustomTagNewlines: true,\n components: { CustomComponent: 'div' },\n });\n const content = 'Single line content';\n const result = parser.parse(content);\n expect(result).toContain('Single line content');\n });\n });\n\n describe('escapeHtml', () => {\n it('should escape HTML when encode is false or undefined and contains special characters', () => {\n expect(escapeHtml('test', false)).toBe(\n 'test<script>alert("xss")</script>',\n );\n expect(escapeHtml('test';\n renderer.processHtml(html);\n\n expect(sanitizeSpy).toHaveBeenCalledWith(\n html,\n expect.objectContaining({\n ADD_TAGS: expect.arrayContaining(['custom-tag']),\n }),\n );\n\n sanitizeSpy.mockRestore();\n });\n\n it('should respect user dompurifyConfig', () => {\n const components = {\n 'custom-tag': MockComponent,\n };\n\n const userConfig = {\n ALLOWED_TAGS: ['custom-tag'],\n ALLOWED_ATTR: ['class'],\n };\n\n const renderer = new Renderer({\n components,\n dompurifyConfig: userConfig,\n });\n\n // Spy on DOMPurify.sanitize\n const sanitizeSpy = jest.spyOn(DOMPurify, 'sanitize');\n\n const html = 'content';\n renderer.processHtml(html);\n\n expect(sanitizeSpy).toHaveBeenCalledWith(\n html,\n expect.objectContaining({\n ALLOWED_TAGS: expect.arrayContaining(['custom-tag']),\n ALLOWED_ATTR: expect.arrayContaining(['class']),\n ADD_TAGS: expect.arrayContaining(['custom-tag']),\n }),\n );\n\n sanitizeSpy.mockRestore();\n });\n });\n\n describe('render method', () => {\n it('should be an alias for processHtml', () => {\n const components = {\n 'test-component': MockComponent,\n };\n\n const renderer = new Renderer({ components });\n\n // Spy on processHtml\n const processHtmlSpy = jest.spyOn(renderer, 'processHtml');\n\n const html = 'content';\n const result = renderer.render(html);\n\n expect(processHtmlSpy).toHaveBeenCalledWith(html);\n expect(result).toBeDefined();\n\n processHtmlSpy.mockRestore();\n });\n });\n\n describe('nested components matching', () => {\n it('should match both parent and child components when both are provided in components', () => {\n const ParentComponent: React.FC = (props) => {\n return React.createElement('div', { 'data-testid': 'parent', ...props });\n };\n const ChildComponent: React.FC = (props) => {\n return React.createElement('span', { 'data-testid': 'child', ...props });\n };\n\n const components = {\n p: ParentComponent,\n a: ChildComponent,\n };\n\n const renderer = new Renderer({ components });\n\n // Mock createElement to capture all component calls\n const createElementSpy = jest.spyOn(React, 'createElement');\n\n const html = '

    link text

    ';\n renderer.processHtml(html);\n\n // Verify both p and a components were called\n const parentCall = createElementSpy.mock.calls.find((call) => call[0] === ParentComponent);\n const childCall = createElementSpy.mock.calls.find((call) => call[0] === ChildComponent);\n\n expect(parentCall).toBeDefined();\n expect(childCall).toBeDefined();\n\n // Verify parent contains child\n expect(parentCall![1]).toHaveProperty('children');\n\n createElementSpy.mockRestore();\n });\n\n it('should match deeply nested components', () => {\n const DivComponent: React.FC = (props) => React.createElement('div', props);\n const SpanComponent: React.FC = (props) => React.createElement('span', props);\n const StrongComponent: React.FC = (props) => React.createElement('strong', props);\n\n const components = {\n div: DivComponent,\n span: SpanComponent,\n strong: StrongComponent,\n };\n\n const renderer = new Renderer({ components });\n const createElementSpy = jest.spyOn(React, 'createElement');\n\n const html = '
    deeply nested
    ';\n renderer.processHtml(html);\n\n // Verify all components were matched\n expect(createElementSpy).toHaveBeenCalledWith(DivComponent, expect.any(Object));\n expect(createElementSpy).toHaveBeenCalledWith(SpanComponent, expect.any(Object));\n expect(createElementSpy).toHaveBeenCalledWith(StrongComponent, expect.any(Object));\n\n createElementSpy.mockRestore();\n });\n\n it('should handle mixed custom and standard HTML tags', () => {\n const CustomP: React.FC = (props) => React.createElement('p', props);\n const CustomA: React.FC = (props) => React.createElement('a', props);\n\n const components = {\n p: CustomP,\n a: CustomA,\n };\n\n const renderer = new Renderer({ components });\n const createElementSpy = jest.spyOn(React, 'createElement');\n\n const html = '

    link and standard span

    ';\n renderer.processHtml(html);\n\n // Verify custom components were used\n expect(createElementSpy).toHaveBeenCalledWith(CustomP, expect.any(Object));\n expect(createElementSpy).toHaveBeenCalledWith(CustomA, expect.any(Object));\n\n createElementSpy.mockRestore();\n });\n\n it('should handle sibling components at same level', () => {\n const LiComponent: React.FC = (props) => React.createElement('li', props);\n const StrongComponent: React.FC = (props) => React.createElement('strong', props);\n\n const components = {\n li: LiComponent,\n strong: StrongComponent,\n };\n\n const renderer = new Renderer({ components });\n const createElementSpy = jest.spyOn(React, 'createElement');\n\n const html = '
    • item1
    • item2
    ';\n renderer.processHtml(html);\n\n // Count how many times each component was called\n const liCalls = createElementSpy.mock.calls.filter((call) => call[0] === LiComponent);\n const strongCalls = createElementSpy.mock.calls.filter((call) => call[0] === StrongComponent);\n\n expect(liCalls).toHaveLength(2);\n expect(strongCalls).toHaveLength(2);\n\n createElementSpy.mockRestore();\n });\n });\n\n describe('unclosed tags scenarios', () => {\n it('should handle unclosed parent tags with closed child tags', () => {\n const ParentComponent: React.FC = (props) => React.createElement('div', props);\n const ChildComponent: React.FC = (props) => React.createElement('span', props);\n\n const components = {\n div: ParentComponent,\n span: ChildComponent,\n };\n\n const renderer = new Renderer({ components });\n\n // Mock detectUnclosedTags to simulate unclosed div\n const mockUnclosedTags = new Set(['div-1']);\n jest.spyOn(renderer as any, 'detectUnclosedTags').mockReturnValue(mockUnclosedTags);\n\n const createElementSpy = jest.spyOn(React, 'createElement');\n\n const html = '
    child content'; // div is unclosed\n renderer.processHtml(html);\n\n // Verify both components are still matched\n const parentCall = createElementSpy.mock.calls.find((call) => call[0] === ParentComponent);\n const childCall = createElementSpy.mock.calls.find((call) => call[0] === ChildComponent);\n\n expect(parentCall).toBeDefined();\n expect(childCall).toBeDefined();\n\n // Verify parent has loading status due to unclosed tag\n expect(parentCall![1]).toHaveProperty('streamStatus', 'loading');\n // Child should have done status as it's properly closed\n expect(childCall![1]).toHaveProperty('streamStatus', 'done');\n\n createElementSpy.mockRestore();\n jest.restoreAllMocks();\n });\n\n it('should handle unclosed child tags within closed parent tags', () => {\n const ParentComponent: React.FC = (props) => React.createElement('div', props);\n const ChildComponent: React.FC = (props) => React.createElement('span', props);\n\n const components = {\n div: ParentComponent,\n span: ChildComponent,\n };\n\n const renderer = new Renderer({ components });\n\n // Mock detectUnclosedTags to simulate unclosed span\n const mockUnclosedTags = new Set(['span-1']);\n jest.spyOn(renderer as any, 'detectUnclosedTags').mockReturnValue(mockUnclosedTags);\n\n const createElementSpy = jest.spyOn(React, 'createElement');\n\n const html = '
    child content
    '; // span is unclosed\n renderer.processHtml(html);\n\n const parentCall = createElementSpy.mock.calls.find((call) => call[0] === ParentComponent);\n const childCall = createElementSpy.mock.calls.find((call) => call[0] === ChildComponent);\n\n expect(parentCall).toBeDefined();\n expect(childCall).toBeDefined();\n\n // Parent should have done status as it's properly closed\n expect(parentCall![1]).toHaveProperty('streamStatus', 'done');\n // Child should have loading status due to unclosed tag\n expect(childCall![1]).toHaveProperty('streamStatus', 'loading');\n\n createElementSpy.mockRestore();\n jest.restoreAllMocks();\n });\n\n it('should handle multiple unclosed tags at different levels', () => {\n const DivComponent: React.FC = (props) => React.createElement('div', props);\n const PComponent: React.FC = (props) => React.createElement('p', props);\n const SpanComponent: React.FC = (props) => React.createElement('span', props);\n\n const components = {\n div: DivComponent,\n p: PComponent,\n span: SpanComponent,\n };\n\n const renderer = new Renderer({ components });\n\n // Mock detectUnclosedTags to simulate unclosed div and span\n const mockUnclosedTags = new Set(['div-1', 'span-1']);\n jest.spyOn(renderer as any, 'detectUnclosedTags').mockReturnValue(mockUnclosedTags);\n\n const createElementSpy = jest.spyOn(React, 'createElement');\n\n const html = '

    content

    '; // div and span are unclosed\n renderer.processHtml(html);\n\n const divCall = createElementSpy.mock.calls.find((call) => call[0] === DivComponent);\n const pCall = createElementSpy.mock.calls.find((call) => call[0] === PComponent);\n const spanCall = createElementSpy.mock.calls.find((call) => call[0] === SpanComponent);\n\n expect(divCall![1]).toHaveProperty('streamStatus', 'loading');\n expect(pCall![1]).toHaveProperty('streamStatus', 'done');\n expect(spanCall![1]).toHaveProperty('streamStatus', 'loading');\n\n createElementSpy.mockRestore();\n jest.restoreAllMocks();\n });\n\n it('should handle completely unclosed nested structure', () => {\n const DivComponent: React.FC = (props) => React.createElement('div', props);\n const PComponent: React.FC = (props) => React.createElement('p', props);\n const AComponent: React.FC = (props) => React.createElement('a', props);\n\n const components = {\n div: DivComponent,\n p: PComponent,\n a: AComponent,\n };\n\n const renderer = new Renderer({ components });\n\n // Mock detectUnclosedTags to simulate all tags unclosed\n const mockUnclosedTags = new Set(['div-1', 'p-1', 'a-1']);\n jest.spyOn(renderer as any, 'detectUnclosedTags').mockReturnValue(mockUnclosedTags);\n\n const createElementSpy = jest.spyOn(React, 'createElement');\n\n const html = '

    unclosed content'; // All tags unclosed\n renderer.processHtml(html);\n\n const calls = createElementSpy.mock.calls;\n const divCall = calls.find((call) => call[0] === DivComponent);\n const pCall = calls.find((call) => call[0] === PComponent);\n const aCall = calls.find((call) => call[0] === AComponent);\n\n expect(divCall![1]).toHaveProperty('streamStatus', 'loading');\n expect(pCall![1]).toHaveProperty('streamStatus', 'loading');\n expect(aCall![1]).toHaveProperty('streamStatus', 'loading');\n\n createElementSpy.mockRestore();\n jest.restoreAllMocks();\n });\n });\n\n describe('support checkbox disabled and checked props', () => {\n it('disabled and checked are true', () => {\n const components = { input: MockComponent };\n const renderer = new Renderer({ components });\n const createElementSpy = jest.spyOn(React, 'createElement');\n const html1 = '

    ';\n renderer.processHtml(html1);\n\n expect(createElementSpy).toHaveBeenCalledWith(\n MockComponent,\n expect.objectContaining({\n disabled: true,\n checked: true,\n }),\n );\n\n createElementSpy.mockClear();\n });\n\n it('disabled is true and no checked props', () => {\n const components = { input: MockComponent };\n const renderer = new Renderer({ components });\n const createElementSpy = jest.spyOn(React, 'createElement');\n const html = '
    • checkbox
    ';\n renderer.processHtml(html);\n\n expect(createElementSpy).toHaveBeenCalledWith(\n MockComponent,\n expect.objectContaining({ disabled: true }),\n );\n\n // 再确认这次调用里确实没有 checked\n const targetCall = createElementSpy.mock.calls.find((call) => call[0] === MockComponent);\n expect(targetCall?.[1]).not.toHaveProperty('checked');\n createElementSpy.mockClear();\n });\n });\n});\n" }, { "path": "packages/x-markdown/src/XMarkdown/__tests__/__snapshots__/DebugPanel.test.tsx.snap", "content": "// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing\n\nexports[`DebugPanel Basic Rendering should render correctly 1`] = `\n
    \n \n \n \n FPS\n \n \n 0\n \n
    \n \n \n Memory\n \n \n 0 KB\n \n
    \n \n \n ⏺ Record\n \n
    \n
    \n
    \n`;\n\nexports[`DebugPanel Snapshot Tests should match snapshot after stopping recording 1`] = `\n
    \n \n \n \n FPS\n \n \n 0\n \n
    \n \n \n Memory\n \n \n 0 KB\n \n
    \n \n \n ⏺ Record\n \n \n \n\n`;\n\nexports[`DebugPanel Snapshot Tests should match snapshot when recording 1`] = `\n
    \n \n \n \n FPS\n \n \n 0\n \n
    \n \n \n Memory\n \n \n 0 KB\n \n \n \n \n ⏹ Stop\n \n \n \n\n`;\n\nexports[`DebugPanel Snapshot Tests should match snapshot with modal open 1`] = `\n
    \n \n \n \n FPS\n \n \n 0\n \n
    \n \n \n Memory\n \n \n 0 KB\n \n \n \n \n ⏺ Record\n \n \n \n\n`;\n" }, { "path": "packages/x-markdown/src/XMarkdown/__tests__/__snapshots__/index.test.tsx.snap", "content": "// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing\n\nexports[`XMarkdown animation parent is custom components 1`] = `\n
    \n \n

    \n This is Text.\n

    \n
    \n\n`;\n\nexports[`XMarkdown animation parent is not custom components 1`] = `\n
    \n \n

    \n \n This is Text.\n \n

    \n
    \n\n`;\n\nexports[`XMarkdown support checkbox is checked 1`] = `\n
    \n \n
      \n
    • \n \n checkbox\n
      • \n
    \n
    \n\n`;\n\nexports[`XMarkdown support checkbox not checked 1`] = `\n
    \n \n
      \n
    • \n \n checkbox\n
      • \n
    \n
    \n\n`;\n" }, { "path": "packages/x-markdown/src/XMarkdown/__tests__/hooks.test.tsx", "content": "import { act, render, renderHook } from '@testing-library/react';\nimport React from 'react';\nimport { useStreaming } from '../hooks';\nimport type { XMarkdownProps } from '../interface';\n\n// 流处理功能测试 - 基础测试用例\nconst streamingTestCases = [\n {\n title: 'incomplete link with streaming enabled',\n input: '[incomplete link](https://example',\n output: '',\n },\n {\n title: 'incomplete image only start should not show',\n input: '!',\n output: '', // 实际实现会过滤掉不完整的图片\n },\n {\n title: 'incomplete image with streaming enabled',\n input: '![alt text](https://example',\n output: '', // 实际实现会过滤掉不完整的图片\n },\n {\n title: 'complete link should not use placeholders',\n input: '[ant design x](https://x.ant.design)',\n output: '[ant design x](https://x.ant.design)',\n },\n {\n title: 'incomplete list -',\n input: '-',\n output: '', // 实际实现会过滤掉不完整的列表\n },\n {\n title: 'incomplete list - with complete bold',\n input: '- **text**',\n output: '- **text**',\n },\n {\n title: 'setext heading',\n input: 'text \\n- ',\n output: 'text \\n', // 实际实现会过滤掉不完整的setext heading\n },\n {\n title: 'not list ',\n input: '+123',\n output: '+123',\n },\n {\n title: 'incomplete list +',\n input: '+',\n output: '', // 实际实现会过滤掉不完整的列表\n },\n {\n title: 'incomplete list * with space',\n input: '- ',\n output: '- ', // 实际实现会保留带空格的列表标记\n },\n {\n title: 'complete list *',\n input: '* list',\n output: '* list',\n },\n {\n title: 'complete list - with complete bold',\n input: '- **bold**',\n output: '- **bold**',\n },\n {\n title: 'inValid heading',\n input: '#######',\n output: '#######',\n },\n {\n title: 'inValid heading no space',\n input: '###Heading',\n output: '###Heading',\n },\n {\n title: 'valid heading ',\n input: '### Heading',\n output: '### Heading',\n },\n {\n title: 'incomplete table - only header',\n input: '| Header 1 | Header 2 |',\n output: '', // 实际实现会过滤掉不完整的表格\n },\n {\n title: 'incomplete table - only header with title',\n input: 'table \\n | Header 1 | Header 2 |',\n output: 'table \\n ', // 实际实现会过滤掉不完整的表格\n },\n {\n title: 'incomplete table - header and separator',\n input: '| Header 1 | Header 2 |\\n| --- | --- |',\n output: '', // 实际实现会过滤掉不完整的表格\n },\n {\n title: 'complete table',\n input: '| Header 1 | Header 2 |\\n| --- | --- |\\n| Cell 1 | Cell 2 |',\n output: '| Header 1 | Header 2 |\\n| --- | --- |\\n| Cell 1 | Cell 2 |',\n },\n {\n title: 'malformed table - no closing pipe',\n input: '| Header 1 | Header 2 \\n',\n output: '| Header 1 | Header 2 \\n',\n },\n {\n title: 'table with incomplete separator',\n input: '| Header 1 | Header 2 |\\n| --- |',\n output: '', // 实际实现会过滤掉不完整的表格\n },\n {\n title: 'table with left align separator',\n input: '| Header 1 | Header 2 |\\n| :--- |',\n output: '', // 实际实现会过滤掉不完整的表格\n },\n {\n title: 'table with right align separator',\n input: '| Header 1 | Header 2 |\\n| ---: |',\n output: '', // 实际实现会过滤掉不完整的表格\n },\n {\n title: 'table with center separator',\n input: '| Header 1 | Header 2 |\\n| :---: |',\n output: '', // 实际实现会过滤掉不完整的表格\n },\n {\n title: 'incomplete Html - open tag',\n input: '
    Div
    ',\n output: '
    Div
    ',\n },\n {\n title: 'complete Html - self close tag',\n input: '
    ',\n output: '
    ',\n },\n {\n title: 'complete Html - nested tags',\n input: '
    text
    ',\n output: '
    text
    ',\n },\n {\n title: 'incomplete inline code with streaming enabled',\n input: '`console.log(\"hello\")',\n output: '', // 实际实现会过滤掉不完整的行内代码\n },\n {\n title: 'complete inline code should not use placeholders',\n input: '`const x = 42;`',\n output: '`const x = 42;`',\n },\n {\n title: 'incomplete inline code - single backtick',\n input: '`',\n output: '', // 实际实现会过滤掉不完整的行内代码\n config: { streaming: { hasNextChunk: true } },\n },\n {\n title: 'incomplete inline code - max length',\n input: `\\`${'a'.repeat(300)}`,\n output: '', // 实际实现会过滤掉不完整的行内代码\n },\n {\n title: 'incomplete list with inline-code - single backtick',\n input: '- `',\n output: '- ', // list 已完成并提交，当前 token 为 inline-code（未完成且无组件时不展示）\n },\n {\n title: 'incomplete list with inline-code - partial content',\n input: '- `code',\n output: '- ', // list 已完成并提交，当前 token 为 inline-code（未完成且无组件时不展示）\n },\n {\n title: 'complete list with inline-code',\n input: '- `code`',\n output: '- `code`',\n },\n {\n title: 'complete list with inline-code and text',\n input: '- item with `code`',\n output: '- item with `code`',\n },\n {\n title: 'incomplete list with inline-code - text before backtick',\n input: '- item text `',\n output: '- item text ', // incomplete inline-code should be filtered\n },\n {\n title: 'incomplete list with inline-code and bold combination',\n input: '- **bold** and `code',\n output: '- **bold** and ', // complete bold is kept, incomplete inline-code is filtered\n },\n {\n title: 'complete list with inline-code and bold',\n input: '- **bold** and `code`',\n output: '- **bold** and `code`',\n },\n];\n\n// 流处理功能测试 - 带自定义组件映射的测试用例\nconst streamingTestCasesWithComponents = [\n {\n tokenType: 'link',\n title: 'incomplete link with custom component mapping',\n input: '[incomplete link](https://example',\n },\n {\n tokenType: 'image',\n title: 'incomplete image with custom component mapping',\n input: '![alt text](https://example',\n },\n {\n tokenType: 'table',\n title: 'incomplete table with custom component mapping',\n input: '| Header 1 | Header 2 |',\n },\n {\n tokenType: 'html',\n title: 'incomplete html with custom component mapping',\n input: '
    {\n const result = useStreaming(input, config);\n return
    {result}
    ;\n};\n\ndescribe('XMarkdown hooks', () => {\n describe('useStreaming streaming functionality', () => {\n streamingTestCases.forEach(({ title, input, output, config }) => {\n it(`should handle ${title}`, () => {\n const { container } = render(\n ,\n );\n expect(container.textContent).toBe(output);\n });\n });\n });\n\n describe('useStreaming streaming functionality with components mapping', () => {\n streamingTestCasesWithComponents.forEach(({ title, input, tokenType }) => {\n it(`should handle ${title}`, () => {\n const defaultTokenMap: Record = {\n link: 'incomplete-link',\n image: 'incomplete-image',\n table: 'incomplete-table',\n html: 'incomplete-html',\n 'inline-code': 'incomplete-inline-code',\n };\n\n const { container } = render(\n null,\n 'incomplete-image': () => null,\n 'incomplete-table': () => null,\n 'incomplete-html': () => null,\n 'incomplete-inline-code': () => null,\n },\n }}\n />,\n );\n\n const output = `<${defaultTokenMap[tokenType]} data-raw=\"${encodeURIComponent(input)}\" />`;\n expect(container.textContent).toBe(output);\n });\n\n it(`should handle ${title} with custom component`, () => {\n const customTokenMap: Record = {\n link: 'unfinished-link',\n image: 'unfinished-image',\n table: 'unfinished-table',\n html: 'unfinished-html',\n 'inline-code': 'unfinished-inline-code',\n };\n\n const { container } = render(\n null,\n 'unfinished-image': () => null,\n 'unfinished-table': () => null,\n 'unfinished-html': () => null,\n 'unfinished-inline-code': () => null,\n },\n }}\n />,\n );\n\n const output = `<${customTokenMap[tokenType]} data-raw=\"${encodeURIComponent(input)}\" />`;\n expect(container.textContent).toBe(output);\n });\n });\n });\n\n describe('useStreaming fenced code blocks', () => {\n fencedCodeTestCases.forEach(({ title, input, output, config }) => {\n it(`should handle ${title}`, () => {\n const { container } = render(\n ,\n );\n expect(container.textContent).toBe(output);\n });\n });\n });\n\n describe('useStreaming error handling', () => {\n errorHandlingTestCases.forEach(({ title, input, config }) => {\n it(`should handle ${title}`, () => {\n const { container } = render(\n ,\n );\n expect(container.textContent).toBe('');\n });\n });\n });\n\n describe('useStreaming streaming behavior', () => {\n it('should handle streaming chunk by chunk', () => {\n const { result, rerender } = renderHook(({ input, config }) => useStreaming(input, config), {\n initialProps: {\n input: 'Hello',\n config: { streaming: { hasNextChunk: true } },\n },\n });\n\n expect(result.current).toBe('Hello');\n\n // Simulate streaming more content\n act(() => {\n rerender({\n input: 'Hello world',\n config: { streaming: { hasNextChunk: true } },\n });\n });\n expect(result.current).toBe('Hello world');\n\n // Simulate streaming incomplete markdown - incomplete link will be filtered out\n act(() => {\n rerender({\n input: 'Hello world with [incomplete link](https://example',\n config: { streaming: { hasNextChunk: true } },\n });\n });\n expect(result.current).toBe('Hello world with ');\n });\n\n it('should reset state when input is completely different', () => {\n const { result, rerender } = renderHook(({ input, config }) => useStreaming(input, config), {\n initialProps: {\n input: 'First content',\n config: { streaming: { hasNextChunk: true } },\n },\n });\n\n expect(result.current).toBe('First content');\n\n // Completely different input should reset state\n act(() => {\n rerender({\n input: 'Completely different',\n config: { streaming: { hasNextChunk: false } },\n });\n });\n expect(result.current).toBe('Completely different');\n });\n\n it('should handle streaming state transitions', () => {\n const { result, rerender } = renderHook(({ input, config }) => useStreaming(input, config), {\n initialProps: {\n input: 'Start',\n config: { streaming: { hasNextChunk: true } },\n },\n });\n\n expect(result.current).toBe('Start');\n\n // Add incomplete link - incomplete link will be filtered out\n act(() => {\n rerender({\n input: 'Start with [link](https://example',\n config: { streaming: { hasNextChunk: true } },\n });\n });\n expect(result.current).toBe('Start with ');\n\n // Complete the link\n act(() => {\n rerender({\n input: 'Start with [link](https://example.com)',\n config: { streaming: { hasNextChunk: false } },\n });\n });\n expect(result.current).toBe('Start with [link](https://example.com)');\n });\n });\n\n describe('useStreaming memory management', () => {\n it('should handle component unmounting without memory leaks', () => {\n const { result, unmount } = renderHook(({ input, config }) => useStreaming(input, config), {\n initialProps: {\n input: 'Test content',\n config: { streaming: { hasNextChunk: true } },\n },\n });\n\n expect(result.current).toBe('Test content');\n\n // Unmount should not cause errors\n expect(() => {\n unmount();\n }).not.toThrow();\n });\n });\n\n describe('useStreaming performance optimization', () => {\n it('should memoize recognizers array', () => {\n const { result, rerender } = renderHook(({ input, config }) => useStreaming(input, config), {\n initialProps: {\n input: 'test',\n config: { streaming: { hasNextChunk: true } },\n },\n });\n\n const firstResult = result.current;\n\n // Re-render with same config should not change result\n rerender({\n input: 'test',\n config: { streaming: { hasNextChunk: true } },\n });\n\n expect(result.current).toBe(firstResult);\n });\n });\n\n describe('useStreaming integration tests', () => {\n it('should handle real-world streaming scenarios', () => {\n const { result, rerender } = renderHook(({ input, config }) => useStreaming(input, config), {\n initialProps: {\n input: '',\n config: { streaming: { hasNextChunk: true } },\n },\n });\n\n // Simulate real streaming\n const streamingContent = [\n '#',\n '# Welcome',\n '# Welcome to',\n '# Welcome to our',\n '# Welcome to our [documentation](https://example',\n '# Welcome to our [documentation](https://example.com)',\n ];\n\n streamingContent.forEach((content, index) => {\n act(() => {\n rerender({\n input: content,\n config: { streaming: { hasNextChunk: index < streamingContent.length - 1 } },\n });\n });\n });\n\n expect(result.current).toBe('# Welcome to our [documentation](https://example.com)');\n });\n\n it('should handle malformed markdown gracefully', () => {\n const malformedCases = [\n '[[[nested brackets]]]',\n '(((())))nested parentheses',\n '**unclosed bold **text',\n '_unclosed italic_ text',\n '```unclosed code block',\n '| table without closing |',\n ];\n\n malformedCases.forEach((malformed) => {\n const { result } = renderHook(() =>\n useStreaming(malformed, { streaming: { hasNextChunk: true } }),\n );\n expect(result.current).toBeDefined();\n expect(typeof result.current).toBe('string');\n });\n });\n });\n\n describe('useStreaming streaming execution with character-by-character rendering', () => {\n it('should handle streaming table content character by character', async () => {\n const tableText =\n '| 模块 | 当前值 | 可修改项 |\\n|---|---|---|\\n| 支持保单豁免 | ❗不支持 | 🔲 可改为支持 |';\n const { result, rerender } = renderHook(({ input, config }) => useStreaming(input, config), {\n initialProps: {\n input: '',\n config: { streaming: { hasNextChunk: true } },\n },\n });\n\n // Stream character by character\n for (let i = 0; i <= tableText.length; i++) {\n const partialText = tableText.slice(0, i);\n\n act(() => {\n rerender({\n input: partialText,\n config: { streaming: { hasNextChunk: i < tableText.length } },\n });\n });\n\n if (i < tableText.length) {\n await new Promise((resolve) => setTimeout(resolve, 10));\n }\n }\n\n // Verify final table is rendered correctly\n expect(result.current).toBe(tableText);\n });\n\n it('should handle streaming fenced code blocks character by character with fence end logic', async () => {\n const codeBlockText =\n '```javascript\\nconsole.log(\"streaming test\");\\nconsole.log(\"fence end logic\");\\n```';\n const { result, rerender } = renderHook(({ input, config }) => useStreaming(input, config), {\n initialProps: {\n input: '',\n config: { streaming: { hasNextChunk: true } },\n },\n });\n\n // Stream character by character to test fence end detection\n for (let i = 0; i <= codeBlockText.length; i++) {\n const partialText = codeBlockText.slice(0, i);\n\n act(() => {\n rerender({\n input: partialText,\n config: { streaming: { hasNextChunk: i < codeBlockText.length } },\n });\n });\n\n if (i < codeBlockText.length) {\n await new Promise((resolve) => setTimeout(resolve, 5));\n }\n }\n\n // Verify complete code block is preserved\n expect(result.current).toBe(codeBlockText);\n });\n\n it('should handle streaming fenced code blocks with incomplete closing in non-final chunk', async () => {\n const incompleteCodeBlock = '```python\\ndef test():\\n return \"incomplete\"\\n``';\n const { result, rerender } = renderHook(({ input, config }) => useStreaming(input, config), {\n initialProps: {\n input: '',\n config: { streaming: { hasNextChunk: true } },\n },\n });\n\n // Stream incomplete code block (missing final backtick)\n act(() => {\n rerender({\n input: incompleteCodeBlock,\n config: { streaming: { hasNextChunk: true } }, // Not final chunk\n });\n });\n\n // Should preserve the incomplete code block since it's not the final chunk\n expect(result.current).toBe(incompleteCodeBlock);\n\n // Complete the code block\n act(() => {\n rerender({\n input: `${incompleteCodeBlock}\\``,\n config: { streaming: { hasNextChunk: false } }, // Final chunk\n });\n });\n\n expect(result.current).toBe(`${incompleteCodeBlock}\\``);\n });\n });\n\n describe('useStreaming edge cases and additional coverage', () => {\n it('should handle empty string input', () => {\n const { result } = renderHook(() => useStreaming('', { streaming: { hasNextChunk: true } }));\n expect(result.current).toBe('');\n });\n\n it('should handle streaming disabled', () => {\n const { result } = renderHook(() =>\n useStreaming('[incomplete link](https://example', { streaming: { hasNextChunk: false } }),\n );\n expect(result.current).toBe('[incomplete link](https://example');\n });\n\n it('should handle custom components mapping', () => {\n const { result } = renderHook(() =>\n useStreaming('[test](https://example', {\n streaming: {\n hasNextChunk: false,\n incompleteMarkdownComponentMap: {\n link: 'custom-link',\n image: 'custom-image',\n table: 'custom-table',\n html: 'custom-html',\n },\n },\n }),\n );\n expect(result.current).toBe('[test](https://example');\n });\n\n it('should handle streaming with custom components enabled', () => {\n const { result, rerender } = renderHook(({ input, config }) => useStreaming(input, config), {\n initialProps: {\n input: '[link](https://example',\n config: {\n streaming: {\n hasNextChunk: true,\n incompleteMarkdownComponentMap: { link: 'custom-link-component' },\n },\n },\n },\n });\n\n expect(result.current).toBe(''); // 实际实现会过滤掉不完整的链接，因为没有提供components\n\n // Complete the link\n act(() => {\n rerender({\n input: '[link](https://example.com)',\n config: {\n streaming: {\n hasNextChunk: false,\n incompleteMarkdownComponentMap: { link: 'custom-link-component' },\n },\n },\n });\n });\n expect(result.current).toBe('[link](https://example.com)');\n });\n\n it('should handle complex streaming scenarios', () => {\n const { result, rerender } = renderHook(({ input, config }) => useStreaming(input, config), {\n initialProps: {\n input: '# Title\\n\\nSome text',\n config: { streaming: { hasNextChunk: true } },\n },\n });\n\n expect(result.current).toBe('# Title\\n\\nSome text');\n\n // Add incomplete elements - incomplete links and images will be filtered out\n act(() => {\n rerender({\n input: '# Title\\n\\nSome text with [link](https://example and ![image](https://test',\n config: { streaming: { hasNextChunk: true } },\n });\n });\n expect(result.current).toBe('# Title\\n\\nSome text with ');\n });\n });\n\n describe('useStreaming URIError handling', () => {\n it('should handle URIError with invalid Unicode characters', () => {\n const { result } = renderHook(() =>\n useStreaming('[test](https://example.com)\\uD800\\uDFFF', {\n streaming: {\n hasNextChunk: true,\n incompleteMarkdownComponentMap: { link: 'incomplete-link' },\n },\n components: {\n 'incomplete-link': () => null,\n },\n }),\n );\n\n expect(result.current).toBeDefined();\n expect(typeof result.current).toBe('string');\n });\n\n it('should handle lone surrogate pairs', () => {\n const { result } = renderHook(() =>\n useStreaming('[test](https://example.com)\\uD800', {\n streaming: {\n hasNextChunk: true,\n incompleteMarkdownComponentMap: { link: 'incomplete-link' },\n },\n components: {\n 'incomplete-link': () => null,\n },\n }),\n );\n\n expect(result.current).toBeDefined();\n });\n\n it('should handle invalid surrogate pairs', () => {\n const { result } = renderHook(() =>\n useStreaming('[test](https://example.com)\\uDFFF\\uD800', {\n streaming: {\n hasNextChunk: true,\n incompleteMarkdownComponentMap: { link: 'incomplete-link' },\n },\n components: {\n 'incomplete-link': () => null,\n },\n }),\n );\n\n expect(result.current).toBeDefined();\n });\n\n it('should handle mixed valid and invalid Unicode', () => {\n const { result } = renderHook(() =>\n useStreaming('[test](https://example.com)正常文本\\uD800\\uDFFF更多文本', {\n streaming: {\n hasNextChunk: true,\n incompleteMarkdownComponentMap: { link: 'incomplete-link' },\n },\n components: {\n 'incomplete-link': () => null,\n },\n }),\n );\n\n expect(result.current).toBeDefined();\n });\n\n it('should handle empty string with invalid Unicode', () => {\n const { result } = renderHook(() =>\n useStreaming('\\uD800\\uDFFF', {\n streaming: {\n hasNextChunk: true,\n incompleteMarkdownComponentMap: { link: 'incomplete-link' },\n },\n components: {\n 'incomplete-link': () => null,\n },\n }),\n );\n\n expect(result.current).toBeDefined();\n expect(typeof result.current).toBe('string');\n });\n\n it('should handle only invalid Unicode characters', () => {\n const { result } = renderHook(() =>\n useStreaming('\\uD800\\uDFFF\\uD800\\uDFFF', {\n streaming: {\n hasNextChunk: true,\n incompleteMarkdownComponentMap: { link: 'incomplete-link' },\n },\n components: {\n 'incomplete-link': () => null,\n },\n }),\n );\n\n expect(result.current).toBeDefined();\n expect(typeof result.current).toBe('string');\n });\n\n it('should handle incomplete markdown with invalid Unicode', () => {\n const { result } = renderHook(() =>\n useStreaming('[incomplete link](https://example\\uD800\\uDFFF', {\n streaming: {\n hasNextChunk: true,\n incompleteMarkdownComponentMap: { link: 'incomplete-link' },\n },\n components: {\n 'incomplete-link': () => null,\n },\n }),\n );\n\n expect(result.current).toBeDefined();\n expect(result.current).toContain('incomplete-link');\n });\n\n it('should handle lone high surrogate at end of incomplete markdown', () => {\n const { result } = renderHook(() =>\n useStreaming('[incomplete link](https://example.com\\uD800', {\n streaming: {\n hasNextChunk: true,\n incompleteMarkdownComponentMap: { link: 'incomplete-link' },\n },\n components: {\n 'incomplete-link': () => null,\n },\n }),\n );\n\n expect(result.current).toBeDefined();\n expect(result.current).toContain('incomplete-link');\n });\n\n it('should handle lone low surrogate at end of incomplete markdown', () => {\n const { result } = renderHook(() =>\n useStreaming('[incomplete link](https://example.com\\uDFFF', {\n streaming: {\n hasNextChunk: true,\n incompleteMarkdownComponentMap: { link: 'incomplete-link' },\n },\n components: {\n 'incomplete-link': () => null,\n },\n }),\n );\n\n expect(result.current).toBeDefined();\n expect(result.current).toContain('incomplete-link');\n });\n\n it('should handle multiple consecutive lone surrogates', () => {\n const { result } = renderHook(() =>\n useStreaming('[incomplete link](https://example.com\\uD800\\uD800\\uDFFF\\uDFFF', {\n streaming: {\n hasNextChunk: true,\n incompleteMarkdownComponentMap: { link: 'incomplete-link' },\n },\n components: {\n 'incomplete-link': () => null,\n },\n }),\n );\n\n expect(result.current).toBeDefined();\n expect(result.current).toContain('incomplete-link');\n });\n\n it('should handle incomplete markdown with only lone high surrogate', () => {\n const { result } = renderHook(() =>\n useStreaming('\\uD800', {\n streaming: {\n hasNextChunk: true,\n incompleteMarkdownComponentMap: { link: 'incomplete-link' },\n },\n components: {\n 'incomplete-link': () => null,\n },\n }),\n );\n\n expect(result.current).toBeDefined();\n expect(typeof result.current).toBe('string');\n });\n\n it('should handle incomplete markdown with only lone low surrogate', () => {\n const { result } = renderHook(() =>\n useStreaming('\\uDFFF', {\n streaming: {\n hasNextChunk: true,\n incompleteMarkdownComponentMap: { link: 'incomplete-link' },\n },\n components: {\n 'incomplete-link': () => null,\n },\n }),\n );\n\n expect(result.current).toBeDefined();\n expect(typeof result.current).toBe('string');\n });\n });\n\n describe('useStreaming cache reset and state management', () => {\n it('should reset cache when input does not continue from previous state', () => {\n const { result, rerender } = renderHook(({ input, config }) => useStreaming(input, config), {\n initialProps: {\n input: 'Hello world',\n config: { streaming: { hasNextChunk: true } },\n },\n });\n\n expect(result.current).toBe('Hello world');\n\n // 输入完全不连续，应该重置缓存\n act(() => {\n rerender({\n input: 'Completely new content',\n config: { streaming: { hasNextChunk: true } },\n });\n });\n expect(result.current).toBe('Completely new content');\n });\n\n it('should maintain cache when input continues from previous state', () => {\n const { result, rerender } = renderHook(({ input, config }) => useStreaming(input, config), {\n initialProps: {\n input: 'Hello',\n config: { streaming: { hasNextChunk: true } },\n },\n });\n\n expect(result.current).toBe('Hello');\n\n // 输入是之前内容的延续，应该保持缓存\n act(() => {\n rerender({\n input: 'Hello world',\n config: { streaming: { hasNextChunk: true } },\n });\n });\n expect(result.current).toBe('Hello world');\n });\n\n it('should handle rapid input changes with cache reset', () => {\n const { result, rerender } = renderHook(({ input, config }) => useStreaming(input, config), {\n initialProps: {\n input: 'First content',\n config: { streaming: { hasNextChunk: true } },\n },\n });\n\n expect(result.current).toBe('First content');\n\n // 快速切换到不相关的输入\n act(() => {\n rerender({\n input: 'First \\n\\n content',\n config: { streaming: { hasNextChunk: true } },\n });\n });\n expect(result.current).toBe('First \\n\\n content');\n\n // 再次快速切换\n act(() => {\n rerender({\n input: 'Third completely different',\n config: { streaming: { hasNextChunk: true } },\n });\n });\n expect(result.current).toBe('Third completely different');\n });\n\n it('should handle partial prefix matching edge cases', () => {\n const { result, rerender } = renderHook(({ input, config }) => useStreaming(input, config), {\n initialProps: {\n input: 'Hello',\n config: { streaming: { hasNextChunk: true } },\n },\n });\n\n expect(result.current).toBe('Hello');\n\n // 测试部分匹配的情况\n act(() => {\n rerender({\n input: 'Hell', // 比之前的短，应该重置\n config: { streaming: { hasNextChunk: true } },\n });\n });\n expect(result.current).toBe('Hell');\n });\n\n it('should handle empty string transitions correctly', () => {\n const { result, rerender } = renderHook(({ input, config }) => useStreaming(input, config), {\n initialProps: {\n input: 'Some content',\n config: { streaming: { hasNextChunk: true } },\n },\n });\n\n expect(result.current).toBe('Some content');\n\n // 切换到空字符串\n act(() => {\n rerender({\n input: '',\n config: { streaming: { hasNextChunk: true } },\n });\n });\n expect(result.current).toBe('');\n });\n\n it('should handle streaming state transitions with incomplete elements', () => {\n const { result, rerender } = renderHook(({ input, config }) => useStreaming(input, config), {\n initialProps: {\n input: 'Start with ',\n config: { streaming: { hasNextChunk: true } },\n },\n });\n\n expect(result.current).toBe('Start with ');\n\n // 添加不完整的链接，应该被过滤\n act(() => {\n rerender({\n input: 'Start with [incomplete',\n config: { streaming: { hasNextChunk: true } },\n });\n });\n expect(result.current).toBe('Start with ');\n\n // 完全改变输入，应该重置并显示新内容\n act(() => {\n rerender({\n input: 'New content completely',\n config: { streaming: { hasNextChunk: true } },\n });\n });\n expect(result.current).toBe('New content completely');\n });\n });\n});\n" }, { "path": "packages/x-markdown/src/XMarkdown/__tests__/index.test.tsx", "content": "import { render } from '@testing-library/react';\nimport React from 'react';\nimport XMarkdown, { Token } from '../../index';\nimport type { ComponentProps } from '../interface';\n\nconst testCases = [\n {\n title: 'Render basic text',\n markdown: 'Hello world!',\n html: '

    Hello world!

    \\n',\n },\n {\n title: 'Render heading1',\n markdown: '# Heading 1',\n html: '

    Heading 1

    \\n',\n },\n {\n title: 'Render heading2',\n markdown: '## Heading 2',\n html: '

    Heading 2

    \\n',\n },\n {\n title: 'Render heading6',\n markdown: '###### Heading 6',\n html: '
    Heading 6
    \\n',\n },\n {\n title: 'Render unordered list',\n markdown: '- Item 1\\n- Item 2\\n- Item 3',\n html: '
      \\n
    • Item 1
      • \\n
    • Item 2
      • \\n
    • Item 3
      • \\n
    \\n',\n },\n {\n title: 'Render ordered list',\n markdown: '1. First\\n2. Second\\n3. Third',\n html: '
      \\n
    1. First
      2. \\n
    2. Second
      3. \\n
    3. Third
      4. \\n
    \\n',\n },\n {\n title: 'Render code span',\n markdown: 'this is `codespan`',\n html: '

    this is codespan

    \\n',\n },\n {\n title: 'Render code block',\n markdown: '```javascript\\nconsole.log(`hello`);\\n```\\n',\n html: '
    console.log(`hello`);\\n
    \\n',\n },\n {\n title: 'Render code block with meta',\n markdown: '```html preview\\n
    Hello
    \\n```\\n',\n html: '
    <div>Hello</div>\\n
    \\n',\n },\n {\n title: 'Render code block with meta params',\n markdown: '```html preview mode=iframe\\n
    Hello
    \\n```\\n',\n html: '
    <div>Hello</div>\\n
    \\n',\n },\n {\n title: 'Render link',\n markdown: '[Google](https://www.google.com)',\n html: '

    Google

    \\n',\n },\n {\n title: 'Render link with title',\n markdown: '[Google]: https://www.google.com \"google\"\\n[Google]',\n html: '

    Google

    \\n',\n },\n {\n title: 'Render image',\n markdown: '![logo](https://example.com/logo.png)',\n html: '

    \"logo\"

    \\n',\n },\n {\n title: 'Render bold and italic',\n markdown: 'This is **bold** and *italic* text',\n html: '

    This is bold and italic text

    \\n',\n },\n {\n title: 'Render blockquote',\n markdown: '> This is a quote',\n html: '
    \\n

    This is a quote

    \\n
    \\n',\n },\n {\n title: 'Render horizontal rule',\n markdown: '---',\n html: '
    \\n',\n },\n {\n title: 'Render mixed formats',\n markdown:\n '# Title\\n\\nThis is a [link](https://example.com) and **bold** text\\n\\n- List item 1\\n- List item 2',\n html: '

    Title

    \\n

    This is a link and bold text

    \\n
      \\n
    • List item 1
      • \\n
    • List item 2
      • \\n
    \\n',\n },\n {\n title: 'Render del',\n markdown: '~del~',\n html: '

    del

    \\n',\n },\n {\n title: 'Render table',\n markdown: `| Month | Savings |\n | -------- | ------- |\n | January | $250 |\n | February | $80 |\n | March | $420 |`,\n html: '
    MonthSavings
    January$250
    February$80
    March$420
    \\n',\n },\n {\n title: 'Render checkbox',\n markdown: '- [ ] checkbox',\n html: '
      \\n
    • checkbox
      • \\n
    \\n',\n },\n {\n title: 'Render escape',\n markdown: '\\\\>',\n html: '

    >

    \\n',\n },\n {\n title: 'Render br',\n markdown: 'br:
    ',\n html: '

    br:

    \\n',\n },\n {\n title: 'Render Html',\n markdown: '
    hello
    ',\n html: '
    hello
    ',\n },\n {\n title: 'Render Html',\n markdown: 'inline: hello',\n html: '

    inline: hello

    \\n',\n },\n];\n\nconst CustomParagraph = (props: React.PropsWithChildren) =>

    {props.children}

    ;\n\ntype ITestCase = {\n markdown: string;\n html: string;\n title: string;\n options?: any;\n};\n\ndescribe('XMarkdown', () => {\n it('content should be string', () => {\n const { container } = render();\n expect(container).toBeEmptyDOMElement();\n });\n\n it('children should be string', () => {\n const { container } = render({undefined});\n expect(container).toBeEmptyDOMElement();\n });\n\n testCases.forEach(({ markdown, title, html }: ITestCase) => {\n it(`common markdown case: ${title}`, () => {\n const { container } = render();\n\n expect((container.firstChild as HTMLElement)?.innerHTML).toBe(html);\n });\n });\n\n it(`render custom components`, () => {\n const markdown = `custom component This is Line`;\n const html = `

    custom component change Line to span

    \\n`;\n const { container } = render(\n {\n return change Line to span;\n },\n }}\n />,\n );\n\n expect((container.firstChild as HTMLElement)?.innerHTML).toBe(html);\n });\n\n it('walkToken', () => {\n const walkTokens = (token: Token) => {\n if (token.type === 'heading') {\n token.depth++;\n }\n };\n const { container } = render();\n\n expect(container.querySelector('h2')).toBeInTheDocument();\n });\n\n it('custom className', () => {\n const { container } = render();\n\n expect(container.firstChild).toHaveClass('custom-class');\n });\n\n it('custom style', () => {\n const testStyle = { backgroundColor: 'red' };\n const { container } = render();\n\n expect(container.firstChild).toHaveStyle(testStyle);\n });\n\n it('should render paragraphs with custom tag when paragraphTag is provided', () => {\n const { container } = render();\n\n // XMarkdown wraps content in a div with class \"ant-x-markdown\"\n const wrapper = container.firstChild as HTMLElement;\n expect(wrapper).toHaveClass('x-markdown');\n expect(wrapper.innerHTML).toBe('
    This is a paragraph.
    \\n');\n });\n\n it('support checkbox is checked', () => {\n const { container } = render();\n expect(container).toMatchSnapshot();\n });\n\n it('support checkbox not checked', () => {\n const { container } = render();\n expect(container).toMatchSnapshot();\n });\n\n it('passes code lang to custom code component', () => {\n let receivedProps: ComponentProps | undefined;\n const Code = (props: ComponentProps) => {\n receivedProps = props;\n return {props.children};\n };\n\n render(\n Hello
    \\n```\\n'}\n components={{ code: Code }}\n />,\n );\n\n expect(receivedProps?.lang).toBe('html preview mode=iframe');\n expect(receivedProps?.block).toBe(true);\n expect(receivedProps?.streamStatus).toBe('done');\n });\n\n describe('escapeRawHtml', () => {\n it('should render block raw HTML as escaped text when escapeRawHtml is true', () => {\n const markdown = '
    hello
    ';\n const { container } = render();\n const html = (container.firstChild as HTMLElement)?.innerHTML ?? '';\n expect(html).toContain('<div>hello</div>');\n expect(html).not.toContain('
    hello
    ');\n });\n\n it('should render block raw HTML as real HTML when escapeRawHtml is false (default)', () => {\n const markdown = '
    hello
    ';\n const { container } = render();\n expect((container.firstChild as HTMLElement)?.innerHTML).toBe('
    hello
    ');\n });\n\n it('should escape script tag when escapeRawHtml is true', () => {\n const markdown = '';\n const { container } = render();\n const html = (container.firstChild as HTMLElement)?.innerHTML ?? '';\n expect(html).toContain('<script>');\n expect(container.querySelector('script')).toBeNull();\n });\n });\n\n describe('openLinksInNewTab', () => {\n it('should add target=\"_blank\" and rel=\"noopener noreferrer\" to links with title when openLinksInNewTab is true', () => {\n const { container } = render(\n ,\n );\n\n const link = container.querySelector('a');\n expect(link).toHaveAttribute('href', 'https://www.google.com');\n expect(link).toHaveAttribute('target', '_blank');\n expect(link).toHaveAttribute('rel', 'noopener noreferrer');\n expect(link).toHaveAttribute('title', 'Google Search');\n expect(link).toHaveTextContent('Google');\n });\n\n it('should not add target=\"_blank\" when openLinksInNewTab is false', () => {\n const { container } = render(\n ,\n );\n\n const link = container.querySelector('a');\n expect(link).toHaveAttribute('href', 'https://www.google.com');\n expect(link).not.toHaveAttribute('target');\n expect(link).not.toHaveAttribute('rel');\n expect(link).toHaveTextContent('Google');\n });\n\n it('should not add target=\"_blank\" when openLinksInNewTab is not provided', () => {\n const { container } = render();\n\n const link = container.querySelector('a');\n expect(link).toHaveAttribute('href', 'https://www.google.com');\n expect(link).not.toHaveAttribute('target');\n expect(link).not.toHaveAttribute('rel');\n expect(link).toHaveTextContent('Google');\n });\n });\n\n describe('animation', () => {\n it('parent is not custom components', () => {\n const { container } = render(\n ,\n );\n expect(container).toMatchSnapshot();\n });\n\n it('parent is custom components', () => {\n const { container } = render(\n ,\n );\n expect(container).toMatchSnapshot();\n });\n });\n});\n\ndescribe('custom code component props', () => {\n const CodeComponent = jest.fn(() => null);\n\n beforeEach(() => {\n CodeComponent.mockClear();\n });\n\n const codeTestCases = [\n {\n title: 'should pass block=false and streamStatus=done for inline code',\n markdown: 'Inline `code` here',\n block: false,\n streamStatus: 'done',\n },\n {\n title: 'should pass block=false and streamStatus=loading for finished inline code',\n markdown: '``` inline code ```',\n block: false,\n streamStatus: 'done',\n },\n {\n title:\n 'should pass block=true and streamStatus=loading for unfinished fenced code blocks start ```',\n markdown: ' ```',\n block: true,\n streamStatus: 'loading',\n },\n {\n title:\n 'should pass block=true and streamStatus=loading for unfinished fenced code blocks with ```',\n markdown: '```js\\nconsole.log(`log`);',\n block: true,\n streamStatus: 'loading',\n },\n {\n title:\n 'should pass block=true and streamStatus=loading for unfinished fenced code blocks with ```',\n markdown: '```js\\nconsole.log(`log`);\\n```',\n block: true,\n streamStatus: 'done',\n },\n {\n title:\n 'should pass block=true and streamStatus=done for finished fenced code blocks with ```',\n markdown: 'start text\\n```js\\n console.log(`log`);\\n```\\n end text',\n block: true,\n streamStatus: 'done',\n },\n {\n title:\n 'should pass block=true and streamStatus=done for finished fenced code blocks with ```\\n\\n',\n markdown: 'start text\\n```js\\n console.log(`log`);\\n```\\n\\n end text',\n block: true,\n streamStatus: 'done',\n },\n {\n title:\n 'should pass block=true and streamStatus=loading for unfinished fenced code blocks start ~~~',\n markdown: '~~~',\n block: true,\n streamStatus: 'loading',\n },\n {\n title:\n 'should pass block=true and streamStatus=loading for unfinished fenced code blocks with ~~~',\n markdown: '~~~js\\nconsole.log(`log`);',\n block: true,\n streamStatus: 'loading',\n },\n {\n title:\n 'should pass block=true and streamStatus=done for finished fenced code blocks with ~~~',\n markdown: 'start text\\n ~~~js\\n console.log(`log`);\\n~~~\\n end text',\n block: true,\n streamStatus: 'done',\n },\n {\n title:\n 'should pass block=true and streamStatus=done for finished fenced code blocks with ~~~\\n\\n',\n markdown: 'start text\\n\\n ~~~js\\n console.log(`log`);\\n~~~\\n\\n end text',\n block: true,\n streamStatus: 'done',\n },\n {\n title: 'should pass block=true and streamStatus=done for indented code blocks',\n markdown: ' console.log(`log`);',\n block: true,\n streamStatus: 'done',\n },\n ];\n\n codeTestCases.forEach(({ title, markdown, block, streamStatus }) => {\n it(title, () => {\n render();\n expect(CodeComponent).toHaveBeenCalledWith(\n expect.objectContaining({ block, streamStatus }),\n undefined,\n );\n });\n });\n});\n\ndescribe('extensions', () => {\n it('user extension should be called before default extension', () => {});\n\n it('should use default link renderer when user renderer returns false', () => {\n const { container } = render(\n ,\n );\n const link = container.querySelector('a');\n expect(link).toBeInTheDocument();\n expect(link).toHaveAttribute('href', 'https://google.com');\n expect(link).toHaveAttribute('target', '_blank');\n expect(link).toHaveAttribute('rel', 'noopener noreferrer');\n expect(link).toHaveTextContent('Google');\n });\n\n it('should use user link renderer when it returns non-false', () => {\n const { container } = render(\n ${text}`;\n },\n },\n }}\n />,\n );\n const link = container.querySelector('a');\n expect(link).toBeInTheDocument();\n expect(link).toHaveClass('custom-link');\n expect(link).not.toHaveAttribute('target');\n expect(link).not.toHaveAttribute('rel');\n expect(link).toHaveTextContent('Google');\n });\n\n it('should use default paragraph renderer when user renderer returns false', () => {\n const { container } = render(\n ,\n );\n expect(container.querySelector('div')).toHaveTextContent('Hello');\n });\n\n it('should use user paragraph renderer when it returns non-false', () => {\n const { container } = render(\n ${text}`;\n },\n },\n }}\n />,\n );\n expect(container.querySelector('section')).toHaveTextContent('Hello');\n });\n\n it('should use default code renderer when user renderer returns false', async () => {\n const content = `\\`\\`\\`javascript\nconsole.log(\"javascript\");\n\\`\\`\\`\\n`;\n const { container } = render(\n ,\n );\n const codeElement = container.querySelector('code');\n expect(codeElement).toBeInTheDocument();\n expect(codeElement).toHaveAttribute('data-block', 'true');\n expect(codeElement).toHaveAttribute('data-state', 'done');\n expect(codeElement).toHaveClass('language-javascript');\n });\n\n it('should use user code renderer when it returns non-false', () => {\n const content = `\\`\\`\\`js\nconsole.log(1);\n\\`\\`\\``;\n const { container } = render(\n ${text.trim()}`;\n },\n },\n }}\n />,\n );\n const code = container.querySelector('pre code');\n expect(code).toHaveClass('lang-js');\n expect(code).toHaveTextContent('console.log(1);');\n expect(code).not.toHaveAttribute('data-block');\n expect(code).not.toHaveAttribute('data-state');\n });\n});\n\ndescribe('streaming', () => {\n it('should keep default tail disabled when tail is not enabled', () => {\n const { container } = render(\n ,\n );\n\n // No tail element when tail is not enabled\n expect(container.querySelector('.xmd-tail')).not.toBeInTheDocument();\n });\n\n it('should enable default tail when `tail` is true', () => {\n const { container, rerender } = render(\n ,\n );\n\n // Tail component should be rendered\n const tailElement = container.querySelector('.xmd-tail');\n expect(tailElement).toBeInTheDocument();\n expect(tailElement).toHaveTextContent('▋');\n\n rerender(\n ,\n );\n\n // Tail should be removed when hasNextChunk is false\n expect(container.querySelector('.xmd-tail')).not.toBeInTheDocument();\n });\n\n it('should support custom tail content', () => {\n const { container } = render(\n ,\n );\n\n const tailElement = container.querySelector('.xmd-tail');\n expect(tailElement).toBeInTheDocument();\n expect(tailElement).toHaveTextContent('●');\n });\n\n it('should support default tail content when tail is empty object', () => {\n const { container } = render(\n ,\n );\n\n const tailElement = container.querySelector('.xmd-tail');\n expect(tailElement).toBeInTheDocument();\n expect(tailElement).toHaveTextContent('▋');\n });\n\n it('should support custom tail component', () => {\n const CustomTail: React.FC<{ content?: string }> = ({ content }) => (\n {content}\n );\n\n const { container } = render(\n ,\n );\n\n const tailElement = container.querySelector('.custom-tail');\n expect(tailElement).toBeInTheDocument();\n expect(tailElement).toHaveTextContent('...');\n });\n\n it('should render tail after the last text in paragraph', () => {\n const { container } = render(\n ,\n );\n\n const paragraphs = container.querySelectorAll('p');\n // Tail should be inside the last paragraph\n const lastParagraph = paragraphs[paragraphs.length - 1];\n const tailElement = lastParagraph.querySelector('.xmd-tail');\n expect(tailElement).toBeInTheDocument();\n });\n\n it('should render tail after the last text in list item', () => {\n const { container } = render(\n ,\n );\n\n const tailElement = container.querySelector('.xmd-tail');\n expect(tailElement).toBeInTheDocument();\n\n // Tail should be inside the last list item\n const listItems = container.querySelectorAll('li');\n const lastListItem = listItems[listItems.length - 1];\n expect(lastListItem.contains(tailElement)).toBe(true);\n });\n\n it('should not render tail when last token is HTML (incomplete component)', () => {\n // When there's an incomplete component at the end (like incomplete-link),\n // the tail should not appear before it\n const { container } = render(\n loading...,\n }}\n />,\n );\n\n // The incomplete-link component should be rendered\n const incompleteLink = container.querySelector('.incomplete-link');\n expect(incompleteLink).toBeInTheDocument();\n\n // Tail should NOT be rendered before incomplete component\n const tailElement = container.querySelector('.xmd-tail');\n expect(tailElement).not.toBeInTheDocument();\n });\n\n it('should not render tail when incomplete component is at the end', () => {\n // \"[incomplete](url end\" is recognized as an incomplete link by useStreaming\n // The content becomes \"Start \" which ends with HTML/incomplete component\n // Therefore, tail should NOT be rendered (similar to \"should not render tail when last token is HTML\")\n const { container } = render(\n loading...,\n }}\n />,\n );\n\n // The incomplete-link component should be rendered\n const incompleteLink = container.querySelector('.incomplete-link');\n expect(incompleteLink).toBeInTheDocument();\n\n // Tail should NOT be rendered because the content ends with an incomplete component\n const tailElement = container.querySelector('.xmd-tail');\n expect(tailElement).not.toBeInTheDocument();\n });\n});\n" }, { "path": "packages/x-markdown/src/XMarkdown/core/Parser.ts", "content": "import { Marked, Renderer, Token, Tokens } from 'marked';\nimport { XMarkdownProps } from '../interface';\n\ntype ParserOptions = {\n markedConfig?: XMarkdownProps['config'];\n paragraphTag?: string;\n openLinksInNewTab?: boolean;\n components?: XMarkdownProps['components'];\n protectCustomTagNewlines?: boolean;\n escapeRawHtml?: boolean;\n};\n\ntype ParseOptions = {\n injectTail?: boolean;\n};\n\nexport const other = {\n escapeTestNoEncode: /[<>\"']|&(?!(#\\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\\w+);)/,\n escapeTest: /[&<>\"'/]/,\n notSpaceStart: /^\\S*/,\n endingNewline: /\\n$/,\n escapeReplace: /[&<>\"'/]/g,\n escapeReplaceNoEncode: /[<>\"']|&(?!(#\\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\\w+);)/g,\n completeFencedCode: /^ {0,3}(`{3,}|~{3,})([\\s\\S]*?)\\n {0,3}\\1[ \\n\\t]*$/,\n};\n\nconst escapeReplacements: Record = {\n '&': '&',\n '<': '<',\n '>': '>',\n '\"': '"',\n \"'\": ''',\n '/': '/',\n};\nconst getEscapeReplacement = (ch: string) => escapeReplacements[ch];\n\nexport function escapeHtml(html: string, encode?: boolean) {\n if (encode) {\n if (other.escapeTest.test(html)) {\n return html.replace(other.escapeReplace, getEscapeReplacement);\n }\n } else {\n if (other.escapeTestNoEncode.test(html)) {\n return html.replace(other.escapeReplaceNoEncode, getEscapeReplacement);\n }\n }\n\n return html;\n}\n\n// Symbol to mark tokens for tail injection (avoids property name conflicts)\nconst TAIL_MARKER = Symbol('tailMarker');\n\n// Type for tokens that can be marked for tail injection\ntype MarkableToken = Token & { [TAIL_MARKER]?: boolean };\n\nclass Parser {\n options: ParserOptions;\n markdownInstance: Marked;\n private injectTail = false;\n\n constructor(options: ParserOptions = {}) {\n this.options = options;\n this.markdownInstance = new Marked();\n\n this.configureLinkRenderer();\n this.configureParagraphRenderer();\n this.configureCodeRenderer();\n this.configureHtmlEscapeRenderer();\n this.configureTailInjection();\n // User config at last\n this.markdownInstance.use(options.markedConfig || {});\n }\n\n private configureHtmlEscapeRenderer() {\n if (!this.options.escapeRawHtml) return;\n\n this.markdownInstance.use({\n renderer: {\n html(this: Renderer, token: Tokens.HTML | Tokens.Tag) {\n const { raw = '', text = '' } = token;\n return escapeHtml(raw || text, true);\n },\n },\n });\n }\n\n private configureLinkRenderer() {\n if (!this.options.openLinksInNewTab) return;\n\n this.markdownInstance.use({\n renderer: {\n link(this: Renderer, { href, title, tokens }: Tokens.Link) {\n const text = this.parser.parseInline(tokens);\n const titleAttr = title ? ` title=\"${title}\"` : '';\n return `${text}`;\n },\n },\n });\n }\n\n private configureParagraphRenderer() {\n const { paragraphTag } = this.options;\n if (!paragraphTag) return;\n\n this.markdownInstance.use({\n renderer: {\n paragraph(this: Renderer, { tokens }: Tokens.Paragraph) {\n return `<${paragraphTag}>${this.parser.parseInline(tokens)}\\n`;\n },\n },\n });\n }\n\n private configureCodeRenderer() {\n this.markdownInstance.use({\n renderer: {\n code({ text, raw, lang, escaped, codeBlockStyle }: Tokens.Code): string {\n const infoString = (lang || '').trim();\n const langString = infoString.match(other.notSpaceStart)?.[0];\n const code = `${text.replace(other.endingNewline, '')}\\n`;\n const isIndentedCode = codeBlockStyle === 'indented';\n const streamStatus =\n isIndentedCode || other.completeFencedCode.test(raw) ? 'done' : 'loading';\n\n const escapedCode = escaped ? code : escapeHtml(code, true);\n const classAttr = langString ? ` class=\"language-${escapeHtml(langString)}\"` : '';\n const dataAttrs =\n ` data-block=\"true\" data-state=\"${streamStatus}\"` +\n (infoString ? ` data-lang=\"${escapeHtml(infoString)}\"` : '');\n\n return `
    ${escapedCode}
    \\n`;\n },\n },\n });\n }\n\n private configureTailInjection() {\n const parser = this;\n this.markdownInstance.use({\n hooks: {\n processAllTokens(tokens) {\n if (!parser.injectTail) return tokens;\n\n const lastTextToken = parser.findLastTextToken(tokens as Token[]);\n if (lastTextToken) {\n (lastTextToken as MarkableToken)[TAIL_MARKER] = true;\n }\n return tokens;\n },\n },\n renderer: {\n text(this: Renderer, token: Tokens.Text | Tokens.Escape) {\n const text =\n 'tokens' in token && token.tokens\n ? this.parser.parseInline(token.tokens)\n : 'text' in token\n ? token.text\n : '';\n\n // Inject xmd-tail after the marked text token\n if ((token as MarkableToken)[TAIL_MARKER]) {\n return `${text}`;\n }\n return text;\n },\n },\n });\n }\n\n private protectCustomTags(content: string): {\n protected: string;\n placeholders: Map;\n } {\n const placeholders = new Map();\n const customTagNames = Object.keys(this.options.components || {});\n\n if (customTagNames.length === 0) {\n return { protected: content, placeholders };\n }\n\n let placeholderIndex = 0;\n const tagNamePattern = customTagNames\n .map((name) => name.toLowerCase().replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'))\n .join('|');\n\n const openTagRegex = new RegExp(`<(${tagNamePattern})(?:\\\\s[^>]*)?>`, 'gi');\n const closeTagRegex = new RegExp(``, 'gi');\n\n const positions: Array<{\n index: number;\n type: 'open' | 'close';\n tagName: string;\n match: string;\n }> = [];\n\n let match = openTagRegex.exec(content);\n while (match !== null) {\n positions.push({\n index: match.index,\n type: 'open',\n tagName: match[1].toLowerCase(),\n match: match[0],\n });\n match = openTagRegex.exec(content);\n }\n\n closeTagRegex.lastIndex = 0;\n match = closeTagRegex.exec(content);\n while (match !== null) {\n positions.push({\n index: match.index,\n type: 'close',\n tagName: match[1].toLowerCase(),\n match: match[0],\n });\n match = closeTagRegex.exec(content);\n }\n\n positions.sort((a, b) => a.index - b.index);\n\n const stack: Array<{ tagName: string; start: number; openTag: string }> = [];\n const result: string[] = [];\n let lastIndex = 0;\n\n for (const pos of positions) {\n if (pos.type === 'open') {\n // Self-closing tags don't have inner content\n if (!pos.match.endsWith('/>')) {\n stack.push({ tagName: pos.tagName, start: pos.index, openTag: pos.match });\n }\n } else if (\n pos.type === 'close' &&\n stack.length > 0 &&\n stack[stack.length - 1].tagName === pos.tagName\n ) {\n const open = stack.pop()!;\n if (stack.length === 0) {\n const startPos = open.start;\n const endPos = pos.index + pos.match.length;\n const openTag = open.openTag;\n const closeTag = pos.match;\n const innerContent = content.slice(startPos + openTag.length, pos.index);\n\n if (lastIndex < startPos) {\n result.push(content.slice(lastIndex, startPos));\n }\n\n if (innerContent.includes('\\n\\n')) {\n const protectedInner = innerContent.replace(/\\n\\n/g, () => {\n const ph = `__X_MD_PLACEHOLDER_${placeholderIndex++}__`;\n placeholders.set(ph, '\\n\\n');\n return ph;\n });\n result.push(openTag + protectedInner + closeTag);\n } else {\n result.push(openTag + innerContent + closeTag);\n }\n\n lastIndex = endPos;\n }\n }\n }\n\n if (lastIndex < content.length) {\n result.push(content.slice(lastIndex));\n }\n\n return { protected: result.join(''), placeholders };\n }\n\n private restorePlaceholders(content: string, placeholders: Map): string {\n if (placeholders.size === 0) {\n return content;\n }\n return content.replace(\n /__X_MD_PLACEHOLDER_\\d+__/g,\n (match) => placeholders.get(match) ?? match,\n );\n }\n\n /**\n * Find the last non-empty token in the token tree (reverse search)\n */\n private findLastNonEmptyToken(tokens: Token[]): Token | null {\n for (let i = tokens.length - 1; i >= 0; i--) {\n const token = tokens[i];\n\n // Check for list items (list -> items -> list_item)\n if (token.type === 'list' && 'items' in token && Array.isArray(token.items)) {\n for (let j = token.items.length - 1; j >= 0; j--) {\n const item = token.items[j];\n if ('tokens' in item && item.tokens && item.tokens.length > 0) {\n const found = this.findLastNonEmptyToken(item.tokens as Token[]);\n if (found) return found;\n }\n }\n }\n\n // Depth-first: check nested tokens first\n if ('tokens' in token && token.tokens && token.tokens.length > 0) {\n const found = this.findLastNonEmptyToken(token.tokens as Token[]);\n if (found) return found;\n }\n\n // Check if this is a valid token with content\n if (token.type === 'text') {\n const textContent = 'text' in token ? token.text : '';\n // Skip empty text tokens\n if (textContent.trim()) {\n return token;\n }\n } else if (token.type === 'html' || token.type === 'tag') {\n return token;\n }\n }\n return null;\n }\n\n /**\n * Find the last text token in the token tree\n * Returns null if the last non-empty token is not a text type (e.g., HTML/incomplete component)\n */\n private findLastTextToken(tokens: Token[]): Token | null {\n const lastNonEmptyToken = this.findLastNonEmptyToken(tokens);\n\n // If the last token is not text type, don't inject tail\n // This prevents tail from appearing before incomplete components\n if (!lastNonEmptyToken || lastNonEmptyToken.type !== 'text') {\n return null;\n }\n\n return lastNonEmptyToken;\n }\n\n public parse(content: string, parseOptions?: ParseOptions) {\n // Set tail injection flag\n this.injectTail = parseOptions?.injectTail ?? false;\n\n // Protect custom tags if needed\n if (this.options.protectCustomTagNewlines) {\n const { protected: protectedContent, placeholders } = this.protectCustomTags(content);\n const parsed = this.markdownInstance.parse(protectedContent) as string;\n return this.restorePlaceholders(parsed, placeholders);\n }\n\n return this.markdownInstance.parse(content) as string;\n }\n}\n\nexport default Parser;\n" }, { "path": "packages/x-markdown/src/XMarkdown/core/Renderer.ts", "content": "import type { Config as DOMPurifyConfig } from 'dompurify';\nimport DOMPurify from 'dompurify';\nimport type { DOMNode, Element } from 'html-react-parser';\nimport parseHtml, { domToReact } from 'html-react-parser';\nimport React, { ReactNode } from 'react';\nimport AnimationText from '../AnimationText';\nimport type { ComponentProps, XMarkdownProps } from '../interface';\nimport { detectUnclosedComponentTags, getTagInstanceId } from './detectUnclosedComponentTags';\n\ninterface RendererOptions {\n components?: XMarkdownProps['components'];\n dompurifyConfig?: DOMPurifyConfig;\n streaming?: XMarkdownProps['streaming'];\n}\n\nclass Renderer {\n private readonly options: RendererOptions;\n private static readonly NON_WHITESPACE_REGEX = /[^\\r\\n\\s]+/;\n\n constructor(options: RendererOptions) {\n this.options = options;\n }\n\n private detectUnclosedTags(htmlString: string): Set {\n return detectUnclosedComponentTags(htmlString, Object.keys(this.options.components ?? {}));\n }\n\n /**\n * Configure DOMPurify to preserve components and target attributes, filter everything else\n */\n private configureDOMPurify(): DOMPurifyConfig {\n const customComponents = Object.keys(this.options.components || {});\n const userConfig = this.options.dompurifyConfig || {};\n\n const allowedTags = Array.isArray(userConfig.ADD_TAGS) ? userConfig.ADD_TAGS : [];\n const addAttr = Array.isArray(userConfig.ADD_ATTR) ? userConfig.ADD_ATTR : [];\n\n return {\n ...userConfig,\n ADD_TAGS: Array.from(new Set([...customComponents, ...allowedTags])),\n ADD_ATTR: Array.from(new Set(['target', 'rel', ...addAttr])),\n };\n }\n\n private createReplaceElement(\n unclosedTags: Set | undefined,\n cidRef: { current: number; tagIndexes: Record },\n ) {\n const { enableAnimation, animationConfig } = this.options.streaming || {};\n return (domNode: DOMNode) => {\n const key = `x-markdown-component-${cidRef.current++}`;\n\n // Check if it's a text node with data\n const isValidTextNode =\n domNode.type === 'text' && domNode.data && Renderer.NON_WHITESPACE_REGEX.test(domNode.data);\n // Skip animation for text nodes inside custom components to preserve their internal structure\n const parentTagName = (domNode.parent as Element)?.name;\n const isParentCustomComponent = parentTagName && this.options.components?.[parentTagName];\n const shouldReplaceText = enableAnimation && isValidTextNode && !isParentCustomComponent;\n if (shouldReplaceText) {\n return React.createElement(AnimationText, { text: domNode.data, key, animationConfig });\n }\n\n if (!('name' in domNode)) return;\n\n const { name, attribs, children } = domNode as Element;\n const renderElement = this.options.components?.[name];\n if (renderElement) {\n cidRef.tagIndexes[name] = (cidRef.tagIndexes[name] ?? 0) + 1;\n const streamStatus = unclosedTags?.has(getTagInstanceId(name, cidRef.tagIndexes[name]))\n ? 'loading'\n : 'done';\n const props: ComponentProps = {\n domNode,\n streamStatus,\n key,\n ...attribs,\n ...(attribs.disabled !== undefined && { disabled: true }),\n ...(attribs.checked !== undefined && { checked: true }),\n };\n\n // Handle class and className merging\n const classes = [props.className, props.classname, props.class]\n .filter(Boolean)\n .join(' ')\n .trim();\n props.className = classes || '';\n\n if (name === 'code') {\n const { 'data-block': block = 'false', 'data-state': codeStreamStatus = 'done' } =\n attribs || {};\n props.block = block === 'true';\n props.streamStatus = codeStreamStatus === 'loading' ? 'loading' : 'done';\n const langFromData = attribs?.['data-lang'];\n const langFromClass =\n attribs?.class?.match(/(?:^|\\s)language-([^\\s]+)/)?.[1] ??\n attribs?.class?.match(/(?:^|\\s)lang-([^\\s]+)/)?.[1];\n const lang = langFromData || langFromClass;\n if (lang) {\n props.lang = lang;\n }\n }\n\n if (children) {\n props.children = this.processChildren(children as DOMNode[], unclosedTags, cidRef);\n }\n\n return React.createElement(renderElement, props);\n }\n };\n }\n\n private processChildren(\n children: DOMNode[],\n unclosedTags: Set | undefined,\n cidRef: { current: number; tagIndexes: Record },\n ): ReactNode {\n return domToReact(children as DOMNode[], {\n replace: this.createReplaceElement(unclosedTags, cidRef),\n });\n }\n\n public processHtml(htmlString: string): React.ReactNode {\n const unclosedTags = this.detectUnclosedTags(htmlString);\n const cidRef = { current: 0, tagIndexes: {} };\n\n // Use DOMPurify to clean HTML while preserving custom components and target attributes\n const purifyConfig = this.configureDOMPurify();\n const cleanHtml = DOMPurify.sanitize(htmlString, purifyConfig);\n\n return parseHtml(cleanHtml, {\n replace: this.createReplaceElement(unclosedTags, cidRef),\n });\n }\n\n public render(html: string): ReactNode | null {\n return this.processHtml(html);\n }\n}\n\nexport default Renderer;\n" }, { "path": "packages/x-markdown/src/XMarkdown/core/detectUnclosedComponentTags.ts", "content": "const WHITESPACE_REGEX = /\\s/;\nconst TAG_NAME_CHAR_REGEX = /[a-zA-Z0-9-]/;\nconst VOID_ELEMENTS = new Set([\n 'area',\n 'base',\n 'br',\n 'col',\n 'embed',\n 'hr',\n 'img',\n 'input',\n 'link',\n 'meta',\n 'param',\n 'source',\n 'track',\n 'wbr',\n]);\nconst COMMENT_START = '';\nconst CDATA_START = '';\n\nexport const getTagInstanceId = (tagName: string, instance: number) => `${tagName}-${instance}`;\n\nconst skipComment = (html: string, pos: number): number => {\n if (!html.startsWith(COMMENT_START, pos)) {\n return pos;\n }\n\n const endPos = html.indexOf(COMMENT_END, pos + COMMENT_START.length);\n return endPos === -1 ? html.length : endPos + COMMENT_END.length;\n};\n\nconst skipCDATA = (html: string, pos: number): number => {\n if (!html.startsWith(CDATA_START, pos)) {\n return pos;\n }\n\n const endPos = html.indexOf(CDATA_END, pos + CDATA_START.length);\n return endPos === -1 ? html.length : endPos + CDATA_END.length;\n};\n\nconst parseClosingTag = (html: string, pos: number): { tagName: string; endPos: number } | null => {\n if (html[pos + 1] !== '/') {\n return null;\n }\n\n let scanPos = pos + 2;\n let tagName = '';\n\n while (scanPos < html.length && WHITESPACE_REGEX.test(html[scanPos])) {\n scanPos++;\n }\n\n while (scanPos < html.length && TAG_NAME_CHAR_REGEX.test(html[scanPos])) {\n tagName += html[scanPos];\n scanPos++;\n }\n\n while (scanPos < html.length && WHITESPACE_REGEX.test(html[scanPos])) {\n scanPos++;\n }\n\n if (!tagName || html[scanPos] !== '>') {\n return null;\n }\n\n return { tagName: tagName.toLowerCase(), endPos: scanPos + 1 };\n};\n\nconst parseOpeningTag = (\n html: string,\n pos: number,\n): { tagName: string; endPos: number; foundEnd: boolean; isSelfClosing: boolean } | null => {\n let scanPos = pos + 1;\n let tagName = '';\n\n while (scanPos < html.length && TAG_NAME_CHAR_REGEX.test(html[scanPos])) {\n tagName += html[scanPos];\n scanPos++;\n }\n\n if (!tagName) {\n return null;\n }\n\n let foundEnd = false;\n let isSelfClosing = false;\n\n while (scanPos < html.length) {\n if (html[scanPos] === '>') {\n foundEnd = true;\n isSelfClosing = html[scanPos - 1] === '/';\n break;\n }\n\n if (html[scanPos] === '\"' || html[scanPos] === \"'\") {\n const quoteChar = html[scanPos];\n scanPos++;\n\n while (scanPos < html.length) {\n if (html[scanPos] === '\\\\' && scanPos + 1 < html.length) {\n scanPos += 2;\n continue;\n }\n\n if (html[scanPos] === quoteChar) {\n scanPos++;\n break;\n }\n\n scanPos++;\n }\n\n continue;\n }\n\n scanPos++;\n }\n\n return {\n tagName: tagName.toLowerCase(),\n endPos: foundEnd ? scanPos + 1 : html.length,\n foundEnd,\n isSelfClosing,\n };\n};\n\nexport function detectUnclosedComponentTags(\n html: string,\n componentNames: Iterable,\n): Set {\n const trackedTags = new Set(Array.from(componentNames, (tagName) => tagName.toLowerCase()));\n\n if (trackedTags.size === 0 || html.length === 0) {\n return new Set();\n }\n\n const unclosedTags = new Set();\n const tagCounts: Record = {};\n const openTagIndexes: Record = {};\n\n let pos = 0;\n while (pos < html.length) {\n const afterComment = skipComment(html, pos);\n if (afterComment !== pos) {\n pos = afterComment;\n continue;\n }\n\n const afterCDATA = skipCDATA(html, pos);\n if (afterCDATA !== pos) {\n pos = afterCDATA;\n continue;\n }\n\n if (html[pos] !== '<') {\n pos++;\n continue;\n }\n\n const closingTag = parseClosingTag(html, pos);\n if (closingTag) {\n const pendingIndexes = openTagIndexes[closingTag.tagName];\n if (trackedTags.has(closingTag.tagName) && pendingIndexes?.length) {\n pendingIndexes.pop();\n }\n pos = closingTag.endPos;\n continue;\n }\n\n const openingTag = parseOpeningTag(html, pos);\n if (!openingTag || !trackedTags.has(openingTag.tagName)) {\n pos++;\n continue;\n }\n\n tagCounts[openingTag.tagName] = (tagCounts[openingTag.tagName] ?? 0) + 1;\n const instance = tagCounts[openingTag.tagName];\n\n if (!openingTag.foundEnd) {\n unclosedTags.add(getTagInstanceId(openingTag.tagName, instance));\n } else if (!openingTag.isSelfClosing && !VOID_ELEMENTS.has(openingTag.tagName)) {\n openTagIndexes[openingTag.tagName] ??= [];\n openTagIndexes[openingTag.tagName].push(instance);\n }\n\n pos = openingTag.endPos;\n }\n\n for (const [tagName, pendingIndexes] of Object.entries(openTagIndexes)) {\n pendingIndexes.forEach((instance) => {\n unclosedTags.add(getTagInstanceId(tagName, instance));\n });\n }\n\n return unclosedTags;\n}\n" }, { "path": "packages/x-markdown/src/XMarkdown/core/index.ts", "content": "import Parser from './Parser';\nimport Renderer from './Renderer';\n\nexport { Parser, Renderer };\n" }, { "path": "packages/x-markdown/src/XMarkdown/hooks/index.ts", "content": "import useStreaming from './useStreaming';\n\nexport { useStreaming };\n" }, { "path": "packages/x-markdown/src/XMarkdown/hooks/useStreaming.ts", "content": "import { useCallback, useEffect, useRef, useState } from 'react';\nimport { StreamCacheTokenType, XMarkdownProps } from '../interface';\n\n/* ------------ Type ------------ */\n\nexport interface StreamCache {\n pending: string;\n token: StreamCacheTokenType;\n processedLength: number;\n completeMarkdown: string;\n}\n\n/**\n * When a token is about to be committed, if a non-empty string is returned,\n * only that prefix is committed and the rest of the pending content is left\n * for subsequent recognition (used for handover scenarios like list followed by `).\n * Returns null to commit the entire pending content by default.\n */\ninterface Recognizer {\n tokenType: StreamCacheTokenType;\n isStartOfToken: (markdown: string) => boolean;\n isStreamingValid: (markdown: string) => boolean;\n /** Optional: prefix for partial commit, useful for extending handover logic\n * when the current token ends and is immediately followed by the start symbol\n * of the next token */\n getCommitPrefix?: (pending: string) => string | null;\n}\n\n/* ------------ Constants ------------ */\n// Validates whether a token is still incomplete in the streaming context.\n// Returns true if the token is syntactically incomplete; false if it is complete or invalid.\nconst STREAM_INCOMPLETE_REGEX = {\n image: [/^!\\[[^\\]\\r\\n]{0,1000}$/, /^!\\[[^\\r\\n]{0,1000}\\]\\(*[^)\\r\\n]{0,1000}$/],\n link: [/^\\[[^\\]\\r\\n]{0,1000}$/, /^\\[[^\\r\\n]{0,1000}\\]\\(*[^)\\r\\n]{0,1000}$/],\n html: [/^<\\/$/, /^<\\/?[a-zA-Z][a-zA-Z0-9-]{0,100}[^>\\r\\n]{0,1000}$/],\n commonEmphasis: [/^(\\*{1,3}|_{1,3})(?!\\s)(?!.*\\1$)[^\\r\\n]{0,1000}$/],\n // regex2 matches cases like \"- **\" (list item with emphasis start).\n list: [/^[-+*]\\s{0,3}$/, /^[-+*]\\s{1,3}(\\*{1,3}|_{1,3})(?!\\s)(?!.*\\1$)[^\\r\\n]{0,1000}$/],\n 'inline-code': [/^`[^`\\r\\n]{0,300}$/],\n} as const;\n\nconst isTableInComplete = (markdown: string) => {\n if (markdown.includes('\\n\\n')) return false;\n\n const lines = markdown.split('\\n');\n if (lines.length <= 1) return true;\n\n const [header, separator] = lines;\n const trimmedHeader = header.trim();\n if (!/^\\|.*\\|$/.test(trimmedHeader)) return false;\n\n const trimmedSeparator = separator.trim();\n const columns = trimmedSeparator\n .split('|')\n .map((col) => col.trim())\n .filter(Boolean);\n\n const separatorRegex = /^:?-+:?$/;\n return columns.every((col, index) =>\n index === columns.length - 1\n ? col === ':' || separatorRegex.test(col)\n : separatorRegex.test(col),\n );\n};\n\nconst tokenRecognizerMap: Partial> = {\n [StreamCacheTokenType.Link]: {\n tokenType: StreamCacheTokenType.Link,\n isStartOfToken: (markdown: string) => markdown.startsWith('['),\n isStreamingValid: (markdown: string) =>\n STREAM_INCOMPLETE_REGEX.link.some((re) => re.test(markdown)),\n },\n [StreamCacheTokenType.Image]: {\n tokenType: StreamCacheTokenType.Image,\n isStartOfToken: (markdown: string) => markdown.startsWith('!'),\n isStreamingValid: (markdown: string) =>\n STREAM_INCOMPLETE_REGEX.image.some((re) => re.test(markdown)),\n },\n [StreamCacheTokenType.Html]: {\n tokenType: StreamCacheTokenType.Html,\n isStartOfToken: (markdown: string) => markdown.startsWith('<'),\n isStreamingValid: (markdown: string) =>\n STREAM_INCOMPLETE_REGEX.html.some((re) => re.test(markdown)),\n },\n [StreamCacheTokenType.Emphasis]: {\n tokenType: StreamCacheTokenType.Emphasis,\n isStartOfToken: (markdown: string) => markdown.startsWith('*') || markdown.startsWith('_'),\n isStreamingValid: (markdown: string) =>\n STREAM_INCOMPLETE_REGEX.commonEmphasis.some((re) => re.test(markdown)),\n },\n [StreamCacheTokenType.List]: {\n tokenType: StreamCacheTokenType.List,\n isStartOfToken: (markdown: string) => /^[-+*]/.test(markdown),\n isStreamingValid: (markdown: string) =>\n STREAM_INCOMPLETE_REGEX.list.some((re) => re.test(markdown)),\n // On backtick after list, commit only the prefix; treat the rest as inline code.\n getCommitPrefix: (pending: string) => {\n const listPrefix = pending.match(/^([-+*]\\s{0,3})/)?.[1];\n const rest = listPrefix ? pending.slice(listPrefix.length) : '';\n return listPrefix && rest.startsWith('`') ? listPrefix : null;\n },\n },\n [StreamCacheTokenType.Table]: {\n tokenType: StreamCacheTokenType.Table,\n isStartOfToken: (markdown: string) => markdown.startsWith('|'),\n isStreamingValid: isTableInComplete,\n },\n [StreamCacheTokenType.InlineCode]: {\n tokenType: StreamCacheTokenType.InlineCode,\n isStartOfToken: (markdown: string) => markdown.startsWith('`'),\n isStreamingValid: (markdown: string) =>\n STREAM_INCOMPLETE_REGEX['inline-code'].some((re) => re.test(markdown)),\n },\n};\n\nconst recognize = (cache: StreamCache, tokenType: StreamCacheTokenType): void => {\n const recognizer = tokenRecognizerMap[tokenType];\n if (!recognizer) return;\n\n const { token, pending } = cache;\n if (token === StreamCacheTokenType.Text && recognizer.isStartOfToken(pending)) {\n cache.token = tokenType;\n return;\n }\n\n if (token === tokenType && !recognizer.isStreamingValid(pending)) {\n const prefix = recognizer.getCommitPrefix?.(pending);\n if (prefix) {\n cache.completeMarkdown += prefix;\n cache.pending = pending.slice(prefix.length);\n cache.token = StreamCacheTokenType.Text;\n return;\n }\n commitCache(cache);\n }\n};\n\nconst recognizeHandlers = Object.values(tokenRecognizerMap).map((rec) => ({\n tokenType: rec.tokenType,\n recognize: (cache: StreamCache) => recognize(cache, rec.tokenType),\n}));\n\n/* ------------ Utils ------------ */\nconst getInitialCache = (): StreamCache => ({\n pending: '',\n token: StreamCacheTokenType.Text,\n processedLength: 0,\n completeMarkdown: '',\n});\n\nconst commitCache = (cache: StreamCache): void => {\n if (cache.pending) {\n cache.completeMarkdown += cache.pending;\n cache.pending = '';\n }\n cache.token = StreamCacheTokenType.Text;\n};\n\nconst isInCodeBlock = (text: string, isFinalChunk = false): boolean => {\n const lines = text.split('\\n');\n let inFenced = false;\n let fenceChar = '';\n let fenceLen = 0;\n\n for (let i = 0; i < lines.length; i++) {\n const rawLine = lines[i];\n const line = rawLine.endsWith('\\r') ? rawLine.slice(0, -1) : rawLine;\n\n const match = line.match(/^(`{3,}|~{3,})(.*)$/);\n if (match) {\n const fence = match[1];\n const after = match[2];\n const char = fence[0];\n const len = fence.length;\n\n if (!inFenced) {\n inFenced = true;\n fenceChar = char;\n fenceLen = len;\n } else {\n // Check if this is a valid closing fence\n const isValidEnd = char === fenceChar && len >= fenceLen && /^\\s*$/.test(after);\n\n if (isValidEnd) {\n // In streaming context, only close if this is the final chunk\n // or if there are more lines after this fence\n if (isFinalChunk || i < lines.length - 1) {\n inFenced = false;\n fenceChar = '';\n fenceLen = 0;\n }\n // Otherwise, keep the fence open for potential streaming continuation\n }\n }\n }\n }\n\n return inFenced;\n};\n\nconst sanitizeForURIComponent = (input: string): string => {\n let result = '';\n for (let i = 0; i < input.length; i++) {\n const charCode = input.charCodeAt(i);\n\n // 处理代理对：保留合法，跳过孤立\n if (charCode >= 0xd800 && charCode <= 0xdbff) {\n // High surrogate\n // Check for a following low surrogate to form a valid pair\n if (\n i + 1 < input.length &&\n input.charCodeAt(i + 1) >= 0xdc00 &&\n input.charCodeAt(i + 1) <= 0xdfff\n ) {\n result += input[i] + input[i + 1];\n i++; // Skip the low surrogate as it's already processed\n }\n // Lone high surrogates are otherwise skipped\n } else if (charCode < 0xdc00 || charCode > 0xdfff) {\n // Append characters that are not lone low surrogates\n result += input[i];\n }\n // Lone low surrogates are otherwise skipped\n }\n return result;\n};\n\nconst safeEncodeURIComponent = (str: string): string => {\n try {\n return encodeURIComponent(str);\n } catch (e) {\n if (e instanceof URIError) {\n return encodeURIComponent(sanitizeForURIComponent(str));\n }\n return '';\n }\n};\n\n/* ------------ Main Hook ------------ */\nconst useStreaming = (\n input: string,\n config?: { streaming: XMarkdownProps['streaming']; components?: XMarkdownProps['components'] },\n) => {\n const { streaming, components = {} } = config || {};\n const { hasNextChunk: enableCache = false, incompleteMarkdownComponentMap } = streaming || {};\n const [output, setOutput] = useState('');\n const cacheRef = useRef(getInitialCache());\n\n const handleIncompleteMarkdown = useCallback(\n (cache: StreamCache): string | undefined => {\n const { token, pending } = cache;\n if (token === StreamCacheTokenType.Text) return;\n /**\n * An image tag starts with '!', if it's the only character, it's incomplete and should be stripped.\n * ！\n * ^\n */\n if (token === StreamCacheTokenType.Image && pending === '!') return undefined;\n\n /**\n * If a table has more than two lines (header, separator, and at least one row),\n * it's considered complete enough to not be replaced by a placeholder.\n * | column1 | column2 |\\n| -- | --|\\n\n * ^\n */\n if (token === StreamCacheTokenType.Table && pending.split('\\n').length > 2) {\n return pending;\n }\n\n const componentMap = incompleteMarkdownComponentMap || {};\n const componentName = componentMap[token] || `incomplete-${token}`;\n const encodedPending = safeEncodeURIComponent(pending);\n\n return components?.[componentName]\n ? `<${componentName} data-raw=\"${encodedPending}\" />`\n : undefined;\n },\n [incompleteMarkdownComponentMap, components],\n );\n\n const processStreaming = useCallback(\n (text: string): void => {\n if (!text) {\n setOutput('');\n cacheRef.current = getInitialCache();\n return;\n }\n\n const expectedPrefix = cacheRef.current.completeMarkdown + cacheRef.current.pending;\n // Reset cache if input doesn't continue from previous state\n if (!text.startsWith(expectedPrefix)) {\n cacheRef.current = getInitialCache();\n }\n\n const cache = cacheRef.current;\n const chunk = text.slice(cache.processedLength);\n if (!chunk) return;\n\n cache.processedLength += chunk.length;\n for (const char of chunk) {\n cache.pending += char;\n const isContentInCodeBlock = isInCodeBlock(cache.completeMarkdown + cache.pending);\n if (isContentInCodeBlock) {\n commitCache(cache);\n continue;\n }\n if (cache.token === StreamCacheTokenType.Text) {\n for (const handler of recognizeHandlers) handler.recognize(cache);\n } else {\n const handler = recognizeHandlers.find((handler) => handler.tokenType === cache.token);\n handler?.recognize(cache);\n // After commit (e.g. list → Text), re-run all recognizers so pending (e.g. \"`\") becomes the new token (e.g. inline-code)\n const tokenAfterRecognize = cache.token as StreamCacheTokenType;\n if (tokenAfterRecognize === StreamCacheTokenType.Text) {\n for (const h of recognizeHandlers) h.recognize(cache);\n }\n }\n\n if (cache.token === StreamCacheTokenType.Text) {\n commitCache(cache);\n }\n }\n\n const incompletePlaceholder = handleIncompleteMarkdown(cache);\n setOutput(cache.completeMarkdown + (incompletePlaceholder || ''));\n },\n [handleIncompleteMarkdown],\n );\n\n useEffect(() => {\n if (typeof input !== 'string') {\n console.error(`X-Markdown: input must be string, not ${typeof input}.`);\n setOutput('');\n return;\n }\n\n enableCache ? processStreaming(input) : setOutput(input);\n }, [input, enableCache, processStreaming]);\n\n return output;\n};\n\nexport default useStreaming;\n" }, { "path": "packages/x-markdown/src/XMarkdown/index.css", "content": "/* ==========================================\n XMarkdown – default css\n ========================================== */\n\n@keyframes x-markdown-fade-in {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.x-markdown {\n --text-color: inherit;\n --font-size: inherit;\n --margin-block: 0 0 1em 0;\n --td-th-padding: 0.85em 1em;\n --pre-th-td-padding: 2px 0;\n --border-font-weight: 600;\n --padding-ul-ol: 0 0 0 1em;\n --margin-ul-ol: 0 0 1em 1.8em;\n --margin-li: 0.25em 0;\n --margin-pre: 1em 0;\n --padding-code-inline: 0.2em 0.4em;\n --margin-code-inline: 0 0.2em;\n --code-inline-text: 0.85em;\n --small-border-radius: 2px;\n --image-margin: 0.5em 0;\n --hr-margin: 1.5em 0;\n --table-margin: 1em 0;\n\n font-size: var(--font-size);\n line-height: 1.5714285714285714;\n width: 100%;\n color: var(--text-color);\n}\n\n/* xmd-tail: default styling for streaming tail indicator */\nxmd-tail {\n display: inline;\n}\n\n.xmd-tail {\n color: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.x-markdown p,\n.x-markdown div,\n.x-markdown span,\n.x-markdown li {\n word-break: break-word;\n overflow-wrap: break-word;\n}\n\n.x-markdown pre,\n.x-markdown code {\n word-break: break-word;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n}\n\n.x-markdown th,\n.x-markdown td {\n padding: var(--td-th-padding);\n}\n\n.x-markdown th {\n font-weight: var(--border-font-weight);\n}\n\n.x-markdown pre table {\n box-shadow: none;\n}\n\n.x-markdown pre td,\n.x-markdown pre th {\n padding: var(--pre-th-td-padding);\n border: none;\n text-align: left;\n}\n\n.x-markdown p {\n margin: var(--margin-block);\n}\n\n.x-markdown p:first-child {\n margin-top: 0;\n}\n\n.x-markdown p:last-child {\n margin-bottom: 0;\n}\n\n.x-markdown ul,\n.x-markdown ol {\n margin: var(--margin-ul-ol);\n padding: var(--padding-ul-ol);\n}\n\n.x-markdown ul:first-child,\n.x-markdown ol:first-child {\n margin-top: 0;\n}\n\n.x-markdown ul:last-child,\n.x-markdown ol:last-child {\n margin-bottom: 0;\n}\n\n.x-markdown ol > li {\n list-style: decimal;\n}\n\n.x-markdown ul > li {\n list-style: disc;\n}\n\n.x-markdown li {\n margin: var(--margin-li);\n}\n\n.x-markdown li:first-child {\n margin-top: 0;\n}\n\n.x-markdown li:last-child {\n margin-bottom: 0;\n}\n\n.x-markdown pre {\n margin: var(--margin-pre);\n overflow-x: auto;\n}\n\n.x-markdown pre:first-child {\n margin-top: 0;\n}\n\n.x-markdown pre:last-child {\n margin-bottom: 0;\n}\n\n.x-markdown code {\n padding: var(--padding-code-inline);\n margin: var(--margin-code-inline);\n font-size: var(--code-inline-text);\n border-radius: var(--small-border-radius);\n}\n\n.x-markdown pre code {\n padding: 0;\n margin: 0;\n font-size: inherit;\n border-radius: 0;\n line-height: 2;\n}\n\n.x-markdown img {\n max-width: 100%;\n height: auto;\n margin: var(--image-margin);\n}\n\n.x-markdown hr {\n margin: var(--hr-margin);\n}\n\n.x-markdown table:not(pre) {\n margin: var(--table-margin);\n border-collapse: collapse;\n display: block;\n width: max-content;\n max-width: 100%;\n overflow: auto;\n}\n\n.x-markdown table:not(pre):first-child {\n margin-top: 0;\n}\n\n.x-markdown table:not(pre):last-child {\n margin-bottom: 0;\n}\n\n.x-markdown .inline-katex .katex-display {\n display: inline-block;\n margin: 0;\n text-align: initial;\n vertical-align: middle;\n}\n\n.x-markdown .inline-katex .katex-display > .katex {\n display: inline-block;\n text-align: initial;\n white-space: normal;\n}\n\n.x-markdown .inline-katex .katex-display > .katex > .katex-html {\n display: inline-block;\n position: static;\n}\n\n.x-markdown .inline-katex .katex-display > .katex > .katex-html > .tag {\n position: static;\n}\n" }, { "path": "packages/x-markdown/src/XMarkdown/index.tsx", "content": "import { clsx } from 'clsx';\nimport React, { useMemo } from 'react';\nimport { Parser, Renderer } from './core';\nimport DebugPanel from './DebugPanel';\nimport { useStreaming } from './hooks';\nimport { XMarkdownProps } from './interface';\nimport { resolveTailContent } from './utils/tail';\nimport './index.css';\n\nconst XMarkdown: React.FC = React.memo((props) => {\n const {\n streaming,\n config,\n components,\n paragraphTag,\n content,\n children,\n rootClassName,\n className,\n style,\n openLinksInNewTab,\n dompurifyConfig,\n protectCustomTagNewlines,\n escapeRawHtml,\n debug,\n } = props;\n const tailContent = useMemo(() => resolveTailContent(streaming?.tail), [streaming?.tail]);\n const TailComponent = typeof streaming?.tail === 'object' ? streaming.tail.component : undefined;\n const shouldShowTail = !!streaming?.hasNextChunk && tailContent;\n\n // ============================ style ============================\n const mergedCls = clsx('x-markdown', rootClassName, className);\n\n // ============================ Streaming ============================\n const output = useStreaming(content || children || '', { streaming, components });\n\n // ============================ Merge components with xmd-tail ============================\n const mergedComponents = useMemo(() => {\n if (!shouldShowTail) {\n return components;\n }\n\n const TailElement = TailComponent ? (\n React.createElement(TailComponent, { content: tailContent })\n ) : (\n {tailContent}\n );\n\n return {\n ...components,\n 'xmd-tail': () => TailElement,\n };\n }, [shouldShowTail, components, TailComponent, tailContent]);\n\n // ============================ Render ============================\n const parser = useMemo(\n () =>\n new Parser({\n markedConfig: config,\n paragraphTag,\n openLinksInNewTab,\n components: mergedComponents,\n protectCustomTagNewlines,\n escapeRawHtml,\n }),\n [\n config,\n paragraphTag,\n openLinksInNewTab,\n mergedComponents,\n protectCustomTagNewlines,\n escapeRawHtml,\n ],\n );\n\n const renderer = useMemo(\n () =>\n new Renderer({\n components: mergedComponents,\n dompurifyConfig,\n streaming,\n }),\n [mergedComponents, dompurifyConfig, streaming],\n );\n\n const htmlString = useMemo(() => {\n if (!output) {\n return '';\n }\n\n return parser.parse(output, { injectTail: !!shouldShowTail });\n }, [output, parser, shouldShowTail]);\n\n const renderedContent = useMemo(\n () => (htmlString ? renderer.render(htmlString) : null),\n [htmlString, renderer],\n );\n\n if (!output) {\n return null;\n }\n\n return (\n <>\n
    \n {renderedContent}\n
    \n {debug ? : null}\n \n );\n});\n\nif (process.env.NODE_ENV !== 'production') {\n XMarkdown.displayName = 'XMarkdown';\n}\n\nexport default XMarkdown;\n" }, { "path": "packages/x-markdown/src/XMarkdown/interface.ts", "content": "import type { Config as DOMPurifyConfig } from 'dompurify';\nimport type { DOMNode } from 'html-react-parser';\nimport type { MarkedExtension, Tokens } from 'marked';\nimport type { CSSProperties, JSX } from 'react';\n\nexport interface AnimationConfig {\n /**\n * @description 淡入动画的持续时间（毫秒）\n * @description The duration of the fade-in animation in milliseconds\n * @default 200\n */\n fadeDuration?: number;\n /**\n * @description 动画的缓动函数\n * @description Easing function for the animation\n * @default 'ease-in-out'\n */\n easing?: string;\n}\n\nexport enum StreamCacheTokenType {\n Text = 'text',\n Link = 'link',\n Image = 'image',\n Html = 'html',\n Emphasis = 'emphasis',\n List = 'list',\n Table = 'table',\n InlineCode = 'inline-code',\n}\n\ntype Token = Tokens.Generic;\n\ninterface TailConfig {\n /**\n * @description 尾部显示的内容，默认为 `▋`\n * @description The content to display as tail, default is `▋`\n * @default '▋'\n */\n content?: string;\n /**\n * @description 自定义尾部组件，优先级高于 content\n * @description Custom tail component, takes precedence over content\n */\n component?: React.ComponentType<{ content?: string }>;\n}\n\ninterface StreamingOption {\n /**\n * @description 指示是否还有后续内容块，为 false 时刷新所有缓存并完成渲染\n * @description Indicates whether more content chunks are expected. When false, flushes all cached content and completes rendering\n * @default false\n */\n hasNextChunk?: boolean;\n /**\n * @description 为块级元素（p、li、h1、h2、h3、h4）启用文字淡入动画\n * @description Enables text fade-in animation for block elements (p, li, h1, h2, h3, h4)\n * @default false\n */\n enableAnimation?: boolean;\n /**\n * @description 文字出现动画效果的配置\n * @description Configuration for text appearance animation effects\n */\n animationConfig?: AnimationConfig;\n /**\n * @description 是否启用尾部动画；传入 `true` 使用默认 `▋`，传入对象可自定义内容\n * @description Whether to enable tail animation; pass `true` for default `▋`, or object to customize content\n * @default false\n */\n tail?: boolean | TailConfig;\n /**\n * @description 未完成的 Markdown 格式转换为自定义加载组件的映射配置，用于在流式渲染过程中为未闭合的链接和图片提供自定义loading组件\n * @description Mapping configuration to convert incomplete Markdown formats to custom loading components, used to provide custom loading components for unclosed links and images during streaming rendering\n * @default { link: 'incomplete-link', image: 'incomplete-image' }\n */\n incompleteMarkdownComponentMap?: Partial<\n Record<\n Exclude<(typeof StreamCacheTokenType)[keyof typeof StreamCacheTokenType], 'text'>,\n string\n >\n >;\n}\n\ntype StreamStatus = 'loading' | 'done';\n\ntype ComponentProps = Record> =\n React.HTMLAttributes & {\n /**\n * @description 组件对应的 DOM 节点，包含解析后的 DOM 节点信息\n * @description Component Element from html-react-parser, contains the parsed DOM node information\n */\n domNode: DOMNode;\n /**\n * @description 流式状态，`loading` 表示正在加载，`done` 表示加载完成\n * @description Streaming status, `loading` indicates streaming in progress, `done` indicates streaming complete\n */\n streamStatus: StreamStatus;\n /**\n * @description 代码块 info string（包含语言与参数，来自 marked 的 lang）\n * @description Fenced code info string (language + params, from marked lang)\n */\n lang?: string;\n /**\n * @description 是否为块级 code（仅 code 组件）\n * @description Whether it is a block code (code component only)\n */\n block?: boolean;\n } & T;\n\ninterface XMarkdownProps {\n /**\n * @description 需要渲染的 Markdown 内容\n * @description Markdown content to be rendered\n */\n content?: string;\n /**\n * @description Markdown 内容，作为 `content` 属性的别名\n * @description Markdown content, alias for `content` property\n */\n children?: string;\n /**\n * @description 用于替换 HTML 元素的自定义 React 组件映射，组件会接收 domNode、streamStatus 等属性\n * @description Custom React components to replace HTML elements, components receive domNode, streamStatus, etc.\n */\n components?: {\n [tagName: string]: React.ComponentType | keyof JSX.IntrinsicElements;\n };\n /**\n * @description 流式渲染行为的配置\n * @description Configuration for streaming rendering behavior\n */\n streaming?: StreamingOption;\n /**\n * @description Markdown 解析和扩展的 Marked.js 配置\n * @description Marked.js configuration for Markdown parsing and extensions\n */\n config?: MarkedExtension;\n /**\n * @description 根元素的额外 CSS 类名\n * @description Additional CSS class name for the root container\n */\n rootClassName?: string;\n /**\n * @description 根容器的额外 CSS 类名\n * @description Additional CSS class name for the root container\n */\n className?: string;\n /**\n * @description 段落元素的自定义 HTML 标签，防止自定义组件包含块级元素时的验证错误\n * @description Custom HTML tag for paragraph elements, prevents validation errors when custom components contain block-level elements\n * @default 'p'\n */\n paragraphTag?: keyof JSX.IntrinsicElements;\n /**\n * @description 根容器的内联样式\n * @description Inline styles for the root container\n */\n style?: CSSProperties;\n /**\n * @description 组件的 CSS 类名前缀\n * @description CSS class name prefix for the component\n */\n prefixCls?: string;\n /**\n * @description 是否为所有锚点标签添加 `target=\"_blank\"`\n * @description Whether to add `target=\"_blank\"` to all anchor tags\n * @default false\n */\n openLinksInNewTab?: boolean;\n /**\n * @description HTML 净化和 XSS 防护的 DOMPurify 配置\n * @description DOMPurify configuration for HTML sanitization and XSS protection\n */\n dompurifyConfig?: DOMPurifyConfig;\n /**\n * @description 是否保护自定义标签中的换行符\n * @description Whether to protect newlines in custom tags\n * @default false\n */\n protectCustomTagNewlines?: boolean;\n /**\n * @description 是否将 Markdown 中的原始 HTML 转义为纯文本展示（不解析为真实 HTML），避免 XSS 同时保留内容\n * @description Whether to escape raw HTML in Markdown as plain text (not parsed as real HTML), avoiding XSS while preserving content\n * @default false\n */\n escapeRawHtml?: boolean;\n /*\n * @description 是否启用调试模式，显示性能监控浮层，包含 FPS、内存占用、渲染时间等关键指标\n * @description Whether to enable debug mode, displaying performance monitoring overlay with FPS, memory usage, render time and other key metrics\n * @default false\n */\n debug?: boolean;\n}\n\nexport type {\n XMarkdownProps,\n Token,\n Tokens,\n StreamStatus,\n ComponentProps,\n StreamingOption,\n TailConfig,\n};\n" }, { "path": "packages/x-markdown/src/XMarkdown/utils/tail.ts", "content": "import type { StreamingOption } from '../interface';\n\nconst DEFAULT_TAIL_CONTENT = '▋';\n\n/**\n * Resolve tail content from streaming option\n * @param tail - boolean | { content?: string } | undefined\n * @returns string | null - tail content or null if disabled\n */\nconst resolveTailContent = (tail?: StreamingOption['tail']): string | null => {\n if (!tail) {\n return null;\n }\n\n if (typeof tail === 'boolean') {\n return DEFAULT_TAIL_CONTENT;\n }\n\n return tail.content || DEFAULT_TAIL_CONTENT;\n};\n\nexport { DEFAULT_TAIL_CONTENT, resolveTailContent };\n" }, { "path": "packages/x-markdown/src/index.ts", "content": "export { default as version } from './version';\nexport { default, default as XMarkdown } from './XMarkdown';\nexport { default as AnimationText } from './XMarkdown/AnimationText';\nexport { useStreaming } from './XMarkdown/hooks';\nexport type {\n ComponentProps,\n StreamCacheTokenType,\n StreamStatus,\n Token,\n Tokens,\n XMarkdownProps,\n} from './XMarkdown/interface.ts';\n" }, { "path": "packages/x-markdown/src/plugins/Latex/__tests__/__snapshots__/index.test.tsx.snap", "content": "// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing\n\nexports[`LaTeX Plugin should handle LaTeX with surrounding text 1`] = `\n
    \n \n

    \n This is an equation: \n \n \n \n \n \n \n \n E\n \n \n \n =\n \n \n \n \n \n \n m\n \n \n \n c\n \n \n \n \n \n \n \n \n \n 2\n \n \n \n \n \n \n \n \n \n \n \n \n \n in text\n

    \n
    \n\n`;\n\nexports[`LaTeX Plugin should handle align* syntax replacement 1`] = `\n
    \n \n

    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n x\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n =\n \n \n \n y\n \n \n \n \n y\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n =\n \n \n \n z\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

    \n
    \n\n`;\n\nexports[`LaTeX Plugin should handle complex LaTeX expressions 1`] = `\n
    \n \n

    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n i\n \n \n =\n \n \n 1\n \n \n \n \n \n \n \n \n ∑\n \n \n \n \n \n \n \n \n n\n \n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n x\n \n \n \n \n \n \n \n \n \n i\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n =\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n j\n \n \n =\n \n \n 1\n \n \n \n \n \n \n \n \n ∏\n \n \n \n \n \n \n \n \n m\n \n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n y\n \n \n \n \n \n \n \n \n \n j\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

    \n
    \n\n`;\n\nexports[`LaTeX Plugin should handle content without LaTeX 1`] = `\n
    \n \n

    \n Just plain text\n

    \n
    \n\n`;\n\nexports[`LaTeX Plugin should handle empty content 1`] = `
    `;\n\nexports[`LaTeX Plugin should handle mixed LaTeX syntaxes 1`] = `\n
    \n \n

    \n Inline: \n \n \n \n \n \n \n \n \n x\n \n \n \n \n \n \n \n \n \n 2\n \n \n \n \n \n \n \n \n \n \n \n \n \n and block: \n \n \n \n \n \n \n \n \n ∫\n \n \n \n \n \n \n \n \n \n 0\n \n \n \n \n \n \n \n 1\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n f\n \n \n (\n \n \n x\n \n \n )\n \n \n d\n \n \n x\n \n \n \n \n \n \n

    \n
    \n
    \n`;\n\nexports[`LaTeX Plugin should handle multiple LaTeX formulas 1`] = `\n
    \n \n

    \n \n \n \n \n \n \n \n a\n \n \n \n +\n \n \n \n \n \n \n b\n \n \n \n \n \n \n and \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n d\n \n \n \n \n \n \n \n \n \n \n \n c\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

    \n
    \n\n`;\n\nexports[`LaTeX Plugin should not throw error by default 1`] = `\n
    \n \n

    \n latex: \n

    \n

    \n \n \n \\\\begin{align\n \n \n

    \n
    \n\n`;\n\nexports[`LaTeX Plugin should parse consecutive block formulas with indentation (no space after $$) 1`] = `\n
    \n \n \n
  • \n \n speed\n \n \n \n \n \n \n \n \n v\n \n \n \n \n \n \n \n \n \n \n P\n \n \n ,\n \n \n ⊥\n \n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n =\n \n \n \n \n \n \n \n v\n \n \n \n \n \n \n \n \n \n 0\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n sin\n \n \n \n β\n \n \n \n \n \n \n \n \n \n \n \n \n v\n \n \n \n \n \n \n \n \n \n P\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n =\n \n \n \n \n \n \n \n v\n \n \n \n \n \n \n \n \n \n 0\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    • \n \n
    \n\n`;\n\nexports[`LaTeX Plugin should parse consecutive block formulas with indentation (space after $$) 1`] = `\n
    \n \n \n
  • \n \n speed\n \n \n \n \n \n \n \n \n v\n \n \n \n \n \n \n \n \n \n \n P\n \n \n ,\n \n \n ⊥\n \n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n =\n \n \n \n \n \n \n \n v\n \n \n \n \n \n \n \n \n \n 0\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n sin\n \n \n \n β\n \n \n \n \n \n \n \n \n \n \n \n \n v\n \n \n \n \n \n \n \n \n \n P\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n =\n \n \n \n \n \n \n \n v\n \n \n \n \n \n \n \n \n \n 0\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    • \n \n
    \n\n`;\n\nexports[`LaTeX Plugin should render block LaTeX with $$..$$ syntax 1`] = `\n
    \n \n

    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n b\n \n \n \n \n \n \n \n \n \n \n \n a\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

    \n
    \n\n`;\n\nexports[`LaTeX Plugin should render block LaTeX with \\\\[..\\\\] syntax 1`] = `\n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n b\n \n \n \n \n \n \n \n \n \n \n \n a\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n\n`;\n\nexports[`LaTeX Plugin should render inline LaTeX with $$\\\\n..\\\\n$$ syntax 1`] = `\n
    \n \n

    \n latex: \n \n \n \n \n \n \n \n f\n \n \n (\n \n \n λ\n \n \n x\n \n \n \n +\n \n \n \n \n \n \n (\n \n \n 1\n \n \n \n −\n \n \n \n \n \n \n λ\n \n \n )\n \n \n y\n \n \n )\n \n \n \n ≤\n \n \n \n \n \n \n λ\n \n \n f\n \n \n (\n \n \n x\n \n \n )\n \n \n \n +\n \n \n \n \n \n \n (\n \n \n 1\n \n \n \n −\n \n \n \n \n \n \n λ\n \n \n )\n \n \n f\n \n \n (\n \n \n y\n \n \n )\n \n \n \n \n \n \n

    \n
    \n\n`;\n\nexports[`LaTeX Plugin should render inline LaTeX with $..$ syntax 1`] = `\n
    \n \n

    \n \n \n \n \n \n \n \n E\n \n \n \n =\n \n \n \n \n \n \n m\n \n \n \n c\n \n \n \n \n \n \n \n \n \n 2\n \n \n \n \n \n \n \n \n \n \n \n \n \n

    \n
    \n\n`;\n\nexports[`LaTeX Plugin should render inline LaTeX with [\\\\n..\\\\n] syntax 1`] = `\n
    \n \n

    \n latex: \n \n \n \n \n \n \n \n \n L\n \n \n \n \n \n \n \n \n \n \n C\n \n \n L\n \n \n I\n \n \n P\n \n \n \n \n \n \n \n \n \n \n (\n \n \n θ\n \n \n )\n \n \n \n =\n \n \n \n \n \n \n \n E\n \n \n \n \n \n \n \n \n \n t\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n [\n \n \n \n min\n \n \n \n \n \n (\n \n \n \n \n r\n \n \n \n \n \n \n \n \n \n t\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n (\n \n \n θ\n \n \n )\n \n \n \n \n \n \n \n \n \n A\n \n \n \n \n \n \n ^\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n t\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n ,\n \n \n \n \n clip\n \n \n \n (\n \n \n \n r\n \n \n \n \n \n \n \n \n \n t\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n (\n \n \n θ\n \n \n )\n \n \n ,\n \n \n \n 1\n \n \n \n −\n \n \n \n ϵ\n \n \n ,\n \n \n \n 1\n \n \n \n +\n \n \n \n ϵ\n \n \n )\n \n \n \n \n \n \n \n \n \n A\n \n \n \n \n \n \n ^\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n t\n \n \n \n \n \n ​\n \n \n \n \n \n \n \n \n \n \n \n \n )\n \n \n \n \n \n ]\n \n \n \n \n \n \n \n \n end\n

    \n
    \n\n`;\n\nexports[`LaTeX Plugin should support inline block katex render: $$\\\\n..\\\\n$$ 1`] = `[Function]`;\n\nexports[`LaTeX Plugin should support inline block katex render: \\\\[\\\\n..\\\\n\\\\] 1`] = `[Function]`;\n\nexports[`LaTeX Plugin should throw error when config katexOption.throwOnError is true 1`] = `\n\"KaTeX parse error: Unexpected end of input in a macro argument, expected '}' at end of input: \\\\begin{align\nPlease report this to https://github.com/markedjs/marked.\"\n`;\n" }, { "path": "packages/x-markdown/src/plugins/Latex/__tests__/index.test.tsx", "content": "import { render } from '@testing-library/react';\nimport React from 'react';\nimport XMarkdown from '../../../XMarkdown';\n\n// Mock CSS import to avoid Jest issues\njest.mock('katex/dist/katex.min.css', () => ({}));\n\n// Import the actual plugin after mocking\nimport latexPlugin from '../index';\n\ndescribe('LaTeX Plugin', () => {\n it('should render inline LaTeX with $..$ syntax', () => {\n const { container } = render(\n {'$E=mc^2$'},\n );\n\n expect(container).toMatchSnapshot();\n });\n\n it('should render inline LaTeX with $$\\n..\\n$$ syntax', () => {\n const { container } = render(\n \n {\n 'latex: \\n$$ \\n f(\\\\lambda x + (1-\\\\lambda)y) \\\\leq \\\\lambda f(x) + (1-\\\\lambda) f(y) \\n $$ '\n }\n ,\n );\n\n expect(container).toMatchSnapshot();\n });\n\n it('should render inline LaTeX with [\\n..\\n] syntax', () => {\n const { container } = render(\n \n {\n 'latex: \\n\\\\[L^{CLIP}(\\\\theta) = \\\\mathbb{E}_t \\\\left[ \\\\min\\\\left( r_t(\\\\theta) \\\\hat{A}_t, \\\\text{clip}(r_t(\\\\theta), 1-\\\\epsilon, 1+\\\\epsilon) \\\\hat{A}_t \\\\right) \\\\right]\\\\]\\n end'\n }\n ,\n );\n\n expect(container).toMatchSnapshot();\n });\n\n it('should render block LaTeX with $$..$$ syntax', () => {\n const { container } = render(\n {'$$\\\\frac{a}{b}$$'},\n );\n\n expect(container).toMatchSnapshot();\n });\n\n it('should render block LaTeX with \\\\[..\\\\] syntax', () => {\n const { container } = render(\n {'\\\\[\\\\frac{a}{b}\\\\]'},\n );\n\n expect(container).toMatchSnapshot();\n });\n\n it('should handle LaTeX with surrounding text', () => {\n const { container } = render(\n \n {'This is an equation: $E=mc^2$ in text'}\n ,\n );\n\n expect(container).toMatchSnapshot();\n });\n\n it('should handle multiple LaTeX formulas', () => {\n const { container } = render(\n {'$a+b$ and $$\\\\frac{c}{d}$$'},\n );\n\n expect(container).toMatchSnapshot();\n });\n\n it('should handle align* syntax replacement', () => {\n const { container } = render(\n \n {'$$ \\\\begin{align*} x &= y \\\\ y &= z \\\\end{align*} $$'}\n ,\n );\n\n expect(container).toMatchSnapshot();\n });\n\n it('should handle empty content', () => {\n const { container } = render(\n {''},\n );\n\n expect(container).toMatchSnapshot();\n });\n\n it('should handle content without LaTeX', () => {\n const { container } = render(\n {'Just plain text'},\n );\n\n expect(container).toMatchSnapshot();\n });\n\n it('should handle complex LaTeX expressions', () => {\n const { container } = render(\n \n {'$\\\\sum_{i=1}^{n} x_i = \\\\prod_{j=1}^{m} y_j$'}\n ,\n );\n\n expect(container).toMatchSnapshot();\n });\n\n it('should handle mixed LaTeX syntaxes', () => {\n const { container } = render(\n \n {'Inline: $x^2$ and block: $$\\\\int_0^1 f(x)dx$$'}\n ,\n );\n\n expect(container).toMatchSnapshot();\n });\n\n it('should not throw error by default', () => {\n const { container } = render(\n \n {'latex: \\n\\n $$\\n\\\\begin{align\\n$$\\n\\n'}\n ,\n );\n\n expect(container).toMatchSnapshot();\n });\n\n it('should throw error when config katexOption.throwOnError is true', () => {\n expect(() =>\n render(\n \n {'latex: \\n\\n $$\\n\\\\begin{align\\n$$\\n\\n'}\n ,\n ),\n ).toThrowErrorMatchingSnapshot();\n });\n\n it('should support inline block katex render: $$\\n..\\n$$', () => {\n expect(() =>\n render(\n \n {\n 'latex: \\n\\\\[\\n\\\\begin{align*}\\n\\\\text{minimize} \\\\quad & f_0(x) \\\\\\\\n\\\\text{subject to} \\\\quad & f_i(x) \\\\leq 0, \\\\quad i = 1, \\\\dots, m \\\\ \\n& a_j^T x = b_j, \\\\quad j = 1, \\\\dots, p\\n\\\\end{align*}\\n\\\\]'\n }\n ,\n ),\n ).toMatchSnapshot();\n });\n\n it('should support inline block katex render: \\\\[\\n..\\n\\\\]', () => {\n expect(() =>\n render(\n \n {\n 'latex: \\n\\\\[\\n\\\\begin{align*}\\n\\\\text{minimize} \\\\quad & f_0(x) \\\\\\\\n\\\\text{subject to} \\\\quad & f_i(x) \\\\leq 0, \\\\quad i = 1, \\\\dots, m \\\\ \\n& a_j^T x = b_j, \\\\quad j = 1, \\\\dots, p\\n\\\\end{align*}\\n\\\\]'\n }\n ,\n ),\n ).toMatchSnapshot();\n });\n\n it.each([\n {\n caseName: 'space after $$',\n content:\n '4. **speed** \\n $$\\n v_{P,\\\\perp} = v_0 \\\\sin\\\\beta\\n $$ \\n $$\\n v_P = v_0\\n $$',\n },\n {\n caseName: 'no space after $$',\n content:\n '4. **speed** \\n $$\\n v_{P,\\\\perp} = v_0 \\\\sin\\\\beta\\n $$\\n $$\\n v_P = v_0\\n $$',\n },\n ])('should parse consecutive block formulas with indentation ($caseName)', ({ content }) => {\n const { container } = render(\n {content},\n );\n const katexElements = container.querySelectorAll('.katex-display');\n expect(katexElements).toHaveLength(2);\n expect(container).toMatchSnapshot();\n });\n});\n" }, { "path": "packages/x-markdown/src/plugins/Latex/index.ts", "content": "import katex, { type KatexOptions } from 'katex';\nimport type { TokenizerAndRendererExtension } from 'marked';\n\nimport 'katex/dist/katex.min.css';\n\nconst inlineRuleNonStandard =\n /^(?:\\${1,2}([^$]{1,10000}?)\\${1,2}|\\\\\\(([\\s\\S]{1,10000}?)\\\\\\)|\\\\\\[((?:\\\\.|[^\\\\]){1,10000}?)\\\\\\])/;\nconst blockRule =\n /^(\\${1,2})\\n([\\s\\S]{1,10000}?)\\n\\1(?:\\s*(?:\\n|$))|^\\\\\\[((?:\\\\.|[^\\\\]){1,10000}?)\\\\\\]/;\n\ntype LatexOption = {\n katexOptions?: KatexOptions;\n replaceAlignStart?: boolean;\n};\n\ntype Token = {\n text: string;\n displayMode: boolean;\n};\n\ntype Render = (token: Token) => string;\n\ntype ILevel = 'inline' | 'block';\n\n// fix katex not support align*: https://github.com/KaTeX/KaTeX/issues/1007\nfunction replaceAlign(text: string) {\n return text ? text.replace(/\\{align\\*\\}/g, '{aligned}') : text;\n}\n\nfunction createRenderer(options: KatexOptions, newlineAfter: boolean) {\n return (token: Token) =>\n katex.renderToString(token.text, {\n ...options,\n displayMode: token.displayMode,\n }) + (newlineAfter ? '\\n' : '');\n}\n\nfunction inlineKatex(renderer: Render, replaceAlignStart: boolean) {\n return {\n name: 'inlineKatex',\n level: 'inline' as ILevel,\n start(src: string) {\n const dollarIndex = src.indexOf('$');\n const parenIndex = src.indexOf('\\\\(');\n const bracketIndex = src.indexOf('\\\\[');\n\n const indices = [dollarIndex, parenIndex, bracketIndex].filter((idx) => idx !== -1);\n return indices.length > 0 ? Math.min(...indices) : undefined;\n },\n tokenizer(src: string) {\n const match = src.match(inlineRuleNonStandard);\n if (!match) return;\n\n const rawText = (match[1] || match[2] || match[3] || '').trim();\n const text = replaceAlignStart ? replaceAlign(rawText) : rawText;\n\n return {\n type: 'inlineKatex',\n raw: match[0],\n text,\n displayMode: true,\n };\n },\n renderer: (token: Token) => `${renderer(token)}`,\n };\n}\n\nfunction blockKatex(renderer: Render, replaceAlignStart: boolean) {\n return {\n name: 'blockKatex',\n level: 'block' as ILevel,\n tokenizer(src: string) {\n const match = src.match(blockRule);\n if (match) {\n let text = replaceAlign(match[2] || match[3].trim());\n if (replaceAlignStart) {\n text = replaceAlign(text);\n }\n return {\n type: 'blockKatex',\n raw: match[0],\n text,\n displayMode: true,\n };\n }\n },\n renderer,\n };\n}\n\nconst Latex = (options?: LatexOption): TokenizerAndRendererExtension[] => {\n const { replaceAlignStart = true, katexOptions: customKatexOptions } = options || {};\n\n const katexOptions = {\n output: 'html' as const,\n throwOnError: false,\n ...(customKatexOptions || {}),\n };\n\n const inlineRenderer = createRenderer(katexOptions, true);\n const blockRenderer = createRenderer(katexOptions, true);\n return [\n inlineKatex(inlineRenderer, replaceAlignStart),\n blockKatex(blockRenderer, replaceAlignStart),\n ];\n};\n\nexport default Latex;\n" }, { "path": "packages/x-markdown/src/plugins/type.ts", "content": "import type { KatexOptions } from 'katex';\nimport type { TokenizerAndRendererExtension } from 'marked';\n\nexport type LatexOption = {\n katexOptions?: KatexOptions;\n replaceAlignStart?: boolean;\n};\n\nexport type PluginsType = {\n /**\n * @desc 渲染数学公式Latex语法。\n * @descEN Rendering mathematical formulas using Latex syntax.\n */\n Latex: (options?: LatexOption) => TokenizerAndRendererExtension[];\n};\n" }, { "path": "packages/x-markdown/src/plugins/version/index.ts", "content": "// @ts-ignore\nimport version from './version';\n\nexport default version;\n" }, { "path": "packages/x-markdown/src/themes/dark.css", "content": ".x-markdown-dark {\n --font-size: 14px;\n --primary-color: #1677ff;\n --primary-color-hover: #4096ff;\n --heading-color: #ffffff;\n --text-color: rgba(255, 255, 255, 0.85);\n --border-color: rgba(48, 48, 48, 1);\n --line-color: rgba(253, 253, 253, 0.12);\n --dark-bg: rgba(255, 255, 255, 0.1);\n --table-head-bg: rgba(29, 29, 29, 1);\n --table-body-bg: rgba(20, 20, 20, 1);\n --cite-bg: rgba(255, 255, 255, 0.1);\n --cite-hover-bg: rgba(255, 255, 255, 0.2);\n --border-radius-middle: 6px;\n --border-radius-small: 4px;\n --td-th-padding: 10px 12px;\n --border-font-weight: 600;\n --margin-block: 0 0 16px 0;\n --padding-ul-ol: 0 0 0 16px;\n --margin-ul-ol: 0 0 16px 28px;\n --margin-li: 0 0 14px 0;\n --hr-margin: 24px 0;\n --table-margin: 0 0 24px 0;\n --padding-code: 16px;\n --xmd-tail-color: var(--text-color);\n}\n\n.x-markdown-dark h1,\n.x-markdown-dark h2,\n.x-markdown-dark h3,\n.x-markdown-dark h4 {\n color: var(--heading-color);\n font-weight: var(--border-font-weight);\n margin: var(--margin-block);\n}\n\n.x-markdown-dark h1 {\n font-size: 24px;\n line-height: 36px;\n}\n\n.x-markdown-dark h2 {\n font-size: 20px;\n line-height: 32px;\n}\n\n.x-markdown-dark h3 {\n font-size: 18px;\n /* 18px */\n line-height: 30px;\n}\n\n.x-markdown-dark h4 {\n font-size: 16px;\n}\n\n.x-markdown-dark p,\n.x-markdown-dark li {\n color: var(--text-color);\n margin: var(--margin-block);\n}\n\n/* 列表项通用样式 */\n.x-markdown-dark li {\n position: relative;\n}\n\n.x-markdown-dark li::marker {\n font-size: 16px;\n font-weight: 400;\n line-height: 28px;\n color: var(--heading-color);\n}\n\n.x-markdown-dark ul > li ul > li,\n.x-markdown-dark ul > li ol > li {\n list-style: circle;\n}\n\n.x-markdown-dark ul > li ul > li ul > li,\n.x-markdown-dark ul > li ul > li ol > li,\n.x-markdown-dark ul > li ol > li ul > li,\n.x-markdown-dark ul > li ol > li ol > li {\n list-style: square;\n}\n\n.x-markdown-dark ol > li ol > li,\n.x-markdown-dark ol > li ul > li {\n list-style: lower-alpha;\n}\n\n.x-markdown-dark ol > li ol > li ol > li,\n.x-markdown-dark ol > li ol > li ul > li,\n.x-markdown-dark ol > li ul > li ol > li,\n.x-markdown-dark ol > li ul > li ul > li {\n list-style: lower-roman;\n}\n\n.x-markdown-dark hr {\n border: 0;\n border-top: 1px solid var(--line-color);\n}\n\n.x-markdown-dark table {\n border-collapse: collapse;\n overflow: hidden;\n box-shadow: 0 1px 3px rgba(255, 255, 255, 0.05);\n}\n\n.x-markdown-dark thead {\n background-color: var(--table-head-bg);\n}\n\n.x-markdown-dark tbody {\n background-color: var(--table-body-bg);\n}\n\n.x-markdown-dark tbody tr {\n background-color: var(--table-body-bg);\n transition: background-color 200ms linear;\n\n &:hover {\n background-color: var(--table-head-bg);\n }\n}\n\n.x-markdown-dark th,\n.x-markdown-dark td {\n padding: var(--td-th-padding);\n border: 1px solid var(--border-color);\n}\n\n.x-markdown-dark th {\n color: var(--heading-color);\n}\n\n.x-markdown-dark td {\n color: var(--text-color);\n}\n\n.x-markdown-dark blockquote {\n border-left: 4px solid var(--border-color);\n padding: 4px 12px;\n margin: 16px 0;\n background-color: var(--cite-bg);\n border-radius: 0 var(--border-radius-middle) var(--border-radius-middle) 0;\n transition: background-color 0.2s ease;\n}\n\n.x-markdown-dark blockquote:hover {\n background-color: var(--cite-hover-bg);\n}\n\n.x-markdown-dark pre code:not([class$=\"-codeHighlighter-code\"] pre code) {\n display: block;\n background: var(--dark-bg) !important;\n padding: var(--padding-code);\n color: var(--text-color) !important;\n line-height: 1.3;\n font-size: var(--font-size);\n border-radius: var(--border-radius-middle);\n margin: var(--margin-pre);\n}\n\n.x-markdown-dark code:not([class$=\"-codeHighlighter-code\"] code):not(pre code) {\n background-color: var(--dark-bg) !important;\n color: var(--text-color) !important;\n border-radius: var(--border-radius-small);\n padding: 2px 6px;\n margin-inline: 3px;\n font-size: var(--font-size);\n border: 1px solid var(--border-color);\n}\n\n.x-markdown-dark img {\n max-width: 100%;\n}\n\n.x-markdown-dark a {\n color: var(--primary-color);\n text-decoration: none;\n transition: color 0.2s ease;\n position: relative;\n}\n\n.x-markdown-dark a:hover {\n color: var(--primary-color-hover);\n text-decoration: underline;\n}\n\n.x-markdown-dark a::after {\n content: \"↗\";\n margin-left: 4px;\n vertical-align: super;\n opacity: 0.7;\n}\n" }, { "path": "packages/x-markdown/src/themes/light.css", "content": ".x-markdown-light {\n --font-size: 14px;\n --primary-color: #1677ff;\n --primary-color-hover: #4096ff;\n --heading-color: #000000;\n --text-color: rgba(0, 0, 0, 0.85);\n --border-color: rgba(240, 240, 240, 1);\n --line-color: rgba(5, 5, 5, 0.06);\n --light-bg: rgba(0, 0, 0, 0.04);\n --table-head-bg: rgba(250, 250, 250, 1);\n --table-body-bg: rgba(255, 255, 255, 1);\n --cite-bg: rgba(0, 0, 0, 0.1);\n --cite-hover-bg: rgba(0, 0, 0, 0.2);\n --border-radius-middle: 6px;\n --border-radius-small: 4px;\n --td-th-padding: 10px 12px;\n --border-font-weight: 600;\n --margin-block: 0 0 16px 0;\n --padding-ul-ol: 0 0 0 16px;\n --margin-ul-ol: 0 0 16px 28px;\n --margin-li: 0 0 14px 0;\n --hr-margin: 24px 0;\n --table-margin: 0 0 24px 0;\n --margin-pre: 0 0 16px 0;\n --padding-code: 16px;\n --xmd-tail-color: var(--text-color);\n}\n\n.x-markdown-light h1,\n.x-markdown-light h2,\n.x-markdown-light h3,\n.x-markdown-light h4 {\n color: var(--heading-color);\n font-weight: var(--border-font-weight);\n margin: var(--margin-block);\n}\n\n.x-markdown-light h1 {\n font-size: 24px;\n line-height: 36px;\n}\n\n.x-markdown-light h2 {\n font-size: 20px;\n line-height: 32px;\n}\n\n.x-markdown-light h3 {\n font-size: 18px;\n /* 18px */\n line-height: 30px;\n}\n\n.x-markdown-light h4 {\n font-size: 16px;\n}\n\n.x-markdown-light p,\n.x-markdown-light li {\n color: var(--text-color);\n margin: var(--margin-block);\n}\n\n/* 列表项通用样式 */\n.x-markdown-light li {\n position: relative;\n}\n\n.x-markdown-light li::marker {\n font-size: 16px;\n font-weight: 400;\n line-height: 28px;\n color: var(--heading-color);\n}\n\n.x-markdown-light ul > li ul > li,\n.x-markdown-light ul > li ol > li {\n list-style: circle;\n}\n\n.x-markdown-light ul > li ul > li ul > li,\n.x-markdown-light ul > li ul > li ol > li,\n.x-markdown-light ul > li ol > li ul > li,\n.x-markdown-light ul > li ol > li ol > li {\n list-style: square;\n}\n\n.x-markdown-light ol > li ol > li,\n.x-markdown-light ol > li ul > li {\n list-style: lower-alpha;\n}\n\n.x-markdown-light ol > li ol > li ol > li,\n.x-markdown-light ol > li ol > li ul > li,\n.x-markdown-light ol > li ul > li ol > li,\n.x-markdown-light ol > li ul > li ul > li {\n list-style: lower-roman;\n}\n\n.x-markdown-light hr {\n border: 0;\n border-top: 1px solid var(--line-color);\n margin: var(--hr-margin);\n}\n\n.x-markdown-light table {\n border-collapse: collapse;\n overflow: hidden;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n margin: var(--table-margin);\n}\n\n.x-markdown-light thead {\n background-color: var(--table-head-bg);\n}\n\n.x-markdown-light tbody {\n background-color: var(--table-body-bg);\n}\n\n.x-markdown-light tbody tr {\n background-color: var(--table-body-bg);\n transition: background-color 200ms linear;\n\n &:hover {\n background-color: var(--table-head-bg);\n }\n}\n\n.x-markdown-light th,\n.x-markdown-light td {\n padding: var(--td-th-padding);\n border: 1px solid var(--border-color);\n}\n\n.x-markdown-light th {\n color: var(--heading-color);\n}\n\n.x-markdown-light td {\n color: var(--text-color);\n}\n\n.x-markdown-light blockquote {\n border-left: 4px solid var(--border-color);\n padding: 4px 12px;\n margin: 16px 0;\n background-color: var(--cite-bg);\n border-radius: 0 var(--border-radius-middle) var(--border-radius-middle) 0;\n transition: background-color 0.2s ease;\n}\n\n.x-markdown-light blockquote:hover {\n background-color: var(--cite-hover-bg);\n}\n\n.x-markdown-light pre code:not([class$=\"-highlightCode-code\"] pre code) {\n display: block;\n background: var(--light-bg) !important;\n padding: var(--padding-code);\n color: var(--text-color) !important;\n line-height: 1.3;\n font-size: var(--font-size);\n border-radius: var(--border-radius-middle);\n margin: var(--margin-pre);\n}\n\n.x-markdown-light code:not([class$=\"-highlightCode-code\"] code):not(pre code) {\n background-color: var(--light-bg) !important;\n color: var(--text-color) !important;\n border-radius: var(--border-radius-small);\n padding: 2px 6px;\n margin-inline: 3px;\n font-size: var(--font-size);\n border: 1px solid var(--border-color);\n}\n\n.x-markdown-light img {\n max-width: 100%;\n}\n\n.x-markdown-light a {\n color: var(--primary-color);\n text-decoration: none;\n transition: color 0.2s ease;\n position: relative;\n}\n\n.x-markdown-light a:hover {\n color: var(--primary-color-hover);\n text-decoration: underline;\n}\n\n.x-markdown-light a::after {\n content: \"↗\";\n margin-left: 4px;\n vertical-align: super;\n opacity: 0.7;\n}\n" }, { "path": "packages/x-markdown/src/version/index.ts", "content": "// @ts-ignore\nimport version from './version';\n\nexport default version;\n" }, { "path": "packages/x-markdown/tests/dekko/dist.test.ts", "content": "import chalk from 'chalk';\nimport $ from 'dekko';\n\n$('dist')\n .isDirectory()\n .hasFile('x-markdown.js')\n .hasFile('x-markdown.min.js')\n .hasFile('x-markdown.min.js.map');\n\nconsole.log(chalk.green('✨ `dist` directory is valid.'));\n// plugins\n$('dist/plugins')\n .isDirectory()\n .hasFile('latex.js')\n .hasFile('latex.min.js')\n .hasFile('latex.min.js.map');\n\n// eslint-disable-next-line no-console\nconsole.log(chalk.green('✨ `dist/plugins` directory is valid.'));\n" }, { "path": "packages/x-markdown/tests/dekko/index.test.ts", "content": "import './dist.test';\nimport './lib.test';\n" }, { "path": "packages/x-markdown/tests/dekko/lib.test.ts", "content": "import chalk from 'chalk';\nimport $ from 'dekko';\n\n$('lib').isDirectory().hasFile('index.js').hasFile('index.d.ts');\n\n// without plugins\n$('lib/*')\n .filter(\n (filename: string) =>\n !filename.endsWith('hooks') &&\n !filename.endsWith('index.js') &&\n !filename.endsWith('index.d.ts') &&\n !filename.endsWith('.map'),\n )\n .isDirectory()\n .filter(\n (filename: string) =>\n !filename.endsWith('plugins') &&\n !filename.endsWith('hooks') &&\n !filename.endsWith('style') &&\n !filename.endsWith('_util') &&\n !filename.endsWith('locale') &&\n !filename.endsWith('themes') &&\n !filename.endsWith('theme'),\n )\n .hasFile('index.js')\n .hasFile('index.d.ts');\n\n// plugins\n\n$('lib/plugins').isDirectory().hasFile('type.js').hasFile('type.d.ts');\n\n$('lib/plugins/*')\n .filter(\n (filename: string) =>\n !filename.endsWith('type.js') &&\n !filename.endsWith('type.d.ts') &&\n !filename.endsWith('hooks'),\n )\n .isDirectory()\n .hasFile('index.js')\n .hasFile('index.d.ts');\n\n// eslint-disable-next-line no-console\nconsole.log(chalk.green('✨ `lib/plugins` directory is valid.'));\n\n// themes\n$('lib/themes').isDirectory().hasFile('light.css');\n\n// eslint-disable-next-line no-console\nconsole.log(chalk.green('✨ `lib/themes` directory is valid.'));\n" }, { "path": "packages/x-markdown/tests/setup.ts", "content": "/* eslint-disable no-console */\n\nimport type { DOMWindow } from 'jsdom';\nimport util from 'util';\n\nconst originConsoleErr = console.error;\n\nconst ignoreWarns = ['validateDOMNesting', 'on an unmounted component', 'not wrapped in act'];\n\n// Hack off React warning to avoid too large log in CI.\nconsole.error = (...args) => {\n const str = args.join('').replace(/\\n/g, '');\n if (ignoreWarns.every((warn) => !str.includes(warn))) {\n originConsoleErr(...args);\n }\n};\n\ntype Writeable = { -readonly [P in keyof T]: T[P] };\n\n// This function can not move to external file since jest setup not support\nexport function fillWindowEnv(window: Window | DOMWindow) {\n const win = window as Writeable & typeof globalThis;\n\n win.resizeTo = (width, height) => {\n win.innerWidth = width || win.innerWidth;\n win.innerHeight = height || win.innerHeight;\n win.dispatchEvent(new Event('resize'));\n };\n win.scrollTo = () => {};\n // ref: https://github.com/ant-design/ant-design/issues/18774\n if (!win.matchMedia) {\n Object.defineProperty(win, 'matchMedia', {\n writable: true,\n configurable: true,\n value: jest.fn((query) => ({\n matches: query.includes('max-width'),\n addListener: jest.fn(),\n removeListener: jest.fn(),\n })),\n });\n }\n\n // Fix css-animation or @rc-component/motion deps on these\n // https://github.com/react-component/motion/blob/9c04ef1a210a4f3246c9becba6e33ea945e00669/src/util/motion.ts#L27-L35\n // https://github.com/yiminghe/css-animation/blob/a5986d73fd7dfce75665337f39b91483d63a4c8c/src/Event.js#L44\n win.AnimationEvent = win.AnimationEvent || win.Event;\n win.TransitionEvent = win.TransitionEvent || win.Event;\n\n // ref: https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom\n // ref: https://github.com/jsdom/jsdom/issues/2524\n Object.defineProperty(win, 'TextEncoder', {\n writable: true,\n value: util.TextEncoder,\n });\n Object.defineProperty(win, 'TextDecoder', {\n writable: true,\n value: util.TextDecoder,\n });\n}\n\n/* eslint-disable global-require */\nif (typeof window !== 'undefined') {\n fillWindowEnv(window);\n}\n\nglobal.requestAnimationFrame = global.requestAnimationFrame || global.setTimeout;\nglobal.cancelAnimationFrame = global.cancelAnimationFrame || global.clearTimeout;\n" }, { "path": "packages/x-markdown/tests/setupAfterEnv.ts", "content": "import '@testing-library/jest-dom';\n\nimport { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';\nimport { toHaveNoViolations } from 'jest-axe';\nimport jsdom from 'jsdom';\nimport format, { plugins } from 'pretty-format';\n\n// Mock `scrollTo` since jsdom do not support it\nspyElementPrototypes(HTMLElement, {\n scrollTo: jest.fn(),\n});\n\nfunction cleanup(node: HTMLElement) {\n const childList = Array.from(node.childNodes);\n node.innerHTML = '';\n childList.forEach((child) => {\n if (!(child instanceof Text)) {\n node.appendChild(cleanup(child as any));\n } else if (child.textContent) {\n node.appendChild(child);\n }\n });\n return node;\n}\n\nfunction formatHTML(nodes: any) {\n let cloneNodes: any;\n if (Array.isArray(nodes) || nodes instanceof HTMLCollection || nodes instanceof NodeList) {\n cloneNodes = Array.from(nodes).map((node) => cleanup(node.cloneNode(true) as any));\n } else {\n cloneNodes = cleanup(nodes.cloneNode(true));\n }\n\n const htmlContent = format(cloneNodes, {\n plugins: [plugins.DOMCollection, plugins.DOMElement],\n });\n\n const filtered = htmlContent\n .split('\\n')\n .filter((line) => line.trim())\n .join('\\n');\n\n return filtered;\n}\n\n/**\n * React 17 & 18 will have different behavior in some special cases:\n *\n * React 17:\n *\n * ```html\n * Hello World \n * ```\n *\n * React 18:\n *\n * ```html\n * Hello World \n * ```\n *\n * These diff is nothing important in front end but will break in snapshot diff.\n */\nexpect.addSnapshotSerializer({\n test: (element) =>\n typeof HTMLElement !== 'undefined' &&\n (element instanceof HTMLElement ||\n element instanceof DocumentFragment ||\n element instanceof HTMLCollection ||\n (Array.isArray(element) && element[0] instanceof HTMLElement)),\n print: (element) => formatHTML(element),\n});\n\n/** Demo Test only accept render as SSR to make sure align with both `server` & `client` side */\nexpect.addSnapshotSerializer({\n test: (node) => node && typeof node === 'object' && node.type === 'demo' && node.html,\n // @ts-ignore\n print: ({ html }) => {\n const { JSDOM } = jsdom;\n const { document } = new JSDOM().window;\n document.body.innerHTML = html;\n\n const children = Array.from(document.body.childNodes);\n\n // Clean up `data-reactroot` since React 18 do not have this\n // @ts-ignore\n children.forEach((ele: HTMLElement) => {\n if (typeof ele.removeAttribute === 'function') {\n ele.removeAttribute('data-reactroot');\n }\n });\n\n return formatHTML(children.length > 1 ? children : children[0]);\n },\n});\n\nexpect.extend(toHaveNoViolations);\n" }, { "path": "packages/x-markdown/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.base.json\",\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"paths\": {\n \"@ant-design/x-markdown\": [\"index.ts\"],\n \"@ant-design/x-markdown/es/*\": [\"src/*\"],\n \"@ant-design/x-markdown/lib/*\": [\"src/*\"],\n \"@ant-design/x/locale/en_US\": [\"../x/components/locale/en_US\"],\n \"@ant-design/x/es/*\": [\"../x/components/*\"],\n \"@ant-design/x/es/locale/useLocale\": [\"../x/components/locale/useLocale\"]\n }\n },\n \"include\": [\"**/*\"]\n}\n" }, { "path": "packages/x-markdown/typings/custom-typings.d.ts", "content": "// https://github.com/facebook/create-react-app/blob/f09d3d3a52c1b938cecc977c2bbc0942ea0a7e70/packages/react-scripts/lib/react-app.d.ts#L42-L49\n\ndeclare module 'dekko';\n" }, { "path": "packages/x-markdown/typings/index.d.ts", "content": "/// \n" }, { "path": "packages/x-markdown/typings/jest.d.ts", "content": "declare namespace jest {\n interface Matchers {\n toHaveNoViolations(): R;\n }\n}\n" }, { "path": "packages/x-sdk/.fatherrc.ts", "content": "import { codecovWebpackPlugin } from '@codecov/webpack-plugin';\nimport DuplicatePackageCheckerPlugin from '@madccc/duplicate-package-checker-webpack-plugin';\nimport CircularDependencyPlugin from 'circular-dependency-plugin';\nimport { defineConfig } from 'father';\nimport path from 'path';\n\nclass CodecovWebpackPlugin {\n private options;\n constructor(options = {}) {\n this.options = options;\n }\n apply(compiler: any) {\n return codecovWebpackPlugin(this.options).apply(compiler);\n }\n}\n\nexport default defineConfig({\n plugins: ['@rc-component/father-plugin'],\n targets: {\n chrome: 80,\n },\n esm: {\n input: 'src',\n },\n cjs: {\n input: 'src',\n },\n umd: {\n entry: 'src/index.ts',\n name: 'XSDK',\n bundler: 'utoopack',\n rootPath: path.resolve(__dirname, '../../'),\n output: {\n path: 'dist/',\n filename: 'x-sdk',\n },\n sourcemap: true,\n generateUnminified: true,\n concatenateModules: true,\n externals: {\n react: {\n root: 'React',\n commonjs: 'react',\n },\n 'react-dom': {\n root: 'ReactDOM',\n commonjs: 'react-dom',\n },\n '@ant-design/cssinjs': {\n root: 'antdCssinjs',\n commonjs: 'antdCssinjs',\n },\n '@ant-design/icons': {\n root: 'icons',\n commonjs: 'icons',\n },\n dayjs: {\n root: 'dayjs',\n commonjs: 'dayjs',\n },\n antd: {\n root: 'antd',\n commonjs: 'antd',\n },\n },\n transformRuntime: {\n absoluteRuntime: process.cwd(),\n },\n chainWebpack: (memo, { env }) => {\n if (env === 'production') {\n memo.plugin('codecov').use(CodecovWebpackPlugin, [\n {\n enableBundleAnalysis: true,\n bundleName: 'antdxsdk',\n uploadToken: process.env.CODECOV_TOKEN,\n gitService: 'github',\n },\n ]);\n memo.plugin('circular-dependency-checker').use(CircularDependencyPlugin, [\n {\n failOnError: true,\n },\n ]);\n memo.plugin('duplicate-package-checker').use(DuplicatePackageCheckerPlugin, [\n {\n verbose: true,\n emitError: true,\n },\n ]);\n }\n return memo;\n },\n },\n});\n" }, { "path": "packages/x-sdk/.jest.js", "content": "const compileModules = [\n '@rc-component',\n 'react-sticky-box',\n 'rc-tween-one',\n '@babel',\n '@ant-design',\n 'countup.js',\n '.pnpm',\n];\n\nconst resolve = (p) => require.resolve(`@ant-design/tools/lib/jest/${p}`);\n\nconst ignoreList = [];\n\n// cnpm use `_` as prefix\n['', '_'].forEach((prefix) => {\n compileModules.forEach((module) => {\n ignoreList.push(`${prefix}${module}`);\n });\n});\n\nconst transformIgnorePatterns = [\n // Ignore modules without es dir.\n // Update: @babel/runtime should also be transformed\n `[/\\\\\\\\]node_modules[/\\\\\\\\](?!${ignoreList.join('|')})[^/\\\\\\\\]+?[/\\\\\\\\](?!(es)[/\\\\\\\\])`,\n];\n\nfunction getTestRegex(libDir) {\n if (['dist', 'lib', 'es', 'dist-min'].includes(libDir)) {\n return 'demo\\\\.test\\\\.(j|t)sx?$';\n }\n return '.*\\\\.test\\\\.(j|t)sx?$';\n}\n\nmodule.exports = {\n verbose: true,\n testEnvironment: '@happy-dom/jest-environment',\n setupFiles: ['./tests/setup.ts'],\n setupFilesAfterEnv: [],\n moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],\n modulePathIgnorePatterns: [],\n moduleNameMapper: {\n '/\\\\.(css|less)$/': 'identity-obj-proxy',\n '^@ant-design/x-sdk$': '/components/index',\n '^@ant-design/x-sdk/es/(.*)$': '/components/$1',\n '^@ant-design/x-sdk/lib/(.*)$': '/components/$1',\n },\n testPathIgnorePatterns: [\n '/node_modules/',\n 'dekko',\n 'node',\n '/src/_util',\n 'image.test.js',\n 'image.test.ts',\n ],\n transform: {\n '\\\\.tsx?$': resolve('codePreprocessor'),\n '\\\\.(m?)js$': resolve('codePreprocessor'),\n '\\\\.md$': resolve('demoPreprocessor'),\n '\\\\.(jpg|png|gif|svg)$': resolve('imagePreprocessor'),\n },\n testRegex: getTestRegex(process.env.LIB_DIR),\n collectCoverageFrom: [\n 'src/**/*.{ts,tsx}',\n '!src/*/style/index.tsx',\n '!src/style/index.tsx',\n '!src/*/locale/index.tsx',\n '!src/*/__tests__/type.test.tsx',\n '!src/**/*/interface.{ts,tsx}',\n '!src/*/__tests__/image.test.{ts,tsx}',\n '!src/__tests__/node.test.tsx',\n '!src/*/demo/*.tsx',\n ],\n transformIgnorePatterns,\n globals: {\n 'ts-jest': {\n tsConfig: './tsconfig.test.json',\n },\n },\n testEnvironmentOptions: {\n url: 'http://localhost/x-sdk',\n },\n bail: true,\n maxWorkers: '50%',\n};\n" }, { "path": "packages/x-sdk/BUG_VERSIONS.json", "content": "{}\n" }, { "path": "packages/x-sdk/LICENSE", "content": "MIT LICENSE\n\nCopyright (c) 2015-present Ant UED, https://xtech.antfin.com/\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n" }, { "path": "packages/x-sdk/README-zh_CN.md", "content": "
    \n\n\n\n

    Ant Design X SDK

    \n\n高效管理大模型数据流\n\n[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url]\n\n[![NPM downloads][download-image]][download-url] [![][bundlephobia-image]][bundlephobia-url] [![antd][antd-image]][antd-url] [![Follow zhihu][zhihu-image]][zhihu-url]\n\n[更新日志](../../CHANGELOG.zh-CN.md) · [报告一个 Bug][github-issues-bug-report] · [想新增特性？][github-issues-feature-request] · [English](./README.md) · 中文\n\n[npm-image]: https://img.shields.io/npm/v/@ant-design/x-sdk.svg?style=flat-square\n[npm-url]: https://www.npmjs.com/package/@ant-design/x-sdk\n[github-action-image]: https://github.com/ant-design/x/actions/workflows/main.yml/badge.svg\n[github-action-url]: https://github.com/ant-design/x/actions/workflows/main.yml\n[codecov-image]: https://codecov.io/gh/ant-design/x/graph/badge.svg?token=wrCCsyTmdi\n[codecov-url]: https://codecov.io/gh/ant-design/x\n[download-image]: https://img.shields.io/npm/dm/@ant-design/x-sdk.svg?style=flat-square\n[download-url]: https://npmjs.org/package/@ant-design/x-sdk\n[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@ant-design/x-sdk?style=flat-square\n[bundlephobia-url]: https://bundlephobia.com/package/@ant-design/x-sdk\n[github-issues-bug-report]: https://github.com/ant-design/x/issues/new?template=bug-report.yml\n[github-issues-feature-request]: https://github.com/ant-design/x/issues/new?template=bug-feature-request.yml\n[antd-image]: https://img.shields.io/badge/-Ant%20Design-blue?labelColor=black&logo=antdesign&style=flat-square\n[antd-url]: https://ant.design\n[zhihu-image]: https://img.shields.io/badge/-Ant%20Design-white?logo=zhihu\n[zhihu-url]: https://www.zhihu.com/column/c_1564262000561106944\n\n
    \n\n## 介绍\n\n`@ant-design/x-sdk` 提供了一系列的工具API，旨在帮助开发人员开箱即用的管理AI对话应用数据流\n\n## 安装\n\n### 使用 npm 或 yarn 或 pnpm 或 bun 安装 或 utoo 安装\n\n**我们推荐使用 [npm](https://www.npmjs.com/) 或 [yarn](https://github.com/yarnpkg/yarn/) 或 [pnpm](https://pnpm.io/zh/) 或 [bun](https://bun.sh/) 或 [utoo](https://github.com/umijs/mako/tree/next) 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。\n\n## 📦 安装\n\n```bash\nnpm install @ant-design/x-sdk\n```\n\n```bash\nyarn add @ant-design/x-sdk\n```\n\n```bash\npnpm add @ant-design/x-sdk\n```\n\n```bash\nut install @ant-design/x-sdk\n```\n\n### 浏览器引入\n\n在浏览器中使用 `script` 和 `link` 标签直接引入文件，并使用全局变量 `XSDK`。\n\n我们在 npm 发布包内的 dist 目录下提供了 `x-sdk.js`、`x-sdk.min.js` 和 `x-sdk.min.js.map`。\n\n> **强烈不推荐使用已构建文件**，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。\n\n> 注意：`x-sdk.js` 和 `x-sdk.min.js` 和 `x-sdk.min.js.map`。依赖 `react`、`react-dom`请确保提前引入这些文件。\n\n## 示例\n\n```tsx\nimport React from 'react';\nimport { XRequest } from '@ant-design/x-sdk';\n\nexport default () => {\n const [status, setStatus] = React.useState<'string'>('');\n const [lines, setLines] = React.useState[]>([]);\n\n useEffect(() => {\n setStatus('pending');\n\n XRequest('https://api.example.com/chat', {\n params: {\n model: 'gpt-3.5-turbo',\n messages: [{ role: 'user', content: 'hello, who are u?' }],\n stream: true,\n },\n callbacks: {\n onSuccess: (messages) => {\n setStatus('success');\n console.log('onSuccess', messages);\n },\n onError: (error) => {\n setStatus('error');\n console.error('onError', error);\n },\n onUpdate: (msg) => {\n setLines((pre) => [...pre, msg]);\n console.log('onUpdate', msg);\n },\n },\n });\n }, []);\n\n return (\n
    \n
    Status: {status}
    \n
    Lines: {lines.length}
    \n
    \n );\n};\n```\n\n## 🌈 开箱即用的大模型企业级组件\n\n`@ant-design/x` 基于 RICH 交互范式，在不同的交互阶段提供了大量的原子组件，帮助你灵活搭建你的 AI 应用，详情点击[这里](packages/x/README-zh_CN.md)。\n\n## ✨ Markdown 渲染器\n\n`@ant-design/x-markdown` 旨在提供流式友好、强拓展性和高性能的 Markdown 渲染器。提供流式渲染公式、代码高亮、mermaid 等能力，详情点击[这里](packages/x-markdown/README-zh_CN.md)。\n\n## 如何贡献\n\n在任何形式的参与前，请先阅读 [贡献者文档](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md)。如果你希望参与贡献，欢迎提交 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或给我们 [报告 Bug](http://new-issue.ant.design/)。\n\n> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。\n\n## 社区互助\n\n如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。\n\n通过 GitHub Discussions 提问时，建议使用 `Q&A` 标签。\n\n1. [GitHub Discussions](https://github.com/ant-design/x/discussions)\n2. [GitHub Issues](https://github.com/ant-design/x/issues)\n\n\n \"Contribution\n \n" }, { "path": "packages/x-sdk/README.md", "content": "
    \n\n\n\n

    Ant Design X SDK

    \n\nEfficiently manage large model data streams\n\n[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url]\n\n[![NPM downloads][download-image]][download-url] [![][bundlephobia-image]][bundlephobia-url] [![antd][antd-image]][antd-url] [![Follow zhihu][zhihu-image]][zhihu-url]\n\n[Changelog](./CHANGELOG.md) · [Report a Bug][github-issues-bug-report] · [Request a Feature][github-issues-feature-request] · English · [中文](./README-zh_CN.md)\n\n[npm-image]: https://img.shields.io/npm/v/@ant-design/x-sdk.svg?style=flat-square\n[npm-url]: https://www.npmjs.com/package/@ant-design/x-sdk\n[github-action-image]: https://github.com/ant-design/x/actions/workflows/main.yml/badge.svg\n[github-action-url]: https://github.com/ant-design/x/actions/workflows/main.yml\n[codecov-image]: https://codecov.io/gh/ant-design/x/graph/badge.svg?token=wrCCsyTmdi\n[codecov-url]: https://codecov.io/gh/ant-design/x\n[download-image]: https://img.shields.io/npm/dm/@ant-design/x-sdk.svg?style=flat-square\n[download-url]: https://npmjs.org/package/@ant-design/x-sdk\n[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@ant-design/x-sdk?style=flat-square\n[bundlephobia-url]: https://bundlephobia.com/package/@ant-design/x-sdk\n[github-issues-bug-report]: https://github.com/ant-design/x/issues/new?template=bug-report.yml\n[github-issues-feature-request]: https://github.com/ant-design/x/issues/new?template=bug-feature-request.yml\n[antd-image]: https://img.shields.io/badge/-Ant%20Design-blue?labelColor=black&logo=antdesign&style=flat-square\n[antd-url]: https://ant.design\n[zhihu-image]: https://img.shields.io/badge/-Ant%20Design-white?logo=zhihu\n[zhihu-url]: https://www.zhihu.com/column/c_1564262000561106944\n\n
    \n\n## Introduction\n\n`@ant-design/x-sdk` provides a set of tool APIs designed to help developers manage AI conversation application data flows out of the box.\n\n## 📦 Installation\n\n```bash\nnpm install @ant-design/x-sdk\n```\n\n```bash\nyarn add @ant-design/x-sdk\n```\n\n```bash\npnpm add @ant-design/x-sdk\n```\n\n```bash\nut install @ant-design/x-sdk\n```\n\n### Browser Import\n\nUse `script` and `link` tags to directly import files in the browser, and use the global variable `XSDK`.\n\nWe provide `x-sdk.js`, `x-sdk.min.js`, and `x-sdk.min.js.map` in the dist directory of the npm package.\n\n> **Strongly not recommended to use built files**, as this prevents on-demand loading and makes it difficult to get quick bug fixes for underlying dependency modules.\n\n> Note: `x-sdk.js`, `x-sdk.min.js`, and `x-sdk.min.js.map` depend on `react` and `react-dom`. Please ensure these files are imported in advance.\n\n## Example\n\n```tsx\nimport React from 'react';\nimport { XRequest } from '@ant-design/x-sdk';\n\nexport default () => {\n const [status, setStatus] = React.useState('');\n const [lines, setLines] = React.useState[]>([]);\n\n React.useEffect(() => {\n setStatus('pending');\n\n XRequest('https://api.example.com/chat', {\n params: {\n model: 'gpt-3.5-turbo',\n messages: [{ role: 'user', content: 'hello, who are u?' }],\n stream: true,\n },\n callbacks: {\n onSuccess: (messages) => {\n setStatus('success');\n console.log('onSuccess', messages);\n },\n onError: (error) => {\n setStatus('error');\n console.error('onError', error);\n },\n onUpdate: (msg) => {\n setLines((pre) => [...pre, msg]);\n console.log('onUpdate', msg);\n },\n },\n });\n }, []);\n\n return (\n
    \n
    Status: {status}
    \n
    Lines: {lines.length}
    \n
    \n );\n};\n```\n\n## 🌈 Enterprise-level LLM Components Out of the Box\n\n`@ant-design/x` provides a rich set of atomic components for different interaction stages based on the RICH interaction paradigm, helping you flexibly build your AI applications. See details [here](../x/README.md).\n\n## ✨ Markdown Renderer\n\n`@ant-design/x-markdown` aims to provide a streaming-friendly, highly extensible, and high-performance Markdown renderer. It supports streaming rendering of formulas, code highlighting, mermaid, and more. See details [here](../x-markdown/README.md).\n\n## How to Contribute\n\nBefore participating in any form, please read the [Contributor Guide](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md). If you wish to contribute, feel free to submit a [Pull Request](https://github.com/ant-design/ant-design/pulls) or [report a Bug](http://new-issue.ant.design/).\n\n> We highly recommend reading [How To Ask Questions The Smart Way](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way), [How to Ask Questions in Open Source Community](https://github.com/seajs/seajs/issues/545), [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs.html), and [How to Submit Unanswerable Questions to Open Source Projects](https://zhuanlan.zhihu.com/p/25795393). Better questions are more likely to get help.\n\n## Community Support\n\nIf you encounter problems during use, you can seek help through the following channels. We also encourage experienced users to help newcomers through these channels.\n\nWhen asking questions on GitHub Discussions, it is recommended to use the `Q&A` tag.\n\n1. [GitHub Discussions](https://github.com/ant-design/x/discussions)\n2. [GitHub Issues](https://github.com/ant-design/x/issues)\n\n\n \"Contribution\n \n" }, { "path": "packages/x-sdk/mako.config.json", "content": "{\n \"optimization\": {\n \"skipModules\": false,\n \"concatenateModules\": false\n },\n \"codeSplitting\": {\n \"strategy\": \"auto\"\n }\n}\n" }, { "path": "packages/x-sdk/package.json", "content": "{\n \"name\": \"@ant-design/x-sdk\",\n \"version\": \"2.4.0\",\n \"homepage\": \"https://x.ant.design/x-sdks/introduce\",\n \"bugs\": {\n \"url\": \"https://github.com/ant-design/x/issues\"\n },\n \"keywords\": [\n \"AI\",\n \"Agent\",\n \"Copilot\",\n \"ant\",\n \"sdk\",\n \"framework\",\n \"react\"\n ],\n \"scripts\": {\n \"compile\": \"father build\",\n \"prepublishOnly\": \"tsx ../../scripts/pre-publish.ts x-sdk\",\n \"tsc\": \"tsc --noEmit\",\n \"lint\": \"npm run version && npm run tsc && npm run lint:script && npm run lint:md\",\n \"lint:md\": \"remark . -f -q\",\n \"predist\": \"npm run prestart\",\n \"prestart\": \"npm run version\",\n \"pretest\": \"npm run prestart\",\n \"precompile\": \"npm run prestart\",\n \"lint:script\": \"biome lint\",\n \"test\": \"jest --config .jest.js --no-cache --collect-coverage\",\n \"coverage\": \"jest --config .jest.js --no-cache --collect-coverage --coverage\",\n \"version\": \"tsx scripts/generate-version.ts\",\n \"test:dekko\": \"tsx ./tests/dekko/index.test.ts\",\n \"clean\": \"rm -rf es lib coverage dist\",\n \"test:package-diff\": \"antd-tools run package-diff\"\n },\n \"sideEffects\": false,\n \"main\": \"lib/index.js\",\n \"module\": \"es/index.js\",\n \"typings\": \"es/index.d.ts\",\n \"files\": [\n \"dist\",\n \"es\",\n \"lib\"\n ],\n \"license\": \"MIT\",\n \"description\": \"placeholder for @ant-design/x-sdk\",\n \"dependencies\": {\n \"@rc-component/util\": \"^1.4.0\"\n },\n \"devDependencies\": {\n \"@types/react\": \"^19.0.2\",\n \"@types/react-dom\": \"^19.0.2\",\n \"jest-fetch-mock\": \"^3.0.3\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\"\n },\n \"peerDependencies\": {\n \"react\": \">=18.0.0\",\n \"react-dom\": \">=18.0.0\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/ant-design/x\"\n }\n}\n" }, { "path": "packages/x-sdk/scripts/generate-version.ts", "content": "import fs from 'fs';\nimport path from 'path';\n\nconst packageJsonPath = path.join(__dirname, '..', 'package.json');\nconst packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));\nconst version = packageJson.version;\n\nfs.writeFileSync(\n path.join(__dirname, '..', 'src', 'version', 'version.ts'),\n `export default '${version}';`,\n 'utf8',\n);\n" }, { "path": "packages/x-sdk/src/_util/type.ts", "content": "export type AnyObject = Record;\n" }, { "path": "packages/x-sdk/src/chat-providers/AbstractChatProvider.ts", "content": "import type { MessageStatus, SimpleType } from '../x-chat';\nimport type { AbstractXRequestClass, XRequestCallbacks, XRequestOptions } from '../x-request';\n\nexport interface ChatProviderConfig {\n request:\n | AbstractXRequestClass\n | (() => AbstractXRequestClass);\n}\n\nexport interface TransformMessage {\n originMessage?: ChatMessage;\n chunk: Output;\n chunks: Output[];\n status: MessageStatus;\n responseHeaders: Headers;\n}\n\nexport default abstract class AbstractChatProvider {\n private _request!: AbstractXRequestClass;\n private _getMessagesFn!: () => ChatMessage[];\n private _originalCallbacks?: XRequestCallbacks;\n\n public get request() {\n return this._request;\n }\n\n constructor(config: ChatProviderConfig) {\n const request = typeof config.request === 'function' ? config.request() : config.request;\n if (!request.manual) {\n throw new Error('request must be manual');\n }\n this._request = request;\n this._originalCallbacks = this._request.options?.callbacks;\n }\n\n /**\n * 转换onRequest传入的参数，你可以和Provider实例化时request配置中的params进行合并或者额外处理\n * @param requestParams 请求参数\n * @param options 请求配置，从Provider实例化时request配置中来\n */\n abstract transformParams(\n requestParams: Partial,\n options: XRequestOptions,\n ): Input;\n\n /**\n * 将onRequest传入的参数转换为本地（用户发送）的ChatMessage，用于消息渲染\n * @param requestParams onRequest传入的参数\n */\n abstract transformLocalMessage(requestParams: Partial): ChatMessage | ChatMessage[];\n\n /**\n * 可在更新返回数据时对messages做转换，同时会更新到messages\n * @param info\n */\n abstract transformMessage(info: TransformMessage): ChatMessage;\n\n getMessages(): ChatMessage[] {\n return this?._getMessagesFn();\n }\n\n injectGetMessages(getMessages: () => ChatMessage[]) {\n this._getMessagesFn = getMessages;\n }\n\n injectRequest({\n onUpdate,\n onSuccess,\n onError,\n }: {\n onUpdate: (data: Output, responseHeaders: Headers) => any;\n onSuccess: (data: Output[], responseHeaders: Headers) => any;\n onError: (error: any, errorInfo?: any) => any;\n }) {\n const originalOnUpdate = this._originalCallbacks?.onUpdate;\n const originalOnSuccess = this._originalCallbacks?.onSuccess;\n const originalOnError = this._originalCallbacks?.onError;\n this._request.options.callbacks = {\n onUpdate: (data: Output, responseHeaders: Headers) => {\n const msg = onUpdate(data, responseHeaders);\n if (originalOnUpdate) originalOnUpdate(data, responseHeaders, msg);\n },\n onSuccess: (data: Output[], responseHeaders: Headers) => {\n const msg = onSuccess(data, responseHeaders);\n if (originalOnSuccess) originalOnSuccess(data, responseHeaders, msg);\n },\n onError: (error, errorInfo, responseHeaders) => {\n const fallbackMsg = onError(error, errorInfo);\n if (originalOnError) originalOnError(error, errorInfo, responseHeaders, fallbackMsg);\n },\n } as XRequestCallbacks;\n }\n}\n" }, { "path": "packages/x-sdk/src/chat-providers/DeepSeekChatProvider.ts", "content": "import { XRequestOptions } from '../x-request';\nimport { SSEFields } from '../x-stream';\nimport AbstractChatProvider, { TransformMessage } from './AbstractChatProvider';\nimport { XModelMessage, XModelParams } from './types/model';\n\n/**\n * DeepSeek Chat Provider\n * @template ChatMessage 消息类型\n * @template Input 请求参数类型\n * @template Output 响应数据类型\n */\nexport default class DeepSeekChatProvider<\n ChatMessage extends XModelMessage = XModelMessage,\n Input extends XModelParams = XModelParams,\n Output extends Partial> = Partial>,\n> extends AbstractChatProvider {\n transformParams(\n requestParams: Partial,\n options: XRequestOptions,\n ): Input {\n return {\n ...(options?.params || {}),\n ...requestParams,\n messages: this.getMessages(),\n } as unknown as Input;\n }\n\n transformLocalMessage(requestParams: Partial): ChatMessage[] {\n return (requestParams?.messages || []) as ChatMessage[];\n }\n\n transformMessage(info: TransformMessage): ChatMessage {\n const { originMessage, chunk, responseHeaders } = info;\n let currentContent = '';\n let currentThink = '';\n let role = 'assistant';\n try {\n let message: any;\n if (responseHeaders.get('content-type')?.includes('text/event-stream')) {\n if (chunk && chunk.data?.trim() !== '[DONE]') {\n message = JSON.parse(chunk.data);\n }\n } else {\n message = chunk;\n }\n if (message) {\n message?.choices?.forEach((choice: any) => {\n if (choice?.delta) {\n currentThink = choice.delta.reasoning_content || '';\n currentContent += choice.delta.content || '';\n role = choice.delta.role;\n } else if (choice?.message) {\n currentThink = choice.message.reasoning_content || '';\n currentContent += choice.message.content || '';\n role = choice.message.role;\n }\n });\n }\n } catch (error) {\n console.error('transformMessage error', error);\n }\n let content = '';\n let originMessageContent =\n typeof originMessage?.content === 'string'\n ? originMessage?.content\n : originMessage?.content.text || '';\n if (!originMessageContent && currentThink) {\n // 仅匹配最多前两个换行符，避免性能问题\n content = `\\n\\n\\n\\n${currentThink?.replace?.(/^\\n{0,2}/, '')}`;\n } else if (\n originMessageContent.includes('') &&\n !originMessageContent.includes('') &&\n currentContent\n ) {\n originMessageContent = originMessageContent.replace('', '');\n // 仅匹配最多结尾的两个空白字符和换行符\n content = `${originMessageContent?.replace?.(/[\\s\\n]{0,2}$/, '')}\\n\\n\\n\\n${currentContent}`;\n } else {\n content = `${originMessageContent || ''}${currentThink}${currentContent}`;\n }\n\n return {\n content,\n role: role || 'assistant',\n } as ChatMessage;\n }\n}\n" }, { "path": "packages/x-sdk/src/chat-providers/DefaultChatProvider.ts", "content": "import type { SimpleType } from '../x-chat';\nimport { XRequestOptions } from '../x-request';\nimport type { TransformMessage } from './AbstractChatProvider';\nimport AbstractChatProvider from './AbstractChatProvider';\nexport default class DefaultChatProvider<\n ChatMessage extends SimpleType,\n Input,\n Output,\n> extends AbstractChatProvider {\n transformParams(\n requestParams: ChatMessage & Partial,\n options: XRequestOptions,\n ): Input {\n if (typeof requestParams !== 'object') {\n throw new Error('requestParams must be an object');\n }\n return {\n ...(options?.params || {}),\n ...(requestParams || {}),\n } as unknown as Input;\n }\n\n transformLocalMessage(requestParams: Partial): ChatMessage {\n return requestParams as unknown as ChatMessage;\n }\n\n transformMessage(info: TransformMessage): ChatMessage {\n const { chunk, chunks, originMessage } = info;\n\n if (chunk) {\n return chunk as unknown as ChatMessage;\n }\n\n if (Array.isArray(chunks)) {\n const chunk = chunks?.length > 0 ? chunks?.[chunks?.length - 1] : undefined;\n return originMessage ? originMessage : (chunk as unknown as ChatMessage);\n }\n\n return chunks as unknown as ChatMessage;\n }\n}\n" }, { "path": "packages/x-sdk/src/chat-providers/OpenAIChatProvider.ts", "content": "import { XRequestOptions } from '../x-request';\nimport { SSEFields } from '../x-stream';\nimport type { TransformMessage } from './AbstractChatProvider';\nimport AbstractChatProvider from './AbstractChatProvider';\nimport { XModelMessage, XModelParams } from './types/model';\n/**\n * LLM OpenAI Compatible Chat Provider\n * @template ChatMessage 消息类型\n * @template Input 请求参数类型\n * @template Output 响应数据类型\n */\nexport default class OpenAIChatProvider<\n ChatMessage extends XModelMessage = XModelMessage,\n Input extends XModelParams = XModelParams,\n Output extends Partial> = Partial>,\n> extends AbstractChatProvider {\n transformParams(\n requestParams: Partial,\n options: XRequestOptions,\n ): Input {\n return {\n ...(options?.params || {}),\n ...requestParams,\n messages: this.getMessages(),\n } as unknown as Input;\n }\n\n transformLocalMessage(requestParams: Partial): ChatMessage[] {\n return (requestParams?.messages || []) as ChatMessage[];\n }\n\n transformMessage(info: TransformMessage): ChatMessage {\n const { originMessage, chunk, responseHeaders } = info;\n let currentContent = '';\n let role = 'assistant';\n try {\n let message: any;\n if (responseHeaders.get('content-type')?.includes('text/event-stream')) {\n if (chunk && chunk.data?.trim() !== '[DONE]') {\n message = JSON.parse(chunk.data);\n }\n } else {\n message = chunk;\n }\n if (message) {\n message?.choices?.forEach((choice: any) => {\n if (choice?.delta) {\n currentContent += choice.delta.content || '';\n role = choice.delta.role || 'assistant';\n } else if (choice?.message) {\n currentContent += choice.message.content || '';\n role = choice.message.role || 'assistant';\n }\n });\n }\n } catch (error) {\n console.error('transformMessage error', error);\n }\n\n const content = `${originMessage?.content || ''}${currentContent || ''}`;\n\n return {\n content,\n role,\n } as ChatMessage;\n }\n}\n" }, { "path": "packages/x-sdk/src/chat-providers/__test__/providers.test.ts", "content": "import type { AnyObject } from '../../_util/type';\nimport {\n DeepSeekChatProvider,\n DefaultChatProvider,\n OpenAIChatProvider,\n} from '../../chat-providers';\nimport XRequest, { XRequestClass } from '../../x-request';\n\nconst baseURL = 'http://localhost:3000';\n\ninterface DefaultInput {\n test?: string;\n test2?: string;\n}\n\ndescribe('DefaultChatProvider test', () => {\n const headers = new Headers();\n headers.set('content-type', 'text/event-stream');\n\n it('should initialize successfully', () => {\n const defaultProvider = new DefaultChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n expect(defaultProvider).not.toBeNull();\n });\n\n it('should transformParams throw error when requestParams is not an object', () => {\n const defaultProvider = new DefaultChatProvider<\n Record,\n DefaultInput,\n Record\n >({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n expect(() => {\n defaultProvider.transformParams('test' as any, {\n params: {\n test: 'test',\n },\n });\n }).toThrow('requestParams must be an object');\n });\n\n it('should transformParams work successfully', () => {\n const defaultProvider = new DefaultChatProvider<\n Record,\n DefaultInput,\n Record\n >({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n const defaultTransformParams = defaultProvider.transformParams(\n {\n test2: 'test2',\n },\n {\n params: {\n test: 'test',\n },\n },\n );\n expect(defaultTransformParams).toEqual({ test: 'test', test2: 'test2' });\n });\n\n it('should transformLocalMessage work successfully', () => {\n const defaultProvider = new DefaultChatProvider<\n Record,\n DefaultInput,\n Record\n >({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n const defaultMsg = defaultProvider.transformLocalMessage({ test: 'test' });\n expect(defaultMsg).toEqual({ test: 'test' });\n });\n\n it('should transformMessage work successfully', () => {\n const defaultProvider = new DefaultChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n let chunk: any = 'test';\n let defaultMsg = defaultProvider.transformMessage({\n originMessage: '',\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(defaultMsg).toEqual('test');\n\n chunk = 'test2';\n defaultMsg = defaultProvider.transformMessage({\n originMessage: '',\n chunk: '',\n chunks: [chunk],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(defaultMsg).toEqual('test2');\n\n chunk = 'test3';\n defaultMsg = defaultProvider.transformMessage({\n originMessage: '',\n chunk: '',\n chunks: chunk,\n status: 'loading',\n responseHeaders: headers,\n });\n expect(defaultMsg).toEqual('test3');\n });\n});\n\ndescribe('OpenAiChatProvider test', () => {\n const headers = new Headers();\n headers.set('content-type', 'text/event-stream');\n const jsonHeaders = new Headers();\n jsonHeaders.set('content-type', 'application/json');\n\n it('should initialize successfully', () => {\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n expect(openAIProvider).not.toBeNull();\n expect(openAIProvider).toBeInstanceOf(OpenAIChatProvider);\n });\n\n describe('transformParams', () => {\n it('should transformParams work successfully with basic parameters', () => {\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n openAIProvider.injectGetMessages(() => [\n {\n role: 'user',\n content: 'test',\n },\n ]);\n const openAITransformParams = openAIProvider.transformParams(\n {\n test2: 'test2',\n },\n {\n params: {\n test3: 'test3',\n },\n },\n );\n expect(openAITransformParams).toEqual({\n test2: 'test2',\n test3: 'test3',\n messages: [\n {\n role: 'user',\n content: 'test',\n },\n ],\n });\n });\n\n it('should transformParams work with empty requestParams', () => {\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n openAIProvider.injectGetMessages(() => [\n {\n role: 'user',\n content: 'hello',\n },\n ]);\n const result = openAIProvider.transformParams({}, { params: { model: 'gpt-3.5-turbo' } });\n expect(result).toEqual({\n model: 'gpt-3.5-turbo',\n messages: [\n {\n role: 'user',\n content: 'hello',\n },\n ],\n });\n });\n\n it('should transformParams work with empty options params', () => {\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n openAIProvider.injectGetMessages(() => [\n {\n role: 'assistant',\n content: 'response',\n },\n ]);\n const result = openAIProvider.transformParams({ temperature: 0.7 }, {});\n expect(result).toEqual({\n temperature: 0.7,\n messages: [\n {\n role: 'assistant',\n content: 'response',\n },\n ],\n });\n });\n\n it('should transformParams override options params with requestParams', () => {\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n openAIProvider.injectGetMessages(() => []);\n const result = openAIProvider.transformParams(\n { temperature: 0.9, max_tokens: 100 },\n { params: { temperature: 0.7, model: 'gpt-4' } },\n );\n expect(result).toEqual({\n temperature: 0.9,\n max_tokens: 100,\n model: 'gpt-4',\n messages: [],\n });\n });\n });\n\n describe('transformLocalMessage', () => {\n it('should transformLocalMessage work successfully with single message', () => {\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n const openAIMsg = openAIProvider.transformLocalMessage({\n messages: [\n {\n role: 'user',\n content: 'test',\n },\n ],\n });\n expect(openAIMsg).toEqual([\n {\n role: 'user',\n content: 'test',\n },\n ]);\n });\n\n it('should transformLocalMessage work with multiple messages', () => {\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n const openAIMsg = openAIProvider.transformLocalMessage({\n messages: [\n { role: 'user', content: 'hello' },\n { role: 'assistant', content: 'hi there' },\n { role: 'user', content: 'how are you?' },\n ],\n });\n expect(openAIMsg).toEqual([\n { role: 'user', content: 'hello' },\n { role: 'assistant', content: 'hi there' },\n { role: 'user', content: 'how are you?' },\n ]);\n });\n\n it('should transformLocalMessage return empty array when no messages', () => {\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n const openAIMsg = openAIProvider.transformLocalMessage({});\n expect(openAIMsg).toEqual([]);\n });\n\n it('should transformLocalMessage handle empty messages array', () => {\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n const openAIMsg = openAIProvider.transformLocalMessage({ messages: [] });\n expect(openAIMsg).toEqual([]);\n });\n });\n\n describe('transformMessage', () => {\n it('should transformMessage not throw error with invalid JSON', () => {\n const chunk = {\n data: 'invalid json',\n };\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n const openAIMsg = openAIProvider.transformMessage({\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(openAIMsg).toEqual({ role: 'assistant', content: '' });\n });\n\n it('should transformMessage work successfully with streaming response', () => {\n const chunk = {\n data: '{\"choices\":[{\"delta\":{\"role\":\"assistant\",\"content\":\"test2\"}}]}',\n };\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n const openAIMsg = openAIProvider.transformMessage({\n originMessage: {\n role: 'assistant',\n content: 'test',\n } as any,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(openAIMsg).toEqual({ role: 'assistant', content: 'testtest2' });\n });\n\n it('should transformMessage work with normal HTTP response', () => {\n const chunk = {\n choices: [{ message: { role: 'assistant', content: 'test3' } }],\n } as any;\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n const openAIMsg = openAIProvider.transformMessage({\n originMessage: {\n role: 'assistant',\n content: 'test',\n } as any,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: jsonHeaders,\n });\n expect(openAIMsg).toEqual({ role: 'assistant', content: 'testtest3' });\n });\n\n it('should transformMessage handle [DONE] signal in streaming', () => {\n const chunk = {\n data: '[DONE]',\n };\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n const openAIMsg = openAIProvider.transformMessage({\n originMessage: {\n role: 'assistant',\n content: 'completed response',\n } as any,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(openAIMsg).toEqual({ role: 'assistant', content: 'completed response' });\n });\n\n it('should transformMessage handle multiple choices in streaming', () => {\n const chunk = {\n data: '{\"choices\":[{\"delta\":{\"role\":\"assistant\",\"content\":\"part1\"}},{\"delta\":{\"role\":\"assistant\",\"content\":\"part2\"}}]}',\n };\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n const openAIMsg = openAIProvider.transformMessage({\n originMessage: {\n role: 'assistant',\n content: 'start',\n } as any,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(openAIMsg).toEqual({ role: 'assistant', content: 'startpart1part2' });\n });\n\n it('should transformMessage handle empty delta content', () => {\n const chunk = {\n data: '{\"choices\":[{\"delta\":{\"role\":\"assistant\",\"content\":\"\"}}]}',\n };\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n const openAIMsg = openAIProvider.transformMessage({\n originMessage: {\n role: 'assistant',\n content: 'existing',\n } as any,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(openAIMsg).toEqual({ role: 'assistant', content: 'existing' });\n });\n\n it('should transformMessage handle missing role in delta', () => {\n const chunk = {\n data: '{\"choices\":[{\"delta\":{\"content\":\"new content\"}}]}',\n };\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n const openAIMsg = openAIProvider.transformMessage({\n originMessage: {\n role: 'assistant',\n content: 'previous',\n } as any,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(openAIMsg).toEqual({ role: 'assistant', content: 'previousnew content' });\n });\n\n it('should transformMessage handle chunks array fallback', () => {\n const chunk = { choices: [{ message: { role: 'assistant', content: 'fallback' } }] };\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n const openAIMsg = openAIProvider.transformMessage({\n originMessage: undefined,\n chunk: undefined as any,\n chunks: [chunk] as any,\n status: 'loading',\n responseHeaders: jsonHeaders,\n });\n expect(openAIMsg).toEqual({ role: 'assistant', content: '' });\n });\n\n it('should transformMessage handle null originMessage', () => {\n const chunk = {\n data: '{\"choices\":[{\"delta\":{\"role\":\"system\",\"content\":\"initial message\"}}]}',\n };\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n const openAIMsg = openAIProvider.transformMessage({\n originMessage: undefined,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(openAIMsg).toEqual({ role: 'system', content: 'initial message' });\n });\n\n it('should transformMessage handle complex nested structure', () => {\n const chunk = {\n data: '{\"choices\":[{\"delta\":{\"role\":\"assistant\",\"content\":\"Hello, world!\"}}],\"usage\":{\"prompt_tokens\":10,\"completion_tokens\":5}}',\n };\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n const openAIMsg = openAIProvider.transformMessage({\n originMessage: {\n role: 'assistant',\n content: '',\n } as any,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(openAIMsg).toEqual({ role: 'assistant', content: 'Hello, world!' });\n });\n\n it('should handle real-world OpenAI streaming response format', () => {\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n // Simulate streaming chunks\n const chunks = [\n {\n data: '{\"choices\":[{\"delta\":{\"role\":\"assistant\"}}],\"id\":\"chatcmpl-123\",\"object\":\"chat.completion.chunk\",\"created\":1234567890}',\n },\n {\n data: '{\"choices\":[{\"delta\":{\"content\":\"Hello\"}}],\"id\":\"chatcmpl-123\",\"object\":\"chat.completion.chunk\",\"created\":1234567890}',\n },\n {\n data: '{\"choices\":[{\"delta\":{\"content\":\", world!\"}}],\"id\":\"chatcmpl-123\",\"object\":\"chat.completion.chunk\",\"created\":1234567890}',\n },\n { data: '[DONE]' },\n ];\n\n let result = { role: 'assistant', content: '' } as any;\n\n chunks.forEach((chunk) => {\n if (chunk.data !== '[DONE]') {\n result = openAIProvider.transformMessage({\n originMessage: result,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n }\n });\n\n expect(result).toEqual({ role: 'assistant', content: 'Hello, world!' });\n });\n\n it('should handle real-world OpenAI non-streaming response format', () => {\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n const response = {\n choices: [\n {\n message: {\n role: 'assistant',\n content: 'This is a complete response from OpenAI.',\n },\n finish_reason: 'stop',\n index: 0,\n },\n ],\n usage: {\n prompt_tokens: 20,\n completion_tokens: 10,\n total_tokens: 30,\n },\n id: 'chatcmpl-456',\n object: 'chat.completion',\n created: 1234567890,\n model: 'gpt-3.5-turbo',\n } as any;\n\n const result = openAIProvider.transformMessage({\n originMessage: undefined,\n chunk: response,\n chunks: [],\n status: 'loading',\n responseHeaders: jsonHeaders,\n });\n\n expect(result).toEqual({\n role: 'assistant',\n content: 'This is a complete response from OpenAI.',\n });\n });\n\n it('should handle function call responses', () => {\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n const response = {\n choices: [\n {\n message: {\n role: 'assistant',\n content: null,\n function_call: {\n name: 'get_weather',\n arguments: '{\"location\": \"San Francisco, CA\"}',\n },\n },\n },\n ],\n } as any;\n\n const result = openAIProvider.transformMessage({\n originMessage: undefined,\n chunk: response,\n chunks: [],\n status: 'loading',\n responseHeaders: jsonHeaders,\n });\n\n expect(result).toEqual({\n role: 'assistant',\n content: '',\n });\n });\n\n it('should handle tool call responses', () => {\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n const response = {\n choices: [\n {\n message: {\n role: 'assistant',\n content: null,\n tool_calls: [\n {\n id: 'call_123',\n type: 'function',\n function: {\n name: 'get_weather',\n arguments: '{\"location\": \"San Francisco, CA\"}',\n },\n },\n ],\n },\n },\n ],\n } as any;\n\n const result = openAIProvider.transformMessage({\n originMessage: undefined,\n chunk: response,\n chunks: [],\n status: 'loading',\n responseHeaders: jsonHeaders,\n });\n\n expect(result).toEqual({\n role: 'assistant',\n content: '',\n });\n });\n\n it('should handle edge case with malformed choices', () => {\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n const response = {\n choices: [{ delta: { content: 'valid' } }, { invalid: 'structure' }, null],\n } as any;\n\n const result = openAIProvider.transformMessage({\n originMessage: { role: 'assistant', content: 'start' } as any,\n chunk: response,\n chunks: [],\n status: 'loading',\n responseHeaders: jsonHeaders,\n });\n\n expect(result).toEqual({\n role: 'assistant',\n content: 'startvalid',\n });\n });\n\n it('should handle empty response gracefully', () => {\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n const testCases = [\n {},\n { choices: [] },\n { choices: [null] },\n { choices: [{}] },\n { choices: [{ delta: {} }] },\n { choices: [{ message: {} }] },\n ];\n\n testCases.forEach((testCase) => {\n const result = openAIProvider.transformMessage({\n originMessage: { role: 'assistant', content: 'existing' } as any,\n chunk: testCase as any,\n chunks: [],\n status: 'loading',\n responseHeaders: jsonHeaders,\n });\n expect(result).toEqual({ role: 'assistant', content: 'existing' });\n });\n });\n });\n\n describe('Integration tests', () => {\n it('should handle complete conversation flow', () => {\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n // Setup messages\n const messages = [\n { role: 'system', content: 'You are a helpful assistant.' },\n { role: 'user', content: 'What is the weather like?' },\n ] as any;\n openAIProvider.injectGetMessages(() => messages);\n\n // Test parameter transformation\n const params = openAIProvider.transformParams({ temperature: 0.7, max_tokens: 150 } as any, {\n params: { model: 'gpt-3.5-turbo' },\n });\n expect(params).toEqual({\n temperature: 0.7,\n max_tokens: 150,\n model: 'gpt-3.5-turbo',\n messages,\n });\n\n // Test local message extraction\n const localMsg = openAIProvider.transformLocalMessage({ messages });\n expect(localMsg).toEqual([\n { role: 'system', content: 'You are a helpful assistant.' },\n { role: 'user', content: 'What is the weather like?' },\n ]);\n });\n\n it('should handle type safety with generic types', () => {\n interface CustomMessage {\n role: 'user' | 'assistant' | 'system';\n content: string;\n metadata?: Record;\n }\n\n interface CustomParams {\n model: string;\n temperature?: number;\n max_tokens?: number;\n messages: CustomMessage[];\n }\n\n const openAIProvider = new OpenAIChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n openAIProvider.injectGetMessages(() => [\n { role: 'user', content: 'test', metadata: { test: true } },\n ]);\n\n const params = openAIProvider.transformParams({ temperature: 0.8 } as any, {\n params: { model: 'gpt-4', messages: [] },\n });\n\n expect(params.model).toBe('gpt-4');\n expect(params.temperature).toBe(0.8);\n expect(params.messages).toHaveLength(1);\n });\n });\n});\n\ndescribe('DeepSeekChatProvider test', () => {\n const headers = new Headers();\n headers.set('content-type', 'text/event-stream');\n\n it('should initialize successfully', () => {\n const openAIProvider = new DeepSeekChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n expect(openAIProvider).not.toBeNull();\n });\n\n it('should transformParams work successfully', () => {\n const openAIProvider = new DeepSeekChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n openAIProvider.injectGetMessages(() => [\n {\n role: 'user',\n content: 'test',\n },\n ]);\n const openAITransformParams = openAIProvider.transformParams(\n {\n test2: 'test2',\n },\n {\n params: {\n test3: 'test3',\n },\n },\n );\n expect(openAITransformParams).toEqual({\n test2: 'test2',\n test3: 'test3',\n messages: [\n {\n role: 'user',\n content: 'test',\n },\n ],\n });\n });\n\n it('should transformLocalMessage work successfully', () => {\n const openAIProvider = new DeepSeekChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n const openAIMsg = openAIProvider.transformLocalMessage({\n messages: [\n {\n role: 'user',\n content: 'test',\n },\n ],\n });\n expect(openAIMsg).toEqual([\n {\n role: 'user',\n content: 'test',\n },\n ]);\n });\n\n it('should transformMessage not throw error', () => {\n let chunk = {};\n const openAIProvider = new DeepSeekChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n // error json format\n chunk = {\n data: 'test',\n };\n const openAIMsg = openAIProvider.transformMessage({\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(openAIMsg).toEqual({ role: 'assistant', content: '' });\n });\n\n it('should transformMessage work successfully', () => {\n let chunk = {};\n const openAIProvider = new DeepSeekChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n // test for streaming\n chunk = {\n data: '{\"choices\":[{\"delta\":{\"role\":\"assistant\",\"content\":\"test2\"}}]}',\n };\n let openAIMsg = openAIProvider.transformMessage({\n originMessage: {\n role: 'assistant',\n content: 'test',\n } as any,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(openAIMsg).toEqual({ role: 'assistant', content: 'testtest2' });\n\n // test for normal http\n chunk = {\n data: '{\"choices\":[{\"message\":{\"role\":\"assistant\",\"content\":\"test3\"}}]}',\n };\n openAIMsg = openAIProvider.transformMessage({\n originMessage: {\n role: 'assistant',\n content: 'test',\n } as any,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(openAIMsg).toEqual({ role: 'assistant', content: 'testtest3' });\n });\n\n describe('DeepSeekChatProvider advanced tests', () => {\n const headers = new Headers();\n headers.set('content-type', 'text/event-stream');\n const jsonHeaders = new Headers();\n jsonHeaders.set('content-type', 'application/json');\n\n it('should handle reasoning_content in streaming response', () => {\n const provider = new DeepSeekChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n const chunk = {\n data: '{\"choices\":[{\"delta\":{\"role\":\"assistant\",\"reasoning_content\":\"Let me think about this\",\"content\":\"The answer is\"}}]}',\n };\n const result = provider.transformMessage({\n originMessage: {\n role: 'assistant',\n content: '',\n } as any,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(result).toEqual({\n role: 'assistant',\n content: '\\n\\n\\n\\nLet me think about this',\n });\n });\n\n it('should handle reasoning_content in normal response', () => {\n const provider = new DeepSeekChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n const chunk = {\n choices: [\n {\n message: {\n role: 'assistant',\n reasoning_content: 'Step by step analysis',\n content: 'Final conclusion',\n },\n },\n ],\n } as any;\n const result = provider.transformMessage({\n originMessage: {\n role: 'assistant',\n content: '',\n } as any,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: jsonHeaders,\n });\n expect(result).toEqual({\n role: 'assistant',\n content: '\\n\\n\\n\\nStep by step analysis',\n });\n });\n\n it('should handle think tag completion', () => {\n const provider = new DeepSeekChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n const chunk = {\n data: '{\"choices\":[{\"delta\":{\"content\":\" and this is the final answer\"}}]}',\n };\n const result = provider.transformMessage({\n originMessage: {\n role: 'assistant',\n content: 'Initial thinking',\n } as any,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(result.content).toContain('');\n expect(result.content).toContain('');\n expect(result.content).toContain('and this is the final answer');\n });\n\n it('should handle content as object type', () => {\n const provider = new DeepSeekChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n const chunk = {\n data: '{\"choices\":[{\"delta\":{\"content\":\"new content\"}}]}',\n };\n const result = provider.transformMessage({\n originMessage: {\n role: 'assistant',\n content: { text: 'existing ' } as any,\n } as any,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(result).toEqual({ role: 'assistant', content: 'existing new content' });\n });\n\n it('should handle missing responseHeaders', () => {\n const provider = new DeepSeekChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n const chunk = {\n choices: [{ message: { role: 'assistant', content: 'test' } }],\n } as any;\n const result = provider.transformMessage({\n originMessage: undefined,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: undefined as any,\n });\n expect(result).toEqual({ role: 'assistant', content: '' });\n });\n\n it('should handle empty responseHeaders', () => {\n const provider = new DeepSeekChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n const chunk = {\n choices: [{ message: { role: 'assistant', content: 'test' } }],\n } as any;\n const emptyHeaders = new Headers();\n const result = provider.transformMessage({\n originMessage: undefined,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: emptyHeaders,\n });\n expect(result).toEqual({ role: 'assistant', content: 'test' });\n });\n\n it('should handle JSON parsing error gracefully', () => {\n const provider = new DeepSeekChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n const chunk = {\n data: 'invalid json { broken',\n };\n const result = provider.transformMessage({\n originMessage: {\n role: 'assistant',\n content: 'existing',\n } as any,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(result).toEqual({ role: 'assistant', content: 'existing' });\n });\n\n it('should handle null choices in response', () => {\n const provider = new DeepSeekChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n const chunk = {\n choices: null,\n } as any;\n const result = provider.transformMessage({\n originMessage: {\n role: 'assistant',\n content: 'existing',\n } as any,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: jsonHeaders,\n });\n expect(result).toEqual({ role: 'assistant', content: 'existing' });\n });\n\n it('should handle undefined originMessage with reasoning', () => {\n const provider = new DeepSeekChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n const chunk = {\n choices: [{ message: { reasoning_content: 'Deep reasoning', content: 'Answer' } }],\n } as any;\n const result = provider.transformMessage({\n originMessage: undefined,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: jsonHeaders,\n });\n expect(result).toEqual({\n role: 'assistant',\n content: '\\n\\n\\n\\nDeep reasoning',\n });\n });\n\n it('should handle edge case with newlines in reasoning', () => {\n const provider = new DeepSeekChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n const chunk = {\n choices: [{ message: { reasoning_content: '\\n\\nInitial analysis', content: 'result' } }],\n } as any;\n const result = provider.transformMessage({\n originMessage: undefined,\n chunk,\n chunks: [],\n status: 'loading',\n responseHeaders: jsonHeaders,\n });\n expect(result.content).toBe('\\n\\n\\n\\nInitial analysis');\n });\n\n it('should handle complete think workflow', () => {\n const provider = new DeepSeekChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n // Step 1: Start thinking\n let result = provider.transformMessage({\n originMessage: undefined,\n chunk: { data: '{\"choices\":[{\"delta\":{\"reasoning_content\":\"Let me analyze\"}}]}' },\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(result.content).toBe('\\n\\n\\n\\nLet me analyze');\n\n // Step 2: Continue thinking\n result = provider.transformMessage({\n originMessage: result,\n chunk: { data: '{\"choices\":[{\"delta\":{\"reasoning_content\":\" and process\"}}]}' },\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(result.content).toBe('\\n\\n\\n\\nLet me analyze and process');\n\n // Step 3: Complete thinking and provide answer\n result = provider.transformMessage({\n originMessage: result,\n chunk: { data: '{\"choices\":[{\"delta\":{\"content\":\"Final answer\"}}]}' },\n chunks: [],\n status: 'loading',\n responseHeaders: headers,\n });\n expect(result.content).toContain('');\n expect(result.content).toContain('');\n expect(result.content).toContain('Final answer');\n });\n });\n});\n\ndescribe('AbstractChatProvider test', () => {\n it('should get request instance successfully', () => {\n const provider = new DefaultChatProvider({\n request: XRequest(baseURL, {\n manual: true,\n }),\n });\n\n expect(provider.request).toBeInstanceOf(XRequestClass);\n });\n\n it('should throw error when manual is not true', () => {\n expect(() => {\n new DefaultChatProvider({\n request: XRequest(baseURL, {}),\n });\n }).toThrow('request must be manual');\n });\n\n it('should injectRequest work successfully', async () => {\n const onSuccess = jest.fn();\n const onUpdate = jest.fn();\n const provider = new DefaultChatProvider({\n request: XRequest('baseURL', {\n manual: true,\n callbacks: {\n onError: jest.fn(),\n onSuccess,\n onUpdate,\n },\n fetch: async () => {\n return Promise.resolve(\n new Response('{}', {\n headers: {\n 'Content-Type': 'application/json',\n },\n }),\n );\n },\n }),\n });\n\n const onSuccess2 = jest.fn();\n const onUpdate2 = jest.fn();\n provider.injectRequest({\n onError: jest.fn(),\n onSuccess: onSuccess2,\n onUpdate: onUpdate2,\n });\n provider.request.run();\n await provider.request.asyncHandler;\n\n expect(provider.request.isRequesting).toBeFalsy();\n expect(onSuccess).toHaveBeenCalled();\n expect(onUpdate).toHaveBeenCalled();\n expect(onSuccess2).toHaveBeenCalled();\n expect(onUpdate2).toHaveBeenCalled();\n\n const onError = jest.fn();\n const onError2 = jest.fn();\n const provider2 = new DefaultChatProvider({\n request: XRequest('baseURL', {\n manual: true,\n callbacks: {\n onError,\n onSuccess,\n onUpdate,\n },\n fetch: async () => {\n throw new Error();\n },\n }),\n });\n provider2.injectRequest({\n onError: onError2,\n onSuccess: onSuccess2,\n onUpdate: onUpdate2,\n });\n provider2.request.run();\n await provider2.request.asyncHandler;\n\n expect(onError).toHaveBeenCalled();\n expect(onError2).toHaveBeenCalled();\n });\n});\n" }, { "path": "packages/x-sdk/src/chat-providers/index.ts", "content": "export type { ChatProviderConfig, TransformMessage } from './AbstractChatProvider';\nexport { default as AbstractChatProvider } from './AbstractChatProvider';\nexport { default as DeepSeekChatProvider } from './DeepSeekChatProvider';\nexport { default as DefaultChatProvider } from './DefaultChatProvider';\nexport { default as OpenAIChatProvider } from './OpenAIChatProvider';\n" }, { "path": "packages/x-sdk/src/chat-providers/types/model.ts", "content": "import type { AnyObject } from '../../_util/type';\n\nexport interface XModelMessage extends AnyObject {\n role: string;\n content:\n | string\n | {\n text: string;\n type: string;\n };\n}\n\nexport interface XModelParams extends AnyObject {\n model?: string;\n messages?: XModelMessage[];\n frequency_penalty?: number;\n logit_bias?: AnyObject;\n logprobs?: boolean;\n max_completion_tokens?: number;\n metadata?: AnyObject;\n modalities?: string[];\n n?: number;\n parallel_tool_calls?: boolean;\n prediction?: {\n content: string;\n type: string;\n };\n presence_penalty?: number;\n reasoning_effort?: string;\n response_format?:\n | 'text'\n | {\n type: 'json_object';\n }\n | {\n type: 'json_schema';\n json_schema: {\n name: string;\n description?: string;\n schema?: AnyObject;\n strict?: boolean;\n };\n };\n seed?: number;\n service_tier?: string;\n stop?: string | string[];\n store?: boolean;\n stream?: boolean;\n stream_options?: {\n include_usage?: boolean;\n };\n temperature?: number;\n tool_choice?:\n | string\n | {\n type: 'function';\n function: {\n name: string;\n };\n };\n // tools?: XModelTool[];\n top_logprobs?: number;\n top_p?: number;\n user?: string;\n web_search_options?: {\n search_context_size?: string;\n user_location?: {\n type: 'approximate';\n approximate?: {\n city?: string;\n country?: string;\n region?: string;\n timezone?: string;\n };\n };\n };\n}\n\nexport interface XModelResponse {\n choices: {\n index: number;\n message: {\n role: string;\n content: string | null;\n reasoning_content: string | null;\n refusal: string | null;\n annotations: {\n type: 'url_citation';\n end_index: number;\n start_index: number;\n url: string;\n title: string;\n }[];\n };\n logprobs: AnyObject | null;\n finish_reason: 'stop' | 'length' | 'content_filter' | 'tool_calls' | string;\n }[];\n created: number;\n id: string;\n model: string;\n object: 'chat.completion' | 'chat.completion.chunk';\n service_tier: string | null;\n system_fingerprint: string | null;\n usage: {\n completion_tokens: number;\n prompt_tokens: number;\n total_tokens: number;\n completion_tokens_details: {\n reasoning_tokens: number;\n audio_tokens: number;\n accepted_prediction_tokens: number;\n rejected_prediction_tokens: number;\n };\n prompt_tokens_details: {\n cached_tokens: number;\n audio_tokens: number;\n };\n };\n}\n" }, { "path": "packages/x-sdk/src/index.ts", "content": "export * from './chat-providers';\nexport type {\n XModelMessage,\n XModelParams,\n XModelResponse,\n} from './chat-providers/types/model';\nexport type { DefaultMessageInfo, MessageInfo } from './x-chat';\nexport { default as useXChat } from './x-chat';\nexport type { ConversationData } from './x-conversations';\nexport { default as useXConversations } from './x-conversations';\nexport type {\n XRequestCallbacks,\n XRequestClass,\n XRequestFunction,\n XRequestGlobalOptions,\n XRequestOptions,\n} from './x-request';\nexport { AbstractXRequestClass, default as XRequest } from './x-request';\nexport type {\n SSEFields,\n SSEOutput,\n XReadableStream,\n XStreamOptions,\n} from './x-stream';\nexport { default as XStream } from './x-stream';\n" }, { "path": "packages/x-sdk/src/version/index.ts", "content": "// @ts-ignore\nimport version from './version';\n\nexport default version;\n" }, { "path": "packages/x-sdk/src/x-chat/__test__/index.test.tsx", "content": "import React, { useImperativeHandle, useState } from 'react';\nimport { fireEvent, render, renderHook, sleep, waitFakeTimer } from '../../../tests/utils';\nimport { DefaultChatProvider } from '../../chat-providers';\nimport XRequest from '../../x-request';\nimport useXChat, { MessageStatus, SimpleType, XChatConfig } from '../index';\nimport { chatMessagesStoreHelper } from '../store';\n\ninterface ChatInput {\n query: string;\n [PropertyKey: string]: any;\n}\n\ndescribe('useXChat', () => {\n const requestNeverEnd = jest.fn(() => {});\n\n beforeAll(() => {\n requestNeverEnd.mockClear();\n jest.useFakeTimers();\n });\n\n afterAll(() => {\n jest.clearAllTimers();\n jest.useRealTimers();\n });\n\n const Demo = React.forwardRef(function Demo<\n ChatMessage extends SimpleType = string,\n ParsedMessage extends SimpleType = string,\n Input = ChatInput,\n Output = string,\n >({ provider, ...config }: XChatConfig, ref: any) {\n const { messages, parsedMessages, onRequest, onReload, isRequesting, abort } = useXChat({\n provider,\n ...config,\n });\n\n useImperativeHandle(ref, () => ({\n messages,\n parsedMessages,\n onRequest,\n onReload,\n isRequesting,\n abort,\n }));\n\n return (\n <>\n 
    {JSON.stringify(parsedMessages)}
    \n {\n onRequest(\n {\n query: e.target.value,\n } as Input,\n {\n extraInfo: {\n feedback: 'like',\n },\n },\n );\n }}\n />\n \n );\n });\n\n function getMessages(container: HTMLElement) {\n return JSON.parse(container.querySelector('pre')!.textContent!);\n }\n\n function expectMessage(message: T, status?: MessageStatus) {\n const obj: any = { message };\n if (status) {\n obj.status = status;\n }\n return expect.objectContaining(obj);\n }\n\n it('defaultMessages', async () => {\n const provider = new DefaultChatProvider({\n request: XRequest('http://localhost:8000/', {\n manual: true,\n }),\n });\n const { container } = render(\n [\n {\n message: 'default',\n },\n ]}\n />,\n );\n await waitFakeTimer();\n expect(getMessages(container)).toEqual([\n {\n id: 'default_0',\n message: 'default',\n status: 'local',\n },\n ]);\n });\n\n describe('requestPlaceholder', () => {\n it('static', () => {\n const provider = new DefaultChatProvider({\n request: XRequest('http://localhost:8000/', {\n manual: true,\n fetch: async () => {\n await sleep(1000);\n return Promise.resolve(new Response('{}'));\n },\n }),\n });\n const { container } = render();\n fireEvent.change(container.querySelector('input')!, { target: { value: 'little' } });\n\n expect(getMessages(container)).toEqual([\n expectMessage({ query: 'little' }, 'local'),\n expectMessage('bamboo', 'loading'),\n ]);\n });\n\n it('callback', async () => {\n const requestPlaceholder = jest.fn(() => 'light');\n const transformStream = new TransformStream();\n const provider = new DefaultChatProvider({\n request: XRequest('http://localhost:8000/', {\n manual: true,\n transformStream: transformStream,\n fetch: async () => {\n await sleep(1000);\n return Promise.resolve(new Response('{}'));\n },\n }),\n });\n const { container } = render(\n ,\n );\n await waitFakeTimer();\n fireEvent.change(container.querySelector('input')!, { target: { value: 'little' } });\n\n expect(requestPlaceholder).toHaveBeenCalledWith(\n { query: 'little' },\n {\n messages: [{ query: 'little' }],\n },\n );\n\n expect(getMessages(container)).toEqual([\n expectMessage({ query: 'little' }, 'local'),\n expectMessage('light', 'loading'),\n ]);\n });\n });\n\n describe('requestFallback', () => {\n it('static', async () => {\n const provider = new DefaultChatProvider({\n request: XRequest('http://localhost:8000/', {\n manual: true,\n fetch: async () => {\n throw new Error('failed');\n },\n }),\n });\n const { container } = render();\n\n await waitFakeTimer();\n fireEvent.change(container.querySelector('input')!, { target: { value: 'little' } });\n await waitFakeTimer();\n expect(getMessages(container)).toEqual([\n expectMessage({ query: 'little' }, 'local'),\n expectMessage('bamboo', 'error'),\n ]);\n });\n\n it('callback', async () => {\n const provider = new DefaultChatProvider({\n request: XRequest('http://localhost:8000/', {\n manual: true,\n fetch: async () => {\n throw new Error('failed');\n },\n }),\n });\n const requestFallback = jest.fn(async () => 'light');\n const ref = React.createRef();\n const { container } = render(\n ,\n );\n expect(ref.current).not.toBeNull();\n await waitFakeTimer();\n\n fireEvent.change(container.querySelector('input')!, { target: { value: 'little' } });\n ref.current.abort();\n await waitFakeTimer();\n\n expect(requestFallback).toHaveBeenCalledWith(\n { query: 'little' },\n {\n messageInfo: undefined,\n errorInfo: undefined,\n error: new Error('failed'),\n messages: [{ query: 'little' }],\n },\n );\n\n expect(getMessages(container)).toEqual([\n expectMessage({ query: 'little' }, 'local'),\n expectMessage('light', 'error'),\n ]);\n });\n });\n\n it('parser return multiple messages', async () => {\n const provider = new DefaultChatProvider({\n request: XRequest('http://localhost:8000/', {\n manual: true,\n }),\n });\n const { container } = render(\n [`0_${JSON.stringify(msg)}`, `1_${JSON.stringify(msg)}`]}\n />,\n );\n\n await waitFakeTimer();\n fireEvent.change(container.querySelector('input')!, { target: { value: 'light' } });\n await waitFakeTimer();\n\n expect(getMessages(container)).toEqual([\n expectMessage('0_{\"query\":\"light\"}', 'local'),\n expectMessage('1_{\"query\":\"light\"}', 'local'),\n ]);\n });\n\n it('should throw an error if onRequest,onReload,abort is called without an agent', async () => {\n const { result } = renderHook(() =>\n useXChat({\n defaultMessages: [{ message: 'Hello' }],\n }),\n );\n expect(() => result.current?.onRequest({ query: 'Hello' })).toThrow('provider is required');\n expect(() =>\n result.current?.onReload(\n 'key1',\n { query: 'Hello' },\n {\n extraInfo: {\n feedback: 'dislike',\n },\n },\n ),\n ).toThrow('provider is required');\n expect(() => result.current?.abort()).toThrow('provider is required');\n });\n\n it('should setMessage work successfully', async () => {\n const { result } = renderHook(() =>\n useXChat({\n defaultMessages: [{ message: 'Hello' }],\n }),\n );\n await sleep(100);\n result.current?.setMessage('default_0', { message: 'Hello2', extraInfo: { feedback: 'like' } });\n result.current?.setMessage('default_1', { message: 'Hello3' });\n expect(result.current?.messages.length).toBe(1);\n expect(result.current?.messages[0].message).toEqual('Hello2');\n });\n\n it('should reload, isRequesting work successfully', async () => {\n let count = 0;\n const provider = new DefaultChatProvider({\n request: XRequest('http://localhost:8000/', {\n manual: true,\n fetch: async () => {\n count = count + 1;\n let res = '{\"content\": \"bamboo\"}';\n if (count > 1) {\n res = '{\"content\": \"bamboo2\"}';\n }\n return Promise.resolve(\n new Response(res, {\n headers: {\n 'Content-Type': 'application/json',\n },\n }),\n );\n },\n }),\n });\n const ref = React.createRef();\n const { container } = render(\n ,\n );\n await sleep(200);\n fireEvent.change(container.querySelector('input')!, { target: { value: 'little' } });\n expect(ref.current?.isRequesting).toBe(true);\n await sleep(200);\n expect(ref.current?.isRequesting).toBe(false);\n expect(getMessages(container)).toEqual([\n expectMessage({ query: 'little' }, 'local'),\n expectMessage({ content: 'bamboo' }, 'success'),\n ]);\n\n ref.current.onReload(\n ref.current.parsedMessages[1].id,\n {},\n {\n extraInfo: {\n feedback: 'dislike',\n },\n },\n );\n expect(() => ref.current?.onReload('fake id', { query: 'Hello' })).toThrow(\n 'message [fake id] is not found',\n );\n await sleep(200);\n expect(getMessages(container)).toEqual([\n expectMessage({ query: 'little' }, 'local'),\n expectMessage({ content: 'bamboo2' }, 'success'),\n ]);\n });\n\n it('should chat messages store(dep conversationKey) work successfully', async () => {\n renderHook(() =>\n useXChat({\n defaultMessages: [{ message: 'Hello' }],\n conversationKey: 'conversation-1',\n }),\n );\n await sleep(100);\n const store = chatMessagesStoreHelper.get('conversation-1');\n expect(store).toBeTruthy();\n expect(store?.getMessages()).toEqual([{ id: 'default_0', message: 'Hello', status: 'local' }]);\n\n store?.addMessage({\n id: 'msg_1',\n message: 'Kitty',\n status: 'local',\n });\n expect(store?.getMessages().length).toBe(2);\n expect(\n store?.addMessage({\n id: 'msg_1',\n message: 'Kitty2',\n status: 'local',\n }),\n ).toBe(false);\n expect(store?.getMessages().length).toBe(2);\n\n store?.removeMessage('msg_1');\n expect(store?.getMessages().length).toBe(1);\n expect(store?.removeMessage('msg_2')).toBe(false);\n\n const messages = chatMessagesStoreHelper.getMessages('conversation-1');\n expect(messages).toEqual([{ id: 'default_0', message: 'Hello', status: 'local' }]);\n\n chatMessagesStoreHelper.delete('conversation-1');\n expect(chatMessagesStoreHelper.get('conversation-1')).toBeFalsy();\n });\n\n it('queueRequest should work without provider', async () => {\n const { result } = renderHook(() =>\n useXChat({\n defaultMessages: [{ message: 'Hello' }],\n }),\n );\n\n // queueRequest 不会抛出错误，它只是将消息加入队列\n expect(() => {\n result.current?.queueRequest(\n 'test-conversation',\n { messages: [{ role: 'user', content: 'Hello' }] },\n { extraInfo: { id: '1111' } },\n );\n }).not.toThrow();\n });\n\n it('queueRequest should queue messages correctly and processMessageQueue should handle queued messages', async () => {\n const provider = new DefaultChatProvider({\n request: XRequest('http://localhost:8000/', {\n manual: true,\n fetch: async () => {\n return Promise.resolve(new Response('{\"content\": \"test response\"}'));\n },\n }),\n });\n\n const { result } = renderHook(() => {\n const [activeConversationKey, setActiveConversationKey] = useState('test-conversation');\n return [\n useXChat({\n provider,\n conversationKey: activeConversationKey,\n defaultMessages: () => [{ message: 'Hello' }],\n }),\n setActiveConversationKey,\n ];\n });\n\n await waitFakeTimer();\n\n // 使用 queueRequest 将消息加入队列\n const [hookResult, setActiveConversationKey] = result.current as any;\n setActiveConversationKey('new-conversation');\n // 添加多条消息到队列\n hookResult.queueRequest('new-conversation', { query: 'queued message 1' });\n hookResult.queueRequest('test-conversation', { query: 'queued message 2' });\n hookResult.queueRequest('test-conversation', { query: 'queued message 2' });\n\n // 验证队列中的消息不会立即出现在 messages 中\n expect(hookResult.messages.length).toBe(1); // 只有默认消息\n\n // 等待 processMessageQueue 执行\n await waitFakeTimer();\n\n // 验证队列消息被处理（由于会话切换，原会话的队列应该被清空）\n expect(hookResult.messages.length).toBe(1); // 新会话只有默认消息\n });\n});\n" }, { "path": "packages/x-sdk/src/x-chat/__test__/store.test.ts", "content": "import { ChatMessagesStore } from '../store';\n\ndescribe('ChatMessagesStore', () => {\n let store: ChatMessagesStore<{ id: string; message: string }>;\n\n beforeEach(() => {\n store = new ChatMessagesStore<{ id: string; message: string }>(async () => []);\n jest.useFakeTimers();\n });\n\n afterEach(() => {\n store.destroy();\n jest.clearAllTimers();\n jest.useRealTimers();\n });\n\n describe('destroy method', () => {\n it('should clear throttle timer when destroy is called', () => {\n // 设置一些消息来触发throttle逻辑\n store.setMessages([{ id: '1', message: 'test' }]);\n\n // 快速连续调用以触发throttle\n store.setMessages([{ id: '1', message: 'test1' }]);\n store.setMessages([{ id: '1', message: 'test2' }]);\n\n // 验证throttleTimer被设置\n expect((store as any).throttleTimer).toBeTruthy();\n expect((store as any).pendingEmit).toBe(true);\n\n // 调用destroy\n store.destroy();\n\n // 验证状态被清理\n expect((store as any).throttleTimer).toBeNull();\n expect((store as any).pendingEmit).toBe(false);\n expect((store as any).listeners).toEqual([]);\n });\n\n it('should not throw error when destroy is called without active timer', () => {\n // 确保没有活跃的timer\n expect((store as any).throttleTimer).toBeNull();\n\n // 调用destroy不应抛出错误\n expect(() => {\n store.destroy();\n }).not.toThrow();\n\n // 验证状态被正确设置\n expect((store as any).throttleTimer).toBeNull();\n expect((store as any).pendingEmit).toBe(false);\n expect((store as any).listeners).toEqual([]);\n });\n\n it('should clear listeners array when destroy is called', () => {\n // 添加一些监听器\n const listener1 = jest.fn();\n const listener2 = jest.fn();\n\n store.subscribe(listener1);\n store.subscribe(listener2);\n\n expect((store as any).listeners).toHaveLength(2);\n\n // 调用destroy\n store.destroy();\n\n // 验证listeners被清空\n expect((store as any).listeners).toEqual([]);\n });\n });\n\n describe('throttledEmitListeners with pendingEmit', () => {\n it('should flush pending updates when throttle timer expires', () => {\n const listener = jest.fn();\n store.subscribe(listener);\n\n // 快速连续调用以触发throttle\n store.setMessages([{ id: '1', message: 'test1' }]);\n store.setMessages([{ id: '1', message: 'test2' }]);\n store.setMessages([{ id: '1', message: 'test3' }]);\n\n // 验证pendingEmit为true\n expect((store as any).pendingEmit).toBe(true);\n expect(listener).toHaveBeenCalledTimes(1); // 第一次立即触发\n\n // 快进时间让throttle timer触发\n jest.runAllTimers();\n\n // 验证pendingEmit被重置且监听器被再次调用\n expect((store as any).pendingEmit).toBe(false);\n expect(listener).toHaveBeenCalledTimes(2); // 第一次立即触发 + 第二次flush\n });\n\n it('should not flush pending updates when destroy is called before timer expires', () => {\n const listener = jest.fn();\n store.subscribe(listener);\n\n // 触发throttle\n store.setMessages([{ id: '1', message: 'test1' }]);\n store.setMessages([{ id: '1', message: 'test2' }]);\n\n expect((store as any).pendingEmit).toBe(true);\n expect(listener).toHaveBeenCalledTimes(1);\n\n // 在timer到期前调用destroy\n store.destroy();\n\n // 快进时间\n jest.runAllTimers();\n\n // 验证没有额外的监听器调用\n expect(listener).toHaveBeenCalledTimes(1);\n expect((store as any).pendingEmit).toBe(false);\n });\n });\n\n describe('subscribe cleanup', () => {\n it('should clear throttle timer when last listener unsubscribes', () => {\n const listener = jest.fn();\n const unsubscribe = store.subscribe(listener);\n\n // 触发throttle\n store.setMessages([{ id: '1', message: 'test' }]);\n store.setMessages([{ id: '1', message: 'test2' }]);\n\n expect((store as any).throttleTimer).toBeTruthy();\n expect((store as any).pendingEmit).toBe(true);\n\n // 取消订阅最后一个监听器\n unsubscribe();\n\n // 验证timer被清理\n expect((store as any).throttleTimer).toBeNull();\n expect((store as any).pendingEmit).toBe(false);\n });\n });\n\n describe('constructor and initialization', () => {\n it('should handle defaultMessages error gracefully', async () => {\n const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation();\n const error = new Error('Failed to fetch messages');\n\n // 创建一个同步函数，立即返回拒绝的 Promise\n const defaultMessages = () => {\n return Promise.reject(error);\n };\n\n const testStore = new ChatMessagesStore<{ id: string; message: string }>(defaultMessages);\n\n // 等待微任务队列，让 Promise 拒绝被处理\n await Promise.resolve();\n\n // 验证错误被捕获并记录到控制台\n expect(consoleWarnSpy).toHaveBeenCalledWith('Failed to initialize messages:', error);\n\n // 验证消息数组为空（错误后的回退状态）\n expect(testStore.getMessages()).toEqual([]);\n\n // 清理\n consoleWarnSpy.mockRestore();\n testStore.destroy();\n });\n\n it('should handle defaultMessages error when store is destroyed before completion', async () => {\n const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation();\n let rejectPromise: (error: Error) => void;\n\n // 创建一个可以手动控制的 Promise\n const defaultMessages = () => {\n return new Promise((_, reject) => {\n rejectPromise = reject;\n });\n };\n\n const testStore = new ChatMessagesStore<{ id: string; message: string }>(defaultMessages);\n\n // 立即销毁 store（在 Promise 解决前）\n testStore.destroy();\n\n // 现在拒绝 Promise（在销毁后）\n rejectPromise!(new Error('Network error'));\n\n // 等待微任务队列，让 Promise 拒绝被处理\n await Promise.resolve();\n\n // 验证控制台警告被调用（错误处理逻辑执行了）\n expect(consoleWarnSpy).toHaveBeenCalledWith(\n 'Failed to initialize messages:',\n expect.any(Error),\n );\n // 清理\n consoleWarnSpy.mockRestore();\n });\n });\n\n describe('edge cases', () => {\n it('should handle multiple destroy calls gracefully', () => {\n // 第一次调用\n store.destroy();\n\n // 第二次调用不应抛出错误\n expect(() => {\n store.destroy();\n }).not.toThrow();\n\n // 第三次调用\n expect(() => {\n store.destroy();\n }).not.toThrow();\n });\n\n it('should handle destroy with null throttleTimer', () => {\n // 确保throttleTimer为null\n expect((store as any).throttleTimer).toBeNull();\n\n // 设置pendingEmit为true\n (store as any).pendingEmit = true;\n\n // 调用destroy\n store.destroy();\n\n // 验证pendingEmit被重置\n expect((store as any).pendingEmit).toBe(false);\n });\n });\n});\n" }, { "path": "packages/x-sdk/src/x-chat/__test__/useSyncState.test.tsx", "content": "import { act, renderHook } from '../../../tests/utils';\nimport useSyncState from '../useSyncState';\n\ndescribe('useSyncState', () => {\n it('should initialize state with default value', () => {\n const { result } = renderHook(() => useSyncState(0));\n\n const [state] = result.current!;\n\n expect(state).toBe(0);\n });\n\n it('should initialize state with default value by getter', () => {\n const { result } = renderHook(() => useSyncState(() => 0));\n\n const [state] = result.current!;\n\n expect(state).toBe(0);\n });\n\n it('should update state using setState', () => {\n const { result } = renderHook(() => useSyncState(0));\n const [, setState] = result.current!;\n\n act(() => {\n setState(10);\n });\n\n const [state] = result.current!;\n expect(state).toBe(10);\n });\n\n it('should update state using setState by setter', () => {\n const { result } = renderHook(() => useSyncState(0));\n const [, setState] = result.current!;\n\n act(() => {\n setState((prev) => prev + 1);\n });\n\n const [state] = result.current!;\n expect(state).toBe(1);\n });\n\n it('should get the current state by getState', () => {\n const { result } = renderHook(() => useSyncState(0));\n const [, setState, getState] = result.current!;\n\n act(() => {\n setState(5);\n });\n\n expect(getState()).toBe(5);\n\n act(() => {\n setState((prev) => prev + 5);\n });\n\n expect(getState()).toBe(10);\n });\n\n it('should trigger re-renders when state update', () => {\n const { result } = renderHook(() => useSyncState(0));\n\n const [, setState] = result.current!;\n\n const prevState = result?.current?.[0];\n\n act(() => {\n setState(20);\n });\n\n const nextState = result?.current?.[0];\n expect(nextState).not.toBe(prevState);\n expect(nextState).toBe(20);\n });\n});\n" }, { "path": "packages/x-sdk/src/x-chat/index.ts", "content": "import { useEvent } from '@rc-component/util';\nimport React, { useEffect, useState } from 'react';\nimport type { AnyObject } from '../_util/type';\nimport { AbstractChatProvider } from '../chat-providers';\nimport { ConversationData } from '../x-conversations';\nimport { AbstractXRequestClass } from '../x-request';\nimport type { SSEOutput } from '../x-stream';\nimport { ConversationKey, useChatStore } from './store';\n\nexport type SimpleType = string | number | boolean | object;\n\nenum MessageStatusEnum {\n local = 'local',\n loading = 'loading',\n updating = 'updating',\n success = 'success',\n error = 'error',\n abort = 'abort',\n}\n\nexport type MessageStatus = `${MessageStatusEnum}`;\n\ntype RequestPlaceholderFn = (\n requestParams: Partial,\n info: { messages: Message[] },\n) => Message;\n\ntype RequestFallbackFn = (\n requestParams: Partial,\n info: { error: Error; errorInfo?: any; messages: Message[]; messageInfo: MessageInfo },\n) => Message | Promise;\n\nexport type RequestParams = {\n [Key: PropertyKey]: Message;\n} & AnyObject;\n\nexport interface XChatConfig<\n ChatMessage extends SimpleType = string,\n BubbleMessage extends SimpleType = ChatMessage,\n Input = ChatMessage,\n Output = ChatMessage,\n> {\n provider?: AbstractChatProvider;\n conversationKey?: ConversationData['key'];\n defaultMessages?:\n | DefaultMessageInfo[]\n | ((info: {\n conversationKey?: ConversationData['key'];\n }) => Promise[]>)\n | ((info?: { conversationKey?: ConversationData['key'] }) => DefaultMessageInfo[]);\n /** Convert agent message to bubble usage message type */\n parser?: (message: ChatMessage) => BubbleMessage | BubbleMessage[];\n requestPlaceholder?: ChatMessage | RequestPlaceholderFn;\n requestFallback?: ChatMessage | RequestFallbackFn, ChatMessage>;\n}\n\nexport interface MessageInfo {\n id: number | string;\n message: Message;\n status: MessageStatus;\n extraInfo?: AnyObject;\n}\n\nexport type DefaultMessageInfo = Pick, 'message'> &\n Partial, 'message'>>;\n\nexport type RequestResultObject = {\n message: Message | Message[];\n status: MessageStatus;\n};\n\nexport type StandardRequestResult = Omit<\n RequestResultObject,\n 'message' | 'status'\n> & {\n message: Message;\n status?: MessageStatus;\n};\n\nfunction toArray(item: T | T[]): T[] {\n return Array.isArray(item) ? item : [item];\n}\n\nconst IsRequestingMap = new Map();\nconst generateConversationKey = () => Symbol('ConversationKey');\n\nexport default function useXChat<\n ChatMessage extends SimpleType = string,\n ParsedMessage extends SimpleType = ChatMessage,\n Input = RequestParams,\n Output = SSEOutput,\n>(config: XChatConfig) {\n const {\n defaultMessages,\n requestFallback,\n requestPlaceholder,\n parser,\n provider,\n conversationKey: originalConversationKey,\n } = config;\n\n // ========================= Agent Messages =========================\n const idRef = React.useRef(0);\n const requestHandlerRef =\n React.useRef>(undefined);\n const [isRequesting, setIsRequesting] = useState(false);\n\n const [conversationKey, setConversationKey] = useState(\n originalConversationKey || generateConversationKey(),\n );\n\n // 消息队列：存储会话切换后的待发送消息\n const messageQueueRef = React.useRef<\n Map<\n string | symbol,\n Array<{\n requestParams: Partial;\n opts?: { extraInfo: AnyObject };\n }>\n >\n >(new Map());\n\n useEffect(() => {\n if (originalConversationKey) {\n setConversationKey(originalConversationKey);\n }\n }, [originalConversationKey]);\n\n const {\n messages,\n isDefaultMessagesRequesting,\n removeMessage,\n setMessages,\n getMessages,\n setMessage,\n } = useChatStore>(async () => {\n const messageList =\n typeof defaultMessages === 'function'\n ? await defaultMessages({ conversationKey: originalConversationKey })\n : defaultMessages;\n return (messageList || []).map((info, index) => ({\n id: `default_${index}`,\n status: 'local',\n ...info,\n }));\n }, conversationKey);\n\n const createMessage = (message: ChatMessage, status: MessageStatus, extraInfo?: AnyObject) => {\n const msg: MessageInfo = {\n id: `msg_${idRef.current}`,\n message,\n status,\n };\n if (extraInfo) {\n msg.extraInfo = extraInfo;\n }\n idRef.current += 1;\n\n return msg;\n };\n\n // ========================= BubbleMessages =========================\n const parsedMessages = React.useMemo(() => {\n const list: MessageInfo[] = [];\n\n messages.forEach((agentMsg) => {\n const rawParsedMsg = parser ? parser(agentMsg.message) : agentMsg.message;\n const bubbleMsgs = toArray(rawParsedMsg as ParsedMessage);\n\n bubbleMsgs.forEach((bubbleMsg, bubbleMsgIndex) => {\n let key = agentMsg.id;\n if (bubbleMsgs.length > 1) {\n key = `${key}_${bubbleMsgIndex}`;\n }\n\n list.push({\n id: key,\n message: bubbleMsg,\n status: agentMsg.status,\n });\n });\n });\n\n return list;\n }, [messages]);\n\n // ============================ Request =============================\n const getFilteredMessages = (msgs: MessageInfo[]) =>\n msgs.filter((info) => info.status !== 'loading').map((info) => info.message);\n\n provider?.injectGetMessages(() => {\n return getFilteredMessages(getMessages());\n });\n requestHandlerRef.current = provider?.request;\n // For agent to use. Will filter out loading and error message\n const getRequestMessages = () => getFilteredMessages(getMessages());\n\n const innerOnRequest = (\n requestParams: Partial,\n opts?: {\n updatingId?: number | string;\n reload?: boolean;\n extraInfo?: AnyObject;\n },\n ) => {\n if (!provider) {\n return;\n }\n const { updatingId, reload } = opts || {};\n let loadingMsgId: number | string | null | undefined = null;\n const localMessage = provider.transformLocalMessage(requestParams);\n const messages = (Array.isArray(localMessage) ? localMessage : [localMessage]).map((message) =>\n createMessage(message, 'local', opts?.extraInfo),\n );\n if (reload) {\n loadingMsgId = updatingId;\n setMessages((ori: MessageInfo[]) => {\n const nextMessages = [...ori];\n if (requestPlaceholder) {\n let placeholderMsg: ChatMessage;\n if (typeof requestPlaceholder === 'function') {\n // typescript has bug that not get real return type when use `typeof function` check\n placeholderMsg = (requestPlaceholder as RequestPlaceholderFn)(\n requestParams,\n {\n messages: getFilteredMessages(nextMessages),\n },\n );\n } else {\n placeholderMsg = requestPlaceholder;\n }\n nextMessages.forEach((info) => {\n if (info.id === updatingId) {\n info.status = 'loading';\n info.message = placeholderMsg;\n if (opts?.extraInfo) {\n info.extraInfo = opts?.extraInfo;\n }\n }\n });\n }\n return nextMessages;\n });\n } else {\n // Add placeholder message\n\n setMessages((ori: MessageInfo[]) => {\n let nextMessages = [...ori, ...messages];\n if (requestPlaceholder) {\n let placeholderMsg: ChatMessage;\n if (typeof requestPlaceholder === 'function') {\n // typescript has bug that not get real return type when use `typeof function` check\n placeholderMsg = (requestPlaceholder as RequestPlaceholderFn)(\n requestParams,\n {\n messages: getFilteredMessages(nextMessages),\n },\n );\n } else {\n placeholderMsg = requestPlaceholder;\n }\n const loadingMsg = createMessage(placeholderMsg, 'loading');\n loadingMsgId = loadingMsg.id;\n\n nextMessages = [...nextMessages, loadingMsg];\n }\n\n return nextMessages;\n });\n }\n\n // Request\n let updatingMsgId: number | string | null | undefined = null;\n const updateMessage = (\n status: MessageStatus,\n chunk: Output,\n chunks: Output[],\n responseHeaders: Headers,\n ) => {\n let msg = getMessages().find((info) => info.id === updatingMsgId);\n if (!msg) {\n if (reload && updatingId) {\n msg = getMessages().find((info) => info.id === updatingId);\n if (msg) {\n msg.status = status;\n msg.message = provider.transformMessage({ chunk, status, chunks, responseHeaders });\n setMessages((ori: MessageInfo[]) => {\n return [...ori];\n });\n updatingMsgId = msg.id;\n }\n } else {\n // Create if not exist\n const transformData = provider.transformMessage({\n chunk,\n status,\n chunks,\n responseHeaders,\n });\n msg = createMessage(transformData, status);\n setMessages((ori: MessageInfo[]) => {\n const oriWithoutPending = ori.filter(\n (info: { id: string | number | null | undefined }) => info.id !== loadingMsgId,\n );\n return [...oriWithoutPending, msg!];\n });\n updatingMsgId = msg.id;\n }\n } else {\n // Update directly\n setMessages((ori: MessageInfo[]) => {\n return ori.map((info: MessageInfo) => {\n if (info.id === updatingMsgId) {\n const transformData = provider.transformMessage({\n originMessage: info.message,\n chunk,\n chunks,\n status,\n responseHeaders,\n });\n return {\n ...info,\n message: transformData,\n status,\n };\n }\n return info;\n });\n });\n }\n msg = getMessages().find((info) => info.id === updatingMsgId) || msg;\n return msg;\n };\n provider.injectRequest({\n onUpdate: (chunk: Output, headers: Headers) => {\n const msg = updateMessage('updating', chunk, [], headers);\n return msg;\n },\n onSuccess: (chunks: Output[], headers: Headers) => {\n setIsRequesting(false);\n conversationKey && IsRequestingMap.delete(conversationKey);\n const msg = updateMessage('success', undefined as Output, chunks, headers);\n return msg;\n },\n onError: async (error: Error, errorInfo: any) => {\n setIsRequesting(false);\n conversationKey && IsRequestingMap.delete(conversationKey);\n let fallbackMsg: ChatMessage;\n if (requestFallback) {\n // Update as error\n if (typeof requestFallback === 'function') {\n // typescript has bug that not get real return type when use `typeof function` check\n const messages = getRequestMessages();\n const msg = getMessages().find(\n (info) => info.id === loadingMsgId || info.id === updatingMsgId,\n );\n\n fallbackMsg = await (\n requestFallback as RequestFallbackFn, ChatMessage>\n )(requestParams, {\n error,\n errorInfo,\n messageInfo: msg as MessageInfo,\n messages,\n });\n } else {\n fallbackMsg = requestFallback;\n }\n setMessages((ori: MessageInfo[]) => [\n ...ori.filter(\n (info: { id: string | number | null | undefined }) =>\n info.id !== loadingMsgId && info.id !== updatingMsgId,\n ),\n createMessage(fallbackMsg, error.name === 'AbortError' ? 'abort' : 'error'),\n ]);\n } else {\n // Remove directly\n fallbackMsg = getMessages().find(\n (info) => info.id !== loadingMsgId && info.id !== updatingMsgId,\n ) as ChatMessage;\n setMessages((ori: MessageInfo[]) => {\n return ori.map((info: MessageInfo) => {\n if (info.id === loadingMsgId || info.id === updatingMsgId) {\n return {\n ...info,\n status: error.name === 'AbortError' ? 'abort' : 'error',\n };\n }\n return info;\n });\n });\n }\n return fallbackMsg;\n },\n });\n setIsRequesting(true);\n conversationKey && IsRequestingMap.set(conversationKey, true);\n provider.request.run(provider.transformParams(requestParams, provider.request.options));\n };\n\n const onRequest = useEvent((requestParams: Partial, opts?: { extraInfo: AnyObject }) => {\n if (!provider) {\n throw new Error('provider is required');\n }\n innerOnRequest(requestParams, opts);\n });\n\n const onReload = (\n id: string | number,\n requestParams: Partial,\n opts?: { extraInfo: AnyObject },\n ) => {\n if (!provider) {\n throw new Error('provider is required');\n }\n if (!id || !getMessages().find((info) => info.id === id)) {\n throw new Error(`message [${id}] is not found`);\n }\n innerOnRequest(requestParams, {\n updatingId: id,\n reload: true,\n extraInfo: opts?.extraInfo,\n });\n };\n\n // 会话切换完成后处理消息队列\n const processMessageQueue = React.useCallback(() => {\n const requestParamsList = messageQueueRef.current.get(conversationKey);\n if (requestParamsList && requestParamsList.length > 0) {\n const timer = setTimeout(() => {\n clearTimeout(timer);\n requestParamsList.forEach(({ requestParams, opts }) => {\n onRequest(requestParams, opts);\n });\n messageQueueRef.current.delete(conversationKey);\n });\n }\n }, [conversationKey, onRequest]);\n\n useEffect(() => {\n if (!isDefaultMessagesRequesting) {\n processMessageQueue();\n }\n }, [isDefaultMessagesRequesting]);\n\n // 添加消息到队列，等待会话切换完成后发送\n const queueRequest = (\n currentConversationKey: string | symbol,\n requestParams: Partial,\n opts?: { extraInfo: AnyObject },\n ) => {\n if (!messageQueueRef.current.has(currentConversationKey)) {\n messageQueueRef.current.set(currentConversationKey, []);\n }\n messageQueueRef.current.get(currentConversationKey)!.push({\n requestParams,\n opts,\n });\n };\n\n return {\n onRequest,\n isDefaultMessagesRequesting,\n messages,\n parsedMessages,\n setMessages,\n removeMessage,\n setMessage,\n abort: () => {\n if (!provider) {\n throw new Error('provider is required');\n }\n requestHandlerRef.current?.abort();\n },\n isRequesting: conversationKey ? IsRequestingMap?.get(conversationKey) || false : isRequesting,\n onReload,\n queueRequest,\n } as const;\n}\n" }, { "path": "packages/x-sdk/src/x-chat/store.ts", "content": "import { useEffect, useState, useSyncExternalStore } from 'react';\n\nexport type ConversationKey = string | number | symbol;\n\nexport const chatMessagesStoreHelper = {\n _chatMessagesStores: new Map>(),\n get: (conversationKey: ConversationKey) => {\n return chatMessagesStoreHelper._chatMessagesStores.get(conversationKey);\n },\n set: (key: ConversationKey, store: ChatMessagesStore) => {\n chatMessagesStoreHelper._chatMessagesStores.set(key, store);\n },\n delete: (key: ConversationKey) => {\n chatMessagesStoreHelper._chatMessagesStores.delete(key);\n },\n getMessages: (conversationKey: ConversationKey) => {\n const store = chatMessagesStoreHelper._chatMessagesStores.get(conversationKey);\n return store?.getMessages();\n },\n};\n\nexport class ChatMessagesStore {\n private listeners: (() => void)[] = [];\n private conversationKey: ConversationKey | undefined;\n private snapshotResult: {\n messages: T[];\n isDefaultMessagesRequesting: boolean;\n } = {\n messages: [],\n isDefaultMessagesRequesting: false,\n };\n // Throttle state for preventing \"Maximum update depth exceeded\" during streaming\n private throttleTimer: ReturnType | null = null;\n private pendingEmit = false;\n private readonly throttleInterval: number = 50;\n // 竞态条件保护\n private isDestroyed = false;\n\n private emitListeners() {\n this.listeners.forEach((listener) => {\n listener();\n });\n }\n\n private throttledEmitListeners() {\n if (!this.throttleTimer) {\n // Leading edge: execute immediately\n this.emitListeners();\n this.pendingEmit = false;\n\n this.throttleTimer = setTimeout(() => {\n this.throttleTimer = null;\n // Trailing edge: flush pending updates\n if (this.pendingEmit) {\n this.emitListeners();\n this.pendingEmit = false;\n }\n }, this.throttleInterval);\n } else {\n this.pendingEmit = true;\n }\n }\n\n constructor(defaultMessages: () => Promise, conversationKey?: ConversationKey) {\n // 初始化消息，处理同步和异步情况\n this.initializeMessages(defaultMessages, (value) => {\n this.setSnapshotResult('isDefaultMessagesRequesting', value);\n this.emitListeners();\n });\n\n // 注册到全局存储助手\n if (conversationKey) {\n this.conversationKey = conversationKey;\n chatMessagesStoreHelper.set(this.conversationKey, this);\n }\n }\n\n private async initializeMessages(\n defaultMessages: () => Promise,\n setDefaultMessagesRequesting: (defaultValueLoading: boolean) => void,\n ) {\n try {\n setDefaultMessagesRequesting(true);\n const messages = await defaultMessages();\n\n // 检查是否已被销毁，避免竞态条件\n if (!this.isDestroyed) {\n this.setMessagesInternal(messages, false);\n }\n } catch (error) {\n // 错误处理：保持空数组状态，避免应用崩溃\n console.warn('Failed to initialize messages:', error);\n if (!this.isDestroyed) {\n this.setMessagesInternal([], false);\n }\n } finally {\n setDefaultMessagesRequesting(false);\n }\n }\n private setSnapshotResult = (\n key: K,\n value: (typeof this.snapshotResult)[K],\n ) => {\n this.snapshotResult = {\n ...this.snapshotResult,\n [key]: value,\n };\n };\n private setMessagesInternal = (messages: T[] | ((ori: T[]) => T[]), throttle = true) => {\n let list: T[];\n if (typeof messages === 'function') {\n list = messages(this.snapshotResult.messages);\n } else {\n list = messages as T[];\n }\n this.setSnapshotResult('messages', list);\n\n if (throttle) {\n this.throttledEmitListeners();\n } else {\n this.emitListeners();\n }\n return true;\n };\n\n setMessages = (messages: T[] | ((ori: T[]) => T[])) => {\n return this.setMessagesInternal(messages, true);\n };\n\n getMessages = () => {\n return this.snapshotResult.messages;\n };\n\n getMessage = (id: string | number) => {\n return this.getMessages().find((item) => item.id === id);\n };\n\n addMessage = (message: T) => {\n const exist = this.getMessage(message.id);\n if (!exist) {\n this.setMessages([...this.snapshotResult.messages, message]);\n return true;\n }\n return false;\n };\n\n setMessage = (id: string | number, message: Partial | ((message: T) => Partial)) => {\n const originMessage = this.getMessage(id);\n if (originMessage) {\n const mergeMessage = typeof message === 'function' ? message(originMessage) : message;\n Object.assign(originMessage, mergeMessage);\n this.setMessages([...this.snapshotResult.messages]);\n return true;\n }\n return false;\n };\n\n removeMessage = (id: string | number) => {\n const index = this.getMessages().findIndex((item) => item.id === id);\n if (index !== -1) {\n this.snapshotResult.messages.splice(index, 1);\n this.setMessages([...this.getMessages()]);\n return true;\n }\n return false;\n };\n\n getSnapshot = () => {\n return this.snapshotResult;\n };\n\n subscribe = (callback: () => void) => {\n this.listeners.push(callback);\n return () => {\n this.listeners = this.listeners.filter((listener) => listener !== callback);\n // Clean up throttle timer when no listeners remain to prevent memory leaks\n // and \"setState on unmounted component\" warnings\n if (this.listeners.length === 0) {\n if (this.throttleTimer) {\n clearTimeout(this.throttleTimer);\n this.throttleTimer = null;\n }\n this.pendingEmit = false;\n }\n };\n };\n\n /**\n * Clean up resources (throttle timer) when the store is no longer needed.\n * Should be called when the component unmounts or the store is disposed.\n */\n destroy = () => {\n this.isDestroyed = true;\n if (this.throttleTimer) {\n clearTimeout(this.throttleTimer);\n this.throttleTimer = null;\n }\n this.pendingEmit = false;\n this.listeners = [];\n };\n}\n\nexport function useChatStore(\n defaultValue: () => Promise,\n conversationKey: ConversationKey,\n) {\n const createStore = () => {\n if (chatMessagesStoreHelper.get(conversationKey)) {\n return chatMessagesStoreHelper.get(conversationKey) as ChatMessagesStore;\n }\n\n const store = new ChatMessagesStore(defaultValue, conversationKey);\n return store;\n };\n const [store, setStore] = useState(createStore);\n\n useEffect(() => {\n setStore(createStore());\n }, [conversationKey]);\n\n const { messages, isDefaultMessagesRequesting } = useSyncExternalStore(\n store.subscribe,\n store.getSnapshot,\n store.getSnapshot,\n );\n\n return {\n messages,\n isDefaultMessagesRequesting,\n addMessage: store.addMessage,\n removeMessage: store.removeMessage,\n setMessage: store.setMessage,\n getMessage: store.getMessage,\n setMessages: store.setMessages,\n getMessages: store.getMessages,\n };\n}\n" }, { "path": "packages/x-sdk/src/x-chat/useSyncState.ts", "content": "import React from 'react';\n\ntype Getter = () => T;\ntype Setter = (pre: T) => T;\n\nexport default function useSyncState(defaultValue: T | Getter) {\n const [, forceUpdate] = React.useState(0);\n\n const stateRef = React.useRef(\n typeof defaultValue === 'function' ? (defaultValue as Getter)() : defaultValue,\n );\n\n const setState = React.useCallback((action: React.SetStateAction) => {\n stateRef.current =\n typeof action === 'function' ? (action as Setter)(stateRef.current) : action;\n\n forceUpdate((prev) => prev + 1);\n }, []);\n\n const getState: Getter = React.useCallback(() => stateRef.current, []);\n\n return [stateRef.current, setState, getState] as const;\n}\n" }, { "path": "packages/x-sdk/src/x-conversations/__test__/index.test.tsx", "content": "import React, { useImperativeHandle } from 'react';\nimport { render, sleep } from '../../../tests/utils';\nimport useXConversations, { ConversationData } from '../index';\nimport { conversationStoreHelper } from '../store';\n\ndescribe('useXConversations tests', () => {\n const requestNeverEnd = jest.fn(() => {});\n\n beforeAll(() => {\n requestNeverEnd.mockClear();\n jest.useFakeTimers();\n });\n\n afterAll(() => {\n jest.clearAllTimers();\n jest.useRealTimers();\n });\n\n const createDemo = () =>\n React.forwardRef((config: any, ref: any) => {\n const {\n conversations,\n activeConversationKey,\n setActiveConversationKey,\n addConversation,\n removeConversation,\n setConversation,\n getConversation,\n setConversations,\n getMessages,\n } = useXConversations({\n defaultConversations: config.defaultConversations || [],\n defaultActiveConversationKey: config.defaultActiveConversationKey,\n });\n\n useImperativeHandle(ref, () => ({\n conversations,\n activeConversationKey,\n setActiveConversationKey,\n addConversation,\n removeConversation,\n setConversation,\n getConversation,\n setConversations,\n getMessages,\n }));\n return (\n <>\n
      \n {conversations.map((item) => (\n
    • {item.label}
      • \n ))}\n
    \n
    {activeConversationKey}
    \n \n );\n });\n\n const Demo = createDemo();\n\n it('should init with defaultConversations', async () => {\n const list: ConversationData[] = [\n {\n key: '1',\n label: 'Chat 1',\n },\n ];\n const ref = React.createRef<{ conversations: ConversationData[] }>();\n render();\n expect(ref.current?.conversations?.length).toEqual(1);\n expect(ref.current?.conversations).toEqual(list);\n });\n\n it('should init with defaultActiveConversationKey', async () => {\n const list: ConversationData[] = [\n {\n key: '1',\n label: 'Chat 1',\n },\n {\n key: '2',\n label: 'Chat 2',\n },\n ];\n const ref = React.createRef();\n const { getByTestId } = render(\n ,\n );\n expect(getByTestId('active-key').textContent).toBe('2');\n expect(ref.current?.activeConversationKey).toBe('2');\n });\n\n it('should addConversation, setConversation, removeConversation, getConversation work correctly', async () => {\n const list: ConversationData[] = [\n {\n key: '1',\n label: 'Chat 1',\n },\n ];\n const ref = React.createRef();\n const { queryByText } = render();\n\n const conversation = ref.current?.getConversation('1');\n expect(conversation).toEqual(list[0]);\n\n ref.current?.addConversation({ key: '1', label: 'Chat 1' });\n ref.current?.addConversation({ key: '2', label: 'Chat 2' });\n // wait for component rerender\n await sleep(500);\n expect(ref.current?.conversations?.length).toEqual(2);\n expect(queryByText('Chat 2')).toBeTruthy();\n\n ref.current?.setConversation('20', { key: '20', label: 'Chat 30' });\n ref.current?.setConversation('2', { key: '2', label: 'Chat 3' });\n await sleep(500);\n expect(queryByText('Chat 3')).toBeTruthy();\n\n ref.current?.removeConversation('30');\n ref.current?.removeConversation('2');\n await sleep(500);\n expect(ref.current?.conversations?.length).toEqual(1);\n expect(queryByText('Chat 3')).not.toBeTruthy();\n });\n\n it('should support multiple instance in a context', async () => {\n const ref = React.createRef<{ conversations: ConversationData[] }>();\n const ref2 = React.createRef<{ conversations: ConversationData[] }>();\n render(\n <>\n \n \n ,\n );\n expect(ref.current?.conversations?.length).toEqual(1);\n expect(ref2.current?.conversations?.length).toEqual(2);\n });\n\n it('should get conversation by conversationKey successfully', async () => {\n const list: ConversationData[] = [\n {\n key: '1',\n label: 'Chat 1',\n },\n ];\n await sleep(500);\n const ref = React.createRef();\n const Demo2 = createDemo();\n render();\n await sleep(500);\n const conversation = conversationStoreHelper.getConversation('1');\n expect(conversation).toEqual(list[0]);\n });\n\n it('should set and get activeConversationKey correctly', async () => {\n const list: ConversationData[] = [\n { key: '1', label: 'Chat 1' },\n { key: '2', label: 'Chat 2' },\n ];\n const ref = React.createRef();\n const { getByTestId } = render();\n\n expect(ref.current?.activeConversationKey).toBe('');\n\n ref.current?.setActiveConversationKey('1');\n await sleep(500);\n expect(ref.current?.activeConversationKey).toBe('1');\n expect(getByTestId('active-key').textContent).toBe('1');\n\n ref.current?.setActiveConversationKey('2');\n await sleep(500);\n expect(ref.current?.activeConversationKey).toBe('2');\n expect(getByTestId('active-key').textContent).toBe('2');\n });\n\n it('should addConversation with prepend placement', async () => {\n const list: ConversationData[] = [{ key: '1', label: 'Chat 1' }];\n const ref = React.createRef();\n render();\n\n ref.current?.addConversation({ key: '2', label: 'Chat 2' }, 'prepend');\n await sleep(500);\n\n expect(ref.current?.conversations?.length).toEqual(2);\n expect(ref.current?.conversations[0].key).toBe('2');\n expect(ref.current?.conversations[1].key).toBe('1');\n });\n\n it('should addConversation with append placement (default)', async () => {\n const list: ConversationData[] = [{ key: '1', label: 'Chat 1' }];\n const ref = React.createRef();\n render();\n\n ref.current?.addConversation({ key: '2', label: 'Chat 2' }, 'append');\n await sleep(500);\n\n expect(ref.current?.conversations?.length).toEqual(2);\n expect(ref.current?.conversations[0].key).toBe('1');\n expect(ref.current?.conversations[1].key).toBe('2');\n });\n\n it('should setConversations replace all conversations', async () => {\n const initialList: ConversationData[] = [\n { key: '1', label: 'Chat 1' },\n { key: '2', label: 'Chat 2' },\n ];\n const newList: ConversationData[] = [\n { key: '3', label: 'Chat 3' },\n { key: '4', label: 'Chat 4' },\n ];\n const ref = React.createRef();\n render();\n\n expect(ref.current?.conversations?.length).toEqual(2);\n\n ref.current?.setConversations(newList);\n await sleep(500);\n\n expect(ref.current?.conversations?.length).toEqual(2);\n expect(ref.current?.conversations).toEqual(newList);\n expect(ref.current?.conversations.some((c: ConversationData) => c.key === '1')).toBe(false);\n expect(ref.current?.conversations.some((c: ConversationData) => c.key === '3')).toBe(true);\n });\n\n it('should getMessages return messages for conversation', async () => {\n const list: ConversationData[] = [{ key: 'test-conversation', label: 'Test Chat' }];\n const ref = React.createRef();\n render();\n\n const messages = ref.current?.getMessages('test-conversation');\n // getMessages should return array or undefined when no chat store exists\n expect(messages === undefined || Array.isArray(messages)).toBe(true);\n });\n\n it('should not add duplicate conversation', async () => {\n const list: ConversationData[] = [{ key: '1', label: 'Chat 1' }];\n const ref = React.createRef();\n render();\n\n const result = ref.current?.addConversation({ key: '1', label: 'Duplicate Chat' });\n await sleep(500);\n\n expect(result).toBe(false);\n expect(ref.current?.conversations?.length).toEqual(1);\n expect(ref.current?.conversations[0].label).toBe('Chat 1');\n });\n\n it('should return false when setting non-existent conversation', async () => {\n const list: ConversationData[] = [{ key: '1', label: 'Chat 1' }];\n const ref = React.createRef();\n render();\n\n const result = ref.current?.setConversation('non-existent', {\n key: 'non-existent',\n label: 'New Chat',\n });\n expect(result).toBe(false);\n });\n\n it('should return false when removing non-existent conversation', async () => {\n const list: ConversationData[] = [{ key: '1', label: 'Chat 1' }];\n const ref = React.createRef();\n render();\n\n const result = ref.current?.removeConversation('non-existent');\n expect(result).toBe(false);\n });\n});\n" }, { "path": "packages/x-sdk/src/x-conversations/index.ts", "content": "import { useEffect, useState, useSyncExternalStore } from 'react';\nimport { AnyObject } from '../_util/type';\nimport { ConversationStore } from './store';\n\nexport interface ConversationData extends AnyObject {\n key: string;\n}\n\ninterface XConversationConfig {\n defaultConversations?: ConversationData[];\n defaultActiveConversationKey?: string;\n}\n\nexport default function useXConversations(config: XConversationConfig) {\n const [store] = useState(() => {\n const store = new ConversationStore(\n config?.defaultConversations || [],\n config?.defaultActiveConversationKey || '',\n );\n return store;\n });\n\n useEffect(() => {\n return () => {\n store.destroy();\n };\n }, []);\n\n const conversations = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);\n const activeConversationKey = useSyncExternalStore(\n store.subscribe,\n store.getActiveConversationKey,\n store.getActiveConversationKey,\n );\n\n return {\n conversations,\n activeConversationKey: activeConversationKey,\n setActiveConversationKey: store.setActiveConversationKey,\n addConversation: store.addConversation,\n removeConversation: store.removeConversation,\n setConversation: store.setConversation,\n getConversation: store.getConversation,\n setConversations: store.setConversations,\n getMessages: store.getMessages,\n };\n}\n" }, { "path": "packages/x-sdk/src/x-conversations/store.ts", "content": "import { chatMessagesStoreHelper } from '../x-chat/store';\nimport type { ConversationData } from '.';\n\n/**\n * We manage all conversation stores here, so that useXChat can get the conversation data by conversationKey.\n */\nexport const conversationStoreHelper = {\n _allConversationStores: new Map(),\n set: (key: string, store: ConversationStore) => {\n conversationStoreHelper._allConversationStores.set(key, store);\n },\n delete: (key: string) => {\n conversationStoreHelper._allConversationStores.delete(key);\n },\n getConversation: (conversationKey: string) => {\n for (const store of conversationStoreHelper._allConversationStores.values()) {\n if (store) {\n const conversation = store.getConversation(conversationKey);\n if (conversation) {\n return conversation;\n }\n }\n }\n },\n};\n\nexport class ConversationStore {\n private conversations: ConversationData[] = [];\n private listeners: (() => void)[] = [];\n private storeKey: string;\n private activeConversationKey: string;\n\n private emitListeners() {\n this.listeners.forEach((listener) => {\n listener();\n });\n }\n\n constructor(defaultConversations: ConversationData[], defaultActiveConversationKey: string) {\n this.setConversations(defaultConversations);\n this.storeKey = Math.random().toString();\n conversationStoreHelper.set(this.storeKey, this);\n this.activeConversationKey = defaultActiveConversationKey;\n }\n\n setActiveConversationKey = (key: string) => {\n this.activeConversationKey = key;\n this.emitListeners();\n return true;\n };\n setConversations = (list: ConversationData[]) => {\n this.conversations = [...list];\n this.emitListeners();\n return true;\n };\n\n getConversation = (key: ConversationData['key']) => {\n return this.conversations.find((item) => item.key === key);\n };\n\n addConversation = (conversation: ConversationData, placement?: 'prepend' | 'append') => {\n const exist = this.getConversation(conversation.key);\n if (!exist) {\n this.setConversations(\n placement === 'prepend'\n ? [conversation, ...this.conversations]\n : [...this.conversations, conversation],\n );\n return true;\n }\n return false;\n };\n\n setConversation = (key: ConversationData['key'], conversation: ConversationData) => {\n const exist = this.getConversation(key);\n if (exist) {\n Object.assign(exist, conversation);\n this.setConversations([...this.conversations]);\n return true;\n }\n return false;\n };\n\n removeConversation = (key: ConversationData['key']) => {\n const index = this.conversations.findIndex((item) => item.key === key);\n if (index !== -1) {\n this.conversations.splice(index, 1);\n this.setConversations([...this.conversations]);\n return true;\n }\n return false;\n };\n\n getMessages = (key: ConversationData['key']) => {\n return chatMessagesStoreHelper.getMessages(key);\n };\n\n getSnapshot = () => {\n return this.conversations;\n };\n\n getActiveConversationKey = () => {\n return this.activeConversationKey;\n };\n\n subscribe = (callback: () => void) => {\n this.listeners.push(callback);\n return () => {\n this.listeners = this.listeners.filter((listener) => listener !== callback);\n };\n };\n\n destroy = () => {\n conversationStoreHelper.delete(this.storeKey);\n };\n}\n" }, { "path": "packages/x-sdk/src/x-mcp-client/__test__/index.test.ts", "content": "import { XRequestCallbacks, XRequestOptions } from '../../x-request';\nimport xFetch from '../../x-request/x-fetch';\nimport XMCPClient from '../index';\n\njest.mock('../../x-request/x-fetch', () => jest.fn());\n\nconst baseURL = 'https://api.example.com/v1/chat';\nconst callbacks: XRequestCallbacks = {\n onSuccess: jest.fn(),\n onError: jest.fn(),\n onUpdate: jest.fn(),\n};\nconst options: XRequestOptions = {\n params: {\n model: 'gpt-3.5-turbo',\n dangerouslyApiKey: 'dangerouslyApiKey',\n messages: [{ role: 'user', content: 'Hello' }],\n },\n callbacks,\n};\nconst mockTools = [\n {\n name: 'TestTool',\n description: 'A test tool',\n inputSchema: {\n type: 'object',\n properties: {},\n },\n annotations: {\n title: 'Test Tool',\n readOnlyHint: false,\n destructiveHint: false,\n idempotentHint: false,\n openWorldHint: true,\n },\n },\n];\n\ndescribe('XMCPClient Function', () => {\n const mockedXFetch = xFetch as jest.Mock;\n\n beforeEach(() => {\n jest.clearAllMocks();\n });\n\n test('should throw error on invalid baseURL', () => {\n expect(() => XMCPClient('')).toThrow('The baseURL is not valid!');\n });\n\n test('should call tools method successfully', async () => {\n mockedXFetch.mockResolvedValueOnce({\n ok: true,\n status: 200,\n headers: {\n get: jest.fn().mockReturnValue('application/json; charset=utf-8'),\n },\n json: jest.fn().mockResolvedValueOnce(mockTools),\n });\n const client = XMCPClient(baseURL, options);\n const tools = await client.tools();\n expect(tools).toEqual(mockTools);\n });\n});\n" }, { "path": "packages/x-sdk/src/x-mcp-client/index.ts", "content": "import { AnyObject } from '../_util/type';\nimport XRequest, { XRequestOptions } from '../x-request';\n\nexport interface XMCPTool {\n name: string;\n description?: string;\n inputSchema: {\n type: 'object';\n properties: AnyObject;\n };\n annotations?: {\n title?: string;\n readOnlyHint?: boolean;\n destructiveHint?: boolean;\n idempotentHint?: boolean;\n openWorldHint?: boolean;\n };\n}\n\nexport type XMCPClientOptions = Pick;\n\nclass XMCPClientClass {\n readonly baseURL: string;\n private options: XMCPClientOptions | undefined;\n\n constructor(baseURL: string, options?: XMCPClientOptions) {\n if (!baseURL || typeof baseURL !== 'string') throw new Error('The baseURL is not valid!');\n this.baseURL = baseURL;\n this.options = options;\n }\n\n async tools(): Promise {\n return new Promise((resolve, reject) => {\n XRequest(this.baseURL, {\n ...this.options,\n callbacks: {\n onSuccess(chunks) {\n resolve(chunks[0] as XMCPTool[]);\n },\n onError: (error: Error): void => {\n reject(error);\n },\n },\n });\n });\n }\n}\n\nfunction XMCPClient(baseURL: string, options?: XMCPClientOptions) {\n return new XMCPClientClass(baseURL, options);\n}\n\nexport default XMCPClient;\n" }, { "path": "packages/x-sdk/src/x-request/__test__/abort.test.ts", "content": "import { enableFetchMocks } from 'jest-fetch-mock';\nimport type { XRequestCallbacks, XRequestOptions } from '../index';\nimport XRequest from '../index';\n\nenableFetchMocks();\n\nconst baseURL = 'https://api.example.com/v1/chat';\nconst callbacks: XRequestCallbacks = {\n onSuccess: jest.fn(),\n onError: jest.fn(),\n onUpdate: jest.fn(),\n};\nconst options: XRequestOptions = {\n params: {\n model: 'gpt-3.5-turbo',\n dangerouslyApiKey: 'dangerouslyApiKey',\n messages: [{ role: 'user', content: 'Hello' }],\n },\n callbacks,\n};\n\ndescribe('XRequest Class', () => {\n test('should throw error when abort', async () => {\n // already mocked by jest-fetch-mock\n (fetch as any).mockResponseOnce(() => {\n return Promise.resolve({\n body: '{}',\n headers: {\n 'content-type': 'application/json; charset=utf-8',\n },\n });\n });\n const request = XRequest(baseURL, {\n ...options,\n });\n request.abort();\n await request.asyncHandler;\n expect(callbacks.onError).toHaveBeenCalledWith(\n new DOMException('The operation was aborted. ', 'AbortError'),\n );\n });\n});\n" }, { "path": "packages/x-sdk/src/x-request/__test__/index.test.ts", "content": "import { waitFakeTimer } from '../../../tests/utils';\nimport type { SSEOutput } from '../../x-stream';\nimport type { XRequestCallbacks, XRequestOptions } from '../index';\nimport XRequest, { setXRequestGlobalOptions } from '../index';\nimport xFetch from '../x-fetch';\n\njest.mock('../x-fetch', () => jest.fn());\n\nconst SSE_SEPARATOR = '\\n\\n';\n\nconst ND_JSON_SEPARATOR = '\\n';\n\nconst sseEvent: SSEOutput = { event: 'message', data: '{\"id\":\"0\",\"content\":\"He\"}', id: '0' };\n\nconst sseData = `${Object.keys(sseEvent)\n .map((key) => `${key}:${sseEvent[key as keyof SSEOutput]}`)\n .join(ND_JSON_SEPARATOR)}${SSE_SEPARATOR}`;\n\nconst ndJsonData = `${JSON.stringify(sseEvent)}${ND_JSON_SEPARATOR}${JSON.stringify({ ...sseEvent, event: 'delta' })}`;\n\nconst baseURL = 'https://api.example.com/v1/chat';\nconst callbacks: XRequestCallbacks = {\n onSuccess: jest.fn(),\n onError: jest.fn(),\n onUpdate: jest.fn(),\n};\nconst options: XRequestOptions = {\n params: {\n model: 'gpt-3.5-turbo',\n dangerouslyApiKey: 'dangerouslyApiKey',\n messages: [{ role: 'user', content: 'Hello' }],\n },\n callbacks,\n};\n\nfunction mockSSEReadableStream() {\n return new ReadableStream({\n async start(controller) {\n for (const chunk of sseData.split(SSE_SEPARATOR)) {\n controller.enqueue(new TextEncoder().encode(chunk));\n }\n controller.close();\n },\n });\n}\n\nfunction mockNdJsonReadableStream() {\n return new ReadableStream({\n async start(controller) {\n for (const chunk of ndJsonData.split(ND_JSON_SEPARATOR)) {\n controller.enqueue(new TextEncoder().encode(chunk));\n }\n controller.close();\n },\n });\n}\n\nfunction mockSSEReadableStreamTimeout() {\n return new ReadableStream({\n async start(controller) {\n const chunks = sseData.split(SSE_SEPARATOR);\n controller.enqueue(new TextEncoder().encode(chunks[0]));\n await new Promise((resolve) => {\n setTimeout(() => {\n resolve('');\n }, 1100);\n });\n controller.enqueue(new TextEncoder().encode(chunks[1]));\n controller.close();\n },\n });\n}\n\ndescribe('XRequest Class', () => {\n const mockedXFetch = xFetch as jest.Mock;\n\n beforeEach(() => {\n jest.clearAllMocks();\n mockedXFetch.mockReset();\n });\n\n test('should throw error on invalid baseURL', () => {\n expect(() => XRequest('')).toThrow('The baseURL is not valid!');\n });\n\n test('should create request and handle successful JSON response', async () => {\n const headers = {\n get: jest.fn().mockReturnValue('application/json; charset=utf-8'),\n };\n mockedXFetch.mockResolvedValueOnce({\n ok: true,\n status: 200,\n headers,\n json: jest.fn().mockResolvedValueOnce(options.params),\n });\n const request = XRequest(baseURL, options);\n await request.asyncHandler;\n expect(callbacks.onSuccess).toHaveBeenCalledWith([options.params], headers);\n expect(callbacks.onError).not.toHaveBeenCalled();\n expect(callbacks.onUpdate).toHaveBeenCalledWith(options.params, headers);\n expect(request.run()).toBe(false);\n });\n\n test('should handle JSON response with success false and custom error fields', async () => {\n const headers = {\n get: jest.fn().mockReturnValue('application/json; charset=utf-8'),\n };\n const errorResponse = {\n success: false,\n name: 'ValidationError',\n message: 'Invalid input parameters',\n };\n mockedXFetch.mockResolvedValueOnce({\n ok: true,\n status: 400,\n headers,\n json: jest.fn().mockResolvedValueOnce(errorResponse),\n });\n const request = XRequest(baseURL, options);\n await request.asyncHandler;\n expect(callbacks.onSuccess).not.toHaveBeenCalled();\n expect(callbacks.onUpdate).not.toHaveBeenCalled();\n const error = new Error('Invalid input parameters');\n error.name = 'ValidationError';\n expect(callbacks.onError).toHaveBeenCalledWith(\n error,\n {\n message: 'Invalid input parameters',\n name: 'ValidationError',\n success: false,\n },\n headers,\n );\n });\n\n test('should handle JSON response with success false and default error fields', async () => {\n const headers = {\n get: jest.fn().mockReturnValue('application/json; charset=utf-8'),\n };\n const errorResponse = {\n success: false,\n };\n mockedXFetch.mockResolvedValueOnce({\n ok: true,\n status: 500,\n headers,\n json: jest.fn().mockResolvedValueOnce(errorResponse),\n });\n const request = XRequest(baseURL, options);\n await request.asyncHandler;\n expect(callbacks.onSuccess).not.toHaveBeenCalled();\n expect(callbacks.onUpdate).not.toHaveBeenCalled();\n const error = new Error('System error');\n error.name = 'SystemError';\n expect(callbacks.onError).toHaveBeenCalledWith(error, { success: false }, headers);\n });\n\n test('should handle JSON response with success false and partial error fields', async () => {\n const headers = {\n get: jest.fn().mockReturnValue('application/json; charset=utf-8'),\n };\n const errorResponse = {\n success: false,\n message: 'Custom error message',\n };\n mockedXFetch.mockResolvedValueOnce({\n ok: true,\n status: 422,\n headers,\n json: jest.fn().mockResolvedValueOnce(errorResponse),\n });\n const request = XRequest(baseURL, options);\n await request.asyncHandler;\n expect(callbacks.onSuccess).not.toHaveBeenCalled();\n expect(callbacks.onUpdate).not.toHaveBeenCalled();\n const error = new Error('Custom error message');\n error.name = 'SystemError';\n expect(callbacks.onError).toHaveBeenCalledWith(\n error,\n {\n message: 'Custom error message',\n success: false,\n },\n headers,\n );\n });\n\n test('should create request and handle streaming response', async () => {\n const headers = {\n get: jest.fn().mockReturnValue('text/event-stream'),\n };\n mockedXFetch.mockResolvedValueOnce({\n headers,\n body: mockSSEReadableStream(),\n });\n const request = XRequest(baseURL, options);\n await request.asyncHandler;\n expect(callbacks.onSuccess).toHaveBeenCalledWith([sseEvent], headers);\n expect(callbacks.onError).not.toHaveBeenCalled();\n expect(callbacks.onUpdate).toHaveBeenCalledWith(sseEvent, headers);\n });\n\n test('should create request and handle custom response, e.g. application/x-ndjson', async () => {\n const headers = {\n get: jest.fn().mockReturnValue('application/x-ndjson'),\n };\n mockedXFetch.mockResolvedValueOnce({\n headers,\n body: mockNdJsonReadableStream(),\n });\n const request = XRequest(baseURL, {\n ...options,\n transformStream: new TransformStream(),\n });\n await request.asyncHandler;\n expect(callbacks.onSuccess).toHaveBeenCalledWith(\n [ndJsonData.split(ND_JSON_SEPARATOR)[0], ndJsonData.split(ND_JSON_SEPARATOR)[1]],\n headers,\n );\n expect(callbacks.onError).not.toHaveBeenCalled();\n expect(callbacks.onUpdate).toHaveBeenCalledWith(\n ndJsonData.split(ND_JSON_SEPARATOR)[0],\n headers,\n );\n expect(callbacks.onUpdate).toHaveBeenCalledWith(\n ndJsonData.split(ND_JSON_SEPARATOR)[1],\n headers,\n );\n });\n\n test('should create request and handle custom response by response headers', async () => {\n const headers = {\n get: jest.fn().mockReturnValue('application/x-custom'),\n };\n mockedXFetch.mockResolvedValueOnce({\n headers,\n body: mockNdJsonReadableStream(),\n });\n const request = XRequest(baseURL, {\n ...options,\n transformStream: (_, headers) => {\n if (headers.get('Content-Type') === 'application/x-custom') {\n return new TransformStream();\n }\n },\n });\n await request.asyncHandler;\n expect(callbacks.onSuccess).toHaveBeenCalledWith(\n [ndJsonData.split(ND_JSON_SEPARATOR)[0], ndJsonData.split(ND_JSON_SEPARATOR)[1]],\n headers,\n );\n expect(callbacks.onError).not.toHaveBeenCalled();\n expect(callbacks.onUpdate).toHaveBeenCalledWith(\n ndJsonData.split(ND_JSON_SEPARATOR)[0],\n headers,\n );\n expect(callbacks.onUpdate).toHaveBeenCalledWith(\n ndJsonData.split(ND_JSON_SEPARATOR)[1],\n headers,\n );\n });\n\n test('should handle error response', async () => {\n mockedXFetch.mockRejectedValueOnce(new Error('Fetch failed'));\n const request = XRequest(baseURL, options);\n await request.asyncHandler;\n expect(callbacks.onSuccess).not.toHaveBeenCalled();\n expect(callbacks.onError).toHaveBeenCalledWith(new Error('Fetch failed'));\n });\n\n test('should convert unknown error to Error instance', async () => {\n mockedXFetch.mockRejectedValueOnce('boom');\n const request = XRequest(baseURL, options);\n await request.asyncHandler;\n expect(callbacks.onSuccess).not.toHaveBeenCalled();\n expect(callbacks.onError).toHaveBeenCalledWith(new Error('Unknown error!'));\n });\n\n test('should warn when running a non-manual request', () => {\n const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});\n mockedXFetch.mockResolvedValueOnce({\n ok: true,\n status: 200,\n headers: {\n get: jest.fn().mockReturnValue('application/json; charset=utf-8'),\n },\n json: jest.fn().mockResolvedValueOnce(options.params),\n });\n const request = XRequest(baseURL, options);\n request.run(options.params as any);\n expect(warnSpy).toHaveBeenCalledWith('The request is not manual, so it cannot be run!');\n warnSpy.mockRestore();\n });\n\n test('should throw error for unsupported content type', async () => {\n const contentType = 'text/plain';\n mockedXFetch.mockResolvedValueOnce({\n headers: {\n get: jest.fn().mockReturnValue(contentType),\n },\n });\n const request = XRequest(baseURL, options);\n await request.asyncHandler;\n expect(callbacks.onSuccess).not.toHaveBeenCalled();\n expect(callbacks.onError).toHaveBeenCalledWith(\n new Error(`The response content-type: ${contentType} is not support!`),\n );\n });\n\n test('should handle TransformStream errors', async () => {\n const errorTransform = new TransformStream({\n transform() {\n throw new Error('Transform error');\n },\n });\n\n mockedXFetch.mockResolvedValueOnce({\n headers: {\n get: jest.fn().mockReturnValue('application/x-ndjson'),\n },\n body: mockNdJsonReadableStream(),\n });\n const request = XRequest(baseURL, {\n ...options,\n transformStream: errorTransform,\n });\n await request.asyncHandler;\n expect(callbacks.onError).toHaveBeenCalledWith(new Error('Transform error'));\n expect(callbacks.onSuccess).not.toHaveBeenCalled();\n expect(callbacks.onUpdate).not.toHaveBeenCalled();\n });\n\n test('global options should effective after set', async () => {\n mockedXFetch.mockResolvedValueOnce({\n ok: true,\n status: 200,\n headers: {\n get: jest.fn().mockReturnValue('application/json; charset=utf-8'),\n },\n json: jest.fn().mockResolvedValueOnce(options.params),\n });\n setXRequestGlobalOptions({\n headers: { global: 'globalValue' },\n });\n const request = XRequest(baseURL, {\n ...options,\n middlewares: {\n onRequest: async (_baseURL, options) => {\n // ts-ignore\n expect((options?.headers as any)?.global as any).toEqual('globalValue');\n return Promise.resolve([_baseURL, options]);\n },\n },\n });\n await request.asyncHandler;\n });\n\n test('should throw error when timeout', async () => {\n mockedXFetch.mockImplementationOnce(() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n ok: true,\n status: 200,\n headers: {\n get: jest.fn().mockReturnValue('application/json; charset=utf-8'),\n },\n json: jest.fn().mockResolvedValueOnce(options.params),\n });\n }, 3000);\n });\n });\n const request = XRequest(baseURL, {\n ...options,\n timeout: 1500,\n });\n expect(request.isTimeout).toBe(false);\n await request.asyncHandler;\n expect(callbacks.onSuccess).not.toHaveBeenCalled();\n expect(callbacks.onError).toHaveBeenCalledWith(new Error(`TimeoutError`));\n expect(request.isTimeout).toBe(true);\n });\n\n test('should throw error when stream timeout', async () => {\n const headers = {\n get: jest.fn().mockReturnValue('text/event-stream'),\n };\n mockedXFetch.mockResolvedValueOnce({\n headers,\n body: mockSSEReadableStreamTimeout(),\n });\n const request = XRequest(baseURL, {\n ...options,\n streamTimeout: 1000,\n });\n expect(request.isStreamTimeout).toBe(false);\n await request.asyncHandler;\n expect(callbacks.onSuccess).not.toHaveBeenCalled();\n expect(callbacks.onError).toHaveBeenCalledWith(\n new Error(`StreamTimeoutError`),\n undefined,\n headers,\n );\n expect(request.isStreamTimeout).toBe(true);\n });\n\n test('should retry when request failed', async () => {\n jest.useFakeTimers();\n const headers = {\n get: jest.fn().mockReturnValue('text/event-stream'),\n };\n mockedXFetch.mockRejectedValueOnce(new Error('Fetch failed')).mockResolvedValueOnce({\n headers,\n body: mockSSEReadableStream(),\n });\n const request = XRequest(baseURL, {\n ...options,\n retryInterval: 500,\n retryTimes: 2,\n });\n await request.asyncHandler;\n expect(callbacks.onSuccess).not.toHaveBeenCalled();\n expect(callbacks.onError).toHaveBeenCalledWith(new Error(`Fetch failed`));\n // wait to retry\n await waitFakeTimer(500, 1);\n expect(callbacks.onSuccess).toHaveBeenCalledWith([sseEvent], headers);\n });\n\n test('should not retry when request failed', async () => {\n jest.useFakeTimers();\n const headers = {\n get: jest.fn().mockReturnValue('text/event-stream'),\n };\n mockedXFetch.mockRejectedValueOnce(new Error('Fetch failed')).mockResolvedValueOnce({\n headers,\n body: mockSSEReadableStream(),\n });\n const request = XRequest(baseURL, {\n ...options,\n });\n await request.asyncHandler;\n expect(callbacks.onSuccess).not.toHaveBeenCalled();\n expect(callbacks.onError).toHaveBeenCalledWith(new Error(`Fetch failed`));\n await waitFakeTimer(1000, 1);\n expect(callbacks.onSuccess).not.toHaveBeenCalled();\n });\n\n test('should not retry when reach limit times', async () => {\n jest.useFakeTimers();\n const headers = {\n get: jest.fn().mockReturnValue('text/event-stream'),\n };\n mockedXFetch\n .mockRejectedValueOnce(new Error('Fetch failed'))\n .mockRejectedValueOnce(new Error('Fetch failed2'))\n .mockResolvedValueOnce({\n headers,\n body: mockSSEReadableStream(),\n });\n const request = XRequest(baseURL, {\n ...options,\n retryInterval: 500,\n retryTimes: 1,\n });\n await request.asyncHandler;\n expect(callbacks.onSuccess).not.toHaveBeenCalled();\n expect(callbacks.onError).toHaveBeenCalledWith(new Error(`Fetch failed`));\n // wait to retry\n await waitFakeTimer(500, 1);\n expect(callbacks.onError).toHaveBeenCalledWith(new Error(`Fetch failed2`));\n await waitFakeTimer(500, 1);\n expect(callbacks.onSuccess).not.toHaveBeenCalled();\n });\n\n test('should not run with no manual', async () => {\n mockedXFetch.mockResolvedValueOnce({\n ok: true,\n status: 200,\n headers: {\n get: jest.fn().mockReturnValue('application/json; charset=utf-8'),\n },\n json: jest.fn().mockResolvedValueOnce(options.params),\n });\n\n const request = XRequest(baseURL, {\n ...options,\n manual: false, // 设置 manual 为 false，表示自动运行（默认行为）\n });\n\n // 由于 manual 为 false，请求应该自动开始执行\n expect(request.manual).toBe(false);\n expect(request.isRequesting).toBe(true); // 应该自动开始请求\n const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();\n // 等待请求完成\n await request.run();\n expect(consoleSpy).toHaveBeenCalledWith('The request is not manual, so it cannot be run!');\n });\n});\n" }, { "path": "packages/x-sdk/src/x-request/__test__/x-fetch.test.tsx", "content": "import xFetch from '../x-fetch';\n\nglobal.fetch = jest.fn();\n\ndescribe('xFetch', () => {\n const baseURL = 'https://api.example.com';\n beforeEach(() => {\n jest.clearAllMocks();\n });\n\n it('should return response on successful fetch', async () => {\n const mockResponse = new Response('{\"data\": \"test\"}', { status: 200 });\n (global.fetch as jest.Mock).mockResolvedValue(mockResponse);\n\n const response = await xFetch(baseURL, {});\n\n expect(response).toBe(mockResponse);\n expect(global.fetch).toHaveBeenCalledWith(baseURL, {});\n });\n\n it('should call middlewares', async () => {\n const mockResponse = new Response('{\"data\": \"test\"}', { status: 200 });\n (global.fetch as jest.Mock).mockResolvedValue(mockResponse);\n\n const middlewares = {\n onRequest: jest.fn(async (url) => [url, { method: 'POST' }]),\n onResponse: jest.fn(async () => new Response('{\"data\": \"modified\"}', { status: 200 })),\n };\n\n const response = await xFetch(baseURL, { middlewares } as any);\n\n expect(middlewares.onRequest).toHaveBeenCalled();\n expect(global.fetch).toHaveBeenCalledWith(baseURL, { method: 'POST' });\n expect(middlewares.onResponse).toHaveBeenCalled();\n expect(await response.text()).toBe('{\"data\": \"modified\"}');\n });\n\n it('should throw an error while options.onResponse not return a Response instance', async () => {\n await expect(\n xFetch(baseURL, { middlewares: { onResponse: () => new Date() as any } }),\n ).rejects.toThrow('The options.onResponse must return a Response instance!');\n });\n\n it('should throw an error on non-200 status', async () => {\n (global.fetch as jest.Mock).mockResolvedValue(new Response(null, { status: 404 }));\n\n await expect(xFetch(baseURL, {})).rejects.toThrow('Fetch failed with status 404');\n });\n\n it('should throw an error on empty response body', async () => {\n (global.fetch as jest.Mock).mockResolvedValue(new Response(null, { status: 200 }));\n\n await expect(xFetch(baseURL, {})).rejects.toThrow('The response body is empty.');\n });\n\n it('should throw an error if fetch is not a function', async () => {\n await expect(xFetch(baseURL, { fetch: 'not_a_function' as any })).rejects.toThrow(\n 'The options.fetch must be a typeof fetch function!',\n );\n });\n\n it('should use global fetch if no fetch option provided', async () => {\n const mockResponse = new Response('{\"data\": \"test\"}', { status: 200 });\n (global.fetch as jest.Mock).mockResolvedValue(mockResponse);\n\n const response = await xFetch(baseURL, {});\n\n expect(response).toBe(mockResponse);\n expect(global.fetch).toHaveBeenCalledWith(baseURL, {});\n });\n});\n" }, { "path": "packages/x-sdk/src/x-request/index.ts", "content": "import type { AnyObject } from '../_util/type';\nimport { MessageInfo, SimpleType } from '../x-chat';\nimport type { JSONOutPut, SSEOutput, XReadableStream, XStreamOptions } from '../x-stream';\nimport XStream from '../x-stream';\nimport type { XFetchMiddlewares } from './x-fetch';\nimport xFetch from './x-fetch';\n\nexport interface XRequestCallbacks {\n /**\n * @description Callback when the request is successful\n */\n onSuccess: (\n chunks: Output[],\n responseHeaders: Headers,\n chatMessage?: MessageInfo,\n ) => void;\n\n /**\n * @description Callback when the request fails\n */\n onError: (\n error: Error,\n errorInfo?: any,\n responseHeaders?: Headers,\n fallbackMsg?: MessageInfo,\n ) => void;\n\n /**\n * @description Callback when the request is updated\n */\n onUpdate?: (\n chunk: Output,\n responseHeaders: Headers,\n chatMessage?: MessageInfo,\n ) => void;\n}\n\nexport interface XRequestOptions<\n Input = AnyObject,\n Output = SSEOutput,\n ChatMessage extends SimpleType = any,\n> extends RequestInit {\n /**\n * @description Callbacks for the request\n */\n callbacks?: XRequestCallbacks;\n /**\n * @description The parameters to be sent\n */\n params?: Partial;\n /**\n * @description The custom headers to be sent\n */\n headers?: Record;\n /**\n * @description The timeout for the request\n */\n timeout?: number;\n /**\n * @description The timeout for the stream mode request,when the stream mode request is timeout, the request will be aborted\n */\n streamTimeout?: number;\n /**\n * @description Custom fetch\n */\n fetch?: (\n baseURL: Parameters[0],\n options: XRequestOptions,\n ) => Promise;\n /**\n * @description Middlewares for the request and response\n */\n middlewares?: XFetchMiddlewares;\n /**\n * @description Custom stream transformer, can use to adapt the stream data to the custom format\n */\n transformStream?:\n | XStreamOptions['transformStream']\n | ((baseURL: string, responseHeaders: Headers) => XStreamOptions['transformStream']);\n /**\n * @description Separator for stream data parsing\n */\n streamSeparator?: string;\n /**\n * @description Separator for different parts within the stream\n */\n partSeparator?: string;\n /**\n * @description Separator for key-value pairs in the stream data\n */\n kvSeparator?: string;\n /**\n * @description Whether to manually run the request\n */\n manual?: boolean;\n\n /**\n * @description The interval after the request is failed\n */\n retryInterval?: number;\n\n /**\n * @description Retry times limit, valid when retryInterval is set or onError returns a number\n */\n retryTimes?: number;\n}\n\nexport type XRequestGlobalOptions = Pick<\n XRequestOptions,\n 'headers' | 'timeout' | 'streamTimeout' | 'middlewares' | 'fetch' | 'transformStream' | 'manual'\n>;\n\nexport type XRequestFunction = (\n baseURL: string,\n options?: XRequestOptions,\n) => XRequestClass;\n\n/**\n * @description Global options for the request\n */\nconst globalOptions: XRequestGlobalOptions = {\n manual: false,\n headers: {\n 'Content-Type': 'application/json',\n },\n};\n\n/**\n * Set global options for the request\n * @param options XRequestGlobalOptions\n */\nexport function setXRequestGlobalOptions(\n options: XRequestGlobalOptions,\n) {\n Object.assign(globalOptions, options);\n}\n\nconst LastEventId = 'Last-Event-ID';\n\nexport abstract class AbstractXRequestClass {\n baseURL!: string;\n options!: XRequestOptions;\n\n constructor(baseURL: string, options?: XRequestOptions) {\n if (!baseURL || typeof baseURL !== 'string') throw new Error('The baseURL is not valid!');\n this.baseURL = baseURL;\n this.options = options || {};\n }\n\n abstract get asyncHandler(): Promise;\n abstract get isTimeout(): boolean;\n abstract get isStreamTimeout(): boolean;\n abstract get isRequesting(): boolean;\n abstract get manual(): boolean;\n\n abstract run(params?: Input): void;\n abstract abort(): void;\n}\n\nexport class XRequestClass<\n Input = AnyObject,\n Output = SSEOutput,\n ChatMessage extends SimpleType = any,\n> extends AbstractXRequestClass {\n private _asyncHandler!: Promise;\n\n private timeoutHandler!: number;\n private _isTimeout = false;\n private streamTimeoutHandler!: number;\n private _isStreamTimeout = false;\n private abortController!: AbortController;\n private _isRequesting = false;\n private _manual = false;\n private lastManualParams?: Partial;\n private retryTimes = 0;\n private retryTimer!: ReturnType;\n private lastEventId = undefined;\n\n public get asyncHandler() {\n return this._asyncHandler;\n }\n\n public get isTimeout() {\n return this._isTimeout;\n }\n\n private set isTimeout(value: boolean) {\n this._isTimeout = value;\n }\n\n public get isStreamTimeout() {\n return this._isStreamTimeout;\n }\n\n private set isStreamTimeout(value: boolean) {\n this._isStreamTimeout = value;\n }\n\n public get isRequesting() {\n return this._isRequesting;\n }\n\n public get manual() {\n return this._manual;\n }\n\n constructor(baseURL: string, options?: XRequestOptions) {\n super(baseURL, options);\n this._manual = options?.manual || false;\n if (!this.manual) {\n this.init();\n }\n }\n\n public run(params?: Input) {\n if (this.manual) {\n this.resetRetry();\n this.lastManualParams = params;\n this.init(params);\n return true;\n }\n console.warn('The request is not manual, so it cannot be run!');\n return false;\n }\n\n public abort() {\n clearTimeout(this.timeoutHandler);\n clearTimeout(this.streamTimeoutHandler);\n this.abortController.abort();\n }\n\n private init(extraParams?: Partial, extraHeaders?: Record) {\n this.abortController = new AbortController();\n const {\n callbacks,\n params,\n headers = {},\n transformStream,\n fetch,\n timeout,\n streamTimeout,\n middlewares,\n streamSeparator,\n partSeparator,\n kvSeparator,\n ...otherOptions\n } = this.options;\n const margeHeaders = Object.assign(\n {},\n globalOptions.headers || {},\n headers,\n extraHeaders || {},\n );\n const requestInit: XRequestOptions = {\n ...otherOptions,\n method: 'POST',\n body: JSON.stringify({\n ...params,\n ...(extraParams || {}),\n }),\n params: {\n ...params,\n ...extraParams,\n } as Input,\n headers: margeHeaders,\n signal: this.abortController.signal,\n middlewares,\n };\n if (timeout && timeout > 0) {\n this.timeoutHandler = window.setTimeout(() => {\n this.isTimeout = true;\n this.finishRequest();\n callbacks?.onError?.(new Error('TimeoutError'));\n }, timeout);\n }\n this.startRequest();\n // save and export a async handler to wait for the request to be finished\n // though it is not necessary, but it is useful for some scenarios\n this._asyncHandler = xFetch(this.baseURL, {\n fetch,\n ...requestInit,\n })\n .then(async (response) => {\n clearTimeout(this.timeoutHandler);\n\n if (this.isTimeout) return;\n\n if (transformStream) {\n let transformer = transformStream as XStreamOptions['transformStream'];\n if (typeof transformStream === 'function') {\n transformer = transformStream(this.baseURL, response.headers);\n }\n await this.customResponseHandler(\n response,\n callbacks,\n transformer,\n streamTimeout,\n streamSeparator,\n partSeparator,\n kvSeparator,\n );\n return;\n }\n const contentType = response.headers.get('content-type') || '';\n const mimeType = contentType.split(';')[0].trim();\n switch (mimeType) {\n /** SSE */\n case 'text/event-stream':\n await this.sseResponseHandler(\n response,\n callbacks,\n streamTimeout,\n streamSeparator,\n partSeparator,\n kvSeparator,\n );\n break;\n /** JSON */\n case 'application/json':\n await this.jsonResponseHandler(response, callbacks);\n break;\n default:\n throw new Error(`The response content-type: ${contentType} is not support!`);\n }\n })\n .catch((error) => {\n clearTimeout(this.timeoutHandler);\n this.finishRequest();\n // abort() throw a DOMException, so we need to check it\n const err =\n error instanceof Error || error instanceof DOMException\n ? error\n : new Error('Unknown error!');\n // get retry interval from return of onError or options\n const returnOfOnError = callbacks?.onError?.(err);\n // ignore abort error\n if (err.name !== 'AbortError') {\n const retryInterval =\n typeof returnOfOnError === 'number' ? returnOfOnError : this.options.retryInterval;\n if (retryInterval && retryInterval > 0) {\n // if retry times limit is set, check if the retry times is reached\n if (\n typeof this.options.retryTimes === 'number' &&\n this.retryTimes >= this.options.retryTimes\n ) {\n return;\n }\n clearTimeout(this.retryTimer);\n this.retryTimer = setTimeout(() => {\n const extraHeaders: Record = {};\n if (typeof this.lastEventId !== 'undefined') {\n // add Last-Event-ID header for retry\n extraHeaders[LastEventId] = this.lastEventId;\n }\n this.init(this.lastManualParams, extraHeaders);\n }, retryInterval);\n this.retryTimes = this.retryTimes + 1;\n }\n }\n });\n }\n\n private startRequest() {\n this._isRequesting = true;\n }\n\n private finishRequest() {\n this._isRequesting = false;\n }\n\n private customResponseHandler = async (\n response: Response,\n callbacks?: XRequestCallbacks,\n transformStream?: XStreamOptions['transformStream'],\n streamTimeout?: number | undefined,\n streamSeparator?: string,\n partSeparator?: string,\n kvSeparator?: string,\n ) => {\n const stream = XStream({\n readableStream: response.body!,\n transformStream,\n streamSeparator,\n partSeparator,\n kvSeparator,\n });\n await this.processStream(stream, response, callbacks, streamTimeout);\n };\n\n private sseResponseHandler = async (\n response: Response,\n callbacks?: XRequestCallbacks,\n streamTimeout?: number,\n streamSeparator?: string,\n partSeparator?: string,\n kvSeparator?: string,\n ) => {\n const stream = XStream({\n readableStream: response.body!,\n streamSeparator,\n partSeparator,\n kvSeparator,\n });\n await this.processStream(stream, response, callbacks, streamTimeout);\n };\n\n private async processStream(\n stream: XReadableStream,\n response: Response,\n callbacks?: XRequestCallbacks,\n streamTimeout?: number,\n ) {\n const chunks: Output[] = [];\n const iterator = stream[Symbol.asyncIterator]();\n let result: IteratorResult;\n do {\n // if streamTimeout is set, start the stream timeout timer\n // every time the stream is updated, reset the timer\n if (streamTimeout) {\n this.streamTimeoutHandler = window.setTimeout(() => {\n this.isStreamTimeout = true;\n this.finishRequest();\n callbacks?.onError?.(new Error('StreamTimeoutError'), undefined, response.headers);\n }, streamTimeout);\n }\n\n result = await iterator.next();\n clearTimeout(this.streamTimeoutHandler);\n if (this.isStreamTimeout) {\n break;\n }\n\n if (result.value) {\n chunks.push(result.value);\n callbacks?.onUpdate?.(result.value, response.headers);\n if (typeof result?.value?.id !== 'undefined') {\n // cache Last-Event-ID for retry request\n this.lastEventId = result.value.id;\n }\n }\n } while (!result.done);\n if (streamTimeout) {\n clearTimeout(this.streamTimeoutHandler);\n if (this.isStreamTimeout) {\n this.finishRequest();\n return;\n }\n }\n this.finishRequest();\n callbacks?.onSuccess?.(chunks, response.headers);\n }\n\n private jsonResponseHandler = async <\n Output = JSONOutPut,\n ChatMessage extends SimpleType = string,\n >(\n response: Response,\n callbacks?: XRequestCallbacks,\n ) => {\n const chunk: Output = await response.json();\n\n if ((chunk as JSONOutPut)?.success === false) {\n const error = new Error((chunk as JSONOutPut).message || 'System error');\n error.name = (chunk as JSONOutPut).name || 'SystemError';\n callbacks?.onError?.(error, chunk, response.headers);\n } else {\n callbacks?.onUpdate?.(chunk, response.headers);\n this.finishRequest();\n // keep type consistency with stream mode\n callbacks?.onSuccess?.([chunk], response.headers);\n }\n };\n\n private resetRetry() {\n clearTimeout(this.retryTimer);\n this.retryTimes = 0;\n this.lastEventId = undefined;\n }\n}\n\nfunction XRequest(\n baseURL: string,\n options?: XRequestOptions,\n): AbstractXRequestClass {\n return new XRequestClass(baseURL, options);\n}\n\nexport default XRequest;\n" }, { "path": "packages/x-sdk/src/x-request/x-fetch.ts", "content": "import { XRequestOptions } from '.';\n\nexport interface XFetchMiddlewares {\n onRequest?: (\n baseURL: Parameters[0],\n options: XRequestOptions,\n ) => Promise<[Parameters[0], XRequestOptions]>;\n onResponse?: (response: Response) => Promise;\n}\n\nexport type XFetchType = (\n baseURL: Parameters[0],\n options?: XRequestOptions,\n) => Promise;\n\nconst XFetch = async (\n baseURL: Parameters[0],\n options: XRequestOptions,\n) => {\n const { fetch: fetchFn = globalThis.fetch, middlewares = {}, ...requestInit } = options;\n\n if (typeof fetchFn !== 'function') {\n throw new Error('The options.fetch must be a typeof fetch function!');\n }\n\n /** ---------------------- request init ---------------------- */\n let fetchArgs: [Parameters[0], XRequestOptions] = [\n baseURL,\n requestInit,\n ];\n\n /** ---------------------- request middleware ---------------------- */\n if (typeof middlewares.onRequest === 'function') {\n const modifiedFetchArgs = await middlewares.onRequest(...fetchArgs);\n\n fetchArgs = modifiedFetchArgs;\n }\n\n /** ---------------------- fetch ---------------------- */\n let response = await fetchFn(...fetchArgs);\n\n /** ---------------------- response middleware ---------------------- */\n if (typeof middlewares.onResponse === 'function') {\n const modifiedResponse = await middlewares.onResponse(response);\n\n if (!(modifiedResponse instanceof Response)) {\n throw new Error('The options.onResponse must return a Response instance!');\n }\n\n response = modifiedResponse;\n }\n\n /** ---------------------- response check ---------------------- */\n if (!response.ok) {\n throw new Error(`Fetch failed with status ${response.status}`);\n }\n\n if (!response.body) {\n throw new Error('The response body is empty.');\n }\n\n /** ---------------------- return ---------------------- */\n return response;\n};\n\nexport default XFetch;\n" }, { "path": "packages/x-sdk/src/x-stream/__test__/index.test.ts", "content": "import XStream from '../index';\n\ndescribe('XStream', () => {\n it('transforms binary stream to SSE events', async () => {\n const textEncoder = new TextEncoder();\n const readableStream = new ReadableStream({\n start(controller) {\n controller.enqueue(textEncoder.encode('event: test\\n\\ndata: value\\n\\n'));\n controller.close();\n },\n });\n\n const result: any[] = [];\n for await (const value of XStream({ readableStream })) {\n result.push(value);\n }\n\n expect(result).toEqual([{ event: 'test' }, { data: 'value' }]);\n });\n\n it('handles TextDecoderStream unavailability by using fallback', async () => {\n // Mock TextDecoderStream to be undefined\n const originalTextDecoderStream = (global as any).TextDecoderStream;\n (global as any).TextDecoderStream = undefined;\n\n const textEncoder = new TextEncoder();\n const readableStream = new ReadableStream({\n start(controller) {\n controller.enqueue(textEncoder.encode('event: fallback\\n\\ndata: test\\n\\n'));\n controller.close();\n },\n });\n\n const result: any[] = [];\n for await (const value of XStream({ readableStream })) {\n result.push(value);\n }\n\n expect(result).toEqual([{ event: 'fallback' }, { data: 'test' }]);\n\n // Restore TextDecoderStream\n (global as any).TextDecoderStream = originalTextDecoderStream;\n });\n\n it('make compatible with incomplete SSE data. ', async () => {\n const sseChunks: string[] = [];\n\n sseChunks.push('event: message\\ndata:1\\n\\nevent: end\\n');\n sseChunks.push('data:2\\n\\n');\n sseChunks.push(':comment\\n\\n');\n\n const readableStream = new ReadableStream({\n async start(controller) {\n for (const chunk of sseChunks) {\n controller.enqueue(new TextEncoder().encode(chunk));\n }\n controller.close();\n },\n });\n\n const result: any[] = [];\n for await (const value of XStream({ readableStream })) {\n result.push(value);\n }\n\n expect(result).toEqual([\n { event: 'message', data: '1' },\n { event: 'end', data: '2' },\n ]);\n });\n\n it('supports custom transform streams', async () => {\n const textEncoder = new TextEncoder();\n const readableStream = new ReadableStream({\n start(controller) {\n controller.enqueue(textEncoder.encode('custom-part1|custom-part2|'));\n controller.close();\n },\n });\n\n const customTransform = new TransformStream({\n transform(chunk, controller) {\n const parts = chunk.split('|');\n parts.forEach((part: string) => {\n controller.enqueue(part);\n });\n },\n });\n\n const result: any[] = [];\n for await (const value of XStream({ readableStream, transformStream: customTransform })) {\n result.push(value);\n }\n\n expect(result).toEqual(['custom-part1', 'custom-part2']);\n });\n\n it('throws an error when readableStream is not an instance of ReadableStream', async () => {\n await expect(\n (async () => {\n const result: any[] = [];\n for await (const value of XStream({ readableStream: {} as any })) {\n result.push(value);\n }\n })(),\n ).rejects.toThrow('The options.readableStream must be an instance of ReadableStream.');\n });\n\n it('handles lines without key-value separator by logging warning', async () => {\n const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();\n\n const result: any[] = [];\n for await (const value of XStream({\n readableStream: new ReadableStream({\n async start(controller) {\n controller.enqueue(new TextEncoder().encode('event: message\\n\\nincomplete'));\n controller.close();\n },\n }),\n })) {\n result.push(value);\n }\n\n // Verify that console.warn was called with the expected message\n expect(consoleSpy).toHaveBeenCalledWith(\n 'The key-value separator \":\" is not found in the sse line: incomplete !',\n );\n\n // Verify that the valid event was processed and invalid line was skipped\n expect(result).toEqual([{ event: 'message' }]);\n\n consoleSpy.mockRestore();\n });\n\n it('should return an instance of ReadableStream', () => {\n expect(\n XStream({\n readableStream: new ReadableStream({\n async start(controller) {\n controller.enqueue(new TextEncoder().encode('event: message\\n\\ndata: value\\n\\n'));\n controller.close();\n },\n }),\n }),\n ).toBeInstanceOf(ReadableStream);\n });\n});\n" }, { "path": "packages/x-sdk/src/x-stream/index.ts", "content": "/**\n * @description default separator for {@link splitStream}\n */\nconst DEFAULT_STREAM_SEPARATOR = '\\n\\n';\n/**\n * @description Default separator for {@link splitPart}\n * @example \"event: delta\\ndata: {\\\"key\\\": \\\"value\\\"}\"\n */\nconst DEFAULT_PART_SEPARATOR = '\\n';\n/**\n * @description Default separator for key value, A colon (`:`) is used to separate keys from values\n * @example \"event: delta\"\n */\nconst DEFAULT_KV_SEPARATOR = ':';\n\n/**\n * Check if a string is not empty or only contains whitespace characters\n */\nconst isValidString = (str: string) => (str ?? '').trim() !== '';\n\n/**\n * @description A TransformStream inst that splits a stream into parts based on {@link DEFAULT_STREAM_SEPARATOR}\n * @example\n *\n * `event: delta\n * data: { content: 'hello' }\n *\n * event: delta\n * data: { key: 'world!' }\n *\n * `\n */\nfunction splitStream(streamSeparator = DEFAULT_STREAM_SEPARATOR) {\n // Buffer to store incomplete data chunks between transformations\n let buffer = '';\n\n return new TransformStream({\n transform(streamChunk, controller) {\n buffer += streamChunk;\n\n // Split the buffer based on the separator\n const parts = buffer.split(streamSeparator);\n // Enqueue all complete parts except for the last incomplete one\n parts.slice(0, -1).forEach((part) => {\n // Skip empty parts\n if (isValidString(part)) {\n controller.enqueue(part);\n }\n });\n\n // Save the last incomplete part back to the buffer for the next chunk\n buffer = parts[parts.length - 1];\n },\n flush(controller) {\n // If there's any remaining data in the buffer, enqueue it as the final part\n if (isValidString(buffer)) {\n controller.enqueue(buffer);\n }\n },\n });\n}\n\n/**\n * @link https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events#fields\n */\nexport type SSEFields = 'data' | 'event' | 'id' | 'retry';\n\n/**\n * @example\n * const sseObject = {\n * event: 'delta',\n * data: '{ key: \"world!\" }',\n * };\n */\nexport type SSEOutput = Partial>;\n\nexport interface JSONOutPut extends Partial> {\n success: boolean;\n message?: string;\n name?: string;\n}\n\n/**\n * @description A TransformStream inst that transforms a part string into {@link SSEOutput}\n * @example part string\n *\n * \"event: delta\\ndata: { key: 'world!' }\\n\"\n *\n * @link https://developer.mozilla.org/en-US/docs/Web/API/EventSource\n *\n * When handling responses with `Content-Type: text/event-stream`, the following standard practices are commonly observed:\n * - Double newline characters (`\\n\\n`) are used to separate individual events.\n * - Single newline characters (`\\n`) are employed to separate line within an event.\n */\nfunction splitPart(partSeparator = DEFAULT_PART_SEPARATOR, kvSeparator = DEFAULT_KV_SEPARATOR) {\n return new TransformStream({\n transform(partChunk, controller) {\n // Split the chunk into key-value pairs using the partSeparator\n const lines = partChunk.split(partSeparator);\n const sseEvent = lines.reduce((acc, line) => {\n const separatorIndex = line.indexOf(kvSeparator);\n\n if (separatorIndex === -1) {\n console.warn(\n `The key-value separator \"${kvSeparator}\" is not found in the sse line: ${line} !`,\n );\n return acc;\n }\n\n // Extract the key from the beginning of the line up to the separator\n const key = line.slice(0, separatorIndex).trim();\n\n // The colon is used for comment lines, skip directly\n if (!isValidString(key)) return acc;\n\n // Extract the value from the line after the separator\n const value = line.slice(separatorIndex + 1).trim();\n\n return { ...acc, [key]: value };\n }, {});\n\n if (Object.keys(sseEvent).length === 0) return;\n\n // Reduce the key-value pairs into a single object and enqueue\n controller.enqueue(sseEvent);\n },\n });\n}\n\nexport interface XStreamOptions {\n /**\n * @description Readable stream of binary data\n * @link https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream\n */\n readableStream: ReadableStream;\n\n /**\n * @description Support customizable transformStream to transform streams\n * @default sseTransformStream\n * @link https://developer.mozilla.org/en-US/docs/Web/API/TransformStream\n */\n transformStream?: TransformStream;\n /**\n * @description Separator for stream data parsing\n */\n streamSeparator?: string;\n /**\n * @description Separator for different parts within the stream\n */\n partSeparator?: string;\n /**\n * @description Separator for key-value pairs in the stream data\n */\n kvSeparator?: string;\n}\n\nexport type XReadableStream = ReadableStream & AsyncGenerator;\n\nfunction createDecoderStream() {\n if (typeof TextDecoderStream !== 'undefined') {\n return new TextDecoderStream();\n }\n\n const decoder = new TextDecoder('utf-8');\n return new TransformStream({\n transform(chunk, controller) {\n controller.enqueue(decoder.decode(chunk, { stream: true }));\n },\n flush(controller) {\n controller.enqueue(decoder.decode());\n },\n });\n}\n\n/**\n * @description Transform Uint8Array binary stream to {@link SSEOutput} by default\n * @warning The `XStream` only support the `utf-8` encoding. More encoding support maybe in the future.\n */\nfunction XStream(options: XStreamOptions) {\n const { readableStream, transformStream, streamSeparator, partSeparator, kvSeparator } = options;\n\n if (!(readableStream instanceof ReadableStream)) {\n throw new Error('The options.readableStream must be an instance of ReadableStream.');\n }\n\n // Default encoding is `utf-8`\n const decoderStream = createDecoderStream();\n\n const stream = (\n transformStream\n ? /**\n * Uint8Array binary -> string -> Output\n */\n readableStream\n .pipeThrough(decoderStream as TransformStream)\n .pipeThrough(transformStream)\n : /**\n * Uint8Array binary -> string -> SSE part string -> Default Output {@link SSEOutput}\n */\n readableStream\n .pipeThrough(decoderStream as TransformStream)\n .pipeThrough(splitStream(streamSeparator))\n .pipeThrough(splitPart(partSeparator, kvSeparator))\n ) as XReadableStream;\n\n /** support async iterator */\n stream[Symbol.asyncIterator] = async function* () {\n const reader = this.getReader();\n\n while (true) {\n const { done, value } = await reader.read();\n\n if (done) break;\n\n if (!value) continue;\n\n // Transformed data through all transform pipes\n yield value;\n }\n };\n\n return stream;\n}\n\nexport default XStream;\n" }, { "path": "packages/x-sdk/tests/dekko/dist.test.ts", "content": "import chalk from 'chalk';\nimport $ from 'dekko';\n\n$('dist').isDirectory().hasFile('x-sdk.js').hasFile('x-sdk.min.js').hasFile('x-sdk.min.js.map');\n\n// eslint-disable-next-line no-console\nconsole.log(chalk.green('✨ `dist` directory is valid.'));\n" }, { "path": "packages/x-sdk/tests/dekko/index.test.ts", "content": "import './dist.test';\nimport './lib.test';\n" }, { "path": "packages/x-sdk/tests/dekko/lib.test.ts", "content": "import chalk from 'chalk';\nimport $ from 'dekko';\n\n$('lib').isDirectory().hasFile('index.js').hasFile('index.d.ts');\n\n$('lib/*')\n .filter(\n (filename: string) =>\n !filename.endsWith('index.js') &&\n !filename.endsWith('index.d.ts') &&\n !filename.endsWith('.map'),\n )\n .isDirectory()\n .filter(\n (filename: string) =>\n !filename.endsWith('style') &&\n !filename.endsWith('_util') &&\n !filename.endsWith('locale') &&\n !filename.endsWith('theme'),\n )\n .hasFile('index.js')\n .hasFile('index.d.ts');\n\n// eslint-disable-next-line no-console\nconsole.log(chalk.green('✨ `lib` directory is valid.'));\n" }, { "path": "packages/x-sdk/tests/index.test.ts", "content": "/* eslint-disable global-require */\n\ndescribe('x-sdk import', () => {\n it('exports modules correctly', () => {\n const XRequest = require('../src/index').XRequest;\n const XStream = require('../src/index').XStream;\n const useXChat = require('../src/index').useXChat;\n const useXConversations = require('../src/index').useXConversations;\n expect(XRequest).toBeTruthy();\n expect(XStream).toBeTruthy();\n expect(useXChat).toBeTruthy();\n expect(useXConversations).toBeTruthy();\n });\n});\n" }, { "path": "packages/x-sdk/tests/setup-streams.ts", "content": "import type { DOMWindow } from 'jsdom';\nimport {\n ReadableStream,\n ReadableStreamDefaultReader,\n TransformStream,\n WritableStream,\n} from 'web-streams-polyfill';\n\n/**\n * https://github.com/oven-sh/bun/issues/5648\n *\n * @description Polyfill for TextDecoderStream\n *\n * Copyright 2016 Google Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * Polyfill for TextEncoderStream and TextDecoderStream\n *\n * Modified by Sukka (https://skk.moe) to increase compatibility and performance with Bun.\n */\nexport class PolyfillTextDecoderStream extends TransformStream {\n readonly encoding: string;\n readonly fatal: boolean;\n readonly ignoreBOM: boolean;\n\n constructor(\n encoding = 'utf-8',\n { fatal = false, ignoreBOM = false }: ConstructorParameters[1] = {},\n ) {\n const decoder = new TextDecoder(encoding, { fatal, ignoreBOM });\n super({\n transform(chunk: Uint8Array, controller: TransformStreamDefaultController) {\n const decoded = decoder.decode(chunk, { stream: true });\n if (decoded.length > 0) {\n controller.enqueue(decoded);\n }\n },\n flush(controller: TransformStreamDefaultController) {\n // If {fatal: false} is in options (the default), then the final call to\n // decode() can produce extra output (usually the unicode replacement\n // character 0xFFFD). When fatal is true, this call is just used for its\n // side-effect of throwing a TypeError exception if the input is\n // incomplete.\n const output = decoder.decode();\n if (output.length > 0) {\n controller.enqueue(output);\n }\n },\n });\n\n this.encoding = encoding;\n this.fatal = fatal;\n this.ignoreBOM = ignoreBOM;\n }\n}\n\nexport function setupStreamsPolyfill(win: Window | DOMWindow) {\n Object.defineProperty(win, 'ReadableStream', {\n writable: true,\n value: ReadableStream,\n });\n\n Object.defineProperty(win, 'TransformStream', {\n writable: true,\n value: TransformStream,\n });\n\n Object.defineProperty(win, 'WritableStream', {\n writable: true,\n value: WritableStream,\n });\n\n Object.defineProperty(win, 'ReadableStreamDefaultReader', {\n writable: true,\n value: ReadableStreamDefaultReader,\n });\n\n Object.defineProperty(win, 'TextDecoderStream', {\n writable: true,\n value: PolyfillTextDecoderStream,\n });\n}\n" }, { "path": "packages/x-sdk/tests/setup.ts", "content": "/* eslint-disable no-console */\n\nimport type { DOMWindow } from 'jsdom';\nimport util from 'util';\nimport { setupStreamsPolyfill } from './setup-streams';\n\nconst originConsoleErr = console.error;\n\nconst ignoreWarns = ['validateDOMNesting', 'on an unmounted component', 'not wrapped in act'];\n\n// Hack off React warning to avoid too large log in CI.\nconsole.error = (...args) => {\n const str = args.join('').replace(/\\n/g, '');\n if (ignoreWarns.every((warn) => !str.includes(warn))) {\n originConsoleErr(...args);\n }\n};\n\ntype Writeable = { -readonly [P in keyof T]: T[P] };\n\n// This function can not move to external file since jest setup not support\nexport function fillWindowEnv(window: Window | DOMWindow) {\n const win = window as Writeable & typeof globalThis;\n\n win.resizeTo = (width, height) => {\n win.innerWidth = width || win.innerWidth;\n win.innerHeight = height || win.innerHeight;\n win.dispatchEvent(new Event('resize'));\n };\n win.scrollTo = () => {};\n // ref: https://github.com/ant-design/ant-design/issues/18774\n if (!win.matchMedia) {\n Object.defineProperty(win, 'matchMedia', {\n writable: true,\n configurable: true,\n value: jest.fn((query) => ({\n matches: query.includes('max-width'),\n addListener: jest.fn(),\n removeListener: jest.fn(),\n })),\n });\n }\n\n // Fix css-animation or @rc-component/motion deps on these\n // https://github.com/react-component/motion/blob/9c04ef1a210a4f3246c9becba6e33ea945e00669/src/util/motion.ts#L27-L35\n // https://github.com/yiminghe/css-animation/blob/a5986d73fd7dfce75665337f39b91483d63a4c8c/src/Event.js#L44\n win.AnimationEvent = win.AnimationEvent || win.Event;\n win.TransitionEvent = win.TransitionEvent || win.Event;\n\n // ref: https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom\n // ref: https://github.com/jsdom/jsdom/issues/2524\n Object.defineProperty(win, 'TextEncoder', {\n writable: true,\n value: util.TextEncoder,\n });\n Object.defineProperty(win, 'TextDecoder', {\n writable: true,\n value: util.TextDecoder,\n });\n\n setupStreamsPolyfill(win);\n}\n\n/* eslint-disable global-require */\nif (typeof window !== 'undefined') {\n fillWindowEnv(window);\n}\n\nglobal.requestAnimationFrame = global.requestAnimationFrame || global.setTimeout;\nglobal.cancelAnimationFrame = global.cancelAnimationFrame || global.clearTimeout;\n" }, { "path": "packages/x-sdk/tests/utils.tsx", "content": "import { _rs as onEsResize } from '@rc-component/resize-observer/es/utils/observerUtil';\nimport { _rs as onLibResize } from '@rc-component/resize-observer/lib/utils/observerUtil';\nimport type { RenderOptions, RenderResult } from '@testing-library/react';\nimport { act, render } from '@testing-library/react';\nimport MockDate from 'mockdate';\nimport type { ReactElement } from 'react';\nimport React, { createRef, StrictMode } from 'react';\n\nexport function assertsExist(item?: T): asserts item is T {\n expect(item).not.toBeUndefined();\n expect(item).not.toBeNull();\n}\n\nexport function setMockDate(dateString = '2017-09-18T03:30:07.795') {\n MockDate.set(dateString);\n}\n\nexport function resetMockDate() {\n MockDate.reset();\n}\n\nconst globalTimeout = global.setTimeout;\n\nexport const sleep = async (timeout = 0) => {\n await act(async () => {\n await new Promise((resolve) => {\n globalTimeout(resolve, timeout);\n });\n });\n};\n\nconst customRender = (ui: ReactElement, options?: Omit): RenderResult => {\n try {\n return render(ui, { wrapper: StrictMode, ...options });\n } catch (error) {\n console.error(error);\n throw error;\n }\n};\n\nexport function renderHook(func: () => T): { result: React.RefObject } {\n const result = createRef();\n\n const Demo: React.FC = () => {\n (result as any).current = func();\n\n return null;\n };\n\n customRender();\n\n return { result };\n}\n\n/**\n * Pure render like `@testing-lib` render which will not wrap with StrictMode.\n *\n * Please only use with render times times of memo usage case.\n */\nconst pureRender = render;\n\nexport { pureRender, customRender as render };\n\nexport const triggerResize = (target: Element) => {\n const originGetBoundingClientRect = target.getBoundingClientRect;\n\n target.getBoundingClientRect = () => ({ width: 510, height: 903 }) as DOMRect;\n\n act(() => {\n onLibResize([{ target } as ResizeObserverEntry]);\n onEsResize([{ target } as ResizeObserverEntry]);\n });\n\n target.getBoundingClientRect = originGetBoundingClientRect;\n};\n\n/**\n * Wait for a time delay. Will wait `advanceTime * times` ms.\n *\n * @param advanceTime Default 1000\n * @param times Default 20\n */\nexport async function waitFakeTimer(advanceTime = 1000, times = 20) {\n for (let i = 0; i < times; i += 1) {\n // eslint-disable-next-line no-await-in-loop\n await act(async () => {\n await Promise.resolve();\n\n if (advanceTime > 0) {\n jest.advanceTimersByTime(advanceTime);\n } else {\n jest.runAllTimers();\n }\n });\n }\n}\n\nexport * from '@testing-library/react';\n" }, { "path": "packages/x-sdk/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.base.json\",\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"paths\": {\n \"@ant-design/x-sdk\": [\"index.ts\"],\n \"@ant-design/x-sdk/es/*\": [\"src/*\"],\n \"@ant-design/x-sdk/lib/*\": [\"src/*\"]\n }\n },\n \"include\": [\"**/*\"]\n}\n" }, { "path": "packages/x-sdk/typings/custom-typings.d.ts", "content": "// https://github.com/facebook/create-react-app/blob/f09d3d3a52c1b938cecc977c2bbc0942ea0a7e70/packages/react-scripts/lib/react-app.d.ts#L42-L49\n\ndeclare module 'dekko';\n" }, { "path": "packages/x-sdk/typings/index.d.ts", "content": "/// \n" }, { "path": "packages/x-sdk/typings/jest.d.ts", "content": "declare namespace jest {\n interface Matchers {\n toHaveNoViolations(): R;\n }\n}\n" }, { "path": "packages/x-skill/.claude-plugin/marketplace.json", "content": "{\n \"name\": \"x-agent-skills\",\n \"metadata\": {\n \"description\": \"Ant Design X intelligent agent skills collection\",\n \"descriptionZh\": \"Ant Design X 智能技能库，提供完整的 AI 对话应用开发技能\",\n \"version\": \"2.4.0\",\n \"author\": \"Ant Design X Team\",\n \"homepage\": \"https://github.com/ant-design/x\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/ant-design/x.git\"\n },\n \"keywords\": [\n \"ant-design-x\",\n \"x-chat\",\n \"x-request\",\n \"x-markdown\",\n \"markdown\",\n \"chat-provider\",\n \"ai\",\n \"react\",\n \"typescript\"\n ]\n },\n \"plugins\": [\n {\n \"name\": \"x-sdk-skills\",\n \"description\": \"Ant Design X SDK core skill package, including complete features such as useXChat, XRequest, and custom Provider\",\n \"descriptionZh\": \"Ant Design X SDK 核心技能包，包含 useXChat、XRequest 和自定义 Provider 等完整功能\",\n \"source\": \"./\",\n \"strict\": false,\n \"skills\": [\"./skills/use-x-chat\", \"./skills/x-chat-provider\", \"./skills/x-request\"]\n },\n {\n \"name\": \"x-markdown\",\n \"description\": \"Ant Design X Markdown rendering skill package, providing rich text rendering and chat enhancement features\",\n \"descriptionZh\": \"Ant Design X Markdown 渲染技能包，提供富文本渲染和对话增强功能\",\n \"source\": \"./\",\n \"strict\": false,\n \"skills\": [\"./skills/x-markdown\"]\n }\n ]\n}\n" }, { "path": "packages/x-skill/.fatherrc.ts", "content": "import { defineConfig } from 'father';\n\nexport default defineConfig({\n plugins: ['@rc-component/father-plugin'],\n cjs: {\n input: 'src',\n output: 'bin',\n },\n});\n" }, { "path": "packages/x-skill/.gitignore", "content": ".DS_Store\n__pycache__/\n.idea/\n.vscode/\n/dist\n/node_modules\n.codefuse\npackage-lock.json\n.node\n.claude\n.cursor" }, { "path": "packages/x-skill/.skill.json", "content": "{\n \"targets\": {\n \"codefuse\": {\n \"enabled\": true,\n \"paths\": {\n \"global\": \".codefuse/fuse/skills\",\n \"project\": \".codefuse/skills\"\n }\n },\n \"claude\": {\n \"enabled\": true,\n \"paths\": {\n \"global\": \".claude/skills\",\n \"project\": \".claude/skills\"\n }\n },\n \"cursor\": {\n \"enabled\": true,\n \"paths\": {\n \"global\": \".cursor/skills\",\n \"project\": \".cursor/skills\"\n }\n },\n \"codex\": {\n \"enabled\": true,\n \"paths\": {\n \"global\": \".codex/skills\",\n \"project\": \".codex/skills\"\n }\n }\n }\n}\n" }, { "path": "packages/x-skill/LICENSE", "content": "MIT LICENSE\n\nCopyright (c) 2015-present Ant UED, https://xtech.antfin.com/\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n" }, { "path": "packages/x-skill/README-zh_CN.md", "content": "
    \n\n\n\n

    Ant Design X Skill

    \n\n专为 Ant Design X 打造的智能技能库\n\n[![CI status](https://github.com/ant-design/x/actions/workflows/main.yml/badge.svg)](https://github.com/ant-design/x/actions/workflows/main.yml) [![NPM version](https://img.shields.io/npm/v/@ant-design/x-skill.svg?style=flat-square)](https://npmjs.org/package/@ant-design/x-skill) [![NPM downloads](https://img.shields.io/npm/dm/@ant-design/x-skill.svg?style=flat-square)](https://npmjs.org/package/@ant-design/x-skill) [![bundle size](https://badgen.net/bundlephobia/minzip/@ant-design/x-skill?style=flat-square)](https://bundlephobia.com/package/@ant-design/x-skill) [![Ant Design](https://img.shields.io/badge/-Ant%20Design-blue?labelColor=black&logo=antdesign&style=flat-square)](https://ant.design)\n\n[更新日志](./CHANGELOG.md) · [报告问题](https://github.com/ant-design/x/issues/new?template=bug-report.yml) · [功能请求](https://github.com/ant-design/x/issues/new?template=bug-feature-request.yml) · [English](./README.md) · 中文\n\n
    \n\n## ✨ 核心特性\n\n- 🤖 **智能化开发体验**：基于最佳实践的代码生成和优化建议，让 AI 辅助您的开发\n- ⚡ **效率大幅提升**：减少重复性工作，加速 Ant Design X 项目开发\n- 🛡 **质量保证**：严格遵循 Ant Design X 设计规范，确保代码质量和一致性\n- 🎯 **场景全覆盖**：覆盖对话组件、数据请求、状态管理、Markdown 渲染等常见 AI 应用场景\n- 🔧 **多 IDE 支持**：支持 Claude Code、CodeFuse、Cursor 等主流 AI IDE\n\n## 📦 安装\n\n### 一键安装（推荐）\n\n支持主流 AI IDE，一条命令即可完成安装：\n\n```bash\n# 全局安装技能库\nnpm i -g @ant-design/x-skill\n\n# 智能注册到当前 IDE\nnpx x-skill\n```\n\n### Claude Code 集成\n\n#### 插件市场安装（官方推荐）\n\n**步骤 1：注册插件市场**\n\n在 Claude Code 中执行以下命令，将本仓库添加为插件源：\n\n```bash\n/plugin marketplace add ant-design/x/blob/main/packages/x-skill/\n```\n\n**步骤 2：选择并安装技能**\n\n安装 x-skill 技能包含的技能。\n\n点击 `Install now` 完成安装。\n\n#### 快速安装\n\n也可以直接通过命令安装完整技能包：\n\n```bash\n/plugin install x-sdk-skills@x-agent-skills\n```\n\n### 手动安装\n\n适用于需要定制化配置的场景：\n\n- **全局安装**：将技能文件复制到 `~/.claude/skills` 目录，所有项目可用\n- **项目安装**：将技能文件复制到项目根目录下的 `.claude/skills` 目录，仅当前项目可用\n\n## 🔧 包含的技能\n\n### use-x-chat\n\n对话 SDK 使用指南，帮助您快速集成 Ant Design X 的对话功能。\n\n### x-chat-provider\n\n聊天数据流管理，提供高效的数据流处理方案。\n\n### x-request\n\n网络请求最佳实践，优化 API 调用和数据处理。\n\n### x-markdown\n\nMarkdown 渲染指南，覆盖流式输出、自定义组件映射、插件与主题。\n\n## 🎯 适用场景\n\n- **🚀 新项目启动**：快速搭建 Ant Design X 项目框架，包含完整的配置和最佳实践\n- **⚙️ 功能开发**：获取组件使用、渲染与集成的最佳实践和代码示例，加速功能实现\n- **🔍 问题排查**：智能诊断和解决常见开发问题，提供专业的解决方案\n- **📈 性能优化**：获取性能调优的专业建议，提升应用性能\n\n## 🛠 开发\n\n### 本地开发\n\n```bash\n# 克隆项目\ngit clone https://github.com/ant-design/x.git\n\n# 进入技能目录\ncd packages/x-skill\n\n# 安装依赖\nnpm install\n\n# 开发模式\nnpm run dev\n```\n\n### 构建\n\n```bash\n# 构建项目\nnpm run build\n\n# 运行测试\nnpm test\n```\n\n## 🤝 如何贡献\n\n我们欢迎所有形式的贡献，包括但不限于：\n\n- 🐛 [报告 Bug](https://github.com/ant-design/x/issues/new?template=bug-report.yml)\n- ✨ [提交功能请求](https://github.com/ant-design/x/issues/new?template=bug-feature-request.yml)\n- 📝 [改进文档](https://github.com/ant-design/x/pulls)\n- 💻 [提交代码](https://github.com/ant-design/x/pulls)\n\n在参与贡献之前，请阅读我们的[贡献指南](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md)。\n\n## 📞 社区支持\n\n如果您在使用过程中遇到问题，可以通过以下渠道寻求帮助：\n\n1. [GitHub Discussions](https://github.com/ant-design/x/discussions) - 讨论和问答\n2. [GitHub Issues](https://github.com/ant-design/x/issues) - 问题报告和功能请求\n\n## 📄 许可证\n\n[MIT](./LICENSE)\n" }, { "path": "packages/x-skill/README.md", "content": "
    \n\n\n\n

    Ant Design X Skill

    \n\nIntelligent skill library specially designed for Ant Design X\n\n[![CI status](https://github.com/ant-design/x/actions/workflows/main.yml/badge.svg)](https://github.com/ant-design/x/actions/workflows/main.yml) [![NPM version](https://img.shields.io/npm/v/@ant-design/x-skill.svg?style=flat-square)](https://npmjs.org/package/@ant-design/x-skill) [![NPM downloads](https://img.shields.io/npm/dm/@ant-design/x-skill.svg?style=flat-square)](https://npmjs.org/package/@ant-design/x-skill) [![bundle size](https://badgen.net/bundlephobia/minzip/@ant-design/x-skill?style=flat-square)](https://bundlephobia.com/package/@ant-design/x-skill) [![Ant Design](https://img.shields.io/badge/-Ant%20Design-blue?labelColor=black&logo=antdesign&style=flat-square)](https://ant.design)\n\n[Changelog](./CHANGELOG.md) · [Report Bug](https://github.com/ant-design/x/issues/new?template=bug-report.yml) · [Feature Request](https://github.com/ant-design/x/issues/new?template=bug-feature-request.yml) · English · [中文](./README-zh_CN.md)\n\n
    \n\n## ✨ Core Features\n\n- 🤖 **Intelligent Development Experience**: Code generation and optimization suggestions based on best practices, with AI assisting your development\n- ⚡ **Significant Efficiency Boost**: Reduce repetitive work and accelerate Ant Design X project development\n- 🛡 **Quality Assurance**: Strictly follow Ant Design X design specifications to ensure code quality and consistency\n- 🎯 **Full Scenario Coverage**: Cover common AI application scenarios like conversation components, data requests, state management, and Markdown rendering\n- 🔧 **Multi-IDE Support**: Support mainstream AI IDEs like Claude Code, CodeFuse, and Cursor\n\n## 📦 Installation\n\n### One-click Installation (Recommended)\n\nSupports mainstream AI IDEs, complete installation with a single command:\n\n```bash\n# Install skill library globally\nnpm i -g @ant-design/x-skill\n\n# Smart registration to current IDE\nnpx x-skill\n```\n\n### Claude Code Integration\n\n#### Plugin Marketplace Installation (Officially Recommended)\n\n**Step 1: Register Plugin Marketplace**\n\nExecute the following command in Claude Code to add this repository as a plugin source:\n\n```bash\n/plugin marketplace add ant-design/x/blob/main/packages/x-skill/\n```\n\n**Step 2: Select and Install Skills**\n\nInstall the skills included in the x-skill package.\n\nClick `Install now` to complete the installation.\n\n#### Quick Installation\n\nYou can also directly install the complete skill package through commands:\n\n```bash\n/plugin install x-sdk-skills@x-agent-skills\n```\n\n### Manual Installation\n\nSuitable for scenarios requiring customized configuration:\n\n- **Global Installation**: Copy skill files to the `~/.claude/skills` directory, available for all projects\n- **Project Installation**: Copy skill files to the `.claude/skills` directory in the project root, available only for the current project\n\n## 🔧 Included Skills\n\n### use-x-chat\n\nConversation SDK usage guide to help you quickly integrate Ant Design X conversation features.\n\n### x-chat-provider\n\nChat data flow management, providing efficient data stream processing solutions.\n\n### x-request\n\nNetwork request best practices, optimizing API calls and data processing.\n\n### x-markdown\n\nMarkdown rendering guide for streaming output, component mapping, plugins, and themes.\n\n## 🎯 Applicable Scenarios\n\n- **🚀 New Project Startup**: Quickly set up Ant Design X project framework with complete configuration and best practices\n- **⚙️ Feature Development**: Get best practices and code examples for component usage, rendering, and integration to accelerate feature implementation\n- **🔍 Problem Troubleshooting**: Intelligent diagnosis and resolution of common development issues with professional solutions\n- **📈 Performance Optimization**: Get professional advice for performance tuning to improve application performance\n\n## 🛠 Development\n\n### Local Development\n\n```bash\n# Clone the project\ngit clone https://github.com/ant-design/x.git\n\n# Enter the skill directory\ncd packages/x-skill\n\n# Install dependencies\nnpm install\n\n# Development mode\nnpm run dev\n```\n\n### Build\n\n```bash\n# Build the project\nnpm run build\n\n# Run tests\nnpm test\n```\n\n## 🤝 How to Contribute\n\nWe welcome all forms of contribution, including but not limited to:\n\n- 🐛 [Report Bugs](https://github.com/ant-design/x/issues/new?template=bug-report.yml)\n- ✨ [Submit Feature Requests](https://github.com/ant-design/x/issues/new?template=bug-feature-request.yml)\n- 📝 [Improve Documentation](https://github.com/ant-design/x/pulls)\n- 💻 [Submit Code](https://github.com/ant-design/x/pulls)\n\nBefore participating, please read our [Contributor Guide](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md).\n\n## 📞 Community Support\n\nIf you encounter problems during use, you can seek help through the following channels:\n\n1. [GitHub Discussions](https://github.com/ant-design/x/discussions) - Discussions and Q&A\n2. [GitHub Issues](https://github.com/ant-design/x/issues) - Bug reports and feature requests\n\n## 📄 License\n\n[MIT](./LICENSE)\n" }, { "path": "packages/x-skill/package.json", "content": "{\n \"name\": \"@ant-design/x-skill\",\n \"version\": \"2.4.0\",\n \"description\": \"CLI tool for installing AI skills to development tools like Claude, Cursor, etc.\",\n \"homepage\": \"https://x.ant.design/x-skills/introduce\",\n \"bugs\": {\n \"url\": \"https://github.com/ant-design/x/issues\"\n },\n \"bin\": {\n \"x-skill\": \"bin/index.js\"\n },\n \"keywords\": [\n \"AI\",\n \"SKILL\",\n \"Agent\",\n \"Copilot\",\n \"ant\",\n \"sdk\",\n \"framework\",\n \"react\"\n ],\n \"scripts\": {\n \"precompile\": \"npm run skillApi && npm run prestart\",\n \"compile\": \"father build\",\n \"skillApi\": \"tsx scripts/skillApi.ts\",\n \"generate-meta\": \"tsx scripts/generate-meta.ts && biome format --write src/skill-meta.json\",\n \"test\": \"echo 'test skipped for x-skill' && exit 0\",\n \"pretest\": \"echo 'test skipped for x-skill' && exit 0\",\n \"coverage\": \"echo 'coverage skipped for x-skill' && exit 0\",\n \"test:dekko\": \"tsx scripts/dekko.ts\",\n \"prepublishOnly\": \"tsx ../../scripts/pre-publish.ts x-skill\",\n \"version\": \"tsx scripts/generate-version.ts\",\n \"clean\": \"rm -rf coverage lib es\",\n \"start\": \"father build && node bin/index.js\",\n \"prestart\": \"npm run version && npm run generate-meta\",\n \"lint\": \"biome lint src/\",\n \"tsc\": \"tsc --noEmit\"\n },\n \"sideEffects\": true,\n \"files\": [\n \"skills\",\n \"skills-zh\",\n \"bin\",\n \".skill.json\",\n \".claude-plugin\",\n \"LICENSE\"\n ],\n \"license\": \"MIT\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/ant-design/x\"\n },\n \"devDependencies\": {\n \"@biomejs/biome\": \"^2.0.5\",\n \"@types/node\": \"^25.3.5\",\n \"tsx\": \"^4.19.1\",\n \"typescript\": \"~5.9.3\"\n },\n \"dependencies\": {\n \"figlet\": \"^1.10.0\",\n \"ora\": \"^9.3.0\",\n \"progress\": \"^2.0.3\"\n }\n}\n" }, { "path": "packages/x-skill/scripts/config.ts", "content": "/**\n * 技能API配置\n * 将硬编码的路径移至配置文件中，提高灵活性和可维护性\n */\n\nimport * as path from 'path';\nimport { fileURLToPath } from 'url';\n\nexport interface SkillConfig {\n [skillName: string]: string;\n}\n\nexport interface Config {\n zh: SkillConfig;\n en: SkillConfig;\n paths: {\n /** 中文技能目录 */\n skillsZhDir: string;\n /** 英文技能目录 */\n skillsEnDir: string;\n /** 项目根目录 */\n rootDir: string;\n /** bin目录 */\n binDir: string;\n /** .claude-plugin目录 */\n claudePluginDir: string;\n /** marketplace.json文件路径 */\n marketplaceJsonPath: string;\n /** package.json文件路径 */\n packageJsonPath: string;\n };\n}\n\n// 基于当前文件位置计算相对路径（兼容ES模块）\nconst __filename = fileURLToPath(import.meta.url);\nconst scriptDir = path.dirname(__filename);\nconst projectRoot = path.join(scriptDir, '..');\n\n// 原有的文档链接配置\nconst skillConfig: Config = {\n zh: {\n 'use-x-chat': 'packages/x/docs/x-sdk/use-x-chat.zh-CN.md',\n 'x-request': 'packages/x/docs/x-sdk/x-request.zh-CN.md',\n 'x-markdown': 'packages/x/docs/x-markdown/examples.zh-CN.md',\n },\n en: {\n 'use-x-chat': 'packages/x/docs/x-sdk/use-x-chat.en-US.md',\n 'x-request': 'packages/x/docs/x-sdk/x-request.en-US.md',\n 'x-markdown': 'packages/x/docs/x-markdown/examples.en-US.md',\n },\n paths: {\n // 中文技能目录\n skillsZhDir: path.join(projectRoot, 'skills-zh'),\n // 英文技能目录\n skillsEnDir: path.join(projectRoot, 'skills'),\n // 项目根目录\n rootDir: projectRoot,\n // bin目录\n binDir: path.join(projectRoot, 'bin'),\n // .claude-plugin目录\n claudePluginDir: path.join(projectRoot, '.claude-plugin'),\n // marketplace.json文件路径\n marketplaceJsonPath: path.join(projectRoot, '.claude-plugin', 'marketplace.json'),\n // package.json文件路径\n packageJsonPath: path.join(projectRoot, 'package.json'),\n },\n};\n\nexport default skillConfig;\n" }, { "path": "packages/x-skill/scripts/dekko.ts", "content": "#!/usr/bin/env node\n\n/**\n * dekko.ts - Use dekko tool to check X-Skill project structure\n *\n * Use dekko assertion library to validate:\n * 1. bin/index.js file exists and is executable\n * 2. Each skill has a SKILL.md file\n * 3. Skill directory structure meets specifications\n */\n\nimport chalk from 'chalk';\nimport $ from 'dekko';\nimport * as fs from 'fs';\nimport * as path from 'path';\nimport config from './config';\n\n// Get project root directory\nconst rootPath = config.paths.rootDir;\n\n// Check bin directory\n$(config.paths.binDir).isDirectory().hasFile('index.js');\n// Check skills directories\n$(config.paths.skillsEnDir).isDirectory();\n$(config.paths.skillsZhDir).isDirectory();\n\n// Get all skill directories for English skills\nconst skillsEnPath = config.paths.skillsEnDir;\nconst skillsZhPath = config.paths.skillsZhDir;\n\nconst skillsEn = fs\n .readdirSync(skillsEnPath, { withFileTypes: true })\n .filter((dirent) => dirent.isDirectory())\n .map((dirent) => dirent.name)\n .filter((name) => !name.startsWith('.'));\n\nconst skillsZh = fs\n .readdirSync(skillsZhPath, { withFileTypes: true })\n .filter((dirent) => dirent.isDirectory())\n .map((dirent) => dirent.name)\n .filter((name) => !name.startsWith('.'));\n\n// Check English skills structure\nskillsEn.forEach((skillName) => {\n const skillPath = path.join(rootPath, 'skills', skillName);\n\n // Check skill directory structure\n $(skillPath).isDirectory().hasFile('SKILL.md');\n $(path.join(skillPath, 'reference')).isDirectory();\n});\n\n// Check Chinese skills structure\nskillsZh.forEach((skillName) => {\n const skillPath = path.join(rootPath, 'skills-zh', skillName);\n\n // Check skill directory structure\n $(skillPath).isDirectory().hasFile('SKILL.md');\n $(path.join(skillPath, 'reference')).isDirectory();\n});\n\n// Output success message\nconst totalSkills = skillsEn.length + skillsZh.length;\nconsole.log(chalk.green('✨ X-Skill project structure check passed!'));\nconsole.log(chalk.blue(`📁 Found ${totalSkills} skills:`));\nconsole.log(chalk.blue(` 📁 ${skillsEn.length} English skills in /skills/`));\nconsole.log(chalk.blue(` 📁 ${skillsZh.length} Chinese skills in /skills-zh/`));\n\n[...skillsEn, ...skillsZh].forEach((name) => {\n console.log(chalk.blue(` ✓ ${name}`));\n});\n" }, { "path": "packages/x-skill/scripts/generate-meta.ts", "content": "#!/usr/bin/env tsx\n\nimport fs from 'fs';\nimport path from 'path';\n\n/**\n * 自动生成skill元数据配置文件的脚本\n * 从skill目录下的SKILL.md文件和marketplace.json中提取信息\n */\n\ninterface SkillMetadata {\n skill: string;\n name: string;\n version: string;\n desc: string;\n descZh: string;\n tags: string[];\n}\n\ninterface MarketplaceConfig {\n plugins: Array<{\n name: string;\n description: string;\n descriptionZh: string;\n skills: string[];\n }>;\n}\n\nconst SKILL_ROOT_EN = path.join(__dirname, '../skills');\nconst SKILL_ROOT_ZH = path.join(__dirname, '../skills-zh');\nconst OUTPUT_PATH = path.join(__dirname, '../src/skill-meta.json');\nconst MARKETPLACE_PATH = path.join(__dirname, '../.claude-plugin/marketplace.json');\n\n/**\n * 从marketplace.json读取插件配置\n */\nfunction readMarketplaceConfig(): MarketplaceConfig {\n if (!fs.existsSync(MARKETPLACE_PATH)) {\n console.warn('marketplace.json not found');\n return { plugins: [] };\n }\n\n const content = fs.readFileSync(MARKETPLACE_PATH, 'utf8');\n return JSON.parse(content);\n}\n\n/**\n * 从SKILL.md文件中提取元数据\n */\nfunction extractSkillMetadata(skillName: string): SkillMetadata | null {\n const skillFileEn = path.join(SKILL_ROOT_EN, skillName, 'SKILL.md');\n const skillFileZh = path.join(SKILL_ROOT_ZH, skillName, 'SKILL.md');\n\n // 从package.json读取版本号\n const packageJsonPath = path.join(__dirname, '../package.json');\n const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));\n const packageVersion = packageJson.version;\n\n let descEn = '';\n let descZh = '';\n let version = packageVersion;\n let name = skillName;\n\n // 读取英文描述\n if (fs.existsSync(skillFileEn)) {\n const contentEn = fs.readFileSync(skillFileEn, 'utf8');\n const frontMatterMatchEn = contentEn.match(/^---\\n([\\s\\S]*?)\\n---/);\n\n if (frontMatterMatchEn) {\n const frontMatter = frontMatterMatchEn[1];\n const lines = frontMatter.split('\\n');\n\n lines.forEach((line) => {\n const colonIndex = line.indexOf(':');\n if (colonIndex > 0) {\n const key = line.substring(0, colonIndex).trim();\n const value = line.substring(colonIndex + 1).trim();\n if (key === 'description') {\n descEn = value;\n } else if (key === 'name') {\n name = value;\n } else if (key === 'version') {\n version = value;\n }\n }\n });\n }\n }\n\n // 读取中文描述\n if (fs.existsSync(skillFileZh)) {\n const contentZh = fs.readFileSync(skillFileZh, 'utf8');\n const frontMatterMatchZh = contentZh.match(/^---\\n([\\s\\S]*?)\\n---/);\n\n if (frontMatterMatchZh) {\n const frontMatter = frontMatterMatchZh[1];\n const lines = frontMatter.split('\\n');\n\n lines.forEach((line) => {\n const colonIndex = line.indexOf(':');\n if (colonIndex > 0) {\n const key = line.substring(0, colonIndex).trim();\n const value = line.substring(colonIndex + 1).trim();\n if (key === 'description') {\n descZh = value;\n }\n }\n });\n }\n }\n\n // 如果中文描述不存在，使用英文描述\n if (!descZh && descEn) {\n descZh = descEn;\n }\n\n // 如果英文描述不存在，使用中文描述\n if (!descEn && descZh) {\n descEn = descZh;\n }\n\n // 从skill名称和marketplace.json推断标签\n const tags = extractTags(skillName);\n\n return {\n skill: skillName,\n name: name || skillName,\n version: version || packageVersion,\n desc: descEn,\n descZh: descZh || descEn,\n tags,\n };\n}\n\n/**\n * 从skill名称提取标签\n */\nfunction extractTags(skillName: string): string[] {\n const tags: string[] = [];\n\n // 基于skill名称的关键词提取\n if (skillName.includes('chat')) tags.push('chat');\n if (skillName.includes('provider')) tags.push('provider');\n if (skillName.includes('request')) tags.push('request');\n if (skillName.includes('use-')) tags.push('hook');\n if (skillName.includes('x-')) tags.push('sdk');\n\n return tags.length > 0 ? tags : [skillName];\n}\n\n/**\n * 获取skill对应的插件信息\n */\nfunction getPluginInfo(skillName: string): { category: string; desc: string; descZh: string } {\n const config = readMarketplaceConfig();\n\n if (config.plugins && config.plugins.length > 0) {\n for (const plugin of config.plugins) {\n if (plugin.skills && Array.isArray(plugin.skills)) {\n // 检查skill是否在插件的skills列表中\n const skillPaths = plugin.skills.map((skill) =>\n skill.replace('./skills/', '').replace(/\\/$/, ''),\n );\n if (skillPaths.includes(skillName)) {\n return {\n category: plugin.name || 'x-sdk-skills',\n desc: plugin.description || '',\n descZh: (plugin as any).descriptionZh || plugin.description || '',\n };\n }\n }\n }\n }\n return {\n category: 'x-sdk-skills',\n desc: 'Ant Design X SDK core skill package',\n descZh: 'Ant Design X SDK 核心技能包',\n };\n}\n\n/**\n * 扫描skill目录\n */\nfunction scanSkills(): SkillMetadata[] {\n if (!fs.existsSync(SKILL_ROOT_EN)) {\n console.error(`Skill root directory not found: ${SKILL_ROOT_EN}`);\n return [];\n }\n\n const skills: SkillMetadata[] = [];\n const items = fs.readdirSync(SKILL_ROOT_EN);\n\n items.forEach((item) => {\n const skillPath = path.join(SKILL_ROOT_EN, item);\n const stat = fs.statSync(skillPath);\n\n if (stat.isDirectory()) {\n const metadata = extractSkillMetadata(item);\n if (metadata) {\n skills.push(metadata);\n }\n }\n });\n\n return skills;\n}\n\n/**\n * 生成配置文件\n */\nfunction generateSkillMeta(): void {\n console.log('🔍 Scanning skills...');\n const skills = scanSkills();\n\n if (skills.length === 0) {\n console.warn('No skills found');\n return;\n }\n\n console.log(`✅ Found ${skills.length} skills`);\n\n // 确保输出目录存在\n const outputDir = path.dirname(OUTPUT_PATH);\n if (!fs.existsSync(outputDir)) {\n fs.mkdirSync(outputDir, { recursive: true });\n }\n\n // 按分类组织skill，并添加分类描述\n const groupedSkills = skills.reduce(\n (acc, skill) => {\n const pluginInfo = getPluginInfo(skill.skill);\n if (!acc[pluginInfo.category]) {\n acc[pluginInfo.category] = {\n description: pluginInfo.desc,\n descriptionZh: pluginInfo.descZh,\n skills: [],\n };\n }\n acc[pluginInfo.category].skills.push(skill);\n return acc;\n },\n {} as Record<\n string,\n {\n description: string;\n descriptionZh: string;\n skills: SkillMetadata[];\n }\n >,\n );\n\n // 写入配置文件\n fs.writeFileSync(OUTPUT_PATH, JSON.stringify(groupedSkills, null, 2));\n console.log(`📝 Generated skill meta file: ${OUTPUT_PATH}`);\n\n // 打印生成的skill列表\n console.log('\\n📋 Generated skills:');\n Object.entries(groupedSkills).forEach(([category, group]) => {\n console.log(` ${category}:`);\n group.skills.forEach((skill) => {\n console.log(` - ${skill.name}`);\n });\n });\n}\n\n// 执行生成\nif (require.main === module) {\n generateSkillMeta();\n}\n\nexport { generateSkillMeta, scanSkills, extractSkillMetadata };\n" }, { "path": "packages/x-skill/scripts/generate-version.ts", "content": "#!/usr/bin/env node\n\nimport { execSync } from 'child_process';\nimport fs from 'fs';\nimport path, { dirname } from 'path';\nimport { fileURLToPath } from 'url';\nimport config from './config';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = dirname(__filename);\n\nconst packageJsonPath = config.paths.packageJsonPath;\nconst skillsZhDir = config.paths.skillsZhDir;\nconst skillsEnDir = config.paths.skillsEnDir;\nconst marketplaceJsonPath = config.paths.marketplaceJsonPath;\n\n// Read package.json\nconst packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));\nconst currentVersion = packageJson.version;\n\nconsole.log(`📦 Current package version: ${currentVersion}`);\n\nconst skillsZh = fs\n .readdirSync(skillsZhDir, { withFileTypes: true })\n .filter((dirent) => dirent.isDirectory())\n .map((dirent) => dirent.name);\n\nconst skillsEn = fs\n .readdirSync(skillsEnDir, { withFileTypes: true })\n .filter((dirent) => dirent.isDirectory())\n .map((dirent) => dirent.name);\n\nconsole.log(\n `🔍 Found ${skillsZh.length} Chinese skills and ${skillsEn.length} English skills to update:`,\n);\n\n// Update each skill's SKILL.md files for both languages\nlet updatedCount = 0;\n\n// Update Chinese skills\nfor (const skillName of skillsZh) {\n const skillMdPath = path.join(skillsZhDir, skillName, 'SKILL.md');\n\n if (fs.existsSync(skillMdPath)) {\n try {\n let content = fs.readFileSync(skillMdPath, 'utf-8');\n\n // Use regex to replace version field\n const versionRegex = /^version:\\s*.*$/m;\n const newVersionLine = `version: ${currentVersion}`;\n\n if (versionRegex.test(content)) {\n content = content.replace(versionRegex, newVersionLine);\n } else {\n // If no version field exists, add it to front matter\n const frontMatterRegex = /^---\\n([\\s\\S]*?)\\n---/;\n if (frontMatterRegex.test(content)) {\n content = content.replace(frontMatterRegex, (_match, frontMatter) => {\n return `---\\n${frontMatter}\\n${newVersionLine}\\n---`;\n });\n }\n }\n\n fs.writeFileSync(skillMdPath, content, 'utf-8');\n console.log(`✅ Updated skills-zh/${skillName}/SKILL.md`);\n updatedCount++;\n } catch (error) {\n console.error(`❌ Failed to update skills-zh/${skillName}/SKILL.md:`, error);\n }\n } else {\n console.log(`⚠️ skills-zh/${skillName}/SKILL.md not found`);\n }\n}\n\n// Update English skills\nfor (const skillName of skillsEn) {\n const skillMdPath = path.join(skillsEnDir, skillName, 'SKILL.md');\n\n if (fs.existsSync(skillMdPath)) {\n try {\n let content = fs.readFileSync(skillMdPath, 'utf-8');\n\n // Use regex to replace version field\n const versionRegex = /^version:\\s*.*$/m;\n const newVersionLine = `version: ${currentVersion}`;\n\n if (versionRegex.test(content)) {\n content = content.replace(versionRegex, newVersionLine);\n } else {\n // If no version field exists, add it to front matter\n const frontMatterRegex = /^---\\n([\\s\\S]*?)\\n---/;\n if (frontMatterRegex.test(content)) {\n content = content.replace(frontMatterRegex, (_match, frontMatter) => {\n return `---\\n${frontMatter}\\n${newVersionLine}\\n---`;\n });\n }\n }\n\n fs.writeFileSync(skillMdPath, content, 'utf-8');\n console.log(`✅ Updated skills/${skillName}/SKILL.md`);\n updatedCount++;\n } catch (error) {\n console.error(`❌ Failed to update skills/${skillName}/SKILL.md:`, error);\n }\n } else {\n console.log(`⚠️ skills/${skillName}/SKILL.md not found`);\n }\n}\n\n// Update marketplace.json version\nconsole.log(`\\n🔄 Updating marketplace.json version...`);\ntry {\n if (fs.existsSync(marketplaceJsonPath)) {\n const marketplaceJson = JSON.parse(fs.readFileSync(marketplaceJsonPath, 'utf-8'));\n marketplaceJson.metadata.version = currentVersion;\n fs.writeFileSync(marketplaceJsonPath, `${JSON.stringify(marketplaceJson, null, 2)}\\n`, 'utf-8');\n console.log(`✅ Updated marketplace.json version to ${currentVersion}`);\n } else {\n console.log(`⚠️ marketplace.json not found at ${marketplaceJsonPath}`);\n }\n} catch (error) {\n console.error(`❌ Failed to update marketplace.json:`, error);\n}\n\n// Format marketplace.json with biome\nconsole.log(`\\n🎨 Formatting marketplace.json...`);\ntry {\n execSync('npx biome format --write .claude-plugin/marketplace.json', {\n stdio: 'inherit',\n cwd: path.join(__dirname, '..'),\n });\n console.log(`✅ marketplace.json formatted successfully`);\n} catch (error: any) {\n console.error(`⚠️ Failed to format marketplace.json:`, error.message);\n}\n\nconsole.log(\n `\\n🎉 Successfully updated ${updatedCount} skills and marketplace.json with version ${currentVersion}`,\n);\n" }, { "path": "packages/x-skill/scripts/skillApi.ts", "content": "#!/usr/bin/env node\n\nimport fs from 'fs';\nimport path, { dirname } from 'path';\nimport { fileURLToPath } from 'url';\nimport config, { type Config, type SkillConfig } from './config';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = dirname(__filename);\n\n/**\n * Extract content after ## API from markdown file\n * @param filePath markdown file path\n * @returns API section content\n */\nfunction extractApiContent(filePath: string): string {\n try {\n const content = fs.readFileSync(filePath, 'utf-8');\n const lines = content.split('\\n');\n\n // 查找## API的位置\n const apiIndex = lines.findIndex((line) => line.trim() === '## API');\n\n if (apiIndex === -1) {\n console.warn(`## API section not found in file ${filePath}`);\n return '';\n }\n\n let apiStartIndex = apiIndex + 1;\n\n // 跳过开头的空行\n while (apiStartIndex < lines.length && lines[apiStartIndex].trim() === '') {\n apiStartIndex++;\n }\n\n // 提取API后的所有内容，保持原始格式\n const apiContent = lines.slice(apiStartIndex).join('\\n');\n return apiContent;\n } catch (error) {\n console.error(`Error reading file ${filePath}:`, error);\n return '';\n }\n}\n\n/**\n * Ensure directory exists\n * @param dirPath directory path\n */\nfunction ensureDirectoryExists(dirPath: string): void {\n if (!fs.existsSync(dirPath)) {\n fs.mkdirSync(dirPath, { recursive: true });\n }\n}\n\n/**\n * Process API documentation for a single language\n * @param lang language code\n * @param skills skill configuration\n */\nfunction processLanguage(lang: string, skills: SkillConfig): void {\n console.log(`Processing ${lang} language...`);\n\n // 根据语言确定目标目录\n const baseTargetDir = lang === 'zh' ? config.paths.skillsZhDir : config.paths.skillsEnDir;\n\n for (const [skillName, sourcePath] of Object.entries(skills)) {\n console.log(` Processing skill: ${skillName}`);\n\n const fullSourcePath = path.join(__dirname, '..', '..', '..', sourcePath);\n const apiContent = extractApiContent(fullSourcePath);\n if (!apiContent) {\n console.warn(` Skipping ${skillName}: API content not found`);\n continue;\n }\n\n // 构建目标路径\n const targetDir = path.join(baseTargetDir, skillName, 'reference');\n const targetFile = path.join(targetDir, 'API.md');\n\n // 确保目录存在\n ensureDirectoryExists(targetDir);\n\n // 写入API文档\n try {\n fs.writeFileSync(targetFile, apiContent);\n console.log(` Updated: ${targetFile}`);\n } catch (error) {\n console.error(` Error writing file ${targetFile}:`, error);\n }\n }\n}\n\n/**\n * Main function\n */\nfunction main(): void {\n console.log('Starting skill API documentation update...\\n');\n\n const typedConfig = config as Config;\n\n // Process Chinese\n processLanguage('zh', typedConfig.zh);\n console.log();\n\n // Process English\n processLanguage('en', typedConfig.en);\n\n console.log('\\nAPI documentation update completed!');\n}\n\n// 如果直接运行此脚本\nif (import.meta.url === `file://${__filename}`) {\n main();\n}\n\nexport default {\n extractApiContent,\n processLanguage,\n main,\n};\n" }, { "path": "packages/x-skill/scripts/typings/custom-typings.d.ts", "content": "declare module 'dekko';\n" }, { "path": "packages/x-skill/skills/use-x-chat/SKILL.md", "content": "---\nname: use-x-chat\nversion: 2.4.0\ndescription: Focus on explaining how to use the useXChat Hook, including custom Provider integration, message management, error handling, etc.\n---\n\n# 🎯 Skill Positioning\n\n> **Core Positioning**: Use the `useXChat` Hook to build professional AI conversation applications **Prerequisites**: Already have a custom Chat Provider (refer to [x-chat-provider skill](../x-chat-provider))\n\n## Table of Contents\n\n- [🚀 Quick Start](#-quick-start)\n - [Dependency Management](#1-dependency-management)\n - [Three-step Integration](#2-three-step-integration)\n- [🧩 Core Concepts](#-core-concepts)\n - [Technology Stack Architecture](#technology-stack-architecture)\n - [Data Model](#data-model)\n- [🔧 Core Function Details](#-core-function-details)\n - [Message Management](#1-message-management)\n - [Request Control](#2-request-control)\n - [Error Handling](#3-error-handling)\n - [Complete Example Project](#-complete-example-project)\n- [📋 Prerequisites and Dependencies](#-prerequisites-and-dependencies)\n- [🚨 Development Rules](#-development-rules)\n- [🔗 Reference Resources](#-reference-resources)\n - [📚 Core Reference Documentation](#-core-reference-documentation)\n - [🌐 SDK Official Documentation](#-sdk-official-documentation)\n - [💻 Example Code](#-example-code)\n\n# 🚀 Quick Start\n\n## 1. Dependency Management\n\n### 🎯 Automatic Dependency Handling\n\n### 📋 System Requirements\n\n- **@ant-design/x-sdk**: 2.2.2+ (automatically installed)\n- **@ant-design/x**: latest version (UI components, automatically installed)\n\n### ⚠️ Version Issue Auto-fix\n\nIf version mismatch is detected, the skill will automatically:\n\n- ✅ Prompt current version status\n- ✅ Provide fix suggestions\n- ✅ Use relative paths to ensure compatibility\n\n#### 🎯 Built-in Version Check\n\nThe use-x-chat skill has built-in version checking functionality, automatically checking version compatibility on startup:\n\n**🔍 Auto-check Function** The skill will automatically check if the `@ant-design/x-sdk` version meets requirements (≥2.2.2) on startup:\n\n**📋 Check Contents:**\n\n- ✅ Currently installed version\n- ✅ Whether it meets minimum requirements (≥2.2.2)\n- ✅ Automatically provide fix suggestions\n- ✅ Friendly error prompts\n\n**🛠️ Version Issue Fix** If version mismatch is detected, the skill will provide specific fix commands:\n\n```bash\n# Auto-prompted fix commands\nnpm install @ant-design/x-sdk@^2.2.2\n\n# Or install latest version\nnpm install @ant-design/x-sdk@latest\n```\n\n## 2. Three-step Integration\n\n### Step 1: Prepare Provider\n\nThis part is handled by the x-chat-provider skill\n\n```ts\nimport { MyChatProvider } from './MyChatProvider';\nimport { XRequest } from '@ant-design/x-sdk';\n\n// Recommended to use XRequest as the default request method\nconst provider = new MyChatProvider({\n // Default use XRequest, no need for custom fetch\n request: XRequest('https://your-api.com/chat'),\n // When requestPlaceholder is set, placeholder message will be displayed before request starts\n requestPlaceholder: {\n content: 'Thinking...',\n role: 'assistant',\n timestamp: Date.now(),\n },\n // When requestFallback is set, fallback message will be displayed when request fails\n requestFallback: (_, { error, errorInfo, messageInfo }) => {\n if (error.name === 'AbortError') {\n return {\n content: messageInfo?.message?.content || 'Reply cancelled',\n role: 'assistant' as const,\n timestamp: Date.now(),\n };\n }\n return {\n content: errorInfo?.error?.message || 'Network error, please try again later',\n role: 'assistant' as const,\n timestamp: Date.now(),\n };\n },\n});\n```\n\n### Step 2: Basic Usage\n\n```tsx\nimport { useXChat } from '@ant-design/x-sdk';\n\nconst ChatComponent = () => {\n const { messages, onRequest, isRequesting } = useXChat({ provider });\n\n return (\n
    \n {messages.map((msg) => (\n
    \n {msg.message.role}: {msg.message.content}\n
    \n ))}\n \n
    \n );\n};\n```\n\n### Step 3: UI Integration\n\n```tsx\nimport { Bubble, Sender } from '@ant-design/x';\n\nconst ChatUI = () => {\n const { messages, onRequest, isRequesting, abort } = useXChat({ provider });\n\n return (\n
    \n \n onRequest({ query: content })}\n onCancel={abort}\n />\n
    \n );\n};\n```\n\n# 🧩 Core Concepts\n\n## Technology Stack Architecture\n\n```mermaid\ngraph TD\n A[useXChat Hook] --> B[Chat Provider]\n B --> C[XRequest]\n A --> D[Ant Design X UI]\n D --> E[Bubble Component]\n D --> F[Sender Component]\n```\n\n### Data Model\n\n> ⚠️ **Important Reminder**: `messages` type is `MessageInfo[]`, not direct `MessageType`\n\n```ts\ninterface MessageInfo {\n id: number | string; // Message unique identifier\n message: Message; // Actual message content\n status: MessageStatus; // Sending status\n extraInfo?: AnyObject; // Extended information\n}\n\n// Message status enum\ntype MessageStatus = 'local' | 'loading' | 'updating' | 'success' | 'error' | 'abort';\n```\n\n# 🔧 Core Function Details\n\n> 💡 **Tip**: API may update with versions, it is recommended to check [official documentation](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/use-x-chat.en-US.md) for the latest information\n\nCore functionality reference content [CORE.md](reference/CORE.md)\n\n# 📋 Prerequisites and Dependencies\n\n## ⚠️ Important Dependencies\n\n**use-x-chat must depend on one of the following skills:**\n\n| Dependency Type | Skill | Description | Required |\n| --- | --- | --- | --- |\n| **Core Dependency** | **x-chat-provider** | Provides custom Provider instance, default uses XRequest, **must** be used with use-x-chat | **Required** |\n| **Or** | **Built-in Provider** | OpenAI/DeepSeek and other built-in Providers, default uses XRequest | **Required** |\n| **Recommended Dependency** | **x-request** | Configure request parameters and authentication, as the default request method | **Recommended** |\n\n## 🎯 Usage Scenario Comparison Table\n\n| Usage Scenario | Required Skill Combination | Usage Order |\n| --- | --- | --- |\n| **Private API Adaptation** | x-chat-provider → use-x-chat | Create Provider first, then use |\n| **Standard API Usage** | use-x-chat (built-in Provider) | Direct use |\n| **Authentication Configuration Needed** | x-request → use-x-chat | Configure request first, then use |\n| **Complete Customization** | x-chat-provider → x-request → use-x-chat | Complete workflow |\n\n# 🚨 Development Rules\n\n## Before using use-x-chat, must confirm:\n\n- [ ] **Has Provider source** (choose one of the following):\n - [ ] Has created custom Provider with **x-chat-provider**\n - [ ] Decided to use built-in Provider (OpenAI/DeepSeek)\n- [ ] @ant-design/x-sdk is installed\n- [ ] Understand MessageInfo data structure\n- [ ] UI components are ready\n\n### Test Case Rules\n\n- **If the user does not explicitly need test cases, do not add test files**\n- **Only create test cases when the user explicitly requests them**\n\n### Code Quality Rules\n\n- **After completion, must check types**: Run `tsc --noEmit` to ensure no type errors\n- **Keep code clean**: Remove all unused variables and imports\n\n# 🔗 Reference Resources\n\n## 📚 Core Reference Documentation\n\n- [API.md](reference/API.md) - Complete API reference documentation\n- [EXAMPLES.md](reference/EXAMPLES.md) - All practical example code\n\n## 🌐 SDK Official Documentation\n\n- [useXChat Official Documentation](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/use-x-chat.en-US.md)\n- [XRequest Official Documentation](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/x-request.en-US.md)\n- [Chat Provider Official Documentation](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/chat-provider.en-US.md)\n\n## 💻 Example Code\n\n- [custom-provider-width-ui.tsx](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/demos/chat-providers/custom-provider-width-ui.tsx) - Complete example of custom Provider\n" }, { "path": "packages/x-skill/skills/use-x-chat/reference/API.md", "content": "### useXChat\n\n```tsx | pure\ntype useXChat<\n ChatMessage extends SimpleType = object,\n ParsedMessage extends SimpleType = ChatMessage,\n Input = RequestParams,\n Output = SSEOutput,\n> = (config: XChatConfig) => XChatConfigReturnType;\n```\n\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| ChatMessage | Message data type, defines the structure of chat messages | object | object | - |\n| ParsedMessage | Parsed message type, message format for component consumption | ChatMessage | ChatMessage | - |\n| Input | Request parameter type, defines the structure of request parameters | RequestParams\\ | RequestParams\\ | - |\n| Output | Response data type, defines the format of received response data | SSEOutput | SSEOutput | - |\n\n### XChatConfig\n\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| provider | Data provider used to convert data and requests of different structures into formats that useXChat can consume. The platform includes built-in `DefaultChatProvider` and `OpenAIChatProvider`, and you can also implement your own Provider by inheriting `AbstractChatProvider`. See: [Chat Provider Documentation](/x-sdks/chat-provider) | AbstractChatProvider\\ | - | - |\n| conversationKey | Session unique identifier (globally unique), used to distinguish different sessions | string | Symbol('ConversationKey') | - |\n| defaultMessages | Default display messages | MessageInfo\\[] \\| (info: { conversationKey?: string }) => MessageInfo\\[] \\| (info: { conversationKey?: string }) => Promise\\[]\\> | - | - |\n| parser | Converts ChatMessage into ParsedMessage for consumption. When not set, ChatMessage is consumed directly. Supports converting one ChatMessage into multiple ParsedMessages | (message: ChatMessage) => BubbleMessage \\| BubbleMessage[] | - | - |\n| requestFallback | Fallback message for failed requests. When not provided, no message will be displayed | ChatMessage \\| (requestParams: Partial\\,info: { error: Error; errorInfo: any; messages: ChatMessage[], message: ChatMessage }) => ChatMessage\\|Promise\\ | - | - |\n| requestPlaceholder | Placeholder message during requests. When not provided, no message will be displayed | ChatMessage \\| (requestParams: Partial\\, info: { messages: Message[] }) => ChatMessage \\| Promise\\ | - | - |\n\n### XChatConfigReturnType\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| abort | Cancel request | () => void | - | - |\n| isRequesting | Whether a request is in progress | boolean | - | - |\n| isDefaultMessagesRequesting | Whether the default message list is requesting | boolean | false | 2.2.0 |\n| messages | Current managed message list content | MessageInfo\\[] | - | - |\n| parsedMessages | Content translated through `parser` | MessageInfo\\[] | - | - |\n| onReload | Regenerate, will send request to backend and update the message with new returned data | (id: string \\| number, requestParams: Partial\\, opts: { extra: AnyObject }) => void | - | - |\n| onRequest | Add a Message and trigger request | (requestParams: Partial\\, opts: { extra: AnyObject }) => void | - | - |\n| setMessages | Directly modify messages without triggering requests | (messages: Partial\\\\>[]) => void | - | - |\n| setMessage | Directly modify a single message without triggering requests | (id: string \\| number, info: Partial\\\\>) => void | - | - |\n| removeMessage | Deleting a single message will not trigger a request | (id: string \\| number) => void | - | - |\n| queueRequest | Will add the request to a queue, waiting for the conversationKey to be initialized before sending | (conversationKey: string \\| symbol, requestParams: Partial\\, opts?: { extraInfo: AnyObject }) => void | - | - |\n\n#### MessageInfo\n\n```ts\ninterface MessageInfo {\n id: number | string;\n message: ChatMessage;\n status: MessageStatus;\n extra?: AnyObject;\n}\n```\n\n#### MessageStatus\n\n```ts\ntype MessageStatus = 'local' | 'loading' | 'updating' | 'success' | 'error' | 'abort';\n```\n" }, { "path": "packages/x-skill/skills/use-x-chat/reference/CORE.md", "content": "### 1. Message Management\n\n#### Get Message List\n\n```ts\nconst { messages } = useXChat({ provider });\n// messages structure: MessageInfo[]\n// Actual message data is in msg.message\n```\n\n#### Manually Set Messages\n\n```ts\nconst { setMessages } = useXChat({ provider });\n\n// Clear messages\nsetMessages([]);\n\n// Add welcome message - note it's MessageInfo structure\nsetMessages([\n {\n id: 'welcome',\n message: {\n content: 'Welcome to AI Assistant',\n role: 'assistant',\n },\n status: 'success',\n },\n]);\n```\n\n#### Update Single Message\n\n```ts\nconst { setMessage } = useXChat({ provider });\n\n// Update message content - need to update message object\nsetMessage('msg-id', {\n message: { content: 'New content', role: 'assistant' },\n});\n\n// Mark as error - update status\nsetMessage('msg-id', { status: 'error' });\n```\n\n### 2. Request Control\n\n#### Send Message\n\n```ts\nconst { onRequest } = useXChat({ provider });\n\n// Basic usage\nonRequest({ query: 'User question' });\n\n// With additional parameters\nonRequest({\n query: 'User question',\n context: 'Previous conversation content',\n userId: 'user123',\n});\n```\n\n#### Abort Request\n\n```tsx\nconst { abort, isRequesting } = useXChat({ provider });\n\n// Abort current request\n;\n```\n\n#### Resend\n\nThe resend feature allows users to regenerate replies for specific messages, which is very useful when AI answers are unsatisfactory or errors occur.\n\n#### Basic Usage\n\n```tsx\nconst ChatComponent = () => {\n const { messages, onReload } = useXChat({ provider });\n\n return (\n
    \n {messages.map((msg) => (\n
    \n {msg.message.content}\n {msg.message.role === 'assistant' && (\n \n )}\n
    \n ))}\n
    \n );\n};\n```\n\n#### Resend Notes\n\n1. **Can only regenerate AI replies**: Usually can only use resend on messages with `role === 'assistant'`\n2. **Status management**: Resend will set the corresponding message status to `loading`\n3. **Parameter passing**: Can pass additional information to Provider through `extra` parameter\n4. **Error handling**: It is recommended to use `requestFallback` to handle resend failures\n\n### 3. Error Handling\n\n#### Unified Error Handling\n\n```tsx\nconst { messages } = useXChat({\n provider,\n requestFallback: (_, { error, errorInfo, messageInfo }) => {\n // Network error\n if (!navigator.onLine) {\n return {\n content: 'Network connection failed, please check network',\n role: 'assistant' as const,\n };\n }\n\n // User interruption\n if (error.name === 'AbortError') {\n return {\n content: messageInfo?.message?.content || 'Reply cancelled',\n role: 'assistant' as const,\n };\n }\n\n // Server error\n return {\n content: errorInfo?.error?.message || 'Network error, please try again later',\n role: 'assistant' as const,\n };\n },\n});\n```\n\n### 4. Message Display During Request\n\nGenerally no configuration is needed, default use with Bubble component's loading state. For custom loading content, refer to:\n\n```tsx\nconst ChatComponent = () => {\n const { messages, onRequest } = useXChat({ provider });\n return (\n
    \n {messages.map((msg) => (\n
    \n {msg.message.role}: {msg.message.content}\n
    \n ))}\n \n
    \n );\n};\n```\n\n#### Custom Request Placeholder\n\nWhen requestPlaceholder is set, placeholder messages will be displayed before the request starts, used with Bubble component's loading state.\n\n```tsx\nconst { messages } = useXChat({\n provider,\n requestPlaceholder: (_, { error, messageInfo }) => {\n return {\n content: 'Generating...',\n role: 'assistant',\n };\n },\n});\n```\n" }, { "path": "packages/x-skill/skills/use-x-chat/reference/EXAMPLES.md", "content": "# Complete Example Projects\n\n## Project with Conversation Management\n\n```tsx\nimport React, { useRef, useState } from 'react';\nimport { useXChat } from '@ant-design/x-sdk';\nimport { chatProvider } from '../services/chatService';\nimport type { ChatMessage } from '../providers/ChatProvider';\nimport { Bubble, Sender, Conversations, type ConversationsProps } from '@ant-design/x';\nimport { GetRef } from 'antd';\n\nconst App: React.FC = () => {\n const [conversations, setConversations] = useState([{ key: '1', label: 'New Conversation' }]);\n const [activeKey, setActiveKey] = useState('1');\n const senderRef = useRef>(null);\n // Create new conversation\n const handleNewConversation = () => {\n const newKey = Date.now().toString();\n const newConversation = {\n key: newKey,\n label: `Conversation ${conversations.length + 1}`,\n };\n setConversations((prev) => [...prev, newConversation]);\n setActiveKey(newKey);\n };\n\n // Delete conversation\n const handleDeleteConversation = (key: string) => {\n setConversations((prev) => {\n const filtered = prev.filter((item) => item.key !== key);\n if (filtered.length === 0) {\n // If no conversations left, create a new one\n const newKey = Date.now().toString();\n return [{ key: newKey, label: 'New Conversation' }];\n }\n return filtered;\n });\n\n // If deleted current active conversation, switch to first one\n if (activeKey === key) {\n setActiveKey(conversations[0]?.key || '1');\n }\n };\n\n const { messages, onRequest, isRequesting, abort } = useXChat<\n ChatMessage,\n ChatMessage,\n { query: string },\n { content: string; time: string; status: 'success' | 'error' }\n >({\n provider: chatProvider,\n conversationKey: activeKey,\n requestFallback: (_, { error }) => {\n if (error.name === 'AbortError') {\n return { content: 'Cancelled', role: 'assistant' as const, timestamp: Date.now() };\n }\n return { content: 'Request failed', role: 'assistant' as const, timestamp: Date.now() };\n },\n });\n\n const menuConfig: ConversationsProps['menu'] = (conversation) => ({\n items: [\n {\n label: 'Delete',\n key: 'delete',\n danger: true,\n },\n ],\n onClick: ({ key: menuKey }) => {\n if (menuKey === 'delete') {\n handleDeleteConversation(conversation.key);\n }\n },\n });\n\n return (\n
    \n {/* Conversation List */}\n \n \n
    \n\n {/* Chat Area */}\n
    \n \n {conversations.find((c) => c.key === activeKey)?.label || 'Conversation'}\n
    \n\n
    \n ({\n key: msg.id,\n content: msg.message.content,\n role: msg.message.role,\n loading: msg.status === 'loading',\n }))}\n />\n
    \n\n
    \n {\n onRequest({ query: content });\n senderRef.current?.clear?.();\n }}\n onCancel={abort}\n placeholder=\"Enter message...\"\n />\n
    \n \n \n );\n};\nexport default App;\n```\n\n## With State Management Resend\n\n```tsx\nimport React, { useRef, useState } from 'react';\nimport { useXChat } from '@ant-design/x-sdk';\nimport { Bubble, Sender } from '@ant-design/x';\nimport { Button, type GetRef } from 'antd';\nimport { chatProvider } from '../services/chatService';\nimport type { ChatMessage } from '../providers/ChatProvider';\n\nconst ChatWithRegenerate: React.FC = () => {\n const senderRef = useRef>(null);\n const { messages, onReload, isRequesting, onRequest, abort } = useXChat<\n ChatMessage,\n ChatMessage,\n { query: string },\n { content: string; time: string; status: 'success' | 'error' }\n >({\n provider: chatProvider,\n requestPlaceholder: {\n content: 'Thinking...',\n role: 'assistant',\n timestamp: Date.now(),\n },\n requestFallback: (_, { error, errorInfo, messageInfo }) => {\n if (error.name === 'AbortError') {\n return {\n content: messageInfo?.message?.content || 'Reply cancelled',\n role: 'assistant' as const,\n timestamp: Date.now(),\n };\n }\n return {\n content: errorInfo?.error?.message || 'Network error, please try again later',\n role: 'assistant' as const,\n timestamp: Date.now(),\n };\n },\n });\n\n // Track message ID being regenerated\n const [regeneratingId, setRegeneratingId] = useState(null);\n\n const handleRegenerate = (messageId: string | number): void => {\n setRegeneratingId(messageId);\n onReload(\n messageId,\n {},\n {\n extraInfo: { regenerate: true },\n },\n );\n };\n\n return (\n
    \n ({\n key: msg.id,\n content: msg.message.content,\n role: msg.message.role,\n loading: msg.status === 'loading',\n footer: msg.message.role === 'assistant' && (\n handleRegenerate(msg.id)}\n disabled={isRequesting && regeneratingId !== msg.id}\n >\n {regeneratingId === msg.id ? 'Generating...' : 'Regenerate'}\n \n ),\n }))}\n />\n
    \n {\n onRequest({ query: content });\n senderRef.current?.clear?.();\n }}\n onCancel={abort}\n ref={senderRef}\n placeholder=\"Enter message...\"\n allowSpeech\n prefix={\n \n }\n />\n
    \n
    \n );\n};\n\nexport default ChatWithRegenerate;\n```\n" }, { "path": "packages/x-skill/skills/x-chat-provider/SKILL.md", "content": "---\nname: x-chat-provider\nversion: 2.4.0\ndescription: Focus on implementing custom Chat Provider, helping to adapt any streaming interface to Ant Design X standard format\n---\n\n# 🎯 Skill Positioning\n\n**This skill focuses on solving one problem**: How to quickly adapt your streaming interface to Ant Design X's Chat Provider.\n\n**Not involved**: useXChat usage tutorial (that's another skill).\n\n## Table of Contents\n\n- [📦 Technology Stack Overview](#-technology-stack-overview)\n - [Ant Design X Ecosystem](#ant-design-x-ecosystem)\n - [Core Concepts](#core-concepts)\n- [🚀 Quick Start](#-quick-start)\n - [Dependency Management](#dependency-management)\n - [Built-in Provider](#built-in-provider)\n - [When to Use Custom Provider](#when-to-use-custom-provider)\n- [📋 Four Steps to Implement Custom Provider](#-four-steps-to-implement-custom-provider)\n - [Step1: Analyze Interface Format](#step1-analyze-interface-format)\n - [Step2: Create Provider Class](#step2-create-provider-class)\n - [Step3: Check Files](#step3-check-files)\n - [Step4: Use Provider](#step4-use-provider)\n- [🔧 Common Scenario Adaptation](#-common-scenario-adaptation)\n- [📋 Joint Skill Usage](#-joint-skill-usage)\n - [Scenario1: Complete AI Conversation Application](#scenario1-complete-ai-conversation-application)\n - [Scenario2: Only Create Provider](#scenario2-only-create-provider)\n - [Scenario3: Use Built-in Provider](#scenario3-use-built-in-provider)\n- [⚠️ Important Reminders](#️-important-reminders)\n - [Mandatory Rule: Prohibit Writing request Method](#mandatory-rule-prohibit-writing-request-method)\n- [⚡ Quick Checklist](#-quick-checklist)\n- [🚨 Development Rules](#-development-rules)\n- [🔗 Reference Resources](#-reference-resources)\n - [📚 Core Reference Documentation](#-core-reference-documentation)\n - [🌐 SDK Official Documentation](#-sdk-official-documentation)\n - [💻 Example Code](#-example-code)\n\n# 📦 Technology Stack Overview\n\n### 🏗️ Ant Design X Ecosystem Architecture\n\n| Layer | Package Name | Core Purpose | Typical Usage Scenarios |\n| --- | --- | --- | --- |\n| **UI Layer** | **@ant-design/x** | React UI component library | Build chat interfaces, bubbles, input boxes |\n| **Logic Layer** | **@ant-design/x-sdk** | Development toolkit | Data flow management, Provider, Hook |\n| **Render Layer** | **@ant-design/x-markdown** | Markdown renderer | Content display, code highlighting |\n\n> ⚠️ **Important Reminder**: These three packages have different functional positioning, please import required features from the correct package\n>\n> ```ts\n> // ✅ Correct import examples\n> import { Bubble } from '@ant-design/x'; // UI component\n> import { AbstractChatProvider } from '@ant-design/x-sdk'; // Provider base class\n> import { XRequest } from '@ant-design/x-sdk'; // Request tool\n> ```\n\n### 🔑 Core Concept Analysis\n\n```mermaid\ngraph LR\n A[Original API Interface] -->|Adapt| B[Chat Provider]\n B -->|Provide Data| C[useXChat Hook]\n C -->|Render| D[Ant Design X UI]\n E[XRequest] -->|Network Request| B\n```\n\n| Concept | Role Positioning | Core Responsibility | Usage Scenario |\n| --- | --- | --- | --- |\n| **Chat Provider** | 🔄 Data Adapter | Convert any interface format to Ant Design X standard format | Private API adaptation, format conversion |\n| **useXChat** | ⚛️ React Hook | Manage conversation state, message flow, request control | Build AI conversation interface |\n| **XRequest** | 🌐 Request Tool | Handle all network communication, authentication, error handling | Unified request management |\n\n# 🚀 Quick Start\n\n### 📋 Environment Preparation\n\n#### System Requirements\n\n| Package | Version Requirement | Auto Install | Purpose |\n| --- | --- | --- | --- |\n| **@ant-design/x-sdk** | ≥2.2.2 | ✅ | Core SDK, includes Provider and Hook |\n| **@ant-design/x** | Latest version | ✅ | UI component library, build chat interface |\n\n#### 🛠️ One-click Environment Check\n\n```bash\n# Auto check and fix version\nnpm ls @ant-design/x-sdk\n# If version doesn't match, auto prompt:\nnpm install @ant-design/x-sdk@latest\n```\n\n#### 📊 Version Compatibility Matrix\n\n| SDK Version | Supported Features | Compatibility |\n| ----------- | --------------------------- | ------------------------ |\n| ≥2.2.2 | Full Provider functionality | ✅ Recommended |\n| 2.2.0 | Basic functionality | ⚠️ Partial compatibility |\n| <2.2.0 | Not supported | ❌ Need upgrade |\n\n### 🎯 Provider Selection Decision Tree\n\n```mermaid\ngraph TD\n A[Start] --> B{Use Standard API?}\n B -->|Yes| C[Use Built-in Provider]\n B -->|No| D{Private API?}\n D -->|Yes| E[Custom Provider]\n D -->|No| F{Special Format?}\n F -->|Yes| E\n F -->|No| C\n\n C --> G[OpenAI/DeepSeek Provider]\n E --> H[Four Steps to Create Custom Provider]\n```\n\n### 🏭 Built-in Provider Overview\n\n#### Out-of-the-box Providers\n\n| Provider Type | Applicable Scenario | Usage Method |\n| --------------------- | --------------------- | ----------------- |\n| **OpenAI Provider** | Standard OpenAI API | Direct import use |\n| **DeepSeek Provider** | Standard DeepSeek API | Direct import use |\n\n#### Quick Decision Guide\n\n| Scenario | Recommended Solution | Example |\n| ---------------------------- | -------------------------- | ---------------------------- |\n| Call official OpenAI | Built-in OpenAI Provider | `new OpenAIProvider()` |\n| Call official DeepSeek | Built-in DeepSeek Provider | `new DeepSeekProvider()` |\n| Company internal API | Custom Provider | See four-step implementation |\n| Third-party non-standard API | Custom Provider | See four-step implementation |\n\n# 📋 Four Steps to Implement Custom Provider\n\n## 🎯 Implementation Path Overview\n\n```mermaid\njourney\n title Custom Provider Implementation Path\n section Analysis Phase\n Interface Analysis: 2: User\n section Development Phase\n Create Class: 5: User\n Check Validation: 1: User\n section Integration Phase\n Configure Usage: 1: User\n```\n\n## Step1: Analyze Interface Format ⏱️ 2 minutes\n\n### 📋 Interface Information Collection Table\n\n| Information Type | Example Value | Your Interface |\n| ------------------------- | --------------------------- | --------------- |\n| **Interface URL** | `https://your-api.com/chat` | `_____________` |\n| **Request Method** | POST | `_____________` |\n| **Request Format** | JSON | `_____________` |\n| **Response Format** | Server-Sent Events | `_____________` |\n| **Authentication Method** | Bearer Token | `_____________` |\n\n### 🔍 Interface Format Template\n\n#### ✅ Request Format Example\n\n```ts\n// Your actual request format\ninterface MyAPIRequest {\n query: string; // User question\n context?: string; // Conversation history (optional)\n model?: string; // Model selection (optional)\n stream?: boolean; // Whether streaming (optional)\n}\n```\n\n#### ✅ Response Format Example\n\n```ts\n// Streaming response format\n// Actual response: data: {\"content\": \"answer content\"}\ninterface MyAPIResponse {\n content: string; // Answer fragment\n finish_reason?: string; // End marker\n}\n\n// End marker: data: [DONE]\n```\n\n## Step2: Create Provider Class ⏱️ 5 minutes\n\n### 🏗️ Code Template (Copy and Use)\n\n```ts\n// MyChatProvider.ts\nimport { AbstractChatProvider } from '@ant-design/x-sdk';\n\n// ====== 1st modification: Define your interface types ======\ninterface MyInput {\n query: string;\n context?: string;\n model?: string;\n stream?: boolean;\n}\n\ninterface MyOutput {\n content: string;\n finish_reason?: string;\n}\n\ninterface MyMessage {\n content: string;\n role: 'user' | 'assistant';\n timestamp: number;\n}\n\n// ====== 2nd modification: Modify class name ======\nexport class MyChatProvider extends AbstractChatProvider {\n // Parameter conversion: convert useXChat parameters to your API parameters\n transformParams(\n requestParams: Partial,\n options: XRequestOptions,\n ): MyInput {\n if (typeof requestParams !== 'object') {\n throw new Error('requestParams must be an object');\n }\n\n return {\n query: requestParams.query || '',\n context: requestParams.context,\n model: 'gpt-3.5-turbo', // Adjust according to your API\n stream: true,\n ...(options?.params || {}),\n };\n }\n\n // Local message: user sent message format\n transformLocalMessage(requestParams: Partial): MyMessage {\n return {\n content: requestParams.query || '',\n role: 'user',\n timestamp: Date.now(),\n };\n }\n\n // ====== 3rd modification: Response data conversion ======\n transformMessage(info: { originMessage: MyMessage; chunk: MyOutput }): MyMessage {\n const { originMessage, chunk } = info;\n\n // Handle end marker\n if (!chunk?.content || chunk.content === '[DONE]') {\n return { ...originMessage, status: 'success' as const };\n }\n\n // Accumulate response content\n return {\n ...originMessage,\n content: `${originMessage.content || ''}${chunk.content || ''}`,\n role: 'assistant' as const,\n status: 'loading' as const,\n };\n }\n}\n```\n\n### 🚨 Development Notes\n\n- ✅ **Only change 3 places**: interface types, class name, response conversion logic\n- ✅ **Prohibit implementing request method**: Network requests handled by XRequest\n- ✅ **Maintain type safety**: Use TypeScript strict mode\n\n## Step3: Check Validation ⏱️ 1 minute\n\n### ✅ Quick Checklist\n\n| Check Item | Status | Description |\n| ---------------------- | ------ | ------------------------------------- |\n| **Correct class name** | ⏳ | `MyChatProvider` → Your class name |\n| **Type matching** | ⏳ | Interface types match actual API |\n| **Complete methods** | ⏳ | All 3 methods implemented |\n| **No request method** | ⏳ | Confirm no request method implemented |\n| **Type check passed** | ⏳ | `tsc --noEmit` no errors |\n\n### 🔍 Validation Code\n\n```bash\n# Run type check\nnpx tsc --noEmit MyChatProvider.ts\n\n# Expected result: no error output\n```\n\n## Step4: Configure Usage ⏱️ 1 minute\n\n### 🔧 Complete Integration Example\n\n```ts\n// 1. Import dependencies\nimport { MyChatProvider } from './MyChatProvider';\nimport { XRequest } from '@ant-design/x-sdk';\n\n// 2. Configure XRequest (handled by x-request skill)\nconst request = XRequest('https://your-api.com/chat', {\n // Authentication configuration\n headers: {\n Authorization: 'Bearer your-token-here',\n 'Content-Type': 'application/json',\n },\n\n // Default parameters\n params: {\n model: 'gpt-3.5-turbo',\n max_tokens: 1000,\n temperature: 0.7,\n },\n\n // Streaming configuration\n manual: true,\n});\n\n// 3. Create Provider instance\nconst provider = new MyChatProvider({\n request, // Must pass XRequest instance\n});\n\n// 4. Now can be used with useXChat\n// This part is handled by use-x-chat skill\nexport { provider };\n```\n\n### 🎉 Usage Advantages\n\n- **Zero network code**: XRequest handles all network details\n- **Type safety**: Complete TypeScript support\n- **Easy testing**: Can mock XRequest for unit testing\n- **Unified configuration**: Authentication, parameters, error handling centralized management\n\n# 🔧 Common Scenario Adaptation\n\n## 📚 Scenario Adaptation Guide\n\n| Scenario Type | Difficulty | Example Link | Description |\n| --- | --- | --- | --- |\n| **Standard OpenAI** | 🟢 Simple | [Built-in Provider Example](reference/EXAMPLES.md#scenario1-openai-format) | Direct use of built-in Provider |\n| **Standard DeepSeek** | 🟢 Simple | [Built-in Provider Example](reference/EXAMPLES.md#scenario2-deepseek-format) | Direct use of built-in Provider |\n| **Private API** | 🟡 Medium | [Custom Provider Details](reference/EXAMPLES.md#scenario3-custom-provider) | Need four-step implementation |\n\n> 📖 **Complete Examples**: [EXAMPLES.md](reference/EXAMPLES.md) contains complete code for all actual scenarios\n\n# 📋 Joint Skill Usage Guide\n\n## 🎯 Skill Relationship Diagram\n\n```mermaid\ngraph TD\n User[Developer] --> A{Choose Solution}\n\n A -->|Standard API| B[Built-in Provider]\n A -->|Private API| C[Custom Provider]\n\n B --> D[use-x-chat]\n C --> E[x-chat-provider]\n E --> D\n\n D --> F[x-request]\n F --> G[Final Application]\n```\n\n## 📊 Skill Comparison Table\n\n| Skill Role | Skill Name | Prerequisites | Core Responsibility | Usage Scenario |\n| --- | --- | --- | --- | --- |\n| **🏗️ Creator** | **x-chat-provider** | None | Create custom Provider | Adapt private/non-standard APIs |\n| **⚛️ User** | **use-x-chat** | Needs Provider | Build AI conversation interface | React component development |\n| **🔧 Configurer** | **x-request** | None | Configure request parameters authentication | Unified network request management |\n\n## 🎯 Combined Usage Scenarios\n\n### 🚀 Scenario1: Complete AI Conversation Application\n\n**Applicable**: Build complete AI conversation product from scratch\n\n```mermaid\nsequenceDiagram\n participant Dev as Developer\n participant CP as x-chat-provider\n participant UX as use-x-chat\n participant XR as x-request\n\n Dev->>CP: 1. Create custom Provider\n CP->>Dev: Return adapted Provider\n Dev->>XR: 2. Configure XRequest parameters\n XR->>Dev: Return configured request\n Dev->>UX: 3. Use Provider to build interface\n UX->>Dev: Complete AI conversation application\n```\n\n**Implementation Steps**:\n\n1. **x-chat-provider** → Create custom Provider (four-step implementation)\n2. **x-request** → Configure authentication, parameters, error handling\n3. **use-x-chat** → Build React chat interface\n\n### 🎯 Scenario2: Only Create Provider\n\n**Applicable**: Provide Provider for other frameworks or teams\n\n```mermaid\ngraph LR\n A[Private API] -->|Adapt| B[Custom Provider]\n B -->|Export| C[Other Framework Usage]\n B -->|Publish| D[NPM Package]\n```\n\n**Core Value**:\n\n- 🔧 **Decoupling**: Provider separated from UI framework\n- 📦 **Reusability**: Can be used by multiple projects\n- 🚀 **Efficiency**: Develop once, use everywhere\n\n### ⚡ Scenario3: Use Built-in Provider\n\n**Applicable**: Quick prototype development or standard API calls\n\n```mermaid\ngraph LR\n A[Standard API] -->|Built-in| B[OpenAI/DeepSeek Provider]\n B -->|Direct Use| C[use-x-chat]\n C -->|Configure| D[x-request]\n D --> E[Quick Launch]\n```\n\n**Advantages**:\n\n- ⚡ **Zero Development**: No need for custom Provider\n- 🎯 **Zero Configuration**: Built-in best practices\n- 🚀 **Ultra-fast Launch**: Complete in 5 minutes\n\n## ⚠️ Important Reminders\n\n### 🚨 Mandatory Rule: Prohibit Writing request Method!\n\n**Mandatory Requirements**:\n\n- 🚫 **Absolutely prohibit** implementing `request` method in Provider\n- ✅ **Must use** XRequest to handle all network requests\n- ✅ **Only focus** on data conversion logic (transformParams, transformLocalMessage, transformMessage)\n\n**❌ Serious Error (Absolutely Prohibited)**:\n\n```ts\n// ❌ Serious error: implement request method yourself\nclass MyProvider extends AbstractChatProvider {\n async request(params: any) {\n // Prohibit writing network request logic!\n const response = await fetch(this.url, { ... });\n return response;\n }\n}\n```\n\n**✅ Mandatory Requirement (Only Correct Way)**:\n\n```ts\n// ✅ Mandatory requirement: use XRequest, prohibit implementing request method\nclass MyProvider extends AbstractChatProvider {\n // Prohibit implementing request method!\n transformParams(params) {\n /* ... */\n }\n transformLocalMessage(params) {\n /* ... */\n }\n transformMessage(info) {\n /* ... */\n }\n}\n\n// Mandatory use of XRequest:\nconst provider = new MyProvider({\n request: XRequest('https://your-api.com/chat'),\n});\n```\n\n# ⚡ Quick Checklist\n\nBefore creating Provider, confirm:\n\n- [ ] Interface documentation obtained\n- [ ] Request/response format confirmed\n- [ ] Message structure defined\n- [ ] Interface availability tested\n- [ ] **Decided to use XRequest** (avoid writing request method yourself!)\n\nAfter completion:\n\n- [ ] Provider class can be instantiated normally\n- [ ] **Only implemented three required methods** (transformParams, transformLocalMessage, transformMessage)\n- [ ] **Absolutely prohibit implementing request method** (mandatory use XRequest for network requests)\n- [ ] Edge cases handled (empty data, error responses)\n- [ ] **Type check passed** (ensure all TypeScript types are correct)\n- [ ] **Remove unused exports** (clean up unused export items)\n\n# 🚨 Development Rules\n\n## Test Case Rules\n\n- **If the user does not explicitly need test cases, do not add test files**\n- **Only create test cases when the user explicitly requests them**\n\n## Code Quality Rules\n\n- **After completion, must check types**: Run `tsc --noEmit` to ensure no type errors\n- **Keep code clean**: Remove all unused variables and imports\n\n# 🔗 Reference Resources\n\n## 📚 Core Reference Documentation\n\n- [EXAMPLES.md](reference/EXAMPLES.md) - Practical example code\n\n## 🌐 SDK Official Documentation\n\n- [useXChat Official Documentation](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/use-x-chat.en-US.md)\n- [XRequest Official Documentation](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/x-request.en-US.md)\n- [Chat Provider Official Documentation](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/chat-provider.en-US.md)\n\n## 💻 Example Code\n\n- [custom-provider-width-ui.tsx](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/demos/chat-providers/custom-provider-width-ui.tsx) - Complete example of custom Provider\n" }, { "path": "packages/x-skill/skills/x-chat-provider/reference/EXAMPLES.md", "content": "## Scenario1: OpenAI Format\n\nOpenAI format uses built-in Provider, use OpenAIProvider:\n\n```ts\nimport { OpenAIProvider } from '@ant-design/x-sdk';\n\nconst provider = new OpenAIProvider({\n request: XRequest('https://api.openai.com/v1/chat/completions'),\n});\n```\n\n## Scenario2 DeepSeek Format\n\nDeepSeek format uses built-in Provider, use DeepSeekProvider:\n\n```ts\nimport { DeepSeekProvider } from '@ant-design/x-sdk';\n\nconst provider = new DeepSeekProvider({\n request: XRequest('https://api.deepseek.com/v1/chat/completions'),\n});\n```\n\n## Scenario3: Custom Provider\n\n### 1. Custom Error Format\n\n```ts\ntransformMessage(info) {\n const { originMessage, chunk } = info || {};\n const data = JSON.parse(chunk.data);\n try {\n if (data.error) {\n return {\n ...originMessage,\n content: data.error.message,\n status: 'error',\n };\n }\n // Other normal processing logic\n } catch (error) {\n return {\n ...originMessage,\n status: 'error',\n };\n }\n}\n```\n\n### 2. Multi-field Response\n\n```ts\ninterface MyOutput {\n content: string;\n metadata?: {\n confidence: number;\n source: string;\n };\n}\n\ntransformMessage(info) {\n const { originMessage, chunk } = info || {};\n\n return {\n ...originMessage,\n content: chunk.content,\n metadata: chunk.metadata, // Can extend MyMessage type\n };\n}\n```\n" }, { "path": "packages/x-skill/skills/x-markdown/SKILL.md", "content": "---\nname: x-markdown\nversion: 2.4.0\ndescription: Use when building or reviewing Markdown rendering with @ant-design/x-markdown, including streaming Markdown, custom component mapping, plugins, themes, and chat-oriented rich content.\n---\n\n# 🎯 Skill Positioning\n\n**This skill focuses on one job**: render Markdown correctly and predictably with `@ant-design/x-markdown`.\n\nIt covers:\n\n- Basic rendering and package boundaries\n- LLM streaming output and incomplete syntax handling\n- Custom component mapping for rich chat or data-display blocks\n- Plugins, themes, and safe rendering defaults\n\n## Table of Contents\n\n- [📦 Package Boundaries](#-package-boundaries)\n- [🚀 Quick Start Decision Guide](#-quick-start-decision-guide)\n- [🛠 Recommended Workflow](#-recommended-workflow)\n- [🚨 Development Rules](#-development-rules)\n- [🤝 Skill Collaboration](#-skill-collaboration)\n- [🔗 Reference Resources](#-reference-resources)\n\n# 📦 Package Boundaries\n\n| Layer | Package | Responsibility |\n| --- | --- | --- |\n| **UI layer** | `@ant-design/x` | Chat UI, bubble lists, sender, rich interaction components |\n| **Data layer** | `@ant-design/x-sdk` | Providers, requests, streaming data flow, state management |\n| **Render layer** | `@ant-design/x-markdown` | Markdown parsing, streaming rendering, plugins, themes, custom renderers |\n\n> ⚠️ `x-markdown` is not a chat-state tool. Use it to render content after `@ant-design/x` and `@ant-design/x-sdk` have already produced the message data.\n\n# 🚀 Quick Start Decision Guide\n\n| If you need to... | Read first | Typical outcome |\n| --- | --- | --- |\n| Render Markdown with the smallest setup | [CORE.md](reference/CORE.md) | `XMarkdown` renders trusted content with basic styling |\n| Render LLM streaming chunks | [STREAMING.md](reference/STREAMING.md) | Correct `hasNextChunk`, placeholders, tail indicator, loading states |\n| Replace tags with business components | [EXTENSIONS.md](reference/EXTENSIONS.md) | Stable `components` map for custom tags and code blocks |\n| Add plugins or theme overrides | [EXTENSIONS.md](reference/EXTENSIONS.md) | Plugin imports, theme class wiring, minimal CSS overrides |\n| Check prop details and defaults | [API.md](reference/API.md) | Full prop table for `XMarkdown` and streaming options |\n\n# 🛠 Recommended Workflow\n\n1. Start with [CORE.md](reference/CORE.md) and get a plain render working first.\n2. Add [STREAMING.md](reference/STREAMING.md) only when the content arrives chunk-by-chunk.\n3. Add [EXTENSIONS.md](reference/EXTENSIONS.md) when you need custom tags, plugins, syntax blocks, or themes.\n4. Use [API.md](reference/API.md) to confirm prop names and defaults instead of guessing.\n\n## Minimal Setup Reminder\n\n```tsx\nimport { XMarkdown } from '@ant-design/x-markdown';\n\nexport default () => ;\n```\n\n# 🚨 Development Rules\n\n- Prefer a stable `components` object. Do not create new inline component mappings on every render.\n- Use `streaming.hasNextChunk = false` on the final chunk, otherwise incomplete placeholders will not flush into final content.\n- Treat raw HTML carefully. Prefer `escapeRawHtml` when raw HTML should stay visible as text.\n- If raw HTML must be rendered, keep `dompurifyConfig` explicit and minimal.\n- Keep theme overrides small. Start from `x-markdown-light` or `x-markdown-dark` and override only the variables you need.\n- If a custom component depends on complete syntax, branch on `streamStatus === 'done'`.\n\n# 🤝 Skill Collaboration\n\n| Scenario | Recommended skill combination | Why |\n| --- | --- | --- |\n| Rich assistant replies in chat | `x-chat-provider` → `x-request` → `use-x-chat` → `x-markdown` | Provider and request handle data flow, `x-markdown` handles final rendering |\n| Built-in provider with Markdown replies | `x-request` → `use-x-chat` → `x-markdown` | Keep request config and rendering concerns separate |\n| Standalone Markdown page or docs viewer | `x-markdown` only | No chat data flow needed |\n\n## Boundary Rules\n\n- Use **`x-chat-provider`** when adapting an API shape.\n- Use **`x-request`** when configuring transport, auth, retries, or streaming separators.\n- Use **`use-x-chat`** when managing chat state in React.\n- Use **`x-markdown`** when the content itself needs Markdown parsing, streaming recovery, or rich component rendering.\n\n# 🔗 Reference Resources\n\n- [CORE.md](reference/CORE.md) - Package boundaries, install/setup, safe defaults, common render patterns\n- [STREAMING.md](reference/STREAMING.md) - Chunked rendering, incomplete syntax recovery, loading vs done behavior\n- [EXTENSIONS.md](reference/EXTENSIONS.md) - Components, plugins, themes, custom tag guidance\n- [API.md](reference/API.md) - Generated API reference from the official `x-markdown` docs\n\n## Official Docs\n\n- [XMarkdown Introduction](https://github.com/ant-design/x/blob/main/packages/x/docs/x-markdown/introduce.en-US.md)\n- [XMarkdown Examples](https://github.com/ant-design/x/blob/main/packages/x/docs/x-markdown/examples.en-US.md)\n- [XMarkdown Streaming](https://github.com/ant-design/x/blob/main/packages/x/docs/x-markdown/streaming.en-US.md)\n- [XMarkdown Components](https://github.com/ant-design/x/blob/main/packages/x/docs/x-markdown/components.en-US.md)\n- [XMarkdown Plugins](https://github.com/ant-design/x/blob/main/packages/x/docs/x-markdown/plugins.en-US.md)\n- [XMarkdown Themes](https://github.com/ant-design/x/blob/main/packages/x/docs/x-markdown/themes.en-US.md)\n" }, { "path": "packages/x-skill/skills/x-markdown/reference/API.md", "content": "| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| content | Markdown content to render | `string` | - |\n| children | Markdown content (use either `content` or `children`) | `string` | - |\n| components | Map HTML nodes to custom React components | `Record \\| keyof JSX.IntrinsicElements>` | - |\n| streaming | Streaming behavior config | `StreamingOption` | - |\n| config | Marked parse config, applied last and may override built-in renderers | [`MarkedExtension`](https://marked.js.org/using_advanced#options) | `{ gfm: true }` |\n| rootClassName | Extra CSS class for the root element | `string` | - |\n| className | Extra CSS class for the root container | `string` | - |\n| paragraphTag | HTML tag for paragraphs (avoids validation issues when custom components contain block elements) | `keyof JSX.IntrinsicElements` | `'p'` |\n| style | Inline styles for the root container | `CSSProperties` | - |\n| prefixCls | CSS class name prefix for component nodes | `string` | - |\n| openLinksInNewTab | Add `target=\"_blank\"` to all links so they open in a new tab | `boolean` | `false` |\n| dompurifyConfig | DOMPurify config for HTML sanitization and XSS protection | [`DOMPurify.Config`](https://github.com/cure53/DOMPurify#can-i-configure-dompurify) | - |\n| protectCustomTagNewlines | Whether to preserve newlines inside custom tags | `boolean` | `false` |\n| escapeRawHtml | Escape raw HTML in Markdown as plain text (do not parse as real HTML), to prevent XSS while keeping content visible | `boolean` | `false` |\n| debug | Enable debug mode (performance overlay) | `boolean` | `false` |\n\n### StreamingOption\n\n| Field | Description | Type | Default |\n| --- | --- | --- | --- |\n| hasNextChunk | Whether more chunks are expected. Set `false` to flush cache and finish rendering | `boolean` | `false` |\n| enableAnimation | Whether to enable fade-in animation for block elements | `boolean` | `false` |\n| animationConfig | Animation options (for example fade duration and easing) | `AnimationConfig` | - |\n| tail | Enable tail indicator | `boolean \\| TailConfig` | `false` |\n| incompleteMarkdownComponentMap | Map incomplete Markdown fragments to custom loading components | `Partial>` | `{ link: 'incomplete-link', image: 'incomplete-image' }` |\n\n### TailConfig\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| content | Content to display as tail | `string` | `'▋'` |\n| component | Custom tail component, takes precedence over content | `React.ComponentType<{ content?: string }>` | - |\n\n### AnimationConfig\n\n| Property | Description | Type | Default |\n| ------------ | ------------------- | -------- | --------------- |\n| fadeDuration | Duration in ms | `number` | `200` |\n| easing | CSS easing function | `string` | `'ease-in-out'` |\n\n## Related Docs\n\n- [Component Extension](EXTENSIONS.md)\n- [Streaming](STREAMING.md)\n" }, { "path": "packages/x-skill/skills/x-markdown/reference/CORE.md", "content": "# Core Guide\n\n## Package Boundaries\n\n| Need | Package |\n| ------------------------------------- | ------------------------ |\n| Render message content as Markdown | `@ant-design/x-markdown` |\n| Build chat UI containers | `@ant-design/x` |\n| Manage provider/request/message state | `@ant-design/x-sdk` |\n\n## Install and Minimal Render\n\n```bash\nnpm install @ant-design/x-markdown\n```\n\n```tsx\nimport { XMarkdown } from '@ant-design/x-markdown';\n\nconst content = `\n# Hello\n\n- item 1\n- item 2\n`;\n\nexport default () => ;\n```\n\n## Safe Defaults\n\n- Use `content` or `children`, not both.\n- Start with plain Markdown before adding plugins or custom components.\n- Use `openLinksInNewTab` when model output may contain external links.\n- Use `escapeRawHtml` when raw HTML should remain visible but should not execute.\n- If real HTML rendering is required, explicitly review `dompurifyConfig`.\n\n## Common Integration Patterns\n\n### Basic content block\n\n```tsx\n\n```\n\n### Chat message rendering\n\nRender plain text or Markdown from message data after `useXChat` has already produced the message list.\n\n```tsx\n\n```\n\n### Minimal checklist\n\n- Confirm the content is actually Markdown, not a structured component schema.\n- Keep rendering concerns out of Provider classes.\n- Keep transport concerns out of `XMarkdown`.\n- Add themes and custom components only after basic rendering works.\n\n## When to Read Other References\n\n- Read [STREAMING.md](STREAMING.md) when content arrives incrementally from an LLM.\n- Read [EXTENSIONS.md](EXTENSIONS.md) when you need custom tags, code blocks, plugins, or themes.\n- Read `API.md` for the full prop tables.\n" }, { "path": "packages/x-skill/skills/x-markdown/reference/EXTENSIONS.md", "content": "# Extensions Guide\n\n## Components\n\n`components` is the main extension point. Use it to map Markdown or custom HTML tags to React components.\n\n```tsx\nimport { Mermaid, Sources, Think } from '@ant-design/x';\nimport { XMarkdown } from '@ant-design/x-markdown';\n\n;\n```\n\n### Rules for component mappings\n\n- Keep the mapping object stable across renders.\n- Use `streamStatus` to separate temporary loading UI from final rendering.\n- If a custom component contains block children, consider `paragraphTag` to avoid invalid nested markup.\n- Keep custom tags semantically clear and avoid ambiguous mixed Markdown/HTML blocks.\n\n## Plugins\n\nBuilt-in plugins are imported from `@ant-design/x-markdown/plugins/...` and wired through `config`.\n\n```tsx\nimport Latex from '@ant-design/x-markdown/plugins/Latex';\n\n;\n```\n\nUse a plugin when the syntax extension belongs in parsing, not when it is only a visual replacement of a rendered node.\n\n## Themes\n\nStart from a built-in theme stylesheet.\n\n```tsx\nimport '@ant-design/x-markdown/themes/light.css';\n\n;\n```\n\nFor customization:\n\n1. Keep the built-in theme class.\n2. Add one custom class.\n3. Override only the CSS variables you actually need.\n\n## Custom Tag Guidance\n\n- Keep custom tag blocks well formed.\n- Avoid stray blank lines inside custom HTML blocks unless the syntax is intentional.\n- If newlines inside custom tags matter, review `protectCustomTagNewlines`.\n\n## Pick the Right Tool\n\n- Use `components` for replacing rendered nodes with React components.\n- Use plugins for parsing new syntax.\n- Use themes for typography, spacing, and color.\n- Use `dompurifyConfig` and `escapeRawHtml` for safety, not for visual customization.\n" }, { "path": "packages/x-skill/skills/x-markdown/reference/STREAMING.md", "content": "# Streaming Guide\n\n## When to Use\n\nUse streaming mode when the Markdown content is appended chunk-by-chunk and may temporarily contain incomplete syntax.\n\nTypical examples:\n\n- partial links like `[docs](https://example`\n- partial tables\n- unfinished code fences\n- a tail cursor while the assistant is still generating\n\n## Core Rule\n\n`hasNextChunk` must reflect reality:\n\n- `true` while more chunks are expected\n- `false` for the final chunk so cached incomplete fragments flush into the final render\n\n## Minimal Streaming Setup\n\n```tsx\n\n```\n\n## Incomplete Syntax Handling\n\nUse `incompleteMarkdownComponentMap` when unfinished fragments should show custom loading UI instead of broken Markdown.\n\n```tsx\n\n```\n\n## Loading vs Done\n\nCustom components receive `streamStatus`:\n\n- `loading`: syntax may still be incomplete\n- `done`: final content is available\n\nUse this to delay expensive parsing or API calls until the syntax is complete.\n\n## Chat-Oriented Guidance\n\n- Use a tail indicator only while the assistant is still generating.\n- Keep placeholder components lightweight.\n- If a component depends on a closed block or fenced payload, wait for `streamStatus === 'done'`.\n- Do not keep `hasNextChunk` stuck at `true`, or the final Markdown will never settle.\n\n## Debugging Checklist\n\n- Final chunk still looks incomplete: confirm `hasNextChunk` becomes `false`.\n- Placeholder never disappears: confirm the mapped tag name exists in `components`.\n- Performance looks unstable: disable animation and placeholder components first, then add them back selectively.\n" }, { "path": "packages/x-skill/skills/x-request/SKILL.md", "content": "---\nname: x-request\nversion: 2.4.0\ndescription: Focus on explaining the practical configuration and usage of XRequest, providing accurate configuration instructions based on official documentation\n---\n\n# 🎯 Skill Positioning\n\n**This skill focuses on solving**: How to correctly configure XRequest to adapt to various streaming interface requirements.\n\n# Table of Contents\n\n- [🚀 Quick Start](#-quick-start) - Get started in 3 minutes\n - [Dependency Management](#dependency-management)\n - [Basic Configuration](#basic-configuration)\n- [📦 Technology Stack Overview](#-technology-stack-overview)\n- [🔧 Core Configuration Details](#-core-configuration-details)\n - [Global Configuration](#1-global-configuration)\n - [Security Configuration](#2-security-configuration)\n - [Streaming Configuration](#3-streaming-configuration)\n- [🛡️ Security Guide](#️-security-guide)\n - [Environment Security Configuration](#environment-security-configuration)\n - [Authentication Methods Comparison](#authentication-methods-comparison)\n- [🔍 Debugging and Testing](#-debugging-and-testing)\n - [Debug Configuration](#debug-configuration)\n - [Configuration Validation](#configuration-validation)\n- [📋 Usage Scenarios](#-usage-scenarios)\n - [Standalone Usage](#standalone-usage)\n - [Integration with Other Skills](#integration-with-other-skills)\n- [🚨 Development Rules](#-development-rules)\n- [🔗 Reference Resources](#-reference-resources)\n - [📚 Core Reference Documentation](#-core-reference-documentation)\n - [🌐 SDK Official Documentation](#-sdk-official-documentation)\n - [💻 Example Code](#-example-code)\n\n# 🚀 Quick Start\n\n## Dependency Management\n\n### 📋 System Requirements\n\n| Package | Version Requirement | Auto Install | Purpose |\n| --------------------- | ------------------- | ------------ | -------------------------------- |\n| **@ant-design/x-sdk** | ≥2.2.2 | ✅ | Core SDK, includes XRequest tool |\n\n### 🛠️ One-click Installation\n\n```bash\n# Recommended to use tnpm\ntnpm install @ant-design/x-sdk\n\n# Or use npm\nnpm add @ant-design/x-sdk\n\n# Check version\nnpm ls @ant-design/x-sdk\n```\n\n## Basic Configuration\n\n### Simplest Usage\n\n```typescript\nimport { XRequest } from '@ant-design/x-sdk';\n\n// Minimal configuration: only need to provide API URL\nconst request = XRequest('https://api.example.com/chat');\n\n// For manual control (used in Provider scenarios)\nconst providerRequest = XRequest('https://api.example.com/chat', {\n manual: true, // Usually only this needs explicit configuration\n});\n```\n\n> 💡 **Tip**: XRequest has built-in reasonable default configurations. In most cases, you only need to provide the API URL to use it.\n\n# 📦 Technology Stack Overview\n\n## 🏗️ Technology Stack Architecture\n\n```mermaid\ngraph TD\n A[XRequest] --> B[Network Requests]\n A --> C[Authentication Management]\n A --> D[Error Handling]\n A --> E[Streaming Processing]\n B --> F[fetch Wrapper]\n C --> G[Token Management]\n D --> H[Retry Mechanism]\n E --> I[Server-Sent Events]\n```\n\n## 🔑 Core Concepts\n\n| Concept | Role Positioning | Core Responsibilities | Usage Scenarios |\n| --- | --- | --- | --- |\n| **XRequest** | 🌐 Request Tool | Handle all network communication, authentication, error handling | Unified request management |\n| **Global Config** | ⚙️ Config Center | Configure once, use everywhere | Reduce duplicate code |\n| **Streaming Config** | 🔄 Streaming Processing | Support SSE and JSON response formats | AI conversation scenarios |\n\n# 🔧 Core Configuration Details\n\nCore functionality reference content [CORE.md](reference/CORE.md)\n\n# 🛡️ Security Guide\n\n## Environment Security Configuration\n\n### 🌍 Security Strategies for Different Environments\n\n| Runtime Environment | Security Level | Configuration Method | Risk Description |\n| --- | --- | --- | --- |\n| **Browser Frontend** | 🔴 High Risk | ❌ Prohibit key configuration | Keys will be directly exposed to users |\n| **Node.js Backend** | 🟢 Safe | ✅ Environment variable configuration | Keys stored on server side |\n| **Proxy Service** | 🟢 Safe | ✅ Same-origin proxy forwarding | Keys managed by proxy service |\n\n### 🔐 Authentication Methods Comparison\n\n| Authentication Method | Applicable Environment | Configuration Example | Security |\n| --- | --- | --- | --- |\n| **Bearer Token** | Node.js | `Bearer ${process.env.API_KEY}` | ✅ Safe |\n| **API Key Header** | Node.js | `X-API-Key: ${process.env.KEY}` | ✅ Safe |\n| **Proxy Forwarding** | Browser | `/api/proxy/service` | ✅ Safe |\n| **Direct Configuration** | Browser | `Bearer sk-xxx` | ❌ Dangerous |\n\n# 🔍 Debugging and Testing\n\n## Debug Configuration\n\n### 🛠️ Debug Templates\n\n**Node.js Debug Configuration**:\n\n```typescript\n// Safe debug configuration (Node.js environment)\nconst debugRequest = XRequest('https://your-api.com/chat', {\n headers: {\n Authorization: `Bearer ${process.env.DEBUG_API_KEY}`,\n },\n params: { query: 'test message' },\n});\n```\n\n**Frontend Debug Configuration**:\n\n```typescript\n// Safe debug configuration (frontend environment)\nconst debugRequest = XRequest('/api/debug/chat', {\n params: { query: 'test message' },\n});\n```\n\n## Configuration Validation\n\n### ✅ Security Check Tools\n\n```typescript\n// Security configuration validation function\nconst validateSecurity = (config: any) => {\n const isBrowser = typeof window !== 'undefined';\n const hasAuth = config.headers?.Authorization || config.headers?.authorization;\n\n if (isBrowser && hasAuth) {\n throw new Error(\n '❌ Frontend environment prohibits Authorization configuration, risk of key leakage!',\n );\n }\n\n console.log('✅ Security configuration check passed');\n return true;\n};\n\n// Usage example\nvalidateSecurity({\n headers: {\n // Do not include Authorization\n },\n});\n```\n\n# 📋 Usage Scenarios\n\n## Standalone Usage\n\n### 🎯 Direct Request Initiation\n\n```typescript\nimport { XRequest } from '@ant-design/x-sdk';\n\n// Test interface availability\nconst testRequest = XRequest('https://httpbin.org/post', {\n params: { test: 'data' },\n});\n\n// Send request immediately\nconst response = await testRequest();\nconsole.log(response);\n```\n\n## Integration with Other Skills\n\n### 🔄 Skill Collaboration Workflow\n\n```mermaid\ngraph TD\n A[x-request] -->|Configure Request| B[x-chat-provider]\n A -->|Configure Request| C[use-x-chat]\n B -->|Provide Provider| C\n A --> D[Direct Request]\n```\n\n| Usage Method | Cooperating Skill | Purpose | Example |\n| --- | --- | --- | --- |\n| **Standalone** | None | Direct network request initiation | Test interface availability |\n| **With x-chat-provider** | x-chat-provider | Configure requests for custom Provider | Configure private API |\n| **With use-x-chat** | use-x-chat | Configure requests for built-in Provider | Configure OpenAI API |\n| **Complete AI Application** | x-request → x-chat-provider → use-x-chat | Configure requests for entire system | Complete AI conversation application |\n\n### ⚠️ useXChat Integration Security Warning\n\n**Important Warning: useXChat is only for frontend environments, XRequest configuration must not contain Authorization!**\n\n**❌ Incorrect Configuration (Dangerous)**:\n\n```typescript\n// Extremely dangerous: keys will be directly exposed to browser\nconst unsafeRequest = XRequest('https://api.openai.com/v1/chat/completions', {\n headers: {\n Authorization: 'Bearer sk-xxxxxxxxxxxxxx', // ❌ Dangerous!\n },\n manual: true,\n});\n```\n\n**✅ Correct Configuration (Safe)**:\n\n```typescript\n// Frontend security configuration: use proxy service\nconst safeRequest = XRequest('/api/proxy/openai', {\n params: {\n model: 'gpt-3.5-turbo',\n stream: true,\n },\n manual: true,\n});\n```\n\n# 🚨 Development Rules\n\n## Test Case Rules\n\n- **If the user does not explicitly need test cases, do not add test files**\n- **Only create test cases when the user explicitly requests them**\n\n## Code Quality Rules\n\n- **After completion, must check types**: Run `tsc --noEmit` to ensure no type errors\n- **Keep code clean**: Remove all unused variables and imports\n\n## ✅ Configuration Checklist\n\nBefore using XRequest, please confirm the following configurations are correctly set:\n\n### 🔍 Configuration Checklist\n\n| Check Item | Status | Description |\n| --- | --- | --- |\n| **API URL** | ✅ Must Configure | `XRequest('https://api.xxx.com')` |\n| **Auth Info** | ⚠️ Environment Related | Frontend❌Prohibited, Node.js✅Available |\n| **manual Config** | ✅ Provider Scenario | In Provider needs to be set to `true`, other scenarios need to be set according to actual situation |\n| **Other Config** | ❌ No Need to Configure | Built-in reasonable default values |\n| **Interface Availability** | ✅ Recommended Test | Verify with debug configuration |\n\n### 🛠️ Quick Verification Script\n\n```typescript\n// Check configuration before running\nconst checkConfig = () => {\n const checks = [\n {\n name: 'Global Configuration',\n test: () => {\n // Check if global configuration has been set\n return true; // Check according to actual situation\n },\n },\n {\n name: 'Security Configuration',\n test: () => validateSecurity(globalConfig),\n },\n {\n name: 'Type Check',\n test: () => {\n // Run tsc --noEmit\n return true;\n },\n },\n ];\n\n checks.forEach((check) => {\n console.log(`${check.name}: ${check.test() ? '✅' : '❌'}`);\n });\n};\n```\n\n## 🎯 Skill Collaboration\n\n```mermaid\ngraph LR\n A[x-request] -->|Configure Request| B[x-chat-provider]\n A -->|Configure Request| C[use-x-chat]\n B -->|Provide Provider| C\n```\n\n### 📊 Skill Usage Comparison Table\n\n| Usage Scenario | Required Skills | Usage Order | Completion Time |\n| --- | --- | --- | --- |\n| **Test Interface** | x-request | Direct Use | 2 minutes |\n| **Private API Adaptation** | x-request → x-chat-provider | Configure request first, then create Provider | 10 minutes |\n| **Standard AI Application** | x-request → use-x-chat | Configure request first, then build interface | 15 minutes |\n| **Complete Customization** | x-request → x-chat-provider → use-x-chat | Complete workflow | 30 minutes |\n\n# 🔗 Reference Resources\n\n## 📚 Core Reference Documentation\n\n- [API.md](reference/API.md) - Complete API reference documentation\n- [EXAMPLES_SERVICE_PROVIDER.md](reference/EXAMPLES_SERVICE_PROVIDER.md) - Configuration examples for various service providers\n\n## 🌐 SDK Official Documentation\n\n- [useXChat Official Documentation](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/use-x-chat.en-US.md)\n- [XRequest Official Documentation](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/x-request.en-US.md)\n- [Chat Provider Official Documentation](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/chat-provider.en-US.md)\n\n## 💻 Example Code\n\n- [custom-provider-width-ui.tsx](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/demos/chat-providers/custom-provider-width-ui.tsx) - Complete example of custom Provider\n" }, { "path": "packages/x-skill/skills/x-request/reference/API.md", "content": "### XRequestFunction\n\n```ts | pure\ntype XRequestFunction, Output = Record> = (\n baseURL: string,\n options: XRequestOptions,\n) => XRequestClass;\n```\n\n### XRequestFunction\n\n| Property | Description | Type | Default | Version |\n| -------- | ---------------- | -------------------------------- | ------- | ------- |\n| baseURL | API endpoint URL | string | - | - |\n| options | Request options | XRequestOptions\\ | - | - |\n\n### XRequestOptions\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| callbacks | Request callback handlers | XRequestCallbacks\\ | - | - |\n| params | Request parameters | Input | - | - |\n| headers | Additional request headers | Record\\ | - | - |\n| timeout | Request timeout configuration (time from sending request to connecting to service), unit: ms | number | - | - |\n| streamTimeout | Stream mode data timeout configuration (time interval for each chunk return), unit: ms | number | - | - |\n| fetch | Custom fetch object | `typeof fetch` | - | - |\n| middlewares | Middlewares for pre- and post-request processing | XFetchMiddlewares | - | - |\n| transformStream | Stream processor | XStreamOptions\\['transformStream'] \\| ((baseURL: string, responseHeaders: Headers) => XStreamOptions\\['transformStream']) | - | - |\n| streamSeparator | Stream separator, used to separate different data streams. Does not take effect when transformStream has a value | string | \\n\\n | 2.2.0 |\n| partSeparator | Part separator, used to separate different parts of data. Does not take effect when transformStream has a value | string | \\n | 2.2.0 |\n| kvSeparator | Key-value separator, used to separate keys and values. Does not take effect when transformStream has a value | string | : | 2.2.0 |\n| manual | Whether to manually control request sending. When `true`, need to manually call `run` method | boolean | false | - |\n| retryInterval | Retry interval when request is interrupted or fails, in milliseconds. If not set, automatic retry will not occur | number | - | - |\n| retryTimes | Maximum number of retry attempts. No further retries will be attempted after exceeding this limit | number | - | - |\n\n### XRequestCallbacks\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| onSuccess | Success callback. When used with Chat Provider, additionally gets the assembled message | (chunks: Output[], responseHeaders: Headers, message: ChatMessage) => void | - | - |\n| onError | Error handling callback. `onError` can return a number indicating the retry interval (in milliseconds) when a request exception occurs. When both `onError` return value and `options.retryInterval` exist, the `onError` return value takes precedence. When used with Chat Provider, additionally gets the assembled fail back message | (error: Error, errorInfo: any, responseHeaders?: Headers, message: ChatMessage) => number \\| void | - | - |\n| onUpdate | Message update callback. When used with Chat Provider, additionally gets the assembled message | (chunk: Output, responseHeaders: Headers, message: ChatMessage) => void | - | - |\n\n### XRequestClass\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| abort | Cancel request | () => void | - | - |\n| run | Manually execute request (effective when `manual=true`) | (params?: Input) => void | - | - |\n| isRequesting | Whether currently requesting | boolean | - | - |\n\n### setXRequestGlobalOptions\n\n```ts | pure\ntype setXRequestGlobalOptions = (\n options: XRequestGlobalOptions,\n) => void;\n```\n\n### XRequestGlobalOptions\n\n```ts | pure\ntype XRequestGlobalOptions = Pick<\n XRequestOptions,\n 'headers' | 'timeout' | 'streamTimeout' | 'middlewares' | 'fetch' | 'transformStream' | 'manual'\n>;\n```\n\n### XFetchMiddlewares\n\n```ts | pure\ninterface XFetchMiddlewares {\n onRequest?: (...ags: Parameters) => Promise>;\n onResponse?: (response: Response) => Promise;\n}\n```\n\n## FAQ\n\n### When using transformStream in XRequest, it causes stream locking issues on the second input request. How to solve this?\n\n```ts | pure\nonError TypeError: Failed to execute 'getReader' on 'ReadableStream': ReadableStreamDefaultReader constructor can only accept readable streams that are not yet locked to a reader\n```\n\nThe Web Streams API stipulates that a stream can only be locked by one reader at the same time. Reuse will cause an error. Therefore, when using TransformStream, you need to pay attention to the following points:\n\n1. Ensure that the transformStream function returns a new ReadableStream object, not the same object.\n2. Ensure that the transformStream function does not perform multiple read operations on response.body.\n\n**Recommended Writing**\n\n```tsx | pure\nconst [provider] = React.useState(\n new CustomProvider({\n request: XRequest(url, {\n manual: true,\n // Recommended: transformStream returns a new instance with a function\n transformStream: () =>\n new TransformStream({\n transform(chunk, controller) {\n // Your custom processing logic\n controller.enqueue({ data: chunk });\n },\n }),\n // Other configurations...\n }),\n }),\n);\n```\n\n```tsx | pure\nconst request = XRequest(url, {\n manual: true,\n transformStream: new TransformStream({ ... }), // Do not persist in Provider/useState\n});\n```\n" }, { "path": "packages/x-skill/skills/x-request/reference/CORE.md", "content": "# 1. Built-in Default Configuration\n\nXRequest has built-in reasonable default configurations, **no additional configuration needed to use**.\n\n**Built-in Default Values**:\n\n- `method: 'POST'`\n- `headers: { 'Content-Type': 'application/json' }`\n\n# 2. Security Configuration\n\n## 🔐 Authentication Configuration Comparison\n\n| Environment Type | Configuration Method | Security | Example |\n| --- | --- | --- | --- |\n| **Frontend Browser** | ❌ Prohibit direct configuration | Dangerous | Keys will be exposed to users |\n| **Node.js** | ✅ Environment variables | Safe | `process.env.API_KEY` |\n| **Proxy Service** | ✅ Same-origin proxy | Safe | `/api/proxy/chat` |\n\n## 🛡️ Security Configuration Templates\n\n**Node.js Environment Security Configuration**:\n\n```typescript\nconst nodeConfig = {\n baseURL: 'https://api.openai.com/v1',\n headers: {\n Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,\n },\n};\n```\n\n**Frontend Environment Security Configuration**:\n\n```typescript\nconst browserConfig = {\n baseURL: '/api/proxy/openai', // Through same-origin proxy\n};\n```\n\n# 3. Basic Usage\n\n```typescript\nimport { XRequest } from '@ant-design/x-sdk';\n\n// ⚠️ Note: The following examples apply to Node.js environment\n// Frontend environments should use proxy services to avoid token leakage\nconst request = XRequest('https://your-api.com/chat', {\n headers: {\n Authorization: 'Bearer your-token', // ⚠️ Only for Node.js environment\n },\n params: {\n query: 'Hello',\n },\n manual: true, // ⚠️ Must be set to true when used in provider\n callbacks: {\n onSuccess: (messages) => {\n setStatus('success');\n console.log('onSuccess', messages);\n },\n onError: (error) => {\n setStatus('error');\n console.error('onError', error);\n },\n onUpdate: (msg) => {\n setLines((pre) => [...pre, msg]);\n console.log('onUpdate', msg);\n },\n },\n});\n```\n\n> ⚠️ **Important Reminder**: When XRequest is used in x-chat-provider or use-x-chat provider, `manual: true` is a required configuration, otherwise the request will be sent immediately instead of waiting for invocation.\n\n````\n\n### With URL Parameters\n\n```typescript\nconst request = XRequest('https://your-api.com/chat', {\n method: 'GET',\n params: {\n model: 'gpt-3.5-turbo',\n max_tokens: 1000,\n },\n});\n````\n\n# 4. Streaming Configuration\n\n## 🔄 Streaming Response Configuration\n\n```typescript\n// Streaming response configuration (AI conversation scenarios)\nconst streamConfig = {\n params: {\n stream: true, // Enable streaming response\n model: 'gpt-3.5-turbo',\n max_tokens: 1000,\n },\n manual: true, // Manual control of requests\n};\n\n// Non-streaming response configuration (regular API scenarios)\nconst jsonConfig = {\n params: {\n stream: false, // Disable streaming response\n },\n};\n```\n\n# 5. Dynamic Request Headers\n\n```typescript\n// ❌ Unsafe: Frontend directly exposes API key\n// const request = XRequest('https://your-api.com/chat', {\n// headers: {\n// 'Authorization': `Bearer ${apiKey}`, // Don't do this!\n// },\n// params: {\n// messages: [{ role: 'user', content: 'Hello' }],\n// },\n// });\n\n// ✅ Safe: Node.js environment uses environment variables\nconst request = XRequest('https://your-api.com/chat', {\n headers: {\n Authorization: `Bearer ${process.env.API_KEY}`, // Safe for Node.js environment\n },\n params: {\n messages: [{ role: 'user', content: 'Hello' }],\n },\n});\n\n// ✅ Safe: Frontend uses proxy service\nconst request = XRequest('/api/proxy/chat', {\n headers: {\n // No Authorization needed, handled by backend proxy\n },\n params: {\n messages: [{ role: 'user', content: 'Hello' }],\n },\n});\n```\n\n# 6. Custom Stream Transformers\n\nWhen AI service providers return non-standard formats, use `transformStream` for custom data transformation.\n\n#### Basic Example\n\n```typescript\nconst request = XRequest('https://api.example.com/chat', {\n params: { message: 'Hello' },\n transformStream: () =>\n new TransformStream({\n transform(chunk, controller) {\n // TextDecoder converts binary data to string\n const text = new TextDecoder().decode(chunk);\n const lines = text.split('\\n');\n\n for (const line of lines) {\n if (line.startsWith('data: ')) {\n const data = line.slice(6);\n if (data !== '[DONE]') {\n // TextEncoder converts string back to binary\n controller.enqueue(new TextEncoder().encode(data));\n }\n }\n }\n },\n }),\n});\n```\n\n#### Common Transformation Templates\n\n```typescript\n// OpenAI format\nconst openaiStream = () =>\n new TransformStream({\n transform(chunk, controller) {\n const text = new TextDecoder().decode(chunk);\n const data = JSON.parse(text);\n const content = data.choices?.[0]?.delta?.content || '';\n controller.enqueue(new TextEncoder().encode(content));\n },\n });\n\n// Usage example\nconst request = XRequest(url, {\n params: { message: 'Hello' },\n transformStream: openaiStream,\n});\n```\n\n> ⚠️ **Note**: ReadableStream can only be locked by one reader, avoid reusing the same instance.\n\n#### 🔍 TextDecoder/TextEncoder Explanation\n\n**When are they needed?**\n\n| Scenario | Data Type | Need Conversion? |\n| ---------------------------- | ------------------------- | ------------------------- |\n| **Standard fetch API** | `Uint8Array` binary | ✅ Need TextDecoder |\n| **XRequest wrapper** | May be string | ❌ May not need |\n| **Custom stream processing** | Depends on implementation | 🤔 Need to determine type |\n\n**Practical Usage Suggestions:**\n\n```typescript\ntransformStream: () =>\n new TransformStream({\n transform(chunk, controller) {\n // Safe approach: check type first\n const text = typeof chunk === 'string' ? chunk : new TextDecoder().decode(chunk);\n\n // Now text is definitely a string\n controller.enqueue(text);\n },\n });\n```\n" }, { "path": "packages/x-skill/skills/x-request/reference/EXAMPLES_SERVICE_PROVIDER.md", "content": "### 1️⃣ OpenAI Standard Format\n\n**Node.js Environment (Safe)**\n\n```typescript\nconst openAIRequest = XRequest('https://api.example-openai.com/v1/chat/completions', {\n headers: {\n Authorization: `Bearer ${process.env.OPENAI_API_KEY}`, // Node.js environment variable\n },\n params: {\n model: 'gpt-3.5-turbo',\n messages: [{ role: 'user', content: 'Hello' }],\n stream: true,\n },\n});\n```\n\n**Frontend Environment (Using Proxy)**\n\n```typescript\n// ❌ Dangerous: Do not configure token directly in frontend\n// const openAIRequest = XRequest('https://api.example-openai.com/v1/chat/completions', {\n// headers: {\n// 'Authorization': 'Bearer sk-xxxxxxxx', // ❌ Will expose key\n// },\n// });\n\n// ✅ Safe: Through same-origin proxy\nconst openAIRequest = XRequest('/api/proxy/openai', {\n params: {\n model: 'gpt-3.5-turbo',\n messages: [{ role: 'user', content: 'Hello' }],\n stream: true,\n },\n});\n```\n\n### 2️⃣ Alibaba Cloud Bailian (Tongyi Qianwen)\n\n```typescript\nconst bailianRequest = XRequest(\n 'https://api.example-aliyun.com/api/v1/services/aigc/text-generation/generation',\n {\n headers: {\n Authorization: 'Bearer API_KEY',\n },\n params: {\n model: 'qwen-turbo',\n input: {\n messages: [{ role: 'user', content: 'Hello' }],\n },\n parameters: {\n result_format: 'message',\n incremental_output: true,\n },\n },\n },\n);\n```\n\n### 3️⃣ Baidu Qianfan (Wenxin Yiyan)\n\n```typescript\nconst qianfanRequest = XRequest(\n 'https://api.example-baidu.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions',\n {\n params: {\n messages: [{ role: 'user', content: 'Hello' }],\n stream: true,\n },\n },\n);\n```\n\n### 4️⃣ Zhipu AI (ChatGLM)\n\n```typescript\nconst zhipuRequest = XRequest('https://api.example-zhipu.com/api/paas/v4/chat/completions', {\n headers: {\n Authorization: 'Bearer API_KEY',\n },\n params: {\n model: 'glm-4',\n messages: [{ role: 'user', content: 'Hello' }],\n stream: true,\n },\n});\n```\n\n### 5️⃣ Xunfei Spark\n\n```typescript\nconst sparkRequest = XRequest('https://api.example-spark.com/v1/chat/completions', {\n headers: {\n Authorization: 'Bearer API_KEY',\n },\n params: {\n model: 'generalv3.5',\n messages: [{ role: 'user', content: 'Hello' }],\n stream: true,\n },\n});\n```\n\n### 6️⃣ ByteDance Doubao\n\n```typescript\nconst doubaoRequest = XRequest('https://api.example-doubao.com/api/v3/chat/completions', {\n headers: {\n Authorization: 'Bearer API_KEY',\n },\n params: {\n model: 'doubao-lite-4k',\n messages: [{ role: 'user', content: 'Hello' }],\n stream: true,\n },\n});\n```\n\n### 7️⃣ Local Private API\n\n```typescript\nconst localRequest = XRequest('http://localhost:3000/api/chat', {\n headers: {\n 'X-API-Key': 'your-local-key',\n },\n params: {\n prompt: 'Hello',\n max_length: 1000,\n temperature: 0.7,\n },\n});\n```\n" }, { "path": "packages/x-skill/skills-zh/use-x-chat/SKILL.md", "content": "---\nname: use-x-chat\nversion: 2.4.0\ndescription: 专注讲解如何使用 useXChat Hook，包括自定义 Provider 的集成、消息管理、错误处理等\n---\n\n# 🎯 技能定位\n\n> **核心定位**：使用 `useXChat` Hook 构建专业级 AI 对话应用 **前置要求**：已具备自定义 Chat Provider（参考 [x-chat-provider 技能](../x-chat-provider)）\n\n## 目录导航\n\n- [🚀 快速开始](#-快速开始)\n - [依赖管理](#1-依赖管理)\n - [三步集成](#2-三步集成)\n- [🧩 核心概念](#-核心概念)\n - [技术栈架构](#技术栈架构)\n - [数据模型](#数据模型)\n- [🔧 核心功能详解](#-核心功能详解)\n - [消息管理](#1-消息管理)\n - [请求控制](#2-请求控制)\n - [错误处理](#3-错误处理)\n - [完整示例项目](#-完整示例项目)\n- [📋 使用前提和依赖](#-使用前提和依赖)\n- [🚨 开发规则](#-开发规则)\n- [🔗 参考资源](#-参考资源)\n - [📚 核心参考文档](#-核心参考文档)\n - [🌐 SDK官方文档](#-SDK官方文档)\n - [💻 示例代码](#-示例代码)\n\n# 🚀 快速开始\n\n## 1. 依赖管理\n\n### 🎯 自动依赖处理\n\n### 📋 系统要求\n\n- **@ant-design/x-sdk**: 2.2.2+（自动安装）\n- **@ant-design/x**: 最新版（UI组件，自动安装）\n\n### ⚠️ 版本问题自动修复\n\n如果检测到版本不匹配，技能会自动：\n\n- ✅ 提示当前版本状态\n- ✅ 提供修复建议\n- ✅ 使用相对路径确保兼容性\n\n#### 🎯 技能内置版本检查\n\nuse-x-chat 技能已内置版本检查功能，启动时自动检查版本兼容性：\n\n**🔍 自动检查功能** 技能启动时会自动检查 `@ant-design/x-sdk` 版本是否符合要求（≥2.2.2）：\n\n**📋 检查内容包括：**\n\n- ✅ 当前安装的版本\n- ✅ 是否符合最低要求（≥2.2.2）\n- ✅ 自动提供修复建议\n- ✅ 友好的错误提示\n\n**🛠️ 版本问题修复** 如果检测到版本不匹配，技能会提供具体的修复命令：\n\n```bash\n# 自动提示的修复命令\nnpm install @ant-design/x-sdk@^2.2.2\n\n# 或安装最新版本\nnpm install @ant-design/x-sdk@latest\n```\n\n## 2. 三步集成\n\n### 步骤1：准备 Provider\n\n这部分由 x-chat-provider 技能负责\n\n```ts\nimport { MyChatProvider } from './MyChatProvider';\nimport { XRequest } from '@ant-design/x-sdk';\n\n// 推荐使用 XRequest 作为默认请求方式\nconst provider = new MyChatProvider({\n // 默认使用 XRequest，无需自定义 fetch\n request: XRequest('https://your-api.com/chat'),\n // 当设置 requestPlaceholder 时，会在请求开始前显示占位消息\n requestPlaceholder: {\n content: '正在思考中...',\n role: 'assistant',\n timestamp: Date.now(),\n },\n // 当设置 requestFallback 时，会在请求失败时显示兜底消息\n requestFallback: (_, { error, errorInfo, messageInfo }) => {\n if (error.name === 'AbortError') {\n return {\n content: messageInfo?.message?.content || '已取消回复',\n role: 'assistant' as const,\n timestamp: Date.now(),\n };\n }\n return {\n content: errorInfo?.error?.message || '网络异常，请稍后重试',\n role: 'assistant' as const,\n timestamp: Date.now(),\n };\n },\n});\n```\n\n### 步骤2：基础使用\n\n```tsx\nimport { useXChat } from '@ant-design/x-sdk';\n\nconst ChatComponent = () => {\n const { messages, onRequest, isRequesting } = useXChat({ provider });\n\n return (\n
    \n {messages.map((msg) => (\n
    \n {msg.message.role}: {msg.message.content}\n
    \n ))}\n \n
    \n );\n};\n```\n\n### 步骤3：UI集成\n\n```tsx\nimport { Bubble, Sender } from '@ant-design/x';\n\nconst ChatUI = () => {\n const { messages, onRequest, isRequesting, abort } = useXChat({ provider });\n\n return (\n
    \n \n onRequest({ query: content })}\n onCancel={abort}\n />\n
    \n );\n};\n```\n\n# 🧩 核心概念\n\n## 技术栈架构\n\n```mermaid\ngraph TD\n A[useXChat Hook] --> B[Chat Provider]\n B --> C[XRequest]\n A --> D[Ant Design X UI]\n D --> E[Bubble组件]\n D --> F[Sender组件]\n```\n\n### 数据模型\n\n> ⚠️ **重要提醒**：`messages` 类型是 `MessageInfo[]`，不是直接的 `MessageType`\n\n```ts\ninterface MessageInfo {\n id: number | string; // 消息唯一标识\n message: Message; // 实际消息内容\n status: MessageStatus; // 发送状态\n extraInfo?: AnyObject; // 扩展信息\n}\n\n// 消息状态枚举\ntype MessageStatus = 'local' | 'loading' | 'updating' | 'success' | 'error' | 'abort';\n```\n\n# 🔧 核心功能详解\n\n> 💡 **提示**：API可能会随版本更新，建议查看[官方文档](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/use-x-chat.zh-CN.md)获取最新信息\n\n核心功能参考内容 [CORE.md](reference/CORE.md)\n\n# 📋 使用前提和依赖\n\n## ⚠️ 重要依赖\n\n**use-x-chat 必须依赖以下技能之一：**\n\n| 依赖类型 | 技能 | 说明 | 是否必须 |\n| --- | --- | --- | --- |\n| **核心依赖** | **x-chat-provider** | 提供自定义 Provider 实例，默认使用 XRequest, **必须**配合 use-x-chat | **必须** |\n| **或** | **内置 Provider** | OpenAI/DeepSeek 等内置 Provider，默认使用 XRequest | **必须** |\n| **推荐依赖** | **x-request** | 配置请求参数和认证，作为默认请求方式 | **推荐** |\n\n## 🎯 使用场景对照表\n\n| 使用场景 | 需要的技能组合 | 使用顺序 |\n| ---------------- | ---------------------------------------- | ---------------------- |\n| **私有API适配** | x-chat-provider → use-x-chat | 先创建Provider，再使用 |\n| **标准API使用** | use-x-chat（内置Provider） | 直接使用 |\n| **需要认证配置** | x-request → use-x-chat | 先配置请求，再使用 |\n| **完整自定义** | x-chat-provider → x-request → use-x-chat | 完整工作流 |\n\n# 🚨 开发规则\n\n## 使用 use-x-chat 前必须确认：\n\n- [ ] **已有 Provider 来源**（以下二选一）：\n - [ ] 已用 **x-chat-provider** 创建自定义 Provider\n - [ ] 决定使用内置 Provider（OpenAI/DeepSeek）\n- [ ] 已安装 @ant-design/x-sdk\n- [ ] 已了解 MessageInfo 数据结构\n- [ ] 已准备好 UI 组件\n\n### 测试用例规则\n\n- **如果用户没有明确需要测试用例，则不要添加测试文件**\n- **仅在用户明确要求时才创建测试用例**\n\n### 代码质量规则\n\n- **完成编写后必须检查类型**：运行 `tsc --noEmit` 确保无类型错误\n- **保持代码整洁**：移除所有未使用的变量和导入\n\n# 🔗 参考资源\n\n## 📚 核心参考文档\n\n- [API.md](reference/API.md) - 完整的 API 参考文档\n- [EXAMPLES.md](reference/EXAMPLES.md) - 所有实战示例代码\n\n## 🌐 SDK官方文档\n\n- [useXChat 官方文档](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/use-x-chat.zh-CN.md)\n- [XRequest 官方文档](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/x-request.zh-CN.md)\n- [Chat Provider 官方文档](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/chat-provider.zh-CN.md)\n\n## 💻 示例代码\n\n- [custom-provider-width-ui.tsx](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/demos/chat-providers/custom-provider-width-ui.tsx) - 自定义 Provider 完整示例\n" }, { "path": "packages/x-skill/skills-zh/use-x-chat/reference/API.md", "content": "### useXChat\n\n```tsx | pure\ntype useXChat<\n ChatMessage extends SimpleType = object,\n ParsedMessage extends SimpleType = ChatMessage,\n Input = RequestParams,\n Output = SSEOutput,\n> = (config: XChatConfig) => XChatConfigReturnType;\n```\n\n\n| 属性 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| ChatMessage | 消息数据类型，定义聊天消息的结构 | object | object | - |\n| ParsedMessage | 解析后的消息类型，用于组件消费的消息格式 | ChatMessage | ChatMessage | - |\n| Input | 请求参数类型，定义发送请求的参数结构 | RequestParams\\ | RequestParams\\ | - |\n| Output | 响应数据类型，定义接收响应的数据格式 | SSEOutput | SSEOutput | - |\n\n### XChatConfig\n\n\n| 属性 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| provider | 数据提供方，用于将不同结构的数据及请求转换为useXChat能消费的格式，平台内置了`DefaultChatProvider`和`OpenAIChatProvider`，你也可以通过继承`AbstractChatProvider`实现自己的Provider。详见：[Chat Provider文档](/x-sdks/chat-provider-cn) | AbstractChatProvider\\ | - | - |\n| conversationKey | 会话唯一标识（全局唯一），用于区分不同的会话 | string | Symbol('ConversationKey') | - |\n| defaultMessages | 默认展示信息 | MessageInfo\\[] \\| (info: { conversationKey?: string }) => MessageInfo\\[] \\| (info: { conversationKey?: string }) => Promise\\[]\\> | - | - |\n| parser | 将 ChatMessage 转换成消费使用的 ParsedMessage，不设置时则直接消费 ChatMessage。支持将一条 ChatMessage 转换成多条 ParsedMessage | (message: ChatMessage) => BubbleMessage \\| BubbleMessage[] | - | - |\n| requestFallback | 请求失败的兜底信息，不提供则不会展示 | ChatMessage \\| (requestParams: Partial\\,info: { error: Error; errorInfo: any; messages: ChatMessage[], message: ChatMessage }) => ChatMessage\\|Promise\\ | - | - |\n| requestPlaceholder | 请求中的占位信息，不提供则不会展示 | ChatMessage \\| (requestParams: Partial\\, info: { messages: Message[] }) => ChatMessage \\|Promise\\| - | - |\n\n### XChatConfigReturnType\n\n| 属性 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| abort | 取消请求 | () => void | - | - |\n| isRequesting | 是否在请求中 | boolean | - | - |\n| isDefaultMessagesRequesting | 默认消息列表是否在请求中 | boolean | false | 2.2.0 |\n| messages | 当前管理消息列表的内容 | MessageInfo\\[] | - | - |\n| parsedMessages | 经过 `parser` 转译过的内容 | MessageInfo\\[] | - | - |\n| onReload | 重新生成，会发送请求到后台，使用新返回数据更新该条消息 | (id: string \\| number, requestParams: Partial\\,opts: { extra: AnyObject }) => void | - | - |\n| onRequest | 添加一条 Message，并且触发请求 | (requestParams: Partial\\,opts: { extra: AnyObject }) => void | - | - |\n| setMessages | 直接修改 messages，不会触发请求 | (messages: Partial\\\\>[]) => void | - | - |\n| setMessage | 直接修改单条 message，不会触发请求 | (id: string \\| number, info: Partial\\\\>) => void | - | - |\n| removeMessage | 删除单条 message，不会触发请求 | (id: string \\| number) => void | - | - |\n| queueRequest | 会将请求加入队列，等待 conversationKey 初始化完成后再发送 | (conversationKey: string \\| symbol, requestParams: Partial\\, opts?: { extraInfo: AnyObject }) => void | - | - |\n\n#### MessageInfo\n\n```ts\ninterface MessageInfo {\n id: number | string;\n message: ChatMessage;\n status: MessageStatus;\n extra?: AnyObject;\n}\n```\n\n#### MessageStatus\n\n```ts\ntype MessageStatus = 'local' | 'loading' | 'updating' | 'success' | 'error' | 'abort';\n```\n" }, { "path": "packages/x-skill/skills-zh/use-x-chat/reference/CORE.md", "content": "### 1. 消息管理\n\n#### 获取消息列表\n\n```ts\nconst { messages } = useXChat({ provider });\n// messages 结构: MessageInfo[]\n// 实际消息数据在 msg.message 中\n```\n\n#### 手动设置消息\n\n```ts\nconst { setMessages } = useXChat({ provider });\n\n// 清空消息\nsetMessages([]);\n\n// 添加欢迎消息 - 注意是 MessageInfo 结构\nsetMessages([\n {\n id: 'welcome',\n message: {\n content: '欢迎使用 AI 助手',\n role: 'assistant',\n },\n status: 'success',\n },\n]);\n```\n\n#### 更新单条消息\n\n```ts\nconst { setMessage } = useXChat({ provider });\n\n// 更新消息内容 - 需要更新 message 对象\nsetMessage('msg-id', {\n message: { content: '新的内容', role: 'assistant' },\n});\n\n// 标记为错误 - 更新 status\nsetMessage('msg-id', { status: 'error' });\n```\n\n### 2. 请求控制\n\n#### 发送消息\n\n```ts\nconst { onRequest } = useXChat({ provider });\n\n// 基础使用\nonRequest({ query: '用户问题' });\n\n// 带额外参数\nonRequest({\n query: '用户问题',\n context: '之前的对话内容',\n userId: 'user123',\n});\n```\n\n#### 中断请求\n\n```tsx\nconst { abort, isRequesting } = useXChat({ provider });\n\n// 中断当前请求\n;\n```\n\n#### 重新发送\n\n重新发送功能允许用户重新生成特定消息的回复，这在AI回答不满意或出现错误时非常有用。\n\n#### 基础使用\n\n```tsx\nconst ChatComponent = () => {\n const { messages, onReload } = useXChat({ provider });\n\n return (\n
    \n {messages.map((msg) => (\n
    \n {msg.message.content}\n {msg.message.role === 'assistant' && (\n \n )}\n
    \n ))}\n
    \n );\n};\n```\n\n#### 重新发送的注意事项\n\n1. **只能重新生成AI回复**：通常只能对 `role === 'assistant'` 的消息使用重新发送\n2. **状态管理**：重新发送会将对应消息状态设为 `loading`\n3. **参数传递**：可以通过 `extra` 参数传递额外信息给Provider\n4. **错误处理**：建议配合 `requestFallback` 处理重新发送失败的情况\n\n### 3. 错误处理\n\n#### 统一错误处理\n\n```tsx\nconst { messages } = useXChat({\n provider,\n requestFallback: (_, { error, errorInfo, messageInfo }) => {\n // 网络错误\n if (!navigator.onLine) {\n return {\n content: '网络连接失败，请检查网络',\n role: 'assistant' as const,\n };\n }\n\n // 用户中断\n if (error.name === 'AbortError') {\n return {\n content: messageInfo?.message?.content || '已取消回复',\n role: 'assistant' as const,\n };\n }\n\n // 服务器错误\n return {\n content: errorInfo?.error?.message || '网络异常，请稍后重试',\n role: 'assistant' as const,\n };\n },\n});\n```\n\n### 4. 请求中的消息展示\n\n一般情况下无需配置，默认配合 Bubble 组件的 loading 状态使用，如需自定义 loading 时的内容可参考：\n\n```tsx\nconst ChatComponent = () => {\n const { messages, onRequest } = useXChat({ provider });\n return (\n
    \n {messages.map((msg) => (\n
    \n {msg.message.role}: {msg.message.content}\n
    \n ))}\n \n
    \n );\n};\n```\n\n#### 自定义请求占位符\n\n当设置 requestPlaceholder 时，会在请求开始前显示占位消息，配合 Bubble 组件的 loading 状态使用。\n\n```tsx\nconst { messages } = useXChat({\n provider,\n requestPlaceholder: (_, { error, messageInfo }) => {\n return {\n content: '正在生成中...',\n role: 'assistant',\n };\n },\n});\n```\n" }, { "path": "packages/x-skill/skills-zh/use-x-chat/reference/EXAMPLES.md", "content": "# 完整示例项目\n\n## 带有对话管理的完整项目\n\n```tsx\nimport React, { useRef, useState } from 'react';\nimport { useXChat } from '@ant-design/x-sdk';\nimport { chatProvider } from '../services/chatService';\nimport type { ChatMessage } from '../providers/ChatProvider';\nimport { Bubble, Sender, Conversations, type ConversationsProps } from '@ant-design/x';\nimport { GetRef } from 'antd';\n\nconst App: React.FC = () => {\n const [conversations, setConversations] = useState([{ key: '1', label: '新对话' }]);\n const [activeKey, setActiveKey] = useState('1');\n const senderRef = useRef>(null);\n // 新建对话\n const handleNewConversation = () => {\n const newKey = Date.now().toString();\n const newConversation = {\n key: newKey,\n label: `对话 ${conversations.length + 1}`,\n };\n setConversations((prev) => [...prev, newConversation]);\n setActiveKey(newKey);\n };\n\n // 删除对话\n const handleDeleteConversation = (key: string) => {\n setConversations((prev) => {\n const filtered = prev.filter((item) => item.key !== key);\n if (filtered.length === 0) {\n // 如果没有对话了，创建一个新的\n const newKey = Date.now().toString();\n return [{ key: newKey, label: '新对话' }];\n }\n return filtered;\n });\n\n // 如果删除的是当前激活的对话，切换到第一个\n if (activeKey === key) {\n setActiveKey(conversations[0]?.key || '1');\n }\n };\n\n const { messages, onRequest, isRequesting, abort } = useXChat<\n ChatMessage,\n ChatMessage,\n { query: string },\n { content: string; time: string; status: 'success' | 'error' }\n >({\n provider: chatProvider,\n conversationKey: activeKey,\n requestFallback: (_, { error }) => {\n if (error.name === 'AbortError') {\n return { content: '已取消', role: 'assistant' as const, timestamp: Date.now() };\n }\n return { content: '请求失败', role: 'assistant' as const, timestamp: Date.now() };\n },\n });\n\n const menuConfig: ConversationsProps['menu'] = (conversation) => ({\n items: [\n {\n label: '删除',\n key: 'delete',\n danger: true,\n },\n ],\n onClick: ({ key: menuKey }) => {\n if (menuKey === 'delete') {\n handleDeleteConversation(conversation.key);\n }\n },\n });\n\n return (\n
    \n {/* 会话列表 */}\n \n \n
    \n\n {/* 聊天区域 */}\n
    \n \n {conversations.find((c) => c.key === activeKey)?.label || '对话'}\n
    \n\n
    \n ({\n key: msg.id,\n content: msg.message.content,\n role: msg.message.role,\n loading: msg.status === 'loading',\n }))}\n />\n
    \n\n
    \n {\n onRequest({ query: content });\n senderRef.current?.clear?.();\n }}\n onCancel={abort}\n placeholder=\"输入消息...\"\n />\n
    \n \n \n );\n};\nexport default App;\n```\n\n## 带状态管理的重新发送\n\n```tsx\nimport React, { useRef, useState } from 'react';\nimport { useXChat } from '@ant-design/x-sdk';\nimport { Bubble, Sender } from '@ant-design/x';\nimport { Button, type GetRef } from 'antd';\nimport { chatProvider } from '../services/chatService';\nimport type { ChatMessage } from '../providers/ChatProvider';\n\nconst ChatWithRegenerate: React.FC = () => {\n const senderRef = useRef>(null);\n const { messages, onReload, isRequesting, onRequest, abort } = useXChat<\n ChatMessage,\n ChatMessage,\n { query: string },\n { content: string; time: string; status: 'success' | 'error' }\n >({\n provider: chatProvider,\n requestPlaceholder: {\n content: '正在思考中...',\n role: 'assistant',\n timestamp: Date.now(),\n },\n requestFallback: (_, { error, errorInfo, messageInfo }) => {\n if (error.name === 'AbortError') {\n return {\n content: messageInfo?.message?.content || '已取消回复',\n role: 'assistant' as const,\n timestamp: Date.now(),\n };\n }\n return {\n content: errorInfo?.error?.message || '网络异常，请稍后重试',\n role: 'assistant' as const,\n timestamp: Date.now(),\n };\n },\n });\n\n // 跟踪正在重新生成的消息ID\n const [regeneratingId, setRegeneratingId] = useState(null);\n\n const handleRegenerate = (messageId: string | number): void => {\n setRegeneratingId(messageId);\n onReload(\n messageId,\n {},\n {\n extraInfo: { regenerate: true },\n },\n );\n };\n\n return (\n
    \n ({\n key: msg.id,\n content: msg.message.content,\n role: msg.message.role,\n loading: msg.status === 'loading',\n footer: msg.message.role === 'assistant' && (\n handleRegenerate(msg.id)}\n disabled={isRequesting && regeneratingId !== msg.id}\n >\n {regeneratingId === msg.id ? '生成中...' : '重新生成'}\n \n ),\n }))}\n />\n
    \n {\n onRequest({ query: content });\n senderRef.current?.clear?.();\n }}\n onCancel={abort}\n ref={senderRef}\n placeholder=\"输入消息...\"\n allowSpeech\n prefix={\n \n }\n />\n
    \n
    \n );\n};\n\nexport default ChatWithRegenerate;\n```\n" }, { "path": "packages/x-skill/skills-zh/x-chat-provider/SKILL.md", "content": "---\nname: x-chat-provider\nversion: 2.4.0\ndescription: 专注于自定义 Chat Provider 的实现，帮助将任意流式接口适配为 Ant Design X 标准格式\n---\n\n# 🎯 技能定位\n\n**本技能专注解决一个问题**：如何将你的流式接口快速适配为 Ant Design X 的 Chat Provider。\n\n**不涉及的**：useXChat 的使用教程（那是另一个技能）。\n\n## 目录导航\n\n- [📦 技术栈概览](#-技术栈概览)\n - [Ant Design X 生态](#ant-design-x-生态)\n - [核心概念](#核心概念)\n- [🚀 快速开始](#-快速开始)\n - [依赖管理](#依赖管理)\n - [内置 Provider](#内置-provider)\n - [何时需要自定义 Provider](#何时需要自定义-provider)\n- [📋 四步实现自定义 Provider](#-四步实现自定义-provider)\n - [步骤1：分析接口格式](#步骤1分析接口格式)\n - [步骤2：创建 Provider 类](#步骤2创建-provider-类)\n - [步骤3：检查文件](#步骤3检查文件)\n - [步骤4：使用 Provider](#步骤4使用-provider)\n- [🔧 常见场景适配](#-常见场景适配)\n- [📋 联合技能使用](#-联合技能使用)\n - [场景1：完整AI对话应用](#场景1完整ai对话应用)\n - [场景2：仅创建Provider](#场景2仅创建provider)\n - [场景3：使用内置Provider](#场景3使用内置provider)\n- [⚠️ 重要提醒](#️-重要提醒)\n - [强制规则：禁止自己写 request 方法](#强制规则禁止自己写-request-方法)\n- [⚡ 快速检查清单](#-快速检查清单)\n- [🚨 开发规则](#-开发规则)\n- [🔗 参考资源](#-参考资源)\n - [📚 核心参考文档](#-核心参考文档)\n - [🌐 SDK官方文档](#-SDK官方文档)\n - [💻 示例代码](#-示例代码)\n\n# 📦 技术栈概览\n\n### 🏗️ Ant Design X 生态架构\n\n| 层级 | 包名 | 核心作用 | 典型使用场景 |\n| ---------- | -------------------------- | --------------- | -------------------------- |\n| **UI层** | **@ant-design/x** | React UI 组件库 | 构建聊天界面、气泡、输入框 |\n| **逻辑层** | **@ant-design/x-sdk** | 开发工具包 | 数据流管理、Provider、Hook |\n| **渲染层** | **@ant-design/x-markdown** | Markdown 渲染器 | 内容展示、代码高亮 |\n\n> ⚠️ **重要提醒**：这三个包功能定位不同，请务必从正确的包导入所需功能\n>\n> ```ts\n> // ✅ 正确导入示例\n> import { Bubble } from '@ant-design/x'; // UI组件\n> import { AbstractChatProvider } from '@ant-design/x-sdk'; // Provider基类\n> import { XRequest } from '@ant-design/x-sdk'; // 请求工具\n> ```\n\n### 🔑 核心概念解析\n\n```mermaid\ngraph LR\n A[原始API接口] -->|适配| B[Chat Provider]\n B -->|提供数据| C[useXChat Hook]\n C -->|渲染| D[Ant Design X UI]\n E[XRequest] -->|网络请求| B\n```\n\n| 概念 | 角色定位 | 核心职责 | 使用场景 |\n| --- | --- | --- | --- |\n| **Chat Provider** | 🔄 数据适配器 | 将任意接口格式转换为Ant Design X标准格式 | 私有API适配、格式转换 |\n| **useXChat** | ⚛️ React Hook | 管理对话状态、消息流、请求控制 | 构建AI对话界面 |\n| **XRequest** | 🌐 请求工具 | 处理所有网络通信、认证、错误处理 | 统一请求管理 |\n\n# 🚀 快速开始\n\n### 📋 环境准备\n\n#### 系统要求\n\n| 依赖包 | 版本要求 | 自动安装 | 作用 |\n| --------------------- | -------- | -------- | --------------------------- |\n| **@ant-design/x-sdk** | ≥2.2.2 | ✅ | 核心SDK，包含Provider和Hook |\n| **@ant-design/x** | 最新版 | ✅ | UI组件库，构建聊天界面 |\n\n#### 🛠️ 一键环境检查\n\n```bash\n# 自动检查并修复版本\nnpm ls @ant-design/x-sdk\n# 如版本不符，自动提示：\nnpm install @ant-design/x-sdk@latest\n```\n\n#### 📊 版本兼容性矩阵\n\n| SDK版本 | 支持功能 | 兼容性 |\n| ------- | ---------------- | ----------- |\n| ≥2.2.2 | 完整Provider功能 | ✅ 推荐 |\n| 2.2.0 | 基础功能 | ⚠️ 部分兼容 |\n| <2.2.0 | 不支持 | ❌ 需升级 |\n\n### 🎯 Provider选择决策树\n\n```mermaid\ngraph TD\n A[开始] --> B{使用标准API?}\n B -->|是| C[使用内置Provider]\n B -->|否| D{私有API?}\n D -->|是| E[自定义Provider]\n D -->|否| F[特殊格式?]\n F -->|是| E\n F -->|否| C\n\n C --> G[OpenAI/DeepSeek Provider]\n E --> H[四步创建自定义Provider]\n```\n\n### 🏭 内置Provider速览\n\n#### 开箱即用的Provider\n\n| Provider类型 | 适用场景 | 使用方式 |\n| --------------------- | ---------------- | ------------ |\n| **OpenAI Provider** | 标准OpenAI API | 直接导入使用 |\n| **DeepSeek Provider** | 标准DeepSeek API | 直接导入使用 |\n\n#### 快速判断指南\n\n| 场景 | 推荐方案 | 示例 |\n| ---------------- | --------------------- | ------------------------ |\n| 调用官方OpenAI | 内置OpenAI Provider | `new OpenAIProvider()` |\n| 调用官方DeepSeek | 内置DeepSeek Provider | `new DeepSeekProvider()` |\n| 公司内部API | 自定义Provider | 见四步实现 |\n| 第三方非标API | 自定义Provider | 见四步实现 |\n\n# 📋 四步实现自定义 Provider\n\n## 🎯 实现路径总览\n\n```mermaid\njourney\n title 自定义Provider实现路径\n section 分析阶段\n 接口分析: 2: 用户\n section 开发阶段\n 创建类: 5: 用户\n 检查验证: 1: 用户\n section 集成阶段\n 配置使用: 1: 用户\n```\n\n## 步骤1：分析接口格式 ⏱️ 2分钟\n\n### 📋 接口信息收集表\n\n| 信息类型 | 示例值 | 你的接口 |\n| ------------ | --------------------------- | --------------- |\n| **接口URL** | `https://your-api.com/chat` | `_____________` |\n| **请求方法** | POST | `_____________` |\n| **请求格式** | JSON | `_____________` |\n| **响应格式** | Server-Sent Events | `_____________` |\n| **认证方式** | Bearer Token | `_____________` |\n\n### 🔍 接口格式模板\n\n#### ✅ 请求格式示例\n\n```ts\n// 你的实际请求格式\ninterface MyAPIRequest {\n query: string; // 用户问题\n context?: string; // 对话历史（可选）\n model?: string; // 模型选择（可选）\n stream?: boolean; // 是否流式（可选）\n}\n```\n\n#### ✅ 响应格式示例\n\n```ts\n// 流式响应格式\n// 实际响应：data: {\"content\": \"回答内容\"}\ninterface MyAPIResponse {\n content: string; // 回答片段\n finish_reason?: string; // 结束标记\n}\n\n// 结束标记：data: [DONE]\n```\n\n## 步骤2：创建 Provider 类 ⏱️ 5分钟\n\n### 🏗️ 代码模板（复制即用）\n\n```ts\n// MyChatProvider.ts\nimport { AbstractChatProvider } from '@ant-design/x-sdk';\n\n// ====== 第1处修改：定义你的接口类型 ======\ninterface MyInput {\n query: string;\n context?: string;\n model?: string;\n stream?: boolean;\n}\n\ninterface MyOutput {\n content: string;\n finish_reason?: string;\n}\n\ninterface MyMessage {\n content: string;\n role: 'user' | 'assistant';\n timestamp: number;\n}\n\n// ====== 第2处修改：修改类名 ======\nexport class MyChatProvider extends AbstractChatProvider {\n // 参数转换：将useXChat参数转为你的API参数\n transformParams(\n requestParams: Partial,\n options: XRequestOptions,\n ): MyInput {\n if (typeof requestParams !== 'object') {\n throw new Error('requestParams must be an object');\n }\n\n return {\n query: requestParams.query || '',\n context: requestParams.context,\n model: 'gpt-3.5-turbo', // 根据你的API调整\n stream: true,\n ...(options?.params || {}),\n };\n }\n\n // 本地消息：用户发送的消息格式\n transformLocalMessage(requestParams: Partial): MyMessage {\n return {\n content: requestParams.query || '',\n role: 'user',\n timestamp: Date.now(),\n };\n }\n\n // ====== 第3处修改：响应数据转换 ======\n transformMessage(info: { originMessage: MyMessage; chunk: MyOutput }): MyMessage {\n const { originMessage, chunk } = info;\n\n // 处理结束标记\n if (!chunk?.content || chunk.content === '[DONE]') {\n return { ...originMessage, status: 'success' as const };\n }\n\n // 累加响应内容\n return {\n ...originMessage,\n content: `${originMessage.content || ''}${chunk.content || ''}`,\n role: 'assistant' as const,\n status: 'loading' as const,\n };\n }\n}\n```\n\n### 🚨 开发注意事项\n\n- ✅ **只改3个地方**：接口类型、类名、响应转换逻辑\n- ✅ **禁止实现request方法**：网络请求由XRequest处理\n- ✅ **保持类型安全**：使用TypeScript严格模式\n\n## 步骤3：检查验证 ⏱️ 1分钟\n\n### ✅ 快速检查清单\n\n| 检查项 | 状态 | 说明 |\n| ----------------- | ---- | --------------------------- |\n| **类名正确** | ⏳ | `MyChatProvider` → 你的类名 |\n| **类型匹配** | ⏳ | 接口类型与实际API一致 |\n| **方法完整** | ⏳ | 3个方法都已实现 |\n| **无request方法** | ⏳ | 确认没有实现request方法 |\n| **类型检查通过** | ⏳ | `tsc --noEmit` 无错误 |\n\n### 🔍 验证代码\n\n```bash\n# 运行类型检查\nnpx tsc --noEmit MyChatProvider.ts\n\n# 预期结果：无错误输出\n```\n\n## 步骤4：配置使用 ⏱️ 1分钟\n\n### 🔧 完整集成示例\n\n```ts\n// 1. 引入依赖\nimport { MyChatProvider } from './MyChatProvider';\nimport { XRequest } from '@ant-design/x-sdk';\n\n// 2. 配置XRequest（由x-request技能负责）\nconst request = XRequest('https://your-api.com/chat', {\n // 认证配置\n headers: {\n Authorization: 'Bearer your-token-here',\n 'Content-Type': 'application/json',\n },\n\n // 默认参数\n params: {\n model: 'gpt-3.5-turbo',\n max_tokens: 1000,\n temperature: 0.7,\n },\n\n // 流式配置\n manual: true,\n});\n\n// 3. 创建Provider实例\nconst provider = new MyChatProvider({\n request, // 必须传入XRequest实例\n});\n\n// 4. 现在可以配合useXChat使用\n// 这部分由use-x-chat技能负责\nexport { provider };\n```\n\n### 🎉 使用优势\n\n- **零网络代码**：XRequest处理所有网络细节\n- **类型安全**：完整的TypeScript支持\n- **易于测试**：可mock XRequest进行单元测试\n- **统一配置**：认证、参数、错误处理集中管理\n\n# 🔧 常见场景适配\n\n## 📚 场景适配指南\n\n| 场景类型 | 难度 | 示例链接 | 说明 |\n| --- | --- | --- | --- |\n| **标准OpenAI** | 🟢 简单 | [内置Provider示例](reference/EXAMPLES.md#场景1：OpenAI 格式) | 直接使用内置Provider |\n| **标准DeepSeek** | 🟢 简单 | [内置Provider示例](reference/EXAMPLES.md#场景2 DeepSeek 格式) | 直接使用内置Provider |\n| **私有API** | 🟡 中等 | [自定义Provider的一些细节场景](reference/EXAMPLES.md#场景3：自定义 provider) | 需要四步实现 |\n\n> 📖 **完整示例**：[EXAMPLES.md](reference/EXAMPLES.md) 包含所有实际场景的完整代码\n\n# 📋 联合技能使用指南\n\n## 🎯 技能关系图谱\n\n```mermaid\ngraph TD\n User[开发者] --> A{选择方案}\n\n A -->|标准API| B[内置Provider]\n A -->|私有API| C[自定义Provider]\n\n B --> D[use-x-chat]\n C --> E[x-chat-provider]\n E --> D\n\n D --> F[x-request]\n F --> G[最终应用]\n```\n\n## 📊 技能对照表\n\n| 技能角色 | 技能名称 | 前置条件 | 核心职责 | 使用场景 |\n| ------------- | ------------------- | ------------ | ------------------ | ---------------- |\n| **🏗️ 创建者** | **x-chat-provider** | 无 | 创建自定义Provider | 适配私有/非标API |\n| **⚛️ 使用者** | **use-x-chat** | 需要Provider | 构建AI对话界面 | React组件开发 |\n| **🔧 配置者** | **x-request** | 无 | 配置请求参数认证 | 统一网络请求管理 |\n\n## 🎯 组合使用场景详解\n\n### 🚀 场景1：完整AI对话应用\n\n**适用**：从零构建完整的AI对话产品\n\n```mermaid\nsequenceDiagram\n participant Dev as 开发者\n participant CP as x-chat-provider\n participant UX as use-x-chat\n participant XR as x-request\n\n Dev->>CP: 1. 创建自定义Provider\n CP->>Dev: 返回适配后的Provider\n Dev->>XR: 2. 配置XRequest参数\n XR->>Dev: 返回配置好的request\n Dev->>UX: 3. 使用Provider构建界面\n UX->>Dev: 完整的AI对话应用\n```\n\n**实施步骤**：\n\n1. **x-chat-provider** → 创建自定义Provider（4步实现）\n2. **x-request** → 配置认证、参数、错误处理\n3. **use-x-chat** → 构建React聊天界面\n\n### 🎯 场景2：仅创建Provider\n\n**适用**：为其他框架或团队提供Provider\n\n```mermaid\ngraph LR\n A[私有API] -->|适配| B[自定义Provider]\n B -->|导出| C[其他框架使用]\n B -->|发布| D[NPM包]\n```\n\n**核心价值**：\n\n- 🔧 **解耦**：Provider与UI框架分离\n- 📦 **复用**：可被多个项目使用\n- 🚀 **效率**：一次开发，多处使用\n\n### ⚡ 场景3：使用内置Provider\n\n**适用**：快速原型开发或标准API调用\n\n```mermaid\ngraph LR\n A[标准API] -->|内置| B[OpenAI/DeepSeek Provider]\n B -->|直接使用| C[use-x-chat]\n C -->|配置| D[x-request]\n D --> E[快速上线]\n```\n\n**优势**：\n\n- ⚡ **零开发**：无需自定义Provider\n- 🎯 **零配置**：内置最佳实践\n- 🚀 **极速上线**：5分钟即可完成\n\n## ⚠️ 重要提醒\n\n### 🚨 强制规则：禁止自己写 request 方法！\n\n**强制要求**：\n\n- 🚫 **绝对禁止**在 Provider 中实现 `request` 方法\n- ✅ **必须使用** XRequest 来处理所有网络请求\n- ✅ **只关注**数据转换逻辑（transformParams、transformLocalMessage、transformMessage）\n\n**❌ 严重错误（绝对禁止）**：\n\n```ts\n// ❌ 严重错误：自己实现 request 方法\nclass MyProvider extends AbstractChatProvider {\n async request(params: any) {\n // 禁止自己写网络请求逻辑！\n const response = await fetch(this.url, { ... });\n return response;\n }\n}\n```\n\n**✅ 强制要求（唯一正确方式）**：\n\n```ts\n// ✅ 强制要求：使用 XRequest，禁止实现 request 方法\nclass MyProvider extends AbstractChatProvider {\n // 禁止实现 request 方法！\n transformParams(params) {\n /* ... */\n }\n transformLocalMessage(params) {\n /* ... */\n }\n transformMessage(info) {\n /* ... */\n }\n}\n\n// 强制使用 XRequest：\nconst provider = new MyProvider({\n request: XRequest('https://your-api.com/chat'),\n});\n```\n\n# ⚡ 快速检查清单\n\n创建 Provider 前，确认：\n\n- [ ] 已获取接口文档\n- [ ] 已确认请求/响应格式\n- [ ] 已定义好消息结构\n- [ ] 已测试接口可用性\n- [ ] **已决定使用 XRequest**（避免自己写 request 方法！）\n\n完成后：\n\n- [ ] Provider 类可以正常实例化\n- [ ] **只实现了三个必需方法**（transformParams、transformLocalMessage、transformMessage）\n- [ ] **绝对禁止实现 request 方法**（强制使用 XRequest 处理网络请求）\n- [ ] 已处理边界情况（空数据、错误响应）\n- [ ] **类型检查通过**（确保所有 TypeScript 类型正确）\n- [ ] **删除无用导出**（清理未使用的导出项）\n\n# 🚨 开发规则\n\n## 测试用例规则\n\n- **如果用户没有明确需要测试用例，则不要添加测试文件**\n- **仅在用户明确要求时才创建测试用例**\n\n## 代码质量规则\n\n- **完成编写后必须检查类型**：运行 `tsc --noEmit` 确保无类型错误\n- **保持代码整洁**：移除所有未使用的变量和导入\n\n# 🔗 参考资源\n\n## 📚 核心参考文档\n\n- [EXAMPLES.md](reference/EXAMPLES.md) - 实战示例代码\n\n## 🌐 SDK官方文档\n\n- [useXChat 官方文档](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/use-x-chat.zh-CN.md)\n- [XRequest 官方文档](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/x-request.zh-CN.md)\n- [Chat Provider 官方文档](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/chat-provider.zh-CN.md)\n\n## 💻 示例代码\n\n- [custom-provider-width-ui.tsx](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/demos/chat-providers/custom-provider-width-ui.tsx) - 自定义 Provider 完整示例\n" }, { "path": "packages/x-skill/skills-zh/x-chat-provider/reference/EXAMPLES.md", "content": "## 场景1：OpenAI 格式\n\nOpenAI 格式使用内置 Provider，使用 OpenAIProvider：\n\n```ts\nimport { OpenAIProvider } from '@ant-design/x-sdk';\n\nconst provider = new OpenAIProvider({\n request: XRequest('https://api.openai.com/v1/chat/completions'),\n});\n```\n\n## 场景2 DeepSeek 格式\n\nDeepSeek 格式使用内置 Provider，使用 DeepSeekProvider：\n\n```ts\nimport { DeepSeekProvider } from '@ant-design/x-sdk';\n\nconst provider = new DeepSeekProvider({\n request: XRequest('https://api.deepseek.com/v1/chat/completions'),\n});\n```\n\n## 场景3：自定义 provider\n\n### 1. 自定义错误格式\n\n```ts\ntransformMessage(info) {\n const { originMessage, chunk } = info || {};\n const data = JSON.parse(chunk.data);\n try {\n if (data.error) {\n return {\n ...originMessage,\n content: data.error.message,\n status: 'error',\n };\n }\n // 其他正常处理逻辑\n } catch (error) {\n return {\n ...originMessage,\n status: 'error',\n };\n }\n}\n```\n\n### 2. 多字段响应\n\n```ts\ninterface MyOutput {\n content: string;\n metadata?: {\n confidence: number;\n source: string;\n };\n}\n\ntransformMessage(info) {\n const { originMessage, chunk } = info || {};\n\n return {\n ...originMessage,\n content: chunk.content,\n metadata: chunk.metadata, // 可以扩展 MyMessage 类型\n };\n}\n```\n" }, { "path": "packages/x-skill/skills-zh/x-markdown/SKILL.md", "content": "---\nname: x-markdown\nversion: 2.4.0\ndescription: 当任务涉及 @ant-design/x-markdown 的 Markdown 渲染、流式输出、自定义组件映射、插件、主题或聊天富内容展示时使用。\n---\n\n# 🎯 技能定位\n\n**本技能专注解决一个问题**：如何用 `@ant-design/x-markdown` 正确、稳定地渲染 Markdown 内容。\n\n覆盖范围包括：\n\n- 基础渲染与包职责边界\n- LLM 流式输出与不完整语法处理\n- 自定义组件映射与聊天富内容渲染\n- 插件、主题与安全默认配置\n\n## 目录导航\n\n- [📦 包职责边界](#-包职责边界)\n- [🚀 快速决策指南](#-快速决策指南)\n- [🛠 推荐工作流](#-推荐工作流)\n- [🚨 开发规则](#-开发规则)\n- [🤝 技能协作](#-技能协作)\n- [🔗 参考资源](#-参考资源)\n\n# 📦 包职责边界\n\n| 层级 | 包名 | 职责 |\n| ---------- | ------------------------ | ----------------------------------------------- |\n| **UI层** | `@ant-design/x` | 聊天 UI、Bubble、Sender、交互组件 |\n| **数据层** | `@ant-design/x-sdk` | Provider、请求、流式数据流、状态管理 |\n| **渲染层** | `@ant-design/x-markdown` | Markdown 解析、流式渲染、插件、主题、自定义渲染 |\n\n> ⚠️ `x-markdown` 不是聊天状态管理工具。它负责把已有消息内容渲染出来，不负责请求和消息流本身。\n\n# 🚀 快速决策指南\n\n| 当你需要... | 优先阅读 | 典型结果 |\n| --- | --- | --- |\n| 用最小配置渲染 Markdown | [CORE.md](reference/CORE.md) | 用 `XMarkdown` 渲染基础内容 |\n| 渲染 LLM 流式输出 | [STREAMING.md](reference/STREAMING.md) | 正确处理 `hasNextChunk`、占位符、尾部指示器 |\n| 把标签映射到业务组件 | [EXTENSIONS.md](reference/EXTENSIONS.md) | 为自定义标签、代码块、富内容组件建立稳定映射 |\n| 增加插件或主题定制 | [EXTENSIONS.md](reference/EXTENSIONS.md) | 完成插件导入、主题类名接入、最小 CSS 覆盖 |\n| 查看属性细节和默认值 | [API.md](reference/API.md) | 获取 `XMarkdown` 与 streaming 的完整属性表 |\n\n# 🛠 推荐工作流\n\n1. 先看 [CORE.md](reference/CORE.md)，先让基础渲染跑通。\n2. 只有在内容是分块到达时，才继续看 [STREAMING.md](reference/STREAMING.md)。\n3. 只有在需要自定义标签、插件、主题时，才继续看 [EXTENSIONS.md](reference/EXTENSIONS.md)。\n4. 属性名与默认值以 [API.md](reference/API.md) 为准，不要凭记忆猜。\n\n## 最小使用示例\n\n```tsx\nimport { XMarkdown } from '@ant-design/x-markdown';\n\nexport default () => ;\n```\n\n# 🚨 开发规则\n\n- `components` 映射尽量保持稳定，不要在每次渲染时创建新的内联组件对象。\n- 最后一块内容必须设置 `streaming.hasNextChunk = false`，否则不完整占位内容不会被刷新成最终结果。\n- 谨慎处理原始 HTML。如果只想保留文本展示，优先使用 `escapeRawHtml`。\n- 如果必须渲染 HTML，请显式审查 `dompurifyConfig`，不要依赖模糊默认行为。\n- 主题覆盖尽量最小化。先继承 `x-markdown-light` 或 `x-markdown-dark`，只改必要变量。\n- 如果自定义组件依赖完整语法，再在 `streamStatus === 'done'` 时执行昂贵逻辑。\n\n# 🤝 技能协作\n\n| 场景 | 推荐技能组合 | 原因 |\n| --- | --- | --- |\n| 聊天中的富文本回答 | `x-chat-provider` → `x-request` → `use-x-chat` → `x-markdown` | 前三者负责数据流，`x-markdown` 负责最终内容渲染 |\n| 内置 Provider + Markdown 回复 | `x-request` → `use-x-chat` → `x-markdown` | 请求配置与渲染职责分离 |\n| 独立的 Markdown 页面或文档视图 | `x-markdown` | 不需要聊天状态管理 |\n\n## 边界规则\n\n- 适配接口格式，用 **`x-chat-provider`**\n- 配置传输、认证、重试、流分隔，用 **`x-request`**\n- 管理 React 聊天状态，用 **`use-x-chat`**\n- 处理 Markdown 解析、流式恢复和富组件渲染，用 **`x-markdown`**\n\n# 🔗 参考资源\n\n- [CORE.md](reference/CORE.md) - 包职责、安装与起步、安全默认值、常见渲染模式\n- [STREAMING.md](reference/STREAMING.md) - 分块渲染、不完整语法恢复、loading/done 行为\n- [EXTENSIONS.md](reference/EXTENSIONS.md) - 组件映射、插件、主题、自定义标签建议\n- [API.md](reference/API.md) - 从官方 `x-markdown` 文档生成的 API 参考\n\n## 官方文档\n\n- [XMarkdown 介绍](https://github.com/ant-design/x/blob/main/packages/x/docs/x-markdown/introduce.zh-CN.md)\n- [XMarkdown 示例](https://github.com/ant-design/x/blob/main/packages/x/docs/x-markdown/examples.zh-CN.md)\n- [XMarkdown 流式渲染](https://github.com/ant-design/x/blob/main/packages/x/docs/x-markdown/streaming.zh-CN.md)\n- [XMarkdown Components](https://github.com/ant-design/x/blob/main/packages/x/docs/x-markdown/components.zh-CN.md)\n- [XMarkdown 插件](https://github.com/ant-design/x/blob/main/packages/x/docs/x-markdown/plugins.zh-CN.md)\n- [XMarkdown 主题](https://github.com/ant-design/x/blob/main/packages/x/docs/x-markdown/themes.zh-CN.md)\n" }, { "path": "packages/x-skill/skills-zh/x-markdown/reference/API.md", "content": "| 属性 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| content | 需要渲染的 Markdown 内容 | `string` | - |\n| children | Markdown 内容（与 `content` 二选一） | `string` | - |\n| components | 将 HTML 节点映射为自定义 React 组件 | `Record \\| keyof JSX.IntrinsicElements>` | - |\n| streaming | 流式渲染行为配置 | `StreamingOption` | - |\n| config | Marked 解析配置，后应用且可能覆盖内置 renderer | [`MarkedExtension`](https://marked.js.org/using_advanced#options) | `{ gfm: true }` |\n| rootClassName | 根元素的额外 CSS 类名 | `string` | - |\n| className | 根容器的额外 CSS 类名 | `string` | - |\n| paragraphTag | 段落使用的 HTML 标签（避免自定义组件含块级元素时的校验问题） | `keyof JSX.IntrinsicElements` | `'p'` |\n| style | 根容器的内联样式 | `CSSProperties` | - |\n| prefixCls | 组件节点 CSS 类名前缀 | `string` | - |\n| openLinksInNewTab | 是否为所有链接添加 `target=\"_blank\"` 并在新标签页打开 | `boolean` | `false` |\n| dompurifyConfig | HTML 净化与 XSS 防护的 DOMPurify 配置 | [`DOMPurify.Config`](https://github.com/cure53/DOMPurify#can-i-configure-dompurify) | - |\n| protectCustomTagNewlines | 是否保留自定义标签内部的换行 | `boolean` | `false` |\n| escapeRawHtml | 是否将 Markdown 中的原始 HTML 转义为纯文本展示（不解析为真实 HTML），用于防 XSS 同时保留内容 | `boolean` | `false` |\n| debug | 是否开启调试模式（显示性能监控浮层） | `boolean` | `false` |\n\n### StreamingOption\n\n| 字段 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| hasNextChunk | 是否还有后续内容块。为 `false` 时会刷新缓存并完成渲染 | `boolean` | `false` |\n| enableAnimation | 是否为块级元素启用文字淡入动画 | `boolean` | `false` |\n| animationConfig | 动画配置（如淡入时长、缓动函数） | `AnimationConfig` | - |\n| tail | 是否启用尾部指示器 | `boolean \\| TailConfig` | `false` |\n| incompleteMarkdownComponentMap | 将未闭合 Markdown 片段映射到自定义 loading 组件 | `Partial>` | `{ link: 'incomplete-link', image: 'incomplete-image' }` |\n\n### TailConfig\n\n| 属性 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| content | 尾部显示的内容 | `string` | `'▋'` |\n| component | 自定义尾部组件，优先级高于 content | `React.ComponentType<{ content?: string }>` | - |\n\n### AnimationConfig\n\n| 属性 | 说明 | 类型 | 默认值 |\n| ------------ | ---------------- | -------- | --------------- |\n| fadeDuration | 动画时长（毫秒） | `number` | `200` |\n| easing | 缓动函数 | `string` | `'ease-in-out'` |\n" }, { "path": "packages/x-skill/skills-zh/x-markdown/reference/CORE.md", "content": "# 核心指南\n\n## 包职责边界\n\n| 需求 | 对应包 |\n| ----------------------------- | ------------------------ |\n| 把消息内容渲染成 Markdown | `@ant-design/x-markdown` |\n| 构建聊天 UI 容器 | `@ant-design/x` |\n| 管理 Provider、请求与消息状态 | `@ant-design/x-sdk` |\n\n## 安装与最小渲染\n\n```bash\nnpm install @ant-design/x-markdown\n```\n\n```tsx\nimport { XMarkdown } from '@ant-design/x-markdown';\n\nconst content = `\n# Hello\n\n- item 1\n- item 2\n`;\n\nexport default () => ;\n```\n\n## 安全默认值\n\n- `content` 和 `children` 二选一即可，不要同时传。\n- 先让纯 Markdown 渲染正确，再加插件或自定义组件。\n- 当模型输出可能包含外链时，优先开启 `openLinksInNewTab`。\n- 如果原始 HTML 只需要保留文本展示，优先使用 `escapeRawHtml`。\n- 如果必须渲染真实 HTML，请显式检查 `dompurifyConfig`。\n\n## 常见集成模式\n\n### 基础内容块\n\n```tsx\n\n```\n\n### 聊天消息渲染\n\n在 `useXChat` 产出消息列表之后，再用 `XMarkdown` 负责内容展示。\n\n```tsx\n\n```\n\n### 最小检查清单\n\n- 先确认内容本身真的是 Markdown，而不是结构化组件协议。\n- 不要把渲染逻辑塞进 Provider。\n- 不要把请求逻辑塞进 `XMarkdown`。\n- 主题和自定义组件放在基础渲染稳定之后再加。\n\n## 何时继续阅读其他参考\n\n- 内容是流式分块到达时，阅读 [STREAMING.md](STREAMING.md)\n- 需要自定义标签、代码块、插件、主题时，阅读 [EXTENSIONS.md](EXTENSIONS.md)\n- 需要完整属性表时，阅读 `API.md`\n" }, { "path": "packages/x-skill/skills-zh/x-markdown/reference/EXTENSIONS.md", "content": "# 扩展指南\n\n## Components\n\n`components` 是主要扩展入口，可把 Markdown 或自定义 HTML 标签映射到 React 组件。\n\n```tsx\nimport { Mermaid, Sources, Think } from '@ant-design/x';\nimport { XMarkdown } from '@ant-design/x-markdown';\n\n;\n```\n\n### 组件映射规则\n\n- 映射对象尽量保持稳定，避免每次渲染创建新对象。\n- 用 `streamStatus` 区分临时 loading UI 和最终渲染结果。\n- 如果自定义组件内部包含块级元素，必要时用 `paragraphTag` 避免非法嵌套。\n- 自定义标签应语义明确，避免混乱的 Markdown/HTML 混写。\n\n## 插件\n\n内置插件从 `@ant-design/x-markdown/plugins/...` 导入，并通过 `config` 接入。\n\n```tsx\nimport Latex from '@ant-design/x-markdown/plugins/Latex';\n\n;\n```\n\n当需求属于“新增解析语法”时用插件；仅仅是替换已渲染节点的视觉表现时，用 `components` 更合适。\n\n## 主题\n\n先从内置主题样式开始。\n\n```tsx\nimport '@ant-design/x-markdown/themes/light.css';\n\n;\n```\n\n如果要定制：\n\n1. 保留内置主题类名\n2. 额外加一个自定义类名\n3. 只覆盖真正需要的 CSS 变量\n\n## 自定义标签建议\n\n- 保持自定义标签结构完整\n- 除非语法有意为之，否则避免在自定义 HTML 块内部插入多余空行\n- 如果自定义标签内换行需要保留，检查 `protectCustomTagNewlines`\n\n## 如何选工具\n\n- 用 `components` 替换渲染后的节点\n- 用插件扩展 Markdown 解析能力\n- 用主题控制排版、间距和颜色\n- 用 `dompurifyConfig` 与 `escapeRawHtml` 处理安全，不要拿它们做视觉定制\n" }, { "path": "packages/x-skill/skills-zh/x-markdown/reference/STREAMING.md", "content": "# 流式渲染指南\n\n## 适用场景\n\n当 Markdown 内容以分块方式持续追加，并且中途可能出现不完整语法时，使用 streaming 模式。\n\n典型场景包括：\n\n- 半截链接，如 `[docs](https://example`\n- 半截表格\n- 尚未闭合的代码块\n- 回答仍在生成时的尾部光标\n\n## 核心规则\n\n`hasNextChunk` 必须真实反映流状态：\n\n- 还有后续 chunk 时为 `true`\n- 最后一块必须为 `false`，这样缓存的不完整片段才会被刷新为最终内容\n\n## 最小配置\n\n```tsx\n\n```\n\n## 不完整语法处理\n\n如果不完整片段需要展示自定义 loading UI，而不是直接显示破损 Markdown，可使用 `incompleteMarkdownComponentMap`。\n\n```tsx\n\n```\n\n## Loading 与 Done\n\n自定义组件会收到 `streamStatus`：\n\n- `loading`：语法可能还未完整\n- `done`：最终内容已经稳定\n\n如果组件内部需要做昂贵解析或请求，优先等到 `streamStatus === 'done'`。\n\n## 聊天场景建议\n\n- 只有在回答仍在生成时才显示 tail 指示器。\n- 占位组件尽量轻量。\n- 如果组件依赖闭合代码块或完整结构块，等到 `done` 再解析。\n- 不要让 `hasNextChunk` 长期停留在 `true`，否则最终内容无法收敛。\n\n## 排查清单\n\n- 最终结果仍然残缺：确认最后一次渲染把 `hasNextChunk` 设为 `false`\n- 占位组件不消失：确认映射的标签名已在 `components` 中注册\n- 性能不稳定：先关闭动画和占位组件，再逐个加回\n" }, { "path": "packages/x-skill/skills-zh/x-request/SKILL.md", "content": "---\nname: x-request\nversion: 2.4.0\ndescription: 专注讲解 XRequest 的实际配置和使用，基于官方文档提供准确的配置说明\n---\n\n# 🎯 技能定位\n\n**本技能专注解决**：如何正确配置 XRequest 来适配各种流式接口需求。\n\n# 目录导航\n\n- [🚀 快速开始](#-快速开始) - 3分钟上手\n - [依赖管理](#依赖管理)\n - [基础配置](#基础配置)\n- [📦 技术栈概览](#-技术栈概览)\n- [🔧 核心配置详解](#-核心配置详解)\n - [全局配置](#1-全局配置)\n - [安全配置](#2-安全配置)\n - [流式配置](#3-流式配置)\n- [🛡️ 安全指南](#️-安全指南)\n - [环境安全配置](#环境安全配置)\n - [认证方式对比](#认证方式对比)\n- [🔍 调试与测试](#-调试与测试)\n - [调试配置](#调试配置)\n - [配置验证](#配置验证)\n- [📋 使用场景](#-使用场景)\n - [独立使用](#独立使用)\n - [配合其他技能](#配合其他技能)\n- [🚨 开发规则](#-开发规则)\n- [🔗 参考资源](#-参考资源)\n - [📚 核心参考文档](#-核心参考文档)\n - [🌐 SDK官方文档](#-SDK官方文档)\n - [💻 示例代码](#-示例代码)\n\n# 🚀 快速开始\n\n## 依赖管理\n\n### 📋 系统要求\n\n| 依赖包 | 版本要求 | 自动安装 | 作用 |\n| --------------------- | -------- | -------- | ------------------------- |\n| **@ant-design/x-sdk** | ≥2.2.2 | ✅ | 核心SDK，包含XRequest工具 |\n\n### 🛠️ 一键安装\n\n```bash\n# 推荐使用 tnpm\ntnpm install @ant-design/x-sdk\n\n# 或使用 npm\nnpm add @ant-design/x-sdk\n\n# 检查版本\nnpm ls @ant-design/x-sdk\n```\n\n## 基础配置\n\n### 最简单的使用方式\n\n```typescript\nimport { XRequest } from '@ant-design/x-sdk';\n\n// 最简配置：仅需提供API地址\nconst request = XRequest('https://api.example.com/chat');\n\n// 如需手动控制（用于Provider场景）\nconst providerRequest = XRequest('https://api.example.com/chat', {\n manual: true, // 仅此项通常需要显式配置\n});\n```\n\n> 💡 **提示**：XRequest 已内置合理的默认配置，大多数情况下只需提供API地址即可使用。\n\n# 📦 技术栈概览\n\n## 🏗️ 技术栈架构\n\n```mermaid\ngraph TD\n A[XRequest] --> B[网络请求]\n A --> C[认证管理]\n A --> D[错误处理]\n A --> E[流式处理]\n B --> F[fetch封装]\n C --> G[Token管理]\n D --> H[重试机制]\n E --> I[Server-Sent Events]\n```\n\n## 🔑 核心概念\n\n| 概念 | 角色定位 | 核心职责 | 使用场景 |\n| ------------ | ----------- | -------------------------------- | ------------ |\n| **XRequest** | 🌐 请求工具 | 处理所有网络通信、认证、错误处理 | 统一请求管理 |\n| **全局配置** | ⚙️ 配置中心 | 一次配置，多处使用 | 减少重复代码 |\n| **流式配置** | 🔄 流式处理 | 支持SSE和JSON响应格式 | AI对话场景 |\n\n# 🔧 核心配置详解\n\n核心功能参考内容 [CORE.md](reference/CORE.md)\n\n# 🛡️ 安全指南\n\n## 环境安全配置\n\n### 🌍 不同环境的安全策略\n\n| 运行环境 | 安全等级 | 配置方式 | 风险说明 |\n| --------------- | -------- | --------------- | -------------------- |\n| **浏览器前端** | 🔴 高危 | ❌ 禁止配置密钥 | 密钥会直接暴露给用户 |\n| **Node.js后端** | 🟢 安全 | ✅ 环境变量配置 | 密钥存储在服务器端 |\n| **代理服务** | 🟢 安全 | ✅ 同域代理转发 | 密钥由代理服务管理 |\n\n### 🔐 认证方式对比\n\n| 认证方式 | 适用环境 | 配置示例 | 安全性 |\n| ------------------ | -------- | ------------------------------- | ------- |\n| **Bearer Token** | Node.js | `Bearer ${process.env.API_KEY}` | ✅ 安全 |\n| **API Key Header** | Node.js | `X-API-Key: ${process.env.KEY}` | ✅ 安全 |\n| **代理转发** | 浏览器 | `/api/proxy/service` | ✅ 安全 |\n| **直接配置** | 浏览器 | `Bearer sk-xxx` | ❌ 危险 |\n\n# 🔍 调试与测试\n\n## 调试配置\n\n### 🛠️ 调试模板\n\n**Node.js调试配置**:\n\n```typescript\n// 安全的调试配置（Node.js 环境）\nconst debugRequest = XRequest('https://your-api.com/chat', {\n headers: {\n Authorization: `Bearer ${process.env.DEBUG_API_KEY}`,\n },\n params: { query: '测试消息' },\n});\n```\n\n**前端调试配置**:\n\n```typescript\n// 安全的调试配置（前端环境）\nconst debugRequest = XRequest('/api/debug/chat', {\n params: { query: '测试消息' },\n});\n```\n\n## 配置验证\n\n### ✅ 安全检查工具\n\n```typescript\n// 安全配置验证函数\nconst validateSecurity = (config: any) => {\n const isBrowser = typeof window !== 'undefined';\n const hasAuth = config.headers?.Authorization || config.headers?.authorization;\n\n if (isBrowser && hasAuth) {\n throw new Error('❌ 前端环境禁止配置 Authorization，存在密钥泄漏风险！');\n }\n\n console.log('✅ 安全配置检查通过');\n return true;\n};\n\n// 使用示例\nvalidateSecurity({\n headers: {\n // 不要包含 Authorization\n },\n});\n```\n\n# 📋 使用场景\n\n## 独立使用\n\n### 🎯 直接发起请求\n\n```typescript\nimport { XRequest } from '@ant-design/x-sdk';\n\n// 测试接口可用性\nconst testRequest = XRequest('https://httpbin.org/post', {\n params: { test: 'data' },\n});\n\n// 立即发送请求\nconst response = await testRequest();\nconsole.log(response);\n```\n\n## 配合其他技能\n\n### 🔄 技能协作流程\n\n```mermaid\ngraph TD\n A[x-request] -->|配置请求| B[x-chat-provider]\n A -->|配置请求| C[use-x-chat]\n B -->|提供Provider| C\n A --> D[直接请求]\n```\n\n| 使用方式 | 配合技能 | 作用 | 示例 |\n| --- | --- | --- | --- |\n| **独立使用** | 无 | 直接发起网络请求 | 测试接口可用性 |\n| **配合 x-chat-provider** | x-chat-provider | 为自定义 Provider 配置请求 | 配置私有 API |\n| **配合 use-x-chat** | use-x-chat | 为内置 Provider 配置请求 | 配置 OpenAI API |\n| **完整 AI 应用** | x-request → x-chat-provider → use-x-chat | 为整个系统配置请求 | 完整 AI 对话应用 |\n\n### ⚠️ useXChat 集成安全警告\n\n**重要警告：useXChat 仅用于前端环境，XRequest 配置中禁止包含 Authorization！**\n\n**❌ 错误配置（危险）**:\n\n```typescript\n// 极度危险：密钥会直接暴露给浏览器\nconst unsafeRequest = XRequest('https://api.openai.com/v1/chat/completions', {\n headers: {\n Authorization: 'Bearer sk-xxxxxxxxxxxxxx', // ❌ 危险！\n },\n manual: true,\n});\n```\n\n**✅ 正确配置（安全）**:\n\n```typescript\n// 前端安全配置：使用代理服务\nconst safeRequest = XRequest('/api/proxy/openai', {\n params: {\n model: 'gpt-3.5-turbo',\n stream: true,\n },\n manual: true,\n});\n```\n\n# 🚨 开发规则\n\n## 测试用例规则\n\n- **如果用户没有明确需要测试用例，则不要添加测试文件**\n- **仅在用户明确要求时才创建测试用例**\n\n## 代码质量规则\n\n- **完成编写后必须检查类型**：运行 `tsc --noEmit` 确保无类型错误\n- **保持代码整洁**：移除所有未使用的变量和导入\n\n## ✅ 配置检查清单\n\n使用 XRequest 前请确认以下配置已正确设置：\n\n### 🔍 配置检查清单\n\n| 检查项 | 状态 | 说明 |\n| -------------- | --------------- | -------------------------------------------------------- |\n| **API 地址** | ✅ 必须配置 | `XRequest('https://api.xxx.com')` |\n| **认证信息** | ⚠️ 环境相关 | 前端❌禁止，Node.js✅可用 |\n| **manual配置** | ✅ Provider场景 | 在Provider中需要设为`true`，其他场景需要根据实际情况设置 |\n| **其他配置** | ❌ 无需配置 | 已内置合理默认值 |\n| **接口可用性** | ✅ 建议测试 | 使用调试配置验证 |\n\n### 🛠️ 快速验证脚本\n\n```typescript\n// 运行前检查配置\nconst checkConfig = () => {\n const checks = [\n {\n name: '全局配置',\n test: () => {\n // 检查是否已设置全局配置\n return true; // 根据实际情况检查\n },\n },\n {\n name: '安全配置',\n test: () => validateSecurity(globalConfig),\n },\n {\n name: '类型检查',\n test: () => {\n // 运行 tsc --noEmit\n return true;\n },\n },\n ];\n\n checks.forEach((check) => {\n console.log(`${check.name}: ${check.test() ? '✅' : '❌'}`);\n });\n};\n```\n\n## 🎯 技能协作\n\n```mermaid\ngraph LR\n A[x-request] -->|配置请求| B[x-chat-provider]\n A -->|配置请求| C[use-x-chat]\n B -->|提供Provider| C\n```\n\n### 📊 技能使用对照表\n\n| 使用场景 | 所需技能 | 使用顺序 | 完成时间 |\n| --- | --- | --- | --- |\n| **测试接口** | x-request | 直接使用 | 2分钟 |\n| **私有API适配** | x-request → x-chat-provider | 先配置请求，再创建Provider | 10分钟 |\n| **标准AI应用** | x-request → use-x-chat | 先配置请求，再构建界面 | 15分钟 |\n| **完整自定义** | x-request → x-chat-provider → use-x-chat | 完整工作流 | 30分钟 |\n\n# 🔗 参考资源\n\n## 📚 核心参考文档\n\n- [API.md](reference/API.md) - 完整的 API 参考文档\n- [EXAMPLES_SERVICE_PROVIDER.md](reference/EXAMPLES_SERVICE_PROVIDER.md) - 各服务商配置示例\n\n## 🌐 SDK官方文档\n\n- [useXChat 官方文档](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/use-x-chat.zh-CN.md)\n- [XRequest 官方文档](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/x-request.zh-CN.md)\n- [Chat Provider 官方文档](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/chat-provider.zh-CN.md)\n\n## 💻 示例代码\n\n- [custom-provider-width-ui.tsx](https://github.com/ant-design/x/blob/main/packages/x/docs/x-sdk/demos/chat-providers/custom-provider-width-ui.tsx) - 自定义 Provider 完整示例\n" }, { "path": "packages/x-skill/skills-zh/x-request/reference/API.md", "content": "### XRequestFunction\n\n```ts | pure\ntype XRequestFunction, Output = Record> = (\n baseURL: string,\n options: XRequestOptions,\n) => XRequestClass;\n```\n\n### XRequestFunction\n\n| 属性 | 描述 | 类型 | 默认值 | 版本 |\n| ------- | ------------ | -------------------------------- | ------ | ---- |\n| baseURL | 请求接口地址 | string | - | - |\n| options | | XRequestOptions\\ | - | - |\n\n### XRequestOptions\n\n| 属性 | 描述 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| callbacks | 请求回调处理集 | XRequestCallbacks\\ | - | - |\n| params | 请求的参数 | Input | - | - |\n| headers | 额外的请求头配置 | Record\\ | - | - |\n| timeout | 请求超时配置 (从发送请求到连接上服务的时间)，单位:ms | number | - | - |\n| streamTimeout | stream 模式的数据超时配置 （每次 chunk 返回的时间间隔），单位:ms | number | - | - |\n| fetch | 自定义fetch对象 | `typeof fetch` | - | - |\n| middlewares | 中间件，支持请求前和请求后处理 | XFetchMiddlewares | - | - |\n| transformStream | stream处理器 | XStreamOptions\\['transformStream'] \\| ((baseURL: string, responseHeaders: Headers) => XStreamOptions\\['transformStream']) | - | - |\n| streamSeparator | 流分隔符，用于分隔不同的数据流，transformStream 有值时不生效 | string | \\\\n\\\\n | 2.2.0 |\n| partSeparator | 部分分隔符，用于分隔数据的不同部分，transformStream 有值时不生效 | string | \\\\n | 2.2.0 |\n| kvSeparator | 键值分隔符，用于分隔键和值，transformStream 有值时不生效 | string | : | 2.2.0 |\n| manual | 是否手动控制发出请求，为`true`时，需要手动调用`run`方法 | boolean | false | - |\n| retryInterval | 请求中断或者失败时，重试的间隔时间，单位ms，不设置将不会自动重试 | number | - | - |\n| retryTimes | 重试的次数限制，超过次数后不在进行重试 | number | - | - |\n\n### XRequestCallbacks\n\n| 属性 | 描述 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| onSuccess | 成功时的回调，当与 Chat Provider 一起使用时会额外获取到组装好的 message | (chunks: Output[], responseHeaders: Headers, message: ChatMessage) => void | - | - |\n| onError | 错误处理的回调，`onError` 可以返回一个数字，表示请求异常时进行自动重试的间隔(单位ms)，`options.retryInterval` 同时存在时，`onError`返回值优先级更高, 当与 Chat Provider 一起使用时会额外获取到组装好的 fail back message | (error: Error, errorInfo: any,responseHeaders?: Headers, message: ChatMessage) => number \\| void | - | - |\n| onUpdate | 消息更新的回调，当与 Chat Provider 一起使用时会额外获取到组装好的 message | (chunk: Output,responseHeaders: Headers, message: ChatMessage) => void | - | - |\n\n### XRequestClass\n\n| 属性 | 描述 | 类型 | 默认值 | 版本 |\n| ------------ | ----------------------------------- | ------------------------ | ------ | ---- |\n| abort | 取消请求 | () => void | - | - |\n| run | 手动执行请求，当`manual=true`时有效 | (params?: Input) => void | - | - |\n| isRequesting | 当前是否在请求中 | boolean | - | - |\n\n### setXRequestGlobalOptions\n\n```ts | pure\ntype setXRequestGlobalOptions = (\n options: XRequestGlobalOptions,\n) => void;\n```\n\n### XRequestGlobalOptions\n\n```ts | pure\ntype XRequestGlobalOptions = Pick<\n XRequestOptions,\n 'headers' | 'timeout' | 'streamTimeout' | 'middlewares' | 'fetch' | 'transformStream' | 'manual'\n>;\n```\n\n### XFetchMiddlewares\n\n```ts | pure\ninterface XFetchMiddlewares {\n onRequest?: (...ags: Parameters) => Promise>;\n onResponse?: (response: Response) => Promise;\n}\n```\n\n## FAQ\n\n### XRequest 中使用 transformStream 的时候会造成第二次输入请求的时候流被锁定的问题，怎么解决？\n\n```ts | pure\nonError TypeError: Failed to execute 'getReader' on 'ReadableStream': ReadableStreamDefaultReader constructor can only accept readable streams that are not yet locked to a reader\n```\n\nWeb Streams API 规定，一个流在同一时间只能被一个 reader 锁定。复用会报错, 所以在使用 TransformStream 的时候，需要注意以下几点：\n\n1. 确保 transformStream 函数返回的是一个新的 ReadableStream 对象，而不是同一个对象。\n2. 确保 transformStream 函数中没有对 response.body 进行多次读取操作。\n\n**推荐写法**\n\n```tsx | pure\nconst [provider] = React.useState(\n new CustomProvider({\n request: XRequest(url, {\n manual: true,\n // 推荐写法：transformStream 用函数返回新实例\n transformStream: () =>\n new TransformStream({\n transform(chunk, controller) {\n // 你的自定义处理逻辑\n controller.enqueue({ data: chunk });\n },\n }),\n // 其他配置...\n }),\n }),\n);\n```\n\n```tsx | pure\nconst request = XRequest(url, {\n manual: true,\n transformStream: new TransformStream({ ... }), // 不要持久化在 Provider/useState\n});\n```\n" }, { "path": "packages/x-skill/skills-zh/x-request/reference/CORE.md", "content": "# 1. 内置默认配置\n\nXRequest 已内置合理的默认配置，**无需额外配置即可使用**。\n\n**内置默认值**:\n\n- `method: 'POST'`\n- `headers: { 'Content-Type': 'application/json' }`\n\n# 2. 安全配置\n\n## 🔐 认证配置对比\n\n| 环境类型 | 配置方式 | 安全性 | 示例 |\n| -------------- | --------------- | ------ | --------------------- |\n| **前端浏览器** | ❌ 禁止直接配置 | 危险 | 密钥会暴露给用户 |\n| **Node.js** | ✅ 环境变量 | 安全 | `process.env.API_KEY` |\n| **代理服务** | ✅ 同域代理 | 安全 | `/api/proxy/chat` |\n\n## 🛡️ 安全配置模板\n\n**Node.js环境安全配置**:\n\n```typescript\nconst nodeConfig = {\n baseURL: 'https://api.openai.com/v1',\n headers: {\n Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,\n },\n};\n```\n\n**前端环境安全配置**:\n\n```typescript\nconst browserConfig = {\n baseURL: '/api/proxy/openai', // 通过同域代理\n};\n```\n\n# 3. 基础使用\n\n```typescript\nimport { XRequest } from '@ant-design/x-sdk';\n\n// ⚠️ 注意：以下示例适用于 Node.js 环境\n// 前端环境请使用代理服务避免 token 泄漏\nconst request = XRequest('https://your-api.com/chat', {\n headers: {\n Authorization: 'Bearer your-token', // ⚠️ 仅 Node.js 环境使用\n },\n params: {\n query: '你好',\n },\n manual: true, // ⚠️ 在provider中使用时必须设置为true\n callbacks: {\n onSuccess: (messages) => {\n setStatus('success');\n console.log('onSuccess', messages);\n },\n onError: (error) => {\n setStatus('error');\n console.error('onError', error);\n },\n onUpdate: (msg) => {\n setLines((pre) => [...pre, msg]);\n console.log('onUpdate', msg);\n },\n },\n});\n```\n\n> ⚠️ **重要提醒**：当 XRequest 用于 x-chat-provider 或 use-x-chat 的 provider 中时，`manual: true` 是必须的配置项，否则会立即发送请求而不是等待调用。\n\n````\n\n### 带 URL 参数\n\n```typescript\nconst request = XRequest('https://your-api.com/chat', {\n method: 'GET',\n params: {\n model: 'gpt-3.5-turbo',\n max_tokens: 1000,\n },\n});\n````\n\n# 4. 流式配置\n\n## 🔄 流式响应配置\n\n```typescript\n// 流式响应配置（AI对话场景）\nconst streamConfig = {\n params: {\n stream: true, // 启用流式响应\n model: 'gpt-3.5-turbo',\n max_tokens: 1000,\n },\n manual: true, // 手动控制请求\n};\n\n// 非流式响应配置（普通API场景）\nconst jsonConfig = {\n params: {\n stream: false, // 禁用流式响应\n },\n};\n```\n\n# 5. 动态请求头\n\n```typescript\n// ❌ 不安全：前端直接暴露 API key\n// const request = XRequest('https://your-api.com/chat', {\n// headers: {\n// 'Authorization': `Bearer ${apiKey}`, // 不要这样做！\n// },\n// params: {\n// messages: [{ role: 'user', content: '你好' }],\n// },\n// });\n\n// ✅ 安全：Node.js 环境使用环境变量\nconst request = XRequest('https://your-api.com/chat', {\n headers: {\n Authorization: `Bearer ${process.env.API_KEY}`, // Node.js 环境安全\n },\n params: {\n messages: [{ role: 'user', content: '你好' }],\n },\n});\n\n// ✅ 安全：前端使用代理服务\nconst request = XRequest('/api/proxy/chat', {\n headers: {\n // 不需要 Authorization，由后端代理处理\n },\n params: {\n messages: [{ role: 'user', content: '你好' }],\n },\n});\n```\n\n# 6.自定义流转换器\n\n当 AI 服务商返回非标准格式时，使用 `transformStream` 自定义数据转换。\n\n#### 基础示例\n\n```typescript\nconst request = XRequest('https://api.example.com/chat', {\n params: { message: '你好' },\n transformStream: () =>\n new TransformStream({\n transform(chunk, controller) {\n // TextDecoder 将二进制数据转换为字符串\n const text = new TextDecoder().decode(chunk);\n const lines = text.split('\\n');\n\n for (const line of lines) {\n if (line.startsWith('data: ')) {\n const data = line.slice(6);\n if (data !== '[DONE]') {\n // TextEncoder 将字符串转回二进制\n controller.enqueue(new TextEncoder().encode(data));\n }\n }\n }\n },\n }),\n});\n```\n\n#### 常用转换模板\n\n```typescript\n// OpenAI 格式\nconst openaiStream = () =>\n new TransformStream({\n transform(chunk, controller) {\n const text = new TextDecoder().decode(chunk);\n const data = JSON.parse(text);\n const content = data.choices?.[0]?.delta?.content || '';\n controller.enqueue(new TextEncoder().encode(content));\n },\n });\n\n// 使用示例\nconst request = XRequest(url, {\n params: { message: '你好' },\n transformStream: openaiStream,\n});\n```\n\n> ⚠️ **注意**：ReadableStream 只能被一个 reader 锁定，避免重复使用同一实例。\n\n#### 🔍 TextDecoder/TextEncoder 说明\n\n**什么时候需要它们？**\n\n| 场景 | 数据类型 | 是否需要转换 |\n| ------------------ | ------------------- | ------------------- |\n| **标准 fetch API** | `Uint8Array` 二进制 | ✅ 需要 TextDecoder |\n| **XRequest 封装** | 可能是字符串 | ❌ 可能不需要 |\n| **自定义流处理** | 取决于实现 | 🤔 需要判断类型 |\n\n**实际使用建议：**\n\n```typescript\ntransformStream: () =>\n new TransformStream({\n transform(chunk, controller) {\n // 安全做法：先判断类型\n const text = typeof chunk === 'string' ? chunk : new TextDecoder().decode(chunk);\n\n // 现在 text 一定是字符串了\n controller.enqueue(text);\n },\n });\n```\n" }, { "path": "packages/x-skill/skills-zh/x-request/reference/EXAMPLES_SERVICE_PROVIDER.md", "content": "### 1️⃣ OpenAI 标准格式\n\n**Node.js 环境（安全）**\n\n```typescript\nconst openAIRequest = XRequest('https://api.example-openai.com/v1/chat/completions', {\n headers: {\n Authorization: `Bearer ${process.env.OPENAI_API_KEY}`, // Node.js 环境变量\n },\n params: {\n model: 'gpt-3.5-turbo',\n messages: [{ role: 'user', content: '你好' }],\n stream: true,\n },\n});\n```\n\n**前端环境（使用代理）**\n\n```typescript\n// ❌ 危险：不要在前端直接配置 token\n// const openAIRequest = XRequest('https://api.example-openai.com/v1/chat/completions', {\n// headers: {\n// 'Authorization': 'Bearer sk-xxxxxxxx', // ❌ 会暴露密钥\n// },\n// });\n\n// ✅ 安全：通过同域代理\nconst openAIRequest = XRequest('/api/proxy/openai', {\n params: {\n model: 'gpt-3.5-turbo',\n messages: [{ role: 'user', content: '你好' }],\n stream: true,\n },\n});\n```\n\n### 2️⃣ 阿里云百炼（通义千问）\n\n```typescript\nconst bailianRequest = XRequest(\n 'https://api.example-aliyun.com/api/v1/services/aigc/text-generation/generation',\n {\n headers: {\n Authorization: 'Bearer API_KEY',\n },\n params: {\n model: 'qwen-turbo',\n input: {\n messages: [{ role: 'user', content: '你好' }],\n },\n parameters: {\n result_format: 'message',\n incremental_output: true,\n },\n },\n },\n);\n```\n\n### 3️⃣ 百度千帆（文心一言）\n\n```typescript\nconst qianfanRequest = XRequest(\n 'https://api.example-baidu.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions',\n {\n params: {\n messages: [{ role: 'user', content: '你好' }],\n stream: true,\n },\n },\n);\n```\n\n### 4️⃣ 智谱 AI（ChatGLM）\n\n```typescript\nconst zhipuRequest = XRequest('https://api.example-zhipu.com/api/paas/v4/chat/completions', {\n headers: {\n Authorization: 'Bearer API_KEY',\n },\n params: {\n model: 'glm-4',\n messages: [{ role: 'user', content: '你好' }],\n stream: true,\n },\n});\n```\n\n### 5️⃣ 讯飞星火\n\n```typescript\nconst sparkRequest = XRequest('https://api.example-spark.com/v1/chat/completions', {\n headers: {\n Authorization: 'Bearer API_KEY',\n },\n params: {\n model: 'generalv3.5',\n messages: [{ role: 'user', content: '你好' }],\n stream: true,\n },\n});\n```\n\n### 6️⃣ 字节豆包\n\n```typescript\nconst doubaoRequest = XRequest('https://api.example-doubao.com/api/v3/chat/completions', {\n headers: {\n Authorization: 'Bearer API_KEY',\n },\n params: {\n model: 'doubao-lite-4k',\n messages: [{ role: 'user', content: '你好' }],\n stream: true,\n },\n});\n```\n\n### 7️⃣ 本地私有 API\n\n```typescript\nconst localRequest = XRequest('http://localhost:3000/api/chat', {\n headers: {\n 'X-API-Key': 'your-local-key',\n },\n params: {\n prompt: '你好',\n max_length: 1000,\n temperature: 0.7,\n },\n});\n```\n" }, { "path": "packages/x-skill/src/getSkillRepo.ts", "content": "import fs from 'fs';\nimport https from 'https';\nimport os from 'os';\nimport path from 'path';\n\ninterface SkillLoaderOptions {\n githubOwner?: string;\n githubRepo?: string;\n tempDir?: string;\n}\n\ninterface GitHubContent {\n name: string;\n path: string;\n type: 'file' | 'dir';\n download_url?: string;\n url?: string;\n}\n\ninterface GitHubTag {\n name: string;\n commit: {\n sha: string;\n url: string;\n commit?: {\n author?: {\n date: string;\n };\n };\n };\n}\n\ninterface Skill {\n name: string;\n path: string;\n description: string;\n version: string;\n}\n\ninterface ParsedVersion {\n major: number;\n minor: number;\n patch: number;\n prerelease: string | null;\n}\n\nclass SkillLoader {\n private githubOwner: string;\n private githubRepo: string;\n private tempDir: string;\n\n constructor(options: SkillLoaderOptions = {}) {\n this.githubOwner = options.githubOwner || 'ant-design';\n this.githubRepo = options.githubRepo || 'x';\n this.tempDir = options.tempDir || path.join(os.tmpdir(), 'x-skill-temp');\n }\n\n async makeRequest(url: string, options: { headers?: Record } = {}): Promise {\n return new Promise((resolve, reject) => {\n const requestOptions = {\n headers: {\n 'User-Agent': 'X-Skill-Loader',\n Accept: 'application/vnd.github.v3+json',\n ...options.headers,\n } as Record,\n timeout: 60000, // 60秒超时\n };\n\n // 添加GitHub token支持\n const githubToken = process.env.GITHUB_TOKEN;\n if (githubToken) {\n requestOptions.headers = {\n ...requestOptions.headers,\n Authorization: `token ${githubToken}`,\n };\n }\n\n const req = https\n .get(url, requestOptions, (res) => {\n let data = '';\n res.on('data', (chunk) => (data += chunk));\n res.on('end', () => {\n if (res.statusCode && res.statusCode >= 200 && res.statusCode < 300) {\n try {\n resolve(JSON.parse(data));\n } catch (_e) {\n reject(new Error('Failed to parse JSON response'));\n }\n } else if (res.statusCode === 302 || res.statusCode === 301) {\n // Follow redirect\n const redirectOptions = { ...requestOptions };\n const redirectReq = https\n .get(res.headers.location!, redirectOptions, (res2) => {\n let data2 = '';\n res2.on('data', (chunk) => (data2 += chunk));\n res2.on('end', () => {\n if (res2.statusCode && res2.statusCode >= 200 && res2.statusCode < 300) {\n try {\n resolve(JSON.parse(data2));\n } catch (_e) {\n reject(new Error('Failed to parse JSON response'));\n }\n } else {\n reject(new Error(`HTTP ${res2.statusCode}: ${res2.statusMessage}`));\n }\n });\n })\n .on('error', reject);\n\n // 设置重定向请求的超时\n redirectReq.setTimeout(60000, () => {\n redirectReq.destroy();\n reject(new Error('Request timeout after 60 seconds'));\n });\n } else {\n if (res.statusCode === 403) {\n reject(\n new Error(\n `GitHub API access denied: ${res.statusMessage}. Please use classic personal access token instead of fine-grained token`,\n ),\n );\n } else {\n reject(new Error(`HTTP ${res.statusCode}: ${res.statusMessage}`));\n }\n }\n });\n })\n .on('error', reject);\n\n // 设置超时\n req.setTimeout(60000, () => {\n req.destroy();\n reject(new Error('Request timeout after 60 seconds'));\n });\n });\n }\n\n async downloadFile(url: string): Promise {\n return new Promise((resolve, reject) => {\n const request = https\n .get(url, (res) => {\n // 检查状态码\n if (res.statusCode! < 200 || res.statusCode! >= 300) {\n reject(new Error(`HTTP ${res.statusCode}: ${res.statusMessage}`));\n return;\n }\n\n if (res.statusCode === 302 || res.statusCode === 301) {\n // Follow redirect\n if (!res.headers.location) {\n reject(new Error('Redirect location not provided'));\n return;\n }\n\n const redirectRequest = https\n .get(res.headers.location, (res2) => {\n // 检查重定向后的状态码\n if (res2.statusCode! < 200 || res2.statusCode! >= 300) {\n reject(new Error(`HTTP ${res2.statusCode}: ${res2.statusMessage}`));\n return;\n }\n\n let data = '';\n res2.on('data', (chunk) => (data += chunk));\n res2.on('end', () => resolve(data));\n })\n .on('error', reject);\n\n // 设置重定向请求的超时\n redirectRequest.setTimeout(30000, () => {\n redirectRequest.destroy();\n reject(new Error('Redirect request timeout after 30 seconds'));\n });\n\n return;\n }\n\n let data = '';\n res.on('data', (chunk) => (data += chunk));\n res.on('end', () => resolve(data));\n })\n .on('error', reject);\n\n // 设置请求超时\n request.setTimeout(30000, () => {\n request.destroy();\n reject(new Error('Request timeout after 30 seconds'));\n });\n });\n }\n\n async downloadDirectory(url: string, destPath: string): Promise {\n let apiUrl: string;\n\n const urlObj = new URL(url);\n\n if (urlObj.hostname === 'raw.githubusercontent.com') {\n const pathParts = urlObj.pathname.split('/').filter(Boolean);\n if (pathParts.length < 4) throw new Error('Invalid raw GitHub URL format');\n const [owner, repo, ref, ...pathPartsRest] = pathParts;\n const filePath = pathPartsRest.join('/');\n apiUrl = `https://api.github.com/repos/${owner}/${repo}/contents/${filePath}`;\n if (ref !== 'main' && ref !== 'master') {\n apiUrl += `?ref=${ref}`;\n }\n } else if (urlObj.hostname === 'api.github.com') {\n apiUrl = url;\n } else {\n throw new Error('Unsupported URL format');\n }\n\n const contents = (await this.makeRequest(apiUrl)) as GitHubContent[];\n\n for (const item of contents) {\n // 使用path.basename()清理文件名，防止路径遍历攻击\n const safeName = path.basename(item.name);\n\n if (item.type === 'file') {\n const fileContent = await this.downloadFile(item.download_url!);\n const filePath = path.join(destPath, safeName);\n fs.writeFileSync(filePath, fileContent);\n } else if (item.type === 'dir') {\n const subDirPath = path.join(destPath, safeName);\n fs.mkdirSync(subDirPath, { recursive: true });\n await this.downloadDirectory(item.url!, subDirPath);\n }\n }\n }\n\n async downloadSkillFromGitHub(\n skillName: string,\n version = 'latest',\n language = 'en',\n ): Promise {\n fs.mkdirSync(this.tempDir, { recursive: true });\n const skillTempDir = path.join(this.tempDir, skillName);\n\n // 安装前清理同名技能文件夹\n if (fs.existsSync(skillTempDir)) {\n fs.rmSync(skillTempDir, { recursive: true, force: true });\n }\n fs.mkdirSync(skillTempDir, { recursive: true });\n\n try {\n // 1. 先从GitHub下载，设置60秒超时\n const tag = version === 'latest' ? await this.getLatestTag() : version;\n const basePath = language === 'zh' ? 'packages/x-skill/skills-zh' : 'packages/x-skill/skills';\n const apiUrl = `https://api.github.com/repos/${this.githubOwner}/${this.githubRepo}/contents/${basePath}/${skillName}?ref=${tag}`;\n\n // 使用Promise.race实现超时控制\n const downloadPromise = this.downloadDirectory(apiUrl, skillTempDir);\n let timeoutId: NodeJS.Timeout;\n const timeoutPromise = new Promise((_, reject) => {\n timeoutId = setTimeout(() => reject(new Error('Download timeout: 60s')), 60000);\n });\n\n try {\n await Promise.race([downloadPromise, timeoutPromise]);\n } finally {\n clearTimeout(timeoutId!);\n }\n return skillTempDir;\n } catch (error) {\n console.warn(\n `Failed to download skill ${skillName} from GitHub: ${(error as Error).message}`,\n );\n\n // 2. 下载失败，提示失败并安装本地技能\n console.log(`Installing local skill: ${skillName}`);\n\n const packageDir = path.join(__dirname, '..');\n const skillsDir =\n language === 'zh'\n ? path.join(packageDir, 'skills-zh', skillName)\n : path.join(packageDir, 'skills', skillName);\n\n if (!fs.existsSync(skillsDir)) {\n throw new Error(`Local skill directory not found: ${skillsDir}`);\n }\n\n this.copyDirectorySync(skillsDir, skillTempDir);\n return skillTempDir;\n }\n }\n\n private compareVersions(a: GitHubTag, b: GitHubTag): number {\n const parseVersion = (version: string): ParsedVersion => {\n const cleanVersion = version.replace(/^v/, '');\n const parts = cleanVersion.split('-')[0].split('.');\n return {\n major: parseInt(parts[0] || '0', 10),\n minor: parseInt(parts[1] || '0', 10),\n patch: parseInt(parts[2] || '0', 10),\n prerelease: cleanVersion.includes('-') ? cleanVersion.split('-')[1] : null,\n };\n };\n\n const vA = parseVersion(a.name);\n const vB = parseVersion(b.name);\n\n if (vA.major !== vB.major) return vB.major - vA.major;\n if (vA.minor !== vB.minor) return vB.minor - vA.minor;\n if (vA.patch !== vB.patch) return vB.patch - vA.patch;\n\n if (!vA.prerelease && vB.prerelease) return -1;\n if (vA.prerelease && !vB.prerelease) return 1;\n if (vA.prerelease && vB.prerelease) {\n // 使用降序排序，确保最新的预发布版本排在前面\n return vB.prerelease.localeCompare(vA.prerelease);\n }\n\n return 0;\n }\n\n async getLatestTag(): Promise {\n try {\n const tags = (await this.makeRequest(\n `https://api.github.com/repos/${this.githubOwner}/${this.githubRepo}/tags`,\n )) as GitHubTag[];\n\n const validVersions = tags.filter((tag) =>\n /^v?\\d+\\.\\d+\\.\\d+(?:-[a-zA-Z0-9.-]+)?$/.test(tag.name),\n );\n\n if (validVersions.length > 0) {\n validVersions.sort(this.compareVersions);\n return validVersions[0].name;\n }\n\n if (tags.length > 0) {\n tags.sort(\n (a, b) =>\n new Date(b.commit?.commit?.author?.date || 0).getTime() -\n new Date(a.commit?.commit?.author?.date || 0).getTime(),\n );\n return tags[0].name;\n }\n return 'main';\n } catch (error) {\n console.error('Failed to fetch tags:', (error as Error).message);\n return 'main';\n }\n }\n\n private extractDescription(skillPath: string, skillName: string): string {\n const skillMdPath = path.join(skillPath, 'SKILL.md');\n if (!fs.existsSync(skillMdPath)) return skillName;\n\n try {\n const content = fs.readFileSync(skillMdPath, 'utf-8');\n const descMatch = content.match(/^description:\\s*(.*)$/m) || content.match(/^#\\s*(.*)$/m);\n const description = descMatch ? descMatch[1].trim() : '';\n\n if (\n !description ||\n description === '-' ||\n description === '---' ||\n description === skillName\n ) {\n return skillName;\n }\n return description;\n } catch {\n return skillName;\n }\n }\n\n async loadSkills(version = 'latest', language = 'en'): Promise {\n try {\n const tag = version === 'latest' ? await this.getLatestTag() : version;\n const basePath = language === 'zh' ? 'packages/x-skill/skills-zh' : 'packages/x-skill/skills';\n\n // 使用Promise.race实现列表获取超时控制\n const apiUrl = `https://api.github.com/repos/${this.githubOwner}/${this.githubRepo}/contents/${basePath}?ref=${tag}`;\n const listPromise = this.makeRequest(apiUrl) as Promise;\n let timeoutId: NodeJS.Timeout;\n const timeoutPromise = new Promise((_, reject) => {\n timeoutId = setTimeout(() => reject(new Error('List skills timeout: 60s')), 60000);\n });\n\n let contents: GitHubContent[];\n try {\n contents = await Promise.race([listPromise, timeoutPromise]);\n } finally {\n clearTimeout(timeoutId!);\n }\n const skillDirs = contents.filter((item) => item.type === 'dir').map((item) => item.name);\n\n const skills: Skill[] = [];\n\n for (const skillName of skillDirs) {\n try {\n const skillTempDir = await this.downloadSkillFromGitHub(skillName, version, language);\n skills.push({\n name: skillName,\n path: skillTempDir,\n description: this.extractDescription(skillTempDir, skillName),\n version: tag,\n });\n } catch (error) {\n console.warn(`Skipping skill ${skillName}: ${(error as Error).message}`);\n }\n }\n\n if (skills.length === 0) {\n throw new Error('No available skills found');\n }\n\n return skills;\n } catch (error) {\n console.warn(`Failed to load skills from remote: ${(error as Error).message}`);\n return await this.loadLocalSkills(language);\n }\n }\n\n async loadLocalSkills(language = 'zh'): Promise {\n const packageDir = path.join(__dirname, '..');\n const skillsDir =\n language === 'zh' ? path.join(packageDir, 'skills-zh') : path.join(packageDir, 'skills');\n\n const skillDirs = fs\n .readdirSync(skillsDir, { withFileTypes: true })\n .filter((dirent) => dirent.isDirectory())\n .map((dirent) => dirent.name);\n\n return skillDirs.map((skillName) => {\n const skillPath = path.join(skillsDir, skillName);\n return {\n name: skillName,\n path: skillPath,\n description: this.extractDescription(skillPath, skillName),\n version: 'local',\n };\n });\n }\n\n private copyDirectorySync(src: string, dest: string): void {\n // 防止递归嵌套：检查目标路径是否是源路径的子目录\n const srcResolved = path.resolve(src);\n const destResolved = path.resolve(dest);\n\n if (destResolved.startsWith(srcResolved) && destResolved !== srcResolved) {\n throw new Error(`Cannot copy directory into itself: ${src} -> ${dest}`);\n }\n\n // 清理目标目录并创建新目录\n if (fs.existsSync(dest)) {\n fs.rmSync(dest, { recursive: true, force: true });\n }\n fs.mkdirSync(dest, { recursive: true });\n\n const items = fs.readdirSync(src, { withFileTypes: true });\n for (const item of items) {\n // 使用path.basename()清理文件名，防止路径遍历攻击\n const safeName = path.basename(item.name);\n const srcPath = path.join(src, safeName);\n const destPath = path.join(dest, safeName);\n\n if (item.isDirectory()) {\n this.copyDirectorySync(srcPath, destPath);\n } else {\n fs.copyFileSync(srcPath, destPath);\n }\n }\n }\n\n async listVersions(): Promise {\n try {\n const tags = (await this.makeRequest(\n `https://api.github.com/repos/${this.githubOwner}/${this.githubRepo}/tags`,\n )) as GitHubTag[];\n\n if (tags.length === 0) {\n throw new Error('No version tags found');\n }\n\n const validVersions = tags.filter((tag) =>\n /^v?\\d+\\.\\d+\\.\\d+(?:-[a-zA-Z0-9.-]+)?$/.test(tag.name),\n );\n\n if (validVersions.length > 0) {\n validVersions.sort(this.compareVersions);\n return validVersions.map((tag) => tag.name);\n }\n\n return tags.map((tag) => tag.name);\n } catch (error) {\n throw new Error(`Failed to fetch tags: ${(error as Error).message}`);\n }\n }\n}\n\nexport default SkillLoader;\n" }, { "path": "packages/x-skill/src/help.ts", "content": "import figlet from 'figlet';\nimport * as fs from 'fs';\nimport * as path from 'path';\nimport { getMessage, type Language } from './locale/index';\n\ninterface ColorMap {\n [key: string]: string;\n red: string;\n green: string;\n yellow: string;\n blue: string;\n magenta: string;\n cyan: string;\n white: string;\n bright: string;\n dim: string;\n reset: string;\n}\n\nclass HelpManager {\n private language: Language;\n private colorMap: ColorMap;\n\n constructor(language = 'zh' as Language) {\n this.language = language;\n this.colorMap = {\n red: '\\x1b[31m',\n green: '\\x1b[32m',\n yellow: '\\x1b[33m',\n blue: '\\x1b[34m',\n magenta: '\\x1b[35m',\n cyan: '\\x1b[36m',\n white: '\\x1b[37m',\n bright: '\\x1b[1m',\n dim: '\\x1b[2m',\n reset: '\\x1b[0m',\n };\n }\n\n colorize(text: string, color: string): string {\n if (!this.colorMap[color]) {\n return text;\n }\n return `${this.colorMap[color]}${text}${this.colorMap.reset}`;\n }\n\n printSeparator(): void {\n console.log(this.colorize('─'.repeat(50), 'dim'));\n }\n\n showHelp(): void {\n const title = this.language === 'zh' ? 'X-Skill 安装器' : 'X-Skill Installer';\n const description =\n this.language === 'zh' ? '从GitHub获取skill文件' : 'Fetch skill files from GitHub';\n const githubTokenDesc =\n this.language === 'zh'\n ? 'GitHub访问令牌，用于避免API速率限制'\n : 'GitHub access token to avoid API rate limits';\n const tagDesc =\n this.language === 'zh'\n ? '指定要使用的版本标签 (默认: latest)'\n : 'Specify version tag to use (default: latest)';\n const listDesc =\n this.language === 'zh' ? '列出所有可用的版本标签' : 'List all available version tags';\n const helpDesc = this.language === 'zh' ? '显示帮助信息' : 'Show help information';\n const versionDesc = this.language === 'zh' ? '显示程序版本号' : 'Show program version';\n const example1 = this.language === 'zh' ? '# 使用latest版本' : '# Use latest version';\n const example2 = this.language === 'zh' ? '# 使用指定版本' : '# Use specific version';\n const example3 = this.language === 'zh' ? '# 列出所有版本' : '# List all versions';\n const example4 = this.language === 'zh' ? '# 显示程序版本号' : '# Show program version';\n const example5 =\n this.language === 'zh' ? '# 使用token避免速率限制' : '# Use token to avoid rate limits';\n\n console.log(`\n${this.colorize(`${title}`, 'cyan')} - ${description}\n\n${this.colorize(getMessage('usage', this.language), 'yellow')}\n x-skill [${this.language === 'zh' ? '选项' : 'options'}]\n\n${this.colorize(getMessage('environmentVariables', this.language), 'yellow')}\n GITHUB_TOKEN ${githubTokenDesc}\n\n${this.colorize(getMessage('options', this.language), 'yellow')}\n -t, --tag ${tagDesc}\n -l, --list-versions ${listDesc}\n -h, --help ${helpDesc}\n -V, --version ${versionDesc}\n -v, --version ${versionDesc}\n\n${this.colorize(getMessage('examples', this.language), 'yellow')}\n x-skill ${example1}\n x-skill -t v1.0.0 ${example2}\n x-skill --list-versions ${example3}\n x-skill --version ${example4}\n GITHUB_TOKEN=your_token x-skill -t 2.3.0 ${example5}\n`);\n }\n\n showVersion(): boolean {\n try {\n const packagePath = path.join(__dirname, '..', 'package.json');\n const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf-8'));\n console.log(packageJson.version);\n return true;\n } catch (error) {\n console.error(\n getMessage('versionReadError', this.language, {\n message: (error as Error).message,\n }),\n );\n return false;\n }\n }\n\n async printHeader(): Promise {\n try {\n console.log(figlet.textSync('X-Skill'));\n } catch (err) {\n console.log('Something went wrong...');\n console.dir(err);\n }\n }\n\n printLanguageSelection(): void {\n console.log(`\\n${this.colorize(getMessage('selectLanguage', this.language), 'cyan')}`);\n this.printSeparator();\n console.log(` ${this.colorize('1.', 'yellow')} 中文`);\n console.log(` ${this.colorize('2.', 'yellow')} English`);\n this.printSeparator();\n }\n\n printCompletion(): void {\n console.log(`\\n\\n${this.colorize(getMessage('startUsing', this.language), 'bright')}`);\n }\n\n printError(error: Error): void {\n console.error(\n `\\n${this.colorize(`❌ ${getMessage('installFailed', this.language)}`, 'red')}\\n`,\n error.message,\n );\n }\n\n setLanguage(language: Language): void {\n this.language = language;\n }\n}\n\nexport default HelpManager;\n" }, { "path": "packages/x-skill/src/index.ts", "content": "#!/usr/bin/env node\n\nimport fs from 'fs';\nimport ora from 'ora';\nimport os from 'os';\nimport path from 'path';\nimport ProgressBar from 'progress';\nimport readline from 'readline';\nimport SkillLoader from './getSkillRepo';\nimport HelpManager from './help';\nimport { emojis, getMessage, Language, LocaleMessages, messages } from './locale/index';\n\ninterface SkillConfig {\n targets: {\n [key: string]: {\n enabled: boolean;\n paths: {\n global: string;\n project: string;\n };\n };\n };\n}\n\ninterface ParsedArgs {\n tag: string | null;\n help: boolean;\n listVersions: boolean;\n}\n\ninterface Skill {\n name: string;\n path: string;\n description: string;\n version: string;\n}\n\nclass SkillInstaller {\n private skills: Skill[] = [];\n private language: Language = 'zh';\n private rl: readline.Interface;\n private skillConfig: SkillConfig;\n private skillLoader: SkillLoader;\n private helpManager: HelpManager;\n private args: ParsedArgs;\n private cacheDir: string;\n\n constructor() {\n this.rl = readline.createInterface({\n input: process.stdin,\n output: process.stdout,\n });\n\n this.skillConfig = this.loadConfig();\n this.skillLoader = new SkillLoader({\n githubOwner: 'ant-design',\n githubRepo: 'x',\n tempDir: path.join(os.tmpdir(), 'x-skill-temp'),\n });\n this.cacheDir = path.join(os.tmpdir(), 'x-skill-cache');\n fs.mkdirSync(this.cacheDir, { recursive: true });\n\n this.helpManager = new HelpManager();\n\n // Parse command line arguments\n this.args = this.parseArgs();\n }\n\n questionAsync(question: string): Promise {\n return new Promise((resolve) => {\n this.rl.question(question, (answer) => {\n resolve(answer);\n });\n });\n }\n\n printSeparator(): void {\n this.helpManager.printSeparator();\n }\n\n parseArgs(): ParsedArgs {\n const args = process.argv.slice(2);\n const parsed: ParsedArgs = { tag: null, help: false, listVersions: false };\n\n // 检测系统语言环境，默认为英文\n const systemLang = (process.env.LANG || process.env.LANGUAGE || '').toLowerCase();\n const defaultLanguage = systemLang.includes('zh') ? 'zh' : 'en';\n\n for (let i = 0; i < args.length; i++) {\n const arg = args[i];\n switch (arg) {\n case '-t':\n case '--tag':\n if (i + 1 < args.length && !args[i + 1].startsWith('-')) {\n parsed.tag = args[++i];\n } else {\n console.error(getMessage('tagValueRequired', defaultLanguage));\n process.exit(1);\n }\n break;\n case '-l':\n case '--list-versions':\n parsed.listVersions = true;\n break;\n case '-h':\n case '--help':\n parsed.help = true;\n break;\n case '-v':\n case '-V':\n case '--version':\n this.helpManager.showVersion();\n process.exit(0);\n break;\n default:\n if (arg.startsWith('-')) {\n console.error(`${getMessage('unknownOption', defaultLanguage)} '${arg}'`);\n console.error(getMessage('useHelp', defaultLanguage));\n process.exit(1);\n }\n break;\n }\n }\n\n return parsed;\n }\n\n /**\n * 处理非交互式命令\n * @returns 如果处理了非交互式命令则返回true，否则返回false\n */\n handleNonInteractiveCommands(): boolean {\n if (this.args.help) {\n this.showHelp();\n return true;\n }\n\n if (this.args.listVersions) {\n this.listVersions().then(() => process.exit(0));\n return true;\n }\n\n return false;\n }\n\n showHelp(): void {\n this.helpManager.showHelp();\n }\n\n loadConfig(): SkillConfig {\n const configPath = path.join(__dirname, '..', '.skill.json');\n const configData = fs.readFileSync(configPath, 'utf-8');\n return JSON.parse(configData);\n }\n\n loadLocaleMessages(): LocaleMessages {\n return messages.zh;\n }\n\n getCache(key: string): any {\n const cacheFile = path.join(this.cacheDir, `${key}.json`);\n if (!fs.existsSync(cacheFile)) {\n return null;\n }\n\n const cacheData = JSON.parse(fs.readFileSync(cacheFile, 'utf-8'));\n if (Date.now() > cacheData.expires) {\n fs.unlinkSync(cacheFile);\n return null;\n }\n\n return cacheData.data;\n }\n\n setCache(key: string, data: any, ttlSeconds = 3600): void {\n const cacheFile = path.join(this.cacheDir, `${key}.json`);\n const cacheData = {\n data,\n expires: Date.now() + ttlSeconds * 1000,\n };\n\n fs.writeFileSync(cacheFile, JSON.stringify(cacheData));\n }\n\n clearCache(key: string): void {\n const cacheFile = path.join(this.cacheDir, `${key}.json`);\n if (fs.existsSync(cacheFile)) {\n fs.unlinkSync(cacheFile);\n }\n }\n\n async listVersions(): Promise {\n try {\n const spinner = ora(\n this.helpManager.colorize(getMessage('fetchingVersions', this.language), 'cyan'),\n ).start();\n const versions = await this.skillLoader.listVersions();\n spinner.stop();\n\n if (versions.length === 0) {\n console.log(\n `${this.helpManager.colorize(getMessage('noVersionsFound', this.language), 'yellow')}`,\n );\n return;\n }\n\n console.log(\n `${this.helpManager.colorize(getMessage('availableVersions', this.language), 'green')}`,\n );\n versions.forEach((version, index) => {\n const marker = index === 0 ? getMessage('latestMarker', this.language) : '';\n console.log(` ${this.helpManager.colorize(version, 'yellow')}${marker}`);\n });\n } catch (error) {\n console.error(\n `${this.helpManager.colorize(getMessage('error', this.language), 'red')} ${(error as Error).message}`,\n );\n }\n }\n\n async loadSkills(): Promise {\n try {\n console.log(\n `${this.helpManager.colorize(getMessage('fetchingSkills', this.language), 'cyan')}`,\n );\n const version = this.args.tag || 'latest';\n const skills = await this.skillLoader.loadSkills(version, this.language);\n this.skills = skills;\n\n // 缓存结果\n this.setCache(`skills_${skills[0]?.version || version}`, this.skills, 1800); // 缓存30分钟\n } catch (error) {\n if ((error as Error).message.includes('rate limit')) {\n console.error(\n `${this.helpManager.colorize(getMessage('rateLimitError', this.language, { message: (error as Error).message }), 'red')}\\n`,\n );\n console.log(\n `${this.helpManager.colorize(getMessage('info', this.language), 'cyan')} ${getMessage('rateLimitHint', this.language)}`,\n );\n } else {\n console.error(\n `${this.helpManager.colorize(getMessage('githubFetchError', this.language, { message: (error as Error).message }), 'red')}`,\n );\n }\n\n // Fallback to local skills if GitHub fails\n console.log(\n `${this.helpManager.colorize(getMessage('usingLocalSkills', this.language), 'yellow')}`,\n );\n await this.loadLocalSkills();\n\n if (this.skills.length === 0) {\n console.log(\n `${emojis.warning} ${this.helpManager.colorize(getMessage('noLocalSkills', this.language), 'yellow')}`,\n );\n }\n }\n }\n\n async loadLocalSkills(): Promise {\n this.skills = await this.skillLoader.loadLocalSkills(this.language);\n }\n\n async askQuestion(question: string, options: string[]): Promise {\n // 防止空选项数组导致的无限递归\n if (!options || options.length === 0) {\n console.log(\n `${emojis.warning} ${this.helpManager.colorize(getMessage('noSelection', this.language), 'red')}`,\n );\n return null;\n }\n\n console.log(`\\n${this.helpManager.colorize(`❓ ${question}`, 'cyan')}`);\n this.printSeparator();\n options.forEach((option, index) => {\n const number = this.helpManager.colorize(`${index + 1}.`, 'yellow');\n console.log(` ${number} ${option}`);\n });\n this.printSeparator();\n\n let attempts = 0;\n const maxAttempts = 3;\n\n console.log(\n this.helpManager.colorize(`💡 ${getMessage('inputNumberTip', this.language)}`, 'dim'),\n );\n\n while (attempts < maxAttempts) {\n try {\n const answer = await this.questionAsync(\n this.helpManager.colorize('➤ ', 'green') +\n getMessage('pleaseSelectNumber', this.language),\n );\n\n if (!answer || answer.trim() === '') {\n console.log(\n `${emojis.warning} ${this.helpManager.colorize(getMessage('inputEmpty', this.language), 'red')}`,\n );\n attempts++;\n continue;\n }\n\n const index = parseInt(answer.trim(), 10) - 1;\n if (index >= 0 && index < options.length) {\n console.log(\n `\\n${emojis.check} ${getMessage('yourChoice', this.language)} ${this.helpManager.colorize(options[index], 'green')}\\n`,\n );\n return options[index];\n }\n console.log(\n `${emojis.warning} ${this.helpManager.colorize(getMessage('invalidChoice', this.language), 'red')}`,\n );\n attempts++;\n } catch (error) {\n console.error(\n `${emojis.cross} ${this.helpManager.colorize(getMessage('error', this.language), 'red')} ${(error as Error).message}`,\n );\n attempts++;\n }\n }\n\n console.error(\n `${emojis.cross} ${this.helpManager.colorize(getMessage('maxAttemptsExceeded', this.language), 'red')}`,\n );\n process.exit(1);\n }\n\n async askMultipleChoice(question: string, options: string[]): Promise {\n // 防止空选项数组导致的无限递归\n if (!options || options.length === 0) {\n console.log(\n `${emojis.warning} ${this.helpManager.colorize(getMessage('noSelection', this.language), 'red')}`,\n );\n return [];\n }\n\n console.log(`\\n${this.helpManager.colorize(`✨ ${question}`, 'cyan')}`);\n options.forEach((option, index) => {\n const checkbox = this.helpManager.colorize('[ ]', 'dim');\n const number = this.helpManager.colorize(`${index + 1}.`, 'yellow');\n console.log(` ${checkbox} ${number} ${option}`);\n });\n console.log(''); // 添加空行让提示更清晰\n\n let attempts = 0;\n const maxAttempts = 3;\n\n console.log(\n this.helpManager.colorize(`💡 ${getMessage('inputMultipleTip', this.language)}`, 'dim'),\n );\n\n while (attempts < maxAttempts) {\n try {\n const answer = await this.questionAsync(\n this.helpManager.colorize('➤ ', 'green') + getMessage('pleaseSelect', this.language),\n );\n\n if (!answer || answer.trim() === '') {\n console.log(\n `${emojis.warning} ${this.helpManager.colorize(getMessage('inputEmpty', this.language), 'red')}`,\n );\n attempts++;\n continue;\n }\n\n const indices = answer\n .trim()\n .split(',')\n .map((s) => parseInt(s.trim(), 10) - 1)\n .filter((i) => !isNaN(i) && i >= 0 && i < options.length);\n\n const selected = indices.map((i) => options[i]);\n\n if (selected.length > 0) {\n console.log(`\\n${emojis.check} ${getMessage('yourChoice', this.language)}`);\n selected.forEach((item) => {\n console.log(` ${this.helpManager.colorize(`• ${item}`, 'green')}`);\n });\n return selected;\n }\n console.log(\n `${emojis.warning} ${this.helpManager.colorize(getMessage('invalidInput', this.language), 'red')}`,\n );\n attempts++;\n } catch (error) {\n console.error(\n `${emojis.cross} ${this.helpManager.colorize(getMessage('error', this.language), 'red')} ${(error as Error).message}`,\n );\n attempts++;\n }\n }\n\n console.error(\n `${emojis.cross} ${this.helpManager.colorize(getMessage('maxAttemptsExceeded', this.language), 'red')}`,\n );\n process.exit(1);\n }\n\n // Progress bar using progress library\n createProgressBar(total: number): ProgressBar {\n return new ProgressBar(\n ` ${this.helpManager.colorize(':bar', 'green')} ${this.helpManager.colorize(':percent', 'cyan')} ${this.helpManager.colorize(':current/:total', 'yellow')} ${this.helpManager.colorize(':etas', 'magenta')} ${this.helpManager.colorize('→', 'dim')} :text`,\n {\n total: total,\n complete: '█',\n incomplete: '░',\n width: 30,\n },\n );\n }\n\n async run(): Promise {\n // 首先处理非交互式命令\n if (this.handleNonInteractiveCommands()) {\n return;\n }\n\n try {\n await this.helpManager.printHeader();\n\n // Display version info if specified\n if (this.args.tag) {\n console.log(\n `${this.helpManager.colorize(getMessage('usingVersion', this.language, { version: this.args.tag }), 'cyan')}`,\n );\n }\n\n // 短暂延迟以避免自动输入问题\n await new Promise((resolve) => setTimeout(resolve, 100));\n\n // Language selection - bilingual display with dual language prompt\n this.helpManager.printLanguageSelection();\n\n let languageChoice: string;\n while (true) {\n const answer = await this.questionAsync(\n this.helpManager.colorize(\n `${getMessage('selectLanguagePrompt', this.language)}: `,\n 'green',\n ),\n );\n const choice = answer.trim();\n if (choice === '1' || choice.toLowerCase() === 'zh') {\n console.log(`\\n${emojis.check} 你选择了中文\\n`);\n languageChoice = '中文';\n break;\n }\n if (choice === '2' || choice.toLowerCase() === 'en') {\n console.log(`\\n${emojis.check} You selected English\\n`);\n languageChoice = 'English';\n break;\n }\n console.log(\n `${emojis.warning} ${this.helpManager.colorize('无效选择，请重新输入 / Invalid choice, please try again', 'red')}`,\n );\n }\n\n this.language = languageChoice === '中文' ? 'zh' : 'en';\n\n // 更新HelpManager的语言设置\n this.helpManager.setLanguage(this.language);\n\n // Load skills from GitHub\n await this.loadSkills();\n\n const skillOptions = this.skills.map(\n (skill) =>\n `${skill.name}${skill.description && skill.description !== skill.name ? ` - ${skill.description}` : ''}`,\n );\n\n if (skillOptions.length === 0) {\n console.log(\n `${emojis.warning} ${this.helpManager.colorize(getMessage('noSkillsFound', this.language), 'yellow')}`,\n );\n return;\n }\n\n let selectedSkills: string[] = [];\n while (selectedSkills.length === 0) {\n selectedSkills = await this.askMultipleChoice(\n getMessage('selectSkills', this.language),\n skillOptions,\n );\n\n if (selectedSkills.length === 0) {\n console.log(\n `${emojis.warning} ${this.helpManager.colorize(getMessage('selectAtLeastOneSkill', this.language), 'yellow')}`,\n );\n }\n }\n\n const selectedSkillNames = selectedSkills.map((s) => s.split(' - ')[0]);\n\n const softwareOptions = Object.entries(this.skillConfig.targets)\n .filter(([_, config]) => config.enabled)\n .map(([name]) => name);\n\n if (softwareOptions.length === 0) {\n console.log(\n `${emojis.warning} ${this.helpManager.colorize(getMessage('noSoftwareFound', this.language), 'yellow')}`,\n );\n return;\n }\n\n let selectedSoftwareList: string[] = [];\n while (selectedSoftwareList.length === 0) {\n selectedSoftwareList = await this.askMultipleChoice(\n getMessage('selectSoftware', this.language),\n softwareOptions,\n );\n\n if (selectedSoftwareList.length === 0) {\n console.log(\n `${emojis.warning} ${this.helpManager.colorize(getMessage('selectAtLeastOneSoftware', this.language), 'yellow')}`,\n );\n }\n }\n\n // Installation method selection\n const installTypeOptions = [\n getMessage('globalInstall', this.language),\n getMessage('projectInstall', this.language),\n ];\n\n let selectedInstallType: string | null = null;\n while (!selectedInstallType) {\n selectedInstallType = await this.askQuestion(\n getMessage('selectInstallType', this.language),\n installTypeOptions,\n );\n }\n\n const isGlobal = selectedInstallType === getMessage('globalInstall', this.language);\n\n // Installation process\n const totalSteps = selectedSoftwareList.length * selectedSkillNames.length;\n\n if (totalSteps > 0) {\n const progressBar = this.createProgressBar(totalSteps);\n\n const allTasks = [];\n for (const software of selectedSoftwareList) {\n for (const skillName of selectedSkillNames) {\n allTasks.push({ skillName, software });\n }\n }\n\n for (const task of allTasks) {\n const { skillName, software } = task;\n try {\n await this.installSkills([skillName], software, isGlobal);\n progressBar.tick({\n text: `${skillName} -> ${software}`,\n });\n } catch (installError) {\n console.error(\n `${emojis.cross} ${this.helpManager.colorize(getMessage('installError', this.language, { skill: skillName, error: (installError as Error).message }), 'red')}`,\n );\n progressBar.tick({\n text: `${skillName} -> ${software} ${getMessage('installationFailed', this.language)}`,\n });\n }\n }\n }\n // Completion animation\n this.helpManager.printCompletion();\n\n // Ensure process exits properly\n process.exit(0);\n } catch (error) {\n if (\n (error as Error).message.includes('Input stream ended') ||\n (error as Error).message.includes('Readline interface is closed')\n ) {\n console.error(\n `${emojis.cross} ${this.helpManager.colorize(getMessage('programInterrupted'), 'red')}`,\n );\n } else {\n this.helpManager.printError(error as Error);\n }\n } finally {\n if (this.rl && !(this.rl as any).closed) {\n this.rl.close();\n }\n }\n }\n\n async installSkills(skillNames: string[], software: string, isGlobal: boolean): Promise {\n const targetConfig = this.skillConfig.targets[software];\n const targetPath = isGlobal ? targetConfig.paths.global : targetConfig.paths.project;\n const fullTargetPath = isGlobal\n ? path.join(os.homedir(), targetPath)\n : path.join(process.cwd(), targetPath);\n\n fs.mkdirSync(fullTargetPath, { recursive: true });\n\n for (const skillName of skillNames) {\n const skill = this.skills.find((s) => s.name === skillName);\n if (!skill) continue;\n\n const sourcePath = skill.path;\n const destPath = path.join(fullTargetPath, skillName);\n\n if (fs.existsSync(destPath)) {\n fs.rmSync(destPath, { recursive: true, force: true });\n }\n\n this.copyDirectory(sourcePath, destPath);\n }\n }\n\n copyDirectory(src: string, dest: string): void {\n fs.mkdirSync(dest, { recursive: true });\n\n const entries = fs.readdirSync(src, { withFileTypes: true });\n for (const entry of entries) {\n const srcPath = path.join(src, entry.name);\n const destPath = path.join(dest, entry.name);\n\n if (entry.isDirectory()) {\n this.copyDirectory(srcPath, destPath);\n } else {\n fs.copyFileSync(srcPath, destPath);\n }\n }\n }\n}\n\n// Export class for testing purposes\nexport { SkillInstaller };\n\n// 直接运行时执行\nconst installer = new SkillInstaller();\ninstaller.run().catch(console.error);\n" }, { "path": "packages/x-skill/src/locale/index.ts", "content": "// 添加表情符号\nexport const emojis = {\n rocket: '🚀',\n package: '📦',\n sparkles: '✨',\n check: '✅',\n cross: '❌',\n warning: '⚠️',\n info: '💡',\n party: '🎉',\n star: '⭐',\n heart: '❤️',\n magic: '✨',\n folder: '📁',\n gear: '⚙️',\n computer: '💻',\n globe: '🌍',\n bulb: '💡',\n} as const;\n\n// 定义表情符号类型\nexport type EmojiKey = keyof typeof emojis;\n\n// 定义消息类型\nexport interface LocaleMessages {\n welcome: string;\n welcomeSub: string;\n selectLanguage: string;\n selectLanguagePrompt: string;\n selectSkills: string;\n selectSoftware: string;\n selectInstallType: string;\n installComplete: string;\n installFailed: string;\n globalInstall: string;\n projectInstall: string;\n installingSkill: string;\n updatingSkill: string;\n installingDetail: string;\n installError: string;\n invalidChoice: string;\n noSelection: string;\n yourChoice: string;\n pleaseSelect: string;\n pleaseSelectNumber: string;\n allComplete: string;\n startUsing: string;\n error: string;\n warning: string;\n info: string;\n success: string;\n cancel: string;\n inputEmpty: string;\n invalidInput: string;\n maxAttemptsExceeded: string;\n programInterrupted: string;\n fetchingSkills: string;\n fetchingVersions: string;\n usingLocalSkills: string;\n noLocalSkills: string;\n noSkillsFound: string;\n noSoftwareFound: string;\n noVersionsFound: string;\n rateLimitError: string;\n rateLimitHint: string;\n githubFetchError: string;\n configLoadError: string;\n localeLoadError: string;\n versionReadError: string;\n selectAtLeastOneSkill: string;\n selectAtLeastOneSoftware: string;\n inputNumberTip: string;\n inputMultipleTip: string;\n usage: string;\n options: string;\n examples: string;\n environmentVariables: string;\n usingVersion: string;\n latestMarker: string;\n availableVersions: string;\n installationProgress: string;\n installationFailed: string;\n tagValueRequired: string;\n unknownOption: string;\n useHelp: string;\n}\n\n// 定义语言类型\nexport type Language = 'zh' | 'en';\n\n// 定义消息对象类型\nexport type Messages = Record;\n\nexport const messages: Messages = {\n zh: {\n welcome: `${emojis.rocket} 欢迎使用 X-Skill 安装器！`,\n welcomeSub: '我们将帮你快速安装所需的开发技能！',\n selectLanguage: `${emojis.globe} 请选择语言 / Please select language:`,\n selectLanguagePrompt: '请选择语言 / Please select language (输入数字/enter number)',\n selectSkills: `请选择要安装的技能 (可多选):`,\n selectSoftware: `${emojis.computer} 请选择目标软件 (可多选):`,\n selectInstallType: `${emojis.gear} 请选择安装方式:`,\n installComplete: `${emojis.party} 安装完成! 太棒了！`,\n installFailed: `${emojis.cross} 安装失败:`,\n globalInstall: '🌍 全局安装',\n projectInstall: '📁 项目安装',\n installingSkill: `${emojis.package} 正在为 {software} 安装技能...`,\n updatingSkill: `${emojis.info} 更新已存在的技能: {skill}`,\n installingDetail: `${emojis.check} {skill} -> {path}`,\n installError: `${emojis.cross} 安装 {skill} 失败: {error}`,\n invalidChoice: '无效选择，请重试',\n noSelection: '请至少选择一个选项',\n yourChoice: '你选择了:',\n pleaseSelect: '请选择:',\n pleaseSelectNumber: '请选择 (输入数字):',\n allComplete: '所有安装任务完成！',\n startUsing: '你可以开始使用新安装的技能了！',\n error: '错误',\n warning: '警告',\n info: '提示',\n success: '成功',\n cancel: '取消',\n inputEmpty: '输入不能为空，请重试',\n invalidInput: '无效输入，请重试',\n maxAttemptsExceeded: '多次输入失败，程序终止',\n programInterrupted: '程序被意外中断',\n\n // 网络和加载相关\n fetchingSkills: '正在从GitHub获取技能列表...',\n fetchingVersions: '获取可用版本...',\n usingLocalSkills: '正在使用本地技能文件...',\n noLocalSkills: '本地也没有找到可用的技能',\n noSkillsFound: '没有找到可用的技能',\n noSoftwareFound: '没有找到可用的软件目标',\n noVersionsFound: '没有找到版本标签',\n\n // GitHub API 相关\n rateLimitError: 'GitHub API 速率限制: {message}',\n rateLimitHint: '设置 GITHUB_TOKEN 环境变量可提高限制到每小时5000次',\n githubFetchError: '从GitHub获取技能失败: {message}',\n\n // 文件和配置相关\n configLoadError: '加载技能配置失败: {message}',\n localeLoadError: '加载语言配置失败: {message}',\n versionReadError: '读取版本失败: {message}',\n\n // 交互提示\n selectAtLeastOneSkill: '请至少选择一个技能',\n selectAtLeastOneSoftware: '请至少选择一个软件目标',\n inputNumberTip: '输入数字编号，如: 1',\n inputMultipleTip: '输入数字编号，多个选择用逗号分隔，如: 1,2,3',\n\n // 帮助信息\n usage: '用法',\n options: '选项',\n examples: '示例',\n environmentVariables: '环境变量',\n\n // 命令行参数错误\n tagValueRequired: '错误: --tag 参数需要一个值 / Error: --tag parameter requires a value',\n unknownOption: '错误: 未知的选项 / Error: unknown option',\n useHelp: '使用 --help 查看可用选项 / Use --help to see available options',\n\n // 版本和标签\n usingVersion: '使用版本: {version}',\n latestMarker: ' (latest)',\n availableVersions: '可用版本:',\n\n // 安装过程\n installationProgress: ' :bar :percent :current/:total :etas → :text',\n installationFailed: '(失败)',\n },\n en: {\n welcome: `${emojis.rocket} Welcome to X-Skill Installer!`,\n welcomeSub: 'We will help you quickly install the required development skills!',\n selectLanguage: `${emojis.globe} Select language / 请选择语言:`,\n selectLanguagePrompt: 'Please select language / 请选择语言 (enter number/输入数字)',\n selectSkills: `${emojis.magic} Select skills to install (multiple selection):`,\n selectSoftware: `${emojis.computer} Select target software (multiple selection):`,\n selectInstallType: `${emojis.gear} Select installation type:`,\n installComplete: `${emojis.party} Installation complete! Awesome!`,\n installFailed: `${emojis.cross} Installation failed:`,\n globalInstall: '🌍 Global install',\n projectInstall: '📁 Project install',\n installingSkill: `${emojis.package} Installing skills for {software}...`,\n updatingSkill: `${emojis.info} Updating existing skill: {skill}`,\n installingDetail: `${emojis.check} {skill} -> {path}`,\n installError: `${emojis.cross} Failed to install {skill}: {error}`,\n invalidChoice: 'Invalid choice, please try again',\n noSelection: 'Please select at least one option',\n yourChoice: 'You selected:',\n pleaseSelect: 'Please select:',\n pleaseSelectNumber: 'Please select (enter number):',\n allComplete: 'All installation tasks completed!',\n startUsing: 'You can start using your newly installed skills!',\n error: 'Error',\n warning: 'Warning',\n info: 'Info',\n success: 'Success',\n cancel: 'Cancel',\n inputEmpty: 'Input cannot be empty, please try again',\n invalidInput: 'Invalid input, please try again',\n maxAttemptsExceeded: 'Maximum attempts exceeded, program terminated',\n programInterrupted: 'Program interrupted unexpectedly',\n\n // 网络和加载相关\n fetchingSkills: 'Fetching skills from GitHub...',\n fetchingVersions: 'Fetching available versions...',\n usingLocalSkills: 'Using local skills...',\n noLocalSkills: 'No local skills found',\n noSkillsFound: 'No available skills found',\n noSoftwareFound: 'No available software targets found',\n noVersionsFound: 'No version tags found',\n\n // GitHub API 相关\n rateLimitError: 'GitHub API rate limit: {message}',\n rateLimitHint: 'Set GITHUB_TOKEN environment variable to increase limit to 5000 per hour',\n githubFetchError: 'Failed to fetch skills from GitHub: {message}',\n\n // 文件和配置相关\n configLoadError: 'Failed to load skill config: {message}',\n localeLoadError: 'Failed to load locale messages: {message}',\n versionReadError: 'Failed to read version: {message}',\n\n // 交互提示\n selectAtLeastOneSkill: 'Please select at least one skill',\n selectAtLeastOneSoftware: 'Please select at least one software target',\n inputNumberTip: 'Enter number, e.g., 1',\n inputMultipleTip: 'Enter numbers separated by commas, e.g., 1,2,3',\n\n // 帮助信息\n usage: 'Usage',\n options: 'Options',\n examples: 'Examples',\n environmentVariables: 'Environment Variables',\n\n // 命令行参数错误\n tagValueRequired: 'Error: --tag parameter requires a value',\n unknownOption: 'Error: unknown option',\n useHelp: 'Use --help to see available options',\n\n // 版本和标签\n usingVersion: 'Using version: {version}',\n latestMarker: ' (latest)',\n availableVersions: 'Available versions:',\n\n // 安装过程\n installationProgress: ' :bar :percent :current/:total :etas → :text',\n installationFailed: '(failed)',\n },\n};\n\n// 默认语言\nexport const DEFAULT_LANGUAGE: Language = 'zh';\n\n// 获取支持的语言列表\nexport const SUPPORTED_LANGUAGES: Language[] = Object.keys(messages) as Language[];\n\n// 统一的 getMessage 工具函数\nexport function getMessage(\n key: keyof LocaleMessages,\n language: Language = DEFAULT_LANGUAGE,\n replacements: Record = {},\n): string {\n let message = messages[language]?.[key] || key;\n\n // Replace template variables\n Object.keys(replacements).forEach((placeholder) => {\n message = message.replace(new RegExp(`{${placeholder}}`, 'g'), replacements[placeholder]);\n });\n\n return message;\n}\n" }, { "path": "packages/x-skill/src/skill-meta.json", "content": "{\n \"x-sdk-skills\": {\n \"description\": \"Ant Design X SDK core skill package, including complete features such as useXChat, XRequest, and custom Provider\",\n \"descriptionZh\": \"Ant Design X SDK 核心技能包，包含 useXChat、XRequest 和自定义 Provider 等完整功能\",\n \"skills\": [\n {\n \"skill\": \"use-x-chat\",\n \"name\": \"use-x-chat\",\n \"version\": \"2.4.0\",\n \"desc\": \"Focus on explaining how to use the useXChat Hook, including custom Provider integration, message management, error handling, etc.\",\n \"descZh\": \"专注讲解如何使用 useXChat Hook，包括自定义 Provider 的集成、消息管理、错误处理等\",\n \"tags\": [\"chat\", \"hook\", \"sdk\"]\n },\n {\n \"skill\": \"x-chat-provider\",\n \"name\": \"x-chat-provider\",\n \"version\": \"2.4.0\",\n \"desc\": \"Focus on implementing custom Chat Provider, helping to adapt any streaming interface to Ant Design X standard format\",\n \"descZh\": \"专注于自定义 Chat Provider 的实现，帮助将任意流式接口适配为 Ant Design X 标准格式\",\n \"tags\": [\"chat\", \"provider\", \"sdk\"]\n },\n {\n \"skill\": \"x-request\",\n \"name\": \"x-request\",\n \"version\": \"2.4.0\",\n \"desc\": \"Focus on explaining the practical configuration and usage of XRequest, providing accurate configuration instructions based on official documentation\",\n \"descZh\": \"专注讲解 XRequest 的实际配置和使用，基于官方文档提供准确的配置说明\",\n \"tags\": [\"request\", \"sdk\"]\n }\n ]\n },\n \"x-markdown\": {\n \"description\": \"Ant Design X Markdown rendering skill package, providing rich text rendering and chat enhancement features\",\n \"descriptionZh\": \"Ant Design X Markdown 渲染技能包，提供富文本渲染和对话增强功能\",\n \"skills\": [\n {\n \"skill\": \"x-markdown\",\n \"name\": \"x-markdown\",\n \"version\": \"2.4.0\",\n \"desc\": \"Use when building or reviewing Markdown rendering with @ant-design/x-markdown, including streaming Markdown, custom component mapping, plugins, themes, and chat-oriented rich content.\",\n \"descZh\": \"当任务涉及 @ant-design/x-markdown 的 Markdown 渲染、流式输出、自定义组件映射、插件、主题或聊天富内容展示时使用。\",\n \"tags\": [\"sdk\"]\n }\n ]\n }\n}\n" }, { "path": "packages/x-skill/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.base.json\",\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"paths\": {\n \"@ant-design/x-skill\": [\"src/*\"]\n }\n },\n \"include\": [\"**/*\"]\n}\n" }, { "path": "scripts/check-repo.ts", "content": "/* eslint-disable no-console */\nimport chalk from 'chalk';\nimport fs from 'fs';\nimport fetch from 'isomorphic-fetch';\nimport ora from 'ora';\nimport path from 'path';\nimport type { StatusResult } from 'simple-git';\nimport simpleGit from 'simple-git';\n\nconst cwd = process.cwd();\nconst git = simpleGit(cwd);\nconst spinner = ora('Loading unicorns').start('开始检查仓库状态');\n\nfunction exitProcess(code = 1) {\n console.log(''); // Keep an empty line here to make looks good~\n process.exit(code);\n}\n\nfunction getCurrentVersion() {\n const packageJsonPath = path.join(cwd, 'package.json');\n const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));\n return packageJson.version;\n}\n\nasync function checkVersion() {\n spinner.start('正在检查当前版本是否已经存在');\n const version = getCurrentVersion();\n\n type RaceUrlKey = 'x' | 'x-sdk' | 'x-markdown' | 'x-skill';\n const raceUrlObj: Record = {\n x: ['http://registry.npmjs.org/@ant-design/x', 'https://registry.npmmirror.com/@ant-design/x'],\n 'x-sdk': [\n 'http://registry.npmjs.org/@ant-design/x-sdk',\n 'https://registry.npmmirror.com/@ant-design/x-sdk',\n ],\n 'x-markdown': [\n 'http://registry.npmjs.org/@ant-design/x-markdown',\n 'https://registry.npmmirror.com/@ant-design/x-markdown',\n ],\n 'x-skill': [\n 'http://registry.npmjs.org/@ant-design/x-skill',\n 'https://registry.npmmirror.com/@ant-design/x-skill',\n ],\n };\n\n const argKey = process.argv.slice(2)[0] as RaceUrlKey;\n const raceUrl: string[] = argKey\n ? raceUrlObj[argKey]\n : Object.keys(raceUrlObj).reduce((raceUrls: string[], key) => {\n raceUrls.push(...(raceUrlObj?.[key as RaceUrlKey] || []));\n return raceUrls;\n }, []);\n\n // any of the urls return the data will be fine\n const promises = raceUrl.map((url) =>\n fetch(url)\n .then((res) => res.json())\n // Ignore the error\n .catch(() => new Promise(() => {})),\n );\n const { versions } = await Promise.race(promises);\n\n if (version in versions) {\n spinner.fail(\n chalk.yellow(\n `😈${argKey ? versions[version].name : ''} Current version already exists. Forget update package.json?`,\n ),\n );\n spinner.info(`${chalk.cyan(' => Current:')}: ${version}`);\n spinner.info(\n `${chalk.cyan(' => Todo:')}: update the x-mono package.json version and execute the command ${chalk.yellow('npm run publish-version')}`,\n );\n exitProcess();\n }\n spinner.succeed('版本检查通过');\n}\n\nasync function checkBranch({ current }: StatusResult) {\n spinner.start('正在检查当前分支是否合法');\n const version = getCurrentVersion();\n if (\n version.includes('-alpha.') ||\n version.includes('-beta.') ||\n version.includes('-rc.') ||\n version.includes('-experimental.')\n ) {\n spinner.info(chalk.cyan('😃 Alpha version. Skip branch check.'));\n } else if (current !== 'main') {\n spinner.fail(chalk.red('🤔 You are not in the main branch!'));\n exitProcess();\n }\n spinner.succeed('分支检查通过');\n}\n\nasync function checkCommit({ files }: StatusResult) {\n spinner.start('正在检查当前 git 状态');\n if (files.length) {\n spinner.fail(chalk.red('🙄 You forgot something to commit.'));\n files.forEach(({ path: filePath, working_dir: mark }) => {\n console.log(' -', chalk.red(mark), filePath);\n });\n exitProcess();\n }\n spinner.succeed('git 状态检查通过');\n}\n\nasync function checkRemote() {\n spinner.start('正在检查远程分支');\n const { remote } = await git.fetch('origin', 'main');\n if (!remote?.includes('ant-design/x')) {\n const { value } = await git.getConfig('remote.origin.url');\n if (!value?.includes('ant-design/x')) {\n spinner.fail(chalk.red('🧐 Your remote origin is not ant-design/x, did you fork it?'));\n exitProcess();\n }\n }\n spinner.succeed('远程分支检查通过');\n}\n\nexport default async function checkRepo() {\n const status = await git.status();\n await checkVersion();\n await checkBranch(status);\n await checkCommit(status);\n await checkRemote();\n}\n" }, { "path": "scripts/pre-publish.ts", "content": "/* eslint-disable camelcase, no-async-promise-executor */\nimport runScript from '@npmcli/run-script';\nimport chalk from 'chalk';\nimport Spinnies from 'spinnies';\nimport checkRepo from './check-repo';\n\nconst { Notification: Notifier } = require('node-notifier');\nconst simpleGit = require('simple-git');\n\nconst spinner = { interval: 80, frames: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'] };\nconst spinnies = new Spinnies({ spinner });\n\nlet spinniesId = 0;\n\n// `spinnies` 为按条目进度，需要做简单的封装变成接近 `ora` 的形态\nconst showMessage = (\n message: string,\n status?: 'succeed' | 'fail' | 'spinning' | 'non-spinnable' | 'stopped' | true,\n uniqueTitle?: string,\n) => {\n if (!status) {\n spinnies.add(`info-${spinniesId}`, {\n text: message,\n status: 'non-spinnable',\n });\n spinniesId += 1;\n } else {\n const mergedId = uniqueTitle || `msg-${spinniesId}`;\n let mergedMessage = uniqueTitle ? `${uniqueTitle} ${message}` : message;\n\n // `spinnies` 对中文支持有 bug，长度会按中文一半计算。我们翻个倍修复一下。\n mergedMessage = `${mergedMessage}${' '.repeat(mergedMessage.length)}`;\n\n const existSpinner = spinnies.pick(mergedId);\n if (!existSpinner) {\n spinnies.add(mergedId, {\n text: '',\n });\n }\n\n if (status === 'succeed' || status === 'fail' || status === 'stopped') {\n spinnies.update(mergedId, {\n text: mergedMessage,\n status,\n });\n spinniesId += 1;\n } else {\n spinnies.update(mergedId, {\n text: mergedMessage,\n status: status === true ? 'spinning' : status,\n });\n }\n }\n};\n\nprocess.on('SIGINT', () => {\n process.exit(1);\n});\n\nconst runPrePublish = async () => {\n await checkRepo();\n\n const git = simpleGit();\n const { current: currentBranch } = await git.branch();\n\n // 本地-远程分支同步\n showMessage(`正在拉取远程分支 ${currentBranch}`, true);\n await git.pull('origin', currentBranch);\n showMessage(`成功拉取远程分支 ${currentBranch}`, 'succeed');\n showMessage(`正在推送本地分支 ${currentBranch}`, true);\n await git.push('origin', currentBranch);\n showMessage(`成功推送远程分支 ${currentBranch}`, 'succeed');\n showMessage(`已经和远程分支保持同步 ${currentBranch}`, 'succeed');\n\n const { latest } = await git.log();\n const sha = process.env.TARGET_SHA || latest.hash;\n\n // 最后一次 commit 信息\n showMessage(`找到本地最新 commit:`, 'succeed');\n showMessage(chalk.cyan(` hash: ${sha}`));\n showMessage(chalk.cyan(` date: ${latest.date}`));\n showMessage(chalk.cyan(` message: ${latest.message}`));\n showMessage(chalk.cyan(` author_name: ${latest.author_name}`));\n\n // clean up\n await runScript({ event: 'clean', path: '.', stdio: 'inherit' });\n showMessage(`成功清理构建产物目录`, 'succeed');\n\n // CI\n\n // const workspacePath = `${path.join(__dirname, process.argv.slice(2)?.[0])}` || '.';\n\n showMessage(`[CI] 正在执行 lint`, true);\n await runScript({ event: 'lint', path: '.', stdio: 'inherit' });\n showMessage(`[CI] lint 执行成功`, 'succeed');\n showMessage(`[CI] 正在执行 compile`, true);\n await runScript({ event: 'compile', path: '.', stdio: 'inherit' });\n showMessage(`[CI] compile 执行成功`, 'succeed');\n showMessage(`[CI] 正在执行 test`, true);\n await runScript({ event: 'test', path: '.', stdio: 'inherit' });\n showMessage(`[CI] test 执行成功`, 'succeed');\n\n await runScript({ event: 'test:dekko', path: '.', stdio: 'inherit' });\n await runScript({ event: 'test:package-diff', path: '.', stdio: 'inherit' });\n showMessage(`文件检查通过，准备发布！`, 'succeed');\n\n new Notifier().notify({\n title: '✅ 准备发布到 npm',\n message: '产物已经准备好了，快回来输入 npm 校验码了！',\n sound: 'Crystal',\n });\n process.exit(0);\n};\n\nrunPrePublish();\n" }, { "path": "scripts/synchronize-version.ts", "content": "import chalk from 'chalk';\nimport { execSync } from 'child_process';\nimport fs from 'fs-extra';\nimport ora from 'ora';\nimport path from 'path';\n\nfunction exitProcess(code = 1) {\n process.exit(code);\n}\nconst spinner = ora('Loading unicorns').start('开始同步版本');\nexport default async function synchronizeVersion() {\n spinner.start('正在执行版本更新...');\n\n spinner.start('正在同步发布版本');\n const baseDir = path.join(process.cwd(), './packages');\n const { version: publishVersion } = await fs.readJSON(path.join(process.cwd(), './package.json'));\n if (publishVersion) {\n const dirs = fs.readdirSync(baseDir);\n for (const dir of dirs) {\n const result = path.join(baseDir, dir);\n const stat = await fs.stat(result);\n\n if (stat.isDirectory()) {\n const subPath = `${baseDir}/${dir}/package.json`;\n if (fs.existsSync(subPath)) {\n const package_json = await fs.readJson(subPath);\n package_json.version = publishVersion;\n\n fs.writeJsonSync(subPath, package_json, { spaces: 2, encoding: 'utf-8' });\n\n spinner.succeed(`${dir} 同步版本成功!`);\n } else {\n spinner.info(`${dir} 目录没有 package.json，跳过`);\n }\n }\n }\n\n // 同步版本后再执行 npm run version\n try {\n execSync('npm run version', { stdio: 'inherit' });\n spinner.succeed('npm run version 执行成功!');\n } catch (_error) {\n spinner.fail(chalk.red('执行 npm run version 失败!'));\n exitProcess();\n }\n } else {\n spinner.fail(chalk.red('🤔 同步发布版本失败!'));\n exitProcess();\n }\n}\n\nsynchronizeVersion();\n" }, { "path": "tsconfig.base.json", "content": "{\n \"compilerOptions\": {\n \"declaration\": true,\n \"strict\": true,\n \"strictNullChecks\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"Bundler\",\n \"esModuleInterop\": true,\n \"experimentalDecorators\": true,\n \"jsx\": \"react\",\n \"jsxFactory\": \"React.createElement\",\n \"jsxFragmentFactory\": \"React.Fragment\",\n \"noUnusedParameters\": true,\n \"noUnusedLocals\": true,\n \"noImplicitAny\": true,\n \"target\": \"es2020\",\n \"lib\": [\"dom\", \"es2020\"],\n \"skipLibCheck\": true,\n \"stripInternal\": true,\n \"resolvePackageJsonExports\": true\n },\n \"exclude\": [\"**/node_modules\", \"**/examples\", \"**/dist\"]\n}\n" }, { "path": "tsconfig.json", "content": "{\n \"extends\": \"./tsconfig.base.json\",\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"*\"]\n }\n }\n}\n" } ]