docs: update model use (#199)

* docs: update img url

* docs: update model-use-openai

* docs: update model-use

* docs: update use openai

* fix: useXAgent set dangerouslyApiKey to XRequest

* feat: ip lottie update

* docs: fix RICH introduce

* docs: fix define-intention-type

* docs: fix md formatting issues

* docs: fix img url

* docs: fix main banner style

 - #201
 - #202

.dumi/pages/index/components/DesignFramework.tsx

@@ -109,8 +109,8 @@ const DesignFramework: React.FC = () => {
           <img
             loading="lazy"
             alt="thumbnails"
-            style={{ width: 227 }}
-            src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*AhrTT6K2vU0AAAAAAAAAAAAADgCCAQ/fmt.webp"
+            style={{ width: 261 }}
+            src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*poTnSZrI7-oAAAAAAAAAAAAADgCCAQ/fmt.webp"
           />
         </div>
       ),
@@ -140,8 +140,8 @@ const DesignFramework: React.FC = () => {
           <img
             loading="lazy"
             alt="thumbnails"
-            style={{ width: 261 }}
-            src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*poTnSZrI7-oAAAAAAAAAAAAADgCCAQ/fmt.webp"
+            style={{ width: 227 }}
+            src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*AhrTT6K2vU0AAAAAAAAAAAAADgCCAQ/fmt.webp"
           />
         </div>
       ),

.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(() => {

.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(() => {

.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`

components/useXAgent/index.ts

@@ -91,6 +91,7 @@ export default function useXAgent<Message = string>(config: XAgentConfig<Message
             XRequest({
               baseURL: restConfig.baseURL!,
               model: restConfig.model,
+              dangerouslyApiKey: restConfig.dangerouslyApiKey,
             }).create,
           ...restConfig,
         }),

docs/react/model-use-openai.en-US.md

@@ -0,0 +1,58 @@
+---
+group:
+  title: Model Integration
+title: OpenAI
+order: 0
+---
+
+Typically, `openai-node` is used in Node.js environments. If you need to use it in a browser environment, you must enable `dangerouslyAllowBrowser`.
+
+## Example of Streaming Requests with `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 environment setup
+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) {
+      // Trigger the callback
+      callbacks.onUpdate(chunk.choices[0]?.delta?.content || '');
+    }
+  },
+});
+
+const {
+  // Used to initiate conversation requests
+  onRequest,
+  // Used to bind the view
+  messages,
+} = useXChat({ agent });
+
+const items = messages.map((message) => ({
+  content: message,
+}));
+
+return (
+  <div>
+    <Bubble.List items={items} />
+    <Sender onSubmit={onRequest} />
+  </div>
+);
+```
+
+## use openai API
+
+参考 [Compatible OpenAI](/docs/react/model-use-qwen)

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 (
+  <div>
+    <Bubble.List items={items} />
+    <Sender onSubmit={onRequest} />
+  </div>
+);
+```
+
+## 使用 openai API 调用
+
+参考 [接入兼容 OpenAI 的模型推理服务](/docs/react/model-use-qwen-cn)

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();
+```

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();
+```