refactor(api-access): refactor code group (#24565)

Refactor CodeGroup component on the API Access page.
Fix example tab switching.
This commit is contained in:
Nite Knite
2025-08-26 18:25:08 +08:00
committed by GitHub
parent 58165c3951
commit a2598fd134
13 changed files with 2388 additions and 2676 deletions

View File

@@ -7,10 +7,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
<div>
### 基础 URL
<CodeGroup title="Code" targetCode={props.appDetail.api_base_url}>
```javascript
```
</CodeGroup>
<CodeGroup title="Code" targetCode={props.appDetail.api_base_url} />
### 鉴权
@@ -19,11 +16,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
<i>**强烈建议开发者把 `API-Key` 放在后端存储,而非分享或者放在客户端存储,以免 `API-Key` 泄露,导致财产损失。**</i>
所有 API 请求都应在 **`Authorization`** HTTP Header 中包含您的 `API-Key`,如下所示:
<CodeGroup title="Code">
```javascript
Authorization: Bearer {API_KEY}
```
</CodeGroup>
<CodeGroup title="Code" targetCode='Authorization: Bearer {API_KEY}' />
</div>
---
@@ -142,21 +135,19 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
</Col>
<Col sticky>
<CodeGroup title="Request" tag="POST" label="/completion-messages" targetCode={`curl -X POST '${props.appDetail.api_base_url}/completion-messages' \\\n--header 'Authorization: Bearer {api_key}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n "inputs": {"query": "Hello, world!"},\n "response_mode": "streaming",\n "user": "abc-123"\n}'\n`}>
```bash {{ title: 'cURL' }}
curl -X POST '${props.appDetail.api_base_url}/completion-messages' \
--header 'Authorization: Bearer {api_key}' \
--header 'Content-Type: application/json' \
--data-raw '{
"inputs": {
"query": "Hello, world!"
},
"response_mode": "streaming",
"user": "abc-123"
}'
```
</CodeGroup>
<CodeGroup
title="Request"
tag="POST"
label="/completion-messages"
targetCode={`curl -X POST '${props.appDetail.api_base_url}/completion-messages' \\
--header 'Authorization: Bearer {api_key}' \\
--header 'Content-Type: application/json' \\
--data-raw '{
"inputs": {"query": "Hello, world!"},
"response_mode": "streaming",
"user": "abc-123"
}'`}
/>
### blocking
<CodeGroup title="Response">
```json {{ title: 'Response' }}
@@ -226,15 +217,15 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
</Col>
<Col sticky>
<CodeGroup title="Request" tag="POST" label="/files/upload" targetCode={`curl -X POST '${props.appDetail.api_base_url}/files/upload' \\\n--header 'Authorization: Bearer {api_key}' \\\n--form 'file=@localfile;type=image/[png|jpeg|jpg|webp|gif]' \\\n--form 'user=abc-123'`}>
```bash {{ title: 'cURL' }}
curl -X POST '${props.appDetail.api_base_url}/files/upload' \
--header 'Authorization: Bearer {api_key}' \
--form 'file=@"/path/to/file"'
```
</CodeGroup>
<CodeGroup
title="Request"
tag="POST"
label="/files/upload"
targetCode={`curl -X POST '${props.appDetail.api_base_url}/files/upload' \\
--header 'Authorization: Bearer {api_key}' \\
--form 'file=@localfile;type=image/[png|jpeg|jpg|webp|gif]' \\
--form 'user=abc-123'`}
/>
<CodeGroup title="Response">
```json {{ title: 'Response' }}
@@ -262,7 +253,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
<Row>
<Col>
预览或下载已上传的文件。此端点允许您访问先前通过文件上传 API 上传的文件。
<i>文件只能在属于请求应用程序的消息范围内访问。</i>
### 路径参数
@@ -290,25 +281,23 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
</Col>
<Col sticky>
### 请求示例
<CodeGroup title="Request" tag="GET" label="/files/:file_id/preview" targetCode={`curl -X GET '${props.appDetail.api_base_url}/files/72fa9618-8f89-4a37-9b33-7e1178a24a67/preview' \\\n--header 'Authorization: Bearer {api_key}'`}>
```bash {{ title: 'cURL' }}
curl -X GET '${props.appDetail.api_base_url}/files/72fa9618-8f89-4a37-9b33-7e1178a24a67/preview' \
--header 'Authorization: Bearer {api_key}'
```
</CodeGroup>
<CodeGroup
title="Request"
tag="GET"
label="/files/:file_id/preview"
targetCode={`curl -X GET '${props.appDetail.api_base_url}/files/72fa9618-8f89-4a37-9b33-7e1178a24a67/preview' \\
--header 'Authorization: Bearer {api_key}'`}
/>
### 作为附件下载
<CodeGroup title="下载请求" tag="GET" label="/files/:file_id/preview?as_attachment=true" targetCode={`curl -X GET '${props.appDetail.api_base_url}/files/72fa9618-8f89-4a37-9b33-7e1178a24a67/preview?as_attachment=true' \\\n--header 'Authorization: Bearer {api_key}' \\\n--output downloaded_file.png`}>
```bash {{ title: 'cURL' }}
curl -X GET '${props.appDetail.api_base_url}/files/72fa9618-8f89-4a37-9b33-7e1178a24a67/preview?as_attachment=true' \
--header 'Authorization: Bearer {api_key}' \
--output downloaded_file.png
```
</CodeGroup>
<CodeGroup
title="下载请求"
tag="GET"
label="/files/:file_id/preview?as_attachment=true"
targetCode={`curl -X GET '${props.appDetail.api_base_url}/files/72fa9618-8f89-4a37-9b33-7e1178a24a67/preview?as_attachment=true' \\
--header 'Authorization: Bearer {api_key}' \\
--output downloaded_file.png`}
/>
### 响应标头示例
<CodeGroup title="Response Headers">
@@ -351,17 +340,15 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
- `result` (string) 固定返回 success
</Col>
<Col sticky>
<CodeGroup title="Request" tag="POST" label="/completion-messages/:task_id/stop" targetCode={`curl -X POST '${props.appDetail.api_base_url}/completion-messages/:task_id/stop' \\\n-H 'Authorization: Bearer {api_key}' \\\n-H 'Content-Type: application/json' \\\n--data-raw '{ "user": "abc-123"}'`}>
```bash {{ title: 'cURL' }}
curl -X POST '${props.appDetail.api_base_url}/completion-messages/:task_id/stop' \
-H 'Authorization: Bearer {api_key}' \
-H 'Content-Type: application/json' \
--data-raw '{
"user": "abc-123"
}'
```
</CodeGroup>
<CodeGroup
title="Request"
tag="POST"
label="/completion-messages/:task_id/stop"
targetCode={`curl -X POST '${props.appDetail.api_base_url}/completion-messages/:task_id/stop' \\
-H 'Authorization: Bearer {api_key}' \\
-H 'Content-Type: application/json' \\
--data-raw '{ "user": "abc-123"}'`}
/>
<CodeGroup title="Response">
```json {{ title: 'Response' }}
@@ -410,20 +397,19 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
</Col>
<Col sticky>
<CodeGroup title="Request" tag="POST" label="/messages/:message_id/feedbacks" targetCode={`curl -X POST '${props.appDetail.api_base_url}/messages/:message_id/feedbacks \\\n--header 'Authorization: Bearer {api_key}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n "rating": "like",\n "user": "abc-123",\n "content": "message feedback information"\n}'`}>
```bash {{ title: 'cURL' }}
curl -X POST '${props.appDetail.api_base_url}/messages/:message_id/feedbacks' \
--header 'Authorization: Bearer {api_key}' \
--header 'Content-Type: application/json' \
--data-raw '{
"rating": "like",
"user": "abc-123",
"content": "message feedback information"
}'
```
</CodeGroup>
<CodeGroup
title="Request"
tag="POST"
label="/messages/:message_id/feedbacks"
targetCode={`curl -X POST '${props.appDetail.api_base_url}/messages/:message_id/feedbacks \\
--header 'Authorization: Bearer {api_key}' \\
--header 'Content-Type: application/json' \\
--data-raw '{
"rating": "like",
"user": "abc-123",
"content": "message feedback information"
}'`}
/>
<CodeGroup title="Response">
```json {{ title: 'Response' }}
@@ -464,15 +450,12 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
</Col>
<Col sticky>
<CodeGroup title="Request" tag="GET" label="/app/feedbacks" targetCode={`curl -X GET '${props.appDetail.api_base_url}/app/feedbacks?page=1&limit=20'`}>
```bash {{ title: 'cURL' }}
curl -X GET '${props.appDetail.api_base_url}/app/feedbacks?page=1&limit=20' \
--header 'Authorization: Bearer {api_key}' \
--header 'Content-Type: application/json'
```
</CodeGroup>
<CodeGroup
title="Request"
tag="GET"
label="/app/feedbacks"
targetCode={`curl -X GET '${props.appDetail.api_base_url}/app/feedbacks?page=1&limit=20'`}
/>
<CodeGroup title="Response">
```json {{ title: 'Response' }}
@@ -525,21 +508,19 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
</Col>
<Col sticky>
<CodeGroup title="Request" tag="POST" label="/text-to-audio" targetCode={`curl -o text-to-audio.mp3 -X POST '${props.appDetail.api_base_url}/text-to-audio' \\\n--header 'Authorization: Bearer {api_key}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n "message_id": "5ad4cb98-f0c7-4085-b384-88c403be6290",\n "text": "你好Dify",\n "user": "abc-123"\n}'`}>
```bash {{ title: 'cURL' }}
curl -o text-to-audio.mp3 -X POST '${props.appDetail.api_base_url}/text-to-audio' \
--header 'Authorization: Bearer {api_key}' \
--header 'Content-Type: application/json' \
--data-raw '{
"message_id": "5ad4cb98-f0c7-4085-b384-88c403be6290",
"text": "你好Dify",
"user": "abc-123",
"streaming": false
}'
```
</CodeGroup>
<CodeGroup
title="Request"
tag="POST"
label="/text-to-audio"
targetCode={`curl -o text-to-audio.mp3 -X POST '${props.appDetail.api_base_url}/text-to-audio' \\
--header 'Authorization: Bearer {api_key}' \\
--header 'Content-Type: application/json' \\
--data-raw '{
"message_id": "5ad4cb98-f0c7-4085-b384-88c403be6290",
"text": "你好Dify",
"user": "abc-123"
}'`}
/>
<CodeGroup title="headers">
```json {{ title: 'headers' }}
@@ -569,12 +550,13 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
- 'author_name' (string) 作者名称
</Col>
<Col>
<CodeGroup title="Request" tag="GET" label="/info" targetCode={`curl -X GET '${props.appDetail.api_base_url}/info' \\\n-H 'Authorization: Bearer {api_key}'`}>
```bash {{ title: 'cURL' }}
curl -X GET '${props.appDetail.api_base_url}/info' \
-H 'Authorization: Bearer {api_key}'
```
</CodeGroup>
<CodeGroup
title="Request"
tag="GET"
label="/info"
targetCode={`curl -X GET '${props.appDetail.api_base_url}/info' \\
-H 'Authorization: Bearer {api_key}'`}
/>
<CodeGroup title="Response">
```json {{ title: 'Response' }}
{
@@ -632,30 +614,30 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
- `default` (string) 默认值
- `options` (array[string]) 选项值
- `file_upload` (object) 文件上传配置
- `document` (object) 文档设置
当前仅支持文档类型:`txt`, `md`, `markdown`, `pdf`, `html`, `xlsx`, `xls`, `docx`, `csv`, `eml`, `msg`, `pptx`, `ppt`, `xml`, `epub`。
- `enabled` (bool) 是否启用
- `number_limits` (int) 文档数量限制,默认为 3
- `transfer_methods` (array[string]) 传输方式列表:`remote_url`, `local_file`,必须选择一个。
- `image` (object) 图片设置
当前仅支持图片类型:`png`, `jpg`, `jpeg`, `webp`, `gif`。
- `enabled` (bool) 是否启用
- `number_limits` (int) 图片数量限制,默认为 3
- `transfer_methods` (array[string]) 传输方式列表:`remote_url`, `local_file`,必须选择一个。
- `audio` (object) 音频设置
当前仅支持音频类型:`mp3`, `m4a`, `wav`, `webm`, `amr`。
- `enabled` (bool) 是否启用
- `number_limits` (int) 音频数量限制,默认为 3
- `transfer_methods` (array[string]) 传输方式列表:`remote_url`, `local_file`,必须选择一个。
- `video` (object) 视频设置
当前仅支持视频类型:`mp4`, `mov`, `mpeg`, `mpga`。
- `enabled` (bool) 是否启用
- `number_limits` (int) 视频数量限制,默认为 3
- `transfer_methods` (array[string]) 传输方式列表:`remote_url`, `local_file`,必须选择一个。
- `custom` (object) 自定义设置
- `enabled` (bool) 是否启用
- `number_limits` (int) 自定义数量限制,默认为 3
- `transfer_methods` (array[string]) 传输方式列表:`remote_url`, `local_file`,必须选择一个。
- `document` (object) 文档设置
当前仅支持文档类型:`txt`, `md`, `markdown`, `pdf`, `html`, `xlsx`, `xls`, `docx`, `csv`, `eml`, `msg`, `pptx`, `ppt`, `xml`, `epub`。
- `enabled` (bool) 是否启用
- `number_limits` (int) 文档数量限制,默认为 3
- `transfer_methods` (array[string]) 传输方式列表:`remote_url`, `local_file`,必须选择一个。
- `image` (object) 图片设置
当前仅支持图片类型:`png`, `jpg`, `jpeg`, `webp`, `gif`。
- `enabled` (bool) 是否启用
- `number_limits` (int) 图片数量限制,默认为 3
- `transfer_methods` (array[string]) 传输方式列表:`remote_url`, `local_file`,必须选择一个。
- `audio` (object) 音频设置
当前仅支持音频类型:`mp3`, `m4a`, `wav`, `webm`, `amr`。
- `enabled` (bool) 是否启用
- `number_limits` (int) 音频数量限制,默认为 3
- `transfer_methods` (array[string]) 传输方式列表:`remote_url`, `local_file`,必须选择一个。
- `video` (object) 视频设置
当前仅支持视频类型:`mp4`, `mov`, `mpeg`, `mpga`。
- `enabled` (bool) 是否启用
- `number_limits` (int) 视频数量限制,默认为 3
- `transfer_methods` (array[string]) 传输方式列表:`remote_url`, `local_file`,必须选择一个。
- `custom` (object) 自定义设置
- `enabled` (bool) 是否启用
- `number_limits` (int) 自定义数量限制,默认为 3
- `transfer_methods` (array[string]) 传输方式列表:`remote_url`, `local_file`,必须选择一个。
- `system_parameters` (object) 系统参数
- `file_size_limit` (int) 文档上传大小限制 (MB)
- `image_file_size_limit` (int) 图片文件上传大小限制MB
@@ -664,14 +646,13 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
</Col>
<Col sticky>
<CodeGroup title="Request" tag="GET" label="/parameters" targetCode={` curl -X GET '${props.appDetail.api_base_url}/parameters'\\\n--header 'Authorization: Bearer {api_key}'`}>
```bash {{ title: 'cURL' }}
curl -X GET '${props.appDetail.api_base_url}/parameters' \
--header 'Authorization: Bearer {api_key}'
```
</CodeGroup>
<CodeGroup
title="Request"
tag="GET"
label="/parameters"
targetCode={` curl -X GET '${props.appDetail.api_base_url}/parameters'\\
--header 'Authorization: Bearer {api_key}'`}
/>
<CodeGroup title="Response">
```json {{ title: 'Response' }}
@@ -740,13 +721,13 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
- `use_icon_as_answer_icon` (bool) 是否使用 WebApp 图标替换聊天中的 🤖
</Col>
<Col>
<CodeGroup title="Request" tag="POST" label="/meta" targetCode={`curl -X GET '${props.appDetail.api_base_url}/site' \\\n-H 'Authorization: Bearer {api_key}'`}>
```bash {{ title: 'cURL' }}
curl -X GET '${props.appDetail.api_base_url}/site' \
-H 'Authorization: Bearer {api_key}'
```
</CodeGroup>
<CodeGroup
title="Request"
tag="POST"
label="/meta"
targetCode={`curl -X GET '${props.appDetail.api_base_url}/site' \\
-H 'Authorization: Bearer {api_key}'`}
/>
<CodeGroup title="Response">
```json {{ title: 'Response' }}
@@ -849,18 +830,11 @@ ___
title="Request"
tag="POST"
label="/apps/annotations"
targetCode={`curl --location --request POST '${props.apiBaseUrl}/apps/annotations' \\\n--header 'Authorization: Bearer {api_key}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{"question": "What is your name?","answer": "I am Dify."}'`}
>
```bash {{ title: 'cURL' }}
curl --location --request POST '${props.apiBaseUrl}/apps/annotations' \
--header 'Authorization: Bearer {api_key}' \
--header 'Content-Type: application/json' \
--data-raw '{
"question": "What is your name?",
"answer": "I am Dify."
}'
```
</CodeGroup>
targetCode={`curl --location --request POST '${props.apiBaseUrl}/apps/annotations' \\
--header 'Authorization: Bearer {api_key}' \\
--header 'Content-Type: application/json' \\
--data-raw '{"question": "What is your name?","answer": "I am Dify."}'`}
/>
<CodeGroup title="Response">
```json {{ title: 'Response' }}
@@ -903,18 +877,11 @@ ___
title="Request"
tag="PUT"
label="/apps/annotations/{annotation_id}"
targetCode={`curl --location --request PUT '${props.apiBaseUrl}/apps/annotations/{annotation_id}' \\\n--header 'Authorization: Bearer {api_key}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{"question": "What is your name?","answer": "I am Dify."}'`}
>
```bash {{ title: 'cURL' }}
curl --location --request PUT '${props.apiBaseUrl}/apps/annotations/{annotation_id}' \
--header 'Authorization: Bearer {api_key}' \
--header 'Content-Type: application/json' \
--data-raw '{
"question": "What is your name?",
"answer": "I am Dify."
}'
```
</CodeGroup>
targetCode={`curl --location --request PUT '${props.apiBaseUrl}/apps/annotations/{annotation_id}' \\
--header 'Authorization: Bearer {api_key}' \\
--header 'Content-Type: application/json' \\
--data-raw '{"question": "What is your name?","answer": "I am Dify."}'`}
/>
<CodeGroup title="Response">
```json {{ title: 'Response' }}
@@ -951,7 +918,9 @@ ___
title="Request"
tag="PUT"
label="/apps/annotations/{annotation_id}"
targetCode={`curl --location --request DELETE '${props.apiBaseUrl}/apps/annotations/{annotation_id}' \\\n--header 'Authorization: Bearer {api_key}' \\\n--header 'Content-Type: application/json'`}
targetCode={`curl --location --request DELETE '${props.apiBaseUrl}/apps/annotations/{annotation_id}' \\
--header 'Authorization: Bearer {api_key}' \\
--header 'Content-Type: application/json'`}
>
```bash {{ title: 'cURL' }}
curl --location --request DELETE '${props.apiBaseUrl}/apps/annotations/{annotation_id}' \
@@ -999,19 +968,11 @@ ___
title="Request"
tag="POST"
label="/apps/annotation-reply/{action}"
targetCode={`curl --location --request POST '${props.apiBaseUrl}/apps/annotation-reply/{action}' \\\n--header 'Authorization: Bearer {api_key}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{"score_threshold": 0.9, "embedding_provider_name": "zhipu", "embedding_model_name": "embedding_3"}'`}
>
```bash {{ title: 'cURL' }}
curl --location --request POST 'https://api.dify.ai/v1/apps/annotation-reply/{action}' \
--header 'Authorization: Bearer {api_key}' \
--header 'Content-Type: application/json' \
--data-raw '{
"score_threshold": 0.9,
"embedding_provider_name": "zhipu",
"embedding_model_name": "embedding_3"
}'
```
</CodeGroup>
targetCode={`curl --location --request POST '${props.apiBaseUrl}/apps/annotation-reply/{action}' \\
--header 'Authorization: Bearer {api_key}' \\
--header 'Content-Type: application/json' \\
--data-raw '{"score_threshold": 0.9, "embedding_provider_name": "zhipu", "embedding_model_name": "embedding_3"}'`}
/>
<CodeGroup title="Response">
```json {{ title: 'Response' }}
@@ -1020,7 +981,7 @@ ___
"job_status": "waiting"
}
```
</CodeGroup>
</Col>
</Row>
@@ -1049,13 +1010,9 @@ ___
title="Request"
tag="GET"
label="/apps/annotations"
targetCode={`curl --location --request GET '${props.apiBaseUrl}/apps/annotation-reply/{action}/status/{job_id}' \\\n--header 'Authorization: Bearer {api_key}'`}
>
```bash {{ title: 'cURL' }}
curl --location --request GET '${props.apiBaseUrl}/apps/annotation-reply/{action}/status/{job_id}' \
--header 'Authorization: Bearer {api_key}'
```
</CodeGroup>
targetCode={`curl --location --request GET '${props.apiBaseUrl}/apps/annotation-reply/{action}/status/{job_id}' \\
--header 'Authorization: Bearer {api_key}'`}
/>
<CodeGroup title="Response">
```json {{ title: 'Response' }}