@floegence/floe-webapp-core 0.86.33 → 0.86.34
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/chat.css
CHANGED
|
@@ -1902,12 +1902,7 @@ pre.chat-md-code-block *::selection,
|
|
|
1902
1902
|
.chat-html-sheet .chat-media-html { height: 100%; border-radius: 0; }
|
|
1903
1903
|
.chat-html-source { display: block; margin: 0; padding: 1.25rem; overflow: auto; overscroll-behavior: contain; white-space: pre; font: .6875rem/1.85 var(--font-mono); color: var(--foreground); }
|
|
1904
1904
|
.chat-html-source code { padding: 0; color: inherit; background: none; font: inherit; }
|
|
1905
|
-
.chat-html-loading { position: absolute; inset: 3.5rem var(--canvas-inset)
|
|
1906
|
-
.chat-html-skeleton { display: flex; flex-direction: column; justify-content: center; gap: .875rem; width: min(72%, 19rem); height: 11rem; padding: 1.75rem; border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: .625rem; background: color-mix(in srgb, var(--background) 65%, transparent); }
|
|
1907
|
-
.chat-html-skeleton > span { height: .375rem; border-radius: 1rem; background: color-mix(in srgb, var(--muted-foreground) 12%, transparent); }
|
|
1908
|
-
.chat-html-skeleton > span:first-child { width: 35%; height: .5rem; margin-bottom: .75rem; }
|
|
1909
|
-
.chat-html-skeleton > span:nth-child(3) { width: 82%; }
|
|
1910
|
-
.chat-html-skeleton > span:last-child { width: 60%; }
|
|
1905
|
+
.chat-html-loading { position: absolute; inset: 3.5rem var(--canvas-inset); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; text-align: center; color: var(--muted-foreground); font-size: .75rem; }
|
|
1911
1906
|
.chat-html-orb { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.125rem; height: 2.125rem; padding: 0; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: 50%; color: var(--muted-foreground); background: color-mix(in srgb, var(--background) 88%, transparent); box-shadow: 0 2px 5px rgb(0 0 0 / .035); backdrop-filter: blur(12px); cursor: pointer; transition: color 140ms, background 140ms, transform 140ms; }
|
|
1912
1907
|
.chat-html-orb:hover { color: var(--foreground); background: var(--background); transform: translateY(-1px); }
|
|
1913
1908
|
.chat-html-orb[aria-pressed="true"] { color: var(--foreground); background: var(--muted); }
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { createComponent as a, insert as l, effect as
|
|
1
|
+
import { createComponent as a, insert as l, effect as y, setAttribute as r, memo as N, template as h, use as O, delegateEvents as j } from "solid-js/web";
|
|
2
2
|
import { createSignal as U, onCleanup as B, createMemo as I, Show as d } from "solid-js";
|
|
3
3
|
import { Copy as J, Eye as z, Refresh as D, ExternalLink as K, FolderOpen as Q, Minus as W, Maximize as X, Code as Y, MoreHorizontal as Z, Check as p } from "../../icons/index.js";
|
|
4
4
|
import { Dropdown as ee } from "../../ui/Dropdown.js";
|
|
5
|
-
var te = /* @__PURE__ */
|
|
6
|
-
const
|
|
7
|
-
const [c,
|
|
5
|
+
var te = /* @__PURE__ */ h("<pre class=chat-html-source tabindex=0><code>"), ae = /* @__PURE__ */ h("<button type=button class=chat-media-retry>"), le = /* @__PURE__ */ h("<span class=chat-html-loading role=status><span>"), ne = /* @__PURE__ */ h("<span class=chat-html-feedback role=status>"), re = /* @__PURE__ */ h('<span class=chat-html-canvas><span class=chat-html-dots aria-hidden=true></span><span class=chat-html-sheen aria-hidden=true></span><span class=chat-html-sheet></span><button type=button class="chat-html-orb chat-html-expand"></button><span class=chat-html-controls><button type=button class=chat-html-orb data-chat-media-action=source>');
|
|
6
|
+
const de = (e) => {
|
|
7
|
+
const [c, x] = U(!1), [S, k] = U("");
|
|
8
8
|
let b, v = !1, f;
|
|
9
|
-
const
|
|
10
|
-
clearTimeout(f),
|
|
9
|
+
const $ = (n) => {
|
|
10
|
+
clearTimeout(f), k(n), f = setTimeout(() => k(""), 2400);
|
|
11
11
|
};
|
|
12
12
|
B(() => {
|
|
13
13
|
v = !0, clearTimeout(f);
|
|
@@ -15,11 +15,11 @@ const ue = (e) => {
|
|
|
15
15
|
const V = async () => {
|
|
16
16
|
try {
|
|
17
17
|
if (await navigator.clipboard.writeText(e.html), v) return;
|
|
18
|
-
|
|
18
|
+
$(e.labels.copied ?? "Copied");
|
|
19
19
|
} catch {
|
|
20
20
|
if (v) return;
|
|
21
21
|
const n = e.labels.copyFailed ?? "Select and copy the source.";
|
|
22
|
-
|
|
22
|
+
x(!0), queueMicrotask(() => {
|
|
23
23
|
if (v) return;
|
|
24
24
|
b.focus({
|
|
25
25
|
preventScroll: !0
|
|
@@ -27,7 +27,7 @@ const ue = (e) => {
|
|
|
27
27
|
const g = document.createRange();
|
|
28
28
|
g.selectNodeContents(b);
|
|
29
29
|
const m = window.getSelection();
|
|
30
|
-
m?.removeAllRanges(), m?.addRange(g),
|
|
30
|
+
m?.removeAllRanges(), m?.addRange(g), $(n);
|
|
31
31
|
});
|
|
32
32
|
}
|
|
33
33
|
}, q = I(() => [{
|
|
@@ -53,7 +53,7 @@ const ue = (e) => {
|
|
|
53
53
|
icon: () => a(Q, {})
|
|
54
54
|
}] : []]), G = () => e.state === "generating" ? e.labels.generating ?? e.labels.loading : e.state === "incomplete" ? e.labels.incomplete ?? "Generation interrupted. Source is available." : e.state === "error" ? e.labels.unavailable : e.labels.loading;
|
|
55
55
|
return (() => {
|
|
56
|
-
var n =
|
|
56
|
+
var n = re(), g = n.firstChild, m = g.nextSibling, w = m.nextSibling, o = w.nextSibling, C = o.nextSibling, u = C.firstChild;
|
|
57
57
|
return n.$$keydown = (t) => {
|
|
58
58
|
t.key === "Escape" && e.expanded && !t.defaultPrevented && (t.preventDefault(), e.onExpand());
|
|
59
59
|
}, l(w, () => e.children), l(n, a(d, {
|
|
@@ -61,33 +61,26 @@ const ue = (e) => {
|
|
|
61
61
|
return c();
|
|
62
62
|
},
|
|
63
63
|
get children() {
|
|
64
|
-
var t = te(),
|
|
65
|
-
return typeof i == "function" ? O(i, t) : b = t, l(
|
|
64
|
+
var t = te(), s = t.firstChild, i = b;
|
|
65
|
+
return typeof i == "function" ? O(i, t) : b = t, l(s, () => e.html), y(() => r(t, "aria-label", e.labels.showSource ?? "HTML source")), t;
|
|
66
66
|
}
|
|
67
|
-
}),
|
|
67
|
+
}), o), l(n, a(d, {
|
|
68
68
|
get when() {
|
|
69
69
|
return N(() => !c())() && e.state !== "ready";
|
|
70
70
|
},
|
|
71
71
|
get children() {
|
|
72
|
-
var t =
|
|
73
|
-
return l(t, a(d, {
|
|
74
|
-
get when() {
|
|
75
|
-
return e.state === "loading" || e.state === "generating";
|
|
76
|
-
},
|
|
77
|
-
get children() {
|
|
78
|
-
return ae();
|
|
79
|
-
}
|
|
80
|
-
}), o), l(o, G), l(t, a(d, {
|
|
72
|
+
var t = le(), s = t.firstChild;
|
|
73
|
+
return l(s, G), l(t, a(d, {
|
|
81
74
|
get when() {
|
|
82
75
|
return e.state === "error";
|
|
83
76
|
},
|
|
84
77
|
get children() {
|
|
85
|
-
var i =
|
|
78
|
+
var i = ae();
|
|
86
79
|
return i.$$click = () => e.onRetry(), l(i, a(D, {}), null), l(i, () => e.labels.retry, null), i;
|
|
87
80
|
}
|
|
88
|
-
}), null), t;
|
|
81
|
+
}), null), y(() => r(s, "data-floe-progress-shimmer", e.state === "loading" || e.state === "generating" ? "text" : void 0)), t;
|
|
89
82
|
}
|
|
90
|
-
}),
|
|
83
|
+
}), o), o.$$click = () => e.onExpand(), l(o, a(d, {
|
|
91
84
|
get when() {
|
|
92
85
|
return e.expanded;
|
|
93
86
|
},
|
|
@@ -97,7 +90,7 @@ const ue = (e) => {
|
|
|
97
90
|
get children() {
|
|
98
91
|
return a(W, {});
|
|
99
92
|
}
|
|
100
|
-
})),
|
|
93
|
+
})), u.$$click = () => x((t) => !t), l(u, a(d, {
|
|
101
94
|
get when() {
|
|
102
95
|
return c();
|
|
103
96
|
},
|
|
@@ -107,7 +100,7 @@ const ue = (e) => {
|
|
|
107
100
|
get children() {
|
|
108
101
|
return a(z, {});
|
|
109
102
|
}
|
|
110
|
-
})), l(
|
|
103
|
+
})), l(C, a(ee, {
|
|
111
104
|
get trigger() {
|
|
112
105
|
return a(Z, {});
|
|
113
106
|
},
|
|
@@ -122,15 +115,15 @@ const ue = (e) => {
|
|
|
122
115
|
}
|
|
123
116
|
}), null), l(n, a(d, {
|
|
124
117
|
get when() {
|
|
125
|
-
return
|
|
118
|
+
return S();
|
|
126
119
|
},
|
|
127
120
|
get children() {
|
|
128
|
-
var t =
|
|
129
|
-
return l(t, a(p, {}), null), l(t,
|
|
121
|
+
var t = ne();
|
|
122
|
+
return l(t, a(p, {}), null), l(t, S, null), t;
|
|
130
123
|
}
|
|
131
|
-
}), null),
|
|
132
|
-
var
|
|
133
|
-
return
|
|
124
|
+
}), null), y((t) => {
|
|
125
|
+
var s = e.state, i = c() ? "source" : "preview", L = e.state === "generating" || e.state === "loading", M = !!(c() || e.state !== "ready"), R = c() || e.state !== "ready", T = e.expanded ? "collapse" : "expand", _ = e.expanded, H = e.expanded ? e.labels.collapse : e.labels.expand, E = e.expanded ? e.labels.collapse : e.labels.expand, P = c(), A = c() ? e.labels.showPreview ?? "Show preview" : e.labels.showSource ?? "Show HTML source", F = c() ? e.labels.showPreview ?? "Show preview" : e.labels.showSource ?? "Show HTML source";
|
|
126
|
+
return s !== t.e && r(n, "data-state", t.e = s), i !== t.t && r(n, "data-view", t.t = i), L !== t.a && r(n, "aria-busy", t.a = L), M !== t.o && w.classList.toggle("chat-html-sheet-hidden", t.o = M), R !== t.i && (w.inert = t.i = R), T !== t.n && r(o, "data-chat-media-action", t.n = T), _ !== t.s && r(o, "aria-expanded", t.s = _), H !== t.h && r(o, "aria-label", t.h = H), E !== t.r && r(o, "title", t.r = E), P !== t.d && r(u, "aria-pressed", t.d = P), A !== t.l && r(u, "aria-label", t.l = A), F !== t.u && r(u, "title", t.u = F), t;
|
|
134
127
|
}, {
|
|
135
128
|
e: void 0,
|
|
136
129
|
t: void 0,
|
|
@@ -149,5 +142,5 @@ const ue = (e) => {
|
|
|
149
142
|
};
|
|
150
143
|
j(["keydown", "click"]);
|
|
151
144
|
export {
|
|
152
|
-
|
|
145
|
+
de as HtmlPreviewCanvas
|
|
153
146
|
};
|