@declarion/react 0.106.0 → 0.109.0

package/dist-lib/components/agents/ChatAttachments.js

@@ -0,0 +1,144 @@
+import { Icon as e } from "../primitives/Icons.js";
+import { IconBtn as t } from "../primitives/IconBtn.js";
+import { useText as n } from "../../hooks/useText.js";
+import { formatBytes as r } from "../file-widgets/upload.js";
+import { UploadFailureText as i } from "../file-widgets/UploadFailureText.js";
+import { downloadFileURL as a } from "../file-widgets/helpers.js";
+import { useEmbedFileOpener as o } from "../file-widgets/useEmbedFileSrc.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/agents/ChatAttachments.tsx
+var l = {
+	display: "flex",
+	alignItems: "center",
+	gap: 6,
+	padding: "4px 6px 4px 8px",
+	fontSize: 11.5,
+	background: "var(--surface)",
+	border: "1px solid var(--border)",
+	borderRadius: "var(--radius-md)",
+	color: "var(--text)",
+	maxWidth: "100%"
+};
+function u({ selections: r, onCancel: i, onRemove: a }) {
+	let o = n();
+	return r.length === 0 ? null : /* @__PURE__ */ s("ul", {
+		"aria-label": o("agent.panel.selected_files", "Selected files"),
+		style: {
+			listStyle: "none",
+			margin: 0,
+			padding: "0 0 6px",
+			display: "flex",
+			flexDirection: "column",
+			gap: 4
+		},
+		children: r.map((n) => /* @__PURE__ */ c("li", {
+			"data-selection-state": n.state,
+			style: {
+				...l,
+				borderColor: n.state === "failed" ? "var(--destructive)" : "var(--border)"
+			},
+			children: [
+				/* @__PURE__ */ s(e.paperclip, { size: 11 }),
+				/* @__PURE__ */ s("span", {
+					style: {
+						flex: 1,
+						minWidth: 0,
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap"
+					},
+					title: n.filename,
+					children: n.filename
+				}),
+				/* @__PURE__ */ s(d, { selection: n }),
+				n.state === "uploading" ? /* @__PURE__ */ s(t, {
+					size: 20,
+					icon: /* @__PURE__ */ s(e.x, { size: 11 }),
+					onClick: () => i(n.localId),
+					title: o("file.upload.cancel", "Cancel")
+				}) : /* @__PURE__ */ s(t, {
+					size: 20,
+					icon: /* @__PURE__ */ s(e.x, { size: 11 }),
+					onClick: () => a(n.localId),
+					title: o("file.remove", "Remove")
+				})
+			]
+		}, n.localId))
+	});
+}
+function d({ selection: e }) {
+	let t = n();
+	switch (e.state) {
+		case "uploading": {
+			let n = e.progress?.pct ?? 0;
+			return /* @__PURE__ */ s("span", {
+				role: "progressbar",
+				"aria-valuenow": n,
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				style: { color: "var(--text-3)" },
+				children: t("file.upload.progress", "Uploading {pct}%", { pct: n })
+			});
+		}
+		case "failed": return /* @__PURE__ */ s("span", {
+			role: "alert",
+			style: { color: "var(--destructive)" },
+			children: e.failure ? /* @__PURE__ */ s(i, { failure: e.failure }) : t("file.selection.failed", "Failed")
+		});
+		case "cancelled": return /* @__PURE__ */ s("span", {
+			style: { color: "var(--text-3)" },
+			children: t("file.selection.cancelled", "Cancelled")
+		});
+		case "ready": return /* @__PURE__ */ s("span", {
+			style: { color: "var(--text-3)" },
+			children: r(e.sizeBytes)
+		});
+	}
+}
+function f(e, t) {
+	return e.role !== "assistant" || t.some((t) => t.id === e.turn_id && t.status === "completed");
+}
+function p({ files: i, align: u }) {
+	let d = n(), { open: f } = o();
+	return !i || i.length === 0 ? null : /* @__PURE__ */ s("ul", {
+		"aria-label": d("agent.panel.message_files", "Files"),
+		style: {
+			listStyle: "none",
+			margin: "4px 0 0",
+			padding: 0,
+			display: "flex",
+			flexDirection: "column",
+			gap: 4,
+			alignItems: u === "end" ? "flex-end" : "flex-start"
+		},
+		children: i.map((n, i) => /* @__PURE__ */ c("li", {
+			"data-file-id": n.id,
+			style: l,
+			children: [
+				/* @__PURE__ */ s(e.paperclip, { size: 11 }),
+				/* @__PURE__ */ s("span", {
+					style: {
+						minWidth: 0,
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap"
+					},
+					title: n.filename,
+					children: n.filename
+				}),
+				/* @__PURE__ */ s("span", {
+					style: { color: "var(--text-3)" },
+					children: r(n.size_bytes)
+				}),
+				/* @__PURE__ */ s(t, {
+					size: 20,
+					icon: /* @__PURE__ */ s(e.download, { size: 11 }),
+					onClick: () => f(n.id, "download", a(n)),
+					title: d("file.download", "Download")
+				})
+			]
+		}, `${i}:${n.id}`))
+	});
+}
+//#endregion
+export { u as ComposerAttachments, p as MessageAttachments, f as replyFilesVisible };

