ai-dialogue-react 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +73 -0
  2. package/dist/ai-dialogue-react.js +173 -0
  3. package/dist/ai-dialogue-react.umd.cjs +1 -0
  4. package/dist/favicon.svg +1 -0
  5. package/dist/icons.svg +24 -0
  6. package/dist/image/aibg.png +0 -0
  7. package/dist/image/aibg2.png +0 -0
  8. package/dist/image/nantouxiang@1x.png +0 -0
  9. package/dist/image/nvtouxiang@1x.png +0 -0
  10. package/dist/image/userbg.png +0 -0
  11. package/dist/registry/dialogue-box/dialogue-box.d.ts +52 -0
  12. package/dist/src/index.d.ts +2 -0
  13. package/package.json +62 -0
package/README.md ADDED
@@ -0,0 +1,73 @@
1
+ # React + TypeScript + Vite
2
+
3
+ This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4
+
5
+ Currently, two official plugins are available:
6
+
7
+ - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
8
+ - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
9
+
10
+ ## React Compiler
11
+
12
+ The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
13
+
14
+ ## Expanding the ESLint configuration
15
+
16
+ If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
17
+
18
+ ```js
19
+ export default defineConfig([
20
+ globalIgnores(['dist']),
21
+ {
22
+ files: ['**/*.{ts,tsx}'],
23
+ extends: [
24
+ // Other configs...
25
+
26
+ // Remove tseslint.configs.recommended and replace with this
27
+ tseslint.configs.recommendedTypeChecked,
28
+ // Alternatively, use this for stricter rules
29
+ tseslint.configs.strictTypeChecked,
30
+ // Optionally, add this for stylistic rules
31
+ tseslint.configs.stylisticTypeChecked,
32
+
33
+ // Other configs...
34
+ ],
35
+ languageOptions: {
36
+ parserOptions: {
37
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
38
+ tsconfigRootDir: import.meta.dirname,
39
+ },
40
+ // other options...
41
+ },
42
+ },
43
+ ])
44
+ ```
45
+
46
+ You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
47
+
48
+ ```js
49
+ // eslint.config.js
50
+ import reactX from 'eslint-plugin-react-x'
51
+ import reactDom from 'eslint-plugin-react-dom'
52
+
53
+ export default defineConfig([
54
+ globalIgnores(['dist']),
55
+ {
56
+ files: ['**/*.{ts,tsx}'],
57
+ extends: [
58
+ // Other configs...
59
+ // Enable lint rules for React
60
+ reactX.configs['recommended-typescript'],
61
+ // Enable lint rules for React DOM
62
+ reactDom.configs.recommended,
63
+ ],
64
+ languageOptions: {
65
+ parserOptions: {
66
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
67
+ tsconfigRootDir: import.meta.dirname,
68
+ },
69
+ // other options...
70
+ },
71
+ },
72
+ ])
73
+ ```
package/dist/ai-dialogue-react.js ADDED
@@ -0,0 +1,173 @@
1
+ import { useEffect as e, useRef as t, useState as n } from "react";
2
+ import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
3
+ //#region registry/dialogue-box/dialogue-box.tsx
4
+ var o = [
5
+ ".dlg-no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}",
6
+ ".dlg-no-scrollbar::-webkit-scrollbar{display:none}",
7
+ "@keyframes dlg-slide-in-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}",
8
+ ".dlg-slide-in-up{animation:.5s ease-out forwards dlg-slide-in-up}"
9
+ ].join("");
10
+ function s() {
11
+ e(() => {
12
+ if (typeof document > "u") return;
13
+ let e = "__dialogue-box-styles__";
14
+ if (document.getElementById(e)) return;
15
+ let t = document.createElement("style");
16
+ t.id = e, t.textContent = o, document.head.appendChild(t);
17
+ }, []);
18
+ }
19
+ var c = "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"128\" height=\"128\" viewBox=\"0 0 128 128\"><rect width=\"128\" height=\"128\" rx=\"16\" fill=\"%234A90D9\"/><circle cx=\"64\" cy=\"48\" r=\"24\" fill=\"white\"/><ellipse cx=\"64\" cy=\"100\" rx=\"36\" ry=\"22\" fill=\"white\"/></svg>", l = "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"128\" height=\"128\" viewBox=\"0 0 128 128\"><rect width=\"128\" height=\"128\" rx=\"16\" fill=\"%23A855F7\"/><circle cx=\"64\" cy=\"48\" r=\"24\" fill=\"white\"/><ellipse cx=\"64\" cy=\"100\" rx=\"36\" ry=\"22\" fill=\"white\"/></svg>";
20
+ function u(e, t) {
21
+ return e ? {
22
+ backgroundImage: `url(${e})`,
23
+ backgroundSize: "100% 100%"
24
+ } : { background: t };
25
+ }
26
+ function d(...e) {
27
+ return e.filter(Boolean).join(" ");
28
+ }
29
+ function f({ text: a, speed: o = 40 }) {
30
+ let [s, c] = n(""), l = t({
31
+ target: a,
32
+ pos: 0
33
+ });
34
+ return e(() => {
35
+ let e = l.current;
36
+ a !== e.target && (a.startsWith(e.target) ? e.target = a : (l.current = {
37
+ target: a,
38
+ pos: 0
39
+ }, c("")));
40
+ }, [a]), e(() => {
41
+ let e = l.current;
42
+ if (e.pos >= e.target.length) return;
43
+ let t = setTimeout(() => {
44
+ e.pos += 1, c(e.target.slice(0, e.pos));
45
+ }, o);
46
+ return () => clearTimeout(t);
47
+ }, [s, o]), /* @__PURE__ */ i(r, { children: s });
48
+ }
49
+ function p({ messages: n, partialText: r = "", aiPartialText: o = "", language: p = "zh", userAvatarUrl: m = c, aiAvatarUrl: h = l, userBubbleBgUrl: g, aiBubbleBgUrl: _, aiBubbleBgLongUrl: v, typewriterSpeed: y = 40, className: b, style: x, avatarClassName: S, avatarStyle: C, nameClassName: w, nameStyle: T, userBubbleClassName: E, userBubbleStyle: D, aiBubbleClassName: O, aiBubbleStyle: k, partialTextColor: A = "#ffd54f" }) {
50
+ s();
51
+ let j = t(null);
52
+ e(() => {
53
+ j.current?.scrollTo({
54
+ top: j.current.scrollHeight,
55
+ behavior: "smooth"
56
+ });
57
+ }, [
58
+ n,
59
+ r,
60
+ o
61
+ ]);
62
+ let M = n.length + +!!r, N = b ?? "relative w-[1000px] h-[653px] overflow-y-auto flex flex-col gap-8 dlg-no-scrollbar", P = {
63
+ user: p === "zh" ? "用户" : "User",
64
+ ai: p === "zh" ? "AI助理" : "AI Assistant",
65
+ userLive: p === "zh" ? "用户(实时)" : "User (Real-time)",
66
+ aiLive: p === "zh" ? "AI助理(实时)" : "AI Assistant (Real-time)"
67
+ }, F = d("w-32 h-32 rounded-2xl shrink-0 bg-gray-300", S), I = d("text-[40px] text-[#213140]", w), L = d("p-10.5 min-h-32 text-[40px] leading-tight", E), R = d("p-10.5 min-h-32 text-[40px] leading-tight flex items-center", O);
68
+ return /* @__PURE__ */ a("div", {
69
+ ref: j,
70
+ className: N,
71
+ style: x,
72
+ children: [
73
+ n.map((e, t) => {
74
+ let n = t < M - 3, r = t === M - 3, o = t === M - 1, s = e.type === "user";
75
+ return /* @__PURE__ */ a("div", {
76
+ className: d("flex gap-4 w-full transition-opacity duration-500 ease-out shrink-0", n ? "opacity-0" : r ? "opacity-50" : "opacity-100", o ? "dlg-slide-in-up" : ""),
77
+ children: [/* @__PURE__ */ i("div", {
78
+ className: F,
79
+ style: {
80
+ backgroundImage: `url(${s ? m : h})`,
81
+ backgroundSize: "cover",
82
+ backgroundPosition: "center",
83
+ ...C
84
+ }
85
+ }), /* @__PURE__ */ a("div", {
86
+ className: "flex flex-col gap-2 max-w-[80%]",
87
+ children: [/* @__PURE__ */ i("div", {
88
+ className: I,
89
+ style: T,
90
+ children: e.name || (s ? P.user : P.ai)
91
+ }), /* @__PURE__ */ i("div", {
92
+ className: s ? L : R,
93
+ style: {
94
+ ...u(s ? g : e.content.length <= 5 ? _ : v, s ? "#4A90D9" : "#E8E8E8"),
95
+ color: s ? "#FFFFFF" : "#000",
96
+ ...s ? D : k
97
+ },
98
+ children: /* @__PURE__ */ i(f, {
99
+ text: e.content,
100
+ speed: y
101
+ }, e.id)
102
+ })]
103
+ })]
104
+ }, e.id);
105
+ }),
106
+ r && /* @__PURE__ */ a("div", {
107
+ className: "flex gap-4 w-full transition-opacity duration-500 ease-out shrink-0 opacity-100 dlg-slide-in-up",
108
+ children: [/* @__PURE__ */ i("div", {
109
+ className: F,
110
+ style: {
111
+ backgroundImage: `url(${m})`,
112
+ backgroundSize: "cover",
113
+ backgroundPosition: "center",
114
+ ...C
115
+ }
116
+ }), /* @__PURE__ */ a("div", {
117
+ className: "flex flex-col gap-2 max-w-[80%]",
118
+ children: [/* @__PURE__ */ i("div", {
119
+ className: I,
120
+ style: T,
121
+ children: P.userLive
122
+ }), /* @__PURE__ */ i("div", {
123
+ className: L,
124
+ style: {
125
+ ...u(g, "#4A90D9"),
126
+ color: "#FFFFFF",
127
+ ...D
128
+ },
129
+ children: /* @__PURE__ */ i("div", {
130
+ style: { color: A },
131
+ children: /* @__PURE__ */ i(f, {
132
+ text: r,
133
+ speed: y
134
+ })
135
+ })
136
+ })]
137
+ })]
138
+ }),
139
+ o && /* @__PURE__ */ a("div", {
140
+ className: "flex gap-4 w-full transition-opacity duration-500 ease-out shrink-0 opacity-100 dlg-slide-in-up",
141
+ children: [/* @__PURE__ */ i("div", {
142
+ className: F,
143
+ style: {
144
+ backgroundImage: `url(${h})`,
145
+ backgroundSize: "cover",
146
+ backgroundPosition: "center",
147
+ ...C
148
+ }
149
+ }), /* @__PURE__ */ a("div", {
150
+ className: "flex flex-col gap-2 max-w-[80%]",
151
+ children: [/* @__PURE__ */ i("div", {
152
+ className: I,
153
+ style: T,
154
+ children: P.aiLive
155
+ }), /* @__PURE__ */ i("div", {
156
+ className: R,
157
+ style: {
158
+ ...u(o.length <= 5 ? _ : v, "#E8E8E8"),
159
+ color: "#000",
160
+ ...k
161
+ },
162
+ children: /* @__PURE__ */ i(f, {
163
+ text: o,
164
+ speed: y
165
+ })
166
+ })]
167
+ })]
168
+ })
169
+ ]
170
+ });
171
+ }
172
+ //#endregion
173
+ export { p as DialogueBox };
package/dist/ai-dialogue-react.umd.cjs ADDED
@@ -0,0 +1 @@
1
+ (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`),require(`react/jsx-runtime`)):typeof define==`function`&&define.amd?define([`exports`,`react`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.AiDialogueReact={},e.React,e.ReactJsxRuntime))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=[`.dlg-no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}`,`.dlg-no-scrollbar::-webkit-scrollbar{display:none}`,`@keyframes dlg-slide-in-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}`,`.dlg-slide-in-up{animation:.5s ease-out forwards dlg-slide-in-up}`].join(``);function i(){(0,t.useEffect)(()=>{if(typeof document>`u`)return;let e=`__dialogue-box-styles__`;if(document.getElementById(e))return;let t=document.createElement(`style`);t.id=e,t.textContent=r,document.head.appendChild(t)},[])}var a=`data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><rect width="128" height="128" rx="16" fill="%234A90D9"/><circle cx="64" cy="48" r="24" fill="white"/><ellipse cx="64" cy="100" rx="36" ry="22" fill="white"/></svg>`,o=`data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><rect width="128" height="128" rx="16" fill="%23A855F7"/><circle cx="64" cy="48" r="24" fill="white"/><ellipse cx="64" cy="100" rx="36" ry="22" fill="white"/></svg>`;function s(e,t){return e?{backgroundImage:`url(${e})`,backgroundSize:`100% 100%`}:{background:t}}function c(...e){return e.filter(Boolean).join(` `)}function l({text:e,speed:r=40}){let[i,a]=(0,t.useState)(``),o=(0,t.useRef)({target:e,pos:0});return(0,t.useEffect)(()=>{let t=o.current;e!==t.target&&(e.startsWith(t.target)?t.target=e:(o.current={target:e,pos:0},a(``)))},[e]),(0,t.useEffect)(()=>{let e=o.current;if(e.pos>=e.target.length)return;let t=setTimeout(()=>{e.pos+=1,a(e.target.slice(0,e.pos))},r);return()=>clearTimeout(t)},[i,r]),(0,n.jsx)(n.Fragment,{children:i})}function u({messages:e,partialText:r=``,aiPartialText:u=``,language:d=`zh`,userAvatarUrl:f=a,aiAvatarUrl:p=o,userBubbleBgUrl:m,aiBubbleBgUrl:h,aiBubbleBgLongUrl:g,typewriterSpeed:_=40,className:v,style:y,avatarClassName:b,avatarStyle:x,nameClassName:S,nameStyle:C,userBubbleClassName:w,userBubbleStyle:T,aiBubbleClassName:E,aiBubbleStyle:D,partialTextColor:O=`#ffd54f`}){i();let k=(0,t.useRef)(null);(0,t.useEffect)(()=>{k.current?.scrollTo({top:k.current.scrollHeight,behavior:`smooth`})},[e,r,u]);let A=e.length+ +!!r,j=v??`relative w-[1000px] h-[653px] overflow-y-auto flex flex-col gap-8 dlg-no-scrollbar`,M={user:d===`zh`?`用户`:`User`,ai:d===`zh`?`AI助理`:`AI Assistant`,userLive:d===`zh`?`用户(实时)`:`User (Real-time)`,aiLive:d===`zh`?`AI助理(实时)`:`AI Assistant (Real-time)`},N=c(`w-32 h-32 rounded-2xl shrink-0 bg-gray-300`,b),P=c(`text-[40px] text-[#213140]`,S),F=c(`p-10.5 min-h-32 text-[40px] leading-tight`,w),I=c(`p-10.5 min-h-32 text-[40px] leading-tight flex items-center`,E);return(0,n.jsxs)(`div`,{ref:k,className:j,style:y,children:[e.map((e,t)=>{let r=t<A-3,i=t===A-3,a=t===A-1,o=e.type===`user`;return(0,n.jsxs)(`div`,{className:c(`flex gap-4 w-full transition-opacity duration-500 ease-out shrink-0`,r?`opacity-0`:i?`opacity-50`:`opacity-100`,a?`dlg-slide-in-up`:``),children:[(0,n.jsx)(`div`,{className:N,style:{backgroundImage:`url(${o?f:p})`,backgroundSize:`cover`,backgroundPosition:`center`,...x}}),(0,n.jsxs)(`div`,{className:`flex flex-col gap-2 max-w-[80%]`,children:[(0,n.jsx)(`div`,{className:P,style:C,children:e.name||(o?M.user:M.ai)}),(0,n.jsx)(`div`,{className:o?F:I,style:{...s(o?m:e.content.length<=5?h:g,o?`#4A90D9`:`#E8E8E8`),color:o?`#FFFFFF`:`#000`,...o?T:D},children:(0,n.jsx)(l,{text:e.content,speed:_},e.id)})]})]},e.id)}),r&&(0,n.jsxs)(`div`,{className:`flex gap-4 w-full transition-opacity duration-500 ease-out shrink-0 opacity-100 dlg-slide-in-up`,children:[(0,n.jsx)(`div`,{className:N,style:{backgroundImage:`url(${f})`,backgroundSize:`cover`,backgroundPosition:`center`,...x}}),(0,n.jsxs)(`div`,{className:`flex flex-col gap-2 max-w-[80%]`,children:[(0,n.jsx)(`div`,{className:P,style:C,children:M.userLive}),(0,n.jsx)(`div`,{className:F,style:{...s(m,`#4A90D9`),color:`#FFFFFF`,...T},children:(0,n.jsx)(`div`,{style:{color:O},children:(0,n.jsx)(l,{text:r,speed:_})})})]})]}),u&&(0,n.jsxs)(`div`,{className:`flex gap-4 w-full transition-opacity duration-500 ease-out shrink-0 opacity-100 dlg-slide-in-up`,children:[(0,n.jsx)(`div`,{className:N,style:{backgroundImage:`url(${p})`,backgroundSize:`cover`,backgroundPosition:`center`,...x}}),(0,n.jsxs)(`div`,{className:`flex flex-col gap-2 max-w-[80%]`,children:[(0,n.jsx)(`div`,{className:P,style:C,children:M.aiLive}),(0,n.jsx)(`div`,{className:I,style:{...s(u.length<=5?h:g,`#E8E8E8`),color:`#000`,...D},children:(0,n.jsx)(l,{text:u,speed:_})})]})]})]})}e.DialogueBox=u});
package/dist/favicon.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
package/dist/icons.svg ADDED
@@ -0,0 +1,24 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg">
2
+ <symbol id="bluesky-icon" viewBox="0 0 16 17">
3
+ <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
4
+ <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
5
+ </symbol>
6
+ <symbol id="discord-icon" viewBox="0 0 20 19">
7
+ <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
8
+ </symbol>
9
+ <symbol id="documentation-icon" viewBox="0 0 21 20">
10
+ <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
11
+ <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
12
+ <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
13
+ </symbol>
14
+ <symbol id="github-icon" viewBox="0 0 19 19">
15
+ <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
16
+ </symbol>
17
+ <symbol id="social-icon" viewBox="0 0 20 20">
18
+ <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
19
+ <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
20
+ </symbol>
21
+ <symbol id="x-icon" viewBox="0 0 19 19">
22
+ <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
23
+ </symbol>
24
+ </svg>
package/dist/image/aibg.png ADDED
Binary file
package/dist/image/aibg2.png ADDED
Binary file
package/dist/image/nantouxiang@1x.png ADDED
Binary file
package/dist/image/nvtouxiang@1x.png ADDED
Binary file
package/dist/image/userbg.png ADDED
Binary file
package/dist/registry/dialogue-box/dialogue-box.d.ts ADDED
@@ -0,0 +1,52 @@
1
+ import { CSSProperties } from 'react';
2
+ export interface Message {
3
+ id: number;
4
+ type: 'ai' | 'user';
5
+ name: string;
6
+ content: string;
7
+ }
8
+ export interface DialogueBoxProps {
9
+ /** 已完成的对话消息列表 */
10
+ messages: Message[];
11
+ /** 用户实时 ASR 流式文本（彩色气泡） */
12
+ partialText?: string;
13
+ /** AI 实时流式文本 */
14
+ aiPartialText?: string;
15
+ /** 界面语言，控制名称标签文案 */
16
+ language?: 'zh' | 'en';
17
+ /** 用户头像图片 URL */
18
+ userAvatarUrl?: string;
19
+ /** AI 头像图片 URL */
20
+ aiAvatarUrl?: string;
21
+ /** 用户气泡背景图 URL（100% 100% 拉伸） */
22
+ userBubbleBgUrl?: string;
23
+ /** AI 气泡背景图 URL（文字 ≤ 5 字时） */
24
+ aiBubbleBgUrl?: string;
25
+ /** AI 气泡背景图 URL（文字 > 5 字时） */
26
+ aiBubbleBgLongUrl?: string;
27
+ /** 打字机速度（ms/字），默认 40 */
28
+ typewriterSpeed?: number;
29
+ /** 滚动容器 className */
30
+ className?: string;
31
+ /** 滚动容器 style */
32
+ style?: CSSProperties;
33
+ /** 头像 className（用户 & AI 共用） */
34
+ avatarClassName?: string;
35
+ /** 头像 style（追加在默认背景图之后） */
36
+ avatarStyle?: CSSProperties;
37
+ /** 名称文字 className */
38
+ nameClassName?: string;
39
+ /** 名称文字 style */
40
+ nameStyle?: CSSProperties;
41
+ /** 用户气泡 className */
42
+ userBubbleClassName?: string;
43
+ /** 用户气泡 style（会覆盖默认文字颜色 #FFF） */
44
+ userBubbleStyle?: CSSProperties;
45
+ /** AI 气泡 className */
46
+ aiBubbleClassName?: string;
47
+ /** AI 气泡 style（会覆盖默认文字颜色 #000） */
48
+ aiBubbleStyle?: CSSProperties;
49
+ /** 用户实时 ASR 文本颜色，默认 #ffd54f（黄色） */
50
+ partialTextColor?: string;
51
+ }
52
+ export declare function DialogueBox({ messages, partialText, aiPartialText, language, userAvatarUrl, aiAvatarUrl, userBubbleBgUrl, aiBubbleBgUrl, aiBubbleBgLongUrl, typewriterSpeed, className, style, avatarClassName, avatarStyle, nameClassName, nameStyle, userBubbleClassName, userBubbleStyle, aiBubbleClassName, aiBubbleStyle, partialTextColor, }: DialogueBoxProps): import("react/jsx-runtime").JSX.Element;
package/dist/src/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { DialogueBox } from '../registry/dialogue-box/dialogue-box';
2
+ export type { DialogueBoxProps, Message } from '../registry/dialogue-box/dialogue-box';
package/package.json ADDED
@@ -0,0 +1,62 @@
1
+ {
2
+ "name": "ai-dialogue-react",
3
+ "version": "0.0.1",
4
+ "type": "module",
5
+ "description": "A pure UI dialogue box component for AI chat applications, built with React and Tailwind CSS.",
6
+ "keywords": ["react", "dialogue", "chat", "ai", "component", "tailwindcss"],
7
+ "author": "huangzusheng",
8
+ "license": "MIT",
9
+ "main": "./dist/ai-dialogue-react.umd.cjs",
10
+ "module": "./dist/ai-dialogue-react.js",
11
+ "types": "./dist/index.d.ts",
12
+ "exports": {
13
+ ".": {
14
+ "import": "./dist/ai-dialogue-react.js",
15
+ "require": "./dist/ai-dialogue-react.umd.cjs",
16
+ "types": "./dist/index.d.ts"
17
+ }
18
+ },
19
+ "files": ["dist"],
20
+ "scripts": {
21
+ "dev": "vite",
22
+ "build": "tsc -b && vite build",
23
+ "build:lib": "tsc -p tsconfig.build.json && vite build --config vite.lib.config.ts",
24
+ "lint": "eslint .",
25
+ "preview": "vite preview",
26
+ "storybook": "storybook dev -p 6006",
27
+ "build-storybook": "storybook build"
28
+ },
29
+ "dependencies": {
30
+ "@tailwindcss/vite": "^4.2.2",
31
+ "react": "^19.2.4",
32
+ "react-dom": "^19.2.4",
33
+ "tailwindcss": "^4.2.2"
34
+ },
35
+ "devDependencies": {
36
+ "@chromatic-com/storybook": "^5.1.1",
37
+ "@eslint/js": "^9.39.4",
38
+ "@storybook/addon-a11y": "^10.3.5",
39
+ "@storybook/addon-docs": "^10.3.5",
40
+ "@storybook/addon-onboarding": "^10.3.5",
41
+ "@storybook/addon-vitest": "^10.3.5",
42
+ "@storybook/react-vite": "^10.3.5",
43
+ "@types/node": "^24.12.2",
44
+ "@types/react": "^19.2.14",
45
+ "@types/react-dom": "^19.2.3",
46
+ "@vitejs/plugin-react": "^6.0.1",
47
+ "@vitest/browser-playwright": "^4.1.3",
48
+ "@vitest/coverage-v8": "^4.1.3",
49
+ "eslint": "^9.39.4",
50
+ "eslint-plugin-react-hooks": "^7.0.1",
51
+ "eslint-plugin-react-refresh": "^0.5.2",
52
+ "eslint-plugin-storybook": "^10.3.5",
53
+ "globals": "^17.4.0",
54
+ "playwright": "^1.59.1",
55
+ "storybook": "^10.3.5",
56
+ "typescript": "~6.0.2",
57
+ "typescript-eslint": "^8.58.0",
58
+ "vite": "^8.0.4",
59
+ "vite-plugin-dts": "^4.5.4",
60
+ "vitest": "^4.1.3"
61
+ }
62
+ }