Skip to content

Commit 66d1be9

Browse files
YannLynnYyumeiZhang
YannLynn
and
YyumeiZhang
authored
Feat dialogue (#2997)
* feat: add AI Token, Tag, Button, Feedback, FloatButton * docs: add AI Token, Tag, Button, Feedback, FloatButton en docs * fix: Fix code issues raised by reviewers * fix: Fix code issues raised by reviewers * fix: Fix code issues raised by reviewers * fix: Fix code issues raised by reviewers * fix: Fix code issues raised by reviewers * chore: change incorrect scss token description * docs: Added description of the default format value for markdownRender in chat * feat: add IconWord, IconPdf, IconExcel * feat: add ai chat dialogue component * fix: rename api form isXxxx to xxx * fix: update variable scss * feat: add adapter to convert the reasponse object or chatCompletion object to the message type required by dialogue * feat: update api name and fix some style bug * docs: add chat dialogue doc * fix: update seletedID in dialogue to set * feat: update dialogue loading style * fix: update code style * feat: add show reference and scroll funtion, refactoring dialogue content file * Feat/aichatinput: Add AIChatInput component (#2998) * feat: add AIChatInput component * feat: add AIChatInput component * feat: add AIChatInput component * chore: refine scss * feat: get configure value in onMessageSend * feat: add AIChatInput * feat: add AIChatInput * chore: change md doc order * docs: add feedback completion tips demo * docs: add ai category * feat: add chatinput as messageEditRender * feat: add AIChatInput * docs: add AIChatInput/AIChatDialogue/AIComponent icon * fix: add scrollToBottomImmediately to didupdate in dialogue * docs: update ai doc * feat: update roleConfig in dialogue * feat: add AiChatInput * fix: add multiAgent demo * docs: update doc demo * docs: update AIComponent demo * docs: overview page add AI components * docs: update AIComponent docs * docs: update AIChatInput * style: add radius to AIChatInput suggestion item * docs: overview add floatButton & feedback * docs: add en doc to ai components --------- Co-authored-by: zhangyumei.0319 <[email protected]> Co-authored-by: YyumeiZhang <[email protected]>
1 parent 0c83570 commit 66d1be9

File tree

393 files changed

+27455
-312
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

393 files changed

+27455
-312
lines changed

‎content/ai/aiChatDialogue/index-en-US.md‎

Lines changed: 1756 additions & 0 deletions
Large diffs are not rendered by default.

‎content/ai/aiChatDialogue/index.md‎

Lines changed: 1761 additions & 0 deletions
Large diffs are not rendered by default.

‎content/ai/aiChatInput/index-en-US.md‎

Lines changed: 1516 additions & 0 deletions
Large diffs are not rendered by default.

‎content/ai/aiChatInput/index.md‎

Lines changed: 1598 additions & 0 deletions
Large diffs are not rendered by default.

‎content/ai/aiComponent/index-en-US.md‎

Lines changed: 554 additions & 0 deletions
Large diffs are not rendered by default.

‎content/ai/aiComponent/index.md‎

Lines changed: 555 additions & 0 deletions
Large diffs are not rendered by default.

‎content/basic/button/index-en-US.md‎

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ function ButtonDemo() {
5252

5353
- `var(--semi-color-primary)`: main
5454
- `var(--semi-color-secondary)`: secondary
55-
- `var(--semi-color-colored)`: third
55+
- `var(--semi-color-tertiary)`: third
5656
- `var(--semi-color-warning)`: warning
5757
- `var(--semi-color-danger)`: danger
5858

@@ -380,6 +380,56 @@ function ButtonDemo() {
380380
}
381381
```
382382

383+
### AI style - Colorful buttons
384+
385+
Set `colorful` to get colorful buttons. Colorful buttons support all `theme`, and `type` only supports `primary` and `tertiary`.
386+
387+
```jsx live=true dir="column"
388+
import React, { useState } from 'react';
389+
import { Button } from '@douyinfe/semi-ui';
390+
import { IconAIFilledLevel1, IconAIFilledLevel2, IconAIFilledLevel3 } from '@douyinfe/semi-icons';
391+
392+
function ButtonDemo() {
393+
return (['Colorful', undefined].map(content => (<div
394+
key={content}
395+
style={{ display: 'flex', rowGap: 16, marginTop: 20, marginLeft: 10, flexDirection: 'column' }}
396+
>
397+
<div style={{ display: 'flex', columnGap: 16 }}>
398+
<Button colorful theme="solid" type="primary" icon={<IconAIFilledLevel1 />}>{content}</Button>
399+
<Button colorful theme="solid" type="primary" loading >{content}</Button>
400+
<Button colorful theme="solid" type="primary" icon={<IconAIFilledLevel1 />} disabled >{content}</Button>
401+
<Button colorful theme="solid" type="tertiary" icon={<IconAIFilledLevel3 />}>{content}</Button>
402+
<Button colorful theme="solid" type="tertiary" loading >{content}</Button>
403+
<Button colorful theme="solid" type="tertiary" icon={<IconAIFilledLevel3 />} disabled >{content}</Button>
404+
</div>
405+
<div style={{ display: 'flex', columnGap: 16 }}>
406+
<Button colorful theme="light" type="primary" icon={<IconAIFilledLevel3 />}>{content}</Button>
407+
<Button colorful theme="light" type="primary" loading >{content}</Button>
408+
<Button colorful theme="light" type="primary" icon={<IconAIFilledLevel3 />} disabled >{content}</Button>
409+
<Button colorful theme="light" type="tertiary" icon={<IconAIFilledLevel2 />}>{content}</Button>
410+
<Button colorful theme="light" type="tertiary" loading >{content}</Button>
411+
<Button colorful theme="light" type="tertiary" icon={<IconAIFilledLevel2 />} disabled >{content}</Button>
412+
</div>
413+
<div style={{ display: 'flex', columnGap: 16 }}>
414+
<Button colorful theme="outline" type="primary" icon={<IconAIFilledLevel1 />}>{content}</Button>
415+
<Button colorful theme="outline" type="primary" loading >{content}</Button>
416+
<Button colorful theme="outline" type="primary" icon={<IconAIFilledLevel1 />} disabled >{content}</Button>
417+
<Button colorful theme="outline" type="tertiary" icon={<IconAIFilledLevel2 />}>{content}</Button>
418+
<Button colorful theme="outline" type="tertiary" loading >{content}</Button>
419+
<Button colorful theme="outline" type="tertiary" icon={<IconAIFilledLevel2 />} disabled >{content}</Button>
420+
</div>
421+
<div style={{ display: 'flex', columnGap: 16 }}>
422+
<Button colorful theme="borderless" type="primary" icon={<IconAIFilledLevel3 />}>{content}</Button>
423+
<Button colorful theme="borderless" type="primary" loading >{content}</Button>
424+
<Button colorful theme="borderless" type="primary" icon={<IconAIFilledLevel3 />} disabled >{content}</Button>
425+
<Button colorful theme="borderless" type="tertiary" icon={<IconAIFilledLevel2 />}>{content}</Button>
426+
<Button colorful theme="borderless" type="tertiary" loading >{content}</Button>
427+
<Button colorful theme="borderless" type="tertiary" icon={<IconAIFilledLevel2 />} disabled >{content}</Button>
428+
</div>
429+
</div>)));
430+
}
431+
```
432+
383433
### Button Combination
384434

385435
You can put multiple buttons in `ButtonGroup` In the container, by setting `size`, `disabled`, `type` You can uniformly set the button size in the button combination, whether disabled and type.
@@ -528,6 +578,7 @@ function SplitButtonDemo(){
528578
| block | Set the button to the block level button | boolean | false |
529579
| className | Class name | string | |
530580
| contentClassName | content className | string | - |
581+
| colorful | Colorful buttons, supported since version 2.86.0 | boolean | false |
531582
| disabled | Prohibited status | boolean | false |
532583
| htmlType | Set the `button` native `type` value, optional values: `"button"`, `"reset"`, `"submit"` | string | "button" |
533584
| icon | Icon | ReactNode | |
@@ -549,6 +600,7 @@ function SplitButtonDemo(){
549600
| ---------- |--------------------------------------------------------------------------------------------------------------------------------------------------| ------- | --------- |---------|
550601
| aria-label | Label of the button group | string | - | |
551602
| className | Custom class name | string | - | |
603+
| colorful | Colorful buttons | boolean | false | 2.86.0 |
552604
| disabled | Disabled status | boolean | false | |
553605
| size | Button size, optional value: `"large"`,`"default"`,`"small"` | string | "default" |
554606
| style | Custom style | CSSProperties | - | 2.20.0 |

‎content/basic/button/index.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -328,6 +328,56 @@ function ButtonDemo() {
328328
}
329329
```
330330

331+
### AI 风格 - 多彩按钮
332+
333+
设置 `colorful` 即可获得多彩按钮，多彩按钮支持所有的 `theme` ， `type` 仅支持 `primary` 及 `tertiary`。
334+
335+
```jsx live=true dir="column"
336+
import React, { useState } from 'react';
337+
import { Button } from '@douyinfe/semi-ui';
338+
import { IconAIFilledLevel1, IconAIFilledLevel2, IconAIFilledLevel3 } from '@douyinfe/semi-icons';
339+
340+
function ButtonDemo() {
341+
return (['Colorful', undefined].map(content => (<div
342+
key={content}
343+
style={{ display: 'flex', rowGap: 16, marginTop: 20, marginLeft: 10, flexDirection: 'column' }}
344+
>
345+
<div style={{ display: 'flex', columnGap: 16 }}>
346+
<Button colorful theme="solid" type="primary" icon={<IconAIFilledLevel1 />}>{content}</Button>
347+
<Button colorful theme="solid" type="primary" loading >{content}</Button>
348+
<Button colorful theme="solid" type="primary" icon={<IconAIFilledLevel1 />} disabled >{content}</Button>
349+
<Button colorful theme="solid" type="tertiary" icon={<IconAIFilledLevel3 />}>{content}</Button>
350+
<Button colorful theme="solid" type="tertiary" loading >{content}</Button>
351+
<Button colorful theme="solid" type="tertiary" icon={<IconAIFilledLevel3 />} disabled >{content}</Button>
352+
</div>
353+
<div style={{ display: 'flex', columnGap: 16 }}>
354+
<Button colorful theme="light" type="primary" icon={<IconAIFilledLevel3 />}>{content}</Button>
355+
<Button colorful theme="light" type="primary" loading >{content}</Button>
356+
<Button colorful theme="light" type="primary" icon={<IconAIFilledLevel3 />} disabled >{content}</Button>
357+
<Button colorful theme="light" type="tertiary" icon={<IconAIFilledLevel2 />}>{content}</Button>
358+
<Button colorful theme="light" type="tertiary" loading >{content}</Button>
359+
<Button colorful theme="light" type="tertiary" icon={<IconAIFilledLevel2 />} disabled >{content}</Button>
360+
</div>
361+
<div style={{ display: 'flex', columnGap: 16 }}>
362+
<Button colorful theme="outline" type="primary" icon={<IconAIFilledLevel1 />}>{content}</Button>
363+
<Button colorful theme="outline" type="primary" loading >{content}</Button>
364+
<Button colorful theme="outline" type="primary" icon={<IconAIFilledLevel1 />} disabled >{content}</Button>
365+
<Button colorful theme="outline" type="tertiary" icon={<IconAIFilledLevel2 />}>{content}</Button>
366+
<Button colorful theme="outline" type="tertiary" loading >{content}</Button>
367+
<Button colorful theme="outline" type="tertiary" icon={<IconAIFilledLevel2 />} disabled >{content}</Button>
368+
</div>
369+
<div style={{ display: 'flex', columnGap: 16 }}>
370+
<Button colorful theme="borderless" type="primary" icon={<IconAIFilledLevel3 />}>{content}</Button>
371+
<Button colorful theme="borderless" type="primary" loading >{content}</Button>
372+
<Button colorful theme="borderless" type="primary" icon={<IconAIFilledLevel3 />} disabled >{content}</Button>
373+
<Button colorful theme="borderless" type="tertiary" icon={<IconAIFilledLevel2 />}>{content}</Button>
374+
<Button colorful theme="borderless" type="tertiary" loading >{content}</Button>
375+
<Button colorful theme="borderless" type="tertiary" icon={<IconAIFilledLevel2 />} disabled >{content}</Button>
376+
</div>
377+
</div>)));
378+
}
379+
```
380+
331381
### 按钮组合
332382

333383
可以将多个按钮放入`ButtonGroup`的容器中，通过设置`size`，`disabled`，`type`可统一设置按钮组合中的按钮尺寸，是否禁用和类型。
@@ -476,6 +526,7 @@ function SplitButtonDemo(){
476526
| block | 将按钮设置为块级按钮 | bool | false |
477527
| className | 类名 | string | |
478528
| contentClassName | 内容区域 className | string | 无 |
529+
| colorful | 多彩按钮，自 2.86.0 版本开始支持 | boolean | false |
479530
| disabled | 禁用状态 | boolean | false |
480531
| htmlType | 设置 `button` 原生的 `type` 值，可选值：`button`、`reset`、`submit` | string | "button" |
481532
| icon | 图标 | ReactNode | |
@@ -497,6 +548,7 @@ function SplitButtonDemo(){
497548
| -------- | -------------| ------- | --------- |---- |
498549
| aria-label | 按钮组的标签 | string | - | |
499550
| className | 自定义类名 | string | - | |
551+
| colorful | 多彩按钮，自 2.86.0 版本开始支持 | boolean | false |
500552
| disabled | 禁用状态 | boolean | false | |
501553
| size | 按钮大小，可选值：`large`、`default`、`small` | string | "default" | |
502554
| style | 自定义样式 | CSSProperties | - | 2.20.0 |

‎content/basic/divider/index-en-US.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
localeCode: en-US
3-
order: 22
3+
order: 23
44
category: Basic
55
title: Divider
66
icon: doc-divider

‎content/basic/divider/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
localeCode: zh-CN
3-
order: 22
3+
order: 23
44
category: 基础
55
title: Divider 分割线
66
icon: doc-divider

0 commit comments

Comments
 (0)