Skip to content

Commit f774df3

Browse files
mortalYoungmortalYoung
authored
feat(chat): add Chat component (#518)
* feat(chat): add Chat component * feat(chat): bump react-syntax-highlighter to 15.5.0 * feat(chat): update chat docs * feat(chat): update global-state doc * test(useTyping): add useTyping test and doc * feat(chat): update useMeasure doc * fix(chat): improve secondary button's style * docs(chat): update chat docs * feat(chat): chat support messageIcons * feat(chat): support Tag for Chat * fix(chat): update Chat.Button's css style * fix(chat): update assitantIcon and improve button * fix(chat): fix linearGradient will get duplicated id in svg * feat(chat): update the font-size of heading title in markdown * feat(chat): improve useChat * docs(chat): update demos * feat(chat): support rehype plugins and regenerate provider config * test(chat): add unit tests * test(chat): improve test coverage * fix(chat): update useIntersectionObserver usage * test(chat): replace array.at methods * fix(chat): update aligment for stop button * test(chat): update snapshots * docs(useMeasure): update docs * fix(chat): fix alignment for chat's button * test(chat): update test * feat(chat): support codeBlock on provider * fix(chat): add compensatory style to make button's text align center * build: replace registry address
1 parent 2f9348d commit f774df3

Some content is hidden

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

85 files changed

+8827
-1927
lines changed

‎jest.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@ module.exports = {
1212
// make tests access in [email protected]
1313
'@babel/polyfill/lib/noConflict': '<rootDir>/tests/styleMock.js',
1414
'^lodash-es$': 'lodash',
15+
'react-markdown': '<rootDir>/node_modules/react-markdown/react-markdown.min.js',
1516
},
1617
};

‎package.json

+6
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
"@types/jest": "^29.2.3",
8383
"@types/lodash-es": "^4.17.12",
8484
"@types/react": "^18.0.0",
85+
"@types/react-syntax-highlighter": "~15.5.13",
8586
"@types/shortid": "^0.0.31",
8687
"@types/showdown": "^1.9.0",
8788
"@types/testing-library__jest-dom": "^5.14.5",
@@ -103,6 +104,7 @@
103104
"react-dom": "^18.0.0",
104105
"react-test-renderer": "^18.2.0",
105106
"standard-version": "^9.5.0",
107+
"resize-observer-polyfill": "^1.5.1",
106108
"stylelint": "^14.9.1",
107109
"ts-jest": "^29.0.3",
108110
"typescript": "~4.5.2"
@@ -115,9 +117,13 @@
115117
"classnames": "^2.2.6",
116118
"handsontable": "6.2.2",
117119
"highlight.js": "^10.5.0",
120+
"immer": "~10.1.1",
118121
"lodash-es": "^4.17.21",
119122
"rc-drawer": "~5.1.0",
120123
"rc-virtual-list": "^3.4.13",
124+
"react-markdown": "~8.0.6",
125+
"react-syntax-highlighter": "~15.5.0",
126+
"remark-gfm": "~3.0.1",
121127
"shortid": "^2.2.16",
122128
"showdown": "^1.9.0",
123129
"use-clippy": "^1.0.9"

‎pnpm-lock.yaml

+1,756-1,927
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/chat/__tests__/__snapshots__/button.test.tsx.snap

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Test Chat Button Match the snapshot: default button 1`] = `
4+
<DocumentFragment>
5+
<button
6+
class="ant-btn ant-btn-default ant-btn-background-ghost dtc__aigc__button dtc__aigc__button--default"
7+
type="button"
8+
>
9+
<span
10+
class="dtc__aigc__button__text"
11+
>
12+
Default
13+
</span>
14+
</button>
15+
</DocumentFragment>
16+
`;
17+
18+
exports[`Test Chat Button Match the snapshot: primary button 1`] = `
19+
<DocumentFragment>
20+
<button
21+
class="ant-btn ant-btn-default ant-btn-background-ghost dtc__aigc__button dtc__aigc__button--primary"
22+
type="button"
23+
>
24+
<span
25+
class="dtc__aigc__button__text"
26+
>
27+
Default
28+
</span>
29+
</button>
30+
</DocumentFragment>
31+
`;
32+
33+
exports[`Test Chat Button Match the snapshot: secondary button 1`] = `
34+
<DocumentFragment>
35+
<button
36+
class="ant-btn ant-btn-default ant-btn-background-ghost dtc__aigc__button dtc__aigc__button--secondary"
37+
type="button"
38+
>
39+
<span
40+
class="dtc__aigc__button__text"
41+
>
42+
Default
43+
</span>
44+
</button>
45+
</DocumentFragment>
46+
`;
47+
48+
exports[`Test Chat Button expect ONLY one global gradient div: global gradient 1`] = `"<svg width="0" height="0"><defs><linearGradient id="secondary_linear_gradient" x1="1.18164" y1="3.93164" x2="13.9881" y2="8.54198" gradientUnits="userSpaceOnUse"><stop stop-color="#00BAC6"></stop><stop offset="0.5" stop-color="#0067FF"></stop><stop offset="1" stop-color="#450FDE"></stop></linearGradient><linearGradient id="secondary_linear_gradient_hover" x1="8.96582" y1="0.96582" x2="15.9711" y2="3.4877" gradientUnits="userSpaceOnUse"><stop stop-color="#00BAC6"></stop><stop offset="0.5" stop-color="#0067FF"></stop><stop offset="1" stop-color="#450FDE"></stop></linearGradient></defs></svg>"`;

