@abraca/nuxt 2.10.0 → 2.13.0

package/dist/runtime/components/ASnapshotPreviewModal.vue

@@ -0,0 +1,430 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import * as Y from "yjs";
+import { yjsToMarkdown, yjsToHtml } from "../utils/yjsConvert";
+import { triggerBadgeColor } from "../composables/useDocSnapshots";
+import AModalShell from "./AModalShell.vue";
+const props = defineProps({
+  version: { type: [Number, null], required: true },
+  snapshots: { type: Array, required: false, default: () => [] },
+  getSnapshot: { type: Function, required: true },
+  docLabel: { type: String, required: false },
+  docType: { type: String, required: false },
+  docMeta: { type: [Object, null], required: false },
+  isOwner: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:version", "restore", "fork", "delete"]);
+const open = computed({
+  get: () => props.version != null,
+  set: (v) => {
+    if (!v) emit("update:version", null);
+  }
+});
+const tab = ref("preview");
+const loading = ref(false);
+const error = ref(null);
+const snap = ref(null);
+const mdCache = /* @__PURE__ */ new Map();
+const previewHtml = ref("");
+const selectedMd = ref("");
+function b64ToBytes(b64) {
+  const norm = b64.replace(/-/g, "+").replace(/_/g, "/");
+  const bin = atob(norm);
+  const bytes = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+  return bytes;
+}
+function renderSnapshot(data) {
+  const ydoc = new Y.Doc();
+  try {
+    Y.applyUpdate(ydoc, b64ToBytes(data));
+    const fragment = ydoc.getXmlFragment("default");
+    const label = props.docLabel || "Document";
+    return {
+      html: yjsToHtml(fragment, label),
+      md: yjsToMarkdown(fragment, label, props.docMeta ?? void 0, props.docType)
+    };
+  } finally {
+    ydoc.destroy();
+  }
+}
+const compareVersions = computed(() => {
+  const v = props.version;
+  if (v == null) return [];
+  return props.snapshots.map((s) => s.version).filter((x) => x !== v).sort((a, b) => b - a);
+});
+const cmpVersion = ref(null);
+const cmpMd = ref("");
+function pickDefaultCompare() {
+  const v = props.version;
+  if (v == null) {
+    cmpVersion.value = null;
+    return;
+  }
+  const older = compareVersions.value.filter((x) => x < v);
+  cmpVersion.value = older.length ? older[0] : null;
+}
+const cmpIndex = computed(() => {
+  const list = compareVersions.value;
+  return cmpVersion.value == null ? -1 : list.indexOf(cmpVersion.value);
+});
+function stepCompare(delta) {
+  const list = compareVersions.value;
+  if (!list.length) return;
+  const i = cmpIndex.value < 0 ? 0 : cmpIndex.value + delta;
+  if (i < 0 || i >= list.length) return;
+  cmpVersion.value = list[i];
+}
+async function mdFor(version) {
+  const cached = mdCache.get(version);
+  if (cached != null) return cached;
+  const s = await props.getSnapshot(version);
+  const md = s?.data ? renderSnapshot(s.data).md : "";
+  mdCache.set(version, md);
+  return md;
+}
+const DIFF_LINE_CAP = 2e3;
+const DIFF_CELL_CAP = 2e6;
+function lineDiff(oldStr, newStr) {
+  const a = oldStr.length ? oldStr.split("\n") : [];
+  const b = newStr.length ? newStr.split("\n") : [];
+  const n = a.length;
+  const m = b.length;
+  const dp = Array.from({ length: n + 1 }, () => new Int32Array(m + 1));
+  for (let i2 = n - 1; i2 >= 0; i2--) {
+    for (let j2 = m - 1; j2 >= 0; j2--) {
+      dp[i2][j2] = a[i2] === b[j2] ? dp[i2 + 1][j2 + 1] + 1 : Math.max(dp[i2 + 1][j2], dp[i2][j2 + 1]);
+    }
+  }
+  const rows = [];
+  let i = 0;
+  let j = 0;
+  while (i < n && j < m) {
+    if (a[i] === b[j]) {
+      rows.push({ t: "ctx", text: a[i] });
+      i++;
+      j++;
+    } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+      rows.push({ t: "del", text: a[i] });
+      i++;
+    } else {
+      rows.push({ t: "add", text: b[j] });
+      j++;
+    }
+  }
+  while (i < n) rows.push({ t: "del", text: a[i++] });
+  while (j < m) rows.push({ t: "add", text: b[j++] });
+  return rows;
+}
+const diffTooLarge = computed(() => {
+  const a = cmpMd.value ? cmpMd.value.split("\n").length : 0;
+  const b = selectedMd.value ? selectedMd.value.split("\n").length : 0;
+  return a > DIFF_LINE_CAP || b > DIFF_LINE_CAP || a * b > DIFF_CELL_CAP;
+});
+const diffRows = computed(() => {
+  if (diffTooLarge.value) return [];
+  return lineDiff(cmpMd.value, selectedMd.value);
+});
+const diffHasChanges = computed(() => diffRows.value.some((r) => r.t !== "ctx"));
+async function load() {
+  const v = props.version;
+  if (v == null) return;
+  loading.value = true;
+  error.value = null;
+  snap.value = null;
+  previewHtml.value = "";
+  selectedMd.value = "";
+  cmpMd.value = "";
+  tab.value = "preview";
+  try {
+    const s = await props.getSnapshot(v);
+    if (!s) throw new Error("Snapshot not found");
+    snap.value = s;
+    const { html, md } = s.data ? renderSnapshot(s.data) : { html: "", md: "" };
+    previewHtml.value = html;
+    selectedMd.value = md;
+    mdCache.set(v, md);
+    pickDefaultCompare();
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : String(e);
+  } finally {
+    loading.value = false;
+  }
+}
+watch(cmpVersion, async (v) => {
+  cmpMd.value = v == null ? "" : await mdFor(v);
+});
+watch(() => props.version, (v) => {
+  mdCache.clear();
+  if (v != null) load();
+}, { immediate: true });
+function authorName(publicKey) {
+  if (!publicKey) return "Unknown";
+  return publicKey.length > 12 ? `${publicKey.slice(0, 8)}\u2026${publicKey.slice(-4)}` : publicKey;
+}
+const absFmt = new Intl.DateTimeFormat(void 0, { dateStyle: "medium", timeStyle: "short" });
+const relFmt = typeof Intl.RelativeTimeFormat === "function" ? new Intl.RelativeTimeFormat(void 0, { numeric: "auto" }) : null;
+function fmtAbs(unixSeconds) {
+  return absFmt.format(new Date(unixSeconds * 1e3));
+}
+function fmtRel(unixSeconds) {
+  if (!relFmt) return "";
+  const diffS = unixSeconds - Date.now() / 1e3;
+  const abs = Math.abs(diffS);
+  if (abs < 60) return relFmt.format(Math.round(diffS), "second");
+  if (abs < 3600) return relFmt.format(Math.round(diffS / 60), "minute");
+  if (abs < 86400) return relFmt.format(Math.round(diffS / 3600), "hour");
+  return relFmt.format(Math.round(diffS / 86400), "day");
+}
+function fmtSize(bytes) {
+  if (bytes == null) return "\u2014";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function fileIcon(mime) {
+  if (!mime) return "i-lucide-file";
+  if (mime.startsWith("image/")) return "i-lucide-image";
+  if (mime.startsWith("video/")) return "i-lucide-film";
+  if (mime.startsWith("audio/")) return "i-lucide-music";
+  if (mime === "application/pdf") return "i-lucide-file-text";
+  if (/zip|tar|gzip/.test(mime)) return "i-lucide-file-archive";
+  return "i-lucide-file";
+}
+function act(kind) {
+  const v = props.version;
+  if (v == null) return;
+  if (kind === "restore") emit("restore", v);
+  else if (kind === "fork") emit("fork", v);
+  else emit("delete", v);
+  emit("update:version", null);
+}
+</script>
+
+<template>
+  <AModalShell
+    :open="open"
+    max-width="sm:max-w-3xl"
+    @update:open="open = $event"
+  >
+    <div class="flex flex-col gap-4">
+      <h2 class="text-base font-semibold text-(--ui-text-highlighted)">
+        {{ snap ? `Snapshot v${snap.version}` : "Snapshot details" }}
+      </h2>
+
+      <!-- Loading -->
+      <div
+        v-if="loading"
+        class="space-y-3"
+      >
+        <USkeleton class="h-8 w-1/2" />
+        <USkeleton class="h-24 w-full" />
+        <USkeleton class="h-40 w-full" />
+      </div>
+
+      <!-- Error -->
+      <UAlert
+        v-else-if="error"
+        color="error"
+        variant="soft"
+        title="Couldn't load snapshot"
+        :description="error"
+        icon="i-lucide-alert-circle"
+        :actions="[{
+  label: 'Retry',
+  color: 'neutral',
+  variant: 'outline',
+  onClick: load
+}]"
+      />
+
+      <!-- Detail -->
+      <template v-else-if="snap">
+        <!-- Metadata header -->
+        <div class="flex flex-wrap items-center gap-2 mb-1">
+          <UBadge
+            :label="snap.trigger"
+            :color="triggerBadgeColor(snap.trigger)"
+            variant="subtle"
+            size="sm"
+          />
+          <span
+            v-if="snap.label"
+            class="text-sm text-(--ui-text) truncate"
+          >{{ snap.label }}</span>
+          <span class="text-xs text-(--ui-text-dimmed)">
+            {{ fmtAbs(snap.created_at) }} · {{ fmtRel(snap.created_at) }}
+          </span>
+          <div class="flex items-center gap-1.5 ms-auto">
+            <span class="text-xs text-(--ui-text-muted)">{{ authorName(snap.created_by) }}</span>
+            <span class="text-xs text-(--ui-text-dimmed)">· {{ fmtSize(snap.size_bytes) }}</span>
+          </div>
+        </div>
+
+        <!-- Preview / Diff toggle -->
+        <div class="flex items-center gap-1 mb-1">
+          <UButton
+            label="Preview"
+            icon="i-lucide-eye"
+            size="xs"
+            :color="tab === 'preview' ? 'primary' : 'neutral'"
+            :variant="tab === 'preview' ? 'solid' : 'ghost'"
+            @click="tab = 'preview'"
+          />
+          <UButton
+            label="Changes"
+            icon="i-lucide-git-compare"
+            size="xs"
+            :color="tab === 'diff' ? 'primary' : 'neutral'"
+            :variant="tab === 'diff' ? 'solid' : 'ghost'"
+            @click="tab = 'diff'"
+          />
+        </div>
+
+        <!-- Preview tab -->
+        <div
+          v-show="tab === 'preview'"
+          class="snapshot-prose max-h-[55vh] overflow-y-auto rounded-md border border-(--ui-border) bg-(--ui-bg) p-4"
+        >
+          <!-- eslint-disable-next-line vue/no-v-html -- serialized from our own convert pipeline -->
+          <div
+            v-if="previewHtml"
+            v-html="previewHtml"
+          />
+          <p
+            v-else
+            class="text-sm text-(--ui-text-dimmed) text-center py-6"
+          >
+            This snapshot has no readable content.
+          </p>
+        </div>
+
+        <!-- Diff tab -->
+        <div v-show="tab === 'diff'">
+          <div class="flex items-center gap-2 mb-2 text-xs text-(--ui-text-muted)">
+            <span>Compared with</span>
+            <template v-if="cmpVersion != null">
+              <UButton
+                icon="i-lucide-chevron-left"
+                size="xs"
+                color="neutral"
+                variant="ghost"
+                :disabled="cmpIndex <= 0"
+                @click="stepCompare(-1)"
+              />
+              <span class="tabular-nums font-medium text-(--ui-text)">v{{ cmpVersion }}</span>
+              <UButton
+                icon="i-lucide-chevron-right"
+                size="xs"
+                color="neutral"
+                variant="ghost"
+                :disabled="cmpIndex < 0 || cmpIndex >= compareVersions.length - 1"
+                @click="stepCompare(1)"
+              />
+            </template>
+            <span
+              v-else
+              class="italic"
+            >the earliest version (nothing older to compare)</span>
+          </div>
+
+          <p
+            v-if="diffTooLarge"
+            class="text-sm text-(--ui-text-dimmed) text-center py-6"
+          >
+            This document is too large to diff.
+          </p>
+          <p
+            v-else-if="!diffHasChanges"
+            class="text-sm text-(--ui-text-dimmed) text-center py-6"
+          >
+            No textual changes between these versions.
+          </p>
+          <div
+            v-else
+            class="max-h-[55vh] overflow-y-auto rounded-md border border-(--ui-border) bg-(--ui-bg) font-mono text-xs"
+          >
+            <div
+              v-for="(row, idx) in diffRows"
+              :key="idx"
+              class="flex gap-2 px-3 py-0.5 whitespace-pre-wrap break-words"
+              :class="{
+  'bg-(--ui-color-success-500)/10 text-(--ui-color-success-600)': row.t === 'add',
+  'bg-(--ui-color-error-500)/10 text-(--ui-color-error-600)': row.t === 'del',
+  'text-(--ui-text-dimmed)': row.t === 'ctx'
+}"
+            >
+              <span class="select-none w-3 shrink-0 opacity-70">{{ row.t === "add" ? "+" : row.t === "del" ? "\u2212" : "" }}</span>
+              <span class="flex-1">{{ row.text || " " }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Referenced files -->
+        <div
+          v-if="snap.files && snap.files.length"
+          class="mt-1"
+        >
+          <p class="text-xs font-medium text-(--ui-text-muted) mb-1.5">
+            Referenced files
+          </p>
+          <ul class="rounded-md border border-(--ui-border) divide-y divide-(--ui-border)">
+            <li
+              v-for="f in snap.files"
+              :key="f.id"
+              class="flex items-center gap-2.5 px-3 py-2"
+            >
+              <UIcon
+                :name="fileIcon(f.mime_type)"
+                class="size-4 text-(--ui-text-muted) shrink-0"
+              />
+              <span class="text-sm truncate flex-1">{{ f.filename }}</span>
+              <span class="text-xs text-(--ui-text-dimmed) shrink-0">{{ fmtSize(f.size) }}</span>
+            </li>
+          </ul>
+        </div>
+      </template>
+    </div>
+
+    <template #footer>
+      <div class="flex items-center gap-2 w-full">
+        <UButton
+          label="Cancel"
+          color="neutral"
+          variant="ghost"
+          @click="emit('update:version', null)"
+        />
+        <div class="ms-auto flex items-center gap-2">
+          <UButton
+            v-if="isOwner"
+            label="Delete"
+            icon="i-lucide-trash-2"
+            color="error"
+            variant="ghost"
+            :disabled="!snap"
+            @click="act('delete')"
+          />
+          <UButton
+            label="Fork"
+            icon="i-lucide-git-branch"
+            color="neutral"
+            variant="outline"
+            :disabled="!snap"
+            @click="act('fork')"
+          />
+          <UButton
+            label="Restore"
+            icon="i-lucide-history"
+            color="primary"
+            :disabled="!snap"
+            @click="act('restore')"
+          />
+        </div>
+      </div>
+    </template>
+  </AModalShell>
+</template>
+
+<style scoped>
+.snapshot-prose :deep(h1){font-size:1.25rem;font-weight:600;margin:.75rem 0 .5rem}.snapshot-prose :deep(h2){font-size:1.1rem;font-weight:600;margin:.75rem 0 .4rem}.snapshot-prose :deep(h3){font-size:1rem;font-weight:600;margin:.6rem 0 .3rem}.snapshot-prose :deep(p){line-height:1.6;margin:.4rem 0}.snapshot-prose :deep(ul){list-style:disc;margin:.4rem 0;padding-inline-start:1.4rem}.snapshot-prose :deep(ol){list-style:decimal;margin:.4rem 0;padding-inline-start:1.4rem}.snapshot-prose :deep(li){margin:.15rem 0}.snapshot-prose :deep(blockquote){border-inline-start:3px solid var(--ui-border);color:var(--ui-text-muted);margin:.5rem 0;padding-inline-start:.75rem}.snapshot-prose :deep(pre){background:var(--ui-bg-elevated);border-radius:.375rem;font-size:.8rem;margin:.5rem 0;overflow-x:auto;padding:.6rem .8rem}.snapshot-prose :deep(code){font-family:ui-monospace,monospace;font-size:.85em}.snapshot-prose :deep(a){color:var(--ui-primary);text-decoration:underline}.snapshot-prose :deep(img){border-radius:.375rem;height:auto;max-width:100%}.snapshot-prose :deep(table){border-collapse:collapse;margin:.5rem 0}.snapshot-prose :deep(td),.snapshot-prose :deep(th){border:1px solid var(--ui-border);padding:.3rem .5rem}
+</style>

package/dist/runtime/components/ASnapshotPreviewModal.vue.d.ts

@@ -0,0 +1,33 @@
+import type { SnapshotData, SnapshotMeta } from '@abraca/dabra';
+import type { DocPageMeta } from '../types.js';
+type __VLS_Props = {
+    /** Selected version — null closes the modal. The parent owns this. */
+    version: number | null;
+    /** The loaded snapshot metadata list (compare-baseline candidates). */
+    snapshots?: SnapshotMeta[];
+    /** Fetch a single snapshot's data blob (e.g. `useDocSnapshots().getSnapshot`). */
+    getSnapshot: (version: number) => Promise<SnapshotData | null>;
+    /** Document label — used as the title when serializing. */
+    docLabel?: string;
+    /** Document page type — passed to the markdown serializer. */
+    docType?: string;
+    /** Document meta — passed to the markdown serializer. */
+    docMeta?: DocPageMeta | null;
+    /** Whether the current user may delete snapshots. */
+    isOwner?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (version: number) => any;
+    restore: (version: number) => any;
+    fork: (version: number) => any;
+    "update:version": (value: number | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: ((version: number) => any) | undefined;
+    onRestore?: ((version: number) => any) | undefined;
+    onFork?: ((version: number) => any) | undefined;
+    "onUpdate:version"?: ((value: number | null) => any) | undefined;
+}>, {
+    snapshots: SnapshotMeta[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ATagsEditor.d.vue.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    open: boolean;
+    /** Current tags for the document. */
+    tags?: string[];
+    /** Optional modal heading. */
+    title?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (v: boolean) => any;
+    save: (tags: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((v: boolean) => any) | undefined;
+    onSave?: ((tags: string[]) => any) | undefined;
+}>, {
+    tags: string[];
+    title: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ATagsEditor.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { ref, watch } from "vue";
+import AModalShell from "./AModalShell.vue";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  tags: { type: Array, required: false, default: () => [] },
+  title: { type: String, required: false, default: "Edit tags" }
+});
+const emit = defineEmits(["update:open", "save"]);
+const draft = ref([]);
+watch(() => props.open, (isOpen) => {
+  if (isOpen) draft.value = [...props.tags ?? []];
+}, { immediate: true });
+function save() {
+  const cleaned = Array.from(
+    new Set(draft.value.map((t) => t.trim()).filter(Boolean))
+  );
+  emit("save", cleaned);
+  emit("update:open", false);
+}
+</script>
+
+<template>
+  <AModalShell
+    :open="open"
+    :title="title"
+    max-width="sm:max-w-md"
+    @update:open="emit('update:open', $event)"
+  >
+    <UFormField
+      label="Tags"
+      hint="Press Enter to add"
+    >
+      <UInputTags
+        v-model="draft"
+        placeholder="Add a tag…"
+        size="md"
+        class="w-full"
+        :ui="{ root: 'w-full' }"
+      />
+    </UFormField>
+
+    <template #footer>
+      <div class="flex items-center justify-end gap-2 w-full">
+        <UButton
+          label="Cancel"
+          color="neutral"
+          variant="ghost"
+          @click="emit('update:open', false)"
+        />
+        <UButton
+          label="Save"
+          color="primary"
+          icon="i-lucide-check"
+          @click="save"
+        />
+      </div>
+    </template>
+  </AModalShell>
+</template>

package/dist/runtime/components/ATagsEditor.vue.d.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    open: boolean;
+    /** Current tags for the document. */
+    tags?: string[];
+    /** Optional modal heading. */
+    title?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (v: boolean) => any;
+    save: (tags: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((v: boolean) => any) | undefined;
+    onSave?: ((tags: string[]) => any) | undefined;
+}>, {
+    tags: string[];
+    title: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/aware/AMedia.d.vue.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     awareness: boolean;
     tag: "video" | "audio";
     live: boolean;
-    total: boolean;
     controls: boolean;
+    total: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/aware/AMedia.vue.d.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     awareness: boolean;
     tag: "video" | "audio";
     live: boolean;
-    total: boolean;
     controls: boolean;
+    total: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/chat/AChatInput.d.vue.ts

@@ -1,14 +1,14 @@
-/**
- * Chat message input with @mention autocomplete and document drop support.
- *
- * Ported from cou-sh/app/components/chat/ChatInput.vue — decoupled from
- * useChat/useChatUsers/usePermissions. App provides handlers via emits.
- */
 export interface ChatMentionUser {
     id: string;
     name: string;
     isAgent?: boolean;
 }
+/** Minimal shape of the message being replied to (for the draft chip). */
+export interface ReplyTarget {
+    id: string;
+    senderName?: string;
+    content?: string;
+}
 type __VLS_Props = {
     /** Whether to auto-focus the input on mount */
     autofocus?: boolean;
@@ -17,6 +17,8 @@ type __VLS_Props = {
     canSend?: boolean;
     /** Online users for @mention autocomplete */
     mentionUsers?: ChatMentionUser[];
+    /** Message being replied to — shows a draft chip above the composer. */
+    replyTo?: ReplyTarget | null;
 };
 declare function focus(): void;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
@@ -28,6 +30,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
         docId: string;
         label: string;
     }) => any;
+    "cancel-reply": () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSend?: ((content: string) => any) | undefined;
     onTyping?: (() => any) | undefined;
@@ -35,7 +38,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
         docId: string;
         label: string;
     }) => any) | undefined;
