@selectwin/kit 0.1.221 → 0.1.222
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/SelectAssistant.js +97 -97
- package/dist/SelectAssistantLauncher.d.ts +21 -0
- package/dist/SelectAssistantLauncher.js +37 -0
- package/dist/SelectConversation.d.ts +26 -3
- package/dist/SelectConversation.js +102 -64
- package/dist/index.d.ts +2 -1
- package/dist/index.js +131 -130
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/SelectAssistant.js
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
/* empty css */
|
|
2
2
|
import { CloseIcon as e, SendIcon as t } from "./icons.js";
|
|
3
3
|
import { useSelectMessages as n } from "./SelectLocale.js";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { AssistantLauncherButton as r } from "./SelectAssistantLauncher.js";
|
|
5
|
+
import { useEffect as i, useId as a, useRef as o, useState as s } from "react";
|
|
6
|
+
import { jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
6
7
|
//#region src/SelectAssistant.tsx
|
|
7
|
-
var
|
|
8
|
-
function
|
|
9
|
-
let
|
|
10
|
-
|
|
11
|
-
let e =
|
|
12
|
-
if (!
|
|
13
|
-
|
|
8
|
+
var u = 240;
|
|
9
|
+
function d({ open: d, onOpenChange: f, icon: p, title: g, subtitle: _, launcherLabel: v, badge: y, children: b, scrollKey: x, suggestions: S, onSuggestion: C, onSend: w, placeholder: T, disabled: E = !1, typing: D = !1, headerAction: O, anchor: k = "viewport", closeLabel: A, sendLabel: j, inputLabel: M, className: N }) {
|
|
10
|
+
let P = n(), F = A ?? P.common.close, I = j ?? P.assistant.send, L = M ?? P.assistant.input, R = a(), z = o(null), B = o(null), V = o(null), [H, U] = s(""), W = o(0), G = D !== !1;
|
|
11
|
+
i(() => {
|
|
12
|
+
let e = z.current;
|
|
13
|
+
if (!d || !e) {
|
|
14
|
+
W.current = 0;
|
|
14
15
|
return;
|
|
15
16
|
}
|
|
16
|
-
let t =
|
|
17
|
-
|
|
17
|
+
let t = W.current === 0, n = e.children[W.current];
|
|
18
|
+
W.current = e.children.length;
|
|
18
19
|
let r = e.querySelectorAll(":scope > .select-chat__turn"), i = r.length > 0 ? r[r.length - 1] : null;
|
|
19
20
|
if (!i && n && !t) {
|
|
20
21
|
let e = n.previousElementSibling;
|
|
@@ -23,162 +24,161 @@ function u({ open: u, onOpenChange: d, icon: f, title: h, subtitle: g, launcherL
|
|
|
23
24
|
let a = e.scrollHeight - e.clientHeight, o = i ? Math.min(a, i.getBoundingClientRect().top - e.getBoundingClientRect().top + e.scrollTop - 12) : a;
|
|
24
25
|
t ? e.scrollTop = o : o > e.scrollTop + 1 && (typeof e.scrollTo == "function" ? e.scrollTo({
|
|
25
26
|
top: o,
|
|
26
|
-
behavior:
|
|
27
|
+
behavior: h() ? "auto" : "smooth"
|
|
27
28
|
}) : e.scrollTop = o);
|
|
28
29
|
}, [
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
]),
|
|
30
|
+
d,
|
|
31
|
+
x,
|
|
32
|
+
G
|
|
33
|
+
]), i(() => {
|
|
33
34
|
var e;
|
|
34
|
-
|
|
35
|
-
}, [
|
|
36
|
-
let
|
|
35
|
+
d && typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(hover: hover) and (pointer: fine)").matches && ((e = B.current) == null || e.focus());
|
|
36
|
+
}, [d]);
|
|
37
|
+
let K = o(!1);
|
|
38
|
+
i(() => {
|
|
37
39
|
var e;
|
|
38
|
-
d(!1
|
|
39
|
-
},
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
e.
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
children: [u && /* @__PURE__ */ c("section", {
|
|
49
|
-
id: L,
|
|
40
|
+
!d && K.current && (K.current = !1, (e = V.current) == null || e.focus());
|
|
41
|
+
}, [d]);
|
|
42
|
+
let q = () => {
|
|
43
|
+
var e;
|
|
44
|
+
K.current = !0, f(!1), (e = V.current) == null || e.focus();
|
|
45
|
+
};
|
|
46
|
+
return /* @__PURE__ */ l("div", {
|
|
47
|
+
className: "select-assistant" + (k === "container" ? " select-assistant--container" : "") + (d ? " is-open" : "") + (N ? " " + N : ""),
|
|
48
|
+
children: [d && /* @__PURE__ */ l("section", {
|
|
49
|
+
id: R,
|
|
50
50
|
className: "select-assistant__panel",
|
|
51
51
|
role: "dialog",
|
|
52
52
|
"aria-modal": "false",
|
|
53
|
-
"aria-label": typeof
|
|
54
|
-
onKeyDown:
|
|
53
|
+
"aria-label": typeof g == "string" ? g : v,
|
|
54
|
+
onKeyDown: (e) => {
|
|
55
|
+
e.key === "Escape" && (e.stopPropagation(), q());
|
|
56
|
+
},
|
|
55
57
|
children: [
|
|
56
|
-
/* @__PURE__ */
|
|
58
|
+
/* @__PURE__ */ l("header", {
|
|
57
59
|
className: "select-assistant__head",
|
|
58
60
|
children: [
|
|
59
|
-
/* @__PURE__ */
|
|
61
|
+
/* @__PURE__ */ c("span", {
|
|
60
62
|
className: "select-assistant__mark",
|
|
61
63
|
"aria-hidden": "true",
|
|
62
|
-
children:
|
|
64
|
+
children: p
|
|
63
65
|
}),
|
|
64
|
-
/* @__PURE__ */
|
|
66
|
+
/* @__PURE__ */ l("div", {
|
|
65
67
|
className: "select-assistant__heading",
|
|
66
|
-
children: [/* @__PURE__ */
|
|
68
|
+
children: [/* @__PURE__ */ c("span", {
|
|
67
69
|
className: "select-assistant__title",
|
|
68
|
-
children: h
|
|
69
|
-
}), g != null && /* @__PURE__ */ s("span", {
|
|
70
|
-
className: "select-assistant__subtitle",
|
|
71
70
|
children: g
|
|
71
|
+
}), _ != null && /* @__PURE__ */ c("span", {
|
|
72
|
+
className: "select-assistant__subtitle",
|
|
73
|
+
children: _
|
|
72
74
|
})]
|
|
73
75
|
}),
|
|
74
|
-
|
|
75
|
-
/* @__PURE__ */
|
|
76
|
+
O,
|
|
77
|
+
/* @__PURE__ */ c("button", {
|
|
76
78
|
type: "button",
|
|
77
79
|
className: "select-assistant__close",
|
|
78
|
-
onClick:
|
|
79
|
-
"aria-label":
|
|
80
|
-
title:
|
|
81
|
-
children: /* @__PURE__ */
|
|
80
|
+
onClick: q,
|
|
81
|
+
"aria-label": F,
|
|
82
|
+
title: F,
|
|
83
|
+
children: /* @__PURE__ */ c(e, {})
|
|
82
84
|
})
|
|
83
85
|
]
|
|
84
86
|
}),
|
|
85
|
-
/* @__PURE__ */
|
|
86
|
-
ref:
|
|
87
|
+
/* @__PURE__ */ l("div", {
|
|
88
|
+
ref: z,
|
|
87
89
|
className: "select-assistant__body",
|
|
88
90
|
role: "log",
|
|
89
91
|
"aria-live": "polite",
|
|
90
|
-
children: [
|
|
92
|
+
children: [b, G ? /* @__PURE__ */ c(m, { label: typeof D == "string" ? D : void 0 }) : null]
|
|
91
93
|
}),
|
|
92
|
-
(
|
|
94
|
+
(w || S && S.length > 0) && /* @__PURE__ */ l("footer", {
|
|
93
95
|
className: "select-assistant__foot",
|
|
94
|
-
children: [
|
|
96
|
+
children: [S && S.length > 0 && /* @__PURE__ */ c("div", {
|
|
95
97
|
className: "select-assistant__suggestions",
|
|
96
|
-
children:
|
|
98
|
+
children: S.map((e) => /* @__PURE__ */ c("button", {
|
|
97
99
|
type: "button",
|
|
98
100
|
className: "select-assistant__chip",
|
|
99
|
-
disabled:
|
|
100
|
-
onClick: () =>
|
|
101
|
+
disabled: E || G,
|
|
102
|
+
onClick: () => C == null ? void 0 : C(e.id),
|
|
101
103
|
children: e.label
|
|
102
104
|
}, e.id))
|
|
103
|
-
}),
|
|
105
|
+
}), w && /* @__PURE__ */ l("form", {
|
|
104
106
|
className: "select-assistant__composer",
|
|
105
|
-
onSubmit:
|
|
106
|
-
|
|
107
|
-
|
|
107
|
+
onSubmit: (e) => {
|
|
108
|
+
e.preventDefault();
|
|
109
|
+
let t = H.trim();
|
|
110
|
+
!t || E || G || (w == null || w(t), U(""));
|
|
111
|
+
},
|
|
112
|
+
children: [/* @__PURE__ */ c("input", {
|
|
113
|
+
ref: B,
|
|
108
114
|
className: "select-assistant__input",
|
|
109
115
|
type: "text",
|
|
110
|
-
value:
|
|
111
|
-
onChange: (e) =>
|
|
112
|
-
placeholder:
|
|
113
|
-
"aria-label":
|
|
114
|
-
maxLength:
|
|
116
|
+
value: H,
|
|
117
|
+
onChange: (e) => U(e.target.value),
|
|
118
|
+
placeholder: T,
|
|
119
|
+
"aria-label": L,
|
|
120
|
+
maxLength: u,
|
|
115
121
|
autoComplete: "off",
|
|
116
122
|
enterKeyHint: "send",
|
|
117
|
-
disabled:
|
|
118
|
-
}), /* @__PURE__ */
|
|
123
|
+
disabled: E
|
|
124
|
+
}), /* @__PURE__ */ c("button", {
|
|
119
125
|
type: "submit",
|
|
120
126
|
className: "select-assistant__send",
|
|
121
|
-
disabled:
|
|
122
|
-
"aria-label":
|
|
123
|
-
title:
|
|
124
|
-
children: /* @__PURE__ */
|
|
127
|
+
disabled: E || G || H.trim() === "",
|
|
128
|
+
"aria-label": I,
|
|
129
|
+
title: I,
|
|
130
|
+
children: /* @__PURE__ */ c(t, {})
|
|
125
131
|
})]
|
|
126
132
|
})]
|
|
127
133
|
})
|
|
128
134
|
]
|
|
129
|
-
}), /* @__PURE__ */ c(
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
title: _,
|
|
138
|
-
children: [u ? /* @__PURE__ */ s(e, {}) : f, J && !u && /* @__PURE__ */ s("span", {
|
|
139
|
-
className: "select-assistant__badge",
|
|
140
|
-
"aria-hidden": "true",
|
|
141
|
-
children: v > 99 ? "99+" : v
|
|
142
|
-
})]
|
|
135
|
+
}), /* @__PURE__ */ c(r, {
|
|
136
|
+
buttonRef: V,
|
|
137
|
+
icon: p,
|
|
138
|
+
label: v,
|
|
139
|
+
badge: y,
|
|
140
|
+
open: d,
|
|
141
|
+
controls: d ? R : void 0,
|
|
142
|
+
onClick: () => f(!d)
|
|
143
143
|
})]
|
|
144
144
|
});
|
|
145
145
|
}
|
|
146
|
-
function
|
|
147
|
-
return /* @__PURE__ */
|
|
146
|
+
function f({ from: e, bare: t = !1, children: n }) {
|
|
147
|
+
return /* @__PURE__ */ c("div", {
|
|
148
148
|
className: `select-chat__msg select-chat__msg--${e}${t ? " select-chat__msg--bare" : ""}`,
|
|
149
|
-
children: /* @__PURE__ */
|
|
149
|
+
children: /* @__PURE__ */ c("div", {
|
|
150
150
|
className: "select-chat__bubble",
|
|
151
151
|
children: n
|
|
152
152
|
})
|
|
153
153
|
});
|
|
154
154
|
}
|
|
155
|
-
function
|
|
156
|
-
return /* @__PURE__ */
|
|
155
|
+
function p({ children: e }) {
|
|
156
|
+
return /* @__PURE__ */ c("div", {
|
|
157
157
|
className: "select-chat__turn",
|
|
158
158
|
children: e
|
|
159
159
|
});
|
|
160
160
|
}
|
|
161
|
-
function
|
|
161
|
+
function m({ label: e }) {
|
|
162
162
|
let t = n().assistant.typing;
|
|
163
|
-
return /* @__PURE__ */
|
|
163
|
+
return /* @__PURE__ */ c("div", {
|
|
164
164
|
className: "select-chat__msg select-chat__msg--assistant select-chat__msg--typing",
|
|
165
165
|
role: "status",
|
|
166
166
|
"aria-label": e ?? t,
|
|
167
|
-
children: /* @__PURE__ */
|
|
167
|
+
children: /* @__PURE__ */ l("div", {
|
|
168
168
|
className: "select-chat__bubble",
|
|
169
169
|
"aria-hidden": "true",
|
|
170
170
|
children: [
|
|
171
|
-
/* @__PURE__ */
|
|
172
|
-
/* @__PURE__ */
|
|
173
|
-
/* @__PURE__ */
|
|
171
|
+
/* @__PURE__ */ c("span", { className: "select-chat__dot" }),
|
|
172
|
+
/* @__PURE__ */ c("span", { className: "select-chat__dot" }),
|
|
173
|
+
/* @__PURE__ */ c("span", { className: "select-chat__dot" })
|
|
174
174
|
]
|
|
175
175
|
})
|
|
176
176
|
});
|
|
177
177
|
}
|
|
178
|
-
function
|
|
178
|
+
function h() {
|
|
179
179
|
return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
180
180
|
}
|
|
181
181
|
//#endregion
|
|
182
|
-
export {
|
|
182
|
+
export { d as SelectAssistant, f as SelectChatMessage, p as SelectChatTurn, m as SelectChatTyping };
|
|
183
183
|
|
|
184
184
|
//# sourceMappingURL=SelectAssistant.js.map
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { ReactNode, Ref } from 'react';
|
|
2
|
+
/** O botão em si (o `SelectAssistant` usa o mesmo). */
|
|
3
|
+
export declare function AssistantLauncherButton({ icon, label, badge, open, controls, onClick, buttonRef, }: {
|
|
4
|
+
icon: ReactNode;
|
|
5
|
+
label: string;
|
|
6
|
+
badge?: number;
|
|
7
|
+
open?: boolean;
|
|
8
|
+
controls?: string;
|
|
9
|
+
onClick: () => void;
|
|
10
|
+
buttonRef?: Ref<HTMLButtonElement>;
|
|
11
|
+
}): import("react").JSX.Element;
|
|
12
|
+
/** O botão no canto, antes de a janela existir: no mesmo lugar do `SelectAssistant` (`anchor`, as distâncias). */
|
|
13
|
+
export declare function SelectAssistantLauncher({ icon, label, badge, onClick, anchor, className, }: {
|
|
14
|
+
icon: ReactNode;
|
|
15
|
+
/** O nome do botão ("Ao vivo"). */
|
|
16
|
+
label: string;
|
|
17
|
+
badge?: number;
|
|
18
|
+
onClick: () => void;
|
|
19
|
+
anchor?: 'viewport' | 'container';
|
|
20
|
+
className?: string;
|
|
21
|
+
}): import("react").JSX.Element;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/* empty css */
|
|
2
|
+
import { CloseIcon as e } from "./icons.js";
|
|
3
|
+
import { jsx as t, jsxs as n } from "react/jsx-runtime";
|
|
4
|
+
//#region src/SelectAssistantLauncher.tsx
|
|
5
|
+
function r({ icon: r, label: i, badge: a, open: o = !1, controls: s, onClick: c, buttonRef: l }) {
|
|
6
|
+
let u = typeof a == "number" && a > 0;
|
|
7
|
+
return /* @__PURE__ */ n("button", {
|
|
8
|
+
ref: l,
|
|
9
|
+
type: "button",
|
|
10
|
+
className: "select-assistant__launcher",
|
|
11
|
+
onClick: c,
|
|
12
|
+
"aria-expanded": o,
|
|
13
|
+
"aria-controls": s,
|
|
14
|
+
"aria-label": u ? `${i} (${a})` : i,
|
|
15
|
+
title: i,
|
|
16
|
+
children: [o ? /* @__PURE__ */ t(e, {}) : r, u && !o && /* @__PURE__ */ t("span", {
|
|
17
|
+
className: "select-assistant__badge",
|
|
18
|
+
"aria-hidden": "true",
|
|
19
|
+
children: a > 99 ? "99+" : a
|
|
20
|
+
})]
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
function i({ icon: e, label: n, badge: i, onClick: a, anchor: o = "viewport", className: s }) {
|
|
24
|
+
return /* @__PURE__ */ t("div", {
|
|
25
|
+
className: "select-assistant" + (o === "container" ? " select-assistant--container" : "") + (s ? " " + s : ""),
|
|
26
|
+
children: /* @__PURE__ */ t(r, {
|
|
27
|
+
icon: e,
|
|
28
|
+
label: n,
|
|
29
|
+
badge: i,
|
|
30
|
+
onClick: a
|
|
31
|
+
})
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
//#endregion
|
|
35
|
+
export { r as AssistantLauncherButton, i as SelectAssistantLauncher };
|
|
36
|
+
|
|
37
|
+
//# sourceMappingURL=SelectAssistantLauncher.js.map
|
|
@@ -1,7 +1,12 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
export declare function SelectConversation({ children, 'aria-label': ariaLabel }: {
|
|
1
|
+
import { MouseEvent, ReactNode } from 'react';
|
|
2
|
+
export declare function SelectConversation({ children, 'aria-label': ariaLabel, onPinnedChange, }: {
|
|
3
3
|
children: ReactNode;
|
|
4
4
|
'aria-label'?: string;
|
|
5
|
+
/**
|
|
6
|
+
* 0.1.222: quem lê está no fim (acompanha o que chega) ou rolou para cima para reler. Para quem conta o que chegou
|
|
7
|
+
* enquanto a pessoa estava acima (o "N novos" do `SelectConversationNewer`).
|
|
8
|
+
*/
|
|
9
|
+
onPinnedChange?: (pinned: boolean) => void;
|
|
5
10
|
}): import("react").JSX.Element;
|
|
6
11
|
/** O separador de dia ("Hoje", "Ontem", "12 out"). */
|
|
7
12
|
export declare function SelectConversationDay({ children }: {
|
|
@@ -36,8 +41,17 @@ export interface SelectConversationBubbleProps {
|
|
|
36
41
|
time?: ReactNode;
|
|
37
42
|
/** 0.1.221: a mídia dentro do balão, acima do texto (a legenda): o `SelectConversationMedia`. */
|
|
38
43
|
media?: ReactNode;
|
|
44
|
+
/** 0.1.222: chegou com a conversa aberta e ainda não foi visto — a borda do acento no balão. */
|
|
45
|
+
fresh?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* 0.1.222: o balão inteiro é um LINK (o evento que abre a mensagem): `to` é um endereço do app (o `<Link>` do roteador)
|
|
48
|
+
* e `href`, um de fora. `onClick` vem junto (fechar a janela no celular, por exemplo).
|
|
49
|
+
*/
|
|
50
|
+
to?: string;
|
|
51
|
+
href?: string;
|
|
52
|
+
onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
|
|
39
53
|
}
|
|
40
|
-
export declare function SelectConversationBubble({ direction, author, label, attachment, meta, metaTone, children, avatar, time, media }: SelectConversationBubbleProps): import("react").JSX.Element;
|
|
54
|
+
export declare function SelectConversationBubble({ direction, author, label, attachment, meta, metaTone, children, avatar, time, media, fresh, to, href, onClick, }: SelectConversationBubbleProps): import("react").JSX.Element;
|
|
41
55
|
/**
|
|
42
56
|
* 0.1.221: a mídia de uma mensagem, dentro do balão — a foto, a figurinha (sem fundo, menor), o vídeo e o áudio (com os
|
|
43
57
|
* controles do navegador). Nada é baixado antes de aparecer (`loading="lazy"`, `preload="none"`). Quando o arquivo não
|
|
@@ -50,3 +64,12 @@ export declare function SelectConversationMedia({ kind, src, alt, onError, }: {
|
|
|
50
64
|
alt?: string;
|
|
51
65
|
onError?: () => void;
|
|
52
66
|
}): import("react").JSX.Element;
|
|
67
|
+
/**
|
|
68
|
+
* 0.1.222: o "N novos ↓" — o que chegou enquanto quem lê estava acima, num botão que fica no pé da caixa que rola. O
|
|
69
|
+
* clique leva ao fim (a caixa de quem contém a conversa) e avisa quem usa, que zera a conta. Quem decide quando mostrar
|
|
70
|
+
* (e o número) é quem usa: o `onPinnedChange` da `SelectConversation` diz quando a pessoa saiu do fim.
|
|
71
|
+
*/
|
|
72
|
+
export declare function SelectConversationNewer({ children, onClick }: {
|
|
73
|
+
children: ReactNode;
|
|
74
|
+
onClick?: () => void;
|
|
75
|
+
}): import("react").JSX.Element;
|
|
@@ -1,124 +1,138 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { safeHref as e } from "./internal/safeHref.js";
|
|
2
|
+
import { useEffect as t, useLayoutEffect as n, useRef as r } from "react";
|
|
3
|
+
import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
4
|
+
import { Link as s } from "react-router-dom";
|
|
3
5
|
//#region src/SelectConversation.tsx
|
|
4
|
-
var
|
|
5
|
-
function
|
|
6
|
+
var c = (...e) => e.filter(Boolean).join(" "), l = 48;
|
|
7
|
+
function u(e) {
|
|
6
8
|
for (let t = (e == null ? void 0 : e.parentElement) ?? null; t; t = t.parentElement) {
|
|
7
9
|
let { overflowY: e } = getComputedStyle(t);
|
|
8
10
|
if (e === "auto" || e === "scroll") return t;
|
|
9
11
|
}
|
|
10
12
|
return null;
|
|
11
13
|
}
|
|
12
|
-
function
|
|
13
|
-
let
|
|
14
|
-
return
|
|
15
|
-
let e =
|
|
14
|
+
function d({ children: e, "aria-label": i, onPinnedChange: o }) {
|
|
15
|
+
let s = r(null), c = r(!0), d = r(o);
|
|
16
|
+
return d.current = o, t(() => {
|
|
17
|
+
let e = u(s.current);
|
|
16
18
|
if (!e) return;
|
|
17
19
|
let t = () => {
|
|
18
|
-
|
|
20
|
+
var t;
|
|
21
|
+
let n = e.scrollHeight - e.scrollTop - e.clientHeight <= l;
|
|
22
|
+
n !== c.current && ((t = d.current) == null || t.call(d, n)), c.current = n;
|
|
19
23
|
};
|
|
20
24
|
return e.addEventListener("scroll", t, { passive: !0 }), () => e.removeEventListener("scroll", t);
|
|
21
|
-
}, []),
|
|
22
|
-
if (!
|
|
23
|
-
let e =
|
|
25
|
+
}, []), n(() => {
|
|
26
|
+
if (!c.current) return;
|
|
27
|
+
let e = u(s.current);
|
|
24
28
|
e && (e.scrollTop = e.scrollHeight);
|
|
25
|
-
}),
|
|
26
|
-
let e =
|
|
29
|
+
}), t(() => {
|
|
30
|
+
let e = s.current, t = u(e);
|
|
27
31
|
if (!e || !t || typeof ResizeObserver > "u") return;
|
|
28
32
|
let n = new ResizeObserver(() => {
|
|
29
|
-
|
|
33
|
+
c.current && (t.scrollTop = t.scrollHeight);
|
|
30
34
|
});
|
|
31
35
|
return n.observe(e), () => n.disconnect();
|
|
32
|
-
}, []), /* @__PURE__ */
|
|
33
|
-
ref:
|
|
36
|
+
}, []), /* @__PURE__ */ a("div", {
|
|
37
|
+
ref: s,
|
|
34
38
|
className: "select-convo",
|
|
35
39
|
role: "log",
|
|
36
40
|
"aria-live": "polite",
|
|
37
|
-
"aria-label":
|
|
38
|
-
children:
|
|
41
|
+
"aria-label": i,
|
|
42
|
+
children: e
|
|
39
43
|
});
|
|
40
44
|
}
|
|
41
|
-
function
|
|
42
|
-
return /* @__PURE__ */
|
|
45
|
+
function f({ children: e }) {
|
|
46
|
+
return /* @__PURE__ */ a("div", {
|
|
43
47
|
className: "select-convo__day",
|
|
44
48
|
role: "separator",
|
|
45
49
|
"aria-label": typeof e == "string" ? e : void 0,
|
|
46
50
|
children: e
|
|
47
51
|
});
|
|
48
52
|
}
|
|
49
|
-
function
|
|
50
|
-
return /* @__PURE__ */
|
|
53
|
+
function p({ children: e, time: t }) {
|
|
54
|
+
return /* @__PURE__ */ o("div", {
|
|
51
55
|
className: "select-convo__event",
|
|
52
|
-
children: [e, t ? /* @__PURE__ */
|
|
56
|
+
children: [e, t ? /* @__PURE__ */ o("span", {
|
|
53
57
|
className: "select-convo__event-time",
|
|
54
58
|
children: [" · ", t]
|
|
55
59
|
}) : null]
|
|
56
60
|
});
|
|
57
61
|
}
|
|
58
|
-
function
|
|
59
|
-
let
|
|
60
|
-
|
|
62
|
+
function m({ direction: t, author: n, label: r, attachment: l, meta: u, metaTone: d, children: f, avatar: p, time: m, media: h, fresh: g = !1, to: _, href: v, onClick: y }) {
|
|
63
|
+
let b = f != null && f !== "", x = b || !!r || h != null, S = _ != null || v != null ? e(_ ?? v) : void 0, C = c("select-convo__bubble", S !== void 0 && "select-convo__bubble--link"), w = /* @__PURE__ */ o(i, { children: [
|
|
64
|
+
r ? /* @__PURE__ */ a("span", {
|
|
65
|
+
className: "select-convo__label",
|
|
66
|
+
children: r
|
|
67
|
+
}) : null,
|
|
68
|
+
h == null ? null : /* @__PURE__ */ a("div", {
|
|
69
|
+
className: "select-convo__media",
|
|
70
|
+
children: h
|
|
71
|
+
}),
|
|
72
|
+
b ? /* @__PURE__ */ a("div", {
|
|
73
|
+
className: "select-convo__text",
|
|
74
|
+
children: f
|
|
75
|
+
}) : null
|
|
76
|
+
] }), T = /* @__PURE__ */ o(i, { children: [
|
|
77
|
+
n || m ? /* @__PURE__ */ o("span", {
|
|
61
78
|
className: "select-convo__author",
|
|
62
|
-
children: [
|
|
79
|
+
children: [n, m ? /* @__PURE__ */ a("span", {
|
|
63
80
|
className: "select-convo__time",
|
|
64
|
-
children:
|
|
81
|
+
children: m
|
|
65
82
|
}) : null]
|
|
66
83
|
}) : null,
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
children: u
|
|
81
|
-
}) : null
|
|
82
|
-
]
|
|
84
|
+
x ? S !== void 0 && _ != null ? /* @__PURE__ */ a(s, {
|
|
85
|
+
to: S,
|
|
86
|
+
className: C,
|
|
87
|
+
onClick: y,
|
|
88
|
+
children: w
|
|
89
|
+
}) : S === void 0 ? /* @__PURE__ */ a("div", {
|
|
90
|
+
className: C,
|
|
91
|
+
children: w
|
|
92
|
+
}) : /* @__PURE__ */ a("a", {
|
|
93
|
+
href: S,
|
|
94
|
+
className: C,
|
|
95
|
+
onClick: y,
|
|
96
|
+
children: w
|
|
83
97
|
}) : null,
|
|
84
|
-
|
|
98
|
+
l ? /* @__PURE__ */ a("div", {
|
|
85
99
|
className: "select-convo__attachment",
|
|
86
|
-
children:
|
|
100
|
+
children: l
|
|
87
101
|
}) : null,
|
|
88
|
-
|
|
89
|
-
className:
|
|
90
|
-
children:
|
|
102
|
+
u ? /* @__PURE__ */ a("span", {
|
|
103
|
+
className: c("select-convo__meta", d && `select-convo__meta--${d}`),
|
|
104
|
+
children: u
|
|
91
105
|
}) : null
|
|
92
106
|
] });
|
|
93
|
-
return
|
|
94
|
-
className:
|
|
95
|
-
children: [/* @__PURE__ */
|
|
107
|
+
return p ? /* @__PURE__ */ o("div", {
|
|
108
|
+
className: c("select-convo__msg", `select-convo__msg--${t}`, "select-convo__msg--avatar", g && "is-fresh"),
|
|
109
|
+
children: [/* @__PURE__ */ a("span", {
|
|
96
110
|
className: "select-convo__avatar",
|
|
97
111
|
"aria-hidden": "true",
|
|
98
|
-
children:
|
|
99
|
-
}), /* @__PURE__ */
|
|
112
|
+
children: p
|
|
113
|
+
}), /* @__PURE__ */ a("div", {
|
|
100
114
|
className: "select-convo__stack",
|
|
101
|
-
children:
|
|
115
|
+
children: T
|
|
102
116
|
})]
|
|
103
|
-
}) : /* @__PURE__ */
|
|
104
|
-
className:
|
|
105
|
-
children:
|
|
117
|
+
}) : /* @__PURE__ */ a("div", {
|
|
118
|
+
className: c("select-convo__msg", `select-convo__msg--${t}`, g && "is-fresh"),
|
|
119
|
+
children: T
|
|
106
120
|
});
|
|
107
121
|
}
|
|
108
|
-
function
|
|
109
|
-
return e === "audio" ? /* @__PURE__ */
|
|
122
|
+
function h({ kind: e, src: t, alt: n, onError: r }) {
|
|
123
|
+
return e === "audio" ? /* @__PURE__ */ a("audio", {
|
|
110
124
|
className: "select-convo__audio",
|
|
111
125
|
controls: !0,
|
|
112
126
|
preload: "none",
|
|
113
127
|
src: t,
|
|
114
128
|
onError: r
|
|
115
|
-
}) : e === "video" ? /* @__PURE__ */
|
|
129
|
+
}) : e === "video" ? /* @__PURE__ */ a("video", {
|
|
116
130
|
className: "select-convo__video",
|
|
117
131
|
controls: !0,
|
|
118
132
|
preload: "none",
|
|
119
133
|
src: t,
|
|
120
134
|
onError: r
|
|
121
|
-
}) : /* @__PURE__ */
|
|
135
|
+
}) : /* @__PURE__ */ a("img", {
|
|
122
136
|
className: `select-convo__image${e === "sticker" ? " select-convo__image--sticker" : ""}`,
|
|
123
137
|
src: t,
|
|
124
138
|
alt: n ?? "",
|
|
@@ -126,7 +140,31 @@ function p({ kind: e, src: t, alt: n, onError: r }) {
|
|
|
126
140
|
onError: r
|
|
127
141
|
});
|
|
128
142
|
}
|
|
143
|
+
function g({ children: e, onClick: t }) {
|
|
144
|
+
let n = r(null);
|
|
145
|
+
return /* @__PURE__ */ o("button", {
|
|
146
|
+
ref: n,
|
|
147
|
+
type: "button",
|
|
148
|
+
className: "select-convo__newer",
|
|
149
|
+
onClick: () => {
|
|
150
|
+
let e = u(n.current);
|
|
151
|
+
e && (e.scrollTop = e.scrollHeight), t == null || t();
|
|
152
|
+
},
|
|
153
|
+
children: [/* @__PURE__ */ a("svg", {
|
|
154
|
+
viewBox: "0 0 20 20",
|
|
155
|
+
width: "16",
|
|
156
|
+
height: "16",
|
|
157
|
+
fill: "none",
|
|
158
|
+
stroke: "currentColor",
|
|
159
|
+
strokeWidth: "1.8",
|
|
160
|
+
strokeLinecap: "round",
|
|
161
|
+
strokeLinejoin: "round",
|
|
162
|
+
"aria-hidden": "true",
|
|
163
|
+
children: /* @__PURE__ */ a("path", { d: "M5 8l5 5 5-5" })
|
|
164
|
+
}), e]
|
|
165
|
+
});
|
|
166
|
+
}
|
|
129
167
|
//#endregion
|
|
130
|
-
export {
|
|
168
|
+
export { d as SelectConversation, m as SelectConversationBubble, f as SelectConversationDay, p as SelectConversationEvent, h as SelectConversationMedia, g as SelectConversationNewer };
|
|
131
169
|
|
|
132
170
|
//# sourceMappingURL=SelectConversation.js.map
|
package/dist/index.d.ts
CHANGED
|
@@ -93,7 +93,7 @@ export type { SelectCalendarEvent, SelectCalendarProps, SelectCalendarView } fro
|
|
|
93
93
|
export { SelectHtmlFrame } from './SelectHtmlFrame';
|
|
94
94
|
export type { SelectHtmlFrameProps } from './SelectHtmlFrame';
|
|
95
95
|
export { SelectInbox, SelectInboxToolbar, SelectInboxEmpty, SelectInboxBanner, SelectMailboxStatus, SelectMailList, SelectMailListGroup, SelectMailListItem, SelectMailListSkeleton, SelectMailListNote, SelectMailReader, SelectMailMessage, SelectMailNotice, SelectMailAttachment, SelectLeadChip, SelectMailComposer, SelectMailComposerRow, SelectMailComposerInput, SelectMailComposerBody, SelectMailComposerFooter, SelectMailComposerAttachments, SelectMailAttachButton, SelectMailUpload, SelectRecipientInput, SelectTemplateMenu, attachmentExt, isMailAddress, mailName, } from './SelectMail';
|
|
96
|
-
export { SelectConversation, SelectConversationBubble, SelectConversationDay, SelectConversationEvent, SelectConversationMedia } from './SelectConversation';
|
|
96
|
+
export { SelectConversation, SelectConversationBubble, SelectConversationDay, SelectConversationEvent, SelectConversationMedia, SelectConversationNewer, } from './SelectConversation';
|
|
97
97
|
export type { SelectConversationBubbleProps } from './SelectConversation';
|
|
98
98
|
export { SelectMailEditor, mailLinkHref, mailTextToHtml } from './SelectMailEditor';
|
|
99
99
|
export type { SelectMailEditorProps } from './SelectMailEditor';
|
|
@@ -143,6 +143,7 @@ export { SelectKpiBand } from './SelectKpiBand';
|
|
|
143
143
|
export type { SelectKpiBandProps } from './SelectKpiBand';
|
|
144
144
|
export { SelectInsight, SelectInsightList, SelectInsightRow, formatInsightImpact } from './SelectInsight';
|
|
145
145
|
export { SelectAssistant, SelectChatMessage, SelectChatTurn, SelectChatTyping } from './SelectAssistant';
|
|
146
|
+
export { SelectAssistantLauncher } from './SelectAssistantLauncher';
|
|
146
147
|
export { SelectNumberedList, SelectNumberedItem } from './SelectNumberedList';
|
|
147
148
|
export type { SelectNumberedListProps, SelectNumberedItemProps } from './SelectNumberedList';
|
|
148
149
|
export type { SelectAssistantProps, SelectAssistantSuggestion, SelectChatMessageProps, SelectChatTurnProps, SelectChatTypingProps } from './SelectAssistant';
|