@gxp-dev/mod-ui 2.0.0 → 2.0.1

package/dist/components/compositions/elements/code/BuildStatus.vue2.js

@@ -1,249 +1,5 @@
-import { defineComponent as O, ref as y, watch as X, onMounted as q, onBeforeUnmount as G, computed as v, openBlock as n, createBlock as h, unref as i, normalizeClass as N, withCtx as m, createVNode as u, createElementVNode as c, toDisplayString as l, resolveDynamicComponent as V, createElementBlock as o, createCommentVNode as d, createTextVNode as M, Fragment as D, renderList as K } from "vue";
-import { Clock as U, Ban as P, XCircle as Q, CheckCircle2 as W, Loader2 as Y, Activity as Z, AlertTriangle as tt, ChevronDown as et, ChevronRight as st } from "lucide-vue-next";
-import "../../../ui/badge/index.js";
-import "../../../ui/button/index.js";
-import "../../../ui/card/index.js";
-import { cn as j } from "../../../../lib/utils.js";
-import at from "../../../ui/card/Card.vue.js";
-import it from "../../../ui/card/CardHeader.vue.js";
-import nt from "../../../ui/card/CardTitle.vue.js";
-import rt from "../../../ui/badge/Badge.vue.js";
-import lt from "../../../ui/card/CardContent.vue.js";
-import ot from "../../../ui/button/Button.vue.js";
-const ut = { class: "flex items-center justify-between gap-2" }, ct = { class: "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground" }, dt = {
-  key: 0,
-  class: "font-mono",
-  "data-testid": "build-status-sha"
-}, mt = {
-  key: 1,
-  class: "truncate",
-  "data-testid": "build-status-commit-message"
-}, gt = {
-  key: 2,
-  "data-testid": "build-status-triggered-by"
-}, ft = {
-  key: 3,
-  class: "flex items-center gap-1",
-  "data-testid": "build-status-duration"
-}, vt = {
-  key: 0,
-  class: "text-xs text-destructive",
-  role: "alert",
-  "data-testid": "build-status-parse-error"
-}, pt = {
-  key: 0,
-  class: "max-h-80 overflow-auto rounded-md bg-muted p-3 font-mono text-xs leading-snug",
-  "data-testid": "build-status-logs"
-}, $t = /* @__PURE__ */ O({
-  __name: "BuildStatus",
-  props: {
-    initial: {},
-    eventStream: {},
-    socket: {},
-    onUnsubscribe: {},
-    showLogs: { type: Boolean, default: !0 },
-    label: { default: "Build Status" },
-    name: {},
-    classList: {}
-  },
-  setup(R, { expose: T }) {
-    var S, k, w, C, $, z, L, E;
-    const a = R, s = y({
-      status: ((S = a.initial) == null ? void 0 : S.status) ?? "pending",
-      startedAt: (k = a.initial) == null ? void 0 : k.startedAt,
-      finishedAt: (w = a.initial) == null ? void 0 : w.finishedAt,
-      durationMs: (C = a.initial) == null ? void 0 : C.durationMs,
-      commitSha: ($ = a.initial) == null ? void 0 : $.commitSha,
-      commitMessage: (z = a.initial) == null ? void 0 : z.commitMessage,
-      triggeredBy: (L = a.initial) == null ? void 0 : L.triggeredBy,
-      logs: (E = a.initial) != null && E.logs ? [...a.initial.logs] : []
-    }), g = y(!0), p = y(null);
-    X(
-      () => a.initial,
-      (t) => {
-        t && (s.value = {
-          status: t.status,
-          startedAt: t.startedAt,
-          finishedAt: t.finishedAt,
-          durationMs: t.durationMs,
-          commitSha: t.commitSha,
-          commitMessage: t.commitMessage,
-          triggeredBy: t.triggeredBy,
-          logs: t.logs ? [...t.logs] : []
-        });
-      },
-      { deep: !0 }
-    );
-    function _(t) {
-      if (!t || typeof t != "object")
-        return;
-      const e = t;
-      s.value = {
-        status: e.status ?? s.value.status,
-        startedAt: e.startedAt ?? s.value.startedAt,
-        finishedAt: e.finishedAt ?? s.value.finishedAt,
-        durationMs: e.durationMs !== void 0 ? e.durationMs : s.value.durationMs,
-        commitSha: e.commitSha ?? s.value.commitSha,
-        commitMessage: e.commitMessage ?? s.value.commitMessage,
-        triggeredBy: e.triggeredBy ?? s.value.triggeredBy,
-        logs: Array.isArray(e.logs) ? e.logs : s.value.logs
-      };
-    }
-    function F(t) {
-      const e = t.data;
-      if (typeof e == "string")
-        try {
-          _(JSON.parse(e)), p.value = null;
-        } catch (r) {
-          p.value = r instanceof Error ? r.message : String(r);
-        }
-      else e && typeof e == "object" && _(e);
-    }
-    let f = null;
-    q(() => {
-      const t = a.eventStream ?? a.socket;
-      if (!t)
-        return;
-      const e = (r) => {
-        F(r);
-      };
-      t.addEventListener("message", e), f = { target: t, handler: e };
-    }), G(() => {
-      f && (f.target.removeEventListener("message", f.handler), f = null), a.onUnsubscribe && a.onUnsubscribe();
-    });
-    const H = v(() => {
-      switch (s.value.status) {
-        case "running":
-          return "info";
-        case "success":
-          return "success";
-        case "failed":
-          return "destructive";
-        case "cancelled":
-          return "warning";
-        case "pending":
-        default:
-          return "secondary";
-      }
-    }), I = v(() => {
-      switch (s.value.status) {
-        case "running":
-          return Y;
-        case "success":
-          return W;
-        case "failed":
-          return Q;
-        case "cancelled":
-          return P;
-        case "pending":
-        default:
-          return U;
-      }
-    });
-    function J(t) {
-      if (t === void 0 || Number.isNaN(t))
-        return "";
-      const e = Math.round(t / 1e3);
-      if (e < 60)
-        return `${e}s`;
-      const r = Math.floor(e / 60), b = e % 60;
-      return `${r}m ${b}s`;
-    }
-    const x = v(() => {
-      const t = s.value.commitSha;
-      return t ? t.length > 7 ? t.slice(0, 7) : t : "";
-    }), A = v(
-      () => J(s.value.durationMs)
-    ), B = v(() => s.value.status === "running");
-    return T({ applyEvent: _ }), (t, e) => (n(), h(i(at), {
-      class: N(i(j)(a.classList)),
-      "data-element-name": a.name ?? void 0,
-      "data-testid": "build-status"
-    }, {
-      default: m(() => [
-        u(i(it), { class: "flex flex-col gap-2 pb-3" }, {
-          default: m(() => [
-            c("div", ut, [
-              u(i(nt), { class: "flex items-center gap-2 text-base" }, {
-                default: m(() => [
-                  u(i(Z), { class: "size-5 text-muted-foreground" }),
-                  c("span", null, l(a.label), 1)
-                ]),
-                _: 1
-              }),
-              u(i(rt), {
-                variant: H.value,
-                size: "default",
-                class: "capitalize",
-                "data-testid": "build-status-badge"
-              }, {
-                default: m(() => [
-                  (n(), h(V(I.value), {
-                    class: N(
-                      i(j)(
-                        "size-3.5",
-                        B.value ? "animate-spin" : ""
-                      )
-                    ),
-                    "data-testid": B.value ? "build-status-spinner" : "build-status-icon"
-                  }, null, 8, ["class", "data-testid"])),
-                  c("span", null, l(s.value.status), 1)
-                ]),
-                _: 1
-              }, 8, ["variant"])
-            ]),
-            c("div", ct, [
-              x.value ? (n(), o("span", dt, l(x.value), 1)) : d("", !0),
-              s.value.commitMessage ? (n(), o("span", mt, l(s.value.commitMessage), 1)) : d("", !0),
-              s.value.triggeredBy ? (n(), o("span", gt, " by " + l(s.value.triggeredBy), 1)) : d("", !0),
-              A.value ? (n(), o("span", ft, [
-                u(i(U), { class: "size-3" }),
-                M(" " + l(A.value), 1)
-              ])) : d("", !0)
-            ]),
-            p.value ? (n(), o("p", vt, [
-              u(i(tt), { class: "inline size-3" }),
-              M(" " + l(p.value), 1)
-            ])) : d("", !0)
-          ]),
-          _: 1
-        }),
-        a.showLogs && s.value.logs && s.value.logs.length > 0 ? (n(), h(i(lt), {
-          key: 0,
-          class: "flex flex-col gap-2 pt-0"
-        }, {
-          default: m(() => [
-            u(i(ot), {
-              type: "button",
-              variant: "ghost",
-              size: "sm",
-              class: "w-fit -ml-2 text-xs",
-              "data-testid": "build-status-logs-toggle",
-              onClick: e[0] || (e[0] = (r) => g.value = !g.value)
-            }, {
-              default: m(() => [
-                (n(), h(V(g.value ? i(et) : i(st)), { class: "size-4" })),
-                c("span", null, l(g.value ? "Hide logs" : "Show logs") + " (" + l(s.value.logs.length) + ")", 1)
-              ]),
-              _: 1
-            }),
-            g.value ? (n(), o("pre", pt, [
-              c("code", null, [
-                (n(!0), o(D, null, K(s.value.logs, (r, b) => (n(), o(D, { key: b }, [
-                  M(l(r), 1),
-                  e[1] || (e[1] = c("br", null, null, -1))
-                ], 64))), 128))
-              ])
-            ])) : d("", !0)
-          ]),
-          _: 1
-        })) : d("", !0)
-      ]),
-      _: 1
-    }, 8, ["class", "data-element-name"]));
-  }
-});
+import f from "./BuildStatus.vue.js";
 export {
-  $t as default
+  f as default
 };
 //# sourceMappingURL=BuildStatus.vue2.js.map