+    "onCancel-reply"?: (() => any) | undefined;
 }>, {
+    replyTo: ReplyTarget | null;
     placeholder: string;
     autofocus: boolean;
     canSend: boolean;

package/dist/runtime/components/chat/AChatInput.vue

@@ -1,12 +1,17 @@
 <script setup>
 import { ref, computed, nextTick, onMounted } from "vue";
+import { previewMessageContent } from "../../utils/chatContent";
 const props = defineProps({
   autofocus: { type: Boolean, required: false, default: false },
   placeholder: { type: String, required: false, default: "Type a message\u2026" },
   canSend: { type: Boolean, required: false, default: true },
-  mentionUsers: { type: Array, required: false, default: () => [] }
+  mentionUsers: { type: Array, required: false, default: () => [] },
+  replyTo: { type: [Object, null], required: false, default: null }
 });
-const emit = defineEmits(["send", "typing", "doc-drop"]);
+const emit = defineEmits(["send", "typing", "doc-drop", "cancel-reply"]);
+const replyPreview = computed(
+  () => props.replyTo?.content ? previewMessageContent(props.replyTo.content) : ""
+);
 const messageInput = ref("");
 const inputRef = ref(null);
 const isDraggingDoc = ref(false);
@@ -192,6 +197,32 @@ defineExpose({ focus });
       </div>
     </Transition>
 
+    <!-- Reply draft chip -->
+    <div
+      v-if="replyTo"
+      class="flex items-center gap-2 mb-2 px-2.5 py-1.5 rounded-lg bg-(--ui-bg-elevated) border-l-2 border-(--ui-primary) text-xs"
+    >
+      <UIcon
+        name="i-lucide-reply"
+        class="size-3.5 shrink-0 text-(--ui-text-muted)"
+      />
+      <div class="min-w-0 flex-1">
+        <span class="text-(--ui-text-muted)">Replying to </span>
+        <span class="font-medium text-(--ui-text-highlighted)">{{ replyTo.senderName || "message" }}</span>
+        <span
+          v-if="replyPreview"
+          class="text-(--ui-text-dimmed)"
+        > · {{ replyPreview }}</span>
+      </div>
+      <UButton
+        icon="i-lucide-x"
+        size="xs"
+        color="neutral"
+        variant="ghost"
+        @click="emit('cancel-reply')"
+      />
+    </div>
+
     <div class="flex items-end gap-2">
       <textarea
         ref="inputRef"