haze-ui 1.24.0 → 1.25.0

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,152 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
+/* empty css                   */
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useState as i } from "react";
+import { useControl as a } from "react-use-control";
+//#region src/lib/components/Calendar/Calendar.tsx
+var o = "haze-Calendar__calendarWrapper", s = "haze-Calendar__header", c = "haze-Calendar__headerBtn", l = "haze-Calendar__headerTitle", u = "haze-Calendar__headerTrailing", d = "haze-Calendar__grid", f = "haze-Calendar__rowContents", p = "haze-Calendar__cellContents", m = "haze-Calendar__weekday", h = "haze-Calendar__dayBtn", g = "haze-Calendar__daySelected", _ = "haze-Calendar__dayOutside", v = [
+	"Su",
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa"
+];
+function y(e, t) {
+	if (t !== void 0) return t;
+	if (e === void 0) return 0;
+	try {
+		let t = new Intl.Locale(e).getWeekInfo?.().firstDay;
+		return t === void 0 || t === 7 ? 0 : t;
+	} catch {
+		return 0;
+	}
+}
+function b(e, t) {
+	if (e === void 0) return Array.from({ length: 7 }, (e, n) => v[(t + n) % 7]);
+	let n = new Intl.DateTimeFormat(e, { weekday: "short" }), r = Array.from({ length: 7 }, (e, t) => n.format(new Date(2024, 0, 7 + t)));
+	return Array.from({ length: 7 }, (e, n) => r[(t + n) % 7]);
+}
+function x(e, t) {
+	return new Date(e, t + 1, 0).getDate();
+}
+function S(e, t, n) {
+	return `${e}-${String(t + 1).padStart(2, "0")}-${String(n).padStart(2, "0")}`;
+}
+function C({ value: v, min: C, max: w, locale: T, weekStartsOn: E, onSelect: D, className: O, ...k }) {
+	let [A, j] = a(v, ""), M = t("calendar"), N = A ? new Date(A) : /* @__PURE__ */ new Date(), [P, F] = i(N.getFullYear()), [I, L] = i(N.getMonth()), R = y(T, E), z = b(T, R), B = x(P, I), V = new Date(P, I, 1).getDay(), H = x(P, I - 1), U = (V - R + 7) % 7, W = () => {
+		L((e) => e === 0 ? (F((e) => e - 1), 11) : e - 1);
+	}, G = () => {
+		L((e) => e === 11 ? (F((e) => e + 1), 0) : e + 1);
+	}, K = () => {
+		let e = /* @__PURE__ */ new Date();
+		F(e.getFullYear()), L(e.getMonth());
+	}, q = (e) => !!(C && e < C || w && e > w), J = [];
+	for (let e = U - 1; e >= 0; e--) {
+		let t = I === 0 ? 11 : I - 1, n = I === 0 ? P - 1 : P;
+		J.push({
+			day: H - e,
+			month: t,
+			year: n,
+			outside: !0
+		});
+	}
+	for (let e = 1; e <= B; e++) J.push({
+		day: e,
+		month: I,
+		year: P,
+		outside: !1
+	});
+	let Y = 7 - J.length % 7;
+	if (Y < 7) for (let e = 1; e <= Y; e++) {
+		let t = I === 11 ? 0 : I + 1, n = I === 11 ? P + 1 : P;
+		J.push({
+			day: e,
+			month: t,
+			year: n,
+			outside: !0
+		});
+	}
+	let X = new Intl.DateTimeFormat(T ?? "default", {
+		month: "long",
+		year: "numeric"
+	}).format(new Date(P, I)), Z = [];
+	for (let e = 0; e < J.length; e += 7) Z.push(J.slice(e, e + 7));
+	return /* @__PURE__ */ r("div", {
+		...k,
+		className: e([o, O]),
+		children: [/* @__PURE__ */ r("div", {
+			className: e([s]),
+			children: [
+				/* @__PURE__ */ n("button", {
+					type: "button",
+					onClick: W,
+					"aria-label": M.previousMonth,
+					className: e([c]),
+					children: "‹"
+				}),
+				/* @__PURE__ */ n("span", {
+					className: e([l]),
+					children: X
+				}),
+				/* @__PURE__ */ r("span", {
+					className: e([u]),
+					children: [/* @__PURE__ */ n("button", {
+						type: "button",
+						onClick: K,
+						className: e([c]),
+						children: M.today
+					}), /* @__PURE__ */ n("button", {
+						type: "button",
+						onClick: G,
+						"aria-label": M.nextMonth,
+						className: e([c]),
+						children: "›"
+					})]
+				})
+			]
+		}), /* @__PURE__ */ r("div", {
+			role: "grid",
+			"aria-label": X,
+			className: e([d]),
+			children: [/* @__PURE__ */ n("div", {
+				role: "row",
+				className: e([f]),
+				children: z.map((t, r) => /* @__PURE__ */ n("span", {
+					role: "columnheader",
+					className: e([m]),
+					children: t
+				}, r))
+			}), Z.map((t, r) => /* @__PURE__ */ n("div", {
+				role: "row",
+				className: e([f]),
+				children: t.map((t) => {
+					let r = S(t.year, t.month, t.day);
+					return /* @__PURE__ */ n("span", {
+						role: "gridcell",
+						"aria-selected": r === A,
+						className: e([p]),
+						children: /* @__PURE__ */ n("button", {
+							type: "button",
+							disabled: q(r),
+							onClick: () => {
+								j(r), D?.(r);
+							},
+							className: e([
+								h,
+								r === A && g,
+								t.outside && _
+							]),
+							children: t.day
+						})
+					}, r);
+				})
+			}, r))]
+		})]
+	});
+}
+//#endregion
+export { C as default };

