@burdenoff/microfe-housingvista 2026.802.1 → 2026.830.1

package/dist/housingvista/pages/chat/ChatPage.js

@@ -1,251 +1,405 @@
 import { useHousingVista as e } from "../../context/HousingVistaContext.js";
-import { cn as t, getRelativeTime as n } from "../../utils/helpers.js";
-import { PageLayout as r } from "../../components/PageLayout.js";
-import { StatCard as i } from "../../components/StatCard.js";
-import { EmptyState as a } from "../../components/EmptyState.js";
-import { useConversationMessages as o, useSendMessage as s } from "../../hooks/platform.js";
-import { useTrackPageView as c } from "../../hooks/useHousingVistaAnalytics.js";
-import "../../hooks/index.js";
-import { notify as l } from "../../lib/toast.js";
+import { cn as t, formatCompactCurrency as n, getRelativeTime as r } from "../../utils/helpers.js";
+import { PageLayout as i } from "../../components/PageLayout.js";
+import { StatCard as a } from "../../components/StatCard.js";
+import { EmptyState as o } from "../../components/EmptyState.js";
+import { useConversationMessages as ee, useFileUpload as te, useSendContextMessage as s, useSendMessage as c } from "../../hooks/platform.js";
+import { useTrackPageView as l } from "../../hooks/useHousingVistaAnalytics.js";
+import { useProperty as u } from "../../hooks/index.js";
+import { notify as d } from "../../lib/toast.js";
 import "../../components/index.js";
