),
@@ -140,8 +140,8 @@ const DesignFramework: React.FC = () => {
),
diff --git a/.dumi/pages/index/components/DesignGuide.tsx b/.dumi/pages/index/components/DesignGuide.tsx
index c70c1d43..0be502c7 100644
--- a/.dumi/pages/index/components/DesignGuide.tsx
+++ b/.dumi/pages/index/components/DesignGuide.tsx
@@ -193,7 +193,7 @@ const DesignGuide: React.FC = () => {
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice',
},
- path: 'https://mdn.alipayobjects.com/huamei_k0vkmw/afts/file/A*OfRbQKvPpWcAAAAAAAAAAAAADsR-AQ',
+ path: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*OjRsQZWTEcQAAAAAAAAAAAAADgCCAQ',
});
React.useEffect(() => {
diff --git a/.dumi/pages/index/components/MainBanner.tsx b/.dumi/pages/index/components/MainBanner.tsx
index ce0f3af3..ba02266b 100644
--- a/.dumi/pages/index/components/MainBanner.tsx
+++ b/.dumi/pages/index/components/MainBanner.tsx
@@ -33,6 +33,7 @@ const useStyle = createStyles(({ token, css }) => {
banner: css`
width: 100vw;
height: calc(100vh - 160px);
+ min-height: 600px;
display: flex;
justify-content: center;
align-items: center;
@@ -50,6 +51,8 @@ const useStyle = createStyles(({ token, css }) => {
height: 100%;
max-height: calc(100vh - ${token.headerHeight * 2}px);
position: relative;
+
+
`,
title: css`
max-width: ${minBannerWidth}px;
@@ -58,6 +61,14 @@ const useStyle = createStyles(({ token, css }) => {
inset-inline-start: 0;
transform: translateY(-50%);
z-index: 1;
+
+ @media only screen and (max-width: ${token.mobileMaxWidth}px) {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
`,
lottie: css`
position: absolute;
@@ -216,7 +227,7 @@ const MainBanner: React.FC = () => {
rendererSettings: {
preserveAspectRatio: 'xMidYMid meet',
},
- path: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*vhF2TLUKM5YAAAAAAAAAAAAADgCCAQ',
+ path: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*oI6rQbj2NA0AAAAAAAAAAAAADgCCAQ',
});
React.useEffect(() => {
diff --git a/.dumi/pages/index/components/SceneIntroduction/index.tsx b/.dumi/pages/index/components/SceneIntroduction/index.tsx
index 09159956..57f01786 100644
--- a/.dumi/pages/index/components/SceneIntroduction/index.tsx
+++ b/.dumi/pages/index/components/SceneIntroduction/index.tsx
@@ -68,11 +68,12 @@ const useStyle = createStyles(({ token, css }) => {
gap: ${token.margin}px;
`,
tab_content: css`
- width: 886px;
+ width: 890px;
height: 600px;
box-sizing: border-box;
- background-image: url(https://mdn.alipayobjects.com/huamei_k0vkmw/afts/img/A*9lNZQrgQIikAAAAAAAAAAAAADsR-AQ/original);
+ background-image: url(https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*RxJMSbQRvTUAAAAAAAAAAAAADgCCAQ/fmt.avif);
background-repeat: no-repeat;
+ background-size: cover;
z-index: 2;
`,
item: css`
diff --git a/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx b/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx
index 387bc284..74432c15 100644
--- a/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx
+++ b/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx
@@ -41,6 +41,10 @@ const useStyle = createStyles(({ token, css }) => ({
`,
copyTip: css`
color: ${token.colorTextTertiary};
+ border: none;
+ background: transparent;
+ padding: 0;
+ cursor: pointer;
`,
copiedTip: css`
.anticon {
diff --git a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
index 0be3e539..1f0587b1 100644
--- a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
+++ b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
@@ -1,5 +1,5 @@
import { BugOutlined } from '@ant-design/icons';
-import { Drawer, Grid, Popover, Timeline, Typography } from 'antd';
+import { Button, Drawer, Flex, Grid, Popover, Tag, Timeline, Typography } from 'antd';
import type { TimelineItemProps } from 'antd';
import { createStyles } from 'antd-style';
import React, { cloneElement, isValidElement } from 'react';
@@ -35,6 +35,11 @@ function matchDeprecated(v: string): MatchDeprecatedResult {
}
const useStyle = createStyles(({ token, css }) => ({
+ listWrap: css`
+ > li {
+ line-height: 2;
+ }
+ `,
linkRef: css`
margin-inline-start: ${token.marginXS}px;
`,
@@ -71,15 +76,30 @@ const useStyle = createStyles(({ token, css }) => ({
position: 'relative',
[`> ${token.antCls}-drawer-body`]: {
scrollbarWidth: 'thin',
- scrollbarColor: 'unset',
+ scrollbarGutter: 'stable',
},
},
+ versionWrap: css`
+ margin-bottom: 1em;
+ `,
+ versionTitle: css`
+ height: 28px;
+ line-height: 28px;
+ font-weight: 600;
+ font-size: 20px;
+ margin: 0 !important;
+ `,
+ versionTag: css`
+ user-select: none;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ &:last-child {
+ margin-inline-end: 0;
+ }
+ `,
}));
-export interface ComponentChangelogProps {
- children?: React.ReactNode;
-}
-
const locales = {
cn: {
full: '查看完整日志',
@@ -109,8 +129,9 @@ const ParseChangelog: React.FC<{ changelog: string }> = (props) => {
for (let i = 0; i < changelog.length; i += 1) {
const char = changelog[i];
+ const isDoubleAsterisk = char === '*' && changelog[i + 1] === '*';
- if (char !== '`' && char !== '*') {
+ if (char !== '`' && !isDoubleAsterisk) {
lastStr += char;
} else {
let node: React.ReactNode = lastStr;
@@ -124,7 +145,7 @@ const ParseChangelog: React.FC<{ changelog: string }> = (props) => {
lastStr = '';
if (char === '`') {
isQuota = !isQuota;
- } else if (char === '*' && changelog[i + 1] === '*') {
+ } else if (isDoubleAsterisk) {
isBold = !isBold;
i += 1; // Skip the next '*'
}
@@ -136,33 +157,36 @@ const ParseChangelog: React.FC<{ changelog: string }> = (props) => {
return nodes;
}, [changelog]);
+ return
+
+
+);
+```
+
+## use openai API
+
+参考 [Compatible OpenAI](/docs/react/model-use-qwen)
diff --git a/docs/react/model-use-openai.zh-CN.md b/docs/react/model-use-openai.zh-CN.md
new file mode 100644
index 00000000..05a0ebdf
--- /dev/null
+++ b/docs/react/model-use-openai.zh-CN.md
@@ -0,0 +1,58 @@
+---
+group:
+ title: 模型接入
+title: OpenAI
+order: 0
+---
+
+通常情况 openai-node 用于 node 环境，如果在浏览器环境使用，需要开启 `dangerouslyAllowBrowser`。
+
+## 使用 openai-node 流式调用示例
+
+```tsx
+import { useXAgent, useXChat, Sender } from '@ant-design/x';
+import OpenAI from 'openai';
+
+const client = new OpenAI({
+ apiKey: process.env['OPENAI_API_KEY'],
+ dangerouslyAllowBrowser: true,
+});
+
+// react env ...
+const [agent] = useXAgent({
+ request: async (info, callbacks) => {
+ const stream = await client.chat.completions.create({
+ model: 'gpt-4o',
+ messages: [{ role: 'user', content: 'Say this is a test' }],
+ stream: true,
+ });
+
+ for await (const chunk of stream) {
+ // 调用回调
+ callbacks.onUpdate(chunk.choices[0]?.delta?.content || '');
+ }
+ },
+});
+
+const {
+ // 用于发起对话请求
+ onRequest,
+ // 用于绑定视图
+ messages,
+} = useXChat({ agent });
+
+const items = messages.map((i) => ({
+ content: message,
+}));
+
+return (
+
+
+);
+```
+
+## 使用 openai API 调用
+
+参考 [接入兼容 OpenAI 的模型推理服务](/docs/react/model-use-qwen-cn)
diff --git a/docs/react/model-use-other.en-US.md b/docs/react/model-use-other.en-US.md
new file mode 100644
index 00000000..1e8f202c
--- /dev/null
+++ b/docs/react/model-use-other.en-US.md
@@ -0,0 +1,46 @@
+---
+group:
+ title: Model Integration
+title: Others
+order: 2
+---
+
+Currently, there is no standard protocol defining a "model interface specification," which can lead to compatibility issues between different protocols.
+
+To address this, **X** provides tools to help developers resolve protocol compatibility issues.
+
+## Stream Parsing Tool
+
+`XStream` parses `ReadableStream` data using the SSE protocol by default.
+
+```tsx
+import { XStream } from '@ant-design/x';
+
+async function request() {
+ const response =
+ await fetch();
+ // ...
+ // .....
+
+ for await (const chunk of XStream({
+ readableStream: response.body,
+ })) {
+ // Your protocol
+ console.log(chunk);
+ }
+}
+```
+
+## Request Tool
+
+`XRequest` allows you to pass a custom `fetch` function for request customization.
+
+```tsx
+import { XRequest } from '@ant-design/x';
+
+const request = XRequest({
+ fetch: yourFetchFn,
+});
+
+request.create();
+```
diff --git a/docs/react/model-use-other.zh-CN.md b/docs/react/model-use-other.zh-CN.md
new file mode 100644
index 00000000..e6d8f8d4
--- /dev/null
+++ b/docs/react/model-use-other.zh-CN.md
@@ -0,0 +1,46 @@
+---
+group:
+ title: 模型接入
+title: 其他
+order: 2
+---
+
+直到目前，没有标准的协议定义「模型接口规范」，所以会存在协议不兼容的问题。
+
+为此 X 也提供了对应的工具帮助开发者**解决协议兼容**的问题。
+
+## 流解析工具
+
+`XStream` 默认将 ReadableStream 以 SSE 数据协议进行解析。
+
+```tsx
+import { XStream } from '@ant-design/x';
+
+async function request() {
+ const response =
+ await fetch();
+ // ...
+ // .....
+
+ for await (const chunk of XStream({
+ readableStream: response.body,
+ })) {
+ // 你的协议
+ console.log(chunk);
+ }
+}
+```
+
+## 请求工具
+
+`XRequest` 支持传入一个 `fetch` 函数，做请求定制。
+
+```tsx
+import { XRequest } from '@ant-design/x';
+
+const request = XRequest({
+ fetch: yourFetchFn,
+});
+
+request.create();
+```
diff --git a/docs/react/model-use-qwen.en-US.md b/docs/react/model-use-qwen.en-US.md
new file mode 100644
index 00000000..55d3bfbd
--- /dev/null
+++ b/docs/react/model-use-qwen.en-US.md
@@ -0,0 +1,106 @@
+---
+group:
+ title: Model Integration
+title: Qwen
+order: 1
+---
+
+Tongyi Qianwen provides model inference services compatible with OpenAI.
+[Alibaba Cloud - Tongyi Qianwen](https://help.aliyun.com/zh/dashscope/developer-reference/compatibility-of-openai-with-dashscope?spm=a2c4g.11186623.0.i10)
+
+## What is a "Service Compatible with OpenAI Models"?
+
+It refers to a model inference service whose interface design and usage are consistent with OpenAI's API.
+
+This means developers can use the same code and methods as they would for OpenAI models to interact with these compatible services, significantly reducing integration costs.
+
+## Method 1: Using `useXAgent`
+
+This method is **a ready-to-use solution for React environments** provided by Ant Design X.
+
+```tsx
+import { useXAgent } from '@ant-design/x';
+
+// ... react env
+const [agent] = useXAgent({
+ baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
+ model: 'qwen-plus',
+ // Use cautiously in production!
+ dangerouslyApiKey: 'DASHSCOPE_API_KEY',
+});
+
+function request() {
+ agent.request(
+ {
+ // Conversation messages
+ messages: [
+ {
+ role: 'user',
+ content: 'Hello',
+ },
+ ],
+ // Enable streaming
+ stream: true,
+ },
+ {
+ // Success callback
+ onSuccess: (sseChunks) => {
+ // Triggered when the request completes
+ // This will contain the parsed sseChunks
+ },
+ onError: (error) => {
+ // Triggered in case of an error
+ },
+ onUpdate: (sse) => {
+ // Triggered during stream updates
+ // This will contain the parsed SSE object
+ },
+ },
+ );
+}
+```
+
+## Method 2: Using `XRequest`
+
+This method is **a ready-to-use solution for JavaScript environments** provided by Ant Design X.
+
+```tsx
+import { XRequest } from '@ant-design/x';
+
+const xRequest = XRequest({
+ baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
+ model: 'qwen-plus',
+ // Use cautiously in production!
+ dangerouslyApiKey: 'DASHSCOPE_API_KEY',
+});
+
+function request() {
+ xRequest.create(
+ {
+ // Conversation messages
+ messages: [
+ {
+ role: 'user',
+ content: 'Hello',
+ },
+ ],
+ // Enable streaming
+ stream: true,
+ },
+ {
+ // Success callback
+ onSuccess: (sseChunks) => {
+ // Triggered when the request completes
+ // This will contain the parsed sseChunks
+ },
+ onError: (error) => {
+ // Triggered in case of an error
+ },
+ onUpdate: (sse) => {
+ // Triggered during stream updates
+ // This will contain the parsed SSE object
+ },
+ },
+ );
+}
+```
diff --git a/docs/react/model-use-qwen.zh-CN.md b/docs/react/model-use-qwen.zh-CN.md
new file mode 100644
index 00000000..abda1fbc
--- /dev/null
+++ b/docs/react/model-use-qwen.zh-CN.md
@@ -0,0 +1,105 @@
+---
+group:
+ title: 模型接入
+title: 通义千问
+order: 1
+---
+
+通义千问提供了兼容 OpenAI 的模型推理服务。[阿里云 - 通义千问](https://help.aliyun.com/zh/dashscope/developer-reference/compatibility-of-openai-with-dashscope?spm=a2c4g.11186623.0.i10)
+
+## 什么是「兼容 OpenAI 的模型」？
+
+是指在接口设计和使用方式上与 OpenAI 的 API 保持一致的模型推理服务。
+
+这意味着开发者可以使用与调用 OpenAI 模型相同的代码和方法，来调用这些兼容服务，从而减少开发接入成本。
+
+## 方式一: 使用 useXAgent
+
+该方式是 Ant Dssign X 提供的 **在 React 环境下开箱即用的使用方式**。
+
+```tsx
+import { useXAgent } from '@ant-design/x';
+
+// ... react env
+const [agent] = useXAgent({
+ baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
+ model: 'qwen-plus',
+ // 请谨慎在生产环境使用！
+ dangerouslyApiKey: 'DASHSCOPE_API_KEY',
+});
+
+function request() {
+ agent.request(
+ {
+ // 对话消息
+ messages: [
+ {
+ role: 'user',
+ content: 'Hello',
+ },
+ ],
+ // 是否流式渲染
+ stream: true,
+ },
+ {
+ // 成功回调
+ onSuccess: (sseChunks) => {
+ // 在请求完成时触发
+ // 这里将得到已经解析好的 sseChunks
+ },
+ onError: (error) => {
+ // 在请求异常时触发
+ },
+ onUpdate: (sse) => {
+ // 在流更新时触发
+ // 这里将得到已经解析好的 sse 对象
+ },
+ },
+ );
+}
+```
+
+## 方式二: 使用 XRequest
+
+该方式是 Ant Dssign X 提供的 **在 JS 环境下开箱即用的使用方式**。
+
+```tsx
+import { XRequest } from '@ant-design/x';
+
+const xRequest = XRequest({
+ baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
+ model: 'qwen-plus',
+ // 请谨慎在生产环境使用！
+ dangerouslyApiKey: 'DASHSCOPE_API_KEY',
+});
+
+function request() {
+ xRequest.create(
+ {
+ // 对话消息
+ messages: [
+ {
+ role: 'user',
+ content: 'Hello',
+ },
+ ],
+ // 是否流式渲染
+ stream: true,
+ },
+ {
+ // 成功回调
+ onSuccess: (sseChunks) => {
+ // 在请求完成时触发
+ // 这里将得到已经解析好的 sseChunks
+ },
+ onError: (error) => {
+ // 在请求异常时触发
+ },
+ onUpdate: (sse) => {
+ // 在流更新时触发
+ // 这里将得到已经解析好的 sse 对象
+ },
+ },
+ );
+}
+```
diff --git a/docs/spec/authentic-consistent.en-US.md b/docs/spec/authentic-consistent.en-US.md
index 6c632e85..8f3959cb 100644
--- a/docs/spec/authentic-consistent.en-US.md
+++ b/docs/spec/authentic-consistent.en-US.md
@@ -8,58 +8,74 @@ title: 真实一致
-