@xiping/react-components 1.0.8 → 1.0.9

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 (5) hide show
  1. package/dist/cjs/components/message/Message.js +1 -1
  2. package/dist/cjs/react-components.css +1 -1
  3. package/dist/es/components/message/Message.js +189 -101
  4. package/dist/es/react-components.css +1 -1
  5. package/package.json +4 -3
package/dist/es/components/message/Message.js CHANGED
@@ -1,122 +1,210 @@
1
- import { jsxs as n, jsx as e, Fragment as p } from "react/jsx-runtime";
2
- import { useState as B } from "react";
1
+ import { jsxs as s, jsx as e, Fragment as y } from "react/jsx-runtime";
2
+ import { useState as x } from "react";
3
+ import n from "react-markdown";
3
4
  /* empty css */
4
- const S = ({
5
- id: w,
6
- content: l,
7
- sender: i,
5
+ const q = ({
6
+ id: j,
7
+ content: o,
8
+ sender: t,
8
9
  timestamp: d,
9
10
  isThinking: c = !1,
10
- isLoading: x = !1,
11
- className: b = "",
12
- style: L = {},
13
- showTimestamp: o = !0,
11
+ isLoading: V = !1,
12
+ className: B = "",
13
+ style: H = {},
14
+ showTimestamp: h = !0,
14
15
  avatarUser: m,
15
- avatarAssistant: h,
16
- thinkingText: C = "思考中...",
17
- customThinkingComponent: g,
18
- customUserMessageComponent: u,
19
- customAssistantMessageComponent: N,
20
- parseContent: j = !1,
21
- parsedContent: I,
22
- thinkContent: $,
23
- knowledgeSources: r
16
+ avatarAssistant: g,
17
+ thinkingText: M = "思考中...",
18
+ customThinkingComponent: u,
19
+ customUserMessageComponent: p,
20
+ customAssistantMessageComponent: k,
21
+ parseContent: W = !1,
22
+ parsedContent: v,
23
+ thinkContent: a,
24
+ knowledgeSources: l
24
25
  }) => {
25
- const [a, T] = B(!0);
26
- console.log(w, "id");
27
- const v = (s) => s.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), k = () => g || /* @__PURE__ */ n("div", { className: "message-thinking", children: [
28
- /* @__PURE__ */ n("div", { className: "message-thinking-dots", children: [
26
+ const [r, N] = x(!0), [$, w] = x("idle");
27
+ console.log(j, "id");
28
+ const f = (i) => i.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), I = async () => {
29
+ try {
30
+ await navigator.clipboard.writeText(o), w("copied"), setTimeout(() => w("idle"), 2e3);
31
+ } catch (i) {
32
+ console.error("复制失败:", i);
33
+ }
34
+ }, C = () => u || /* @__PURE__ */ s("div", { className: "message-thinking", children: [
35
+ /* @__PURE__ */ s("div", { className: "message-thinking-dots", children: [
29
36
  /* @__PURE__ */ e("span", {}),
30
37
  /* @__PURE__ */ e("span", {}),
31
38
  /* @__PURE__ */ e("span", {})
32
39
  ] }),
33
- /* @__PURE__ */ e("span", { className: "message-thinking-text", children: C })
34
- ] }), V = () => /* @__PURE__ */ e("div", { className: "message-loading", children: /* @__PURE__ */ e("div", { className: "message-loading-spinner" }) }), f = () => !r || r.length === 0 ? null : /* @__PURE__ */ n("div", { className: "message-knowledge-sources", children: [
40
+ /* @__PURE__ */ e("span", { className: "message-thinking-text", children: M })
41
+ ] }), S = () => /* @__PURE__ */ e("div", { className: "message-loading", children: /* @__PURE__ */ e("div", { className: "message-loading-spinner" }) }), L = () => !l || l.length === 0 ? null : /* @__PURE__ */ s("div", { className: "message-knowledge-sources", children: [
35
42
  /* @__PURE__ */ e("div", { className: "message-knowledge-sources-header", children: "知识来源：" }),
36
- /* @__PURE__ */ e("ul", { className: "message-knowledge-sources-list", children: r.map((s, t) => /* @__PURE__ */ n("li", { className: "message-knowledge-source-item", children: [
37
- s.url ? /* @__PURE__ */ e("a", { href: s.url, target: "_blank", rel: "noopener noreferrer", children: s.title }) : /* @__PURE__ */ e("span", { children: s.title }),
38
- s.description && /* @__PURE__ */ e("div", { className: "message-knowledge-source-description", children: s.description })
39
- ] }, t)) })
40
- ] }), y = () => {
41
- if (x)
42
- return V();
43
- if (i === "user" && u)
44
- return u;
45
- if (i === "assistant" && N)
46
- return N;
47
- if (j && i === "assistant") {
48
- const s = I || l, t = $;
49
- return /* @__PURE__ */ n(p, { children: [
50
- c && k(),
51
- s && /* @__PURE__ */ e("div", { className: "message-text", children: s }),
52
- t && /* @__PURE__ */ n("div", { className: "message-think", children: [
53
- /* @__PURE__ */ n("div", { className: "message-think-header", children: [
54
- "思考过程：",
43
+ /* @__PURE__ */ e("ul", { className: "message-knowledge-sources-list", children: l.map((i, F) => /* @__PURE__ */ s("li", { className: "message-knowledge-source-item", children: [
44
+ i.url ? /* @__PURE__ */ e("a", { href: i.url, target: "_blank", rel: "noopener noreferrer", children: i.title }) : /* @__PURE__ */ e("span", { children: i.title }),
45
+ i.description && /* @__PURE__ */ e("div", { className: "message-knowledge-source-description", children: i.description })
46
+ ] }, F)) })
47
+ ] }), b = () => t === "user" ? null : /* @__PURE__ */ s(
48
+ "button",
49
+ {
50
+ className: "message-copy-button",
51
+ onClick: I,
52
+ "aria-label": "Copy message",
53
+ title: "Copy message",
54
+ children: [
55
+ /* @__PURE__ */ s(
56
+ "svg",
57
+ {
58
+ width: "14",
59
+ height: "14",
60
+ viewBox: "0 0 16 16",
61
+ fill: "none",
62
+ xmlns: "http://www.w3.org/2000/svg",
63
+ children: [
64
+ /* @__PURE__ */ e(
65
+ "path",
66
+ {
67
+ d: "M13.3333 6H7.33333C6.59695 6 6 6.59695 6 7.33333V13.3333C6 14.0697 6.59695 14.6667 7.33333 14.6667H13.3333C14.0697 14.6667 14.6667 14.0697 14.6667 13.3333V7.33333C14.6667 6.59695 14.0697 6 13.3333 6Z",
68
+ stroke: "currentColor",
69
+ strokeWidth: "1.5",
70
+ strokeLinecap: "round",
71
+ strokeLinejoin: "round"
72
+ }
73
+ ),
74
+ /* @__PURE__ */ e(
75
+ "path",
76
+ {
77
+ d: "M3.33333 10H2.66667C2.31305 10 1.97391 9.85953 1.72386 9.60948C1.47381 9.35943 1.33334 9.02029 1.33334 8.66667V2.66667C1.33334 2.31305 1.47381 1.97391 1.72386 1.72386C1.97391 1.47381 2.31305 1.33334 2.66667 1.33334H8.66667C9.02029 1.33334 9.35943 1.47381 9.60948 1.72386C9.85953 1.97391 10 2.31305 10 2.66667V3.33334",
78
+ stroke: "currentColor",
79
+ strokeWidth: "1.5",
80
+ strokeLinecap: "round",
81
+ strokeLinejoin: "round"
82
+ }
83
+ )
84
+ ]
85
+ }
86
+ ),
87
+ $ === "copied" && /* @__PURE__ */ e("span", { className: "message-copy-tooltip", children: "Copied" })
88
+ ]
89
+ }
90
+ );
91
+ return t === "user" && p ? p : t === "assistant" && k ? k : /* @__PURE__ */ s(
92
+ "div",
93
+ {
94
+ className: `message ${t === "user" ? "user" : "assistant"} ${B}`,
95
+ style: H,
96
+ children: [
97
+ t === "user" && m || t === "assistant" && g ? /* @__PURE__ */ e("div", { className: "message-avatar", children: t === "user" ? m : g }) : null,
98
+ /* @__PURE__ */ e("div", { className: "message-content", children: V ? S() : W && t === "assistant" ? /* @__PURE__ */ s(y, { children: [
99
+ a && /* @__PURE__ */ s("div", { className: "message-think", children: [
100
+ /* @__PURE__ */ s("div", { className: "message-think-header", children: [
101
+ "思考过程：",
102
+ /* @__PURE__ */ e(
103
+ "button",
104
+ {
105
+ className: "message-think-toggle",
106
+ onClick: () => N(!r),
107
+ "aria-label": r ? "隐藏思考过程" : "显示思考过程",
108
+ children: /* @__PURE__ */ e(
109
+ "svg",
110
+ {
111
+ width: "12",
112
+ height: "12",
113
+ viewBox: "0 0 12 12",
114
+ fill: "none",
115
+ xmlns: "http://www.w3.org/2000/svg",
116
+ style: {
117
+ transform: r ? "rotate(180deg)" : "rotate(0deg)",
118
+ transition: "transform 0.3s ease"
119
+ },
120
+ children: /* @__PURE__ */ e(
121
+ "path",
122
+ {
123
+ d: "M2 4L6 8L10 4",
124
+ stroke: "currentColor",
125
+ strokeWidth: "1.5",
126
+ strokeLinecap: "round",
127
+ strokeLinejoin: "round"
128
+ }
129
+ )
130
+ }
131
+ )
132
+ }
133
+ )
134
+ ] }),
55
135
  /* @__PURE__ */ e(
56
- "button",
136
+ "div",
57
137
  {
58
- className: "message-think-toggle",
59
- onClick: () => T(!a),
60
- "aria-label": a ? "隐藏思考过程" : "显示思考过程",
61
- children: /* @__PURE__ */ e(
62
- "svg",
63
- {
64
- width: "12",
65
- height: "12",
66
- viewBox: "0 0 12 12",
67
- fill: "none",
68
- xmlns: "http://www.w3.org/2000/svg",
69
- style: {
70
- transform: a ? "rotate(180deg)" : "rotate(0deg)",
71
- transition: "transform 0.3s ease"
72
- },
73
- children: /* @__PURE__ */ e(
74
- "path",
75
- {
76
- d: "M2 4L6 8L10 4",
77
- stroke: "currentColor",
78
- strokeWidth: "1.5",
79
- strokeLinecap: "round",
80
- strokeLinejoin: "round"
81
- }
82
- )
83
- }
84
- )
138
+ className: `message-think-content ${r ? "visible" : "hidden"}`,
139
+ children: /* @__PURE__ */ e(n, { children: a })
85
140
  }
86
141
  )
87
142
  ] }),
88
- /* @__PURE__ */ e(
89
- "div",
90
- {
91
- className: `message-think-content ${a ? "visible" : "hidden"}`,
92
- children: t
93
- }
94
- )
95
- ] }),
96
- f(),
97
- o && /* @__PURE__ */ e("div", { className: "message-timestamp", children: v(d) })
98
- ] });
99
- }
100
- return /* @__PURE__ */ n(p, { children: [
101
- /* @__PURE__ */ e("div", { className: "message-text", children: l }),
102
- c && k(),
103
- f(),
104
- o && /* @__PURE__ */ e("div", { className: "message-timestamp", children: v(d) })
105
- ] });
106
- };
107
- return /* @__PURE__ */ n(
108
- "div",
109
- {
110
- className: `message ${i === "user" ? "user" : "assistant"} ${b}`,
111
- style: L,
112
- children: [
113
- i === "user" && m || i === "assistant" && h ? /* @__PURE__ */ e("div", { className: "message-avatar", children: i === "user" ? m : h }) : null,
114
- /* @__PURE__ */ e("div", { className: "message-content", children: y() })
143
+ c && C(),
144
+ v && /* @__PURE__ */ s("div", { className: "message-text-container", children: [
145
+ /* @__PURE__ */ e("div", { className: "message-text", children: /* @__PURE__ */ e(n, { children: v }) }),
146
+ b()
147
+ ] }),
148
+ L(),
149
+ h && /* @__PURE__ */ e("div", { className: "message-timestamp", children: f(d) })
150
+ ] }) : /* @__PURE__ */ s(y, { children: [
151
+ a && /* @__PURE__ */ s("div", { className: "message-think", children: [
152
+ /* @__PURE__ */ s("div", { className: "message-think-header", children: [
153
+ "思考过程：",
154
+ /* @__PURE__ */ e(
155
+ "button",
156
+ {
157
+ className: "message-think-toggle",
158
+ onClick: () => N(!r),
159
+ "aria-label": r ? "隐藏思考过程" : "显示思考过程",
160
+ children: /* @__PURE__ */ e(
161
+ "svg",
162
+ {
163
+ width: "12",
164
+ height: "12",
165
+ viewBox: "0 0 12 12",
166
+ fill: "none",
167
+ xmlns: "http://www.w3.org/2000/svg",
168
+ style: {
169
+ transform: r ? "rotate(180deg)" : "rotate(0deg)",
170
+ transition: "transform 0.3s ease"
171
+ },
172
+ children: /* @__PURE__ */ e(
173
+ "path",
174
+ {
175
+ d: "M2 4L6 8L10 4",
176
+ stroke: "currentColor",
177
+ strokeWidth: "1.5",
178
+ strokeLinecap: "round",
179
+ strokeLinejoin: "round"
180
+ }
181
+ )
182
+ }
183
+ )
184
+ }
185
+ )
186
+ ] }),
187
+ /* @__PURE__ */ e(
188
+ "div",
189
+ {
190
+ className: `message-think-content ${r ? "visible" : "hidden"}`,
191
+ children: /* @__PURE__ */ e(n, { children: a })
192
+ }
193
+ )
194
+ ] }),
195
+ /* @__PURE__ */ s("div", { className: "message-text-container", children: [
196
+ /* @__PURE__ */ e("div", { className: "message-text", children: /* @__PURE__ */ e(n, { children: o }) }),
197
+ b()
198
+ ] }),
199
+ c && C(),
200
+ L(),
201
+ h && /* @__PURE__ */ e("div", { className: "message-timestamp", children: f(d) })
202
+ ] }) })
115
203
  ]
116
204
  }
117
205
  );
118
206
  };
119
207
  export {
120
- S as Message,
121
- S as default
208
+ q as Message,
209
+ q as default
122
210
  };