@alfakit/react 0.0.0-stage → 0.1.1

package/dist/components/helpdesk/inbox.js

@@ -0,0 +1,609 @@
+import { useActionRunner, useFormatter, useT } from "../../context.js";
+import { usePageActionContext } from "../actions/action-context.js";
+import { cn } from "../../lib/utils.js";
+import { badgeColorClasses, colorClass } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { useStore } from "../../hooks/use-store.js";
+import { Spinner } from "../ui/spinner.js";
+import { ActionList } from "../actions/action-list.js";
+import { Card } from "../ui/card.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { Input } from "../ui/input.js";
+import { Textarea } from "../ui/textarea.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
+import { RecordPresence } from "../realtime/record-presence.js";
+import { HelpdeskInboxController, helpdeskFileSize, presenceInitials } from "@alfakit/core";
+import { useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeftIcon, ExternalLinkIcon, LockIcon, PaperclipIcon, SearchIcon, SendIcon } from "lucide-react";
+//#region src/components/helpdesk/inbox.tsx
+/**
+* The helpdesk agent inbox (schema component `helpdesk:inbox`, alfasix/alfakit-helpdesk):
+* views, the ticket list and the conversation side by side, a quick composer, keyboard
+* shortcuts (`j` / `k`, `r`, `n`, `/`) and live updates.
+*/
+function HelpdeskInbox({ component }) {
+	return /* @__PURE__ */ jsx(InboxView, { schema: component }, component.actionComponent);
+}
+function InboxView({ schema }) {
+	const runner = useActionRunner();
+	const page = usePageActionContext();
+	const t = useT();
+	const formatter = useFormatter();
+	const [controller] = useState(() => new HelpdeskInboxController(schema, {
+		runner,
+		token: page.token,
+		t
+	}));
+	const state = useStore(controller.store);
+	const searchRef = useRef(null);
+	const composerRef = useRef(null);
+	const listRef = useRef(null);
+	const first = useRef(true);
+	useEffect(() => {
+		controller.setEnvironment({
+			runner,
+			token: page.token,
+			t
+		});
+	});
+	useEffect(() => {
+		if (first.current) {
+			first.current = false;
+			return;
+		}
+		controller.setSchema(schema);
+	}, [controller, schema]);
+	useEffect(() => controller.start(), [controller]);
+	useEffect(() => controller.registerShortcuts({
+		focusComposer: () => requestAnimationFrame(() => composerRef.current?.focus()),
+		focusSearch: () => searchRef.current?.focus(),
+		focusTicket: (key) => requestAnimationFrame(() => listRef.current?.querySelector(`[data-ticket="${CSS.escape(key)}"]`)?.focus())
+	}), [controller]);
+	const ticket = state.ticket;
+	return /* @__PURE__ */ jsxs(Card, {
+		"data-slot": "helpdesk-inbox",
+		className: "grid h-[calc(100svh-12rem)] min-h-[34rem] grid-cols-1 gap-0 overflow-hidden py-0 md:grid-cols-[18rem_1fr] xl:grid-cols-[13rem_20rem_1fr]",
+		children: [
+			/* @__PURE__ */ jsx("nav", {
+				"data-slot": "helpdesk-views",
+				"aria-label": t("helpdesk.views", {}, "Views"),
+				className: cn("flex gap-1 overflow-x-auto border-b p-2 md:col-span-2 xl:col-span-1 xl:flex-col xl:overflow-visible xl:border-e xl:border-b-0", state.selected !== null && "max-md:hidden"),
+				children: state.list.views.map((view) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-current": view.key === state.view ? "page" : void 0,
+					onClick: () => controller.setView(view.key),
+					className: "hover:bg-muted aria-[current=page]:bg-muted aria-[current=page]:text-foreground text-muted-foreground flex shrink-0 items-center gap-2 rounded-md px-2.5 py-1.5 text-start text-sm font-medium",
+					children: [
+						/* @__PURE__ */ jsx(Icon, {
+							name: view.icon,
+							className: "size-4 shrink-0"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "flex-1 truncate",
+							children: view.label
+						}),
+						view.count !== void 0 && view.count > 0 && /* @__PURE__ */ jsx("span", {
+							className: cn("rounded-full px-1.5 text-xs tabular-nums", view.color ? colorClass(badgeColorClasses, view.color) : "bg-muted-foreground/10"),
+							children: formatter.number(view.count)
+						})
+					]
+				}, view.key))
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				"data-slot": "helpdesk-list",
+				"aria-label": t("helpdesk.tickets", {}, "Tickets"),
+				className: cn("flex min-h-0 flex-col border-e", state.selected !== null && "max-md:hidden"),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "relative border-b p-2",
+					children: [/* @__PURE__ */ jsx(SearchIcon, {
+						"aria-hidden": "true",
+						className: "text-muted-foreground pointer-events-none absolute start-4 top-1/2 size-4 -translate-y-1/2"
+					}), /* @__PURE__ */ jsx(Input, {
+						ref: searchRef,
+						type: "search",
+						value: state.search,
+						onChange: (event) => controller.setSearch(event.target.value),
+						placeholder: t("helpdesk.search_placeholder", {}, "Search by subject, requester or #number…"),
+						"aria-label": t("helpdesk.search", {}, "Search tickets"),
+						className: "ps-8"
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "min-h-0 flex-1 overflow-y-auto",
+					"aria-busy": state.loadingList || void 0,
+					children: [state.list.tickets.length === 0 ? /* @__PURE__ */ jsx("div", {
+						className: "text-muted-foreground flex flex-col items-center gap-1 p-8 text-center text-sm",
+						children: state.loadingList ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+							className: "text-foreground font-medium",
+							children: t("helpdesk.empty", {}, "No tickets here")
+						}), /* @__PURE__ */ jsx("p", { children: t("helpdesk.empty_description", {}, "Nothing needs your attention in this view.") })] })
+					}) : /* @__PURE__ */ jsx("ul", {
+						ref: listRef,
+						className: "divide-y",
+						children: state.list.tickets.map((item) => /* @__PURE__ */ jsx(TicketRow, {
+							ticket: item,
+							selected: item.key === state.selected,
+							formatter,
+							t,
+							onSelect: () => void controller.select(item.key)
+						}, item.key))
+					}), state.list.hasMore && /* @__PURE__ */ jsx("div", {
+						className: "p-2",
+						children: /* @__PURE__ */ jsxs(Button, {
+							variant: "ghost",
+							size: "sm",
+							className: "w-full",
+							disabled: state.loadingList,
+							onClick: () => void controller.loadMore(),
+							children: [state.loadingList && /* @__PURE__ */ jsx(Spinner, {}), t("helpdesk.load_more", {}, "Load more")]
+						})
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx("section", {
+				"data-slot": "helpdesk-ticket",
+				"aria-label": ticket ? `${ticket.reference} ${ticket.subject}` : t("helpdesk.conversation", {}, "Conversation"),
+				className: cn("flex min-h-0 min-w-0 flex-col", state.selected === null && "max-md:hidden"),
+				children: state.selected === null ? /* @__PURE__ */ jsxs("div", {
+					className: "text-muted-foreground m-auto flex max-w-xs flex-col items-center gap-1 p-8 text-center text-sm",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-foreground font-medium",
+						children: t("helpdesk.select", {}, "Select a ticket")
+					}), /* @__PURE__ */ jsx("p", { children: t("helpdesk.select_description", {}, "Pick a ticket on the list to read and answer it.") })]
+				}) : ticket === null ? /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-3 p-4",
+					"aria-busy": "true",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: t("helpdesk.loading", {}, "Loading…")
+					}), state.ticketError ? /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						className: "text-destructive text-sm",
+						children: t("helpdesk.load_failed", {}, "The ticket could not be loaded.")
+					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-2/3" }),
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-24" }),
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-24" })
+					] })]
+				}) : /* @__PURE__ */ jsx(TicketPane, {
+					ticket,
+					controller,
+					token: page.token,
+					actionComponent: schema.actionComponent,
+					requesterTyping: state.requesterTyping,
+					composerRef,
+					formatter,
+					t
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-live": "polite",
+				className: "sr-only",
+				children: state.announcement
+			})
+		]
+	});
+}
+function SlaBadge({ sla, formatter, t }) {
+	if (sla.state === "none") return null;
+	return /* @__PURE__ */ jsxs(Badge, {
+		variant: "outline",
+		className: colorClass(badgeColorClasses, sla.color, "gray"),
+		title: sla.dueAt ? formatter.dateTime(sla.dueAt) : void 0,
+		children: [sla.label, sla.dueAt && (sla.state === "due_soon" || sla.state === "breached" || sla.state === "on_track") && /* @__PURE__ */ jsxs("span", {
+			className: "font-normal opacity-80",
+			children: ["· ", t("helpdesk.due", { time: formatter.relative(sla.dueAt) }, "Due :time")]
+		})]
+	});
+}
+function StatusBadge({ badge }) {
+	return /* @__PURE__ */ jsx(Badge, {
+		variant: "outline",
+		className: colorClass(badgeColorClasses, badge.color, "gray"),
+		children: badge.label
+	});
+}
+function TicketRow({ ticket, selected, formatter, t, onSelect }) {
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-ticket": ticket.key,
+		"aria-current": selected ? "true" : void 0,
+		onClick: onSelect,
+		className: "hover:bg-muted/60 aria-[current=true]:bg-muted focus-visible:ring-ring/50 flex w-full flex-col gap-1 px-3 py-2.5 text-start outline-none focus-visible:ring-[3px]",
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-2",
+				children: [
+					ticket.awaitingReply && /* @__PURE__ */ jsx("span", {
+						className: "bg-primary size-2 shrink-0 rounded-full",
+						"aria-hidden": "true"
+					}),
+					ticket.awaitingReply && /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: t("helpdesk.awaiting_reply", {}, "Awaiting your reply")
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground text-xs tabular-nums",
+						children: ticket.reference
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "truncate text-sm font-medium",
+						children: ticket.subject
+					}),
+					ticket.lastActivityAt && /* @__PURE__ */ jsx("time", {
+						dateTime: ticket.lastActivityAt,
+						className: "text-muted-foreground ms-auto shrink-0 text-xs",
+						children: formatter.relative(ticket.lastActivityAt)
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "text-muted-foreground flex items-center gap-1 text-xs",
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						name: ticket.channelIcon,
+						className: "size-3 shrink-0"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: ticket.requester
+					}),
+					ticket.assignee && /* @__PURE__ */ jsxs("span", {
+						className: "truncate",
+						children: ["· ", ticket.assignee]
+					})
+				]
+			}),
+			ticket.excerpt && /* @__PURE__ */ jsxs("span", {
+				className: cn("text-muted-foreground line-clamp-2 text-xs", ticket.excerptInternal && "italic"),
+				children: [ticket.excerptInternal && /* @__PURE__ */ jsx(LockIcon, {
+					"aria-label": t("helpdesk.internal", {}, "Internal note"),
+					className: "me-1 inline size-3"
+				}), ticket.excerpt]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex flex-wrap gap-1",
+				children: [
+					/* @__PURE__ */ jsx(StatusBadge, { badge: ticket.status }),
+					ticket.priority.value !== "normal" && /* @__PURE__ */ jsx(StatusBadge, { badge: ticket.priority }),
+					/* @__PURE__ */ jsx(SlaBadge, {
+						sla: ticket.sla,
+						formatter,
+						t
+					})
+				]
+			})
+		]
+	}) });
+}
+function TicketPane({ ticket, controller, token, actionComponent, requesterTyping, composerRef, formatter, t }) {
+	const composer = useStore(controller.store).composer;
+	const messagesRef = useRef(null);
+	const composerId = useId();
+	const hintId = useId();
+	useEffect(() => {
+		const element = messagesRef.current;
+		if (element) element.scrollTop = element.scrollHeight;
+	}, [ticket.key, ticket.messages.length]);
+	const onKeyDown = (event) => {
+		if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+			event.preventDefault();
+			controller.send();
+		}
+		if (event.key === "Escape") event.currentTarget.blur();
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("header", {
+			className: "flex flex-col gap-2 border-b p-3",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-2",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "icon-sm",
+							className: "md:hidden",
+							"aria-label": t("helpdesk.back", {}, "Back to the list"),
+							onClick: () => void controller.select(null),
+							children: /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "rtl:rotate-180" })
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ jsxs("h2", {
+								className: "truncate text-base font-semibold",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground me-1.5 font-normal tabular-nums",
+									children: ticket.reference
+								}), ticket.subject]
+							}), /* @__PURE__ */ jsxs("p", {
+								className: "text-muted-foreground truncate text-xs",
+								children: [ticket.requester.name, ticket.requester.email && ` · ${ticket.requester.email}`]
+							})]
+						}),
+						ticket.presence && /* @__PURE__ */ jsx(RecordPresence, { presence: ticket.presence }),
+						ticket.url && /* @__PURE__ */ jsx(Button, {
+							asChild: true,
+							variant: "ghost",
+							size: "icon-sm",
+							children: /* @__PURE__ */ jsx("a", {
+								href: ticket.url,
+								"aria-label": t("helpdesk.open_page", {}, "Open the ticket page"),
+								title: t("helpdesk.open_page", {}, "Open the ticket page"),
+								children: /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "rtl:-scale-x-100" })
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("dl", {
+					className: "text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-xs",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ jsx("dt", {
+								className: "sr-only",
+								children: t("helpdesk.status", {}, "Status")
+							}), /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(StatusBadge, { badge: ticket.status }) })]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ jsx("dt", {
+								className: "sr-only",
+								children: t("helpdesk.priority", {}, "Priority")
+							}), /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(StatusBadge, { badge: ticket.priority }) })]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ jsxs("dt", { children: [t("helpdesk.assignee", {}, "Assignee"), ":"] }), /* @__PURE__ */ jsx("dd", {
+								className: "text-foreground",
+								children: ticket.assignee?.name ?? t("helpdesk.unassigned", {}, "Unassigned")
+							})]
+						}),
+						ticket.group && /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ jsxs("dt", { children: [t("helpdesk.group", {}, "Group"), ":"] }), /* @__PURE__ */ jsx("dd", {
+								className: "text-foreground",
+								children: ticket.group.name
+							})]
+						}),
+						ticket.sla.firstResponse && /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ jsxs("dt", { children: [t("helpdesk.first_response", {}, "First response"), ":"] }), /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(SlaBadge, {
+								sla: ticket.sla.firstResponse,
+								formatter,
+								t
+							}) })]
+						}),
+						ticket.sla.resolution && /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ jsxs("dt", { children: [t("helpdesk.resolution", {}, "Resolution"), ":"] }), /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(SlaBadge, {
+								sla: ticket.sla.resolution,
+								formatter,
+								t
+							}) })]
+						}),
+						ticket.satisfaction?.rating !== void 0 && /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ jsxs("dt", { children: [t("helpdesk.satisfaction", {}, "Satisfaction"), ":"] }), /* @__PURE__ */ jsx("dd", {
+								className: "text-foreground",
+								children: t("helpdesk.rating", { rating: ticket.satisfaction.rating }, ":rating / 5")
+							})]
+						}),
+						ticket.tags && ticket.tags.length > 0 && /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ jsx("dt", {
+								className: "sr-only",
+								children: t("helpdesk.tags", {}, "Tags")
+							}), /* @__PURE__ */ jsx("dd", {
+								className: "flex flex-wrap gap-1",
+								children: ticket.tags.map((tag) => /* @__PURE__ */ jsx(Badge, {
+									variant: "secondary",
+									children: tag
+								}, tag))
+							})]
+						})
+					]
+				}),
+				ticket.actions.length > 0 && /* @__PURE__ */ jsx("div", {
+					role: "group",
+					"aria-label": t("helpdesk.actions", {}, "Ticket actions"),
+					children: /* @__PURE__ */ jsx(ActionList, {
+						actions: ticket.actions,
+						context: {
+							token,
+							component: actionComponent,
+							record: ticket.key
+						},
+						size: "xs"
+					})
+				})
+			]
+		}),
+		/* @__PURE__ */ jsx("ol", {
+			ref: messagesRef,
+			"aria-label": t("helpdesk.conversation", {}, "Conversation"),
+			className: "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-3",
+			children: ticket.messages.map((message) => /* @__PURE__ */ jsx(Message, {
+				message,
+				formatter,
+				t
+			}, message.key))
+		}),
+		ticket.merged && /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground border-t p-3 text-sm",
+			children: t("helpdesk.merged", {}, "This ticket was merged into another one.")
+		}),
+		ticket.canReply && /* @__PURE__ */ jsxs("form", {
+			"data-slot": "helpdesk-composer",
+			"data-mode": composer.mode,
+			className: "data-[mode=note]:bg-warning/5 flex flex-col gap-2 border-t p-3",
+			onSubmit: (event) => {
+				event.preventDefault();
+				controller.send();
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-2",
+					children: [/* @__PURE__ */ jsx("div", {
+						role: "radiogroup",
+						"aria-label": t("helpdesk.mode", {}, "Message type"),
+						className: "bg-muted inline-flex rounded-md p-0.5",
+						children: ["reply", "note"].map((mode) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							role: "radio",
+							"aria-checked": composer.mode === mode,
+							onClick: () => controller.setMode(mode),
+							className: "aria-checked:bg-background aria-checked:text-foreground text-muted-foreground rounded px-2.5 py-1 text-xs font-medium aria-checked:shadow-xs",
+							children: mode === "reply" ? t("helpdesk.mode_reply", {}, "Reply") : t("helpdesk.mode_note", {}, "Internal note")
+						}, mode))
+					}), requesterTyping && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground animate-pulse text-xs",
+						role: "status",
+						children: t("helpdesk.requester_typing", { name: ticket.requester.name }, ":name is typing…")
+					})]
+				}),
+				/* @__PURE__ */ jsx("label", {
+					htmlFor: composerId,
+					className: "sr-only",
+					children: composer.mode === "note" ? t("helpdesk.mode_note", {}, "Internal note") : t("helpdesk.mode_reply", {}, "Reply")
+				}),
+				/* @__PURE__ */ jsx(Textarea, {
+					ref: composerRef,
+					id: composerId,
+					rows: 3,
+					value: composer.text,
+					onChange: (event) => controller.setText(event.target.value),
+					onKeyDown,
+					"aria-describedby": hintId,
+					"aria-invalid": composer.error ? true : void 0,
+					placeholder: composer.mode === "note" ? t("helpdesk.note_placeholder", {}, "Add a note only agents can see…") : t("helpdesk.reply_placeholder", { name: ticket.requester.name }, "Reply to :name…"),
+					className: "max-h-48 min-h-20 resize-y"
+				}),
+				composer.error && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "text-destructive text-xs",
+					children: composer.error
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-2",
+					children: [/* @__PURE__ */ jsx("p", {
+						id: hintId,
+						className: "text-muted-foreground text-xs max-sm:hidden",
+						children: t("helpdesk.send_hint", {}, "Enter to send, Shift+Enter for a new line")
+					}), /* @__PURE__ */ jsxs(Button, {
+						type: "submit",
+						size: "sm",
+						className: "ms-auto",
+						variant: composer.mode === "note" ? "secondary" : "default",
+						disabled: composer.sending || composer.text.trim() === "",
+						children: [composer.sending ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(SendIcon, { className: "rtl:-scale-x-100" }), composer.sending ? t("helpdesk.sending", {}, "Sending…") : composer.mode === "note" ? t("helpdesk.add_note", {}, "Add note") : t("helpdesk.send", {}, "Send")]
+					})]
+				})
+			]
+		})
+	] });
+}
+function Message({ message, formatter, t }) {
+	if (message.kind === "event") return /* @__PURE__ */ jsxs("li", {
+		"data-slot": "helpdesk-message",
+		"data-kind": "event",
+		className: "text-muted-foreground flex items-center gap-2 self-center text-xs",
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [t("helpdesk.activity", {}, "Activity"), ":"]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				dangerouslySetInnerHTML: { __html: message.html },
+				className: "[&_p]:inline"
+			}),
+			message.createdAt && /* @__PURE__ */ jsxs("time", {
+				dateTime: message.createdAt,
+				children: ["· ", formatter.relative(message.createdAt)]
+			})
+		]
+	});
+	const note = message.kind === "note";
+	return /* @__PURE__ */ jsxs("li", {
+		"data-slot": "helpdesk-message",
+		"data-kind": message.kind,
+		"data-from": message.fromRequester ? "requester" : "agent",
+		className: cn("flex max-w-[48rem] gap-2.5", !message.fromRequester && "flex-row-reverse self-end text-start"),
+		children: [/* @__PURE__ */ jsxs(Avatar, {
+			className: "size-8 shrink-0",
+			children: [message.author.avatar && /* @__PURE__ */ jsx(AvatarImage, {
+				src: message.author.avatar,
+				alt: ""
+			}), /* @__PURE__ */ jsx(AvatarFallback, {
+				"aria-hidden": "true",
+				children: presenceInitials(message.author.name)
+			})]
+		}), /* @__PURE__ */ jsxs("article", {
+			className: cn("min-w-0 rounded-lg border px-3 py-2", note ? "border-warning/40 bg-warning/10" : message.fromRequester ? "bg-muted/50" : "bg-primary/5 border-primary/20"),
+			children: [
+				/* @__PURE__ */ jsxs("header", {
+					className: "mb-1 flex flex-wrap items-center gap-x-2 text-xs",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "font-medium",
+							children: message.author.name
+						}),
+						note && /* @__PURE__ */ jsxs("span", {
+							className: "text-warning inline-flex items-center gap-1 font-medium",
+							children: [/* @__PURE__ */ jsx(LockIcon, {
+								className: "size-3",
+								"aria-hidden": "true"
+							}), t("helpdesk.internal", {}, "Internal note")]
+						}),
+						message.createdAt && /* @__PURE__ */ jsx("time", {
+							dateTime: message.createdAt,
+							title: formatter.dateTime(message.createdAt),
+							className: "text-muted-foreground",
+							children: formatter.relative(message.createdAt)
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "prose prose-sm dark:prose-invert max-w-none break-words",
+					dangerouslySetInnerHTML: { __html: message.html }
+				}),
+				message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsx("ul", {
+					"aria-label": t("helpdesk.attachments", {}, "Attachments"),
+					className: "mt-2 flex flex-wrap gap-1.5",
+					children: message.attachments.map((file, index) => {
+						const size = helpdeskFileSize(file.size, (value) => formatter.number(value));
+						return /* @__PURE__ */ jsx("li", { children: file.url ? /* @__PURE__ */ jsxs("a", {
+							href: file.url,
+							target: "_blank",
+							rel: "noopener",
+							className: "hover:bg-muted inline-flex items-center gap-1 rounded border px-2 py-1 text-xs",
+							children: [
+								/* @__PURE__ */ jsx(PaperclipIcon, {
+									className: "size-3",
+									"aria-hidden": "true"
+								}),
+								file.name,
+								size && /* @__PURE__ */ jsxs("span", {
+									className: "text-muted-foreground",
+									children: [
+										"(",
+										size,
+										")"
+									]
+								})
+							]
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "inline-flex items-center gap-1 rounded border px-2 py-1 text-xs",
+							children: file.name
+						}) }, index);
+					})
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { HelpdeskInbox };
+
+//# sourceMappingURL=inbox.js.map