@alfakit/vue 0.0.0-stage → 0.1.0

package/dist/components/helpdesk/HelpdeskInboxSkeleton.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpdeskInboxSkeleton.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Card","_withCtx","_createElementVNode","_toDisplayString","_unref","_createElementBlock","_Fragment","_renderList","_createVNode","Skeleton","Skeleton_default","Card_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","HelpdeskInboxSkeleton_vue_vue_type_script_setup_true_lang_default","t","useT","openBlock","createBlock","withCtx","createElementVNode","toDisplayString","unref","createElementBlock","Fragment","renderList","createVNode","index"],"sources":["../../../src/components/helpdesk/HelpdeskInboxSkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useT } from '../../context'\nimport Card from '../ui/Card.vue'\nimport Skeleton from '../ui/Skeleton.vue'\n\nconst t = useT()\n</script>\n\n<template>\n  <Card\n    data-slot=\"helpdesk-inbox\"\n    aria-busy=\"true\"\n    class=\"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]\"\n  >\n    <span class=\"sr-only\">{{ t('helpdesk.loading', {}, 'Loading…') }}</span>\n    <div class=\"flex flex-col gap-2 border-e p-2 max-xl:hidden\" aria-hidden=\"true\">\n      <Skeleton v-for=\"index in 6\" :key=\"index\" class=\"h-7\" />\n    </div>\n    <div class=\"flex flex-col gap-2 border-e p-2\" aria-hidden=\"true\">\n      <Skeleton class=\"h-9\" />\n      <Skeleton v-for=\"index in 6\" :key=\"index\" class=\"h-16\" />\n    </div>\n    <div class=\"flex flex-col gap-3 p-4 max-md:hidden\" aria-hidden=\"true\">\n      <Skeleton class=\"h-6 w-1/2\" />\n      <Skeleton class=\"h-24\" />\n      <Skeleton class=\"h-24\" />\n    </div>\n  </Card>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAKA,IAAMmB,IAAIC,EAAK;oBAIbpB,EAAA,GAAAC,EAkBOC,GAAA;GAjBL,aAAU;GACV,aAAU;GACV,OAAM;;GAEN,SAAAC,QAAwE;IAAxEC,EAAwE,QAAxEU,GAAwET,EAA/CC,EAAAa,CAAA,CAAC,CAAA,oBAAA,CAAA,GAAA,UAAA,CAAA,GAAA,CAAA;IAC1Bf,EAEM,OAFNW,GAEM,EADJf,EAAA,GAAAO,EAAwDC,GAAA,MAAAC,EAA9B,IAAT,MAAjBC,EAAwDC,GAAA;KAA1B,KAAKoB;KAAO,OAAM;;IAElD3B,EAGM,OAHNY,GAGM,CAFJN,EAAwBC,GAAA,EAAd,OAAM,MAAK,CAAA,IACrBX,EAAA,GAAAO,EAAyDC,GAAA,MAAAC,EAA/B,IAAT,MAAjBC,EAAyDC,GAAA;KAA3B,KAAKoB;KAAO,OAAM;;IAElD3B,EAIM,OAJNa,GAIM;KAHJP,EAA8BC,GAAA,EAApB,OAAM,YAAW,CAAA;KAC3BD,EAAyBC,GAAA,EAAf,OAAM,OAAM,CAAA;KACtBD,EAAyBC,GAAA,EAAf,OAAM,OAAM,CAAA"}

package/dist/components/helpdesk/HelpdeskInboxView.js

@@ -0,0 +1,7 @@
+import e from "./HelpdeskInboxView.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/helpdesk/HelpdeskInboxView.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=HelpdeskInboxView.js.map