-import { useHousingVistaConversations as u } from "../../hooks/messages.js";
-import { useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
-import { ArrowLeft as h, MapPin as g, MessageSquare as _, Search as v, Send as y } from "lucide-react";
-import { useNavigate as b } from "react-router";
-import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
-import { Button as w, EmphasisPanel as T, GlassCard as E } from "@burdenoff/fe-libs/ui";
+import { useHousingVistaConversations as ne } from "../../hooks/messages.js";
+import { useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import { ArrowLeft as g, FileText as _, Loader2 as re, MapPin as ie, MessageSquare as v, Paperclip as ae, Search as oe, Send as y, X as se } from "lucide-react";
+import { useNavigate as ce } from "react-router";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { Button as C, EmphasisPanel as le, GlassCard as ue } from "@burdenoff/fe-libs/ui";
 //#region src/housingvista/pages/chat/ChatPage.tsx
-var D = [
+var w = [
 	"bg-status-info-bg-subtle text-status-info-text",
 	"bg-status-success-bg-subtle text-status-success-text",
 	"bg-status-warning-bg-subtle text-status-warning-text",
 	"bg-action-primary-bg/15 text-primary"
 ];
-function O(e) {
+function T(e) {
 	let t = e.trim().split(/\s+/).filter(Boolean);
 	return t.length === 0 ? "?" : t.length === 1 ? t[0].slice(0, 2).toUpperCase() : (t[0][0] + t[t.length - 1][0]).toUpperCase();
 }
-function k(e) {
+function E(e) {
 	let t = 0;
 	for (let n = 0; n < e.length; n += 1) t += e.charCodeAt(n);
-	return D[t % D.length];
+	return w[t % w.length];
 }
-function A(e) {
+function de(e) {
 	let t = new Date(e);
 	return Number.isNaN(t.getTime()) ? "" : t.toLocaleTimeString("en-US", {
 		hour: "numeric",
 		minute: "2-digit"
 	});
 }
-function j({ title: e, id: n, size: r = "md" }) {
-	return /* @__PURE__ */ S("span", {
-		className: t("inline-flex shrink-0 items-center justify-center rounded-full font-semibold", r === "md" ? "h-10 w-10 text-sm" : "h-9 w-9 text-xs", k(n)),
+var D = {
+	"housingvista-property": "Property",
+	"housingvista-marketplace-service": "Marketplace service",
+	"housingvista-legal-service": "Legal service",
+	"housingvista-home-loan": "Home loan"
+};
+function O(e) {
+	if (!e) return null;
+	let t = D[e];
+	if (t) return t;
+	let n = e.replace(/^housingvista-/, "").replace(/[-_]/g, " ").trim();
+	return n ? n.charAt(0).toUpperCase() + n.slice(1) : null;
+}
+function k(e) {
+	return !Number.isFinite(e) || e <= 0 ? "" : e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${Math.round(e / 1024)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
+}
+function A(e) {
+	return e && /^(https?:|data:image\/|\/)/.test(e) ? e : null;
+}
+function j({ title: e, id: n, size: r = "md", imageUrl: i }) {
+	let a = r === "md" ? "h-10 w-10 text-sm" : "h-9 w-9 text-xs", o = A(i);
+	return o ? /* @__PURE__ */ x("img", {
+		src: o,
+		alt: "",
 		"aria-hidden": !0,
-		children: O(e)
+		className: t("shrink-0 rounded-full object-cover", a)
+	}) : /* @__PURE__ */ x("span", {
+		className: t("inline-flex shrink-0 items-center justify-center rounded-full font-semibold", a, E(n)),
+		"aria-hidden": !0,
+		children: T(e)
+	});
+}
+function fe({ attachments: e, mine: n }) {
+	return e.length === 0 ? null : /* @__PURE__ */ x("ul", {
+		className: t("mt-1.5 space-y-1", n ? "flex flex-col items-end" : ""),
+		children: e.map((e) => {
+			let t = k(e.fileSize), n = /* @__PURE__ */ S(b, { children: [
+				/* @__PURE__ */ x(_, { className: "h-4 w-4 shrink-0 text-text-secondary" }),
+				/* @__PURE__ */ x("span", {
+					className: "truncate",
+					children: e.fileName
+				}),
+				t && /* @__PURE__ */ x("span", {
+					className: "shrink-0 text-xs text-text-secondary",
+					children: t
+				})
+			] });
+			return /* @__PURE__ */ x("li", {
+				className: "max-w-full",
+				children: e.downloadUrl ? /* @__PURE__ */ x("a", {
+					href: e.downloadUrl,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					className: "flex items-center gap-2 rounded-md border border-border-subtle bg-bg-surface px-2.5 py-1.5 text-sm text-text-primary hover:underline",
+					children: n
+				}) : /* @__PURE__ */ x("span", {
+					className: "flex items-center gap-2 rounded-md border border-border-subtle bg-bg-surface px-2.5 py-1.5 text-sm text-text-secondary",
+					title: "This attachment has no download link",
+					children: n
+				})
+			}, e.id);
+		})
 	});
 }
 function M() {
-	c("housingvista.chat.viewed");
-	let D = b(), { currentUser: O } = e(), k = O?.id ?? "", { data: M, loading: N, refetch: P } = u(), { sendMessage: F, loading: I } = s(), [L, R] = m(), [z, B] = m(""), [V, H] = m(""), U = p(null);
-	d(() => {
-		!L && M.length > 0 && typeof window < "u" && window.innerWidth >= 1024 && R(M[0].id);
-	}, [M, L]);
-	let W = f(() => M.find((e) => e.id === L), [M, L]), { data: G, loading: K } = o(L);
-	d(() => {
-		U.current?.scrollTo({ top: U.current.scrollHeight });
-	}, [G, L]);
-	let q = f(() => {
-		let e = z.trim().toLowerCase();
-		return e ? M.filter((t) => t.title.toLowerCase().includes(e) || t.lastMessageText.toLowerCase().includes(e)) : M;
-	}, [M, z]), J = M.filter((e) => e.unreadCount > 0).length, Y = async () => {
+	l("housingvista.chat.viewed");
+	let w = ce(), { currentUser: T } = e(), E = T?.id ?? "", { data: D, loading: A, refetch: M } = ne(), { sendMessage: N, loading: P } = c(), { sendContextMessage: F, loading: I } = s(), { uploadFile: L } = te(), [R, z] = h(), [B, pe] = h(""), [V, H] = h(""), [U, W] = h([]), [G, K] = h(!1), q = m(null), J = m(null);
+	f(() => {
+		!R && D.length > 0 && typeof window < "u" && window.innerWidth >= 1024 && z(D[0].id);
+	}, [D, R]);
+	let Y = p(() => D.find((e) => e.id === R), [D, R]), { data: X, loading: me } = ee(R), { data: Z } = u(Y?.entityType === "housingvista-property" ? Y.entityId ?? void 0 : void 0);
+	f(() => {
+		J.current?.scrollTo({ top: J.current.scrollHeight });
+	}, [X, R]);
+	let Q = p(() => {
+		let e = B.trim().toLowerCase();
+		return e ? D.filter((t) => t.title.toLowerCase().includes(e) || t.lastMessageText.toLowerCase().includes(e)) : D;
+	}, [D, B]), he = D.filter((e) => e.unreadCount > 0).length, ge = !!Y?.sourceContext, _e = P || I || G, ve = async (e) => {
+		if (!(!e || e.length === 0)) {
+			K(!0);
+			try {
+				let t = [];
+				for (let n of Array.from(e)) t.push(await L(n));
+				W((e) => [...e, ...t]);
+			} catch (e) {
+				d.error("Upload failed", e.message);
+			} finally {
+				K(!1), q.current && (q.current.value = "");
+			}
+		}
+	}, $ = async () => {
 		let e = V.trim();
-		if (!(!e || !L)) try {
-			await F(L, e), H(""), P();
+		if (R && !(!e && U.length === 0)) try {
+			if (U.length > 0 && Y?.sourceContext) await F({
+				sourceContext: Y.sourceContext,
+				text: e,
+				attachments: U
+			});
+			else {
+				if (!e) return;
+				await N(R, e);
+			}
+			H(""), W([]), M();
 		} catch (e) {
-			l.error("Message not sent", e.message);
+			d.error("Message not sent", e.message);
 		}
-	}, X = !N && M.length === 0;
-	return /* @__PURE__ */ C(r, {
+	}, ye = !A && D.length === 0;
+	return /* @__PURE__ */ S(i, {
 		title: "Messages",
 		description: "Your conversations with property owners, agents, and service providers",
 		purpose: "Every thread you start from a property, listing, or service lands here — read the full history, pick up where you left off, and reply. Messages are delivered to the other party's inbox in real time.",
-		children: [/* @__PURE__ */ S(T, {
+		children: [/* @__PURE__ */ x(le, {
 			className: "p-4",
-			children: /* @__PURE__ */ C("div", {
+			children: /* @__PURE__ */ S("div", {
 				className: "grid grid-cols-2 gap-4 sm:grid-cols-3",
 				children: [
-					/* @__PURE__ */ S(i, {
+					/* @__PURE__ */ x(a, {
 						label: "Conversations",
-						value: M.length,
-						icon: /* @__PURE__ */ S(_, { className: "h-4 w-4" })
+						value: D.length,
+						icon: /* @__PURE__ */ x(v, { className: "h-4 w-4" })
 					}),
-					/* @__PURE__ */ S(i, {
+					/* @__PURE__ */ x(a, {
 						label: "Unread threads",
-						value: J,
-						icon: /* @__PURE__ */ S(_, { className: "h-4 w-4" })
+						value: he,
+						icon: /* @__PURE__ */ x(v, { className: "h-4 w-4" })
 					}),
-					/* @__PURE__ */ S(i, {
+					/* @__PURE__ */ x(a, {
 						label: "With updates today",
-						value: M.filter((e) => e.lastMessageAt && n(e.lastMessageAt) === "Today").length,
-						icon: /* @__PURE__ */ S(y, { className: "h-4 w-4" })
+						value: D.filter((e) => e.lastMessageAt && r(e.lastMessageAt) === "Today").length,
+						icon: /* @__PURE__ */ x(y, { className: "h-4 w-4" })
 					})
 				]
 			})
-		}), X ? /* @__PURE__ */ S(a, {
+		}), ye ? /* @__PURE__ */ x(o, {
 			illustration: "empty-generic",
-			icon: /* @__PURE__ */ S(_, { className: "h-12 w-12" }),
+			icon: /* @__PURE__ */ x(v, { className: "h-12 w-12" }),
 			title: "No messages yet",
 			description: "Start a conversation from any property or service — reach out to an owner or provider and your thread will show up here.",
-			action: /* @__PURE__ */ S(w, {
-				onClick: () => D("../properties"),
+			action: /* @__PURE__ */ x(C, {
+				onClick: () => w("../properties"),
 				children: "Browse properties"
 			})
-		}) : /* @__PURE__ */ S(E, {
+		}) : /* @__PURE__ */ x(ue, {
 			treatment: "plain",
 			className: "overflow-hidden p-0",
-			children: /* @__PURE__ */ C("div", {
+			children: /* @__PURE__ */ S("div", {
 				className: "grid h-[68vh] min-h-[26rem] grid-cols-1 lg:grid-cols-[20rem_1fr]",
-				children: [/* @__PURE__ */ C("aside", {
-					className: t("flex flex-col border-border-subtle lg:border-r", L ? "hidden lg:flex" : "flex"),
-					children: [/* @__PURE__ */ S("div", {
+				children: [/* @__PURE__ */ S("aside", {
+					className: t("flex flex-col border-border-subtle lg:border-r", R ? "hidden lg:flex" : "flex"),
+					children: [/* @__PURE__ */ x("div", {
 						className: "border-b border-border-subtle p-3",
-						children: /* @__PURE__ */ C("div", {
+						children: /* @__PURE__ */ S("div", {
 							className: "relative",
-							children: [/* @__PURE__ */ S(v, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ S("input", {
+							children: [/* @__PURE__ */ x(oe, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ x("input", {
 								type: "search",
-								value: z,
-								onChange: (e) => B(e.target.value),
+								value: B,
+								onChange: (e) => pe(e.target.value),
 								placeholder: "Search conversations",
 								"aria-label": "Search conversations",
 								className: "h-10 w-full rounded-md border border-border-subtle bg-bg-surface pl-9 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 							})]
 						})
-					}), /* @__PURE__ */ S("div", {
+					}), /* @__PURE__ */ x("div", {
 						className: "min-h-0 flex-1 overflow-y-auto",
-						children: N && M.length === 0 ? /* @__PURE__ */ S("p", {
+						children: A && D.length === 0 ? /* @__PURE__ */ x("p", {
 							className: "p-6 text-center text-sm text-text-secondary",
 							children: "Loading conversations…"
-						}) : q.length === 0 ? /* @__PURE__ */ S("p", {
+						}) : Q.length === 0 ? /* @__PURE__ */ x("p", {
 							className: "p-6 text-center text-sm text-text-secondary",
 							children: "No conversations match your search."
-						}) : /* @__PURE__ */ S("ul", { children: q.map((e) => /* @__PURE__ */ S("li", { children: /* @__PURE__ */ C("button", {
+						}) : /* @__PURE__ */ x("ul", { children: Q.map((e) => /* @__PURE__ */ x("li", { children: /* @__PURE__ */ S("button", {
 							type: "button",
 							onClick: () => {
-								R(e.id), H("");
+								z(e.id), H(""), W([]);
 							},
-							className: t("flex w-full items-start gap-3 border-b border-border-subtle px-3 py-3 text-left transition-colors", e.id === L ? "bg-action-primary-bg/10" : "hover:bg-bg-sunken"),
-							children: [/* @__PURE__ */ S(j, {
+							className: t("flex w-full items-start gap-3 border-b border-border-subtle px-3 py-3 text-left transition-colors", e.id === R ? "bg-action-primary-bg/10" : "hover:bg-bg-sunken"),
+							children: [/* @__PURE__ */ x(j, {
 								title: e.title,
-								id: e.id
-							}), /* @__PURE__ */ C("div", {
+								id: e.id,
+								imageUrl: e.avatar
+							}), /* @__PURE__ */ S("div", {
 								className: "min-w-0 flex-1",
-								children: [/* @__PURE__ */ C("div", {
-									className: "flex items-center justify-between gap-2",
-									children: [/* @__PURE__ */ S("span", {
-										className: "truncate text-sm font-semibold text-text-primary",
-										children: e.title
-									}), e.lastMessageAt && /* @__PURE__ */ S("span", {
-										className: "shrink-0 text-xs text-text-secondary",
-										children: n(e.lastMessageAt)
-									})]
-								}), /* @__PURE__ */ C("div", {
-									className: "mt-0.5 flex items-center gap-2",
-									children: [/* @__PURE__ */ S("span", {
-										className: "min-w-0 flex-1 truncate text-xs text-text-secondary",
-										children: e.lastMessageText || "No messages yet"
-									}), e.unreadCount > 0 && /* @__PURE__ */ S("span", {
-										className: "inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-action-primary-bg px-1.5 text-[0.65rem] font-semibold text-action-primary-text",
-										children: e.unreadCount
-									})]
-								})]
+								children: [
+									/* @__PURE__ */ S("div", {
+										className: "flex items-center justify-between gap-2",
+										children: [/* @__PURE__ */ x("span", {
+											className: "truncate text-sm font-semibold text-text-primary",
+											children: e.title
+										}), e.lastMessageAt && /* @__PURE__ */ x("span", {
+											className: "shrink-0 text-xs text-text-secondary",
+											children: r(e.lastMessageAt)
+										})]
+									}),
+									O(e.entityType) && /* @__PURE__ */ x("span", {
+										className: "mt-0.5 block truncate text-xs font-medium text-text-secondary",
+										children: O(e.entityType)
+									}),
+									/* @__PURE__ */ S("div", {
+										className: "mt-0.5 flex items-center gap-2",
+										children: [/* @__PURE__ */ x("span", {
+											className: "min-w-0 flex-1 truncate text-xs text-text-secondary",
+											children: e.lastMessageText || (e.lastMessageIsFile ? "Attachment" : "No messages yet")
+										}), e.unreadCount > 0 && /* @__PURE__ */ x("span", {
+											className: "inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-action-primary-bg px-1.5 text-[0.65rem] font-semibold text-action-primary-text",
+											children: e.unreadCount
+										})]
+									})
+								]
 							})]
 						}) }, e.id)) })
 					})]
-				}), /* @__PURE__ */ S("section", {
-					className: t("flex min-h-0 flex-col", L ? "flex" : "hidden lg:flex"),
-					children: W ? /* @__PURE__ */ C(x, { children: [
-						/* @__PURE__ */ C("header", {
+				}), /* @__PURE__ */ x("section", {
+					className: t("flex min-h-0 flex-col", R ? "flex" : "hidden lg:flex"),
+					children: Y ? /* @__PURE__ */ S(b, { children: [
+						/* @__PURE__ */ S("header", {
 							className: "flex items-center gap-3 border-b border-border-subtle p-3",
 							children: [
-								/* @__PURE__ */ S("button", {
+								/* @__PURE__ */ x("button", {
 									type: "button",
-									onClick: () => R(void 0),
+									onClick: () => z(void 0),
 									className: "rounded-md p-1.5 text-text-secondary transition-colors hover:bg-bg-sunken lg:hidden",
 									"aria-label": "Back to conversations",
-									children: /* @__PURE__ */ S(h, { className: "h-5 w-5" })
+									children: /* @__PURE__ */ x(g, { className: "h-5 w-5" })
 								}),
-								/* @__PURE__ */ S(j, {
-									title: W.title,
-									id: W.id,
-									size: "sm"
+								/* @__PURE__ */ x(j, {
+									title: Y.title,
+									id: Y.id,
+									size: "sm",
+									imageUrl: Y.avatar
 								}),
-								/* @__PURE__ */ C("div", {
+								/* @__PURE__ */ S("div", {
 									className: "min-w-0 flex-1",
-									children: [/* @__PURE__ */ S("h2", {
-										className: "truncate text-sm font-semibold text-text-primary",
-										children: W.title
-									}), W.contextHref && /* @__PURE__ */ C("button", {
-										type: "button",
-										onClick: () => D(`..${W.contextHref}`),
-										className: "flex items-center gap-1 text-xs text-text-secondary transition-colors hover:text-primary",
-										children: [/* @__PURE__ */ S(g, { className: "h-3 w-3" }), "View listing"]
+									children: [/* @__PURE__ */ S("div", {
+										className: "flex min-w-0 items-baseline gap-2",
+										children: [/* @__PURE__ */ x("h2", {
+											className: "truncate text-sm font-semibold text-text-primary",
+											children: Y.title
+										}), Z && /* @__PURE__ */ S("span", {
+											className: "shrink-0 text-sm font-semibold text-primary",
+											children: [n(Z.price.amount, Z.price.currency), Z.price.type === "rent" && Z.price.period === "monthly" ? "/mo" : ""]
+										})]
+									}), /* @__PURE__ */ S("div", {
+										className: "flex items-center gap-2",
+										children: [O(Y.entityType) && /* @__PURE__ */ x("span", {
+											className: "text-xs text-text-secondary",
+											children: O(Y.entityType)
+										}), Y.contextHref && /* @__PURE__ */ S("button", {
+											type: "button",
+											onClick: () => w(`..${Y.contextHref}`),
+											className: "flex items-center gap-1 text-xs text-text-secondary transition-colors hover:text-primary",
+											children: [/* @__PURE__ */ x(ie, { className: "h-3 w-3" }), "View listing"]
+										})]
 									})]
 								})
 							]
 						}),
-						/* @__PURE__ */ S("div", {
-							ref: U,
+						/* @__PURE__ */ x("div", {
+							ref: J,
 							className: "min-h-0 flex-1 space-y-2 overflow-y-auto bg-bg-sunken/40 p-4",
-							children: K && G.length === 0 ? /* @__PURE__ */ S("p", {
+							children: me && X.length === 0 ? /* @__PURE__ */ x("p", {
 								className: "py-10 text-center text-sm text-text-secondary",
 								children: "Loading messages…"
-							}) : G.length === 0 ? /* @__PURE__ */ S("p", {
+							}) : X.length === 0 ? /* @__PURE__ */ x("p", {
 								className: "py-10 text-center text-sm text-text-secondary",
 								children: "No messages yet. Say hello to get the conversation started."
-							}) : G.map((e) => {
-								let n = e.authorId === k;
-								return /* @__PURE__ */ S("div", {
+							}) : X.map((e) => {
+								let n = e.authorId === E;
+								return /* @__PURE__ */ x("div", {
 									className: t("flex", n ? "justify-end" : "justify-start"),
-									children: /* @__PURE__ */ C("div", {
+									children: /* @__PURE__ */ S("div", {
 										className: t("max-w-[78%]", n ? "items-end" : "items-start"),
-										children: [/* @__PURE__ */ S("div", {
-											className: t("rounded-2xl px-3.5 py-2 text-sm", n ? "rounded-br-sm bg-action-primary-bg text-action-primary-text" : "rounded-bl-sm border border-border-subtle bg-bg-surface text-text-primary"),
-											children: e.text
-										}), /* @__PURE__ */ S("div", {
-											className: t("mt-1 px-1 text-[0.65rem] text-text-secondary", n && "text-right"),
-											children: A(e.createdAt)
-										})]
+										children: [
+											!n && e.authorName && /* @__PURE__ */ x("div", {
+												className: "mb-0.5 px-1 text-xs font-medium text-text-secondary",
+												children: e.authorName
+											}),
+											e.text && /* @__PURE__ */ x("div", {
+												className: t("rounded-2xl px-3.5 py-2 text-sm", n ? "rounded-br-sm bg-action-primary-bg text-action-primary-text" : "rounded-bl-sm border border-border-subtle bg-bg-surface text-text-primary"),
+												children: e.text
+											}),
+											/* @__PURE__ */ x(fe, {
+												attachments: e.attachments,
+												mine: n
+											}),
+											/* @__PURE__ */ x("div", {
+												className: t("mt-1 px-1 text-[0.65rem] text-text-secondary", n && "text-right"),
+												children: de(e.createdAt)
+											})
+										]
 									})
 								}, e.id);
 							})
 						}),
-						/* @__PURE__ */ C("div", {
-							className: "flex items-end gap-2 border-t border-border-subtle p-3",
-							children: [/* @__PURE__ */ S("textarea", {
-								value: V,
-								onChange: (e) => H(e.target.value),
-								onKeyDown: (e) => {
-									e.key === "Enter" && !e.shiftKey && (e.preventDefault(), Y());
-								},
-								rows: 1,
-								placeholder: "Type a message…",
-								"aria-label": "Message",
-								className: "max-h-32 min-h-10 flex-1 resize-none rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
-							}), /* @__PURE__ */ C(w, {
-								type: "button",
-								onClick: Y,
-								disabled: !V.trim() || I,
-								children: [/* @__PURE__ */ S(y, { className: "h-4 w-4" }), /* @__PURE__ */ S("span", {
-									className: "ml-1 hidden sm:inline",
-									children: "Send"
-								})]
+						/* @__PURE__ */ S("div", {
+							className: "border-t border-border-subtle p-3",
+							children: [U.length > 0 && /* @__PURE__ */ x("ul", {
+								className: "mb-2 flex flex-wrap gap-2",
+								children: U.map((e) => /* @__PURE__ */ S("li", {
+									className: "flex max-w-full items-center gap-2 rounded-md border border-border-subtle bg-bg-surface px-2.5 py-1.5 text-sm text-text-primary",
+									children: [
+										/* @__PURE__ */ x(_, { className: "h-4 w-4 shrink-0 text-text-secondary" }),
+										/* @__PURE__ */ x("span", {
+											className: "truncate",
+											children: e.name
+										}),
+										k(e.size) && /* @__PURE__ */ x("span", {
+											className: "shrink-0 text-xs text-text-secondary",
+											children: k(e.size)
+										}),
+										/* @__PURE__ */ x("button", {
+											type: "button",
+											onClick: () => W((t) => t.filter((t) => t.id !== e.id)),
+											"aria-label": `Remove ${e.name}`,
+											className: "shrink-0 text-text-secondary transition-colors hover:text-status-error-text",
+											children: /* @__PURE__ */ x(se, { className: "h-4 w-4" })
+										})
+									]
+								}, e.id))
+							}), /* @__PURE__ */ S("div", {
+								className: "flex items-end gap-2",
+								children: [
+									/* @__PURE__ */ x("textarea", {
+										value: V,
+										onChange: (e) => H(e.target.value),
+										onKeyDown: (e) => {
+											e.key === "Enter" && !e.shiftKey && (e.preventDefault(), $());
+										},
+										rows: 1,
+										placeholder: "Type a message…",
+										"aria-label": "Message",
+										className: "max-h-32 min-h-10 flex-1 resize-none rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
+									}),
+									ge && /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x("input", {
+										ref: q,
+										type: "file",
+										multiple: !0,
+										className: "hidden",
+										onChange: (e) => void ve(e.target.files)
+									}), /* @__PURE__ */ x("button", {
+										type: "button",
+										onClick: () => q.current?.click(),
+										disabled: G,
+										"aria-label": "Attach files",
+										className: "rounded-md border border-border-subtle p-2.5 text-text-secondary transition-colors hover:bg-bg-sunken hover:text-text-primary disabled:opacity-60",
+										children: G ? /* @__PURE__ */ x(re, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ x(ae, { className: "h-4 w-4" })
+									})] }),
+									/* @__PURE__ */ S(C, {
+										type: "button",
+										onClick: $,
+										disabled: !V.trim() && U.length === 0 || _e,
+										children: [/* @__PURE__ */ x(y, { className: "h-4 w-4" }), /* @__PURE__ */ x("span", {
+											className: "ml-1 hidden sm:inline",
+											children: "Send"
+										})]
+									})
+								]
 							})]
 						})
-					] }) : /* @__PURE__ */ S("div", {
+					] }) : /* @__PURE__ */ x("div", {
 						className: "hidden flex-1 items-center justify-center p-8 lg:flex",
-						children: /* @__PURE__ */ C("div", {
+						children: /* @__PURE__ */ S("div", {
 							className: "text-center",
-							children: [/* @__PURE__ */ S(_, { className: "mx-auto h-10 w-10 text-text-secondary" }), /* @__PURE__ */ S("p", {
+							children: [/* @__PURE__ */ x(v, { className: "mx-auto h-10 w-10 text-text-secondary" }), /* @__PURE__ */ x("p", {
 								className: "mt-3 text-sm text-text-secondary",
 								children: "Select a conversation to read and reply."
 							})]