package/dist-lib/components/agents/transcript-runs.js

@@ -52,7 +52,7 @@ function a(e) {
 	};
 }
 function o(e) {
-	return (e.content ?? []).some((e) => !i.has(e.type));
+	return (e.attachments?.length ?? 0) > 0 || (e.content ?? []).some((e) => !i.has(e.type));
 }
 //#endregion
 export { t as fold };

package/dist-lib/components/chrome/AssociationTabs.js

@@ -4,21 +4,23 @@ import { Icon as r } from "../primitives/Icons.js";
 import { Btn as i } from "../primitives/Btn.js";
 import { useText as a } from "../../hooks/useText.js";
 import { SectionCard as o } from "../primitives/SectionCard.js";
-import { DynamicIcon as s } from "../shared/DynamicIcon.js";
-import { useTabNavigate as c } from "../../hooks/useTabNavigate.js";
-import { findListScreenForEntity as l } from "../../lib/actions.js";
-import { renderField as u } from "../fields/index.js";
-import { dataTableCellStyle as d, dataTableHeadCellStyle as f, dataTableStyle as p } from "../primitives/dataTableStyles.js";
-import { useMemo as m, useState as h } from "react";
-import { useQuery as g } from "@tanstack/react-query";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { RetryButton as s } from "../primitives/RetryButton.js";
+import { readDisplayState as c } from "../../lib/read-display-state.js";
+import { DynamicIcon as l } from "../shared/DynamicIcon.js";
+import { useTabNavigate as u } from "../../hooks/useTabNavigate.js";
+import { findListScreenForEntity as d } from "../../lib/actions.js";
+import { renderField as f } from "../fields/index.js";
+import { dataTableCellStyle as p, dataTableHeadCellStyle as m, dataTableStyle as h } from "../primitives/dataTableStyles.js";
+import { useMemo as g, useState as _ } from "react";
+import { useQuery as v } from "@tanstack/react-query";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
 //#region src/components/chrome/AssociationTabs.tsx