package/dist/components/Calendar/index.js

@@ -0,0 +1,2 @@
+import e from "./Calendar.js";
+export { e as Calendar };

package/dist/components/Carousel/Carousel.js

@@ -1,68 +1,70 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { formatString as t } from "../LocaleProvider/locale.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
 /* empty css                   */
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Children as i, useEffect as a, useRef as o } from "react";
-import { useControl as s } from "react-use-control";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Children as o, useEffect as s, useRef as c } from "react";
+import { useControl as l } from "react-use-control";
 //#region src/lib/components/Carousel/Carousel.tsx
-var c = "haze-Carousel__wrapper", l = "haze-Carousel__track", u = "haze-Carousel__navBtn", d = "haze-Carousel__prevBtn", f = "haze-Carousel__nextBtn", p = "haze-Carousel__indicators", m = "haze-Carousel__dot", h = "haze-Carousel__dotActive";
-function g({ value: g, autoPlay: _ = !1, interval: v = 5e3, className: y, children: b }) {
-	let [x, S] = s(g, 0), C = o(null), w = i.count(b);
-	return a(() => {
-		let e = C.current;
+var u = "haze-Carousel__wrapper", d = "haze-Carousel__track", f = "haze-Carousel__navBtn", p = "haze-Carousel__prevBtn", m = "haze-Carousel__nextBtn", h = "haze-Carousel__indicators", g = "haze-Carousel__dot", _ = "haze-Carousel__dotActive";
+function v({ value: v, autoPlay: y = !1, interval: b = 5e3, className: x, children: S }) {
+	let [C, w] = l(v, 0), T = c(null), E = o.count(S), D = n("carousel");
+	return s(() => {
+		let e = T.current;
 		if (!e) return;
-		let t = e.children[x];
+		let t = e.children[C];
 		t && t.scrollIntoView({
 			behavior: "smooth",
 			block: "nearest",
 			inline: "start"
 		});
-	}, [x]), a(() => {
-		if (!_ || w <= 1) return;
+	}, [C]), s(() => {
+		if (!y || E <= 1) return;
 		let e = setInterval(() => {
-			S((e) => (e + 1) % w);
-		}, v);
+			w((e) => (e + 1) % E);
+		}, b);
 		return () => clearInterval(e);
 	}, [
-		_,
-		v,
-		w,
-		S
-	]), /* @__PURE__ */ r("div", {
+		y,
+		b,
+		E,
+		w
+	]), /* @__PURE__ */ a("div", {
 		role: "region",
 		"aria-roledescription": "carousel",
-		"aria-label": "Carousel",
-		className: e([c, y]),
-		children: [/* @__PURE__ */ n("div", {
-			ref: C,
-			className: l,
-			children: b
-		}), w > 1 && /* @__PURE__ */ r(t, { children: [
-			/* @__PURE__ */ n("button", {
+		"aria-label": D.label,
+		className: e([u, x]),
+		children: [/* @__PURE__ */ i("div", {
+			ref: T,
+			className: d,
+			children: S
+		}), E > 1 && /* @__PURE__ */ a(r, { children: [
+			/* @__PURE__ */ i("button", {
 				type: "button",
-				onClick: () => S((e) => (e - 1 + w) % w),
-				"aria-label": "Previous slide",
-				className: e([u, d]),
+				onClick: () => w((e) => (e - 1 + E) % E),
+				"aria-label": D.previousSlide,
+				className: e([f, p]),
 				children: "‹"
 			}),
-			/* @__PURE__ */ n("button", {
+			/* @__PURE__ */ i("button", {
 				type: "button",
-				onClick: () => S((e) => (e + 1) % w),
-				"aria-label": "Next slide",
-				className: e([u, f]),
+				onClick: () => w((e) => (e + 1) % E),
+				"aria-label": D.nextSlide,
+				className: e([f, m]),
 				children: "›"
 			}),
-			/* @__PURE__ */ n("div", {
-				className: p,
-				children: Array.from({ length: w }, (t, r) => /* @__PURE__ */ n("button", {
+			/* @__PURE__ */ i("div", {
+				className: h,
+				children: Array.from({ length: E }, (n, r) => /* @__PURE__ */ i("button", {
 					type: "button",
-					onClick: () => S(r),
-					"aria-label": `Go to slide ${r + 1}`,
-					className: e([m, r === x && h])
+					onClick: () => w(r),
+					"aria-label": t(D.goToSlide, { index: r + 1 }),
+					className: e([g, r === C && _])
 				}, r))
 			})
 		] })]
 	});
 }
 //#endregion
-export { g as default };
+export { v as default };

package/dist/components/Cascader/Cascader.js

@@ -0,0 +1,227 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+import { useFocusScope as t } from "../../utils/focus-scope.js";
+import { FloatingPanel as n, useFloating as r } from "../../utils/floating.js";
+import { useStrings as i } from "../LocaleProvider/useStrings.js";
+/* empty css                   */
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Fragment as ee, useCallback as s, useEffect as c, useId as te, useRef as l, useState as ne } from "react";
+import { isControl as u, useControl as d, useThru as f, watch as p } from "react-use-control";
+//#region src/lib/components/Cascader/Cascader.tsx
+var m = "haze-Cascader__wrapper", h = "haze-Cascader__trigger", g = "haze-Cascader__triggerValue", _ = "haze-Cascader__triggerPlaceholder", re = "haze-Cascader__triggerCaret", ie = "haze-Cascader__separator", ae = "haze-Cascader__panel", oe = "haze-Cascader__column", se = "haze-Cascader__item", v = "haze-Cascader__itemInPath", y = "haze-Cascader__itemLabel", b = "haze-Cascader__chevron", x = () => /* @__PURE__ */ a("svg", {
+	viewBox: "0 0 12 12",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: a("path", { d: "M4 2l4 4-4 4" })
+}), S = () => /* @__PURE__ */ a("svg", {
+	viewBox: "0 0 12 12",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: a("path", { d: "M2 4l4 4 4-4" })
+}), C = "[role=\"menuitem\"]";
+function w(e) {
+	return e ? Array.from(e.querySelectorAll("[data-haze-cascader-column]")) : [];
+}
+function T(e) {
+	return e ? Array.from(e.querySelectorAll(C)) : [];
+}
+function E({ options: E, value: D, onChange: O, placeholder: k, changeOnSelect: A = !1, expandTrigger: j = "click", className: M, ...N }) {
+	let P = i("cascader"), [F, I] = d(!1, !1), L = u(D), [R, z] = d(f(L ? D : void 0, p((e) => O?.(e))), L ? [] : D ?? []), [B, V] = ne([]), H = te(), U = l(null), W = l(null), G = l(null), K = l(!1), q = r({
+		open: F,
+		setOpen: I,
+		triggerRef: U,
+		panelRef: W,
+		animated: !0
+	}), J = t({
+		enabled: F,
+		autoFocus: !1,
+		returnFocus: !0
+	}), Y = l(!1);
+	c(() => {
+		let e = F && !Y.current;
+		Y.current = F, e && V(R);
+	}, [F, R]), c(() => {
+		if (!F) {
+			K.current = !1, G.current = null;
+			return;
+		}
+		if (!q.shown) return;
+		let e = G.current;
+		if (e) {
+			G.current = null;
+			let t = T(w(W.current)[e.level]), n = e.value === void 0 ? e.index : t.findIndex((t) => t.dataset.value === e.value);
+			(n >= 0 ? t[n] : t[0])?.focus();
+			return;
+		}
+		if (K.current) return;
+		let t = W.current;
+		if (!t) return;
+		let n = Array.from(t.querySelectorAll(C)), r = R.length - 1, i = R[r], a;
+		if (i !== void 0) {
+			if (a = n.find((e) => e.dataset.level === String(r) && e.dataset.value === i), !a) return;
+		} else a = n.find((e) => e.dataset.level === "0");
+		a && (K.current = !0, a.focus());
+	}, [
+		F,
+		q.shown,
+		B,
+		R
+	]);
+	let ce = s((e) => {
+		W.current = e, J(e);
+	}, [W, J]), X = [E];
+	for (let e of B) {
+		let t = X.at(-1).find((t) => t.value === e)?.children;
+		if (!t?.length) break;
+		X.push(t);
+	}
+	let Z = [], Q = E;
+	for (let e of R) {
+		let t = Q.find((t) => t.value === e);
+		if (!t) break;
+		Z.push(t), Q = t.children ?? [];
+	}
+	let $ = (e, t) => {
+		let n = [...B.slice(0, t), e.value];
+		e.children?.length ? (V(n), A && z(n)) : (z(n), I(!1), U.current?.focus());
+	}, le = (e, t) => {
+		j === "hover" && V([...B.slice(0, t), e.value]);
+	}, ue = (e) => {
+		!F && (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), I(!0));
+	}, de = (e) => {
+		let t = W.current;
+		if (!t) return;
+		let n = (document.activeElement instanceof HTMLElement ? document.activeElement : null)?.closest(C) ?? void 0, r = n?.closest("[data-haze-cascader-column]"), i = n ? Number(n.dataset.level) : 0;
+		switch (e.key) {
+			case "ArrowDown":
+			case "ArrowUp": {
+				e.preventDefault();
+				let i = T(r ?? w(t)[0]);
+				if (i.length === 0) return;
+				let a = n ? i.indexOf(n) : -1;
+				i[a < 0 ? e.key === "ArrowDown" ? 0 : i.length - 1 : (a + (e.key === "ArrowDown" ? 1 : -1) + i.length) % i.length]?.focus();
+				return;
+			}
+			case "ArrowRight":
+				if (n?.getAttribute("aria-haspopup") !== "true") return;
+				e.preventDefault(), V([...B.slice(0, i), n.dataset.value]), G.current = {
+					level: i + 1,
+					index: 0
+				};
+				return;
+			case "ArrowLeft": {
+				if (!n || B.length === 0) return;
+				e.preventDefault();
+				let t = B[B.length - 1];
+				V(B.slice(0, -1)), G.current = {
+					level: B.length - 1,
+					index: 0,
+					value: t
+				};
+				return;
+			}
+			case "Home":
+			case "End": {
+				e.preventDefault();
+				let n = T(r ?? w(t)[0]);
+				if (n.length === 0) return;
+				(e.key === "Home" ? n[0] : n[n.length - 1])?.focus();
+				return;
+			}
+			case "Enter": {
+				if (!n) return;
+				e.preventDefault();
+				let t = X[i]?.find((e) => e.value === n.dataset.value);
+				if (!t) return;
+				t.children?.length ? (V([...B.slice(0, i), t.value]), G.current = {
+					level: i + 1,
+					index: 0
+				}) : $(t, i);
+				return;
+			}
+			case "Escape":
+			case "Tab":
+				e.preventDefault(), I(!1);
+				return;
+		}
+	};
+	return /* @__PURE__ */ o("div", {
+		...N,
+		className: e([m, M]),
+		children: [/* @__PURE__ */ o("button", {
+			ref: U,
+			type: "button",
+			style: q.triggerStyle,
+			"aria-haspopup": "menu",
+			"aria-expanded": F,
+			"aria-controls": H,
+			onPointerDown: q.onTriggerPointerDown,
+			onClick: q.onTriggerClick,
+			onKeyDown: ue,
+			className: e(h),
+			children: [/* @__PURE__ */ a("span", {
+				className: e(g),
+				children: Z.length === 0 ? /* @__PURE__ */ a("span", {
+					className: e(_),
+					children: k
+				}) : Z.map((t, n) => /* @__PURE__ */ o(ee, { children: [n > 0 && /* @__PURE__ */ a("span", {
+					className: e(ie),
+					children: " / "
+				}), t.label] }, t.value))
+			}), /* @__PURE__ */ a("span", {
+				"aria-hidden": "true",
+				className: e(re),
+				children: /* @__PURE__ */ a(S, {})
+			})]
+		}), /* @__PURE__ */ a(n, {
+			ref: ce,
+			behavior: q,
+			placement: "bottom",
+			id: H,
+			role: "menu",
+			visualClass: ae,
+			onKeyDown: de,
+			children: X.map((t, n) => /* @__PURE__ */ a("div", {
+				role: "menu",
+				"data-haze-cascader-column": n,
+				className: e(oe),
+				children: t.map((t) => {
+					let r = !!t.children?.length, i = B[n] === t.value;
+					return /* @__PURE__ */ o("button", {
+						type: "button",
+						role: "menuitem",
+						tabIndex: -1,
+						"data-level": n,
+						"data-value": t.value,
+						"aria-haspopup": r ? "true" : void 0,
+						"aria-expanded": r ? i : void 0,
+						onClick: () => $(t, n),
+						onMouseEnter: () => le(t, n),
+						className: e([se, i && v]),
+						children: [/* @__PURE__ */ a("span", {
+							className: e(y),
+							children: t.label
+						}), r && /* @__PURE__ */ a("span", {
+							role: "img",
+							"aria-label": P.expand,
+							className: e(b),
+							children: /* @__PURE__ */ a(x, {})
+						})]
+					}, t.value);
+				})
+			}, n))
+		})]
+	});
+}
+//#endregion
+export { E as default };

package/dist/components/Cascader/index.js

@@ -0,0 +1,2 @@
+import e from "./Cascader.js";
+export { e as Cascader };

package/dist/components/ChatInput/ChatInput.js

@@ -1,46 +1,47 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                    */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useCallback as r, useRef as i } from "react";
-import { useControl as a } from "react-use-control";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useCallback as i, useRef as a } from "react";
+import { useControl as o } from "react-use-control";
 //#region src/lib/components/ChatInput/ChatInput.tsx
-var o = "haze-ChatInput__wrapper", s = "haze-ChatInput__textarea", c = "haze-ChatInput__sendBtn";
-function l({ value: l, onSend: u, placeholder: d = "Type a message...", disabled: f, maxLength: p, className: m }) {
-	let [h, g] = a(l, ""), _ = i(null), v = r(() => {
-		let e = h.trim();
-		!e || f || (u?.(e), g(""), _.current && (_.current.style.height = "auto"));
+var s = "haze-ChatInput__wrapper", c = "haze-ChatInput__textarea", l = "haze-ChatInput__sendBtn";
+function u({ value: u, onSend: d, placeholder: f, disabled: p, maxLength: m, className: h }) {
+	let [g, _] = o(u, ""), v = a(null), y = t("chatInput"), b = f ?? y.placeholder, x = i(() => {
+		let e = g.trim();
+		e && !p && (d?.(e), _(""), v.current && (v.current.style.height = "auto"));
 	}, [
-		h,
-		f,
-		u,
-		g
+		g,
+		p,
+		d,
+		_
 	]);
-	return /* @__PURE__ */ n("div", {
-		className: e([o, m]),
-		children: [/* @__PURE__ */ t("textarea", {
-			ref: _,
-			value: h,
+	return /* @__PURE__ */ r("div", {
+		className: e([s, h]),
+		children: [/* @__PURE__ */ n("textarea", {
+			ref: v,
+			value: g,
 			onChange: (e) => {
-				g(e.target.value), _.current && (_.current.style.height = "auto", _.current.style.height = `${_.current.scrollHeight}px`);
+				_(e.target.value), v.current && (v.current.style.height = "auto", v.current.style.height = `${v.current.scrollHeight}px`);
 			},
 			onKeyDown: (e) => {
-				e.key === "Enter" && !e.shiftKey && (e.preventDefault(), v());
+				e.key === "Enter" && !e.shiftKey && (e.preventDefault(), x());
 			},
-			placeholder: d,
-			disabled: f,
-			maxLength: p,
+			placeholder: b,
+			disabled: p,
+			maxLength: m,
 			rows: 1,
-			className: e([s])
-		}), /* @__PURE__ */ t("button", {
+			className: e([c])
+		}), /* @__PURE__ */ n("button", {
 			type: "button",
-			onClick: v,
-			disabled: f || !h.trim(),
-			"aria-label": "Send",
-			className: e([c]),
+			onClick: x,
+			disabled: p || !g.trim(),
+			"aria-label": y.send,
+			className: e([l]),
 			children: "↑"
 		})]
 	});
 }
 //#endregion
-export { l as default };
+export { u as default };

package/dist/components/ChatMessage/ChatMessage.js

@@ -1,41 +1,42 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                      */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/lib/components/ChatMessage/ChatMessage.tsx
-var r = "haze-ChatMessage__wrapper", i = "haze-ChatMessage__wrapperUser", a = "haze-ChatMessage__avatarSlot", o = "haze-ChatMessage__body", s = "haze-ChatMessage__header", c = "haze-ChatMessage__headerUser", l = "haze-ChatMessage__bubble", u = "haze-ChatMessage__bubbleUser", d = "haze-ChatMessage__bubbleAssistant", f = "haze-ChatMessage__bubbleSystem", p = "haze-ChatMessage__statusText", m = "haze-ChatMessage__statusError", h = {
-	user: u,
-	assistant: d,
-	system: f
+var i = "haze-ChatMessage__wrapper", a = "haze-ChatMessage__wrapperUser", o = "haze-ChatMessage__avatarSlot", s = "haze-ChatMessage__body", c = "haze-ChatMessage__header", l = "haze-ChatMessage__headerUser", u = "haze-ChatMessage__bubble", d = "haze-ChatMessage__bubbleUser", f = "haze-ChatMessage__bubbleAssistant", p = "haze-ChatMessage__bubbleSystem", m = "haze-ChatMessage__statusText", h = "haze-ChatMessage__statusError", g = {
+	user: d,
+	assistant: f,
+	system: p
 };
-function g({ role: u, avatar: d, name: f, timestamp: g, status: _, children: v, className: y }) {
-	let b = u === "user";
-	return /* @__PURE__ */ n("div", {
+function _({ role: d, avatar: f, name: p, timestamp: _, status: v, children: y, className: b }) {
+	let x = d === "user", S = t("chatMessage");
+	return /* @__PURE__ */ r("div", {
 		className: e([
-			r,
-			b && i,
-			y
+			i,
+			x && a,
+			b
 		]),
-		children: [u !== "system" && /* @__PURE__ */ t("div", {
-			className: e([a]),
-			children: d || (u === "user" ? "U" : "A")
-		}), /* @__PURE__ */ n("div", {
+		children: [d !== "system" && /* @__PURE__ */ n("div", {
 			className: e([o]),
+			children: f || (d === "user" ? "U" : "A")
+		}), /* @__PURE__ */ r("div", {
+			className: e([s]),
 			children: [
-				(f || g) && /* @__PURE__ */ n("div", {
-					className: e([s, b && c]),
-					children: [f && /* @__PURE__ */ t("span", { children: f }), g && /* @__PURE__ */ t("span", { children: g })]
+				(p || _) && /* @__PURE__ */ r("div", {
+					className: e([c, x && l]),
+					children: [p && /* @__PURE__ */ n("span", { children: p }), _ && /* @__PURE__ */ n("span", { children: _ })]
 				}),
-				/* @__PURE__ */ t("div", {
-					className: e([l, h[u]]),
-					children: v
+				/* @__PURE__ */ n("div", {
+					className: e([u, g[d]]),
+					children: y
 				}),
-				_ && /* @__PURE__ */ n("div", {
-					className: e([p, _ === "error" && m]),
+				v && /* @__PURE__ */ r("div", {
+					className: e([m, v === "error" && h]),
 					children: [
-						_ === "sending" && "Sending...",
-						_ === "sent" && "Sent",
-						_ === "error" && "Failed to send"
+						v === "sending" && S.sending,
+						v === "sent" && S.sent,
+						v === "error" && S.failedToSend
 					]
 				})
 			]
@@ -43,4 +44,4 @@ function g({ role: u, avatar: d, name: f, timestamp: g, status: _, children: v,
 	});
 }
 //#endregion
-export { g as default };
+export { _ as default };