@abraca/nuxt 2.11.0 → 2.13.0

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

@@ -16,12 +16,20 @@ type __VLS_Props = {
      * slots are unaffected.
      */
     tabs?: Array<'editor' | 'properties' | 'chat' | 'settings' | 'serverSettings'>;
+    /**
+     * Build the URL the "open as full page" (expand) button navigates to.
+     * Defaults to a slug-aware path derived from the configured `docBasePath`
+     * (`useDocSlugs().getDocUrl`), which resolves to the doc's slug when it has
+     * one and falls back to the raw id. Override to target a custom route shape.
+     */
+    docHref?: (id: string) => string;
 };
 declare var __VLS_11: {
     nodeId: string | null;
-    nodeLabel: string | undefined;
+    nodeLabel: any;
     editor: any;
     meta: DocPageMeta;
+    activeTab: string;
     docTypeDef: import("../utils/docTypes.js").DocTypeDefinition;
 };
 type __VLS_Slots = {} & {

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"

package/dist/runtime/components/chat/AChatInput.vue.d.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/AChatList.d.vue.ts

@@ -32,28 +32,40 @@ type __VLS_Props = {
     channels?: ChatChannelItem[];
     notifications?: NotificationItem[];
     notificationUnreadCount?: number;
+    /** Ids of muted channels (shown dimmed; right-click to toggle). */
+    mutedIds?: string[];
+    /** Ids of pinned channels (shown with a pin; right-click to toggle). */
+    pinnedIds?: string[];
 };
 type __VLS_ModelProps = {
     'selectedChannelId'?: string | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hide: (channelId: string) => any;
     "select-channel": (channelId: string) => any;
     "select-notification": (notification: NotificationItem) => any;
     "mark-all-read": () => any;
     "load-more": () => any;
+    "toggle-mute": (channelId: string) => any;
+    "toggle-pin": (channelId: string) => any;
     "update:selectedChannelId": (value: string | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onHide?: ((channelId: string) => any) | undefined;
     "onSelect-channel"?: ((channelId: string) => any) | undefined;
     "onSelect-notification"?: ((notification: NotificationItem) => any) | undefined;
     "onMark-all-read"?: (() => any) | undefined;
     "onLoad-more"?: (() => any) | undefined;
+    "onToggle-mute"?: ((channelId: string) => any) | undefined;
+    "onToggle-pin"?: ((channelId: string) => any) | undefined;
     "onUpdate:selectedChannelId"?: ((value: string | null) => any) | undefined;
 }>, {
     notifications: NotificationItem[];
     mode: "chat" | "notifications";
     channels: ChatChannelItem[];
     notificationUnreadCount: number;
+    mutedIds: string[];
+    pinnedIds: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,15 +1,44 @@
 <script setup>
-const _props = defineProps({
+const props = defineProps({
   mode: { type: String, required: false, default: "chat" },
   channels: { type: Array, required: false, default: () => [] },
   notifications: { type: Array, required: false, default: () => [] },
-  notificationUnreadCount: { type: Number, required: false, default: 0 }
+  notificationUnreadCount: { type: Number, required: false, default: 0 },
+  mutedIds: { type: Array, required: false, default: () => [] },
+  pinnedIds: { type: Array, required: false, default: () => [] }
 });
-const emit = defineEmits(["select-channel", "select-notification", "mark-all-read", "load-more"]);
+const emit = defineEmits(["select-channel", "select-notification", "mark-all-read", "load-more", "toggle-mute", "toggle-pin", "hide"]);
 const selectedChannelId = defineModel("selectedChannelId", { type: [String, null], ...{ default: null } });
 function channelIcon(ch) {
   return ch.type === "dm" ? "i-lucide-user" : "i-lucide-users";
 }
+function isMutedItem(id) {
+  return props.mutedIds.includes(id);
+}
+function isPinnedItem(id) {
+  return props.pinnedIds.includes(id);
+}
+function channelMenuItems(ch) {
+  return [[
+    {
+      label: isPinnedItem(ch.id) ? "Unpin" : "Pin",
+      icon: isPinnedItem(ch.id) ? "i-lucide-pin-off" : "i-lucide-pin",
+      onSelect: () => emit("toggle-pin", ch.id)
+    },
+    {
+      label: isMutedItem(ch.id) ? "Unmute" : "Mute",
+      icon: isMutedItem(ch.id) ? "i-lucide-bell" : "i-lucide-bell-off",
+      onSelect: () => emit("toggle-mute", ch.id)
+    }
+  ], [
+    {
+      label: "Hide",
+      icon: "i-lucide-eye-off",
+      color: "error",
+      onSelect: () => emit("hide", ch.id)
+    }
+  ]];
+}
 function formatTimestamp(ts) {
   if (!ts) return "";
   const d = new Date(ts);
@@ -142,43 +171,58 @@ function onClickNotification(n) {
       </p>
     </div>
 
-    <div
+    <UContextMenu
       v-for="ch in channels"
       :key="ch.id"
-      class="p-4 sm:px-6 text-sm cursor-pointer border-l-2 transition-colors"
-      :class="[
+      :items="channelMenuItems(ch)"
+    >
+      <div
+        class="p-4 sm:px-6 text-sm cursor-pointer border-l-2 transition-colors"
+        :class="[
   ch.unreadCount > 0 ? 'text-(--ui-text-highlighted)' : 'text-(--ui-text-muted)',
+  isMutedItem(ch.id) ? 'opacity-60' : '',
   selectedChannelId === ch.id ? 'border-(--ui-color-primary-500) bg-(--ui-color-primary-500)/10' : 'border-transparent hover:border-(--ui-color-primary-500) hover:bg-(--ui-color-primary-500)/5'
 ]"
-      @click="selectedChannelId = ch.id;
+        @click="selectedChannelId = ch.id;
   emit('select-channel', ch.id)"
-    >
-      <div
-        class="flex items-center justify-between"
-        :class="[ch.unreadCount > 0 && 'font-semibold']"
       >
-        <div class="flex items-center gap-2.5">
-          <UIcon
-            :name="channelIcon(ch)"
-            class="size-4 text-(--ui-text-dimmed) shrink-0"
-          />
-          <span class="truncate">{{ ch.label }}</span>
-          <span
-            v-if="ch.unreadCount > 0"
-            class="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-(--ui-color-error-500) text-white text-[11px] font-bold leading-none"
-          >{{ ch.unreadCount }}</span>
+        <div
+          class="flex items-center justify-between"
+          :class="[ch.unreadCount > 0 && 'font-semibold']"
+        >
+          <div class="flex items-center gap-2.5 min-w-0">
+            <UIcon
+              :name="channelIcon(ch)"
+              class="size-4 text-(--ui-text-dimmed) shrink-0"
+            />
+            <span class="truncate">{{ ch.label }}</span>
+            <UIcon
+              v-if="isPinnedItem(ch.id)"
+              name="i-lucide-pin"
+              class="size-3 text-(--ui-text-dimmed) shrink-0"
+            />
+            <UIcon
+              v-if="isMutedItem(ch.id)"
+              name="i-lucide-bell-off"
+              class="size-3 text-(--ui-text-dimmed) shrink-0"
+            />
+            <span
+              v-if="ch.unreadCount > 0 && !isMutedItem(ch.id)"
+              class="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-(--ui-color-error-500) text-white text-[11px] font-bold leading-none"
+            >{{ ch.unreadCount }}</span>
+          </div>
+          <span class="text-xs text-(--ui-text-dimmed) shrink-0">
+            {{ formatTimestamp(ch.lastMessage?.createdAt) }}
+          </span>
+        </div>
+        <div
+          v-if="ch.lastMessage"
+          class="flex items-center gap-1 mt-0.5 pl-6.5 min-w-0"
+        >
+          <span class="text-xs text-(--ui-text-dimmed) font-medium shrink-0">{{ ch.lastMessage.senderName }}:</span>
+          <span class="text-xs text-(--ui-text-dimmed) truncate flex-1">{{ ch.lastMessage.content }}</span>
         </div>
-        <span class="text-xs text-(--ui-text-dimmed) shrink-0">
-          {{ formatTimestamp(ch.lastMessage?.createdAt) }}
-        </span>
-      </div>
-      <div
-        v-if="ch.lastMessage"
-        class="flex items-center gap-1 mt-0.5 pl-6.5 min-w-0"
-      >
-        <span class="text-xs text-(--ui-text-dimmed) font-medium shrink-0">{{ ch.lastMessage.senderName }}:</span>
-        <span class="text-xs text-(--ui-text-dimmed) truncate flex-1">{{ ch.lastMessage.content }}</span>
       </div>
-    </div>
+    </UContextMenu>
   </div>
 </template>

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

@@ -32,28 +32,40 @@ type __VLS_Props = {
     channels?: ChatChannelItem[];
     notifications?: NotificationItem[];
     notificationUnreadCount?: number;
+    /** Ids of muted channels (shown dimmed; right-click to toggle). */
+    mutedIds?: string[];
+    /** Ids of pinned channels (shown with a pin; right-click to toggle). */
+    pinnedIds?: string[];
 };
 type __VLS_ModelProps = {
     'selectedChannelId'?: string | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hide: (channelId: string) => any;
     "select-channel": (channelId: string) => any;
     "select-notification": (notification: NotificationItem) => any;
     "mark-all-read": () => any;
     "load-more": () => any;
+    "toggle-mute": (channelId: string) => any;
+    "toggle-pin": (channelId: string) => any;
     "update:selectedChannelId": (value: string | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onHide?: ((channelId: string) => any) | undefined;
     "onSelect-channel"?: ((channelId: string) => any) | undefined;
     "onSelect-notification"?: ((notification: NotificationItem) => any) | undefined;
     "onMark-all-read"?: (() => any) | undefined;
     "onLoad-more"?: (() => any) | undefined;
+    "onToggle-mute"?: ((channelId: string) => any) | undefined;
+    "onToggle-pin"?: ((channelId: string) => any) | undefined;
     "onUpdate:selectedChannelId"?: ((value: string | null) => any) | undefined;
 }>, {
     notifications: NotificationItem[];
     mode: "chat" | "notifications";
     channels: ChatChannelItem[];
     notificationUnreadCount: number;
+    mutedIds: string[];
+    pinnedIds: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -6,6 +6,8 @@ export interface ChatMessage {
     createdAt: number;
     /** 'sending' | 'delivered' | 'read' */
     readState?: string;
+    /** Id of the message this one replies to (threaded reply). */
+    replyTo?: string;
 }
 type __VLS_Props = {
     messages: ChatMessage[];
@@ -16,9 +18,11 @@ type __VLS_Props = {
     emptySubtext?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    reply: (message: ChatMessage) => any;
     "open-doc": (docId: string) => any;
     "jump-to-quote": (docId: string, from: number, to: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReply?: ((message: ChatMessage) => any) | undefined;
     "onOpen-doc"?: ((docId: string) => any) | undefined;
     "onJump-to-quote"?: ((docId: string, from: number, to: number) => any) | undefined;
 }>, {

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

@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from "vue";
-import { parseMessageContent, renderMessageSegments } from "../../utils/chatContent";
+import { hasRichText, parseMessageContent, previewMessageContent, renderMessageSegments } from "../../utils/chatContent";
 const props = defineProps({
   messages: { type: Array, required: true },
   currentUserId: { type: String, required: false, default: "" },
@@ -8,7 +8,15 @@ const props = defineProps({
   emptyText: { type: String, required: false, default: "No messages yet" },
   emptySubtext: { type: String, required: false, default: "Be the first to send a message" }
 });
-const emit = defineEmits(["open-doc", "jump-to-quote"]);
+const emit = defineEmits(["open-doc", "jump-to-quote", "reply"]);
+const messageById = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const m of props.messages) map.set(m.id, m);
+  return map;
+});
+function repliedTo(msg) {
+  return msg.replyTo ? messageById.value.get(msg.replyTo) : void 0;
+}
 const groupedMessages = computed(() => {
   return props.messages.map((msg, i) => {
     const prev = props.messages[i - 1];
@@ -27,7 +35,7 @@ function isSelf(senderId) {
   return senderId === props.currentUserId;
 }
 function hasRichContent(text) {
-  return /@\w+/.test(text) || /https?:\/\//.test(text);
+  return hasRichText(text);
 }
 </script>
 
@@ -70,12 +78,44 @@ function hasRichContent(text) {
     </div>
 
     <div
-      class="max-w-[75%] rounded-xl px-3 py-2"
+      class="group relative max-w-[75%] rounded-xl px-3 py-2"
       :class="[
   isSelf(msg.senderId) ? 'bg-(--ui-color-primary-100) dark:bg-(--ui-color-primary-900)/30' : 'bg-(--ui-bg-elevated)',
   msg.isFirstInGroup ? '' : isSelf(msg.senderId) ? 'rounded-tr-sm' : 'rounded-tl-sm'
 ]"
     >
+      <!-- Reply affordance — appears on hover -->
+      <UButton
+        icon="i-lucide-reply"
+        size="xs"
+        color="neutral"
+        variant="ghost"
+        class="absolute -top-2 opacity-0 group-hover:opacity-100 transition-opacity bg-(--ui-bg-elevated) ring-1 ring-(--ui-border)"
+        :class="isSelf(msg.senderId) ? '-left-2' : '-right-2'"
+        :aria-label="`Reply to ${msg.senderName}`"
+        @click="emit('reply', msg)"
+      />
+
+      <!-- Quoted preview of the message being replied to -->
+      <button
+        v-if="msg.replyTo"
+        type="button"
+        class="flex items-center gap-1.5 w-full mb-1 px-2 py-1 rounded-md bg-(--ui-bg)/50 border-l-2 border-(--ui-primary) text-left"
+        @click="repliedTo(msg) && emit('reply', repliedTo(msg))"
+      >
+        <UIcon
+          name="i-lucide-reply"
+          class="size-3 shrink-0 text-(--ui-text-dimmed)"
+        />
+        <span class="text-[11px] text-(--ui-text-muted) truncate">
+          <template v-if="repliedTo(msg)">
+            <span class="font-medium">{{ repliedTo(msg).senderName || "message" }}</span>
+            · {{ previewMessageContent(repliedTo(msg).content) }}
+          </template>
+          <template v-else>Replied to an earlier message</template>
+        </span>
+      </button>
+
       <!-- Name + time: first in group -->
       <div
         v-if="msg.isFirstInGroup"
@@ -123,6 +163,19 @@ function hasRichContent(text) {
             v-else-if="seg.type === 'mention'"
             class="text-(--ui-color-primary-500) font-medium"
           >@{{ seg.name }}</span>
+          <strong
+            v-else-if="seg.type === 'bold'"
+            class="font-semibold"
+          >{{ seg.value }}</strong>
+          <em v-else-if="seg.type === 'italic'">{{ seg.value }}</em>
+          <span
+            v-else-if="seg.type === 'strike'"
+            class="line-through"
+          >{{ seg.value }}</span>
+          <code
+            v-else-if="seg.type === 'code'"
+            class="px-1 py-0.5 rounded bg-(--ui-bg-accented) font-mono text-[0.85em]"
+          >{{ seg.value }}</code>
           <template v-else>
             {{ seg.value }}
           </template>

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

@@ -6,6 +6,8 @@ export interface ChatMessage {
     createdAt: number;
     /** 'sending' | 'delivered' | 'read' */
     readState?: string;
+    /** Id of the message this one replies to (threaded reply). */
+    replyTo?: string;
 }
 type __VLS_Props = {
     messages: ChatMessage[];
@@ -16,9 +18,11 @@ type __VLS_Props = {
     emptySubtext?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    reply: (message: ChatMessage) => any;
     "open-doc": (docId: string) => any;
     "jump-to-quote": (docId: string, from: number, to: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReply?: ((message: ChatMessage) => any) | undefined;
     "onOpen-doc"?: ((docId: string) => any) | undefined;
     "onJump-to-quote"?: ((docId: string, from: number, to: number) => any) | undefined;
 }>, {