-function y({ entityCode: e, recordId: t, associations: n, schema: r }) {
-	let i = a(), c = m(() => Object.entries(n).filter(([, e]) => !!r.entities[e.target]), [n, r.entities]), [l, u] = h(0);
-	if (c.length === 0) return null;
-	let [d, f] = c[l];
-	return /* @__PURE__ */ _(o, {
-		title: /* @__PURE__ */ _("div", {
+function x({ entityCode: e, recordId: t, associations: n, schema: r }) {
+	let i = a(), s = g(() => Object.entries(n).filter(([, e]) => !!r.entities[e.target]), [n, r.entities]), [c, u] = _(0);
+	if (s.length === 0) return null;
+	let [d, f] = s[c];
+	return /* @__PURE__ */ y(o, {
+		title: /* @__PURE__ */ y("div", {
 			style: {
 				display: "flex",
 				alignItems: "center",
@@ -27,9 +29,9 @@ function y({ entityCode: e, recordId: t, associations: n, schema: r }) {
 				margin: "-10px -14px 0 -14px",
 				padding: "0 14px"
 			},
-			children: c.map(([e, t], n) => {
-				let r = n === l;
-				return /* @__PURE__ */ v("button", {
+			children: s.map(([e, t], n) => {
+				let r = n === c;
+				return /* @__PURE__ */ b("button", {
 					onClick: (e) => {
 						e.stopPropagation(), u(n);
 					},
@@ -47,7 +49,7 @@ function y({ entityCode: e, recordId: t, associations: n, schema: r }) {
 						cursor: "pointer",
 						fontWeight: r ? 600 : 500
 					},
-					children: [t.display?.icon && /* @__PURE__ */ _(s, {
+					children: [t.display?.icon && /* @__PURE__ */ y(l, {
 						name: t.display.icon,
 						size: 13
 					}), i(t.display?.name) || e]
@@ -56,7 +58,7 @@ function y({ entityCode: e, recordId: t, associations: n, schema: r }) {
 		}),
 		collapsible: !1,
 		padding: "0",
-		children: /* @__PURE__ */ _(b, {
+		children: /* @__PURE__ */ y(S, {
 			entityCode: e,
 			recordId: t,
 			assocKey: d,
@@ -65,109 +67,121 @@ function y({ entityCode: e, recordId: t, associations: n, schema: r }) {
 		})
 	});
 }
-function b({ entityCode: o, recordId: s, assocKey: h, association: y, schema: b }) {
-	let x = a(), S = c(), C = `${o}.${h}`, { data: w, isLoading: T } = g({
+function S({ entityCode: o, recordId: l, assocKey: _, association: x, schema: S }) {
+	let C = a(), w = a("errors"), T = u(), E = `${o}.${_}`, D = v({
 		queryKey: [
 			"association",
-			C,
-			s
+			E,
+			l
 		],
-		queryFn: () => n(C, [s])
-	}), E = w?.target_entity ?? y.target, D = b.entities[E], O = m(() => w?.ids ?? [], [w?.ids]), k = m(() => D?.fields.names().find((e) => D.fields.get(e)?.primary) ?? "id", [D]), A = m(() => O.slice(0, 50), [O]), { data: j, isLoading: M } = g({
+		queryFn: () => n(E, [l])
+	}), O = D.data, k = c(D), A = O?.target_entity ?? x.target, j = S.entities[A], M = g(() => O?.ids ?? [], [O?.ids]), N = g(() => j?.fields.names().find((e) => j.fields.get(e)?.primary) ?? "id", [j]), P = g(() => M.slice(0, 50), [M]), F = v({
 		queryKey: [
 			"association-records",
-			E,
-			A
+			A,
+			P
 		],
-		queryFn: () => t(E, {
+		queryFn: () => t(A, {
 			per_page: 50,
 			filters: [{
-				field: k,
+				field: N,
 				op: "in",
-				value: A
+				value: P
 			}]
 		}),
-		enabled: A.length > 0 && !!D
-	}), N = j?.data ?? [], P = j?.$refs, F = m(() => D ? D.fields.names().filter((e) => {
-		let t = D.fields.get(e);
+		enabled: P.length > 0 && !!j
+	}), I = F.data, L = c(F), R = I?.data ?? [], z = I?.$refs, B = g(() => j ? j.fields.names().filter((e) => {
+		let t = j.fields.get(e);
 		return t && !t.primary && !t.auto && t.display?.is_listable !== !1;
-	}).slice(0, 6) : [], [D]), I = () => {
-		let e = l(b, E);
+	}).slice(0, 6) : [], [j]), V = () => {
+		let e = d(S, A);
 		if (!e) return;
-		let t = x(y.display?.name) || h, n = new URLSearchParams();
+		let t = C(x.display?.name) || _, n = new URLSearchParams();
 		n.set("filters", JSON.stringify([{
-			field: k,
+			field: N,
 			op: "in",
-			value: O
-		}])), S(e.route, {
+			value: M
+		}])), T(e.route, {
 			title: t,
-			icon: y.display?.icon || e.icon,
+			icon: x.display?.icon || e.icon,
 			search: n.toString()
 		});
-	}, L = {
+	}, H = {
 		fontSize: 12.5,
 		color: "var(--text-3)",
 		padding: "14px 16px"
-	};
-	if (T || M) return /* @__PURE__ */ _("div", {
-		style: L,
-		children: x("shell.loading", "Loading…")
+	}, U = k.error === null ? L.error === null ? null : L : k;
+	if (U) return /* @__PURE__ */ b("div", {
+		role: "alert",
+		style: {
+			...H,
+			color: "var(--danger)"
+		},
+		children: [
+			w("record.related_rows_unreadable", "The related records could not be loaded."),
+			" ",
+			/* @__PURE__ */ y(s, { onRetry: U.retry })
+		]
+	});
+	if (k.loading || L.loading) return /* @__PURE__ */ y("div", {
+		style: H,
+		children: C("shell.loading", "Loading…")
 	});
-	if (!D) return null;
-	if (O.length === 0) return /* @__PURE__ */ _("div", {
-		style: L,
-		children: x("shell.association.empty", "No related records.")
+	if (!j) return null;
+	if (M.length === 0) return /* @__PURE__ */ y("div", {
+		style: H,
+		children: C("shell.association.empty", "No related records.")
 	});
-	let R = l(b, E);
-	return /* @__PURE__ */ v("div", {
+	let W = d(S, A);
+	return /* @__PURE__ */ b("div", {
 		style: { padding: "8px 0" },
 		children: [
-			/* @__PURE__ */ v("table", {
-				style: p,
-				children: [/* @__PURE__ */ _("thead", { children: /* @__PURE__ */ _("tr", { children: F.map((t) => /* @__PURE__ */ _("th", {
-					style: f,
-					children: e(x, D.fields.get(t), t, b.entities)
-				}, t)) }) }), /* @__PURE__ */ _("tbody", { children: N.map((e, t) => /* @__PURE__ */ _("tr", { children: F.map((t) => {
-					let n = D.fields.get(t);
-					return n ? /* @__PURE__ */ _("td", {
-						style: d,
-						children: u({
+			/* @__PURE__ */ b("table", {
+				style: h,
+				children: [/* @__PURE__ */ y("thead", { children: /* @__PURE__ */ y("tr", { children: B.map((t) => /* @__PURE__ */ y("th", {
+					style: m,
+					children: e(C, j.fields.get(t), t, S.entities)
+				}, t)) }) }), /* @__PURE__ */ y("tbody", { children: R.map((e, t) => /* @__PURE__ */ y("tr", { children: B.map((t) => {
+					let n = j.fields.get(t);
+					return n ? /* @__PURE__ */ y("td", {
+						style: p,
+						children: f({
 							field: n,
 							fieldName: t,
 							value: e[t],
 							mode: "display",
 							record: e,
-							refs: P,
-							t: x
+							refs: z,
+							t: C
 						})
-					}, t) : /* @__PURE__ */ _("td", {}, t);
+					}, t) : /* @__PURE__ */ y("td", {}, t);
 				}) }, t)) })]
 			}),
-			R && w && w.count > N.length && /* @__PURE__ */ _("div", {
+			W && O && O.count > R.length && /* @__PURE__ */ y("div", {
 				style: {
 					padding: "10px 16px",
 					textAlign: "center"
 				},
-				children: /* @__PURE__ */ _(i, {
-					icon: /* @__PURE__ */ _(r.external, { size: 12 }),
-					onClick: I,
-					children: x("shell.association.view_all", "View all {count} records", { count: w.count })
+				children: /* @__PURE__ */ y(i, {
+					icon: /* @__PURE__ */ y(r.external, { size: 12 }),
+					onClick: V,
+					children: C("shell.association.view_all", "View all {count} records", { count: O.count })
 				})
 			}),
-			R && N.length > 0 && w && w.count <= N.length && /* @__PURE__ */ _("div", {
+			W && R.length > 0 && O && O.count <= R.length && /* @__PURE__ */ y("div", {
 				style: {
 					padding: "10px 16px",
 					textAlign: "center"
 				},
-				children: /* @__PURE__ */ _(i, {
+				children: /* @__PURE__ */ y(i, {
 					kind: "ghost",
-					icon: /* @__PURE__ */ _(r.external, { size: 12 }),
-					onClick: I,
-					children: x("shell.association.open_list", "Open in list view")
+					icon: /* @__PURE__ */ y(r.external, { size: 12 }),
+					onClick: V,
+					children: C("shell.association.open_list", "Open in list view")
 				})
 			})
 		]
 	});
 }
 //#endregion
-export { y as AssociationTabs };
+export { x as AssociationTabs };