package/dist/components/compositions/elements/code/BuildStatus.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"BuildStatus.vue2.js","sources":["../../../../../src/components/compositions/elements/code/BuildStatus.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven real-time build status composition. Subscribes to an\n * `EventSource` OR `WebSocket` (whichever is provided) and renders the\n * latest decoded `BuildStatusEvent`. The composition does NOT open or\n * close the underlying stream — the caller owns its lifecycle. The\n * optional `onUnsubscribe` callback fires on unmount for any extra\n * cleanup the caller wants.\n *\n *   <BuildStatus\n *     :initial=\"{ status: 'pending' }\"\n *     :event-stream=\"es\"\n *     :on-unsubscribe=\"() => es.close()\"\n *   />\n */\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from \"vue\"\nimport {\n  Activity,\n  AlertTriangle,\n  Ban,\n  CheckCircle2,\n  ChevronDown,\n  ChevronRight,\n  Clock,\n  Loader2,\n  XCircle,\n} from \"lucide-vue-next\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { cn } from \"@/lib/utils\"\n\nexport type BuildStatusValue =\n  | \"pending\"\n  | \"running\"\n  | \"success\"\n  | \"failed\"\n  | \"cancelled\"\n\nexport interface BuildStatusEvent {\n  status: BuildStatusValue\n  startedAt?: string | Date\n  finishedAt?: string | Date\n  durationMs?: number\n  commitSha?: string\n  commitMessage?: string\n  triggeredBy?: string\n  logs?: string[]\n}\n\ninterface MessageEventLike {\n  data?: unknown\n}\ninterface EventListenerTarget {\n  addEventListener: (type: string, listener: (e: MessageEventLike) => void) => void\n  removeEventListener: (\n    type: string,\n    listener: (e: MessageEventLike) => void,\n  ) => void\n}\n\nexport interface BuildStatusProps {\n  /** Initial status to show before the stream emits. */\n  initial?: BuildStatusEvent\n  /** Optional EventSource to subscribe to (`message` events). */\n  eventStream?: EventListenerTarget\n  /** Optional WebSocket to subscribe to (`message` events). */\n  socket?: EventListenerTarget\n  /** Cleanup callback fired on unmount. The composition does NOT close\n   *  the underlying stream itself — caller owns the lifecycle. */\n  onUnsubscribe?: () => void\n  /** When true, render `logs[]` as a collapsible monospace block. */\n  showLogs?: boolean\n  label?: string\n  name?: string | null\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<BuildStatusProps>(), {\n  showLogs: true,\n  label: \"Build Status\",\n})\n\nconst current = ref<BuildStatusEvent>({\n  status: props.initial?.status ?? \"pending\",\n  startedAt: props.initial?.startedAt,\n  finishedAt: props.initial?.finishedAt,\n  durationMs: props.initial?.durationMs,\n  commitSha: props.initial?.commitSha,\n  commitMessage: props.initial?.commitMessage,\n  triggeredBy: props.initial?.triggeredBy,\n  logs: props.initial?.logs ? [...props.initial.logs] : [],\n})\n\nconst logsExpanded = ref<boolean>(true)\nconst parseError = ref<string | null>(null)\n\nwatch(\n  () => props.initial,\n  (next) => {\n    if (!next) {\n      return\n    }\n    current.value = {\n      status: next.status,\n      startedAt: next.startedAt,\n      finishedAt: next.finishedAt,\n      durationMs: next.durationMs,\n      commitSha: next.commitSha,\n      commitMessage: next.commitMessage,\n      triggeredBy: next.triggeredBy,\n      logs: next.logs ? [...next.logs] : [],\n    }\n  },\n  { deep: true },\n)\n\nfunction applyEvent(payload: unknown): void {\n  if (!payload || typeof payload !== \"object\") {\n    return\n  }\n  const next = payload as Partial<BuildStatusEvent>\n  current.value = {\n    status: (next.status as BuildStatusValue) ?? current.value.status,\n    startedAt: next.startedAt ?? current.value.startedAt,\n    finishedAt: next.finishedAt ?? current.value.finishedAt,\n    durationMs:\n      next.durationMs !== undefined ? next.durationMs : current.value.durationMs,\n    commitSha: next.commitSha ?? current.value.commitSha,\n    commitMessage: next.commitMessage ?? current.value.commitMessage,\n    triggeredBy: next.triggeredBy ?? current.value.triggeredBy,\n    logs: Array.isArray(next.logs) ? next.logs : current.value.logs,\n  }\n}\n\nfunction handleMessage(e: MessageEventLike): void {\n  const raw = e.data\n  if (typeof raw === \"string\") {\n    try {\n      applyEvent(JSON.parse(raw))\n      parseError.value = null\n    } catch (err) {\n      parseError.value = err instanceof Error ? err.message : String(err)\n    }\n  } else if (raw && typeof raw === \"object\") {\n    applyEvent(raw)\n  }\n}\n\nlet attached: { target: EventListenerTarget; handler: (e: MessageEventLike) => void } | null = null\n\nonMounted(() => {\n  const target = props.eventStream ?? props.socket\n  if (!target) {\n    return\n  }\n  const handler = (e: MessageEventLike): void => {\n    handleMessage(e)\n  }\n  target.addEventListener(\"message\", handler)\n  attached = { target, handler }\n})\n\nonBeforeUnmount(() => {\n  if (attached) {\n    attached.target.removeEventListener(\"message\", attached.handler)\n    attached = null\n  }\n  if (props.onUnsubscribe) {\n    props.onUnsubscribe()\n  }\n})\n\n// -------- visual helpers ------------------------------------------------\n\nconst statusBadgeVariant = computed<\n  \"secondary\" | \"info\" | \"success\" | \"destructive\" | \"warning\"\n>(() => {\n  switch (current.value.status) {\n    case \"running\":\n      return \"info\"\n    case \"success\":\n      return \"success\"\n    case \"failed\":\n      return \"destructive\"\n    case \"cancelled\":\n      return \"warning\"\n    case \"pending\":\n    default:\n      return \"secondary\"\n  }\n})\n\nconst statusIcon = computed(() => {\n  switch (current.value.status) {\n    case \"running\":\n      return Loader2\n    case \"success\":\n      return CheckCircle2\n    case \"failed\":\n      return XCircle\n    case \"cancelled\":\n      return Ban\n    case \"pending\":\n    default:\n      return Clock\n  }\n})\n\nfunction formatDuration(value: number | undefined): string {\n  if (value === undefined || Number.isNaN(value)) {\n    return \"\"\n  }\n  const sec = Math.round(value / 1000)\n  if (sec < 60) {\n    return `${sec}s`\n  }\n  const m = Math.floor(sec / 60)\n  const s = sec % 60\n  return `${m}m ${s}s`\n}\n\nconst shortSha = computed<string>(() => {\n  const sha = current.value.commitSha\n  if (!sha) {\n    return \"\"\n  }\n  return sha.length > 7 ? sha.slice(0, 7) : sha\n})\n\nconst durationLabel = computed<string>(() =>\n  formatDuration(current.value.durationMs),\n)\n\nconst isRunning = computed<boolean>(() => current.value.status === \"running\")\n\ndefineExpose({ applyEvent })\n</script>\n\n<template>\n  <Card\n    :class=\"cn(props.classList)\"\n    :data-element-name=\"props.name ?? undefined\"\n    data-testid=\"build-status\"\n  >\n    <CardHeader class=\"flex flex-col gap-2 pb-3\">\n      <div class=\"flex items-center justify-between gap-2\">\n        <CardTitle class=\"flex items-center gap-2 text-base\">\n          <Activity class=\"size-5 text-muted-foreground\" />\n          <span>{{ props.label }}</span>\n        </CardTitle>\n        <Badge\n          :variant=\"statusBadgeVariant\"\n          size=\"default\"\n          class=\"capitalize\"\n          data-testid=\"build-status-badge\"\n        >\n          <component\n            :is=\"statusIcon\"\n            :class=\"\n              cn(\n                'size-3.5',\n                isRunning ? 'animate-spin' : '',\n              )\n            \"\n            :data-testid=\"\n              isRunning\n                ? 'build-status-spinner'\n                : 'build-status-icon'\n            \"\n          />\n          <span>{{ current.status }}</span>\n        </Badge>\n      </div>\n      <div\n        class=\"flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground\"\n      >\n        <span\n          v-if=\"shortSha\"\n          class=\"font-mono\"\n          data-testid=\"build-status-sha\"\n        >\n          {{ shortSha }}\n        </span>\n        <span\n          v-if=\"current.commitMessage\"\n          class=\"truncate\"\n          data-testid=\"build-status-commit-message\"\n        >\n          {{ current.commitMessage }}\n        </span>\n        <span\n          v-if=\"current.triggeredBy\"\n          data-testid=\"build-status-triggered-by\"\n        >\n          by {{ current.triggeredBy }}\n        </span>\n        <span\n          v-if=\"durationLabel\"\n          class=\"flex items-center gap-1\"\n          data-testid=\"build-status-duration\"\n        >\n          <Clock class=\"size-3\" />\n          {{ durationLabel }}\n        </span>\n      </div>\n      <p\n        v-if=\"parseError\"\n        class=\"text-xs text-destructive\"\n        role=\"alert\"\n        data-testid=\"build-status-parse-error\"\n      >\n        <AlertTriangle class=\"inline size-3\" />\n        {{ parseError }}\n      </p>\n    </CardHeader>\n    <CardContent\n      v-if=\"props.showLogs && current.logs && current.logs.length > 0\"\n      class=\"flex flex-col gap-2 pt-0\"\n    >\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        class=\"w-fit -ml-2 text-xs\"\n        data-testid=\"build-status-logs-toggle\"\n        @click=\"logsExpanded = !logsExpanded\"\n      >\n        <component\n          :is=\"logsExpanded ? ChevronDown : ChevronRight\"\n          class=\"size-4\"\n        />\n        <span>{{ logsExpanded ? \"Hide logs\" : \"Show logs\" }} ({{ current.logs.length }})</span>\n      </Button>\n      <pre\n        v-if=\"logsExpanded\"\n        class=\"max-h-80 overflow-auto rounded-md bg-muted p-3 font-mono text-xs leading-snug\"\n        data-testid=\"build-status-logs\"\n      ><code><template\n          v-for=\"(line, i) in current.logs\"\n          :key=\"i\"\n        >{{ line }}<br></template></code></pre>\n    </CardContent>\n  </Card>\n</template>\n"],"names":["props","__props","current","ref","_a","_b","_c","_d","_e","_f","_g","_h","logsExpanded","parseError","watch","next","applyEvent","payload","handleMessage","e","raw","err","attached","onMounted","target","handler","onBeforeUnmount","statusBadgeVariant","computed","statusIcon","Loader2","CheckCircle2","XCircle","Ban","Clock","formatDuration","value","sec","m","s","shortSha","sha","durationLabel","isRunning","__expose","_createBlock","_unref","Card","_normalizeClass","cn","_createVNode","CardHeader","_createElementVNode","_hoisted_1","CardTitle","Activity","_toDisplayString","Badge","_openBlock","_resolveDynamicComponent","_hoisted_2","_createElementBlock","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_createTextVNode","_hoisted_7","AlertTriangle","CardContent","Button","_cache","$event","ChevronDown","ChevronRight","_hoisted_8","_Fragment","line","i"],"mappings":"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"}
+{"version":3,"file":"BuildStatus.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/compositions/elements/code/ChatMessage.vue.d.ts

@@ -0,0 +1,39 @@
+export type ChatMessageAlign = "auto" | "start" | "end";
+export type ChatMessageVariant = "default" | "muted" | "accent" | "destructive";
+export interface ChatMessageAction {
+    id: string;
+    label: string;
+    icon?: string;
+}
+export interface ChatMessageProps {
+    message?: string;
+    role?: "user" | "assistant" | "system" | "tool" | string;
+    authorName?: string;
+    authorAvatarUrl?: string;
+    authorAvatarFallback?: string;
+    timestamp?: string | Date;
+    pending?: boolean;
+    error?: string;
+    actions?: ChatMessageAction[];
+    align?: ChatMessageAlign;
+    variant?: ChatMessageVariant;
+    allowHtml?: boolean;
+    classList?: string[] | string;
+}
+declare const _default: import('vue').DefineComponent<ChatMessageProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    action: (payload: {
+        id: string;
+    }) => any;
+}, string, import('vue').PublicProps, Readonly<ChatMessageProps> & Readonly<{
+    onAction?: ((payload: {
+        id: string;
+    }) => any) | undefined;
+}>, {
+    align: ChatMessageAlign;
+    actions: ChatMessageAction[];
+    role: "user" | "assistant" | "system" | "tool" | string;
+    pending: boolean;
+    allowHtml: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=ChatMessage.vue.d.ts.map

package/dist/components/compositions/elements/code/ChatMessage.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessage.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/elements/code/ChatMessage.vue"],"names":[],"mappings":"AAiZA,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAA;AACvD,MAAM,MAAM,kBAAkB,GAC1B,SAAS,GACT,OAAO,GACP,QAAQ,GACR,aAAa,CAAA;AAEjB,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;IACxD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC7B,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;CAC9B;;;YAY8B,MAAM;;;;YAAN,MAAM;;;WAhB3B,gBAAgB;aADd,iBAAiB,EAAE;UAPtB,MAAM,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM;aAK9C,OAAO;eAKL,OAAO;;AAidrB,wBASG"}

package/dist/components/compositions/elements/code/ChatMessage.vue.js

@@ -1,5 +1,270 @@
-import f from "./ChatMessage.vue2.js";
+import { defineComponent as R, computed as i, ref as S, watch as O, openBlock as a, createElementBlock as l, normalizeClass as f, unref as r, createBlock as c, withCtx as p, createCommentVNode as o, createVNode as C, createTextVNode as x, toDisplayString as u, createElementVNode as v, Fragment as P, renderList as q, resolveDynamicComponent as G } from "vue";
+import { cva as J } from "class-variance-authority";
+import "../../../ui/avatar/index.js";
+import "../../../ui/badge/index.js";
+import "../../../ui/button/index.js";
+import { cn as g } from "../../../../lib/utils.js";
+import z from "../../../ui/avatar/Avatar.vue.js";
+import T from "../../../ui/avatar/AvatarImage.vue.js";
+import U from "../../../ui/avatar/AvatarFallback.vue.js";
+import K from "../../../ui/badge/Badge.vue.js";
+import Q from "../../../ui/button/Button.vue.js";
+const W = ["data-role", "data-align", "data-variant"], X = {
+  key: 0,
+  class: "font-medium",
+  "data-testid": "chat-message-author"
+}, Y = {
+  key: 1,
+  class: "flex items-center gap-1 py-1",
+  "data-testid": "chat-message-pending",
+  "aria-label": "Typing"
+}, Z = ["innerHTML"], ee = {
+  key: 3,
+  class: "whitespace-pre-wrap leading-snug",
+  "data-testid": "chat-message-body"
+}, te = {
+  key: 0,
+  class: "text-xs text-destructive",
+  "data-testid": "chat-message-error"
+}, fe = /* @__PURE__ */ R({
+  __name: "ChatMessage",
+  props: {
+    message: {},
+    role: { default: "user" },
+    authorName: {},
+    authorAvatarUrl: {},
+    authorAvatarFallback: {},
+    timestamp: {},
+    pending: { type: Boolean, default: !1 },
+    error: {},
+    actions: { default: () => [] },
+    align: { default: "auto" },
+    variant: {},
+    allowHtml: { type: Boolean, default: !1 },
+    classList: {}
+  },
+  emits: ["action"],
+  setup(V, { emit: B }) {
+    const e = V, F = B, b = i(() => e.align === "start" || e.align === "end" ? e.align : e.role === "user" ? "end" : "start"), d = i(() => b.value === "end"), L = {
+      user: "accent",
+      assistant: "muted",
+      system: "default",
+      tool: "muted"
+    }, h = i(() => e.variant ? e.variant : L[e.role] ?? "default"), $ = J(
+      "max-w-[36rem] min-w-0 break-words rounded-2xl border px-3 py-2 text-sm shadow-sm",
+      {
+        variants: {
+          variant: {
+            default: "bg-card text-card-foreground border-border",
+            muted: "bg-muted text-foreground border-transparent",
+            accent: "bg-primary text-primary-foreground border-transparent",
+            destructive: "bg-destructive text-destructive-foreground border-transparent"
+          },
+          align: {
+            start: "rounded-tl-sm",
+            end: "rounded-tr-sm"
+          }
+        },
+        defaultVariants: {
+          variant: "default",
+          align: "start"
+        }
+      }
+    ), j = i(
+      () => $({
+        variant: h.value,
+        align: b.value
+      })
+    ), k = i(() => {
+      if (e.authorAvatarFallback)
+        return e.authorAvatarFallback;
+      const t = (e.authorName ?? e.role ?? "?").trim();
+      return t ? t.charAt(0).toUpperCase() : "?";
+    }), _ = i(() => {
+      const t = e.timestamp;
+      if (!t)
+        return "";
+      const s = t instanceof Date ? t : new Date(t);
+      if (Number.isNaN(s.getTime()))
+        return "";
+      try {
+        return new Intl.DateTimeFormat(void 0, {
+          hour: "numeric",
+          minute: "2-digit"
+        }).format(s);
+      } catch {
+        return s.toISOString();
+      }
+    }), D = i(() => {
+      const t = e.classList;
+      return t ? Array.isArray(t) ? t.join(" ") : t : "";
+    }), w = i(() => !!e.role && e.role !== "user"), y = S({});
+    function I(t) {
+      return t.replace(/[-_\s]+(.)?/g, (s, n) => n ? n.toUpperCase() : "").replace(/^(.)/, (s) => s.toUpperCase());
+    }
+    async function E(t) {
+      const s = t.filter((m) => m.icon).map((m) => m.icon);
+      if (s.length === 0)
+        return;
+      const A = await import("lucide-vue-next"), N = { ...y.value };
+      for (const m of s) {
+        const M = I(m);
+        N[m] = A[M] ?? null;
+      }
+      y.value = N;
+    }
+    O(
+      () => e.actions,
+      (t) => {
+        E(t ?? []);
+      },
+      { immediate: !0, deep: !0 }
+    );
+    function H(t) {
+      F("action", { id: t });
+    }
+    return (t, s) => (a(), l("div", {
+      class: f(
+        r(g)(
+          "flex w-full items-end gap-2",
+          d.value ? "justify-end" : "justify-start",
+          D.value
+        )
+      ),
+      "data-role": e.role,
+      "data-align": b.value,
+      "data-variant": h.value,
+      "data-testid": "chat-message"
+    }, [
+      d.value ? o("", !0) : (a(), c(r(z), {
+        key: 0,
+        size: "sm",
+        class: "mb-1",
+        "data-testid": "chat-message-avatar"
+      }, {
+        default: p(() => [
+          e.authorAvatarUrl ? (a(), c(r(T), {
+            key: 0,
+            src: e.authorAvatarUrl,
+            alt: e.authorName ?? e.role
+          }, null, 8, ["src", "alt"])) : o("", !0),
+          C(r(U), null, {
+            default: p(() => [
+              x(u(k.value), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })),
+      v("div", {
+        class: f(
+          r(g)(
+            "flex min-w-0 flex-col gap-1",
+            d.value ? "items-end" : "items-start"
+          )
+        )
+      }, [
+        v("div", {
+          class: f(j.value),
+          "data-testid": "chat-message-bubble"
+        }, [
+          e.authorName || w.value || _.value ? (a(), l("div", {
+            key: 0,
+            class: f(
+              r(g)(
+                "mb-1 flex w-full items-center gap-2 text-xs",
+                d.value ? "flex-row-reverse" : "flex-row"
+              )
+            )
+          }, [
+            e.authorName ? (a(), l("span", X, u(e.authorName), 1)) : o("", !0),
+            w.value ? (a(), c(r(K), {
+              key: 1,
+              variant: "outline",
+              size: "sm",
+              "data-testid": "chat-message-role-badge"
+            }, {
+              default: p(() => [
+                x(u(e.role), 1)
+              ]),
+              _: 1
+            })) : o("", !0),
+            _.value ? (a(), l("span", {
+              key: 2,
+              class: f(
+                r(g)(
+                  "text-[11px] opacity-70",
+                  h.value === "accent" || h.value === "destructive" ? "" : "text-muted-foreground",
+                  d.value ? "mr-auto" : "ml-auto"
+                )
+              ),
+              "data-testid": "chat-message-timestamp"
+            }, u(_.value), 3)) : o("", !0)
+          ], 2)) : o("", !0),
+          e.pending ? (a(), l("div", Y, [...s[0] || (s[0] = [
+            v("span", { class: "size-1.5 animate-bounce rounded-full bg-current opacity-60" }, null, -1),
+            v("span", { class: "size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:150ms]" }, null, -1),
+            v("span", { class: "size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:300ms]" }, null, -1)
+          ])])) : e.allowHtml && e.message ? (a(), l("div", {
+            key: 2,
+            class: "whitespace-pre-wrap leading-snug",
+            "data-testid": "chat-message-body",
+            innerHTML: e.message
+          }, null, 8, Z)) : e.message ? (a(), l("div", ee, u(e.message), 1)) : o("", !0)
+        ], 2),
+        e.error ? (a(), l("p", te, u(e.error), 1)) : o("", !0),
+        e.actions && e.actions.length > 0 ? (a(), l("div", {
+          key: 1,
+          class: f(
+            r(g)(
+              "flex flex-wrap gap-1",
+              d.value ? "justify-end" : "justify-start"
+            )
+          ),
+          "data-testid": "chat-message-actions"
+        }, [
+          (a(!0), l(P, null, q(e.actions, (n) => (a(), c(r(Q), {
+            key: n.id,
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            "data-action-id": n.id,
+            onClick: (A) => H(n.id)
+          }, {
+            default: p(() => [
+              n.icon && y.value[n.icon] ? (a(), c(G(n.icon ? y.value[n.icon] : null), { key: 0 })) : o("", !0),
+              v("span", null, u(n.label), 1)
+            ]),
+            _: 2
+          }, 1032, ["data-action-id", "onClick"]))), 128))
+        ], 2)) : o("", !0)
+      ], 2),
+      d.value ? (a(), c(r(z), {
+        key: 1,
+        size: "sm",
+        class: "mb-1",
+        "data-testid": "chat-message-avatar"
+      }, {
+        default: p(() => [
+          e.authorAvatarUrl ? (a(), c(r(T), {
+            key: 0,
+            src: e.authorAvatarUrl,
+            alt: e.authorName ?? e.role
+          }, null, 8, ["src", "alt"])) : o("", !0),
+          C(r(U), null, {
+            default: p(() => [
+              x(u(k.value), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })) : o("", !0)
+    ], 10, W));
+  }
+});
 export {
-  f as default
+  fe as default
 };
 //# sourceMappingURL=ChatMessage.vue.js.map

package/dist/components/compositions/elements/code/ChatMessage.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessage.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"ChatMessage.vue.js","sources":["../../../../../src/components/compositions/elements/code/ChatMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Generic chat-message bubble composition.\n *\n * Display-only — renders a single chat bubble in the style of Slack /\n * Discord / iMessage. Side-aligned by role, color-tinted by variant,\n * optional avatar, role badge, timestamp, typing indicator, inline\n * error, and a row of ghost-button actions.\n *\n * No platform-specific integration. Form-data store is not touched.\n *\n *   <ChatMessage\n *     role=\"assistant\"\n *     authorName=\"Assistant\"\n *     message=\"Hello, how can I help?\"\n *     :timestamp=\"new Date()\"\n *   />\n */\nimport { computed, ref, watch, type Component } from \"vue\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ChatMessageAlign = \"auto\" | \"start\" | \"end\"\nexport type ChatMessageVariant =\n  | \"default\"\n  | \"muted\"\n  | \"accent\"\n  | \"destructive\"\n\nexport interface ChatMessageAction {\n  id: string\n  label: string\n  icon?: string\n}\n\nexport interface ChatMessageProps {\n  message?: string\n  role?: \"user\" | \"assistant\" | \"system\" | \"tool\" | string\n  authorName?: string\n  authorAvatarUrl?: string\n  authorAvatarFallback?: string\n  timestamp?: string | Date\n  pending?: boolean\n  error?: string\n  actions?: ChatMessageAction[]\n  align?: ChatMessageAlign\n  variant?: ChatMessageVariant\n  allowHtml?: boolean\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<ChatMessageProps>(), {\n  role: \"user\",\n  align: \"auto\",\n  pending: false,\n  allowHtml: false,\n  actions: () => [],\n})\n\nconst emit = defineEmits<{\n  (e: \"action\", payload: { id: string }): void\n}>()\n\n/* ---------- alignment ---------- */\n\nconst resolvedAlign = computed<\"start\" | \"end\">(() => {\n  if (props.align === \"start\" || props.align === \"end\") {\n    return props.align\n  }\n  return props.role === \"user\" ? \"end\" : \"start\"\n})\n\nconst isEnd = computed<boolean>(() => resolvedAlign.value === \"end\")\n\n/* ---------- variant ---------- */\n\nconst ROLE_VARIANT: Record<string, ChatMessageVariant> = {\n  user: \"accent\",\n  assistant: \"muted\",\n  system: \"default\",\n  tool: \"muted\",\n}\n\nconst resolvedVariant = computed<ChatMessageVariant>(() => {\n  if (props.variant) {\n    return props.variant\n  }\n  return ROLE_VARIANT[props.role] ?? \"default\"\n})\n\nconst bubbleVariants = cva(\n  \"max-w-[36rem] min-w-0 break-words rounded-2xl border px-3 py-2 text-sm shadow-sm\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground border-border\",\n        muted: \"bg-muted text-foreground border-transparent\",\n        accent: \"bg-primary text-primary-foreground border-transparent\",\n        destructive:\n          \"bg-destructive text-destructive-foreground border-transparent\",\n      },\n      align: {\n        start: \"rounded-tl-sm\",\n        end: \"rounded-tr-sm\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      align: \"start\",\n    },\n  },\n)\n\ntype BubbleVariants = VariantProps<typeof bubbleVariants>\n\nconst bubbleClass = computed<string>(() =>\n  bubbleVariants({\n    variant: resolvedVariant.value as BubbleVariants[\"variant\"],\n    align: resolvedAlign.value,\n  }),\n)\n\n/* ---------- avatar fallback ---------- */\n\nconst derivedAvatarFallback = computed<string>(() => {\n  if (props.authorAvatarFallback) {\n    return props.authorAvatarFallback\n  }\n  const source = (props.authorName ?? props.role ?? \"?\").trim()\n  return source ? source.charAt(0).toUpperCase() : \"?\"\n})\n\n/* ---------- timestamp ---------- */\n\nconst formattedTimestamp = computed<string>(() => {\n  const ts = props.timestamp\n  if (!ts) {\n    return \"\"\n  }\n  const date = ts instanceof Date ? ts : new Date(ts)\n  if (Number.isNaN(date.getTime())) {\n    return \"\"\n  }\n  try {\n    return new Intl.DateTimeFormat(undefined, {\n      hour: \"numeric\",\n      minute: \"2-digit\",\n    }).format(date)\n  } catch {\n    return date.toISOString()\n  }\n})\n\n/* ---------- root class ---------- */\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n\n/* ---------- role badge ---------- */\n\nconst showRoleBadge = computed<boolean>(() => {\n  return Boolean(props.role) && props.role !== \"user\"\n})\n\n/* ---------- actions (lucide icons, lazy) ---------- */\n\nconst ActionIcons = ref<Record<string, Component | null>>({})\n\nfunction toPascalCase(input: string): string {\n  return input\n    .replace(/[-_\\s]+(.)?/g, (_, ch?: string) => (ch ? ch.toUpperCase() : \"\"))\n    .replace(/^(.)/, (m) => m.toUpperCase())\n}\n\nasync function loadActionIcons(actions: ChatMessageAction[]): Promise<void> {\n  const needed = actions.filter((a) => a.icon).map((a) => a.icon as string)\n  if (needed.length === 0) {\n    return\n  }\n  const mod = await import(\"lucide-vue-next\")\n  const registry = mod as unknown as Record<string, Component | undefined>\n  const next: Record<string, Component | null> = { ...ActionIcons.value }\n  for (const raw of needed) {\n    const name = toPascalCase(raw)\n    next[raw] = registry[name] ?? null\n  }\n  ActionIcons.value = next\n}\n\nwatch(\n  () => props.actions,\n  (next) => {\n    void loadActionIcons(next ?? [])\n  },\n  { immediate: true, deep: true },\n)\n\nfunction onAction(id: string): void {\n  emit(\"action\", { id })\n}\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex w-full items-end gap-2',\n        isEnd ? 'justify-end' : 'justify-start',\n        rootClass,\n      )\n    \"\n    :data-role=\"props.role\"\n    :data-align=\"resolvedAlign\"\n    :data-variant=\"resolvedVariant\"\n    data-testid=\"chat-message\"\n  >\n    <!-- left-side avatar -->\n    <Avatar\n      v-if=\"!isEnd\"\n      size=\"sm\"\n      class=\"mb-1\"\n      data-testid=\"chat-message-avatar\"\n    >\n      <AvatarImage\n        v-if=\"props.authorAvatarUrl\"\n        :src=\"props.authorAvatarUrl\"\n        :alt=\"props.authorName ?? props.role\"\n      />\n      <AvatarFallback>{{ derivedAvatarFallback }}</AvatarFallback>\n    </Avatar>\n\n    <div\n      :class=\"\n        cn(\n          'flex min-w-0 flex-col gap-1',\n          isEnd ? 'items-end' : 'items-start',\n        )\n      \"\n    >\n      <!-- bubble -->\n      <div :class=\"bubbleClass\" data-testid=\"chat-message-bubble\">\n        <!-- header -->\n        <div\n          v-if=\"props.authorName || showRoleBadge || formattedTimestamp\"\n          :class=\"\n            cn(\n              'mb-1 flex w-full items-center gap-2 text-xs',\n              isEnd ? 'flex-row-reverse' : 'flex-row',\n            )\n          \"\n        >\n          <span\n            v-if=\"props.authorName\"\n            class=\"font-medium\"\n            data-testid=\"chat-message-author\"\n          >\n            {{ props.authorName }}\n          </span>\n          <Badge\n            v-if=\"showRoleBadge\"\n            variant=\"outline\"\n            size=\"sm\"\n            data-testid=\"chat-message-role-badge\"\n          >\n            {{ props.role }}\n          </Badge>\n          <span\n            v-if=\"formattedTimestamp\"\n            :class=\"\n              cn(\n                'text-[11px] opacity-70',\n                resolvedVariant === 'accent' || resolvedVariant === 'destructive'\n                  ? ''\n                  : 'text-muted-foreground',\n                isEnd ? 'mr-auto' : 'ml-auto',\n              )\n            \"\n            data-testid=\"chat-message-timestamp\"\n          >\n            {{ formattedTimestamp }}\n          </span>\n        </div>\n\n        <!-- body -->\n        <div\n          v-if=\"props.pending\"\n          class=\"flex items-center gap-1 py-1\"\n          data-testid=\"chat-message-pending\"\n          aria-label=\"Typing\"\n        >\n          <span class=\"size-1.5 animate-bounce rounded-full bg-current opacity-60\" />\n          <span\n            class=\"size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:150ms]\"\n          />\n          <span\n            class=\"size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:300ms]\"\n          />\n        </div>\n        <div\n          v-else-if=\"props.allowHtml && props.message\"\n          class=\"whitespace-pre-wrap leading-snug\"\n          data-testid=\"chat-message-body\"\n          v-html=\"props.message\"\n        />\n        <div\n          v-else-if=\"props.message\"\n          class=\"whitespace-pre-wrap leading-snug\"\n          data-testid=\"chat-message-body\"\n        >\n          {{ props.message }}\n        </div>\n      </div>\n\n      <!-- error -->\n      <p\n        v-if=\"props.error\"\n        class=\"text-xs text-destructive\"\n        data-testid=\"chat-message-error\"\n      >\n        {{ props.error }}\n      </p>\n\n      <!-- actions -->\n      <div\n        v-if=\"props.actions && props.actions.length > 0\"\n        :class=\"\n          cn(\n            'flex flex-wrap gap-1',\n            isEnd ? 'justify-end' : 'justify-start',\n          )\n        \"\n        data-testid=\"chat-message-actions\"\n      >\n        <Button\n          v-for=\"action in props.actions\"\n          :key=\"action.id\"\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          :data-action-id=\"action.id\"\n          @click=\"onAction(action.id)\"\n        >\n          <component\n            :is=\"action.icon ? ActionIcons[action.icon] : null\"\n            v-if=\"action.icon && ActionIcons[action.icon]\"\n          />\n          <span>{{ action.label }}</span>\n        </Button>\n      </div>\n    </div>\n\n    <!-- right-side avatar -->\n    <Avatar\n      v-if=\"isEnd\"\n      size=\"sm\"\n      class=\"mb-1\"\n      data-testid=\"chat-message-avatar\"\n    >\n      <AvatarImage\n        v-if=\"props.authorAvatarUrl\"\n        :src=\"props.authorAvatarUrl\"\n        :alt=\"props.authorName ?? props.role\"\n      />\n      <AvatarFallback>{{ derivedAvatarFallback }}</AvatarFallback>\n    </Avatar>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","resolvedAlign","computed","isEnd","ROLE_VARIANT","resolvedVariant","bubbleVariants","cva","bubbleClass","derivedAvatarFallback","source","formattedTimestamp","ts","date","rootClass","cl","showRoleBadge","ActionIcons","ref","toPascalCase","input","_","ch","m","loadActionIcons","actions","needed","a","registry","next","raw","name","watch","onAction","id","_createElementBlock","_normalizeClass","_unref","cn","_createBlock","Avatar","AvatarImage","_createVNode","AvatarFallback","_createElementVNode","_openBlock","_hoisted_2","_toDisplayString","Badge","_createTextVNode","_hoisted_3","_cache","_hoisted_5","_hoisted_6","_Fragment","_renderList","action","Button","$event","_resolveDynamicComponent"],"mappings":"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"}