‎src/chat/__tests__/__snapshots__/codeBlock.test.tsx.snap

+204
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Test Chat CodeBlock Match snapshot: normal 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="dtc__aigc__codeblock jest_test"
7+
style="color: red;"
8+
>
9+
<div
10+
class="dtc__aigc__codeblock__header"
11+
>
12+
<span
13+
class="dtc__aigc__codeblock__language"
14+
>
15+
javascript
16+
</span>
17+
<div
18+
class="dtc__aigc__codeblock__tool"
19+
>
20+
<span
21+
class="dtc-copy"
22+
>
23+
<span
24+
class="dtc__icon"
25+
>
26+
<svg
27+
height="1em"
28+
viewBox="0 0 16 16"
29+
width="1em"
30+
xmlns="http://www.w3.org/2000/svg"
31+
>
32+
<g
33+
fill="none"
34+
fill-rule="evenodd"
35+
stroke="none"
36+
stroke-width="1"
37+
>
38+
<g
39+
transform="translate(-340 -367)"
40+
>
41+
<g
42+
transform="translate(201 320)"
43+
>
44+
<g
45+
transform="translate(139 47)"
46+
>
47+
<path
48+
d="M11 1.5A1.5 1.5 0 0112.5 3v.25h.5a1.5 1.5 0 011.5 1.5v8a1.5 1.5 0 01-1.5 1.5H5a1.5 1.5 0 01-1.5-1.5v-.25H3a1.5 1.5 0 01-1.493-1.356L1.5 11V3A1.5 1.5 0 013 1.5zm1.5 9.5a1.5 1.5 0 01-1.5 1.5H4.5v.25a.5.5 0 00.5.5h8a.5.5 0 00.5-.5v-8a.5.5 0 00-.5-.5h-.5zM11 2.5H3a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V3a.5.5 0 00-.5-.5zm-4 1a.5.5 0 01.5.5v2.5H10a.5.5 0 110 1H7.5V10a.5.5 0 11-1 0V7.5H4a.5.5 0 010-1h2.5V4a.5.5 0 01.5-.5z"
49+
fill="currentColor"
50+
/>
51+
</g>
52+
</g>
53+
</g>
54+
</g>
55+
</svg>
56+
</span>
57+
</span>
58+
</div>
59+
</div>
60+
<pre
61+
style="background: rgb(255, 255, 255); color: rgb(56, 56, 56); font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 2; hyphens: none; padding: 1em; margin: 0px; overflow: auto; border-radius: 0 0 4px 4px; max-height: 270px;"
62+
>
63+
<code
64+
class="language-javascript"
65+
style="background: rgb(255, 255, 255); color: rgb(56, 56, 56); font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 2; hyphens: none;"
66+
>
67+
<span>
68+
<span
69+
class="linenumber react-syntax-highlighter-line-number"
70+
style="display: inline-block; min-width: 1.25em; padding-right: 1em; text-align: right; user-select: none; font-style: italic; color: rgb(160, 160, 160);"
71+
>
72+
1
73+
</span>
74+
<span
75+
class="token"
76+
style="color: rgb(38, 38, 38);"
77+
>
78+
const
79+
</span>
80+
<span>
81+
a
82+
</span>
83+
<span
84+
class="token"
85+
style="color: rgb(64, 64, 64);"
86+
>
87+
=
88+
</span>
89+
<span>
90+
91+
</span>
92+
<span
93+
class="token"
94+
style="color: rgb(1, 1, 1);"
95+
>
96+
1
97+
</span>
98+
</span>
99+
</code>
100+
</pre>
101+
</div>
102+
</DocumentFragment>
103+
`;
104+
105+
exports[`Test Chat CodeBlock Match snapshot: normal 2`] = `
106+
<DocumentFragment>
107+
<div
108+
class="dtc__aigc__codeblock dtc__aigc__codeblock--convert"
109+
>
110+
<div
111+
class="dtc__aigc__codeblock__header"
112+
>
113+
<span
114+
class="dtc__aigc__codeblock__language"
115+
>
116+
javascript
117+
</span>
118+
<div
119+
class="dtc__aigc__codeblock__tool"
120+
>
121+
<span
122+
class="dtc-copy"
123+
>
124+
<span
125+
class="dtc__icon"
126+
>
127+
<svg
128+
height="1em"
129+
viewBox="0 0 16 16"
130+
width="1em"
131+
xmlns="http://www.w3.org/2000/svg"
132+
>
133+
<g
134+
fill="none"
135+
fill-rule="evenodd"
136+
stroke="none"
137+
stroke-width="1"
138+
>
139+
<g
140+
transform="translate(-340 -367)"
141+
>
142+
<g
143+
transform="translate(201 320)"
144+
>
145+
<g
146+
transform="translate(139 47)"
147+
>
148+
<path
149+
d="M11 1.5A1.5 1.5 0 0112.5 3v.25h.5a1.5 1.5 0 011.5 1.5v8a1.5 1.5 0 01-1.5 1.5H5a1.5 1.5 0 01-1.5-1.5v-.25H3a1.5 1.5 0 01-1.493-1.356L1.5 11V3A1.5 1.5 0 013 1.5zm1.5 9.5a1.5 1.5 0 01-1.5 1.5H4.5v.25a.5.5 0 00.5.5h8a.5.5 0 00.5-.5v-8a.5.5 0 00-.5-.5h-.5zM11 2.5H3a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V3a.5.5 0 00-.5-.5zm-4 1a.5.5 0 01.5.5v2.5H10a.5.5 0 110 1H7.5V10a.5.5 0 11-1 0V7.5H4a.5.5 0 010-1h2.5V4a.5.5 0 01.5-.5z"
150+
fill="currentColor"
151+
/>
152+
</g>
153+
</g>
154+
</g>
155+
</g>
156+
</svg>
157+
</span>
158+
</span>
159+
</div>
160+
</div>
161+
<pre
162+
style="background: rgb(249, 249, 250); color: rgb(56, 56, 56); font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 2; hyphens: none; padding: 1em; margin: 0px; overflow: auto; border-radius: 0 0 4px 4px; max-height: 270px;"
163+
>
164+
<code
165+
class="language-javascript"
166+
style="background: rgb(249, 249, 250); color: rgb(56, 56, 56); font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 2; hyphens: none;"
167+
>
168+
<span>
169+
<span
170+
class="linenumber react-syntax-highlighter-line-number"
171+
style="display: inline-block; min-width: 1.25em; padding-right: 1em; text-align: right; user-select: none; font-style: italic; color: rgb(160, 160, 160);"
172+
>
173+
1
174+
</span>
175+
<span
176+
class="token"
177+
style="color: rgb(38, 38, 38);"
178+
>
179+
const
180+
</span>
181+
<span>
182+
a
183+
</span>
184+
<span
185+
class="token"
186+
style="color: rgb(64, 64, 64);"
187+
>
188+
=
189+
</span>
190+
<span>
191+
192+
</span>
193+
<span
194+
class="token"
195+
style="color: rgb(1, 1, 1);"
196+
>
197+
1
198+
</span>
199+
</span>
200+
</code>
201+
</pre>
202+
</div>
203+
</DocumentFragment>
204+
`;

‎src/chat/__tests__/__snapshots__/content.test.tsx.snap

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Test Chat Content Match snapshot: normal 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="dtc__aigc__content__container dtc__aigc__content__container--valid"
7+
>
8+
<div
9+
class="dtc__aigc__content__inner__holder"
10+
>
11+
<pre
12+
data-testid="fakePrompt"
13+
>
14+
{"data":{"id":"1","createdAt":1736479532239,"title":"What is your name?","messages":[{"id":"1","createdAt":1736479532239,"content":"My Name is dt-react-component","status":0}]}}
15+
</pre>
16+
<div
17+
data-testid="fakeMessage"
18+
>
19+
<pre>
20+
{"prompt":{"id":"1","createdAt":1736479532239,"title":"What is your name?","messages":[{"id":"1","createdAt":1736479532239,"content":"My Name is dt-react-component","status":0}]},"data":[{"id":"1","createdAt":1736479532239,"content":"My Name is dt-react-component","status":0}],"regenerate":true}
21+
</pre>
22+
<button
23+
data-testid="fakeOnRegenerate"
24+
>
25+
onRegenerate
26+
</button>
27+
<button
28+
data-testid="fakeOnStop"
29+
>
30+
onStop
31+
</button>
32+
<button
33+
data-testid="fakeOnLazyRendered"
34+
>
35+
onLazyRendered
36+
</button>
37+
</div>
38+
</div>
39+
</div>
40+
</DocumentFragment>
41+
`;
42+
43+
exports[`Test Chat Content Match snapshot: placeholder 1`] = `
44+
<DocumentFragment>
45+
<div
46+
class="dtc__aigc__content__container"
47+
>
48+
<div>
49+
placeholder
50+
</div>
51+
<span
52+
class="dtc__icon"
53+
style="font-size: 200px; position: absolute; right: 0px; bottom: -100px;"
54+
>
55+
<svg
56+
fill="none"
57+
height="1em"
58+
viewBox="0 0 268 265"
59+
width="1em"
60+
xmlns="http://www.w3.org/2000/svg"
61+
>
62+
<path
63+
clip-rule="evenodd"
64+
d="M210.656 14.094c0-7.266-5.89-13.156-13.156-13.156-7.266 0-13.156 5.89-13.156 13.156V27.25h-72.36c-14.532 0-26.312 11.78-26.312 26.313V237.75c0 14.532 11.78 26.313 26.312 26.313h171.032c14.532 0 26.312-11.781 26.312-26.313V53.562c0-14.531-11.78-26.312-26.312-26.312h-72.36V14.094zm72.36 39.468H111.984V237.75h171.032V53.562zm-111.828 85.516c0 10.899-8.836 19.735-19.735 19.735s-19.734-8.836-19.734-19.735 8.835-19.734 19.734-19.734c10.899 0 19.735 8.835 19.735 19.734zm-105.25-32.89c0-7.267-5.89-13.157-13.157-13.157-7.266 0-13.156 5.89-13.156 13.157v78.937c0 7.266 5.89 13.156 13.156 13.156 7.266 0 13.157-5.89 13.157-13.156v-78.937zm-52.626 13.156c7.266 0 13.157 5.89 13.157 13.156v26.313c0 7.266-5.89 13.156-13.157 13.156-7.265 0-13.156-5.89-13.156-13.156V132.5c0-7.266 5.89-13.156 13.156-13.156zM394.844 132.5c0-7.266-5.89-13.156-13.156-13.156-7.266 0-13.157 5.89-13.157 13.156v26.313c0 7.266 5.891 13.156 13.157 13.156s13.156-5.89 13.156-13.156V132.5zm-52.625-39.469c7.266 0 13.156 5.89 13.156 13.157v78.937c0 7.266-5.89 13.156-13.156 13.156-7.266 0-13.156-5.89-13.156-13.156v-78.937c0-7.267 5.89-13.157 13.156-13.157zm-98.672 65.782c10.899 0 19.734-8.836 19.734-19.735s-8.835-19.734-19.734-19.734c-10.899 0-19.734 8.835-19.734 19.734 0 10.899 8.835 19.735 19.734 19.735z"
65+
fill="url(#paint0_linear_1290_3143)"
66+
fill-opacity="0.03"
67+
fill-rule="evenodd"
68+
/>
69+
<defs>
70+
<lineargradient
71+
gradientUnits="userSpaceOnUse"
72+
id="paint0_linear_1290_3143"
73+
x1="0.156"
74+
x2="415.745"
75+
y1="0.938"
76+
y2="225.356"
77+
>
78+
<stop
79+
stop-color="#00BAC6"
80+
/>
81+
<stop
82+
offset="0.5"
83+
stop-color="#0067FF"
84+
/>
85+
<stop
86+
offset="1"
87+
stop-color="#450FDE"
88+
/>
89+
</lineargradient>
90+
</defs>
91+
</svg>
92+
</span>
93+
</div>
94+
</DocumentFragment>
95+
`;

0 commit comments

Comments
 (0)