Skip to content

Commit 6341eea

Browse files
mortalYoungmortalYoung
authored
feat(chat): update chat component (#554)
* feat(chat): update chat component * feat(chat): update style
1 parent 4432c49 commit 6341eea

22 files changed

Lines changed: 539 additions & 362 deletions

File tree

‎src/chat/content/index.scss‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,10 @@
33
position: relative;
44
width: 100%;
55
height: 100%;
6-
overflow: hidden;
6+
overflow: auto;
77
&--disabled {
88
pointer-events: none;
99
}
10-
&--valid {
11-
overflow: auto;
12-
}
1310
}
1411
&__inner__holder {
1512
display: flex;

‎src/chat/content/index.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useSta
22
import classNames from 'classnames';
33

44
import { Message as MessageEntity, MessageStatus, Prompt as PromptEntity } from '../entity';
5-
import { RobotIcon } from '../icon';
65
import Message from '../message';
76
import Prompt from '../prompt';
87
import { useContext } from '../useContext';
@@ -11,7 +10,6 @@ import './index.scss';
1110
export interface IContentProps {
1211
data: PromptEntity[];
1312
placeholder?: React.ReactNode;
14-
robotIcon?: boolean;
1513
scrollable?: boolean;
1614
onRegenerate?: (data: MessageEntity, prompt: PromptEntity) => void;
1715
onStop?: (data: MessageEntity, prompt: PromptEntity) => void;
@@ -23,7 +21,7 @@ export interface IContentRef {
2321
}
2422

2523
const Content = forwardRef<IContentRef, IContentProps>(function (
26-
{ data, placeholder, robotIcon = true, scrollable = true, onRegenerate, onStop },
24+
{ data, placeholder, scrollable = true, onRegenerate, onStop },
2725
forwardedRef
2826
) {
2927
const { maxRegenerateCount, copy, regenerate } = useContext();
@@ -100,8 +98,7 @@ const Content = forwardRef<IContentRef, IContentProps>(function (
10098
<div
10199
className={classNames(
102100
'dtc__aigc__content__container',
103-
!scrollable && 'dtc__aigc__content__container--disabled',
104-
dataValid && scrollable && 'dtc__aigc__content__container--valid'
101+
!scrollable && 'dtc__aigc__content__container--disabled'
105102
)}
106103
ref={containerRef}
107104
>
@@ -143,14 +140,7 @@ const Content = forwardRef<IContentRef, IContentProps>(function (
143140
})}
144141
</div>
145142
) : (
146-
<React.Fragment>
147-
{placeholder}
148-
{robotIcon && (
149-
<RobotIcon
150-
style={{ fontSize: 200, position: 'absolute', right: 0, bottom: -100 }}
151-
/>
152-
)}
153-
</React.Fragment>
143+
<React.Fragment>{placeholder}</React.Fragment>
154144
)}
155145
</div>
156146
);

‎src/chat/demos/basic.tsx‎

Lines changed: 49 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
import React, { useEffect, useState } from 'react';
2+
import { LikeOutlined } from '@ant-design/icons';
23
import { Button } from 'antd';
3-
import { Chat } from 'dt-react-component';
4+
import { Chat, Flex } from 'dt-react-component';
45

56
import { mockSSE } from './mockSSE';
67

78
export default function () {
89
const chat = Chat.useChat();
9-
const [value, setValue] = useState('');
10+
const [value, setValue] = useState<string | undefined>('');
1011

11-
const handleSubmit = (raw: string = value) => {
12-
const val = raw.trim();
12+
const [convert, setConvert] = useState(false);
13+
14+
const handleSubmit = (raw = value) => {
15+
const val = raw?.trim();
1316
if (chat.loading() || !val) return;
1417
setValue('');
1518
const promptId = new Date().valueOf().toString();
@@ -35,35 +38,56 @@ export default function () {
3538
}, []);
3639

3740
return (
38-
<div style={{ width: '100%', height: 400 }}>
39-
<Chat chat={chat}>
41+
<div style={{ width: '100%', height: 400, marginBottom: 56 }}>
42+
<Chat
43+
chat={chat}
44+
codeBlock={{
45+
convert,
46+
}}
47+
messageIcons={() => <LikeOutlined className="dtc__message__icon" />}
48+
components={{
49+
a: ({ children }) => (
50+
<Button
51+
type="primary"
52+
size="small"
53+
ghost
54+
onClick={() => setConvert((p) => !p)}
55+
>
56+
{children}
57+
</Button>
58+
),
59+
}}
60+
>
4061
<Chat.Content
4162
data={chat.conversation.get()?.prompts || []}
4263
placeholder={
4364
<h1>
44-
有什么可以帮忙的？
65+
<Chat.Welcome
66+
title="dt-react-component"
67+
description="React UI component library based on antd package"
68+
/>
4569
<br />
46-
<Button onClick={() => handleSubmit('请告诉我一首诗')}>
47-
返回一首诗
48-
</Button>
70+
<Flex vertical align="start" gap="4px">
71+
<Chat.Tag onClick={() => handleSubmit('请告诉我一首诗')}>
72+
返回一首诗
73+
</Chat.Tag>
74+
<Chat.Tag onClick={() => handleSubmit('生成 CodeBlock')}>
75+
生成 CodeBlock
76+
</Chat.Tag>
77+
</Flex>
4978
</h1>
5079
}
5180
/>
52-
<div style={{ display: 'flex', gap: 4 }}>
53-
<Chat.Input
54-
value={value}
55-
onChange={setValue}
56-
onPressEnter={() => handleSubmit()}
57-
placeholder="请输入想咨询的内容…"
58-
/>
59-
<Chat.Button
60-
type="primary"
61-
onClick={() => handleSubmit()}
62-
disabled={chat.loading() || !value}
63-
>
64-
<Chat.Icon.SendIcon style={{ fontSize: 16 }} />
65-
</Chat.Button>
66-
</div>
81+
<Chat.Input
82+
value={value}
83+
onChange={setValue}
84+
onPressEnter={() => handleSubmit()}
85+
onPressShiftEnter={() => setValue((v) => v + '\n')}
86+
button={{
87+
disabled: chat.loading() || !value?.trim(),
88+
}}
89+
placeholder="请输入想咨询的内容…"
90+
/>
6791
</Chat>
6892
</div>
6993
);

‎src/chat/demos/button.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,33 +16,33 @@ export default function () {
1616
<Chat.Button
1717
type="primary"
1818
disabled={disabled}
19-
icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
19+
icon={<Chat.Icon.ShiningIcon style={{ fontSize: 16 }} />}
2020
/>
2121
<Chat.Button
2222
type="primary"
2323
disabled={disabled}
24-
icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
24+
icon={<Chat.Icon.ShiningIcon style={{ fontSize: 16 }} />}
2525
>
26-
发送
26+
按钮
2727
</Chat.Button>
2828
<Chat.Button
2929
type="default"
3030
disabled={disabled}
31-
icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
31+
icon={<Chat.Icon.ShiningIcon style={{ fontSize: 16 }} />}
3232
>
33-
发送
33+
按钮
3434
</Chat.Button>
3535
<Chat.Button
3636
type="secondary"
3737
disabled={disabled}
38-
icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
38+
icon={<Chat.Icon.ShiningIcon style={{ fontSize: 16 }} />}
3939
>
40-
发送
40+
按钮
4141
</Chat.Button>
4242
<Chat.Button
4343
type="secondary"
4444
disabled={disabled}
45-
icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
45+
icon={<Chat.Icon.ShiningIcon style={{ fontSize: 16 }} />}
4646
>
4747
AI log parsing
4848
</Chat.Button>
@@ -54,37 +54,37 @@ export default function () {
5454
size="small"
5555
type="primary"
5656
disabled={disabled}
57-
icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
57+
icon={<Chat.Icon.ShiningIcon style={{ fontSize: 16 }} />}
5858
/>
5959
<Chat.Button
6060
size="small"
6161
type="primary"
6262
disabled={disabled}
63-
icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
63+
icon={<Chat.Icon.ShiningIcon style={{ fontSize: 16 }} />}
6464
>
65-
发送
65+
按钮
6666
</Chat.Button>
6767
<Chat.Button
6868
size="small"
6969
type="default"
7070
disabled={disabled}
71-
icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
71+
icon={<Chat.Icon.ShiningIcon style={{ fontSize: 16 }} />}
7272
>
73-
发送
73+
按钮
7474
</Chat.Button>
7575
<Chat.Button
7676
size="small"
7777
type="secondary"
7878
disabled={disabled}
79-
icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
79+
icon={<Chat.Icon.ShiningIcon style={{ fontSize: 16 }} />}
8080
>
81-
发送
81+
按钮
8282
</Chat.Button>
8383
<Chat.Button
8484
size="small"
8585
type="secondary"
8686
disabled={disabled}
87-
icon={<Chat.Icon.SendIcon style={{ fontSize: 16 }} />}
87+
icon={<Chat.Icon.ShiningIcon style={{ fontSize: 16 }} />}
8888
>
8989
AI log parsing
9090
</Chat.Button>

‎src/chat/demos/global-state/index.tsx‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useMemo, useState } from 'react';
2-
import { Button, Tabs } from 'antd';
2+
import { Tabs } from 'antd';
33
import { Chat } from 'dt-react-component';
44
import { Conversation, Message, MessageStatus, Prompt } from 'dt-react-component/chat/entity';
55
import { produce } from 'immer';
@@ -44,7 +44,7 @@ export default function () {
4444
return conversations[activeKey];
4545
}, [activeKey, conversations]);
4646

47-
const handleSubmit = (val: string) => {
47+
const handleSubmit = (val = '') => {
4848
if (!data) {
4949
const promptId = new Date().valueOf().toString();
5050
const messageId = (new Date().valueOf() + 1).toString();
@@ -122,38 +122,38 @@ export default function () {
122122
);
123123
}
124124

125-
function AI({ data, onSubmit }: { data?: Conversation; onSubmit?: (str: string) => void }) {
125+
function AI({ data, onSubmit }: { data?: Conversation; onSubmit?: (str?: string) => void }) {
126126
const chat = Chat.useChat();
127-
const [value, setValue] = useState('');
127+
const [value, setValue] = useState<string | undefined>('');
128128

129129
return (
130-
<div style={{ width: '100%', height: 400 }}>
130+
<div style={{ width: '100%', height: 400, marginBottom: 46 }}>
131131
<Chat chat={chat}>
132132
<Chat.Content
133133
data={data?.prompts || []}
134134
placeholder={
135135
<h1>
136-
有什么可以帮忙的？
136+
<Chat.Welcome
137+
title="dt-react-component"
138+
description="React UI component library based on antd package"
139+
/>
137140
<br />
138-
<Button onClick={() => onSubmit?.('请告诉我一首诗')}>返回一首诗</Button>
141+
<Chat.Tag onClick={() => onSubmit?.('请告诉我一首诗')}>
142+
返回一首诗
143+
</Chat.Tag>
139144
</h1>
140145
}
141146
/>
142-
<div style={{ display: 'flex', gap: 4 }}>
143-
<Chat.Input
144-
value={value}
145-
onChange={setValue}
146-
onPressEnter={() => onSubmit?.(value)}
147-
placeholder="请输入想咨询的内容…"
148-
/>
149-
<Chat.Button
150-
type="primary"
151-
onClick={() => onSubmit?.(value)}
152-
disabled={chat.loading() || !value}
153-
>
154-
<Chat.Icon.SendIcon style={{ fontSize: 16 }} />
155-
</Chat.Button>
156-
</div>
147+
<Chat.Input
148+
value={value}
149+
onChange={setValue}
150+
onPressEnter={() => onSubmit?.(value)}
151+
onPressShiftEnter={() => setValue((v) => v + '\n')}
152+
button={{
153+
disabled: chat.loading() || !value?.trim(),
154+
}}
155+
placeholder="请输入想咨询的内容…"
156+
/>
157157
</Chat>
158158
</div>
159159
);

0 commit comments

Comments
 (0)