package/dist/components/helpdesk/HelpdeskInboxView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpdeskInboxView.js","names":["_sfc_main","HelpdeskInboxView_vue_vue_type_script_setup_true_lang_default","HelpdeskInboxView_default"],"sources":["../../../src/components/helpdesk/HelpdeskInboxView.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HelpdeskInboxSchema } from '@alfakit/core'\nimport { HelpdeskInboxController } from '@alfakit/core'\nimport { LockIcon, SearchIcon } from '@lucide/vue'\nimport { onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { useActionRunner, useFormatter, useT } from '../../context'\nimport { badgeColorClasses, colorClass } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport Button from '../ui/Button.vue'\nimport Card from '../ui/Card.vue'\nimport Input from '../ui/Input.vue'\nimport Skeleton from '../ui/Skeleton.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport HelpdeskBadge from './HelpdeskBadge.vue'\nimport HelpdeskTicketPane from './HelpdeskTicketPane.vue'\n\nconst props = defineProps<{ schema: HelpdeskInboxSchema }>()\n\nconst runner = useActionRunner()\nconst page = usePageActionContext()\nconst t = useT()\nconst formatter = useFormatter()\nconst controller = new HelpdeskInboxController(toRaw(props.schema), {\n  runner,\n  token: page.token,\n  t,\n})\nconst state = useStore(controller.store)\nconst search = ref<{ $el: HTMLInputElement } | HTMLInputElement | null>(null)\nconst pane = ref<InstanceType<typeof HelpdeskTicketPane> | null>(null)\nconst list = ref<HTMLUListElement | null>(null)\nlet stop: (() => void) | null = null\nlet stopShortcuts: (() => void) | null = null\n\nwatch(\n  () => props.schema,\n  (schema) => controller.setSchema(toRaw(schema)),\n)\n\nconst searchElement = (): HTMLInputElement | null => {\n  const value = search.value\n\n  return value instanceof HTMLInputElement ? value : (value?.$el ?? null)\n}\n\nonMounted(() => {\n  stop = controller.start()\n  stopShortcuts = controller.registerShortcuts({\n    focusComposer: () => requestAnimationFrame(() => pane.value?.focusComposer()),\n    focusSearch: () => searchElement()?.focus(),\n    focusTicket: (key) =>\n      requestAnimationFrame(() =>\n        list.value?.querySelector<HTMLElement>(`[data-ticket=\"${CSS.escape(key)}\"]`)?.focus(),\n      ),\n  })\n})\n\nonBeforeUnmount(() => {\n  stop?.()\n  stopShortcuts?.()\n})\n</script>\n\n<template>\n  <Card\n    data-slot=\"helpdesk-inbox\"\n    class=\"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]\"\n  >\n    <nav\n      data-slot=\"helpdesk-views\"\n      :aria-label=\"t('helpdesk.views', {}, 'Views')\"\n      :class=\"\n        cn(\n          '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',\n          state.selected !== null && 'max-md:hidden',\n        )\n      \"\n    >\n      <button\n        v-for=\"view in state.list.views\"\n        :key=\"view.key\"\n        type=\"button\"\n        :aria-current=\"view.key === state.view ? 'page' : undefined\"\n        class=\"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\"\n        @click=\"controller.setView(view.key)\"\n      >\n        <Icon :name=\"view.icon\" class=\"size-4 shrink-0\" />\n        <span class=\"flex-1 truncate\">{{ view.label }}</span>\n        <span\n          v-if=\"view.count !== undefined && view.count > 0\"\n          :class=\"\n            cn(\n              'rounded-full px-1.5 text-xs tabular-nums',\n              view.color ? colorClass(badgeColorClasses, view.color) : 'bg-muted-foreground/10',\n            )\n          \"\n          >{{ formatter.number(view.count) }}</span\n        >\n      </button>\n    </nav>\n\n    <section\n      data-slot=\"helpdesk-list\"\n      :aria-label=\"t('helpdesk.tickets', {}, 'Tickets')\"\n      :class=\"cn('flex min-h-0 flex-col border-e', state.selected !== null && 'max-md:hidden')\"\n    >\n      <div class=\"relative border-b p-2\">\n        <SearchIcon\n          aria-hidden=\"true\"\n          class=\"text-muted-foreground pointer-events-none absolute start-4 top-1/2 size-4 -translate-y-1/2\"\n        />\n        <Input\n          ref=\"search\"\n          type=\"search\"\n          :model-value=\"state.search\"\n          :placeholder=\"\n            t('helpdesk.search_placeholder', {}, 'Search by subject, requester or #number…')\n          \"\n          :aria-label=\"t('helpdesk.search', {}, 'Search tickets')\"\n          class=\"ps-8\"\n          @update:model-value=\"controller.setSearch($event)\"\n        />\n      </div>\n      <div class=\"min-h-0 flex-1 overflow-y-auto\" :aria-busy=\"state.loadingList || undefined\">\n        <div\n          v-if=\"state.list.tickets.length === 0\"\n          class=\"text-muted-foreground flex flex-col items-center gap-1 p-8 text-center text-sm\"\n        >\n          <Spinner v-if=\"state.loadingList\" />\n          <template v-else>\n            <p class=\"text-foreground font-medium\">\n              {{ t('helpdesk.empty', {}, 'No tickets here') }}\n            </p>\n            <p>\n              {{\n                t('helpdesk.empty_description', {}, 'Nothing needs your attention in this view.')\n              }}\n            </p>\n          </template>\n        </div>\n        <ul v-else ref=\"list\" class=\"divide-y\">\n          <li v-for=\"item in state.list.tickets\" :key=\"item.key\">\n            <button\n              type=\"button\"\n              :data-ticket=\"item.key\"\n              :aria-current=\"item.key === state.selected ? 'true' : undefined\"\n              class=\"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]\"\n              @click=\"controller.select(item.key)\"\n            >\n              <span class=\"flex items-center gap-2\">\n                <span\n                  v-if=\"item.awaitingReply\"\n                  class=\"bg-primary size-2 shrink-0 rounded-full\"\n                  aria-hidden=\"true\"\n                />\n                <span v-if=\"item.awaitingReply\" class=\"sr-only\">{{\n                  t('helpdesk.awaiting_reply', {}, 'Awaiting your reply')\n                }}</span>\n                <span class=\"text-muted-foreground text-xs tabular-nums\">{{ item.reference }}</span>\n                <span class=\"truncate text-sm font-medium\">{{ item.subject }}</span>\n                <time\n                  v-if=\"item.lastActivityAt\"\n                  :datetime=\"item.lastActivityAt\"\n                  class=\"text-muted-foreground ms-auto shrink-0 text-xs\"\n                  >{{ formatter.relative(item.lastActivityAt) }}</time\n                >\n              </span>\n              <span class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                <Icon :name=\"item.channelIcon\" class=\"size-3 shrink-0\" />\n                <span class=\"truncate\">{{ item.requester }}</span>\n                <span v-if=\"item.assignee\" class=\"truncate\">· {{ item.assignee }}</span>\n              </span>\n              <span\n                v-if=\"item.excerpt\"\n                :class=\"\n                  cn('text-muted-foreground line-clamp-2 text-xs', item.excerptInternal && 'italic')\n                \"\n              >\n                <LockIcon\n                  v-if=\"item.excerptInternal\"\n                  :aria-label=\"t('helpdesk.internal', {}, 'Internal note')\"\n                  class=\"me-1 inline size-3\"\n                />{{ item.excerpt }}\n              </span>\n              <span class=\"flex flex-wrap gap-1\">\n                <HelpdeskBadge :badge=\"item.status\" />\n                <HelpdeskBadge v-if=\"item.priority.value !== 'normal'\" :badge=\"item.priority\" />\n                <HelpdeskBadge :sla=\"item.sla\" :formatter=\"formatter\" />\n              </span>\n            </button>\n          </li>\n        </ul>\n        <div v-if=\"state.list.hasMore\" class=\"p-2\">\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            class=\"w-full\"\n            :disabled=\"state.loadingList\"\n            @click=\"controller.loadMore()\"\n          >\n            <Spinner v-if=\"state.loadingList\" />\n            {{ t('helpdesk.load_more', {}, 'Load more') }}\n          </Button>\n        </div>\n      </div>\n    </section>\n\n    <section\n      data-slot=\"helpdesk-ticket\"\n      :aria-label=\"\n        state.ticket\n          ? `${state.ticket.reference} ${state.ticket.subject}`\n          : t('helpdesk.conversation', {}, 'Conversation')\n      \"\n      :class=\"cn('flex min-h-0 min-w-0 flex-col', state.selected === null && 'max-md:hidden')\"\n    >\n      <div\n        v-if=\"state.selected === null\"\n        class=\"text-muted-foreground m-auto flex max-w-xs flex-col items-center gap-1 p-8 text-center text-sm\"\n      >\n        <p class=\"text-foreground font-medium\">{{ t('helpdesk.select', {}, 'Select a ticket') }}</p>\n        <p>\n          {{\n            t('helpdesk.select_description', {}, 'Pick a ticket on the list to read and answer it.')\n          }}\n        </p>\n      </div>\n      <div v-else-if=\"state.ticket === null\" class=\"flex flex-col gap-3 p-4\" aria-busy=\"true\">\n        <span class=\"sr-only\">{{ t('helpdesk.loading', {}, 'Loading…') }}</span>\n        <p v-if=\"state.ticketError\" role=\"alert\" class=\"text-destructive text-sm\">\n          {{ t('helpdesk.load_failed', {}, 'The ticket could not be loaded.') }}\n        </p>\n        <template v-else>\n          <Skeleton class=\"h-6 w-2/3\" />\n          <Skeleton class=\"h-24\" />\n          <Skeleton class=\"h-24\" />\n        </template>\n      </div>\n      <HelpdeskTicketPane\n        v-else\n        ref=\"pane\"\n        :ticket=\"state.ticket\"\n        :controller=\"controller\"\n        :token=\"page.token\"\n        :action-component=\"props.schema.actionComponent\"\n      />\n    </section>\n    <div aria-live=\"polite\" class=\"sr-only\">{{ state.announcement }}</div>\n  </Card>\n</template>\n"],"mappings":""}

package/dist/components/helpdesk/HelpdeskInboxView.vue.d.ts

@@ -0,0 +1,7 @@
+import type { HelpdeskInboxSchema } from '@alfakit/core';
+type __VLS_Props = {
+    schema: HelpdeskInboxSchema;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=HelpdeskInboxView.vue.d.ts.map

package/dist/components/helpdesk/HelpdeskInboxView.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpdeskInboxView.vue.d.ts","sourceRoot":"","sources":["../../../src/components/helpdesk/HelpdeskInboxView.vue"],"names":[],"mappings":"AA+PA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AAkBxD,KAAK,WAAW,GAAG;IAAE,MAAM,EAAE,mBAAmB,CAAA;CAAE,CAAC;;AAknBnD,wBAMG"}

package/dist/components/helpdesk/HelpdeskInboxView.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,214 @@
+import { useActionRunner as e, useFormatter as t, useT as ee } from "../../context.js";
+import { usePageActionContext as te } from "../actions/action-context.js";
+import { cn as n } from "../../lib/utils.js";
+import { useStore as ne } from "../../composables/use-store.js";
+import { badgeColorClasses as re, colorClass as ie } from "../../lib/colors.js";
+import r from "../../lib/Icon.js";
+import i from "../ui/Button2.js";
+import a from "../ui/Spinner.js";
+import ae from "../ui/Input.js";
+import o from "../ui/Skeleton.js";
+import oe from "../ui/Card.js";
+import s from "./HelpdeskBadge.js";
+import se from "./HelpdeskTicketPane.js";
+import { HelpdeskInboxController as ce } from "@alfakit/core";
+import { Fragment as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, normalizeClass as g, onBeforeUnmount as le, onMounted as ue, openBlock as _, ref as v, renderList as y, toDisplayString as b, toRaw as x, unref as S, watch as de, withCtx as C } from "vue";
+import { LockIcon as w, SearchIcon as T } from "@lucide/vue";
+//#region src/components/helpdesk/HelpdeskInboxView.vue?vue&type=script&setup=true&lang.ts
+var E = ["aria-label"], D = ["aria-current", "onClick"], O = { class: "flex-1 truncate" }, k = ["aria-label"], A = { class: "relative border-b p-2" }, j = ["aria-busy"], M = {
+	key: 0,
+	class: "text-muted-foreground flex flex-col items-center gap-1 p-8 text-center text-sm"
+}, N = { class: "text-foreground font-medium" }, P = [
+	"data-ticket",
+	"aria-current",
+	"onClick"
+], F = { class: "flex items-center gap-2" }, I = {
+	key: 0,
+	class: "bg-primary size-2 shrink-0 rounded-full",
+	"aria-hidden": "true"
+}, L = {
+	key: 1,
+	class: "sr-only"
+}, R = { class: "text-muted-foreground text-xs tabular-nums" }, z = { class: "truncate text-sm font-medium" }, B = ["datetime"], V = { class: "text-muted-foreground flex items-center gap-1 text-xs" }, H = { class: "truncate" }, fe = {
+	key: 0,
+	class: "truncate"
+}, pe = { class: "flex flex-wrap gap-1" }, me = {
+	key: 2,
+	class: "p-2"
+}, he = ["aria-label"], ge = {
+	key: 0,
+	class: "text-muted-foreground m-auto flex max-w-xs flex-col items-center gap-1 p-8 text-center text-sm"
+}, _e = { class: "text-foreground font-medium" }, ve = {
+	key: 1,
+	class: "flex flex-col gap-3 p-4",
+	"aria-busy": "true"
+}, ye = { class: "sr-only" }, be = {
+	key: 0,
+	role: "alert",
+	class: "text-destructive text-sm"
+}, xe = {
+	"aria-live": "polite",
+	class: "sr-only"
+}, U = /*@__PURE__*/ h({
+	__name: "HelpdeskInboxView",
+	props: { schema: {} },
+	setup(h) {
+		let U = h, Se = e(), W = te(), G = ee(), K = t(), q = new ce(x(U.schema), {
+			runner: Se,
+			token: W.token,
+			t: G
+		}), J = ne(q.store), Y = v(null), X = v(null), Z = v(null), Q = null, $ = null;
+		de(() => U.schema, (e) => q.setSchema(x(e)));
+		let Ce = () => {
+			let e = Y.value;
+			return e instanceof HTMLInputElement ? e : e?.$el ?? null;
+		};
+		return ue(() => {
+			Q = q.start(), $ = q.registerShortcuts({
+				focusComposer: () => requestAnimationFrame(() => X.value?.focusComposer()),
+				focusSearch: () => Ce()?.focus(),
+				focusTicket: (e) => requestAnimationFrame(() => Z.value?.querySelector(`[data-ticket="${CSS.escape(e)}"]`)?.focus())
+			});
+		}), le(() => {
+			Q?.(), $?.();
+		}), (e, t) => (_(), l(oe, {
+			"data-slot": "helpdesk-inbox",
+			class: "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]"
+		}, {
+			default: C(() => [
+				f("nav", {
+					"data-slot": "helpdesk-views",
+					"aria-label": S(G)("helpdesk.views", {}, "Views"),
+					class: g(S(n)("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", S(J).selected !== null && "max-md:hidden"))
+				}, [(_(!0), d(c, null, y(S(J).list.views, (e) => (_(), d("button", {
+					key: e.key,
+					type: "button",
+					"aria-current": e.key === S(J).view ? "page" : void 0,
+					class: "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",
+					onClick: (t) => S(q).setView(e.key)
+				}, [
+					m(S(r), {
+						name: e.icon,
+						class: "size-4 shrink-0"
+					}, null, 8, ["name"]),
+					f("span", O, b(e.label), 1),
+					e.count !== void 0 && e.count > 0 ? (_(), d("span", {
+						key: 0,
+						class: g(S(n)("rounded-full px-1.5 text-xs tabular-nums", e.color ? S(ie)(S(re), e.color) : "bg-muted-foreground/10"))
+					}, b(S(K).number(e.count)), 3)) : u("", !0)
+				], 8, D))), 128))], 10, E),
+				f("section", {
+					"data-slot": "helpdesk-list",
+					"aria-label": S(G)("helpdesk.tickets", {}, "Tickets"),
+					class: g(S(n)("flex min-h-0 flex-col border-e", S(J).selected !== null && "max-md:hidden"))
+				}, [f("div", A, [m(S(T), {
+					"aria-hidden": "true",
+					class: "text-muted-foreground pointer-events-none absolute start-4 top-1/2 size-4 -translate-y-1/2"
+				}), m(ae, {
+					ref_key: "search",
+					ref: Y,
+					type: "search",
+					"model-value": S(J).search,
+					placeholder: S(G)("helpdesk.search_placeholder", {}, "Search by subject, requester or #number…"),
+					"aria-label": S(G)("helpdesk.search", {}, "Search tickets"),
+					class: "ps-8",
+					"onUpdate:modelValue": t[0] ||= (e) => S(q).setSearch(e)
+				}, null, 8, [
+					"model-value",
+					"placeholder",
+					"aria-label"
+				])]), f("div", {
+					class: "min-h-0 flex-1 overflow-y-auto",
+					"aria-busy": S(J).loadingList || void 0
+				}, [S(J).list.tickets.length === 0 ? (_(), d("div", M, [S(J).loadingList ? (_(), l(a, { key: 0 })) : (_(), d(c, { key: 1 }, [f("p", N, b(S(G)("helpdesk.empty", {}, "No tickets here")), 1), f("p", null, b(S(G)("helpdesk.empty_description", {}, "Nothing needs your attention in this view.")), 1)], 64))])) : (_(), d("ul", {
+					key: 1,
+					ref_key: "list",
+					ref: Z,
+					class: "divide-y"
+				}, [(_(!0), d(c, null, y(S(J).list.tickets, (e) => (_(), d("li", { key: e.key }, [f("button", {
+					type: "button",
+					"data-ticket": e.key,
+					"aria-current": e.key === S(J).selected ? "true" : void 0,
+					class: "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]",
+					onClick: (t) => S(q).select(e.key)
+				}, [
+					f("span", F, [
+						e.awaitingReply ? (_(), d("span", I)) : u("", !0),
+						e.awaitingReply ? (_(), d("span", L, b(S(G)("helpdesk.awaiting_reply", {}, "Awaiting your reply")), 1)) : u("", !0),
+						f("span", R, b(e.reference), 1),
+						f("span", z, b(e.subject), 1),
+						e.lastActivityAt ? (_(), d("time", {
+							key: 2,
+							datetime: e.lastActivityAt,
+							class: "text-muted-foreground ms-auto shrink-0 text-xs"
+						}, b(S(K).relative(e.lastActivityAt)), 9, B)) : u("", !0)
+					]),
+					f("span", V, [
+						m(S(r), {
+							name: e.channelIcon,
+							class: "size-3 shrink-0"
+						}, null, 8, ["name"]),
+						f("span", H, b(e.requester), 1),
+						e.assignee ? (_(), d("span", fe, "· " + b(e.assignee), 1)) : u("", !0)
+					]),
+					e.excerpt ? (_(), d("span", {
+						key: 0,
+						class: g(S(n)("text-muted-foreground line-clamp-2 text-xs", e.excerptInternal && "italic"))
+					}, [e.excerptInternal ? (_(), l(S(w), {
+						key: 0,
+						"aria-label": S(G)("helpdesk.internal", {}, "Internal note"),
+						class: "me-1 inline size-3"
+					}, null, 8, ["aria-label"])) : u("", !0), p(b(e.excerpt), 1)], 2)) : u("", !0),
+					f("span", pe, [
+						m(s, { badge: e.status }, null, 8, ["badge"]),
+						e.priority.value === "normal" ? u("", !0) : (_(), l(s, {
+							key: 0,
+							badge: e.priority
+						}, null, 8, ["badge"])),
+						m(s, {
+							sla: e.sla,
+							formatter: S(K)
+						}, null, 8, ["sla", "formatter"])
+					])
+				], 8, P)]))), 128))], 512)), S(J).list.hasMore ? (_(), d("div", me, [m(i, {
+					variant: "ghost",
+					size: "sm",
+					class: "w-full",
+					disabled: S(J).loadingList,
+					onClick: t[1] ||= (e) => S(q).loadMore()
+				}, {
+					default: C(() => [S(J).loadingList ? (_(), l(a, { key: 0 })) : u("", !0), p(" " + b(S(G)("helpdesk.load_more", {}, "Load more")), 1)]),
+					_: 1
+				}, 8, ["disabled"])])) : u("", !0)], 8, j)], 10, k),
+				f("section", {
+					"data-slot": "helpdesk-ticket",
+					"aria-label": S(J).ticket ? `${S(J).ticket.reference} ${S(J).ticket.subject}` : S(G)("helpdesk.conversation", {}, "Conversation"),
+					class: g(S(n)("flex min-h-0 min-w-0 flex-col", S(J).selected === null && "max-md:hidden"))
+				}, [S(J).selected === null ? (_(), d("div", ge, [f("p", _e, b(S(G)("helpdesk.select", {}, "Select a ticket")), 1), f("p", null, b(S(G)("helpdesk.select_description", {}, "Pick a ticket on the list to read and answer it.")), 1)])) : S(J).ticket === null ? (_(), d("div", ve, [f("span", ye, b(S(G)("helpdesk.loading", {}, "Loading…")), 1), S(J).ticketError ? (_(), d("p", be, b(S(G)("helpdesk.load_failed", {}, "The ticket could not be loaded.")), 1)) : (_(), d(c, { key: 1 }, [
+					m(o, { class: "h-6 w-2/3" }),
+					m(o, { class: "h-24" }),
+					m(o, { class: "h-24" })
+				], 64))])) : (_(), l(se, {
+					key: 2,
+					ref_key: "pane",
+					ref: X,
+					ticket: S(J).ticket,
+					controller: S(q),
+					token: S(W).token,
+					"action-component": U.schema.actionComponent
+				}, null, 8, [
+					"ticket",
+					"controller",
+					"token",
+					"action-component"
+				]))], 10, he),
+				f("div", xe, b(S(J).announcement), 1)
+			]),
+			_: 1
+		}));
+	}
+});
+//#endregion
+export { U as default };
+
+//# sourceMappingURL=HelpdeskInboxView.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/helpdesk/HelpdeskInboxView.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpdeskInboxView.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Card","_withCtx","_createElementVNode","_unref","_normalizeClass","_createElementBlock","_Fragment","_renderList","_createVNode","Icon","_toDisplayString","_createCommentVNode","Input","Spinner","_createTextVNode","HelpdeskBadge","Button","Skeleton","HelpdeskTicketPane","Icon_default","Button_default","Spinner_default","Input_default","Skeleton_default","Card_default","HelpdeskBadge_default","HelpdeskTicketPane_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16","_hoisted_17","_hoisted_18","_hoisted_19","_hoisted_20","_hoisted_21","_hoisted_22","_hoisted_23","_hoisted_24","_hoisted_25","_hoisted_26","_hoisted_27","HelpdeskInboxView_vue_vue_type_script_setup_true_lang_default","props","__props","runner","useActionRunner","page","usePageActionContext","t","useT","formatter","useFormatter","controller","HelpdeskInboxController","toRaw","state","useStore","search","ref","pane","list","stop","stopShortcuts","schema","searchElement","value","onMounted","key","onBeforeUnmount","openBlock","createBlock","withCtx","createElementVNode","unref","normalizeClass","cn","createElementBlock","Fragment","renderList","view","createVNode","toDisplayString","colorClass","badgeColorClasses","createCommentVNode","SearchIcon","_cache","$event","item","LockIcon","createTextVNode"],"sources":["../../../src/components/helpdesk/HelpdeskInboxView.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HelpdeskInboxSchema } from '@alfakit/core'\nimport { HelpdeskInboxController } from '@alfakit/core'\nimport { LockIcon, SearchIcon } from '@lucide/vue'\nimport { onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { useActionRunner, useFormatter, useT } from '../../context'\nimport { badgeColorClasses, colorClass } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport Button from '../ui/Button.vue'\nimport Card from '../ui/Card.vue'\nimport Input from '../ui/Input.vue'\nimport Skeleton from '../ui/Skeleton.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport HelpdeskBadge from './HelpdeskBadge.vue'\nimport HelpdeskTicketPane from './HelpdeskTicketPane.vue'\n\nconst props = defineProps<{ schema: HelpdeskInboxSchema }>()\n\nconst runner = useActionRunner()\nconst page = usePageActionContext()\nconst t = useT()\nconst formatter = useFormatter()\nconst controller = new HelpdeskInboxController(toRaw(props.schema), {\n  runner,\n  token: page.token,\n  t,\n})\nconst state = useStore(controller.store)\nconst search = ref<{ $el: HTMLInputElement } | HTMLInputElement | null>(null)\nconst pane = ref<InstanceType<typeof HelpdeskTicketPane> | null>(null)\nconst list = ref<HTMLUListElement | null>(null)\nlet stop: (() => void) | null = null\nlet stopShortcuts: (() => void) | null = null\n\nwatch(\n  () => props.schema,\n  (schema) => controller.setSchema(toRaw(schema)),\n)\n\nconst searchElement = (): HTMLInputElement | null => {\n  const value = search.value\n\n  return value instanceof HTMLInputElement ? value : (value?.$el ?? null)\n}\n\nonMounted(() => {\n  stop = controller.start()\n  stopShortcuts = controller.registerShortcuts({\n    focusComposer: () => requestAnimationFrame(() => pane.value?.focusComposer()),\n    focusSearch: () => searchElement()?.focus(),\n    focusTicket: (key) =>\n      requestAnimationFrame(() =>\n        list.value?.querySelector<HTMLElement>(`[data-ticket=\"${CSS.escape(key)}\"]`)?.focus(),\n      ),\n  })\n})\n\nonBeforeUnmount(() => {\n  stop?.()\n  stopShortcuts?.()\n})\n</script>\n\n<template>\n  <Card\n    data-slot=\"helpdesk-inbox\"\n    class=\"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]\"\n  >\n    <nav\n      data-slot=\"helpdesk-views\"\n      :aria-label=\"t('helpdesk.views', {}, 'Views')\"\n      :class=\"\n        cn(\n          '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',\n          state.selected !== null && 'max-md:hidden',\n        )\n      \"\n    >\n      <button\n        v-for=\"view in state.list.views\"\n        :key=\"view.key\"\n        type=\"button\"\n        :aria-current=\"view.key === state.view ? 'page' : undefined\"\n        class=\"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\"\n        @click=\"controller.setView(view.key)\"\n      >\n        <Icon :name=\"view.icon\" class=\"size-4 shrink-0\" />\n        <span class=\"flex-1 truncate\">{{ view.label }}</span>\n        <span\n          v-if=\"view.count !== undefined && view.count > 0\"\n          :class=\"\n            cn(\n              'rounded-full px-1.5 text-xs tabular-nums',\n              view.color ? colorClass(badgeColorClasses, view.color) : 'bg-muted-foreground/10',\n            )\n          \"\n          >{{ formatter.number(view.count) }}</span\n        >\n      </button>\n    </nav>\n\n    <section\n      data-slot=\"helpdesk-list\"\n      :aria-label=\"t('helpdesk.tickets', {}, 'Tickets')\"\n      :class=\"cn('flex min-h-0 flex-col border-e', state.selected !== null && 'max-md:hidden')\"\n    >\n      <div class=\"relative border-b p-2\">\n        <SearchIcon\n          aria-hidden=\"true\"\n          class=\"text-muted-foreground pointer-events-none absolute start-4 top-1/2 size-4 -translate-y-1/2\"\n        />\n        <Input\n          ref=\"search\"\n          type=\"search\"\n          :model-value=\"state.search\"\n          :placeholder=\"\n            t('helpdesk.search_placeholder', {}, 'Search by subject, requester or #number…')\n          \"\n          :aria-label=\"t('helpdesk.search', {}, 'Search tickets')\"\n          class=\"ps-8\"\n          @update:model-value=\"controller.setSearch($event)\"\n        />\n      </div>\n      <div class=\"min-h-0 flex-1 overflow-y-auto\" :aria-busy=\"state.loadingList || undefined\">\n        <div\n          v-if=\"state.list.tickets.length === 0\"\n          class=\"text-muted-foreground flex flex-col items-center gap-1 p-8 text-center text-sm\"\n        >\n          <Spinner v-if=\"state.loadingList\" />\n          <template v-else>\n            <p class=\"text-foreground font-medium\">\n              {{ t('helpdesk.empty', {}, 'No tickets here') }}\n            </p>\n            <p>\n              {{\n                t('helpdesk.empty_description', {}, 'Nothing needs your attention in this view.')\n              }}\n            </p>\n          </template>\n        </div>\n        <ul v-else ref=\"list\" class=\"divide-y\">\n          <li v-for=\"item in state.list.tickets\" :key=\"item.key\">\n            <button\n              type=\"button\"\n              :data-ticket=\"item.key\"\n              :aria-current=\"item.key === state.selected ? 'true' : undefined\"\n              class=\"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]\"\n              @click=\"controller.select(item.key)\"\n            >\n              <span class=\"flex items-center gap-2\">\n                <span\n                  v-if=\"item.awaitingReply\"\n                  class=\"bg-primary size-2 shrink-0 rounded-full\"\n                  aria-hidden=\"true\"\n                />\n                <span v-if=\"item.awaitingReply\" class=\"sr-only\">{{\n                  t('helpdesk.awaiting_reply', {}, 'Awaiting your reply')\n                }}</span>\n                <span class=\"text-muted-foreground text-xs tabular-nums\">{{ item.reference }}</span>\n                <span class=\"truncate text-sm font-medium\">{{ item.subject }}</span>\n                <time\n                  v-if=\"item.lastActivityAt\"\n                  :datetime=\"item.lastActivityAt\"\n                  class=\"text-muted-foreground ms-auto shrink-0 text-xs\"\n                  >{{ formatter.relative(item.lastActivityAt) }}</time\n                >\n              </span>\n              <span class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                <Icon :name=\"item.channelIcon\" class=\"size-3 shrink-0\" />\n                <span class=\"truncate\">{{ item.requester }}</span>\n                <span v-if=\"item.assignee\" class=\"truncate\">· {{ item.assignee }}</span>\n              </span>\n              <span\n                v-if=\"item.excerpt\"\n                :class=\"\n                  cn('text-muted-foreground line-clamp-2 text-xs', item.excerptInternal && 'italic')\n                \"\n              >\n                <LockIcon\n                  v-if=\"item.excerptInternal\"\n                  :aria-label=\"t('helpdesk.internal', {}, 'Internal note')\"\n                  class=\"me-1 inline size-3\"\n                />{{ item.excerpt }}\n              </span>\n              <span class=\"flex flex-wrap gap-1\">\n                <HelpdeskBadge :badge=\"item.status\" />\n                <HelpdeskBadge v-if=\"item.priority.value !== 'normal'\" :badge=\"item.priority\" />\n                <HelpdeskBadge :sla=\"item.sla\" :formatter=\"formatter\" />\n              </span>\n            </button>\n          </li>\n        </ul>\n        <div v-if=\"state.list.hasMore\" class=\"p-2\">\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            class=\"w-full\"\n            :disabled=\"state.loadingList\"\n            @click=\"controller.loadMore()\"\n          >\n            <Spinner v-if=\"state.loadingList\" />\n            {{ t('helpdesk.load_more', {}, 'Load more') }}\n          </Button>\n        </div>\n      </div>\n    </section>\n\n    <section\n      data-slot=\"helpdesk-ticket\"\n      :aria-label=\"\n        state.ticket\n          ? `${state.ticket.reference} ${state.ticket.subject}`\n          : t('helpdesk.conversation', {}, 'Conversation')\n      \"\n      :class=\"cn('flex min-h-0 min-w-0 flex-col', state.selected === null && 'max-md:hidden')\"\n    >\n      <div\n        v-if=\"state.selected === null\"\n        class=\"text-muted-foreground m-auto flex max-w-xs flex-col items-center gap-1 p-8 text-center text-sm\"\n      >\n        <p class=\"text-foreground font-medium\">{{ t('helpdesk.select', {}, 'Select a ticket') }}</p>\n        <p>\n          {{\n            t('helpdesk.select_description', {}, 'Pick a ticket on the list to read and answer it.')\n          }}\n        </p>\n      </div>\n      <div v-else-if=\"state.ticket === null\" class=\"flex flex-col gap-3 p-4\" aria-busy=\"true\">\n        <span class=\"sr-only\">{{ t('helpdesk.loading', {}, 'Loading…') }}</span>\n        <p v-if=\"state.ticketError\" role=\"alert\" class=\"text-destructive text-sm\">\n          {{ t('helpdesk.load_failed', {}, 'The ticket could not be loaded.') }}\n        </p>\n        <template v-else>\n          <Skeleton class=\"h-6 w-2/3\" />\n          <Skeleton class=\"h-24\" />\n          <Skeleton class=\"h-24\" />\n        </template>\n      </div>\n      <HelpdeskTicketPane\n        v-else\n        ref=\"pane\"\n        :ticket=\"state.ticket\"\n        :controller=\"controller\"\n        :token=\"page.token\"\n        :action-component=\"props.schema.actionComponent\"\n      />\n    </section>\n    <div aria-live=\"polite\" class=\"sr-only\">{{ state.announcement }}</div>\n  </Card>\n</template>\n"],"mappings":"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"}

package/dist/components/helpdesk/HelpdeskTicketPane.js

@@ -0,0 +1,7 @@
+import e from "./HelpdeskTicketPane.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/helpdesk/HelpdeskTicketPane.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=HelpdeskTicketPane.js.map

package/dist/components/helpdesk/HelpdeskTicketPane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpdeskTicketPane.js","names":["_sfc_main","HelpdeskTicketPane_vue_vue_type_script_setup_true_lang_default","HelpdeskTicketPane_default"],"sources":["../../../src/components/helpdesk/HelpdeskTicketPane.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HelpdeskInboxController, HelpdeskTicket } from '@alfakit/core'\nimport { helpdeskFileSize, presenceInitials } from '@alfakit/core'\nimport { ArrowLeftIcon, ExternalLinkIcon, LockIcon, PaperclipIcon, SendIcon } from '@lucide/vue'\nimport { nextTick, onMounted, ref, useId, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { useFormatter, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport ActionList from '../actions/ActionList.vue'\nimport RecordPresence from '../realtime/RecordPresence.vue'\nimport Avatar from '../ui/Avatar.vue'\nimport AvatarFallback from '../ui/AvatarFallback.vue'\nimport AvatarImage from '../ui/AvatarImage.vue'\nimport Badge from '../ui/Badge.vue'\nimport Button from '../ui/Button.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport Textarea from '../ui/Textarea.vue'\nimport HelpdeskBadge from './HelpdeskBadge.vue'\n\nconst props = defineProps<{\n  ticket: HelpdeskTicket\n  controller: HelpdeskInboxController\n  token: string\n  actionComponent: string\n}>()\n\nconst t = useT()\nconst formatter = useFormatter()\nconst state = useStore(props.controller.store)\nconst messages = ref<HTMLOListElement | null>(null)\nconst composer = ref<{ $el: HTMLTextAreaElement } | null>(null)\nconst composerId = useId()\nconst hintId = useId()\n\nfunction focusComposer(): void {\n  composer.value?.$el.focus()\n}\n\ndefineExpose({ focusComposer })\n\nfunction scrollToEnd(): void {\n  void nextTick(() => {\n    if (messages.value) messages.value.scrollTop = messages.value.scrollHeight\n  })\n}\n\nonMounted(scrollToEnd)\nwatch(() => [props.ticket.key, props.ticket.messages.length], scrollToEnd)\n\nfunction onKeyDown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) {\n    event.preventDefault()\n    void props.controller.send()\n  }\n\n  if (event.key === 'Escape') {\n    ;(event.currentTarget as HTMLElement | null)?.blur()\n  }\n}\n\nconst fileSize = (bytes: number | null | undefined) =>\n  helpdeskFileSize(bytes, (value) => formatter.value.number(value))\n</script>\n\n<template>\n  <!-- eslint-disable vue/no-v-html -- message bodies are sanitised on the server (Html::sanitize) -->\n  <header class=\"flex flex-col gap-2 border-b p-3\">\n    <div class=\"flex items-start gap-2\">\n      <Button\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"md:hidden\"\n        :aria-label=\"t('helpdesk.back', {}, 'Back to the list')\"\n        @click=\"props.controller.select(null)\"\n      >\n        <ArrowLeftIcon class=\"rtl:rotate-180\" />\n      </Button>\n      <div class=\"min-w-0 flex-1\">\n        <h2 class=\"truncate text-base font-semibold\">\n          <span class=\"text-muted-foreground me-1.5 font-normal tabular-nums\">{{\n            props.ticket.reference\n          }}</span\n          >{{ props.ticket.subject }}\n        </h2>\n        <p class=\"text-muted-foreground truncate text-xs\">\n          {{ props.ticket.requester.name\n          }}<template v-if=\"props.ticket.requester.email\">\n            · {{ props.ticket.requester.email }}</template\n          >\n        </p>\n      </div>\n      <RecordPresence v-if=\"props.ticket.presence\" :presence=\"props.ticket.presence\" />\n      <Button v-if=\"props.ticket.url\" as-child variant=\"ghost\" size=\"icon-sm\">\n        <a\n          :href=\"props.ticket.url\"\n          :aria-label=\"t('helpdesk.open_page', {}, 'Open the ticket page')\"\n          :title=\"t('helpdesk.open_page', {}, 'Open the ticket page')\"\n        >\n          <ExternalLinkIcon class=\"rtl:-scale-x-100\" />\n        </a>\n      </Button>\n    </div>\n    <dl class=\"text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-xs\">\n      <div class=\"flex items-center gap-1\">\n        <dt class=\"sr-only\">{{ t('helpdesk.status', {}, 'Status') }}</dt>\n        <dd><HelpdeskBadge :badge=\"props.ticket.status\" /></dd>\n      </div>\n      <div class=\"flex items-center gap-1\">\n        <dt class=\"sr-only\">{{ t('helpdesk.priority', {}, 'Priority') }}</dt>\n        <dd><HelpdeskBadge :badge=\"props.ticket.priority\" /></dd>\n      </div>\n      <div class=\"flex items-center gap-1\">\n        <dt>{{ t('helpdesk.assignee', {}, 'Assignee') }}:</dt>\n        <dd class=\"text-foreground\">\n          {{ props.ticket.assignee?.name ?? t('helpdesk.unassigned', {}, 'Unassigned') }}\n        </dd>\n      </div>\n      <div v-if=\"props.ticket.group\" class=\"flex items-center gap-1\">\n        <dt>{{ t('helpdesk.group', {}, 'Group') }}:</dt>\n        <dd class=\"text-foreground\">{{ props.ticket.group.name }}</dd>\n      </div>\n      <div v-if=\"props.ticket.sla.firstResponse\" class=\"flex items-center gap-1\">\n        <dt>{{ t('helpdesk.first_response', {}, 'First response') }}:</dt>\n        <dd><HelpdeskBadge :sla=\"props.ticket.sla.firstResponse\" :formatter=\"formatter\" /></dd>\n      </div>\n      <div v-if=\"props.ticket.sla.resolution\" class=\"flex items-center gap-1\">\n        <dt>{{ t('helpdesk.resolution', {}, 'Resolution') }}:</dt>\n        <dd><HelpdeskBadge :sla=\"props.ticket.sla.resolution\" :formatter=\"formatter\" /></dd>\n      </div>\n      <div v-if=\"props.ticket.satisfaction?.rating !== undefined\" class=\"flex items-center gap-1\">\n        <dt>{{ t('helpdesk.satisfaction', {}, 'Satisfaction') }}:</dt>\n        <dd class=\"text-foreground\">\n          {{ t('helpdesk.rating', { rating: props.ticket.satisfaction.rating }, ':rating / 5') }}\n        </dd>\n      </div>\n      <div v-if=\"props.ticket.tags?.length\" class=\"flex items-center gap-1\">\n        <dt class=\"sr-only\">{{ t('helpdesk.tags', {}, 'Tags') }}</dt>\n        <dd class=\"flex flex-wrap gap-1\">\n          <Badge v-for=\"tag in props.ticket.tags\" :key=\"tag\" variant=\"secondary\">{{ tag }}</Badge>\n        </dd>\n      </div>\n    </dl>\n    <div\n      v-if=\"props.ticket.actions.length > 0\"\n      role=\"group\"\n      :aria-label=\"t('helpdesk.actions', {}, 'Ticket actions')\"\n    >\n      <ActionList\n        :actions=\"props.ticket.actions\"\n        :context=\"{\n          token: props.token,\n          component: props.actionComponent,\n          record: props.ticket.key,\n        }\"\n        size=\"xs\"\n      />\n    </div>\n  </header>\n\n  <ol\n    ref=\"messages\"\n    :aria-label=\"t('helpdesk.conversation', {}, 'Conversation')\"\n    class=\"flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-3\"\n  >\n    <template v-for=\"message in props.ticket.messages\" :key=\"message.key\">\n      <li\n        v-if=\"message.kind === 'event'\"\n        data-slot=\"helpdesk-message\"\n        data-kind=\"event\"\n        class=\"text-muted-foreground flex items-center gap-2 self-center text-xs\"\n      >\n        <span class=\"sr-only\">{{ t('helpdesk.activity', {}, 'Activity') }}:</span>\n        <span class=\"[&_p]:inline\" v-html=\"message.html\" />\n        <time v-if=\"message.createdAt\" :datetime=\"message.createdAt\"\n          >· {{ formatter.relative(message.createdAt) }}</time\n        >\n      </li>\n      <li\n        v-else\n        data-slot=\"helpdesk-message\"\n        :data-kind=\"message.kind\"\n        :data-from=\"message.fromRequester ? 'requester' : 'agent'\"\n        :class=\"\n          cn(\n            'flex max-w-[48rem] gap-2.5',\n            !message.fromRequester && 'flex-row-reverse self-end text-start',\n          )\n        \"\n      >\n        <Avatar class=\"size-8 shrink-0\">\n          <AvatarImage v-if=\"message.author.avatar\" :src=\"message.author.avatar\" alt=\"\" />\n          <AvatarFallback aria-hidden=\"true\">{{\n            presenceInitials(message.author.name)\n          }}</AvatarFallback>\n        </Avatar>\n        <article\n          :class=\"\n            cn(\n              'min-w-0 rounded-lg border px-3 py-2',\n              message.kind === 'note'\n                ? 'border-warning/40 bg-warning/10'\n                : message.fromRequester\n                  ? 'bg-muted/50'\n                  : 'bg-primary/5 border-primary/20',\n            )\n          \"\n        >\n          <header class=\"mb-1 flex flex-wrap items-center gap-x-2 text-xs\">\n            <span class=\"font-medium\">{{ message.author.name }}</span>\n            <span\n              v-if=\"message.kind === 'note'\"\n              class=\"text-warning inline-flex items-center gap-1 font-medium\"\n            >\n              <LockIcon class=\"size-3\" aria-hidden=\"true\" />\n              {{ t('helpdesk.internal', {}, 'Internal note') }}\n            </span>\n            <time\n              v-if=\"message.createdAt\"\n              :datetime=\"message.createdAt\"\n              :title=\"formatter.dateTime(message.createdAt)\"\n              class=\"text-muted-foreground\"\n              >{{ formatter.relative(message.createdAt) }}</time\n            >\n          </header>\n          <div\n            class=\"prose prose-sm dark:prose-invert max-w-none break-words\"\n            v-html=\"message.html\"\n          />\n          <ul\n            v-if=\"message.attachments?.length\"\n            :aria-label=\"t('helpdesk.attachments', {}, 'Attachments')\"\n            class=\"mt-2 flex flex-wrap gap-1.5\"\n          >\n            <li v-for=\"(file, index) in message.attachments\" :key=\"index\">\n              <a\n                v-if=\"file.url\"\n                :href=\"file.url\"\n                target=\"_blank\"\n                rel=\"noopener\"\n                class=\"hover:bg-muted inline-flex items-center gap-1 rounded border px-2 py-1 text-xs\"\n              >\n                <PaperclipIcon class=\"size-3\" aria-hidden=\"true\" />\n                {{ file.name }}\n                <span v-if=\"fileSize(file.size)\" class=\"text-muted-foreground\"\n                  >({{ fileSize(file.size) }})</span\n                >\n              </a>\n              <span\n                v-else\n                class=\"inline-flex items-center gap-1 rounded border px-2 py-1 text-xs\"\n                >{{ file.name }}</span\n              >\n            </li>\n          </ul>\n        </article>\n      </li>\n    </template>\n  </ol>\n\n  <p v-if=\"props.ticket.merged\" class=\"text-muted-foreground border-t p-3 text-sm\">\n    {{ t('helpdesk.merged', {}, 'This ticket was merged into another one.') }}\n  </p>\n\n  <form\n    v-if=\"props.ticket.canReply\"\n    data-slot=\"helpdesk-composer\"\n    :data-mode=\"state.composer.mode\"\n    class=\"data-[mode=note]:bg-warning/5 flex flex-col gap-2 border-t p-3\"\n    @submit.prevent=\"props.controller.send()\"\n  >\n    <div class=\"flex items-center justify-between gap-2\">\n      <div\n        role=\"radiogroup\"\n        :aria-label=\"t('helpdesk.mode', {}, 'Message type')\"\n        class=\"bg-muted inline-flex rounded-md p-0.5\"\n      >\n        <button\n          v-for=\"mode in ['reply', 'note'] as const\"\n          :key=\"mode\"\n          type=\"button\"\n          role=\"radio\"\n          :aria-checked=\"state.composer.mode === mode\"\n          class=\"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\"\n          @click=\"props.controller.setMode(mode)\"\n        >\n          {{\n            mode === 'reply'\n              ? t('helpdesk.mode_reply', {}, 'Reply')\n              : t('helpdesk.mode_note', {}, 'Internal note')\n          }}\n        </button>\n      </div>\n      <p\n        v-if=\"state.requesterTyping\"\n        class=\"text-muted-foreground animate-pulse text-xs\"\n        role=\"status\"\n      >\n        {{\n          t('helpdesk.requester_typing', { name: props.ticket.requester.name }, ':name is typing…')\n        }}\n      </p>\n    </div>\n    <label :for=\"composerId\" class=\"sr-only\">\n      {{\n        state.composer.mode === 'note'\n          ? t('helpdesk.mode_note', {}, 'Internal note')\n          : t('helpdesk.mode_reply', {}, 'Reply')\n      }}\n    </label>\n    <Textarea\n      :id=\"composerId\"\n      ref=\"composer\"\n      rows=\"3\"\n      :model-value=\"state.composer.text\"\n      :aria-describedby=\"hintId\"\n      :aria-invalid=\"state.composer.error ? true : undefined\"\n      :placeholder=\"\n        state.composer.mode === 'note'\n          ? t('helpdesk.note_placeholder', {}, 'Add a note only agents can see…')\n          : t(\n              'helpdesk.reply_placeholder',\n              { name: props.ticket.requester.name },\n              'Reply to :name…',\n            )\n      \"\n      class=\"max-h-48 min-h-20 resize-y\"\n      @update:model-value=\"props.controller.setText($event)\"\n      @keydown=\"onKeyDown\"\n    />\n    <p v-if=\"state.composer.error\" role=\"alert\" class=\"text-destructive text-xs\">\n      {{ state.composer.error }}\n    </p>\n    <div class=\"flex items-center justify-between gap-2\">\n      <p :id=\"hintId\" class=\"text-muted-foreground text-xs max-sm:hidden\">\n        {{ t('helpdesk.send_hint', {}, 'Enter to send, Shift+Enter for a new line') }}\n      </p>\n      <Button\n        type=\"submit\"\n        size=\"sm\"\n        class=\"ms-auto\"\n        :variant=\"state.composer.mode === 'note' ? 'secondary' : 'default'\"\n        :disabled=\"state.composer.sending || state.composer.text.trim() === ''\"\n      >\n        <Spinner v-if=\"state.composer.sending\" />\n        <SendIcon v-else class=\"rtl:-scale-x-100\" />\n        {{\n          state.composer.sending\n            ? t('helpdesk.sending', {}, 'Sending…')\n            : state.composer.mode === 'note'\n              ? t('helpdesk.add_note', {}, 'Add note')\n              : t('helpdesk.send', {}, 'Send')\n        }}\n      </Button>\n    </div>\n  </form>\n</template>\n"],"mappings":""}

package/dist/components/helpdesk/HelpdeskTicketPane.vue.d.ts

@@ -0,0 +1,13 @@
+import type { HelpdeskInboxController, HelpdeskTicket } from '@alfakit/core';
+type __VLS_Props = {
+    ticket: HelpdeskTicket;
+    controller: HelpdeskInboxController;
+    token: string;
+    actionComponent: string;
+};
+declare function focusComposer(): void;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    focusComposer: typeof focusComposer;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=HelpdeskTicketPane.vue.d.ts.map

package/dist/components/helpdesk/HelpdeskTicketPane.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpdeskTicketPane.vue.d.ts","sourceRoot":"","sources":["../../../src/components/helpdesk/HelpdeskTicketPane.vue"],"names":[],"mappings":"AAsWA,OAAO,KAAK,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAkB5E,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,cAAc,CAAA;IACtB,UAAU,EAAE,uBAAuB,CAAA;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,eAAe,EAAE,MAAM,CAAA;CACxB,CAAC;AAWF,iBAAS,aAAa,IAAI,IAAI,CAE7B;;;;AA41BD,wBAOG"}