@devalok/shilp-sutra 0.45.0 → 0.45.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.
- package/dist/_chunks/chat.js +151 -150
- package/dist/_chunks/chat.js.map +1 -1
- package/dist/_chunks/mention.js +5 -0
- package/dist/_chunks/mention.js.map +1 -0
- package/dist/composed/file-preview/video-preview.d.ts.map +1 -1
- package/dist/composed/file-preview.js +18 -16
- package/dist/composed/file-preview.js.map +1 -1
- package/dist/composed/rich-chat-input.d.ts.map +1 -1
- package/dist/composed/rich-chat-input.js +514 -503
- package/dist/composed/rich-chat-input.js.map +1 -1
- package/dist/composed/rich-text-editor.d.ts.map +1 -1
- package/dist/composed/rich-text-editor.js +144 -143
- package/dist/composed/rich-text-editor.js.map +1 -1
- package/dist/ui/chat/message.d.ts.map +1 -1
- package/dist/ui/lib/mention.d.ts +11 -0
- package/dist/ui/lib/mention.d.ts.map +1 -0
- package/docs/components/ui/chat.md +1 -1
- package/llms.txt +1 -1
- package/mcp-manifest.json +1 -1
- package/package.json +6 -1
- package/skill/SKILL.md +1 -1
- package/skill/references/components.md +1 -1
package/dist/_chunks/chat.js
CHANGED
|
@@ -9,45 +9,46 @@ import { t as u } from "./normalize-icon.js";
|
|
|
9
9
|
import { Button as d } from "../ui/button.js";
|
|
10
10
|
import { Textarea as f } from "../ui/textarea.js";
|
|
11
11
|
import { Tooltip as p, TooltipContent as m, TooltipTrigger as h } from "../ui/tooltip.js";
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
12
|
+
import { t as g } from "./mention.js";
|
|
13
|
+
import * as _ from "react";
|
|
14
|
+
import { jsx as v, jsxs as y } from "react/jsx-runtime";
|
|
15
|
+
import { IconAlertCircle as b, IconSend as x, IconSquare as S, IconTrash as C } from "@tabler/icons-react";
|
|
16
|
+
import { AnimatePresence as w, motion as T } from "framer-motion";
|
|
16
17
|
//#region src/ui/chat/date-separator.tsx
|
|
17
|
-
function
|
|
18
|
+
function E(e) {
|
|
18
19
|
let t = /* @__PURE__ */ new Date(), n = new Date(t.getFullYear(), t.getMonth(), t.getDate()), r = new Date(e.getFullYear(), e.getMonth(), e.getDate()), i = n.getTime() - r.getTime(), a = Math.round(i / (1e3 * 60 * 60 * 24));
|
|
19
20
|
if (a === 0) return "Today";
|
|
20
21
|
if (a === 1) return "Yesterday";
|
|
21
22
|
let o = e.toLocaleString("en-US", { month: "short" }), s = e.getDate();
|
|
22
23
|
return e.getFullYear() === t.getFullYear() ? `${o} ${s}` : `${o} ${s}, ${e.getFullYear()}`;
|
|
23
24
|
}
|
|
24
|
-
function
|
|
25
|
-
let r = typeof e == "string" ? new Date(e) : e, a = t ? t(r) :
|
|
26
|
-
return /* @__PURE__ */
|
|
25
|
+
function D({ date: e, format: t, className: n }) {
|
|
26
|
+
let r = typeof e == "string" ? new Date(e) : e, a = t ? t(r) : E(r);
|
|
27
|
+
return /* @__PURE__ */ y("div", {
|
|
27
28
|
className: i("flex items-center gap-ds-03 py-ds-03", n),
|
|
28
29
|
children: [
|
|
29
|
-
/* @__PURE__ */
|
|
30
|
-
/* @__PURE__ */
|
|
30
|
+
/* @__PURE__ */ v("div", { className: "flex-1 border-t border-surface-border-subtle" }),
|
|
31
|
+
/* @__PURE__ */ v("span", {
|
|
31
32
|
className: "text-ds-xs font-medium text-surface-fg-subtle/50 uppercase tracking-wider",
|
|
32
33
|
children: a
|
|
33
34
|
}),
|
|
34
|
-
/* @__PURE__ */
|
|
35
|
+
/* @__PURE__ */ v("div", { className: "flex-1 border-t border-surface-border-subtle" })
|
|
35
36
|
]
|
|
36
37
|
});
|
|
37
38
|
}
|
|
38
|
-
|
|
39
|
+
D.displayName = "DateSeparator";
|
|
39
40
|
//#endregion
|
|
40
41
|
//#region src/ui/chat/message.tsx
|
|
41
|
-
var
|
|
42
|
+
var O = _.createContext({
|
|
42
43
|
variant: "flat",
|
|
43
44
|
placement: "start",
|
|
44
45
|
grouped: !1
|
|
45
46
|
});
|
|
46
|
-
function
|
|
47
|
-
return
|
|
47
|
+
function k() {
|
|
48
|
+
return _.useContext(O);
|
|
48
49
|
}
|
|
49
|
-
var
|
|
50
|
-
let m =
|
|
50
|
+
var A = _.forwardRef(({ children: e, variant: r = "flat", placement: a = "start", highlight: s, grouped: c = !1, deleted: l = !1, deletedText: u = "This message was deleted", className: d, ...f }, p) => {
|
|
51
|
+
let m = _.useMemo(() => ({
|
|
51
52
|
variant: r,
|
|
52
53
|
placement: a,
|
|
53
54
|
grouped: c,
|
|
@@ -58,7 +59,7 @@ var k = g.forwardRef(({ children: e, variant: r = "flat", placement: a = "start"
|
|
|
58
59
|
c,
|
|
59
60
|
s
|
|
60
61
|
]);
|
|
61
|
-
return l ? /* @__PURE__ */
|
|
62
|
+
return l ? /* @__PURE__ */ y(T.div, {
|
|
62
63
|
ref: p,
|
|
63
64
|
initial: {
|
|
64
65
|
opacity: 0,
|
|
@@ -71,13 +72,13 @@ var k = g.forwardRef(({ children: e, variant: r = "flat", placement: a = "start"
|
|
|
71
72
|
transition: n.snappy,
|
|
72
73
|
className: i("flex items-center gap-ds-02 py-ds-02 text-ds-xs text-surface-fg-subtle/50 italic", d),
|
|
73
74
|
...t(f),
|
|
74
|
-
children: [/* @__PURE__ */
|
|
75
|
-
icon:
|
|
75
|
+
children: [/* @__PURE__ */ v(o, {
|
|
76
|
+
icon: C,
|
|
76
77
|
size: "xs"
|
|
77
78
|
}), u]
|
|
78
|
-
}) : r === "bubble" ? /* @__PURE__ */
|
|
79
|
+
}) : r === "bubble" ? /* @__PURE__ */ v(O.Provider, {
|
|
79
80
|
value: m,
|
|
80
|
-
children: /* @__PURE__ */
|
|
81
|
+
children: /* @__PURE__ */ v(T.div, {
|
|
81
82
|
ref: p,
|
|
82
83
|
"data-highlight": s,
|
|
83
84
|
initial: {
|
|
@@ -89,16 +90,16 @@ var k = g.forwardRef(({ children: e, variant: r = "flat", placement: a = "start"
|
|
|
89
90
|
y: 0
|
|
90
91
|
},
|
|
91
92
|
transition: n.snappy,
|
|
92
|
-
className: i("group/message relative flex", a === "end" ? "justify-end" : "justify-start", s === "internal" && "bg-warning-2/50 rounded-control-inner", d),
|
|
93
|
+
className: i("group/message relative flex", a === "end" ? "justify-end" : "justify-start", g, s === "internal" && "bg-warning-2/50 rounded-control-inner", d),
|
|
93
94
|
...t(f),
|
|
94
|
-
children: /* @__PURE__ */
|
|
95
|
+
children: /* @__PURE__ */ v("div", {
|
|
95
96
|
className: i("max-w-[85%] rounded-bubble px-ds-04 py-ds-03", a === "end" ? "bg-accent-3 text-surface-fg" : "bg-surface-raised text-surface-fg"),
|
|
96
97
|
children: e
|
|
97
98
|
})
|
|
98
99
|
})
|
|
99
|
-
}) : /* @__PURE__ */
|
|
100
|
+
}) : /* @__PURE__ */ v(O.Provider, {
|
|
100
101
|
value: m,
|
|
101
|
-
children: /* @__PURE__ */
|
|
102
|
+
children: /* @__PURE__ */ v(T.div, {
|
|
102
103
|
ref: p,
|
|
103
104
|
"data-highlight": s,
|
|
104
105
|
initial: {
|
|
@@ -110,100 +111,100 @@ var k = g.forwardRef(({ children: e, variant: r = "flat", placement: a = "start"
|
|
|
110
111
|
y: 0
|
|
111
112
|
},
|
|
112
113
|
transition: n.snappy,
|
|
113
|
-
className: i("group/message relative flex gap-ds-04", c && "-mt-ds-01", s === "internal" && "bg-warning-2/50 rounded-control-inner", d),
|
|
114
|
+
className: i("group/message relative flex gap-ds-04", c && "-mt-ds-01", g, s === "internal" && "bg-warning-2/50 rounded-control-inner", d),
|
|
114
115
|
...t(f),
|
|
115
116
|
children: e
|
|
116
117
|
})
|
|
117
118
|
});
|
|
118
119
|
});
|
|
119
|
-
|
|
120
|
-
function
|
|
121
|
-
let { grouped: d } =
|
|
122
|
-
return d ? /* @__PURE__ */
|
|
120
|
+
A.displayName = "Message";
|
|
121
|
+
function j({ src: t, fallback: n, icon: r, size: a = "md", children: o }) {
|
|
122
|
+
let { grouped: d } = k(), f = a === "sm" ? "w-5" : "w-6";
|
|
123
|
+
return d ? /* @__PURE__ */ v("div", { className: i(f, a === "sm" ? "h-5" : "h-6", "shrink-0") }) : o ? /* @__PURE__ */ v("div", {
|
|
123
124
|
className: i(f, "shrink-0 flex items-start"),
|
|
124
125
|
children: o
|
|
125
|
-
}) : r ? /* @__PURE__ */
|
|
126
|
+
}) : r ? /* @__PURE__ */ v("div", {
|
|
126
127
|
className: i(f, a === "sm" ? "h-5" : "h-6", "shrink-0 flex items-center justify-center rounded-pill bg-surface-raised-hover"),
|
|
127
|
-
children: /* @__PURE__ */
|
|
128
|
+
children: /* @__PURE__ */ v(e, {
|
|
128
129
|
size: a === "sm" ? "xs" : "sm",
|
|
129
130
|
children: u(r)
|
|
130
131
|
})
|
|
131
|
-
}) : /* @__PURE__ */
|
|
132
|
+
}) : /* @__PURE__ */ v("div", {
|
|
132
133
|
className: i(f, "shrink-0"),
|
|
133
|
-
children: /* @__PURE__ */
|
|
134
|
+
children: /* @__PURE__ */ y(s, {
|
|
134
135
|
size: a === "sm" ? "xs" : "sm",
|
|
135
|
-
children: [t && /* @__PURE__ */
|
|
136
|
+
children: [t && /* @__PURE__ */ v(l, {
|
|
136
137
|
src: t,
|
|
137
138
|
alt: n ?? ""
|
|
138
|
-
}), /* @__PURE__ */
|
|
139
|
+
}), /* @__PURE__ */ v(c, { children: n ?? "" })]
|
|
139
140
|
})
|
|
140
141
|
});
|
|
141
142
|
}
|
|
142
|
-
|
|
143
|
-
function
|
|
144
|
-
return /* @__PURE__ */
|
|
143
|
+
j.displayName = "Message.Avatar";
|
|
144
|
+
function M({ children: e, className: t, ...n }) {
|
|
145
|
+
return /* @__PURE__ */ v("div", {
|
|
145
146
|
className: i("min-w-0 flex-1 flex flex-col gap-ds-02", t),
|
|
146
147
|
...n,
|
|
147
148
|
children: e
|
|
148
149
|
});
|
|
149
150
|
}
|
|
150
|
-
|
|
151
|
-
function
|
|
151
|
+
M.displayName = "Message.Content";
|
|
152
|
+
function N(e) {
|
|
152
153
|
return e.toLocaleTimeString("en-US", {
|
|
153
154
|
hour: "numeric",
|
|
154
155
|
minute: "2-digit"
|
|
155
156
|
});
|
|
156
157
|
}
|
|
157
|
-
function
|
|
158
|
-
let { grouped: a } =
|
|
158
|
+
function P({ name: e, badge: t, timestamp: n, formattedTimestamp: r, timestampFormat: i = N }) {
|
|
159
|
+
let { grouped: a } = k();
|
|
159
160
|
if (a) return null;
|
|
160
161
|
let o = r ?? (n ? i(n) : void 0);
|
|
161
|
-
return /* @__PURE__ */
|
|
162
|
+
return /* @__PURE__ */ y("div", {
|
|
162
163
|
className: "flex items-baseline gap-ds-02",
|
|
163
164
|
children: [
|
|
164
|
-
/* @__PURE__ */
|
|
165
|
+
/* @__PURE__ */ v("span", {
|
|
165
166
|
className: "font-semibold text-[13px] text-surface-fg",
|
|
166
167
|
children: e
|
|
167
168
|
}),
|
|
168
169
|
t,
|
|
169
|
-
o && /* @__PURE__ */
|
|
170
|
+
o && /* @__PURE__ */ v("span", {
|
|
170
171
|
className: "text-[11px] text-surface-fg-subtle/50",
|
|
171
172
|
children: o
|
|
172
173
|
})
|
|
173
174
|
]
|
|
174
175
|
});
|
|
175
176
|
}
|
|
176
|
-
|
|
177
|
-
function
|
|
178
|
-
return /* @__PURE__ */
|
|
177
|
+
P.displayName = "Message.Author";
|
|
178
|
+
function F({ children: e, className: t, ...n }) {
|
|
179
|
+
return /* @__PURE__ */ v("div", {
|
|
179
180
|
className: i("text-[13px] leading-relaxed text-surface-fg whitespace-pre-wrap", t),
|
|
180
181
|
...n,
|
|
181
182
|
children: e
|
|
182
183
|
});
|
|
183
184
|
}
|
|
184
|
-
|
|
185
|
-
function
|
|
186
|
-
let [o, s] =
|
|
187
|
-
|
|
185
|
+
F.displayName = "Message.Body";
|
|
186
|
+
function I({ content: e, onSave: t, onCancel: n, canEdit: r = !1, renderContent: a }) {
|
|
187
|
+
let [o, s] = _.useState(!1), [c, l] = _.useState(e), u = _.useRef(null);
|
|
188
|
+
_.useEffect(() => {
|
|
188
189
|
o && u.current && (u.current.focus(), u.current.select());
|
|
189
190
|
}, [o]);
|
|
190
|
-
let d =
|
|
191
|
+
let d = _.useCallback(() => {
|
|
191
192
|
r && (l(e), s(!0));
|
|
192
|
-
}, [r, e]), p =
|
|
193
|
+
}, [r, e]), p = _.useCallback(() => {
|
|
193
194
|
let n = c.trim();
|
|
194
195
|
n && n !== e && t(n), s(!1);
|
|
195
196
|
}, [
|
|
196
197
|
c,
|
|
197
198
|
e,
|
|
198
199
|
t
|
|
199
|
-
]), m =
|
|
200
|
+
]), m = _.useCallback(() => {
|
|
200
201
|
s(!1), l(e), n?.();
|
|
201
|
-
}, [e, n]), h =
|
|
202
|
+
}, [e, n]), h = _.useCallback((e) => {
|
|
202
203
|
e.key === "Enter" && !e.shiftKey ? (e.preventDefault(), p()) : e.key === "Escape" && (e.preventDefault(), m());
|
|
203
204
|
}, [p, m]);
|
|
204
|
-
return o ? /* @__PURE__ */
|
|
205
|
+
return o ? /* @__PURE__ */ y("div", {
|
|
205
206
|
className: "text-[13px] leading-relaxed",
|
|
206
|
-
children: [/* @__PURE__ */
|
|
207
|
+
children: [/* @__PURE__ */ v(f, {
|
|
207
208
|
ref: u,
|
|
208
209
|
value: c,
|
|
209
210
|
onChange: (e) => l(e.target.value),
|
|
@@ -211,11 +212,11 @@ function F({ content: e, onSave: t, onCancel: n, canEdit: r = !1, renderContent:
|
|
|
211
212
|
onBlur: p,
|
|
212
213
|
className: "resize-none rounded-control-inner bg-surface-raised-hover px-ds-02 py-ds-01 text-[13px] leading-relaxed",
|
|
213
214
|
rows: 2
|
|
214
|
-
}), /* @__PURE__ */
|
|
215
|
+
}), /* @__PURE__ */ v("div", {
|
|
215
216
|
className: "mt-ds-01 text-ds-xs text-surface-fg-subtle/50",
|
|
216
217
|
children: "Enter to save · Escape to cancel"
|
|
217
218
|
})]
|
|
218
|
-
}) : /* @__PURE__ */
|
|
219
|
+
}) : /* @__PURE__ */ v("div", {
|
|
219
220
|
className: i("text-[13px] leading-relaxed text-surface-fg whitespace-pre-wrap", r && "cursor-pointer hover:bg-surface-raised-hover rounded-control-inner transition-colors"),
|
|
220
221
|
onClick: d,
|
|
221
222
|
role: r ? "button" : void 0,
|
|
@@ -226,79 +227,79 @@ function F({ content: e, onSave: t, onCancel: n, canEdit: r = !1, renderContent:
|
|
|
226
227
|
children: a ? a(e) : e
|
|
227
228
|
});
|
|
228
229
|
}
|
|
229
|
-
|
|
230
|
-
function
|
|
231
|
-
return e.length === 0 ? null : /* @__PURE__ */
|
|
230
|
+
I.displayName = "Message.EditableBody";
|
|
231
|
+
function L({ reactions: e, onReact: t }) {
|
|
232
|
+
return e.length === 0 ? null : /* @__PURE__ */ v("div", {
|
|
232
233
|
className: "flex flex-wrap gap-ds-02 mt-ds-03",
|
|
233
|
-
children: e.map((e) => /* @__PURE__ */
|
|
234
|
+
children: e.map((e) => /* @__PURE__ */ y("button", {
|
|
234
235
|
type: "button",
|
|
235
236
|
onClick: () => t(e.emoji),
|
|
236
237
|
"aria-label": `${e.emoji} ${e.count} reaction${e.count === 1 ? "" : "s"}${e.reacted ? ", you reacted" : ""}`,
|
|
237
238
|
className: i("inline-flex items-center gap-ds-01 rounded-pill px-ds-02 py-ds-01 text-ds-xs transition-colors", e.reacted ? "bg-accent-3 ring-1 ring-accent-6" : "bg-surface-raised-hover hover:bg-surface-raised-active"),
|
|
238
|
-
children: [/* @__PURE__ */
|
|
239
|
+
children: [/* @__PURE__ */ v("span", { children: e.emoji }), /* @__PURE__ */ v("span", { children: e.count })]
|
|
239
240
|
}, e.emoji))
|
|
240
241
|
});
|
|
241
242
|
}
|
|
242
|
-
|
|
243
|
-
function
|
|
244
|
-
return /* @__PURE__ */
|
|
243
|
+
L.displayName = "Message.Reactions";
|
|
244
|
+
function R({ children: e, delay: t = 100 }) {
|
|
245
|
+
return /* @__PURE__ */ v("div", {
|
|
245
246
|
className: i("absolute -top-2 right-0 z-10", "flex items-center gap-ds-01 rounded-control bg-surface-raised px-ds-01 py-ds-01 shadow-raised", "opacity-0 group-hover/message:opacity-100 group-focus-within/message:opacity-100 transition-opacity duration-150"),
|
|
246
247
|
style: { transitionDelay: `${t}ms` },
|
|
247
248
|
children: e
|
|
248
249
|
});
|
|
249
250
|
}
|
|
250
|
-
|
|
251
|
-
function
|
|
252
|
-
return /* @__PURE__ */
|
|
251
|
+
R.displayName = "Message.Actions";
|
|
252
|
+
function z({ icon: t, label: n, onClick: r, variant: a = "default" }) {
|
|
253
|
+
return /* @__PURE__ */ y(p, { children: [/* @__PURE__ */ v(h, {
|
|
253
254
|
asChild: !0,
|
|
254
|
-
children: /* @__PURE__ */
|
|
255
|
+
children: /* @__PURE__ */ v("button", {
|
|
255
256
|
type: "button",
|
|
256
257
|
onClick: r,
|
|
257
258
|
"aria-label": n,
|
|
258
259
|
className: i("p-ds-02 rounded-control-inner transition-colors", a === "default" && "text-surface-fg-subtle hover:text-surface-fg hover:bg-surface-raised-hover", a === "danger" && "text-surface-fg-subtle hover:text-error-11 hover:bg-surface-raised-hover"),
|
|
259
|
-
children: /* @__PURE__ */
|
|
260
|
+
children: /* @__PURE__ */ v(e, {
|
|
260
261
|
size: "xs",
|
|
261
262
|
children: u(t)
|
|
262
263
|
})
|
|
263
264
|
})
|
|
264
|
-
}), /* @__PURE__ */
|
|
265
|
+
}), /* @__PURE__ */ v(m, { children: n })] });
|
|
265
266
|
}
|
|
266
|
-
|
|
267
|
-
var
|
|
268
|
-
Avatar:
|
|
269
|
-
Content:
|
|
270
|
-
Author:
|
|
271
|
-
Body:
|
|
272
|
-
EditableBody:
|
|
273
|
-
Reactions:
|
|
274
|
-
Actions:
|
|
275
|
-
Action:
|
|
276
|
-
}),
|
|
277
|
-
let [h,
|
|
278
|
-
let e =
|
|
267
|
+
z.displayName = "Message.Action";
|
|
268
|
+
var B = Object.assign(A, {
|
|
269
|
+
Avatar: j,
|
|
270
|
+
Content: M,
|
|
271
|
+
Author: P,
|
|
272
|
+
Body: F,
|
|
273
|
+
EditableBody: I,
|
|
274
|
+
Reactions: L,
|
|
275
|
+
Actions: R,
|
|
276
|
+
Action: z
|
|
277
|
+
}), V = _.forwardRef(({ onSubmit: e, placeholder: t = "Type a message...", disabled: n = !1, isStreaming: r = !1, onCancel: a, leadingSlot: s, trailingSlot: c, disclaimer: l, sendIcon: u, className: f, ...p }, m) => {
|
|
278
|
+
let [h, g] = _.useState(""), b = _.useRef(null), C = _.useCallback(() => {
|
|
279
|
+
let e = b.current;
|
|
279
280
|
e && (e.style.height = "auto", e.style.height = `${Math.min(e.scrollHeight, 160)}px`);
|
|
280
|
-
}, []), w =
|
|
281
|
-
|
|
282
|
-
}, [C]), T =
|
|
281
|
+
}, []), w = _.useCallback((e) => {
|
|
282
|
+
g(e.target.value), C();
|
|
283
|
+
}, [C]), T = _.useCallback(() => {
|
|
283
284
|
let t = h.trim();
|
|
284
|
-
!t || r || (e(t),
|
|
285
|
+
!t || r || (e(t), g(""), b.current && (b.current.style.height = "auto"));
|
|
285
286
|
}, [
|
|
286
287
|
h,
|
|
287
288
|
r,
|
|
288
289
|
e
|
|
289
|
-
]), E =
|
|
290
|
+
]), E = _.useCallback((e) => {
|
|
290
291
|
e.key === "Enter" && !e.shiftKey && (e.preventDefault(), r || T());
|
|
291
292
|
}, [r, T]), D = h.trim().length === 0;
|
|
292
|
-
return /* @__PURE__ */
|
|
293
|
+
return /* @__PURE__ */ y("div", {
|
|
293
294
|
ref: m,
|
|
294
295
|
className: i("border-t border-surface-border-subtle px-ds-05 py-ds-04", f),
|
|
295
296
|
...p,
|
|
296
|
-
children: [/* @__PURE__ */
|
|
297
|
+
children: [/* @__PURE__ */ y("div", {
|
|
297
298
|
className: "flex items-end gap-ds-02 rounded-overlay-lg border border-surface-border bg-surface-base p-ds-03",
|
|
298
299
|
children: [
|
|
299
300
|
s,
|
|
300
|
-
/* @__PURE__ */
|
|
301
|
-
ref:
|
|
301
|
+
/* @__PURE__ */ v("textarea", {
|
|
302
|
+
ref: b,
|
|
302
303
|
value: h,
|
|
303
304
|
onChange: w,
|
|
304
305
|
onKeyDown: E,
|
|
@@ -309,74 +310,74 @@ var z = Object.assign(k, {
|
|
|
309
310
|
className: "flex-1 resize-none bg-transparent px-ds-02 py-ds-01 text-ds-sm text-surface-fg placeholder:text-surface-fg-subtle/50 focus:outline-hidden disabled:opacity-50",
|
|
310
311
|
style: { maxHeight: 160 }
|
|
311
312
|
}),
|
|
312
|
-
r ? /* @__PURE__ */
|
|
313
|
+
r ? /* @__PURE__ */ v(d, {
|
|
313
314
|
variant: "ghost",
|
|
314
315
|
size: "icon-sm",
|
|
315
316
|
color: "error",
|
|
316
317
|
onClick: a,
|
|
317
318
|
"aria-label": "Stop",
|
|
318
|
-
children: /* @__PURE__ */
|
|
319
|
-
icon:
|
|
319
|
+
children: /* @__PURE__ */ v(o, {
|
|
320
|
+
icon: S,
|
|
320
321
|
size: "sm"
|
|
321
322
|
})
|
|
322
|
-
}) : /* @__PURE__ */
|
|
323
|
+
}) : /* @__PURE__ */ v(d, {
|
|
323
324
|
variant: "ghost",
|
|
324
325
|
size: "icon-sm",
|
|
325
326
|
onClick: T,
|
|
326
327
|
disabled: D || n,
|
|
327
328
|
"aria-label": "Send",
|
|
328
|
-
children: u ?? /* @__PURE__ */
|
|
329
|
-
icon:
|
|
329
|
+
children: u ?? /* @__PURE__ */ v(o, {
|
|
330
|
+
icon: x,
|
|
330
331
|
size: "sm"
|
|
331
332
|
})
|
|
332
333
|
}),
|
|
333
334
|
c
|
|
334
335
|
]
|
|
335
|
-
}), l && /* @__PURE__ */
|
|
336
|
+
}), l && /* @__PURE__ */ v("p", {
|
|
336
337
|
className: "mt-ds-02 text-center text-ds-xs text-surface-fg-subtle/50",
|
|
337
338
|
children: l
|
|
338
339
|
})]
|
|
339
340
|
});
|
|
340
341
|
});
|
|
341
|
-
|
|
342
|
+
V.displayName = "MessageInput";
|
|
342
343
|
//#endregion
|
|
343
344
|
//#region src/ui/chat/message-list.tsx
|
|
344
|
-
var
|
|
345
|
-
let h =
|
|
345
|
+
var H = _.forwardRef(({ children: e, autoScroll: t = !0, newMessageCount: n = 0, onScrollToBottom: o, onLoadMore: s, loadingMore: c = !1, emptySlot: l, scrollToBottomSlot: u, headerSlot: d, className: f, ...p }, m) => {
|
|
346
|
+
let h = _.useRef(null), g = _.useRef(!0), [b, x] = _.useState(!0), S = _.useRef(!1), C = _.useRef(0), E = _.Children.count(e) === 0 && !c, D = _.useCallback(() => {
|
|
346
347
|
let e = h.current;
|
|
347
348
|
if (!e) return;
|
|
348
349
|
let t = e.scrollHeight - e.scrollTop - e.clientHeight < 40;
|
|
349
|
-
|
|
350
|
+
g.current = t, x(t), e.scrollTop < 100 && s && !S.current && (S.current = !0, C.current = e.scrollHeight, s());
|
|
350
351
|
}, [s]);
|
|
351
|
-
|
|
352
|
+
_.useLayoutEffect(() => {
|
|
352
353
|
let e = h.current;
|
|
353
354
|
if (e) {
|
|
354
355
|
if (S.current) {
|
|
355
|
-
e.scrollTop = e.scrollHeight -
|
|
356
|
+
e.scrollTop = e.scrollHeight - C.current, S.current = !1;
|
|
356
357
|
return;
|
|
357
358
|
}
|
|
358
|
-
t &&
|
|
359
|
+
t && g.current && e.scrollTo({
|
|
359
360
|
top: e.scrollHeight,
|
|
360
361
|
behavior: "smooth"
|
|
361
362
|
});
|
|
362
363
|
}
|
|
363
|
-
}, [e, t]),
|
|
364
|
+
}, [e, t]), _.useEffect(() => {
|
|
364
365
|
c || (S.current = !1);
|
|
365
366
|
}, [c]);
|
|
366
|
-
let O = n > 0 && !b, k =
|
|
367
|
+
let O = n > 0 && !b, k = _.useCallback(() => {
|
|
367
368
|
let e = h.current;
|
|
368
369
|
e && e.scrollTo({
|
|
369
370
|
top: e.scrollHeight,
|
|
370
371
|
behavior: "smooth"
|
|
371
372
|
}), o?.();
|
|
372
373
|
}, [o]);
|
|
373
|
-
return /* @__PURE__ */
|
|
374
|
+
return /* @__PURE__ */ y("div", {
|
|
374
375
|
ref: m,
|
|
375
376
|
className: i("relative flex flex-1 flex-col overflow-hidden", f),
|
|
376
377
|
...p,
|
|
377
378
|
children: [
|
|
378
379
|
d,
|
|
379
|
-
/* @__PURE__ */
|
|
380
|
+
/* @__PURE__ */ y("div", {
|
|
380
381
|
ref: h,
|
|
381
382
|
role: "log",
|
|
382
383
|
"aria-live": "polite",
|
|
@@ -387,18 +388,18 @@ var V = g.forwardRef(({ children: e, autoScroll: t = !0, newMessageCount: n = 0,
|
|
|
387
388
|
scrollbarColor: "var(--color-surface-border) transparent"
|
|
388
389
|
},
|
|
389
390
|
onScroll: D,
|
|
390
|
-
children: [c && /* @__PURE__ */
|
|
391
|
+
children: [c && /* @__PURE__ */ v("div", {
|
|
391
392
|
className: "flex justify-center py-ds-03",
|
|
392
|
-
children: /* @__PURE__ */
|
|
393
|
-
}), E ? l : /* @__PURE__ */
|
|
393
|
+
children: /* @__PURE__ */ v(a, { size: "sm" })
|
|
394
|
+
}), E ? l : /* @__PURE__ */ v("div", {
|
|
394
395
|
className: "flex flex-col gap-ds-04",
|
|
395
|
-
children: /* @__PURE__ */
|
|
396
|
+
children: /* @__PURE__ */ v(w, {
|
|
396
397
|
initial: !1,
|
|
397
398
|
children: e
|
|
398
399
|
})
|
|
399
400
|
})]
|
|
400
401
|
}),
|
|
401
|
-
/* @__PURE__ */
|
|
402
|
+
/* @__PURE__ */ v(w, { children: O && /* @__PURE__ */ y(T.button, {
|
|
402
403
|
initial: {
|
|
403
404
|
opacity: 0,
|
|
404
405
|
y: 10
|
|
@@ -419,76 +420,76 @@ var V = g.forwardRef(({ children: e, autoScroll: t = !0, newMessageCount: n = 0,
|
|
|
419
420
|
]
|
|
420
421
|
});
|
|
421
422
|
});
|
|
422
|
-
|
|
423
|
+
H.displayName = "MessageList";
|
|
423
424
|
//#endregion
|
|
424
425
|
//#region src/ui/chat/system-message.tsx
|
|
425
|
-
function
|
|
426
|
+
function U(e) {
|
|
426
427
|
return new Date(e).toLocaleTimeString("en-US", {
|
|
427
428
|
hour: "numeric",
|
|
428
429
|
minute: "2-digit"
|
|
429
430
|
});
|
|
430
431
|
}
|
|
431
|
-
var
|
|
432
|
+
var W = _.forwardRef(({ icon: t, timestamp: n, variant: r = "event", children: a, className: s, ...c }, l) => r === "alert" ? /* @__PURE__ */ v("div", {
|
|
432
433
|
ref: l,
|
|
433
434
|
role: "alert",
|
|
434
435
|
className: i("flex justify-center", s),
|
|
435
436
|
...c,
|
|
436
|
-
children: /* @__PURE__ */
|
|
437
|
+
children: /* @__PURE__ */ y("div", {
|
|
437
438
|
className: "flex items-center gap-ds-03 rounded-surface bg-error-3 px-ds-04 py-ds-03",
|
|
438
439
|
children: [
|
|
439
|
-
/* @__PURE__ */
|
|
440
|
+
/* @__PURE__ */ v(e, {
|
|
440
441
|
size: "sm",
|
|
441
|
-
children: u(t) ?? /* @__PURE__ */
|
|
442
|
+
children: u(t) ?? /* @__PURE__ */ v(o, { icon: b })
|
|
442
443
|
}),
|
|
443
|
-
/* @__PURE__ */
|
|
444
|
+
/* @__PURE__ */ v("span", {
|
|
444
445
|
className: "text-ds-sm text-error-11",
|
|
445
446
|
children: a
|
|
446
447
|
}),
|
|
447
|
-
n && /* @__PURE__ */
|
|
448
|
+
n && /* @__PURE__ */ v("span", {
|
|
448
449
|
className: "text-ds-sm text-error-11/60",
|
|
449
|
-
children:
|
|
450
|
+
children: U(n)
|
|
450
451
|
})
|
|
451
452
|
]
|
|
452
453
|
})
|
|
453
|
-
}) : /* @__PURE__ */
|
|
454
|
+
}) : /* @__PURE__ */ y("div", {
|
|
454
455
|
ref: l,
|
|
455
456
|
className: i("flex items-center gap-ds-02 rounded-control-inner bg-surface-raised-hover/30 px-ds-02 py-ds-01 -mx-ds-02 text-ds-sm text-surface-fg-subtle/60", s),
|
|
456
457
|
...c,
|
|
457
458
|
children: [
|
|
458
|
-
/* @__PURE__ */
|
|
459
|
+
/* @__PURE__ */ v(e, {
|
|
459
460
|
size: "xs",
|
|
460
461
|
children: u(t)
|
|
461
462
|
}),
|
|
462
|
-
/* @__PURE__ */
|
|
463
|
+
/* @__PURE__ */ v("span", {
|
|
463
464
|
className: "flex-1",
|
|
464
465
|
children: a
|
|
465
466
|
}),
|
|
466
|
-
n && /* @__PURE__ */
|
|
467
|
+
n && /* @__PURE__ */ v("span", { children: U(n) })
|
|
467
468
|
]
|
|
468
469
|
}));
|
|
469
|
-
|
|
470
|
+
W.displayName = "SystemMessage";
|
|
470
471
|
//#endregion
|
|
471
472
|
//#region src/ui/chat/typing-indicator.tsx
|
|
472
|
-
function
|
|
473
|
+
function G(e) {
|
|
473
474
|
return e.length === 1 ? `${e[0].name} is typing...` : e.length === 2 ? `${e[0].name} and ${e[1].name} are typing...` : "Several people are typing...";
|
|
474
475
|
}
|
|
475
|
-
function
|
|
476
|
-
return /* @__PURE__ */
|
|
476
|
+
function K({ users: e, className: t }) {
|
|
477
|
+
return /* @__PURE__ */ v("div", {
|
|
477
478
|
className: i("min-h-[24px] px-ds-05", t),
|
|
478
479
|
role: "status",
|
|
479
480
|
"aria-live": "polite",
|
|
480
|
-
children: /* @__PURE__ */
|
|
481
|
+
children: /* @__PURE__ */ v(w, { children: e.length > 0 && /* @__PURE__ */ y(T.div, {
|
|
481
482
|
initial: { opacity: 0 },
|
|
482
483
|
animate: { opacity: 1 },
|
|
483
484
|
exit: { opacity: 0 },
|
|
484
485
|
className: "flex items-center gap-ds-02 text-ds-xs text-surface-fg-subtle",
|
|
485
|
-
children: [/* @__PURE__ */
|
|
486
|
+
children: [/* @__PURE__ */ v("span", {
|
|
486
487
|
className: "flex items-center gap-ds-01",
|
|
487
488
|
children: [
|
|
488
489
|
0,
|
|
489
490
|
1,
|
|
490
491
|
2
|
|
491
|
-
].map((e) => /* @__PURE__ */
|
|
492
|
+
].map((e) => /* @__PURE__ */ v(T.span, {
|
|
492
493
|
className: "h-1 w-1 rounded-pill bg-surface-fg-subtle",
|
|
493
494
|
animate: { y: [
|
|
494
495
|
0,
|
|
@@ -501,26 +502,26 @@ function G({ users: e, className: t }) {
|
|
|
501
502
|
delay: e * .15
|
|
502
503
|
}
|
|
503
504
|
}, e))
|
|
504
|
-
}), /* @__PURE__ */
|
|
505
|
+
}), /* @__PURE__ */ v("span", { children: G(e) })]
|
|
505
506
|
}) })
|
|
506
507
|
});
|
|
507
508
|
}
|
|
508
|
-
|
|
509
|
+
K.displayName = "TypingIndicator";
|
|
509
510
|
//#endregion
|
|
510
511
|
//#region src/ui/chat/unread-separator.tsx
|
|
511
|
-
function
|
|
512
|
-
return /* @__PURE__ */
|
|
512
|
+
function q({ label: e = "NEW", count: t, className: n }) {
|
|
513
|
+
return /* @__PURE__ */ y("div", {
|
|
513
514
|
className: i("relative flex items-center py-ds-02", n),
|
|
514
515
|
children: [
|
|
515
|
-
/* @__PURE__ */
|
|
516
|
-
/* @__PURE__ */
|
|
516
|
+
/* @__PURE__ */ v("div", { className: "flex-1 border-t-2 border-accent-7" }),
|
|
517
|
+
/* @__PURE__ */ v("span", {
|
|
517
518
|
className: "px-ds-03 text-ds-xs font-semibold text-accent-11",
|
|
518
519
|
children: t ? `${t} ${e}` : e
|
|
519
520
|
}),
|
|
520
|
-
/* @__PURE__ */
|
|
521
|
+
/* @__PURE__ */ v("div", { className: "flex-1 border-t-2 border-accent-7" })
|
|
521
522
|
]
|
|
522
523
|
});
|
|
523
524
|
}
|
|
524
|
-
|
|
525
|
+
q.displayName = "UnreadSeparator";
|
|
525
526
|
//#endregion
|
|
526
|
-
export {
|
|
527
|
+
export { V as a, D as c, H as i, K as n, B as o, W as r, k as s, q as t };
|