@photon-ai/pho-ui 4.5.0 → 4.5.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/{basic-page-D3MY3uY6.js → basic-page-dQ86NSIy.js} +3 -3
- package/dist/chunks/basic-page-dQ86NSIy.js.map +1 -0
- package/dist/chunks/{chat-DUqWlXqt.js → chat-BXjycPi9.js} +161 -161
- package/dist/chunks/chat-BXjycPi9.js.map +1 -0
- package/dist/components/chat.js +1 -1
- package/dist/index.js +2 -2
- package/dist/sections/basic-page.js +1 -1
- package/package.json +1 -1
- package/dist/chunks/basic-page-D3MY3uY6.js.map +0 -1
- package/dist/chunks/chat-DUqWlXqt.js.map +0 -1
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { t as
|
|
3
|
-
import { n as
|
|
4
|
-
import { FADE_SWAP as
|
|
5
|
-
import { a as
|
|
6
|
-
import { t as
|
|
7
|
-
import { t as
|
|
8
|
-
import { n as
|
|
9
|
-
import { t as
|
|
2
|
+
import { t as x } from "./cn-ChIgwEl3.js";
|
|
3
|
+
import { n as oe } from "./link-provider-DXzDQ08N.js";
|
|
4
|
+
import { FADE_SWAP as K, PRESS_SCALE_ROW as se, SPRING_PRESS as le, TRAVEL_LINEAR as ce } from "../motion.js";
|
|
5
|
+
import { a as z } from "./button-CgUS0j3D.js";
|
|
6
|
+
import { t as I } from "./createReactComponent-BqCmnqfX.js";
|
|
7
|
+
import { t as de } from "./input-DjvZoF8v.js";
|
|
8
|
+
import { n as B } from "./avatar-BkmGDIqf.js";
|
|
9
|
+
import { t as ue } from "./IconSearch-BKAHkLyX.js";
|
|
10
10
|
import { t as C } from "./scroll-area-DSwD9th7.js";
|
|
11
|
-
import { i as
|
|
12
|
-
import { t as
|
|
13
|
-
import { createContext as
|
|
14
|
-
import { Fragment as
|
|
15
|
-
import { AnimatePresence as
|
|
16
|
-
var
|
|
11
|
+
import { i as pe } from "./status-view-C8tabjDu.js";
|
|
12
|
+
import { t as S } from "./skeleton-DwjSl4vC.js";
|
|
13
|
+
import { createContext as he, useCallback as G, useContext as fe, useEffect as me, useId as xe, useLayoutEffect as ve, useMemo as Q, useRef as k, useState as R } from "react";
|
|
14
|
+
import { Fragment as Y, jsx as e, jsxs as y } from "react/jsx-runtime";
|
|
15
|
+
import { AnimatePresence as be, motion as M, useReducedMotion as Z } from "motion/react";
|
|
16
|
+
var we = [
|
|
17
17
|
["path", {
|
|
18
18
|
d: "M5 12l14 0",
|
|
19
19
|
key: "svg-0"
|
|
@@ -26,7 +26,7 @@ var ge = [
|
|
|
26
26
|
d: "M5 12l6 -6",
|
|
27
27
|
key: "svg-2"
|
|
28
28
|
}]
|
|
29
|
-
],
|
|
29
|
+
], ge = I("outline", "arrow-left", "ArrowLeft", we), ye = [
|
|
30
30
|
["path", {
|
|
31
31
|
d: "M12 5l0 14",
|
|
32
32
|
key: "svg-0"
|
|
@@ -39,13 +39,13 @@ var ge = [
|
|
|
39
39
|
d: "M6 11l6 -6",
|
|
40
40
|
key: "svg-2"
|
|
41
41
|
}]
|
|
42
|
-
],
|
|
42
|
+
], Ne = I("outline", "arrow-up", "ArrowUp", ye), Ce = [["path", {
|
|
43
43
|
d: "M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0",
|
|
44
44
|
key: "svg-0"
|
|
45
45
|
}], ["path", {
|
|
46
46
|
d: "M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2",
|
|
47
47
|
key: "svg-1"
|
|
48
|
-
}]], ke =
|
|
48
|
+
}]], ke = I("outline", "user", "User", Ce), Se = [
|
|
49
49
|
["path", {
|
|
50
50
|
d: "M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0",
|
|
51
51
|
key: "svg-0"
|
|
@@ -62,25 +62,25 @@ var ge = [
|
|
|
62
62
|
d: "M21 21v-2a4 4 0 0 0 -3 -3.85",
|
|
63
63
|
key: "svg-3"
|
|
64
64
|
}]
|
|
65
|
-
],
|
|
66
|
-
function
|
|
67
|
-
const a = Math.max(
|
|
68
|
-
return r <= 0 ? Number.isFinite(a) ? a :
|
|
65
|
+
], _e = I("outline", "users", "Users", Se), Pe = "rounded-base border border-pho-secondary bg-pho-primary", Re = 672, Ae = 24, Ee = 8, ee = "min-h-[61px]", Me = 273, _ = 256, O = 320, Ie = 16;
|
|
66
|
+
function q(t, r) {
|
|
67
|
+
const a = Math.max(_, t);
|
|
68
|
+
return r <= 0 ? Number.isFinite(a) ? a : _ : Math.min(a, Math.max(_, r - O));
|
|
69
69
|
}
|
|
70
|
-
var
|
|
71
|
-
function
|
|
72
|
-
const r =
|
|
70
|
+
var te = he(null);
|
|
71
|
+
function A(t) {
|
|
72
|
+
const r = fe(te);
|
|
73
73
|
if (r == null) throw new Error(`Chat.${t} must be used inside Chat.Root`);
|
|
74
74
|
return r;
|
|
75
75
|
}
|
|
76
|
-
var
|
|
77
|
-
function
|
|
76
|
+
var D = typeof window > "u" ? me : ve;
|
|
77
|
+
function T(t) {
|
|
78
78
|
return t === "thread" ? 1 : -1;
|
|
79
79
|
}
|
|
80
|
-
function
|
|
81
|
-
return t === "compact" || t === "auto" && r > 0 && r <
|
|
80
|
+
function Le(t, r) {
|
|
81
|
+
return t === "compact" || t === "auto" && r > 0 && r < Re;
|
|
82
82
|
}
|
|
83
|
-
function
|
|
83
|
+
function E(t, r) {
|
|
84
84
|
return r ? {
|
|
85
85
|
initial: { opacity: 0 },
|
|
86
86
|
animate: { opacity: 1 },
|
|
@@ -88,7 +88,7 @@ function I(t, r) {
|
|
|
88
88
|
transition: { duration: 0 }
|
|
89
89
|
} : {
|
|
90
90
|
initial: {
|
|
91
|
-
x: t *
|
|
91
|
+
x: t * Ae,
|
|
92
92
|
opacity: 0,
|
|
93
93
|
filter: "blur(1px)"
|
|
94
94
|
},
|
|
@@ -98,34 +98,34 @@ function I(t, r) {
|
|
|
98
98
|
filter: "blur(0px)"
|
|
99
99
|
},
|
|
100
100
|
exit: {
|
|
101
|
-
x: -t *
|
|
101
|
+
x: -t * Ee,
|
|
102
102
|
opacity: 0,
|
|
103
103
|
filter: "blur(1px)"
|
|
104
104
|
},
|
|
105
105
|
transition: {
|
|
106
|
-
x:
|
|
107
|
-
opacity:
|
|
108
|
-
filter:
|
|
106
|
+
x: ce,
|
|
107
|
+
opacity: K,
|
|
108
|
+
filter: K
|
|
109
109
|
}
|
|
110
110
|
};
|
|
111
111
|
}
|
|
112
|
-
function
|
|
112
|
+
function Te(t) {
|
|
113
113
|
return {
|
|
114
|
-
enter: (r) =>
|
|
115
|
-
rest: (r) =>
|
|
116
|
-
leave: (r) =>
|
|
114
|
+
enter: (r) => E(r, t).initial,
|
|
115
|
+
rest: (r) => E(r, t).animate,
|
|
116
|
+
leave: (r) => E(r, t).exit
|
|
117
117
|
};
|
|
118
118
|
}
|
|
119
|
-
function
|
|
120
|
-
const u =
|
|
119
|
+
function re({ as: t, show: r, swapped: a, direction: l, reduceMotion: o, children: c, ...s }) {
|
|
120
|
+
const u = E(l, o), f = {
|
|
121
121
|
custom: l,
|
|
122
|
-
variants:
|
|
122
|
+
variants: Te(o),
|
|
123
123
|
initial: "enter",
|
|
124
124
|
animate: "rest",
|
|
125
125
|
exit: "leave",
|
|
126
126
|
transition: u.transition
|
|
127
127
|
};
|
|
128
|
-
return /* @__PURE__ */ e(
|
|
128
|
+
return /* @__PURE__ */ e(be, {
|
|
129
129
|
initial: !a && r ? !1 : void 0,
|
|
130
130
|
mode: "popLayout",
|
|
131
131
|
custom: l,
|
|
@@ -140,33 +140,33 @@ function ae({ as: t, show: r, swapped: a, direction: l, reduceMotion: o, childre
|
|
|
140
140
|
}, "thread") : null
|
|
141
141
|
});
|
|
142
142
|
}
|
|
143
|
-
function
|
|
144
|
-
const [f, m] = R(a), [g, w] = R(Me), [i, n] = R(0), p =
|
|
145
|
-
let P = b,
|
|
146
|
-
H.current !== h && (P =
|
|
147
|
-
const V =
|
|
148
|
-
d(
|
|
149
|
-
}, [
|
|
150
|
-
w(
|
|
151
|
-
}, []), U =
|
|
152
|
-
|
|
143
|
+
function Oe({ layout: t = "default", pane: r, defaultPane: a = "list", onPaneChange: l, className: o, style: c, ref: s, ...u }) {
|
|
144
|
+
const [f, m] = R(a), [g, w] = R(Me), [i, n] = R(0), p = k(null), v = r !== void 0, h = v ? r : f, [b, d] = R(() => T(h)), [W, ae] = R(!1), H = k(h);
|
|
145
|
+
let P = b, L = W;
|
|
146
|
+
H.current !== h && (P = T(h), L = !0, H.current = h, P !== b && d(P), W || ae(!0));
|
|
147
|
+
const V = G((N) => {
|
|
148
|
+
d(T(N)), v || m(N), l?.(N);
|
|
149
|
+
}, [v, l]), X = G((N) => {
|
|
150
|
+
w(q(N, p.current?.clientWidth ?? 0));
|
|
151
|
+
}, []), U = Le(t, i);
|
|
152
|
+
D(() => {
|
|
153
153
|
const N = p.current;
|
|
154
154
|
if (!N || typeof ResizeObserver > "u") return;
|
|
155
|
-
const
|
|
156
|
-
const
|
|
157
|
-
n(
|
|
155
|
+
const $ = () => {
|
|
156
|
+
const j = N.clientWidth;
|
|
157
|
+
n(j), w((ie) => q(ie, j));
|
|
158
158
|
};
|
|
159
|
-
|
|
160
|
-
const
|
|
161
|
-
return
|
|
159
|
+
$();
|
|
160
|
+
const F = new ResizeObserver($);
|
|
161
|
+
return F.observe(N), () => F.disconnect();
|
|
162
162
|
}, []);
|
|
163
|
-
const
|
|
163
|
+
const ne = Q(() => ({
|
|
164
164
|
layout: t,
|
|
165
165
|
pane: h,
|
|
166
166
|
setPane: V,
|
|
167
167
|
direction: P,
|
|
168
168
|
swap: U,
|
|
169
|
-
swapped:
|
|
169
|
+
swapped: L,
|
|
170
170
|
listWidth: g,
|
|
171
171
|
frameWidth: i,
|
|
172
172
|
resizeList: X,
|
|
@@ -177,13 +177,13 @@ function ze({ layout: t = "default", pane: r, defaultPane: a = "list", onPaneCha
|
|
|
177
177
|
V,
|
|
178
178
|
P,
|
|
179
179
|
U,
|
|
180
|
-
|
|
180
|
+
L,
|
|
181
181
|
g,
|
|
182
182
|
i,
|
|
183
183
|
X
|
|
184
184
|
]);
|
|
185
|
-
return /* @__PURE__ */ e(
|
|
186
|
-
value:
|
|
185
|
+
return /* @__PURE__ */ e(te.Provider, {
|
|
186
|
+
value: ne,
|
|
187
187
|
children: /* @__PURE__ */ e("div", {
|
|
188
188
|
ref: (N) => {
|
|
189
189
|
p.current = N, typeof s == "function" ? s(N) : s && (s.current = N);
|
|
@@ -196,20 +196,20 @@ function ze({ layout: t = "default", pane: r, defaultPane: a = "list", onPaneCha
|
|
|
196
196
|
...c,
|
|
197
197
|
"--chat-list-width": `${g}px`
|
|
198
198
|
},
|
|
199
|
-
className:
|
|
199
|
+
className: x(Pe, "@container relative flex min-h-0 min-w-0 overflow-hidden", o),
|
|
200
200
|
...u
|
|
201
201
|
})
|
|
202
202
|
});
|
|
203
203
|
}
|
|
204
|
-
function
|
|
205
|
-
const { layout: o, pane: c, direction: s, swap: u, swapped: f } =
|
|
204
|
+
function ze({ className: t, children: r, id: a, ...l }) {
|
|
205
|
+
const { layout: o, pane: c, direction: s, swap: u, swapped: f } = A("List"), m = Z(), g = xe(), w = a ?? g, i = x("border-pho-secondary bg-pho-page relative z-10 flex min-h-0 shrink-0 flex-col", o === "default" && "min-w-64 w-[var(--chat-list-width)] border-r", o === "compact" && "w-full", o === "auto" && x("w-full @2xl:min-w-64 @2xl:w-[var(--chat-list-width)] @2xl:border-r", !u && c === "thread" && "@max-2xl:hidden"), t), n = /* @__PURE__ */ y(Y, { children: [r, o !== "compact" && /* @__PURE__ */ e(De, { controlsId: w })] }), p = {
|
|
206
206
|
id: w,
|
|
207
207
|
"aria-label": "Conversations",
|
|
208
208
|
"data-chat-list": "",
|
|
209
209
|
className: i,
|
|
210
210
|
...l
|
|
211
211
|
};
|
|
212
|
-
return u ? /* @__PURE__ */ e(
|
|
212
|
+
return u ? /* @__PURE__ */ e(re, {
|
|
213
213
|
as: "aside",
|
|
214
214
|
show: c === "list",
|
|
215
215
|
swapped: f,
|
|
@@ -222,8 +222,8 @@ function De({ className: t, children: r, id: a, ...l }) {
|
|
|
222
222
|
children: n
|
|
223
223
|
});
|
|
224
224
|
}
|
|
225
|
-
function
|
|
226
|
-
const { layout: r, listWidth: a, frameWidth: l, resizeList: o, rootRef: c } =
|
|
225
|
+
function De({ controlsId: t }) {
|
|
226
|
+
const { layout: r, listWidth: a, frameWidth: l, resizeList: o, rootRef: c } = A("Splitter"), s = k(null), u = (i) => {
|
|
227
227
|
i.button === 0 && (i.currentTarget.setPointerCapture?.(i.pointerId), s.current = {
|
|
228
228
|
x: i.clientX,
|
|
229
229
|
width: a
|
|
@@ -231,31 +231,31 @@ function We({ controlsId: t }) {
|
|
|
231
231
|
}, f = (i) => {
|
|
232
232
|
const n = s.current;
|
|
233
233
|
if (n == null) return;
|
|
234
|
-
const p = c.current,
|
|
234
|
+
const p = c.current, v = p != null && getComputedStyle(p).direction === "rtl", h = (i.clientX - n.x) * (v ? -1 : 1);
|
|
235
235
|
o(n.width + h);
|
|
236
236
|
}, m = () => {
|
|
237
237
|
s.current = null;
|
|
238
238
|
}, g = (i) => {
|
|
239
|
-
const n = c.current, p = n != null && getComputedStyle(n).direction === "rtl",
|
|
240
|
-
if (i.key ===
|
|
239
|
+
const n = c.current, p = n != null && getComputedStyle(n).direction === "rtl", v = p ? "ArrowRight" : "ArrowLeft", h = p ? "ArrowLeft" : "ArrowRight", b = i.shiftKey ? 32 : Ie;
|
|
240
|
+
if (i.key === v)
|
|
241
241
|
i.preventDefault(), o(a - b);
|
|
242
242
|
else if (i.key === h)
|
|
243
243
|
i.preventDefault(), o(a + b);
|
|
244
244
|
else if (i.key === "Home")
|
|
245
|
-
i.preventDefault(), o(
|
|
245
|
+
i.preventDefault(), o(_);
|
|
246
246
|
else if (i.key === "End") {
|
|
247
247
|
i.preventDefault();
|
|
248
248
|
const d = n?.clientWidth ?? 0;
|
|
249
|
-
d > 0 && o(d -
|
|
249
|
+
d > 0 && o(d - O);
|
|
250
250
|
}
|
|
251
|
-
}, w = l > 0 ? Math.max(
|
|
251
|
+
}, w = l > 0 ? Math.max(_, l - O) : a;
|
|
252
252
|
return /* @__PURE__ */ e("div", {
|
|
253
253
|
role: "separator",
|
|
254
254
|
"aria-orientation": "vertical",
|
|
255
255
|
"aria-label": "Resize conversation list",
|
|
256
256
|
"aria-controls": t,
|
|
257
257
|
"aria-valuenow": a,
|
|
258
|
-
"aria-valuemin":
|
|
258
|
+
"aria-valuemin": _,
|
|
259
259
|
"aria-valuemax": w,
|
|
260
260
|
"aria-valuetext": `${a} pixels`,
|
|
261
261
|
tabIndex: 0,
|
|
@@ -265,16 +265,16 @@ function We({ controlsId: t }) {
|
|
|
265
265
|
onPointerUp: m,
|
|
266
266
|
onPointerCancel: m,
|
|
267
267
|
onKeyDown: g,
|
|
268
|
-
className:
|
|
268
|
+
className: x("absolute inset-y-0 -right-3 z-10 w-6 cursor-col-resize touch-none select-none", "outline-pho-brand focus-visible:outline-2 focus-visible:-outline-offset-2", "after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-transparent", "[@media(hover:hover)]:hover:after:bg-pho-brand focus-visible:after:bg-pho-brand", r === "auto" && "@max-2xl:hidden")
|
|
269
269
|
});
|
|
270
270
|
}
|
|
271
|
-
function
|
|
271
|
+
function We({ className: t, placeholder: r = "Search", ...a }) {
|
|
272
272
|
return /* @__PURE__ */ e("div", {
|
|
273
273
|
"data-chat-search": "",
|
|
274
|
-
className:
|
|
275
|
-
children: /* @__PURE__ */ e(
|
|
274
|
+
className: x("p-3", ee, t),
|
|
275
|
+
children: /* @__PURE__ */ e(de, {
|
|
276
276
|
size: "sm",
|
|
277
|
-
icon:
|
|
277
|
+
icon: ue,
|
|
278
278
|
placeholder: r,
|
|
279
279
|
"aria-label": "Search conversations",
|
|
280
280
|
autoComplete: "off",
|
|
@@ -286,7 +286,7 @@ function $e({ className: t, placeholder: r = "Search", ...a }) {
|
|
|
286
286
|
function He({ className: t, children: r, ...a }) {
|
|
287
287
|
return /* @__PURE__ */ e("div", {
|
|
288
288
|
"data-chat-conversations": "",
|
|
289
|
-
className:
|
|
289
|
+
className: x("flex min-h-0 flex-1 flex-col", t),
|
|
290
290
|
...a,
|
|
291
291
|
children: /* @__PURE__ */ y(C.Root, {
|
|
292
292
|
className: "min-h-0 flex-1",
|
|
@@ -301,21 +301,21 @@ function He({ className: t, children: r, ...a }) {
|
|
|
301
301
|
function Ve({ className: t, ...r }) {
|
|
302
302
|
return /* @__PURE__ */ e("ul", {
|
|
303
303
|
"data-chat-conversation-list": "",
|
|
304
|
-
className:
|
|
304
|
+
className: x("m-0 flex list-none flex-col gap-0.5 *:m-0", t),
|
|
305
305
|
...r
|
|
306
306
|
});
|
|
307
307
|
}
|
|
308
|
-
var Xe = "outline-pho-brand rounded-base flex w-full cursor-pointer items-center gap-3 px-2 py-2.5 text-left transition-colors focus-visible:outline-2 focus-visible:-outline-offset-1", Ue = "bg-pho-primary text-pho-primary ring-pho-secondary ring-1 ring-inset *:data-icon:text-pho-primary",
|
|
308
|
+
var Xe = "outline-pho-brand rounded-base flex w-full cursor-pointer items-center gap-3 px-2 py-2.5 text-left transition-colors focus-visible:outline-2 focus-visible:-outline-offset-1", Ue = "bg-pho-primary text-pho-primary ring-pho-secondary ring-1 ring-inset *:data-icon:text-pho-primary", $e = "hover:bg-pho-ghost-hover", J = {
|
|
309
309
|
initial: !1,
|
|
310
|
-
whileTap: { scale:
|
|
311
|
-
transition:
|
|
310
|
+
whileTap: { scale: se },
|
|
311
|
+
transition: le
|
|
312
312
|
};
|
|
313
|
-
function
|
|
314
|
-
const { layout: g, setPane: w } =
|
|
313
|
+
function Fe({ title: t, time: r, preview: a, avatar: l, group: o, active: c, className: s, href: u, onClick: f, ...m }) {
|
|
314
|
+
const { layout: g, setPane: w } = A("Conversation"), i = oe(), n = Q(() => M.create(i), [i]), p = x(Xe, c ? Ue : $e, s), v = () => {
|
|
315
315
|
g !== "default" && w("thread");
|
|
316
|
-
}, h = /* @__PURE__ */ y(
|
|
316
|
+
}, h = /* @__PURE__ */ y(Y, { children: [l ?? /* @__PURE__ */ e(B.Root, {
|
|
317
317
|
size: "sm",
|
|
318
|
-
children: /* @__PURE__ */ e(
|
|
318
|
+
children: /* @__PURE__ */ e(B.Fallback, { children: o ? /* @__PURE__ */ e(_e, {
|
|
319
319
|
className: "size-4",
|
|
320
320
|
"aria-hidden": !0
|
|
321
321
|
}) : /* @__PURE__ */ e(ke, {
|
|
@@ -343,26 +343,26 @@ function je({ title: t, time: r, preview: a, avatar: l, group: o, active: c, cla
|
|
|
343
343
|
"aria-current": c ? "page" : void 0,
|
|
344
344
|
...m,
|
|
345
345
|
onClick: (b) => {
|
|
346
|
-
f?.(b), b.defaultPrevented ||
|
|
346
|
+
f?.(b), b.defaultPrevented || v();
|
|
347
347
|
},
|
|
348
348
|
className: p,
|
|
349
|
-
...
|
|
349
|
+
...J,
|
|
350
350
|
children: h
|
|
351
351
|
}) }) : /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(M.button, {
|
|
352
352
|
type: "button",
|
|
353
353
|
"aria-current": c ? "true" : void 0,
|
|
354
354
|
...m,
|
|
355
355
|
onClick: (b) => {
|
|
356
|
-
f?.(b), b.defaultPrevented ||
|
|
356
|
+
f?.(b), b.defaultPrevented || v();
|
|
357
357
|
},
|
|
358
358
|
className: p,
|
|
359
|
-
...
|
|
359
|
+
...J,
|
|
360
360
|
children: h
|
|
361
361
|
}) });
|
|
362
362
|
}
|
|
363
|
-
function
|
|
364
|
-
const { layout: l, pane: o, direction: c, swap: s, swapped: u } =
|
|
365
|
-
return s ? /* @__PURE__ */ e(
|
|
363
|
+
function je({ className: t, children: r, ...a }) {
|
|
364
|
+
const { layout: l, pane: o, direction: c, swap: s, swapped: u } = A("Thread"), f = Z(), m = x("bg-pho-primary flex min-h-0 flex-1 flex-col", l === "default" && "min-w-80", l === "compact" && "min-w-0", l === "auto" && "min-w-0 @2xl:min-w-80", !s && l === "auto" && o === "list" && "@max-2xl:hidden", t);
|
|
365
|
+
return s ? /* @__PURE__ */ e(re, {
|
|
366
366
|
as: "section",
|
|
367
367
|
show: o === "thread",
|
|
368
368
|
swapped: u,
|
|
@@ -381,23 +381,23 @@ function Ke({ className: t, children: r, ...a }) {
|
|
|
381
381
|
children: r
|
|
382
382
|
});
|
|
383
383
|
}
|
|
384
|
-
function
|
|
385
|
-
const { layout: s, setPane: u } =
|
|
384
|
+
function Ke({ avatar: t, actions: r, backLabel: a = "Back to conversations", className: l, children: o, ...c }) {
|
|
385
|
+
const { layout: s, setPane: u } = A("Header");
|
|
386
386
|
return /* @__PURE__ */ y("header", {
|
|
387
387
|
"data-chat-header": "",
|
|
388
|
-
className:
|
|
388
|
+
className: x("flex shrink-0 items-center gap-3 px-4 py-1.5", ee, l),
|
|
389
389
|
...c,
|
|
390
390
|
children: [
|
|
391
|
-
s !== "default" && /* @__PURE__ */ e(
|
|
391
|
+
s !== "default" && /* @__PURE__ */ e(z, {
|
|
392
392
|
variant: "ghost",
|
|
393
393
|
size: "sm",
|
|
394
394
|
shape: "circle",
|
|
395
395
|
svgOnly: !0,
|
|
396
396
|
"aria-label": a,
|
|
397
397
|
"data-chat-back": "",
|
|
398
|
-
className:
|
|
398
|
+
className: x("-ml-1 shrink-0", s === "auto" && "@2xl:hidden"),
|
|
399
399
|
onClick: () => u("list"),
|
|
400
|
-
children: /* @__PURE__ */ e(
|
|
400
|
+
children: /* @__PURE__ */ e(ge, {})
|
|
401
401
|
}),
|
|
402
402
|
t,
|
|
403
403
|
/* @__PURE__ */ e("div", {
|
|
@@ -411,28 +411,28 @@ function Be({ avatar: t, actions: r, backLabel: a = "Back to conversations", cla
|
|
|
411
411
|
]
|
|
412
412
|
});
|
|
413
413
|
}
|
|
414
|
-
function
|
|
414
|
+
function Be({ className: t, children: r, ...a }) {
|
|
415
415
|
return /* @__PURE__ */ e("h2", {
|
|
416
416
|
"data-chat-title": "",
|
|
417
|
-
className:
|
|
417
|
+
className: x("text-pho-primary m-0 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 overflow-visible text-base font-medium", t),
|
|
418
418
|
...a,
|
|
419
419
|
children: r
|
|
420
420
|
});
|
|
421
421
|
}
|
|
422
|
-
function
|
|
422
|
+
function Ge({ className: t, ...r }) {
|
|
423
423
|
return /* @__PURE__ */ e("p", {
|
|
424
424
|
"data-chat-description": "",
|
|
425
|
-
className:
|
|
425
|
+
className: x("text-pho-description m-0 min-w-0 truncate text-xs", t),
|
|
426
426
|
...r
|
|
427
427
|
});
|
|
428
428
|
}
|
|
429
|
-
var
|
|
430
|
-
function
|
|
431
|
-
const u =
|
|
432
|
-
|
|
429
|
+
var qe = 40;
|
|
430
|
+
function Je({ hasEarlier: t = !1, loadingEarlier: r = !1, onLoadEarlier: a, earlierLabel: l = "Load earlier messages", className: o, children: c, ...s }) {
|
|
431
|
+
const u = k(null), f = k(null), m = k(!0), g = k(null);
|
|
432
|
+
D(() => {
|
|
433
433
|
const n = u.current, p = f.current;
|
|
434
434
|
if (!n || !p) return;
|
|
435
|
-
const
|
|
435
|
+
const v = () => {
|
|
436
436
|
const b = g.current;
|
|
437
437
|
if (b) {
|
|
438
438
|
g.current = null, n.scrollTop = n.scrollHeight - b.height + b.top;
|
|
@@ -440,13 +440,13 @@ function Qe({ hasEarlier: t = !1, loadingEarlier: r = !1, onLoadEarlier: a, earl
|
|
|
440
440
|
}
|
|
441
441
|
m.current && (n.scrollTop = n.scrollHeight);
|
|
442
442
|
};
|
|
443
|
-
if (
|
|
444
|
-
const h = new ResizeObserver(
|
|
443
|
+
if (v(), typeof ResizeObserver > "u") return;
|
|
444
|
+
const h = new ResizeObserver(v);
|
|
445
445
|
return h.observe(p), h.observe(n), () => h.disconnect();
|
|
446
446
|
}, []);
|
|
447
447
|
const w = () => {
|
|
448
448
|
const n = u.current;
|
|
449
|
-
n && (m.current = n.scrollHeight - n.scrollTop - n.clientHeight <
|
|
449
|
+
n && (m.current = n.scrollHeight - n.scrollTop - n.clientHeight < qe);
|
|
450
450
|
}, i = () => {
|
|
451
451
|
const n = u.current;
|
|
452
452
|
n && (g.current = {
|
|
@@ -456,7 +456,7 @@ function Qe({ hasEarlier: t = !1, loadingEarlier: r = !1, onLoadEarlier: a, earl
|
|
|
456
456
|
};
|
|
457
457
|
return /* @__PURE__ */ e("div", {
|
|
458
458
|
"data-chat-messages": "",
|
|
459
|
-
className:
|
|
459
|
+
className: x("flex min-h-0 flex-1 flex-col [--pho-bubble-backdrop:var(--background-color-pho-primary)]", o),
|
|
460
460
|
...s,
|
|
461
461
|
children: /* @__PURE__ */ y(C.Root, {
|
|
462
462
|
className: "min-h-0 flex-1",
|
|
@@ -469,7 +469,7 @@ function Qe({ hasEarlier: t = !1, loadingEarlier: r = !1, onLoadEarlier: a, earl
|
|
|
469
469
|
className: "flex min-h-full flex-col gap-1 p-4",
|
|
470
470
|
children: [t && /* @__PURE__ */ e("div", {
|
|
471
471
|
className: "flex justify-center",
|
|
472
|
-
children: /* @__PURE__ */ e(
|
|
472
|
+
children: /* @__PURE__ */ e(z, {
|
|
473
473
|
variant: "outlined",
|
|
474
474
|
size: "sm",
|
|
475
475
|
loading: r,
|
|
@@ -482,38 +482,38 @@ function Qe({ hasEarlier: t = !1, loadingEarlier: r = !1, onLoadEarlier: a, earl
|
|
|
482
482
|
})
|
|
483
483
|
});
|
|
484
484
|
}
|
|
485
|
-
function
|
|
485
|
+
function Qe({ className: t, children: r, ...a }) {
|
|
486
486
|
return /* @__PURE__ */ e("div", {
|
|
487
487
|
"data-chat-divider": "",
|
|
488
|
-
className:
|
|
488
|
+
className: x("text-pho-description py-1 text-center text-xs", t),
|
|
489
489
|
...a,
|
|
490
490
|
children: r
|
|
491
491
|
});
|
|
492
492
|
}
|
|
493
|
-
function
|
|
493
|
+
function Ye({ className: t, ...r }) {
|
|
494
494
|
return /* @__PURE__ */ e("footer", {
|
|
495
495
|
"data-chat-footer": "",
|
|
496
|
-
className:
|
|
496
|
+
className: x("shrink-0 px-4 py-3", t),
|
|
497
497
|
...r
|
|
498
498
|
});
|
|
499
499
|
}
|
|
500
|
-
var
|
|
501
|
-
function
|
|
502
|
-
const p =
|
|
503
|
-
|
|
500
|
+
var Ze = 200;
|
|
501
|
+
function et({ value: t, onValueChange: r, onSend: a, placeholder: l = "Message", sending: o = !1, disabled: c = !1, canSend: s, prefix: u, meta: f, sendLabel: m = "Send", children: g, textareaRef: w, className: i, ...n }) {
|
|
502
|
+
const p = k(null), v = !o && !c && (s ?? t.trim().length > 0);
|
|
503
|
+
D(() => {
|
|
504
504
|
const d = p.current;
|
|
505
|
-
d && (d.style.height = "0px", d.style.height = `${Math.min(d.scrollHeight,
|
|
505
|
+
d && (d.style.height = "0px", d.style.height = `${Math.min(d.scrollHeight, Ze)}px`);
|
|
506
506
|
}, [t]);
|
|
507
507
|
const h = (d) => {
|
|
508
|
-
d.preventDefault(),
|
|
508
|
+
d.preventDefault(), v && a();
|
|
509
509
|
}, b = (d) => {
|
|
510
|
-
d.key === "Enter" && !d.shiftKey && !d.nativeEvent.isComposing && (d.preventDefault(),
|
|
510
|
+
d.key === "Enter" && !d.shiftKey && !d.nativeEvent.isComposing && (d.preventDefault(), v && a());
|
|
511
511
|
};
|
|
512
512
|
return /* @__PURE__ */ y("form", {
|
|
513
513
|
"aria-label": "Message composer",
|
|
514
514
|
"data-chat-composer": "",
|
|
515
515
|
onSubmit: h,
|
|
516
|
-
className:
|
|
516
|
+
className: x("rounded-base bg-pho-primary ring-pho-primary focus-within:ring-pho-brand ring-1 transition-shadow duration-100 ease-linear ring-inset focus-within:ring-2", c && "opacity-50", i),
|
|
517
517
|
...n,
|
|
518
518
|
children: [
|
|
519
519
|
g,
|
|
@@ -539,81 +539,81 @@ function tt({ value: t, onValueChange: r, onSend: a, placeholder: l = "Message",
|
|
|
539
539
|
className: "text-pho-description m-0 min-w-0 flex-1 truncate text-xs",
|
|
540
540
|
children: f
|
|
541
541
|
}),
|
|
542
|
-
/* @__PURE__ */ e(
|
|
542
|
+
/* @__PURE__ */ e(z, {
|
|
543
543
|
type: "submit",
|
|
544
544
|
size: "sm",
|
|
545
545
|
shape: "circle",
|
|
546
546
|
svgOnly: !0,
|
|
547
547
|
"aria-label": m,
|
|
548
|
-
disabled: !
|
|
548
|
+
disabled: !v,
|
|
549
549
|
loading: o,
|
|
550
|
-
children: /* @__PURE__ */ e(
|
|
550
|
+
children: /* @__PURE__ */ e(Ne, {})
|
|
551
551
|
})
|
|
552
552
|
]
|
|
553
553
|
})
|
|
554
554
|
]
|
|
555
555
|
});
|
|
556
556
|
}
|
|
557
|
-
function
|
|
557
|
+
function tt({ className: t, size: r = "sm", ...a }) {
|
|
558
558
|
return /* @__PURE__ */ e("div", {
|
|
559
559
|
"data-chat-empty": "",
|
|
560
|
-
className:
|
|
561
|
-
children: /* @__PURE__ */ e(
|
|
560
|
+
className: x("flex flex-1 flex-col items-center justify-center px-6 py-8", t),
|
|
561
|
+
children: /* @__PURE__ */ e(pe, {
|
|
562
562
|
size: r,
|
|
563
563
|
...a
|
|
564
564
|
})
|
|
565
565
|
});
|
|
566
566
|
}
|
|
567
|
-
function
|
|
567
|
+
function rt({ rows: t = 5 }) {
|
|
568
568
|
return /* @__PURE__ */ e("div", {
|
|
569
569
|
"aria-hidden": !0,
|
|
570
570
|
"data-chat-conversations-loading": "",
|
|
571
571
|
className: "flex flex-col gap-0.5",
|
|
572
572
|
children: Array.from({ length: t }, (r, a) => /* @__PURE__ */ y("div", {
|
|
573
573
|
className: "flex items-center gap-3 px-2 py-2.5",
|
|
574
|
-
children: [/* @__PURE__ */ e(
|
|
574
|
+
children: [/* @__PURE__ */ e(S, { className: "size-8 shrink-0 rounded-full" }), /* @__PURE__ */ y("div", {
|
|
575
575
|
className: "min-w-0 flex-1",
|
|
576
576
|
children: [/* @__PURE__ */ y("div", {
|
|
577
577
|
className: "flex items-center justify-between gap-2",
|
|
578
|
-
children: [/* @__PURE__ */ e(
|
|
579
|
-
}), /* @__PURE__ */ e(
|
|
578
|
+
children: [/* @__PURE__ */ e(S, { className: "h-3.5 w-32" }), /* @__PURE__ */ e(S, { className: "h-2.5 w-8" })]
|
|
579
|
+
}), /* @__PURE__ */ e(S, { className: "mt-2 h-2.5 w-44" })]
|
|
580
580
|
})]
|
|
581
581
|
}, a))
|
|
582
582
|
});
|
|
583
583
|
}
|
|
584
|
-
function
|
|
584
|
+
function at() {
|
|
585
585
|
return /* @__PURE__ */ y("div", {
|
|
586
586
|
"aria-hidden": !0,
|
|
587
587
|
"data-chat-messages-loading": "",
|
|
588
588
|
className: "flex flex-col gap-3",
|
|
589
589
|
children: [
|
|
590
|
-
/* @__PURE__ */ e(
|
|
591
|
-
/* @__PURE__ */ e(
|
|
592
|
-
/* @__PURE__ */ e(
|
|
590
|
+
/* @__PURE__ */ e(S, { className: "rounded-base h-10 w-1/2 self-start" }),
|
|
591
|
+
/* @__PURE__ */ e(S, { className: "rounded-base h-10 w-2/5 self-end" }),
|
|
592
|
+
/* @__PURE__ */ e(S, { className: "rounded-base h-16 w-3/5 self-start" })
|
|
593
593
|
]
|
|
594
594
|
});
|
|
595
595
|
}
|
|
596
|
-
var
|
|
597
|
-
Root:
|
|
598
|
-
List:
|
|
599
|
-
Search:
|
|
596
|
+
var wt = {
|
|
597
|
+
Root: Oe,
|
|
598
|
+
List: ze,
|
|
599
|
+
Search: We,
|
|
600
600
|
Conversations: He,
|
|
601
601
|
ConversationList: Ve,
|
|
602
|
-
Conversation:
|
|
603
|
-
Thread:
|
|
604
|
-
Header:
|
|
605
|
-
Title:
|
|
606
|
-
Description:
|
|
607
|
-
Messages:
|
|
608
|
-
Divider:
|
|
609
|
-
Footer:
|
|
610
|
-
Composer:
|
|
611
|
-
Empty:
|
|
612
|
-
ConversationsLoading:
|
|
613
|
-
MessagesLoading:
|
|
602
|
+
Conversation: Fe,
|
|
603
|
+
Thread: je,
|
|
604
|
+
Header: Ke,
|
|
605
|
+
Title: Be,
|
|
606
|
+
Description: Ge,
|
|
607
|
+
Messages: Je,
|
|
608
|
+
Divider: Qe,
|
|
609
|
+
Footer: Ye,
|
|
610
|
+
Composer: et,
|
|
611
|
+
Empty: tt,
|
|
612
|
+
ConversationsLoading: rt,
|
|
613
|
+
MessagesLoading: at
|
|
614
614
|
};
|
|
615
615
|
export {
|
|
616
|
-
|
|
616
|
+
wt as t
|
|
617
617
|
};
|
|
618
618
|
|
|
619
|
-
//# sourceMappingURL=chat-
|
|
619
|
+
//# sourceMappingURL=chat-BXjycPi9.js.map
|