@epam/ai-dial-conversation-panel 1.1.0-dev.74 → 1.1.0-dev.78
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/components/ConversationRow/ConversationRow.d.ts.map +1 -1
- package/index.js +280 -281
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConversationRow.d.ts","sourceRoot":"","sources":["../../../src/components/ConversationRow/ConversationRow.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"ConversationRow.d.ts","sourceRoot":"","sources":["../../../src/components/ConversationRow/ConversationRow.tsx"],"names":[],"mappings":"AACA,OAAO,EASL,KAAK,YAAY,EAClB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAiD,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAKpE,mCAAmC;AACnC,MAAM,WAAW,oBAAoB;IACnC,wCAAwC;IACxC,IAAI,EAAE,gBAAgB,CAAC;IACvB,qDAAqD;IACrD,QAAQ,EAAE,OAAO,CAAC;IAClB,sEAAsE;IACtE,oBAAoB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sGAAsG;IACtG,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,YAAY,EAAE,CAAC;IACxD,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,CACjB,IAAI,EAAE,gBAAgB,EACtB,OAAO,EAAE,iBAAiB,KACvB,IAAI,CAAC;IACV,qFAAqF;IACrF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yFAAyF;IACzF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yEAAyE;IACzE,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,oEAAoE;IACpE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mEAAmE;IACnE,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC;IACpB,qFAAqF;IACrF,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,8FAA8F;IAC9F,iBAAiB,CAAC,EAAE,GAAG,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;IAC1C,qDAAqD;IACrD,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,mDAAmD;IACnD,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gDAAgD;IAChD,MAAM,CAAC,EAAE,CACP,QAAQ,EAAE,MAAM,EAChB,cAAc,EAAE,SAAS,EACzB,OAAO,EAAE,MAAM,GAAG,IAAI,KACnB,IAAI,CAAC;CACX;AAED,8GAA8G;AAC9G,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAmLpD,CAAC"}
|
package/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { DeploymentIcon as e, buildCssVars as t, mergeClasses as n } from "@epam/ai-dial-chat-shared";
|
|
2
2
|
import { PanelEmpty as r, PanelNoResults as i, SearchInput as a, SidebarOrientation as o, SidebarPanel as s } from "@epam/ai-dial-sidebar";
|
|
3
|
-
import { Button as c,
|
|
4
|
-
import { createElement as
|
|
5
|
-
import { jsx as
|
|
6
|
-
import { IconCaretDownFilled as
|
|
3
|
+
import { Button as c, DIAL_ICON_SIZE as l, DialDropdown as u, DialEllipsisTooltip as d, DialGhostIconButton as f, DialSkeleton as p, DialSkeletonVariant as m, DialTag as h, ElementSize as g, Highlight as _, mergeClasses as v } from "@epam/ai-dial-ui-kit";
|
|
4
|
+
import { createElement as y, memo as b, useCallback as x, useEffect as S, useId as ee, useImperativeHandle as C, useLayoutEffect as w, useMemo as T, useRef as E, useState as D } from "react";
|
|
5
|
+
import { jsx as O, jsxs as k } from "react/jsx-runtime";
|
|
6
|
+
import { IconCaretDownFilled as A, IconCaretRightFilled as j, IconDotsVertical as M, IconPlus as N } from "@tabler/icons-react";
|
|
7
7
|
//#region ../../node_modules/react-window/dist/react-window.js
|
|
8
|
-
var
|
|
9
|
-
function
|
|
8
|
+
var P = typeof window < "u" ? w : S;
|
|
9
|
+
function F(e) {
|
|
10
10
|
if (e !== void 0) switch (typeof e) {
|
|
11
11
|
case "number": return e;
|
|
12
12
|
case "string":
|
|
@@ -14,15 +14,15 @@ function L(e) {
|
|
|
14
14
|
break;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
-
function
|
|
18
|
-
let { styleHeight: s, styleWidth: c } =
|
|
19
|
-
styleHeight:
|
|
20
|
-
styleWidth:
|
|
21
|
-
}), [o?.height, o?.width]), [l, u] =
|
|
17
|
+
function I({ box: e, defaultHeight: t, defaultWidth: n, disabled: r, element: i, mode: a, style: o }) {
|
|
18
|
+
let { styleHeight: s, styleWidth: c } = T(() => ({
|
|
19
|
+
styleHeight: F(o?.height),
|
|
20
|
+
styleWidth: F(o?.width)
|
|
21
|
+
}), [o?.height, o?.width]), [l, u] = D({
|
|
22
22
|
height: t,
|
|
23
23
|
width: n
|
|
24
24
|
}), d = r || a === "only-height" && s !== void 0 || a === "only-width" && c !== void 0 || s !== void 0 && c !== void 0;
|
|
25
|
-
return
|
|
25
|
+
return P(() => {
|
|
26
26
|
if (i === null || d) return;
|
|
27
27
|
let t = new ResizeObserver((e) => {
|
|
28
28
|
for (let t of e) {
|
|
@@ -42,7 +42,7 @@ function R({ box: e, defaultHeight: t, defaultWidth: n, disabled: r, element: i,
|
|
|
42
42
|
i,
|
|
43
43
|
s,
|
|
44
44
|
c
|
|
45
|
-
]),
|
|
45
|
+
]), T(() => ({
|
|
46
46
|
height: s ?? l.height,
|
|
47
47
|
width: c ?? l.width
|
|
48
48
|
}), [
|
|
@@ -51,26 +51,26 @@ function R({ box: e, defaultHeight: t, defaultWidth: n, disabled: r, element: i,
|
|
|
51
51
|
c
|
|
52
52
|
]);
|
|
53
53
|
}
|
|
54
|
-
function
|
|
55
|
-
let t =
|
|
54
|
+
function te(e) {
|
|
55
|
+
let t = E(() => {
|
|
56
56
|
throw Error("Cannot call during render.");
|
|
57
57
|
});
|
|
58
|
-
return
|
|
58
|
+
return P(() => {
|
|
59
59
|
t.current = e;
|
|
60
|
-
}, [e]),
|
|
60
|
+
}, [e]), x((e) => t.current?.(e), [t]);
|
|
61
61
|
}
|
|
62
|
-
var
|
|
63
|
-
function
|
|
64
|
-
if (
|
|
62
|
+
var L = null;
|
|
63
|
+
function R(e = !1) {
|
|
64
|
+
if (L === null || e) {
|
|
65
65
|
let e = document.createElement("div"), t = e.style;
|
|
66
66
|
t.width = "50px", t.height = "50px", t.overflow = "scroll", t.direction = "rtl";
|
|
67
67
|
let n = document.createElement("div"), r = n.style;
|
|
68
|
-
return r.width = "100px", r.height = "100px", e.appendChild(n), document.body.appendChild(e), e.scrollLeft > 0 ?
|
|
68
|
+
return r.width = "100px", r.height = "100px", e.appendChild(n), document.body.appendChild(e), e.scrollLeft > 0 ? L = "positive-descending" : (e.scrollLeft = 1, L = e.scrollLeft === 0 ? "negative" : "positive-ascending"), document.body.removeChild(e), L;
|
|
69
69
|
}
|
|
70
|
-
return
|
|
70
|
+
return L;
|
|
71
71
|
}
|
|
72
|
-
function
|
|
73
|
-
if (t === "horizontal" && n) switch (
|
|
72
|
+
function z({ containerElement: e, direction: t, isRtl: n, scrollOffset: r }) {
|
|
73
|
+
if (t === "horizontal" && n) switch (R()) {
|
|
74
74
|
case "negative": return -r;
|
|
75
75
|
case "positive-descending":
|
|
76
76
|
if (e) {
|
|
@@ -81,26 +81,26 @@ function B({ containerElement: e, direction: t, isRtl: n, scrollOffset: r }) {
|
|
|
81
81
|
}
|
|
82
82
|
return r;
|
|
83
83
|
}
|
|
84
|
-
function
|
|
84
|
+
function B(e, t = "Assertion error") {
|
|
85
85
|
if (!e) throw console.error(t), Error(t);
|
|
86
86
|
}
|
|
87
|
-
function
|
|
87
|
+
function V(e, t) {
|
|
88
88
|
if (e === t) return !0;
|
|
89
|
-
if (!!e != !!t || (
|
|
89
|
+
if (!!e != !!t || (B(e !== void 0), B(t !== void 0), Object.keys(e).length !== Object.keys(t).length)) return !1;
|
|
90
90
|
for (let n in e) if (!Object.is(t[n], e[n])) return !1;
|
|
91
91
|
return !0;
|
|
92
92
|
}
|
|
93
|
-
function
|
|
93
|
+
function H({ cachedBounds: e, itemCount: t, itemSize: n }) {
|
|
94
94
|
if (t === 0) return 0;
|
|
95
95
|
if (typeof n == "number") return t * n;
|
|
96
96
|
{
|
|
97
97
|
let n = e.get(e.size === 0 ? 0 : e.size - 1);
|
|
98
|
-
return
|
|
98
|
+
return B(n !== void 0, "Unexpected bounds cache miss"), t * ((n.scrollOffset + n.size) / e.size);
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
|
-
function
|
|
101
|
+
function ne({ align: e, cachedBounds: t, index: n, itemCount: r, itemSize: i, containerScrollOffset: a, containerSize: o }) {
|
|
102
102
|
if (n < 0 || n >= r) throw RangeError(`Invalid index specified: ${n}`, { cause: `Index ${n} is not within the range of 0 - ${r - 1}` });
|
|
103
|
-
let s =
|
|
103
|
+
let s = H({
|
|
104
104
|
cachedBounds: t,
|
|
105
105
|
itemCount: r,
|
|
106
106
|
itemSize: i
|
|
@@ -112,7 +112,7 @@ function W({ align: e, cachedBounds: t, index: n, itemCount: r, itemSize: i, con
|
|
|
112
112
|
default: return a >= u && a <= l ? a : a < u ? u : l;
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
|
-
function
|
|
115
|
+
function U({ cachedBounds: e, containerScrollOffset: t, containerSize: n, itemCount: r, overscanCount: i }) {
|
|
116
116
|
let a = r - 1, o = 0, s = -1, c = 0, l = -1, u = 0;
|
|
117
117
|
for (; u < a;) {
|
|
118
118
|
let n = e.get(u);
|
|
@@ -131,11 +131,11 @@ function G({ cachedBounds: e, containerScrollOffset: t, containerSize: n, itemCo
|
|
|
131
131
|
stopIndexOverscan: l
|
|
132
132
|
};
|
|
133
133
|
}
|
|
134
|
-
function
|
|
134
|
+
function W({ itemCount: e, itemProps: t, itemSize: n }) {
|
|
135
135
|
let r = /* @__PURE__ */ new Map();
|
|
136
136
|
return {
|
|
137
137
|
get(i) {
|
|
138
|
-
for (
|
|
138
|
+
for (B(i < e, `Invalid index ${i}`); r.size - 1 < i;) {
|
|
139
139
|
let e = r.size, a;
|
|
140
140
|
switch (typeof n) {
|
|
141
141
|
case "function":
|
|
@@ -151,14 +151,14 @@ function K({ itemCount: e, itemProps: t, itemSize: n }) {
|
|
|
151
151
|
});
|
|
152
152
|
else {
|
|
153
153
|
let t = r.get(e - 1);
|
|
154
|
-
|
|
154
|
+
B(t !== void 0, `Unexpected bounds cache miss for index ${i}`), r.set(e, {
|
|
155
155
|
scrollOffset: t.scrollOffset + t.size,
|
|
156
156
|
size: a
|
|
157
157
|
});
|
|
158
158
|
}
|
|
159
159
|
}
|
|
160
160
|
let a = r.get(i);
|
|
161
|
-
return
|
|
161
|
+
return B(a !== void 0, `Unexpected bounds cache miss for index ${i}`), a;
|
|
162
162
|
},
|
|
163
163
|
set(e, t) {
|
|
164
164
|
r.set(e, t);
|
|
@@ -168,8 +168,8 @@ function K({ itemCount: e, itemProps: t, itemSize: n }) {
|
|
|
168
168
|
}
|
|
169
169
|
};
|
|
170
170
|
}
|
|
171
|
-
function
|
|
172
|
-
return
|
|
171
|
+
function G({ itemCount: e, itemProps: t, itemSize: n }) {
|
|
172
|
+
return T(() => W({
|
|
173
173
|
itemCount: e,
|
|
174
174
|
itemProps: t,
|
|
175
175
|
itemSize: n
|
|
@@ -179,11 +179,11 @@ function q({ itemCount: e, itemProps: t, itemSize: n }) {
|
|
|
179
179
|
n
|
|
180
180
|
]);
|
|
181
181
|
}
|
|
182
|
-
function
|
|
182
|
+
function K({ containerSize: e, itemSize: t }) {
|
|
183
183
|
let n;
|
|
184
184
|
switch (typeof t) {
|
|
185
185
|
case "string":
|
|
186
|
-
|
|
186
|
+
B(t.endsWith("%"), `Invalid item size: "${t}"; string values must be percentages (e.g. "100%")`), B(e !== void 0, "Container size must be defined if a percentage item size is specified"), n = e * parseInt(t) / 100;
|
|
187
187
|
break;
|
|
188
188
|
default:
|
|
189
189
|
n = t;
|
|
@@ -191,21 +191,21 @@ function J({ containerSize: e, itemSize: t }) {
|
|
|
191
191
|
}
|
|
192
192
|
return n;
|
|
193
193
|
}
|
|
194
|
-
function
|
|
195
|
-
let { height: u = n, width: d = n } =
|
|
194
|
+
function q({ containerElement: e, containerStyle: t, defaultContainerSize: n = 0, direction: r, isRtl: i = !1, itemCount: a, itemProps: o, itemSize: s, onResize: c, overscanCount: l }) {
|
|
195
|
+
let { height: u = n, width: d = n } = I({
|
|
196
196
|
defaultHeight: r === "vertical" ? n : void 0,
|
|
197
197
|
defaultWidth: r === "horizontal" ? n : void 0,
|
|
198
198
|
element: e,
|
|
199
199
|
mode: r === "vertical" ? "only-height" : "only-width",
|
|
200
200
|
style: t
|
|
201
|
-
}), f =
|
|
201
|
+
}), f = E({
|
|
202
202
|
height: 0,
|
|
203
203
|
width: 0
|
|
204
|
-
}), p = r === "vertical" ? u : d, m =
|
|
204
|
+
}), p = r === "vertical" ? u : d, m = K({
|
|
205
205
|
containerSize: p,
|
|
206
206
|
itemSize: s
|
|
207
207
|
});
|
|
208
|
-
|
|
208
|
+
w(() => {
|
|
209
209
|
if (typeof c == "function") {
|
|
210
210
|
let e = f.current;
|
|
211
211
|
(e.height !== u || e.width !== d) && (c({
|
|
@@ -218,22 +218,22 @@ function ne({ containerElement: e, containerStyle: t, defaultContainerSize: n =
|
|
|
218
218
|
c,
|
|
219
219
|
d
|
|
220
220
|
]);
|
|
221
|
-
let h =
|
|
221
|
+
let h = G({
|
|
222
222
|
itemCount: a,
|
|
223
223
|
itemProps: o,
|
|
224
224
|
itemSize: m
|
|
225
|
-
}), g =
|
|
225
|
+
}), g = x((e) => h.get(e), [h]), [_, v] = D(() => U({
|
|
226
226
|
cachedBounds: h,
|
|
227
227
|
containerScrollOffset: 0,
|
|
228
228
|
containerSize: p,
|
|
229
229
|
itemCount: a,
|
|
230
230
|
overscanCount: l
|
|
231
|
-
})), { startIndexVisible: y, startIndexOverscan: b, stopIndexVisible:
|
|
231
|
+
})), { startIndexVisible: y, startIndexOverscan: b, stopIndexVisible: S, stopIndexOverscan: ee } = {
|
|
232
232
|
startIndexVisible: Math.min(a - 1, _.startIndexVisible),
|
|
233
233
|
startIndexOverscan: Math.min(a - 1, _.startIndexOverscan),
|
|
234
234
|
stopIndexVisible: Math.min(a - 1, _.stopIndexVisible),
|
|
235
235
|
stopIndexOverscan: Math.min(a - 1, _.stopIndexOverscan)
|
|
236
|
-
},
|
|
236
|
+
}, C = x(() => H({
|
|
237
237
|
cachedBounds: h,
|
|
238
238
|
itemCount: a,
|
|
239
239
|
itemSize: m
|
|
@@ -241,9 +241,9 @@ function ne({ containerElement: e, containerStyle: t, defaultContainerSize: n =
|
|
|
241
241
|
h,
|
|
242
242
|
a,
|
|
243
243
|
m
|
|
244
|
-
]), T =
|
|
244
|
+
]), T = x((t) => U({
|
|
245
245
|
cachedBounds: h,
|
|
246
|
-
containerScrollOffset:
|
|
246
|
+
containerScrollOffset: z({
|
|
247
247
|
containerElement: e,
|
|
248
248
|
direction: r,
|
|
249
249
|
isRtl: i,
|
|
@@ -261,19 +261,19 @@ function ne({ containerElement: e, containerStyle: t, defaultContainerSize: n =
|
|
|
261
261
|
a,
|
|
262
262
|
l
|
|
263
263
|
]);
|
|
264
|
-
return
|
|
264
|
+
return P(() => {
|
|
265
265
|
v(T((r === "vertical" ? e?.scrollTop : e?.scrollLeft) ?? 0));
|
|
266
266
|
}, [
|
|
267
267
|
e,
|
|
268
268
|
r,
|
|
269
269
|
T
|
|
270
|
-
]),
|
|
270
|
+
]), P(() => {
|
|
271
271
|
if (!e) return;
|
|
272
272
|
let t = () => {
|
|
273
273
|
v((t) => {
|
|
274
|
-
let { scrollLeft: n, scrollTop: o } = e, s =
|
|
274
|
+
let { scrollLeft: n, scrollTop: o } = e, s = U({
|
|
275
275
|
cachedBounds: h,
|
|
276
|
-
containerScrollOffset:
|
|
276
|
+
containerScrollOffset: z({
|
|
277
277
|
containerElement: e,
|
|
278
278
|
direction: r,
|
|
279
279
|
isRtl: i,
|
|
@@ -283,7 +283,7 @@ function ne({ containerElement: e, containerStyle: t, defaultContainerSize: n =
|
|
|
283
283
|
itemCount: a,
|
|
284
284
|
overscanCount: l
|
|
285
285
|
});
|
|
286
|
-
return
|
|
286
|
+
return V(s, t) ? t : s;
|
|
287
287
|
});
|
|
288
288
|
};
|
|
289
289
|
return e.addEventListener("scroll", t), () => {
|
|
@@ -298,9 +298,9 @@ function ne({ containerElement: e, containerStyle: t, defaultContainerSize: n =
|
|
|
298
298
|
l
|
|
299
299
|
]), {
|
|
300
300
|
getCellBounds: g,
|
|
301
|
-
getEstimatedSize:
|
|
302
|
-
scrollToIndex:
|
|
303
|
-
let s =
|
|
301
|
+
getEstimatedSize: C,
|
|
302
|
+
scrollToIndex: te(({ align: t = "auto", containerScrollOffset: n, index: o }) => {
|
|
303
|
+
let s = ne({
|
|
304
304
|
align: t,
|
|
305
305
|
cachedBounds: h,
|
|
306
306
|
containerScrollOffset: n,
|
|
@@ -310,48 +310,48 @@ function ne({ containerElement: e, containerStyle: t, defaultContainerSize: n =
|
|
|
310
310
|
itemSize: m
|
|
311
311
|
});
|
|
312
312
|
if (e) {
|
|
313
|
-
if (s =
|
|
313
|
+
if (s = z({
|
|
314
314
|
containerElement: e,
|
|
315
315
|
direction: r,
|
|
316
316
|
isRtl: i,
|
|
317
317
|
scrollOffset: s
|
|
318
318
|
}), typeof e.scrollTo != "function") {
|
|
319
319
|
let e = T(s);
|
|
320
|
-
|
|
320
|
+
V(_, e) || v(e);
|
|
321
321
|
}
|
|
322
322
|
return s;
|
|
323
323
|
}
|
|
324
324
|
}),
|
|
325
325
|
startIndexOverscan: b,
|
|
326
326
|
startIndexVisible: y,
|
|
327
|
-
stopIndexOverscan:
|
|
328
|
-
stopIndexVisible:
|
|
327
|
+
stopIndexOverscan: ee,
|
|
328
|
+
stopIndexVisible: S
|
|
329
329
|
};
|
|
330
330
|
}
|
|
331
331
|
function re(e) {
|
|
332
|
-
return
|
|
332
|
+
return T(() => e, Object.values(e));
|
|
333
333
|
}
|
|
334
334
|
function ie(e, t) {
|
|
335
335
|
let { ariaAttributes: n, style: r, ...i } = e, { ariaAttributes: a, style: o, ...s } = t;
|
|
336
|
-
return
|
|
336
|
+
return V(n, a) && V(r, o) && V(i, s);
|
|
337
337
|
}
|
|
338
338
|
function ae(e) {
|
|
339
339
|
return typeof e == "object" && !!e && "getAverageRowHeight" in e && typeof e.getAverageRowHeight == "function";
|
|
340
340
|
}
|
|
341
|
-
var
|
|
342
|
-
function
|
|
343
|
-
let m = re(u), h =
|
|
341
|
+
var J = "data-react-window-index";
|
|
342
|
+
function oe({ children: e, className: t, defaultHeight: n = 0, listRef: r, onResize: i, onRowsRendered: a, overscanCount: o = 3, rowComponent: s, rowCount: c, rowHeight: l, rowProps: u, tagName: d = "div", style: f, ...p }) {
|
|
343
|
+
let m = re(u), h = T(() => b(s, ie), [s]), [g, _] = D(null), v = ae(l), { getCellBounds: x, getEstimatedSize: ee, scrollToIndex: w, startIndexOverscan: E, startIndexVisible: k, stopIndexOverscan: A, stopIndexVisible: j } = q({
|
|
344
344
|
containerElement: g,
|
|
345
345
|
containerStyle: f,
|
|
346
346
|
defaultContainerSize: n,
|
|
347
347
|
direction: "vertical",
|
|
348
348
|
itemCount: c,
|
|
349
349
|
itemProps: m,
|
|
350
|
-
itemSize:
|
|
350
|
+
itemSize: T(() => v ? (e) => l.getRowHeight(e) ?? l.getAverageRowHeight() : l, [v, l]),
|
|
351
351
|
onResize: i,
|
|
352
352
|
overscanCount: o
|
|
353
353
|
});
|
|
354
|
-
|
|
354
|
+
C(r, () => ({
|
|
355
355
|
get element() {
|
|
356
356
|
return g;
|
|
357
357
|
},
|
|
@@ -366,12 +366,12 @@ function se({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
|
|
|
366
366
|
top: r
|
|
367
367
|
});
|
|
368
368
|
}
|
|
369
|
-
}), [g, w]),
|
|
369
|
+
}), [g, w]), P(() => {
|
|
370
370
|
if (!g) return;
|
|
371
371
|
let e = Array.from(g.children).filter((e, t) => {
|
|
372
372
|
if (e.hasAttribute("aria-hidden")) return !1;
|
|
373
373
|
let n = `${E + t}`;
|
|
374
|
-
return e.setAttribute(
|
|
374
|
+
return e.setAttribute(J, n), !0;
|
|
375
375
|
});
|
|
376
376
|
if (v) return l.observeRowElements(e);
|
|
377
377
|
}, [
|
|
@@ -379,27 +379,27 @@ function se({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
|
|
|
379
379
|
v,
|
|
380
380
|
l,
|
|
381
381
|
E,
|
|
382
|
-
|
|
383
|
-
]),
|
|
384
|
-
E >= 0 &&
|
|
385
|
-
startIndex:
|
|
386
|
-
stopIndex:
|
|
382
|
+
A
|
|
383
|
+
]), S(() => {
|
|
384
|
+
E >= 0 && A >= 0 && a && a({
|
|
385
|
+
startIndex: k,
|
|
386
|
+
stopIndex: j
|
|
387
387
|
}, {
|
|
388
388
|
startIndex: E,
|
|
389
|
-
stopIndex:
|
|
389
|
+
stopIndex: A
|
|
390
390
|
});
|
|
391
391
|
}, [
|
|
392
392
|
a,
|
|
393
393
|
E,
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
394
|
+
k,
|
|
395
|
+
A,
|
|
396
|
+
j
|
|
397
397
|
]);
|
|
398
|
-
let
|
|
398
|
+
let M = T(() => {
|
|
399
399
|
let e = [];
|
|
400
|
-
if (c > 0) for (let t = E; t <=
|
|
401
|
-
let n =
|
|
402
|
-
e.push(/* @__PURE__ */
|
|
400
|
+
if (c > 0) for (let t = E; t <= A; t++) {
|
|
401
|
+
let n = x(t);
|
|
402
|
+
e.push(/* @__PURE__ */ y(h, {
|
|
403
403
|
...m,
|
|
404
404
|
ariaAttributes: {
|
|
405
405
|
"aria-posinset": t + 1,
|
|
@@ -420,21 +420,21 @@ function se({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
|
|
|
420
420
|
return e;
|
|
421
421
|
}, [
|
|
422
422
|
h,
|
|
423
|
-
|
|
423
|
+
x,
|
|
424
424
|
v,
|
|
425
425
|
c,
|
|
426
426
|
m,
|
|
427
427
|
E,
|
|
428
|
-
|
|
429
|
-
]),
|
|
428
|
+
A
|
|
429
|
+
]), N = /* @__PURE__ */ O("div", {
|
|
430
430
|
"aria-hidden": !0,
|
|
431
431
|
style: {
|
|
432
|
-
height:
|
|
432
|
+
height: ee(),
|
|
433
433
|
width: "100%",
|
|
434
434
|
zIndex: -1
|
|
435
435
|
}
|
|
436
436
|
});
|
|
437
|
-
return
|
|
437
|
+
return y(d, {
|
|
438
438
|
role: "list",
|
|
439
439
|
...p,
|
|
440
440
|
className: t,
|
|
@@ -446,7 +446,7 @@ function se({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
|
|
|
446
446
|
overflowY: "auto",
|
|
447
447
|
...f
|
|
448
448
|
}
|
|
449
|
-
},
|
|
449
|
+
}, M, e, N);
|
|
450
450
|
}
|
|
451
451
|
//#endregion
|
|
452
452
|
//#region src/types/virtual-row.ts
|
|
@@ -454,25 +454,25 @@ var Y = /* @__PURE__ */ function(e) {
|
|
|
454
454
|
return e.Header = "header", e.Item = "item", e;
|
|
455
455
|
}({}), X = /* @__PURE__ */ function(e) {
|
|
456
456
|
return e.All = "all", e.Pinned = "pinned", e.MyChats = "my-chats", e.Shared = "shared", e.Organization = "organization", e;
|
|
457
|
-
}({}),
|
|
457
|
+
}({}), se = (e) => `${60 + e * 23 % 35}%`, ce = (e, t) => e ? t ? "pe-9" : "pe-2 group-hover/conversation:pe-9" : "pe-3", le = (e, t) => t.rows[e].kind === Y.Item ? 36 : e === 0 ? 24 : 56, ue = (e) => {
|
|
458
458
|
switch (e) {
|
|
459
459
|
case X.Shared: return X.Shared;
|
|
460
460
|
case X.Organization: return X.Organization;
|
|
461
461
|
default: return X.MyChats;
|
|
462
462
|
}
|
|
463
|
-
},
|
|
463
|
+
}, de = (e, t) => {
|
|
464
464
|
let n = null;
|
|
465
465
|
for (let r of e) if (r.kind === Y.Header) n = r.groupKey;
|
|
466
466
|
else if (r.item.id === t) return n;
|
|
467
467
|
return null;
|
|
468
|
-
},
|
|
468
|
+
}, fe = (e, t, n) => {
|
|
469
469
|
let r = /* @__PURE__ */ new Set();
|
|
470
470
|
if (t != null && r.add(t), t === X.Pinned) {
|
|
471
471
|
let t = n.find((t) => t.id === e);
|
|
472
|
-
t && r.add(
|
|
472
|
+
t && r.add(ue(t.source));
|
|
473
473
|
} else r.add(X.Pinned);
|
|
474
474
|
return r;
|
|
475
|
-
},
|
|
475
|
+
}, pe = (e, t, n, r) => {
|
|
476
476
|
let i = e.currentTarget.getBoundingClientRect();
|
|
477
477
|
if (e.clientY >= i.top + i.height / 2) return t;
|
|
478
478
|
let a = null, o = !1;
|
|
@@ -482,30 +482,30 @@ var Y = /* @__PURE__ */ function(e) {
|
|
|
482
482
|
a = e.item.id;
|
|
483
483
|
}
|
|
484
484
|
return null;
|
|
485
|
-
},
|
|
485
|
+
}, me = {
|
|
486
486
|
tabContainer: "_tabContainer_153ct_1",
|
|
487
487
|
tabActive: "_tabActive_153ct_13"
|
|
488
|
-
},
|
|
488
|
+
}, he = b(({ tabs: e, activeTabId: t, onTabChange: r, styles: i }) => {
|
|
489
489
|
let { tabClassName: a = "dial-tiny-semi-text" } = i?.typography ?? {};
|
|
490
|
-
return /* @__PURE__ */
|
|
490
|
+
return /* @__PURE__ */ O("div", {
|
|
491
491
|
className: "flex flex-nowrap gap-1",
|
|
492
492
|
role: "tablist",
|
|
493
493
|
children: e.map((e) => {
|
|
494
494
|
let i = t === e.id;
|
|
495
|
-
return /* @__PURE__ */
|
|
495
|
+
return /* @__PURE__ */ O("div", {
|
|
496
496
|
role: "tab",
|
|
497
497
|
"aria-selected": i,
|
|
498
498
|
className: "contents",
|
|
499
|
-
children: /* @__PURE__ */
|
|
499
|
+
children: /* @__PURE__ */ O(h, {
|
|
500
500
|
label: e.label,
|
|
501
501
|
selected: i,
|
|
502
502
|
onClick: () => r(e.id),
|
|
503
|
-
className: n("box-border h-auto shrink-0 justify-center rounded-full p-2 text-center", a,
|
|
503
|
+
className: n("box-border h-auto shrink-0 justify-center rounded-full p-2 text-center", a, me.tabContainer, i && me.tabActive)
|
|
504
504
|
})
|
|
505
505
|
}, e.id);
|
|
506
506
|
})
|
|
507
507
|
});
|
|
508
|
-
}),
|
|
508
|
+
}), ge = [
|
|
509
509
|
{
|
|
510
510
|
value: X.All,
|
|
511
511
|
labelKey: "all"
|
|
@@ -522,18 +522,18 @@ var Y = /* @__PURE__ */ function(e) {
|
|
|
522
522
|
value: X.Organization,
|
|
523
523
|
labelKey: "organization"
|
|
524
524
|
}
|
|
525
|
-
],
|
|
525
|
+
], _e = b(({ activeTab: e, labels: t, onChange: n, tabClassName: r = "dial-tiny-semi-text" }) => /* @__PURE__ */ O("div", {
|
|
526
526
|
className: "mx-3 my-2",
|
|
527
|
-
children: /* @__PURE__ */
|
|
528
|
-
tabs:
|
|
527
|
+
children: /* @__PURE__ */ O(he, {
|
|
528
|
+
tabs: ge.map(({ value: e, labelKey: n }) => ({
|
|
529
529
|
id: e,
|
|
530
530
|
label: t[n]
|
|
531
531
|
})),
|
|
532
532
|
activeTabId: e,
|
|
533
533
|
onTabChange: (e) => n(e),
|
|
534
|
-
styles: { typography: { tabClassName:
|
|
534
|
+
styles: { typography: { tabClassName: v(r, "flex-1") } }
|
|
535
535
|
})
|
|
536
|
-
})),
|
|
536
|
+
})), ve = { button: "_button_hbyrw_1" }, ye = b(({ label: e, onClick: r, labelClassName: i = "dial-small-semi-text", colors: a }) => /* @__PURE__ */ O("div", {
|
|
537
537
|
className: "px-3 py-2",
|
|
538
538
|
style: t({
|
|
539
539
|
"--cp-new-chat-bg": a?.background,
|
|
@@ -547,15 +547,15 @@ var Y = /* @__PURE__ */ function(e) {
|
|
|
547
547
|
"--cp-new-chat-shadow-purple-hover": a?.shadowPurpleHover,
|
|
548
548
|
"--cp-new-chat-shadow-purple-active": a?.shadowPurpleActive
|
|
549
549
|
}),
|
|
550
|
-
children: /* @__PURE__ */
|
|
550
|
+
children: /* @__PURE__ */ k("button", {
|
|
551
551
|
onClick: r,
|
|
552
552
|
type: "button",
|
|
553
|
-
className: n("flex h-[36px] w-full cursor-pointer items-center justify-center gap-2 rounded-full px-3 py-1",
|
|
554
|
-
children: [/* @__PURE__ */
|
|
553
|
+
className: n("flex h-[36px] w-full cursor-pointer items-center justify-center gap-2 rounded-full px-3 py-1", ve.button),
|
|
554
|
+
children: [/* @__PURE__ */ O(N, {
|
|
555
555
|
size: 18,
|
|
556
556
|
stroke: 2,
|
|
557
557
|
className: "shrink-0"
|
|
558
|
-
}), /* @__PURE__ */
|
|
558
|
+
}), /* @__PURE__ */ O("span", {
|
|
559
559
|
className: i,
|
|
560
560
|
children: e
|
|
561
561
|
})]
|
|
@@ -570,124 +570,123 @@ var Y = /* @__PURE__ */ function(e) {
|
|
|
570
570
|
trigger: "_trigger_2sstl_28",
|
|
571
571
|
triggerActive: "_triggerActive_2sstl_28",
|
|
572
572
|
triggerIcon: "_triggerIcon_2sstl_31"
|
|
573
|
-
},
|
|
574
|
-
let
|
|
575
|
-
return /* @__PURE__ */
|
|
573
|
+
}, be = ({ label: e, isExpanded: t, onToggle: r, listId: i, className: a = "dial-tiny-semi-text uppercase", dropZoneGroupKey: o, isDragOver: s, onDragOver: c, onDragLeave: l, onDrop: u }) => {
|
|
574
|
+
let f = o != null;
|
|
575
|
+
return /* @__PURE__ */ k("button", {
|
|
576
576
|
type: "button",
|
|
577
577
|
"aria-expanded": t,
|
|
578
578
|
"aria-controls": i,
|
|
579
579
|
onClick: r,
|
|
580
|
-
onDragOver:
|
|
581
|
-
|
|
580
|
+
onDragOver: f ? (e) => {
|
|
581
|
+
f && (e.preventDefault(), c?.(o));
|
|
582
582
|
} : void 0,
|
|
583
|
-
onDragLeave:
|
|
584
|
-
|
|
583
|
+
onDragLeave: f ? (e) => {
|
|
584
|
+
f && (e.currentTarget.contains(e.relatedTarget) || l?.());
|
|
585
585
|
} : void 0,
|
|
586
|
-
onDrop:
|
|
587
|
-
|
|
586
|
+
onDrop: f ? (e) => {
|
|
587
|
+
f && (e.preventDefault(), u?.(o, o, null));
|
|
588
588
|
} : void 0,
|
|
589
589
|
className: n("flex h-6 w-full items-center gap-1 rounded py-1 pe-3 text-start", a, Z.groupHeader, s && Z.dropZoneActive),
|
|
590
|
-
children: [t ? /* @__PURE__ */ A
|
|
590
|
+
children: [t ? /* @__PURE__ */ O(A, {
|
|
591
591
|
stroke: .5,
|
|
592
592
|
size: 12,
|
|
593
593
|
className: "shrink-0",
|
|
594
594
|
"aria-hidden": !0
|
|
595
|
-
}) : /* @__PURE__ */
|
|
595
|
+
}) : /* @__PURE__ */ O(j, {
|
|
596
596
|
stroke: .5,
|
|
597
597
|
size: 12,
|
|
598
598
|
className: "shrink-0 rtl:scale-x-[-1]",
|
|
599
599
|
"aria-hidden": !0
|
|
600
|
-
}), /* @__PURE__ */
|
|
600
|
+
}), /* @__PURE__ */ O(d, { text: e })]
|
|
601
601
|
});
|
|
602
|
-
},
|
|
603
|
-
let [
|
|
604
|
-
|
|
605
|
-
}, [t, s]),
|
|
606
|
-
variant:
|
|
607
|
-
width:
|
|
608
|
-
height:
|
|
602
|
+
}, xe = ({ item: t, isActive: r, onSelectConversation: i, searchQuery: a = "", getActions: o, onActionMenuOpen: s, actionsLabel: d = "More actions", itemTitleClassName: h = "dial-small-text", itemIconBadgeClassName: v, rowGroupKey: y, rows: b, draggingId: S, dragOverId: ee, allowedDropGroups: C, onDragStart: w, onDragEnd: T, onDragOver: A, onDragLeave: j, onDrop: N }) => {
|
|
603
|
+
let [P, F] = D(!1), I = E(null), te = x((e) => {
|
|
604
|
+
F(e), e && I.current && s?.(t, I.current);
|
|
605
|
+
}, [t, s]), L = o?.(t) ?? [], R = L.length > 0, z = t.isIconLoading ? /* @__PURE__ */ O(p, {
|
|
606
|
+
variant: m.Circular,
|
|
607
|
+
width: l.LG,
|
|
608
|
+
height: l.LG,
|
|
609
609
|
color: Z.skeletonColor,
|
|
610
610
|
"aria-hidden": !0
|
|
611
|
-
}) : /* @__PURE__ */
|
|
611
|
+
}) : /* @__PURE__ */ O(e, {
|
|
612
612
|
src: t.iconUrl,
|
|
613
|
-
size:
|
|
613
|
+
size: l.LG,
|
|
614
614
|
initialsName: t.iconTooltip ?? "",
|
|
615
615
|
labels: { tooltip: t.iconTooltip },
|
|
616
|
-
styles: { badgeClassName:
|
|
617
|
-
}),
|
|
618
|
-
e.currentTarget.contains(e.relatedTarget) ||
|
|
619
|
-
}, [
|
|
620
|
-
if (!
|
|
616
|
+
styles: { badgeClassName: v }
|
|
617
|
+
}), B = ce(R, P), V = y != null, H = x((e) => {
|
|
618
|
+
e.currentTarget.contains(e.relatedTarget) || j?.();
|
|
619
|
+
}, [j]), ne = x((e) => {
|
|
620
|
+
if (!y || !b || !N) return;
|
|
621
621
|
e.preventDefault();
|
|
622
|
-
let n =
|
|
623
|
-
|
|
622
|
+
let n = pe(e, t.id, b, y);
|
|
623
|
+
N(t.id, y, n);
|
|
624
624
|
}, [
|
|
625
625
|
t.id,
|
|
626
|
-
x,
|
|
627
626
|
b,
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
627
|
+
y,
|
|
628
|
+
N
|
|
629
|
+
]), U = t.id === S, W = t.id === ee, G = y != null && (C?.has(y) ?? !1), K = S != null;
|
|
630
|
+
return /* @__PURE__ */ k("li", {
|
|
631
|
+
className: n("group/conversation relative", U && "cursor-grabbing opacity-50", W && G && "rounded", W && G && Z.dropZoneActive, K && !U && !G && "cursor-not-allowed"),
|
|
632
|
+
draggable: V || void 0,
|
|
633
|
+
onDragStart: V ? () => w?.(t.id) : void 0,
|
|
634
|
+
onDragEnd: V ? T : void 0,
|
|
635
|
+
onDragOver: V ? (e) => {
|
|
636
|
+
e.preventDefault(), A?.(t.id);
|
|
637
637
|
} : void 0,
|
|
638
|
-
onDragLeave:
|
|
639
|
-
onDrop:
|
|
640
|
-
children: [/* @__PURE__ */
|
|
638
|
+
onDragLeave: V ? H : void 0,
|
|
639
|
+
onDrop: V ? ne : void 0,
|
|
640
|
+
children: [/* @__PURE__ */ O("a", {
|
|
641
641
|
href: t.href,
|
|
642
642
|
className: "contents",
|
|
643
643
|
onClick: (e) => {
|
|
644
644
|
t.href && (e.preventDefault(), i(t.id));
|
|
645
645
|
},
|
|
646
|
-
children: /* @__PURE__ */
|
|
647
|
-
iconBefore:
|
|
648
|
-
label: /* @__PURE__ */
|
|
646
|
+
children: /* @__PURE__ */ O(c, {
|
|
647
|
+
iconBefore: z,
|
|
648
|
+
label: /* @__PURE__ */ O(_, {
|
|
649
649
|
text: t.title,
|
|
650
650
|
query: a,
|
|
651
|
-
className:
|
|
651
|
+
className: h,
|
|
652
652
|
maxLines: 1
|
|
653
653
|
}),
|
|
654
654
|
textClassName: "min-w-0",
|
|
655
655
|
"aria-current": r ? "page" : void 0,
|
|
656
656
|
onClick: t.href ? void 0 : () => i(t.id),
|
|
657
657
|
tabIndex: t.href ? -1 : void 0,
|
|
658
|
-
className: n("
|
|
658
|
+
className: n("h-8 w-full justify-start gap-2 rounded-xl py-2 ps-3", B, Z.item, r && Z.itemActive, P && Z.itemActive)
|
|
659
659
|
})
|
|
660
|
-
}),
|
|
661
|
-
className: n("absolute inset-y-0 end-1 flex items-center",
|
|
662
|
-
children: /* @__PURE__ */
|
|
663
|
-
items:
|
|
664
|
-
onOpenChange:
|
|
660
|
+
}), R && /* @__PURE__ */ O("div", {
|
|
661
|
+
className: n("absolute inset-y-0 end-1 flex items-center", P ? "opacity-100" : "opacity-0 group-focus-within/conversation:opacity-100 group-hover/conversation:opacity-100"),
|
|
662
|
+
children: /* @__PURE__ */ O(u, {
|
|
663
|
+
items: L,
|
|
664
|
+
onOpenChange: te,
|
|
665
665
|
matchReferenceWidth: !1,
|
|
666
666
|
listClassName: "w-[140px] cp-dropdown-overlay",
|
|
667
|
-
children: /* @__PURE__ */
|
|
668
|
-
ref:
|
|
669
|
-
icon: /* @__PURE__ */
|
|
670
|
-
size:
|
|
667
|
+
children: /* @__PURE__ */ O(f, {
|
|
668
|
+
ref: I,
|
|
669
|
+
icon: /* @__PURE__ */ O(M, {
|
|
670
|
+
size: l.SM,
|
|
671
671
|
className: Z.triggerIcon,
|
|
672
672
|
"aria-hidden": !0
|
|
673
673
|
}),
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
"
|
|
677
|
-
className: n("flex items-center justify-center rounded", Z.trigger, I && Z.triggerActive)
|
|
674
|
+
size: g.Small,
|
|
675
|
+
"aria-label": d,
|
|
676
|
+
className: n("flex items-center justify-center rounded", Z.trigger, P && Z.triggerActive)
|
|
678
677
|
})
|
|
679
678
|
})
|
|
680
679
|
})]
|
|
681
680
|
});
|
|
682
|
-
},
|
|
681
|
+
}, Se = ({ index: e, style: t, rows: n, expandedGroups: r, onToggleGroup: i, listId: a, activeConversationId: o, searchQuery: s, onSelectConversation: c, getActions: l, onActionMenuOpen: u, actionsLabel: d, styles: f, draggingId: p, dragOverId: m, allowedDropGroups: h, onDragStart: g, onDragEnd: _, onDragOver: v, onDragLeave: y, onDrop: b }) => {
|
|
683
682
|
let x = n[e];
|
|
684
683
|
if (x.kind === Y.Header) {
|
|
685
684
|
let n = x.groupKey === X.Pinned;
|
|
686
|
-
return /* @__PURE__ */
|
|
685
|
+
return /* @__PURE__ */ O("div", {
|
|
687
686
|
role: "presentation",
|
|
688
687
|
style: t,
|
|
689
688
|
className: e === 0 ? "pt-0" : "pt-8",
|
|
690
|
-
children: /* @__PURE__ */
|
|
689
|
+
children: /* @__PURE__ */ O(be, {
|
|
691
690
|
label: x.label,
|
|
692
691
|
isExpanded: r.has(x.groupKey),
|
|
693
692
|
onToggle: () => i(x.groupKey),
|
|
@@ -701,11 +700,11 @@ var Y = /* @__PURE__ */ function(e) {
|
|
|
701
700
|
})
|
|
702
701
|
});
|
|
703
702
|
}
|
|
704
|
-
return /* @__PURE__ */
|
|
703
|
+
return /* @__PURE__ */ O("div", {
|
|
705
704
|
role: "presentation",
|
|
706
705
|
style: t,
|
|
707
706
|
className: "pt-1",
|
|
708
|
-
children: /* @__PURE__ */
|
|
707
|
+
children: /* @__PURE__ */ O(xe, {
|
|
709
708
|
item: x.item,
|
|
710
709
|
isActive: x.item.id === o,
|
|
711
710
|
searchQuery: s,
|
|
@@ -727,68 +726,68 @@ var Y = /* @__PURE__ */ function(e) {
|
|
|
727
726
|
onDrop: b
|
|
728
727
|
})
|
|
729
728
|
});
|
|
730
|
-
},
|
|
729
|
+
}, Ce = (e, t) => t === X.All ? !0 : e.source === t, we = (e, t) => t ? e.title.toLowerCase().includes(t.toLowerCase()) : !0, Te = new Set([
|
|
731
730
|
X.Pinned,
|
|
732
731
|
X.MyChats,
|
|
733
732
|
X.Shared,
|
|
734
733
|
X.Organization
|
|
735
|
-
]),
|
|
736
|
-
let { colors:
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
}, [
|
|
740
|
-
let [
|
|
741
|
-
|
|
742
|
-
}, []), Oe =
|
|
743
|
-
|
|
734
|
+
]), Ee = b(({ conversations: e, isLoading: c, isOpen: l, onSelectConversation: u, activeConversationId: d, labels: f, onNewChat: m, styles: h, className: g, getActions: _, onActionMenuOpen: v, onToggle: y, headerActions: b, onMoveConversation: C, activeFilter: w, onActiveFilterChange: A }) => {
|
|
735
|
+
let { colors: j, typography: M, newChatButton: N } = h ?? {}, { title: P, emptyLabel: F, noResultsLabel: I, loadingLabel: te = "Loading conversations", newChatLabel: L, searchPlaceholder: R, searchClearLabel: z, filterLabels: B, groupLabels: V, actionsLabel: H, closeAriaLabel: ne } = f, [U, W] = D(""), [G, K] = D(X.All);
|
|
736
|
+
S(() => {
|
|
737
|
+
w != null && (K(w), A?.(w));
|
|
738
|
+
}, [w]);
|
|
739
|
+
let [q, re] = D(() => Te), [ie, ae] = D(5), J = ee(), ce = E(null), ue = E(null), [pe, me] = D(null), [he, ge] = D(null), [ve, be] = D(null), xe = E(null), Ee = E(null), De = x(({ height: e }) => {
|
|
740
|
+
ae(Math.ceil(e / 36 * 2));
|
|
741
|
+
}, []), Oe = x((e) => {
|
|
742
|
+
re((t) => {
|
|
744
743
|
let n = new Set(t);
|
|
745
744
|
return n.has(e) ? n.delete(e) : n.add(e), n;
|
|
746
745
|
});
|
|
747
|
-
}, []), ke =
|
|
748
|
-
xe.current = null,
|
|
749
|
-
}, []), Ae =
|
|
750
|
-
let r =
|
|
751
|
-
xe.current = t,
|
|
752
|
-
}, [e]), je =
|
|
746
|
+
}, []), ke = x(() => {
|
|
747
|
+
xe.current = null, Ee.current = null, me(null), ge(null), be(null);
|
|
748
|
+
}, []), Ae = x((t, n) => {
|
|
749
|
+
let r = fe(t, de(n, t), e);
|
|
750
|
+
xe.current = t, Ee.current = r, me(t), be(r);
|
|
751
|
+
}, [e]), je = x(() => {
|
|
753
752
|
ke();
|
|
754
|
-
}, [ke]), Me =
|
|
753
|
+
}, [ke]), Me = x((e) => {
|
|
755
754
|
ge(e);
|
|
756
|
-
}, []), Ne =
|
|
755
|
+
}, []), Ne = x(() => {
|
|
757
756
|
ge(null);
|
|
758
|
-
}, []), Pe =
|
|
759
|
-
let r = xe.current, i =
|
|
760
|
-
ke(), r != null && r !== e && i?.has(t) &&
|
|
757
|
+
}, []), Pe = x((e, t, n) => {
|
|
758
|
+
let r = xe.current, i = Ee.current;
|
|
759
|
+
ke(), r != null && r !== e && i?.has(t) && C?.({
|
|
761
760
|
draggedId: r,
|
|
762
761
|
targetGroupKey: t,
|
|
763
762
|
afterId: n
|
|
764
763
|
});
|
|
765
|
-
}, [ke,
|
|
766
|
-
"--cp-bg":
|
|
767
|
-
"--sb-border":
|
|
768
|
-
"--cp-item-hover":
|
|
769
|
-
"--cp-item-active":
|
|
770
|
-
"--cp-text":
|
|
771
|
-
"--cp-text-secondary":
|
|
772
|
-
"--cp-new-chat-bg":
|
|
773
|
-
"--cp-new-chat-hover":
|
|
774
|
-
"--cp-new-chat-active":
|
|
775
|
-
"--cp-new-chat-text":
|
|
776
|
-
"--cp-new-chat-shadow-blue":
|
|
777
|
-
"--cp-new-chat-shadow-blue-hover":
|
|
778
|
-
"--cp-new-chat-shadow-blue-active":
|
|
779
|
-
"--cp-new-chat-shadow-purple":
|
|
780
|
-
"--cp-new-chat-shadow-purple-hover":
|
|
781
|
-
"--cp-new-chat-shadow-purple-active":
|
|
782
|
-
"--cp-drop-zone-ring":
|
|
783
|
-
"--cp-trigger-bg":
|
|
784
|
-
"--cp-trigger-icon":
|
|
785
|
-
"--cp-trigger-icon-idle":
|
|
786
|
-
"--cp-skeleton-color":
|
|
787
|
-
}), Q =
|
|
764
|
+
}, [ke, C]), Fe = t({
|
|
765
|
+
"--cp-bg": j?.background,
|
|
766
|
+
"--sb-border": j?.border,
|
|
767
|
+
"--cp-item-hover": j?.itemHover,
|
|
768
|
+
"--cp-item-active": j?.itemActive,
|
|
769
|
+
"--cp-text": j?.text,
|
|
770
|
+
"--cp-text-secondary": j?.textSecondary,
|
|
771
|
+
"--cp-new-chat-bg": N?.background,
|
|
772
|
+
"--cp-new-chat-hover": N?.hoverBackground,
|
|
773
|
+
"--cp-new-chat-active": N?.activeBackground,
|
|
774
|
+
"--cp-new-chat-text": N?.text,
|
|
775
|
+
"--cp-new-chat-shadow-blue": N?.shadowBlue,
|
|
776
|
+
"--cp-new-chat-shadow-blue-hover": N?.shadowBlueHover,
|
|
777
|
+
"--cp-new-chat-shadow-blue-active": N?.shadowBlueActive,
|
|
778
|
+
"--cp-new-chat-shadow-purple": N?.shadowPurple,
|
|
779
|
+
"--cp-new-chat-shadow-purple-hover": N?.shadowPurpleHover,
|
|
780
|
+
"--cp-new-chat-shadow-purple-active": N?.shadowPurpleActive,
|
|
781
|
+
"--cp-drop-zone-ring": j?.dropZoneRing,
|
|
782
|
+
"--cp-trigger-bg": j?.triggerBackground,
|
|
783
|
+
"--cp-trigger-icon": j?.triggerIcon,
|
|
784
|
+
"--cp-trigger-icon-idle": j?.triggerIconIdle,
|
|
785
|
+
"--cp-skeleton-color": j?.skeletonColor
|
|
786
|
+
}), Q = T(() => e.filter((e) => Ce(e, G) && we(e, U)), [
|
|
788
787
|
e,
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
]), Ie =
|
|
788
|
+
G,
|
|
789
|
+
U
|
|
790
|
+
]), Ie = T(() => Q.filter((e) => e.isPinned), [Q]), Le = T(() => Q.filter((e) => !e.isPinned && e.source !== X.Shared && e.source !== X.Organization), [Q]), Re = T(() => Q.filter((e) => !e.isPinned && e.source === X.Shared), [Q]), ze = T(() => Q.filter((e) => !e.isPinned && e.source === X.Organization), [Q]), Be = T(() => [
|
|
792
791
|
{
|
|
793
792
|
key: X.Pinned,
|
|
794
793
|
label: V?.pinned ?? "Pinned",
|
|
@@ -815,52 +814,52 @@ var Y = /* @__PURE__ */ function(e) {
|
|
|
815
814
|
Le,
|
|
816
815
|
Re,
|
|
817
816
|
ze
|
|
818
|
-
]), $ =
|
|
817
|
+
]), $ = T(() => {
|
|
819
818
|
let e = [];
|
|
820
819
|
for (let t of Be) if (t.items.length !== 0 && (e.push({
|
|
821
820
|
kind: Y.Header,
|
|
822
821
|
groupKey: t.key,
|
|
823
822
|
label: t.label
|
|
824
|
-
}),
|
|
823
|
+
}), q.has(t.key))) for (let n of t.items) e.push({
|
|
825
824
|
kind: Y.Item,
|
|
826
825
|
item: n,
|
|
827
826
|
groupKey: t.key
|
|
828
827
|
});
|
|
829
828
|
return e;
|
|
830
|
-
}, [Be,
|
|
831
|
-
|
|
832
|
-
if (!d ||
|
|
829
|
+
}, [Be, q]);
|
|
830
|
+
S(() => {
|
|
831
|
+
if (!d || ue.current === d) return;
|
|
833
832
|
let e = $.findIndex((e) => e.kind === Y.Item && e.item.id === d);
|
|
834
|
-
e >= 0 && (
|
|
833
|
+
e >= 0 && (ce.current?.scrollToRow({
|
|
835
834
|
index: e,
|
|
836
835
|
align: "smart",
|
|
837
836
|
behavior: "smooth"
|
|
838
|
-
}),
|
|
837
|
+
}), ue.current = d);
|
|
839
838
|
}, [
|
|
840
839
|
d,
|
|
841
840
|
Be,
|
|
842
|
-
|
|
841
|
+
q,
|
|
843
842
|
$
|
|
844
843
|
]);
|
|
845
|
-
let Ve =
|
|
844
|
+
let Ve = T(() => ({
|
|
846
845
|
rows: $,
|
|
847
|
-
expandedGroups:
|
|
846
|
+
expandedGroups: q,
|
|
848
847
|
onToggleGroup: Oe,
|
|
849
|
-
listId:
|
|
848
|
+
listId: J,
|
|
850
849
|
activeConversationId: d,
|
|
851
|
-
searchQuery:
|
|
850
|
+
searchQuery: U,
|
|
852
851
|
onSelectConversation: u,
|
|
853
852
|
getActions: _,
|
|
854
853
|
onActionMenuOpen: v,
|
|
855
854
|
actionsLabel: H,
|
|
856
855
|
styles: {
|
|
857
|
-
groupHeaderClassName:
|
|
858
|
-
itemTitleClassName:
|
|
856
|
+
groupHeaderClassName: M?.groupHeaderClassName,
|
|
857
|
+
itemTitleClassName: M?.itemTitleClassName,
|
|
859
858
|
itemIconBadgeClassName: h?.itemIconBadgeClassName
|
|
860
859
|
},
|
|
861
|
-
draggingId:
|
|
860
|
+
draggingId: pe,
|
|
862
861
|
dragOverId: he,
|
|
863
|
-
allowedDropGroups:
|
|
862
|
+
allowedDropGroups: ve,
|
|
864
863
|
onDragStart: (e) => Ae(e, $),
|
|
865
864
|
onDragEnd: je,
|
|
866
865
|
onDragOver: Me,
|
|
@@ -868,98 +867,98 @@ var Y = /* @__PURE__ */ function(e) {
|
|
|
868
867
|
onDrop: Pe
|
|
869
868
|
}), [
|
|
870
869
|
$,
|
|
871
|
-
|
|
870
|
+
q,
|
|
872
871
|
Oe,
|
|
873
|
-
|
|
872
|
+
J,
|
|
874
873
|
d,
|
|
875
|
-
|
|
874
|
+
U,
|
|
876
875
|
u,
|
|
877
876
|
_,
|
|
878
877
|
v,
|
|
879
878
|
H,
|
|
880
|
-
|
|
881
|
-
|
|
879
|
+
M?.groupHeaderClassName,
|
|
880
|
+
M?.itemTitleClassName,
|
|
882
881
|
h?.itemIconBadgeClassName,
|
|
883
|
-
|
|
882
|
+
pe,
|
|
884
883
|
he,
|
|
885
|
-
|
|
884
|
+
ve,
|
|
886
885
|
Ae,
|
|
887
886
|
je,
|
|
888
887
|
Me,
|
|
889
888
|
Ne,
|
|
890
889
|
Pe
|
|
891
890
|
]), He = e.length === 0, Ue = e.length > 0 && Q.length === 0;
|
|
892
|
-
return /* @__PURE__ */
|
|
891
|
+
return /* @__PURE__ */ k(s, {
|
|
893
892
|
isOpen: l,
|
|
894
893
|
orientation: o.Left,
|
|
895
|
-
title:
|
|
894
|
+
title: P,
|
|
896
895
|
labels: {
|
|
897
|
-
ariaLabel:
|
|
898
|
-
closeLabel:
|
|
896
|
+
ariaLabel: P,
|
|
897
|
+
closeLabel: ne
|
|
899
898
|
},
|
|
900
899
|
onClose: y,
|
|
901
900
|
styles: {
|
|
902
901
|
colors: {
|
|
903
|
-
background:
|
|
904
|
-
border:
|
|
902
|
+
background: j?.background,
|
|
903
|
+
border: j?.border
|
|
905
904
|
},
|
|
906
|
-
typography: { fontClassName:
|
|
905
|
+
typography: { fontClassName: M?.fontClassName },
|
|
907
906
|
bodyClassName: "flex flex-col overflow-hidden p-0 gap-3",
|
|
908
907
|
cssVars: Fe,
|
|
909
|
-
titleClassName:
|
|
908
|
+
titleClassName: M?.fontClassName,
|
|
910
909
|
headerClassName: "h-[64px]",
|
|
911
910
|
className: n(l ? "w-[325px] border-s border-e mobile:w-full" : "w-0", g)
|
|
912
911
|
},
|
|
913
912
|
rightActions: b,
|
|
914
913
|
children: [
|
|
915
|
-
/* @__PURE__ */
|
|
916
|
-
label:
|
|
917
|
-
onClick:
|
|
918
|
-
labelClassName:
|
|
919
|
-
colors:
|
|
914
|
+
/* @__PURE__ */ O(ye, {
|
|
915
|
+
label: L,
|
|
916
|
+
onClick: m,
|
|
917
|
+
labelClassName: M?.newChatLabelClassName,
|
|
918
|
+
colors: N
|
|
920
919
|
}),
|
|
921
|
-
/* @__PURE__ */
|
|
922
|
-
value:
|
|
923
|
-
onChange:
|
|
920
|
+
/* @__PURE__ */ O(a, {
|
|
921
|
+
value: U,
|
|
922
|
+
onChange: W,
|
|
924
923
|
labels: {
|
|
925
|
-
placeholder:
|
|
926
|
-
clearLabel:
|
|
924
|
+
placeholder: R,
|
|
925
|
+
clearLabel: z
|
|
927
926
|
}
|
|
928
927
|
}),
|
|
929
|
-
/* @__PURE__ */
|
|
930
|
-
activeTab:
|
|
928
|
+
/* @__PURE__ */ O(_e, {
|
|
929
|
+
activeTab: G,
|
|
931
930
|
labels: B,
|
|
932
931
|
onChange: (e) => {
|
|
933
|
-
|
|
932
|
+
K(e), A?.(e);
|
|
934
933
|
},
|
|
935
|
-
tabClassName:
|
|
934
|
+
tabClassName: M?.tabClassName
|
|
936
935
|
}),
|
|
937
|
-
/* @__PURE__ */
|
|
936
|
+
/* @__PURE__ */ O("span", {
|
|
938
937
|
role: "status",
|
|
939
938
|
"aria-live": "polite",
|
|
940
939
|
className: "sr-only",
|
|
941
|
-
children: c ?
|
|
940
|
+
children: c ? te : He ? F : Ue ? I : ""
|
|
942
941
|
}),
|
|
943
|
-
/* @__PURE__ */
|
|
942
|
+
/* @__PURE__ */ O("div", {
|
|
944
943
|
className: "flex-1 overflow-hidden px-2 py-1",
|
|
945
|
-
children: c ? /* @__PURE__ */
|
|
944
|
+
children: c ? /* @__PURE__ */ O("div", {
|
|
946
945
|
className: "flex flex-col gap-3 px-2 py-3",
|
|
947
|
-
children: Array.from({ length: 15 }, (e, t) => /* @__PURE__ */
|
|
946
|
+
children: Array.from({ length: 15 }, (e, t) => /* @__PURE__ */ O(p, {
|
|
948
947
|
avatar: { size: 24 },
|
|
949
|
-
showTitle: { width:
|
|
948
|
+
showTitle: { width: se(t) },
|
|
950
949
|
paragraph: !1,
|
|
951
950
|
active: !0,
|
|
952
951
|
color: Z.skeletonColor
|
|
953
952
|
}, t))
|
|
954
|
-
}) : He ? /* @__PURE__ */
|
|
955
|
-
listRef:
|
|
956
|
-
id:
|
|
953
|
+
}) : He ? /* @__PURE__ */ O(r, { label: F }) : Ue ? /* @__PURE__ */ O(i, { label: I }) : /* @__PURE__ */ O(oe, {
|
|
954
|
+
listRef: ce,
|
|
955
|
+
id: J,
|
|
957
956
|
role: "list",
|
|
958
957
|
style: { height: "100%" },
|
|
959
|
-
rowComponent:
|
|
958
|
+
rowComponent: Se,
|
|
960
959
|
rowCount: $.length,
|
|
961
|
-
rowHeight:
|
|
962
|
-
overscanCount:
|
|
960
|
+
rowHeight: le,
|
|
961
|
+
overscanCount: ie,
|
|
963
962
|
onResize: De,
|
|
964
963
|
rowProps: Ve
|
|
965
964
|
})
|
|
@@ -968,4 +967,4 @@ var Y = /* @__PURE__ */ function(e) {
|
|
|
968
967
|
});
|
|
969
968
|
});
|
|
970
969
|
//#endregion
|
|
971
|
-
export {
|
|
970
|
+
export { Ee as ConversationPanel, X as FilterTab };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@epam/ai-dial-conversation-panel",
|
|
3
3
|
"description": "Virtualized sidebar panel for browsing conversation history with grouping, tabs, and search",
|
|
4
|
-
"version": "1.1.0-dev.
|
|
4
|
+
"version": "1.1.0-dev.78",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./index.js",
|
|
@@ -18,14 +18,14 @@
|
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"react-window": "^2.2.7",
|
|
21
|
-
"@epam/ai-dial-kit": "1.1.0-dev.
|
|
22
|
-
"@epam/ai-dial-ui-kit": "^0.13.0-dev.
|
|
21
|
+
"@epam/ai-dial-kit": "1.1.0-dev.78",
|
|
22
|
+
"@epam/ai-dial-ui-kit": "^0.13.0-dev.25"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"react": "^19.0.0",
|
|
26
26
|
"@tabler/icons-react": "^3.0.0",
|
|
27
|
-
"@epam/ai-dial-chat-shared": "1.1.0-dev.
|
|
28
|
-
"@epam/ai-dial-sidebar": "1.1.0-dev.
|
|
27
|
+
"@epam/ai-dial-chat-shared": "1.1.0-dev.78",
|
|
28
|
+
"@epam/ai-dial-sidebar": "1.1.0-dev.78"
|
|
29
29
|
},
|
|
30
30
|
"repository": {
|
|
31
31
|
"type": "git",
|