@abraca/nuxt 0.3.0 → 1.5.0

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

@@ -0,0 +1,97 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  members: { type: Array, required: true },
+  docLabels: { type: Object, required: false, default: () => ({}) }
+});
+const emit = defineEmits(["start-dm"]);
+function docLabel(docId) {
+  return props.docLabels[docId] || docId.slice(0, 8) + "\u2026";
+}
+const grouped = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const m of props.members) {
+    const key = m.docId;
+    if (!map.has(key)) map.set(key, []);
+    map.get(key).push(m);
+  }
+  return map;
+});
+</script>
+
+<template>
+  <div class="overflow-y-auto py-2">
+    <div class="px-3 py-1 flex items-center justify-between">
+      <p class="text-xs font-semibold text-(--ui-text-muted) uppercase tracking-wider">
+        Members
+      </p>
+      <UBadge
+        :label="members.length"
+        color="success"
+        variant="subtle"
+        size="xs"
+      />
+    </div>
+
+    <div
+      v-if="members.length === 0"
+      class="px-4 py-10 text-center"
+    >
+      <UIcon
+        name="i-lucide-users"
+        class="size-8 text-(--ui-text-dimmed) mx-auto mb-2"
+      />
+      <p class="text-xs text-(--ui-text-dimmed)">
+        No users online
+      </p>
+    </div>
+
+    <template
+      v-for="[docId, users] in grouped"
+      :key="docId ?? '__root__'"
+    >
+      <p
+        v-if="docId"
+        class="px-3 pt-2 pb-1 text-[10px] font-semibold text-(--ui-text-dimmed) uppercase tracking-wide truncate"
+      >
+        {{ docLabel(docId) }}
+      </p>
+
+      <div
+        v-for="user in users"
+        :key="user.id"
+        class="group flex items-center gap-2.5 px-3 py-1.5 mx-1 rounded cursor-pointer hover:bg-(--ui-bg-elevated) transition-colors"
+        @click="emit('start-dm', user)"
+      >
+        <UChip
+          :color="user.isAgent ? 'info' : 'success'"
+          size="xs"
+          inset
+        >
+          <UAvatar
+            :alt="user.name"
+            size="xs"
+            :style="user.avatarStyle"
+          />
+        </UChip>
+        <div class="flex-1 min-w-0">
+          <span class="text-sm text-(--ui-text) truncate block">{{ user.name }}</span>
+          <span
+            v-if="user.isAgent && user.status"
+            class="text-[10px] text-(--ui-text-dimmed) truncate block"
+          >
+            {{ user.status }}
+          </span>
+        </div>
+        <UButton
+          icon="i-lucide-message-circle"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          class="opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+          @click.stop="emit('start-dm', user)"
+        />
+      </div>
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,24 @@
+export interface ChatMember {
+    id: string;
+    name: string;
+    color?: string;
+    avatarStyle?: string;
+    isAgent?: boolean;
+    status?: string;
+    /** Doc ID where the user currently is */
+    docId?: string;
+}
+type __VLS_Props = {
+    members: ChatMember[];
+    /** Map of docId -> label for group headers */
+    docLabels?: Record<string, string>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "start-dm": (member: ChatMember) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onStart-dm"?: ((member: ChatMember) => any) | undefined;
+}>, {
+    docLabels: Record<string, 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

@@ -0,0 +1,31 @@
+export interface ChatMessage {
+    id: string;
+    content: string;
+    senderId: string;
+    senderName: string;
+    createdAt: number;
+    /** 'sending' | 'delivered' | 'read' */
+    readState?: string;
+}
+type __VLS_Props = {
+    messages: ChatMessage[];
+    /** Current user's ID for self/other detection */
+    currentUserId?: string;
+    emptyIcon?: string;
+    emptyText?: string;
+    emptySubtext?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "open-doc": (docId: string) => any;
+    "jump-to-quote": (docId: string, from: number, to: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onOpen-doc"?: ((docId: string) => any) | undefined;
+    "onJump-to-quote"?: ((docId: string, from: number, to: number) => any) | undefined;
+}>, {
+    currentUserId: string;
+    emptyIcon: string;
+    emptyText: string;
+    emptySubtext: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,161 @@
+<script setup>
+import { computed } from "vue";
+import { parseMessageContent, renderMessageSegments } from "../../utils/chatContent";
+const props = defineProps({
+  messages: { type: Array, required: true },
+  currentUserId: { type: String, required: false, default: "" },
+  emptyIcon: { type: String, required: false, default: "i-lucide-message-circle" },
+  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 groupedMessages = computed(() => {
+  return props.messages.map((msg, i) => {
+    const prev = props.messages[i - 1];
+    const next = props.messages[i + 1];
+    const GAP = 5 * 60 * 1e3;
+    const isFirstInGroup = !prev || prev.senderId !== msg.senderId || msg.createdAt - prev.createdAt > GAP;
+    const isLastInGroup = !next || next.senderId !== msg.senderId || next.createdAt - msg.createdAt > GAP;
+    return { ...msg, isFirstInGroup, isLastInGroup };
+  });
+});
+function formatTime(ts) {
+  const d = new Date(ts);
+  return d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false });
+}
+function isSelf(senderId) {
+  return senderId === props.currentUserId;
+}
+function hasRichContent(text) {
+  return /@\w+/.test(text) || /https?:\/\//.test(text);
+}
+</script>
+
+<template>
+  <div
+    v-if="messages.length === 0"
+    class="flex flex-col items-center justify-center h-full text-(--ui-text-dimmed)"
+  >
+    <UIcon
+      :name="emptyIcon"
+      class="size-12 mb-2"
+    />
+    <p class="text-sm">
+      {{ emptyText }}
+    </p>
+    <p class="text-xs mt-1">
+      {{ emptySubtext }}
+    </p>
+  </div>
+
+  <div
+    v-for="msg in groupedMessages"
+    :key="msg.id"
+    class="flex gap-2.5"
+    :class="[
+  isSelf(msg.senderId) ? 'flex-row-reverse' : 'flex-row',
+  msg.isFirstInGroup ? 'mt-3' : 'mt-0.5'
+]"
+  >
+    <!-- Avatar: only on first message in group -->
+    <div
+      class="shrink-0 w-6"
+      :class="msg.isFirstInGroup ? 'mt-0.5' : ''"
+    >
+      <UAvatar
+        v-if="msg.isFirstInGroup"
+        :alt="msg.senderName"
+        size="xs"
+      />
+    </div>
+
+    <div
+      class="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'
+]"
+    >
+      <!-- Name + time: first in group -->
+      <div
+        v-if="msg.isFirstInGroup"
+        class="flex items-baseline gap-2 mb-0.5"
+      >
+        <span class="text-xs font-medium text-(--ui-text-highlighted)">
+          {{ isSelf(msg.senderId) ? "You" : msg.senderName }}
+        </span>
+        <span class="text-[10px] text-(--ui-text-dimmed)">
+          {{ formatTime(msg.createdAt) }}
+        </span>
+      </div>
+
+      <!-- Message content -->
+      <template v-if="parseMessageContent(msg.content).kind === 'doc-quote'">
+        <AChatDocQuote
+          v-bind="parseMessageContent(msg.content)"
+          :is-self="isSelf(msg.senderId)"
+          @jump="(docId, from, to) => emit('jump-to-quote', docId, from, to)"
+        />
+      </template>
+      <template v-else-if="parseMessageContent(msg.content).kind === 'doc-link'">
+        <AChatDocLink
+          v-bind="parseMessageContent(msg.content)"
+          :is-self="isSelf(msg.senderId)"
+          @open="(docId) => emit('open-doc', docId)"
+        />
+      </template>
+      <p
+        v-else-if="hasRichContent(msg.content)"
+        class="text-sm text-(--ui-text) whitespace-pre-wrap break-words"
+      >
+        <template
+          v-for="(seg, si) in renderMessageSegments(msg.content)"
+          :key="si"
+        >
+          <a
+            v-if="seg.type === 'link'"
+            :href="seg.url"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-(--ui-color-primary-500) underline underline-offset-2 hover:text-(--ui-color-primary-600) break-all"
+          >{{ seg.url }}</a>
+          <span
+            v-else-if="seg.type === 'mention'"
+            class="text-(--ui-color-primary-500) font-medium"
+          >@{{ seg.name }}</span>
+          <template v-else>
+            {{ seg.value }}
+          </template>
+        </template>
+      </p>
+      <p
+        v-else
+        class="text-sm text-(--ui-text) whitespace-pre-wrap break-words"
+      >
+        {{ msg.content }}
+      </p>
+
+      <!-- Delivery / read indicators on outgoing messages (last in group only) -->
+      <div
+        v-if="isSelf(msg.senderId) && msg.isLastInGroup"
+        class="flex justify-end mt-0.5"
+      >
+        <UIcon
+          v-if="msg.readState === 'sending'"
+          name="i-lucide-clock"
+          class="size-3 text-(--ui-text-dimmed)"
+        />
+        <UIcon
+          v-else-if="msg.readState === 'delivered'"
+          name="i-lucide-check"
+          class="size-3 text-(--ui-text-dimmed)"
+        />
+        <UIcon
+          v-else-if="msg.readState === 'read'"
+          name="i-lucide-check-check"
+          class="size-3 text-(--ui-color-primary-500)"
+        />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,31 @@
+export interface ChatMessage {
+    id: string;
+    content: string;
+    senderId: string;
+    senderName: string;
+    createdAt: number;
+    /** 'sending' | 'delivered' | 'read' */
+    readState?: string;
+}
+type __VLS_Props = {
+    messages: ChatMessage[];
+    /** Current user's ID for self/other detection */
+    currentUserId?: string;
+    emptyIcon?: string;
+    emptyText?: string;
+    emptySubtext?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "open-doc": (docId: string) => any;
+    "jump-to-quote": (docId: string, from: number, to: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onOpen-doc"?: ((docId: string) => any) | undefined;
+    "onJump-to-quote"?: ((docId: string, from: number, to: number) => any) | undefined;
+}>, {
+    currentUserId: string;
+    emptyIcon: string;
+    emptyText: string;
+    emptySubtext: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,84 @@
+/**
+ * Main chat panel composing Messages + Input + Typing + AgentStatus.
+ *
+ * Ported from cou-sh/app/components/chat/ChatDetail.vue — simplified
+ * to a single composable panel that the consuming app wires up.
+ */
+import type { ChatMessage } from './AChatMessages.vue.js';
+import type { TypingUser } from './AChatTypingIndicator.vue.js';
+import type { ActiveAgent } from './AChatAgentStatus.vue.js';
+import type { ChatMentionUser } from './AChatInput.vue.js';
+type __VLS_Props = {
+    /** Channel/conversation label */
+    label: string;
+    /** Messages to display */
+    messages: ChatMessage[];
+    /** Current user's ID */
+    currentUserId?: string;
+    /** Whether the user can send messages */
+    canSend?: boolean;
+    /** Users currently typing */
+    typingUsers?: TypingUser[];
+    /** Active agent indicators */
+    activeAgents?: ActiveAgent[];
+    /** Users available for @mention */
+    mentionUsers?: ChatMentionUser[];
+    /** Input placeholder */
+    placeholder?: string;
+    /** Whether to auto-focus the input */
+    autofocus?: boolean;
+    /** Empty state customization */
+    emptyIcon?: string;
+    emptyText?: string;
+    emptySubtext?: string;
+};
+declare function scrollToBottom(): void;
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+} & {
+    trailing?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    scrollToBottom: typeof scrollToBottom;
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    send: (content: string) => any;
+    typing: () => any;
+    "doc-drop": (payload: {
+        docId: string;
+        label: string;
+    }) => any;
+    "open-doc": (docId: string) => any;
+    "jump-to-quote": (docId: string, from: number, to: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onSend?: ((content: string) => any) | undefined;
+    onTyping?: (() => any) | undefined;
+    "onDoc-drop"?: ((payload: {
+        docId: string;
+        label: string;
+    }) => any) | undefined;
+    "onOpen-doc"?: ((docId: string) => any) | undefined;
+    "onJump-to-quote"?: ((docId: string, from: number, to: number) => any) | undefined;
+}>, {
+    placeholder: string;
+    autofocus: boolean;
+    canSend: boolean;
+    mentionUsers: ChatMentionUser[];
+    currentUserId: string;
+    emptyIcon: string;
+    emptyText: string;
+    emptySubtext: string;
+    typingUsers: TypingUser[];
+    activeAgents: ActiveAgent[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,89 @@
+<script setup>
+import { ref, watch, nextTick, onMounted } from "vue";
+const props = defineProps({
+  label: { type: String, required: true },
+  messages: { type: Array, required: true },
+  currentUserId: { type: String, required: false, default: "" },
+  canSend: { type: Boolean, required: false, default: true },
+  typingUsers: { type: Array, required: false, default: () => [] },
+  activeAgents: { type: Array, required: false, default: () => [] },
+  mentionUsers: { type: Array, required: false, default: () => [] },
+  placeholder: { type: String, required: false, default: "Type a message\u2026" },
+  autofocus: { type: Boolean, required: false, default: false },
+  emptyIcon: { type: String, required: false, default: "i-lucide-message-circle" },
+  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(["send", "typing", "doc-drop", "open-doc", "jump-to-quote", "close"]);
+const messagesContainer = ref(null);
+const chatInputRef = ref(null);
+function scrollToBottom() {
+  if (messagesContainer.value) {
+    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
+  }
+}
+watch(() => props.messages.length, () => {
+  nextTick(() => scrollToBottom());
+});
+onMounted(() => {
+  nextTick(() => scrollToBottom());
+  if (props.autofocus) {
+    chatInputRef.value?.focus();
+  }
+});
+defineExpose({
+  scrollToBottom,
+  focus: () => chatInputRef.value?.focus()
+});
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <!-- Header -->
+    <div class="shrink-0 flex items-center gap-2 px-4 py-2 border-b border-(--ui-border) bg-(--ui-bg-elevated)/40">
+      <slot name="leading" />
+      <h3 class="text-sm font-semibold text-(--ui-text-highlighted) truncate flex-1">
+        {{ label }}
+      </h3>
+      <slot name="trailing" />
+      <UButton
+        icon="i-lucide-x"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        @click="emit('close')"
+      />
+    </div>
+
+    <!-- Messages area -->
+    <div
+      ref="messagesContainer"
+      class="flex-1 overflow-y-auto px-4 sm:px-6 py-4"
+    >
+      <AChatMessages
+        :messages="messages"
+        :current-user-id="currentUserId"
+        :empty-icon="emptyIcon"
+        :empty-text="emptyText"
+        :empty-subtext="emptySubtext"
+        @open-doc="(docId) => emit('open-doc', docId)"
+        @jump-to-quote="(docId, from, to) => emit('jump-to-quote', docId, from, to)"
+      />
+
+      <AChatAgentStatus :agents="activeAgents" />
+      <AChatTypingIndicator :users="typingUsers" />
+    </div>
+
+    <!-- Input -->
+    <AChatInput
+      ref="chatInputRef"
+      :autofocus="autofocus"
+      :can-send="canSend"
+      :placeholder="placeholder"
+      :mention-users="mentionUsers"
+      @send="(content) => emit('send', content)"
+      @typing="emit('typing')"
+      @doc-drop="(payload) => emit('doc-drop', payload)"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,84 @@
+/**
+ * Main chat panel composing Messages + Input + Typing + AgentStatus.
+ *
+ * Ported from cou-sh/app/components/chat/ChatDetail.vue — simplified
+ * to a single composable panel that the consuming app wires up.
+ */
+import type { ChatMessage } from './AChatMessages.vue.js';
+import type { TypingUser } from './AChatTypingIndicator.vue.js';
+import type { ActiveAgent } from './AChatAgentStatus.vue.js';
+import type { ChatMentionUser } from './AChatInput.vue.js';
+type __VLS_Props = {
+    /** Channel/conversation label */
+    label: string;
+    /** Messages to display */
+    messages: ChatMessage[];
+    /** Current user's ID */
+    currentUserId?: string;
+    /** Whether the user can send messages */
+    canSend?: boolean;
+    /** Users currently typing */
+    typingUsers?: TypingUser[];
+    /** Active agent indicators */
+    activeAgents?: ActiveAgent[];
+    /** Users available for @mention */
+    mentionUsers?: ChatMentionUser[];
+    /** Input placeholder */
+    placeholder?: string;
+    /** Whether to auto-focus the input */
+    autofocus?: boolean;
+    /** Empty state customization */
+    emptyIcon?: string;
+    emptyText?: string;
+    emptySubtext?: string;
+};
+declare function scrollToBottom(): void;
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+} & {
+    trailing?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    scrollToBottom: typeof scrollToBottom;
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    send: (content: string) => any;
+    typing: () => any;
+    "doc-drop": (payload: {
+        docId: string;
+        label: string;
+    }) => any;
+    "open-doc": (docId: string) => any;
+    "jump-to-quote": (docId: string, from: number, to: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onSend?: ((content: string) => any) | undefined;
+    onTyping?: (() => any) | undefined;
+    "onDoc-drop"?: ((payload: {
+        docId: string;
+        label: string;
+    }) => any) | undefined;
+    "onOpen-doc"?: ((docId: string) => any) | undefined;
+    "onJump-to-quote"?: ((docId: string, from: number, to: number) => any) | undefined;
+}>, {
+    placeholder: string;
+    autofocus: boolean;
+    canSend: boolean;
+    mentionUsers: ChatMentionUser[];
+    currentUserId: string;
+    emptyIcon: string;
+    emptyText: string;
+    emptySubtext: string;
+    typingUsers: TypingUser[];
+    activeAgents: ActiveAgent[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,11 @@
+export interface TypingUser {
+    name: string;
+    avatarStyle?: string;
+}
+type __VLS_Props = {
+    /** Users currently typing */
+    users: TypingUser[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,58 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  users: { type: Array, required: true }
+});
+const typingLabel = computed(() => {
+  const names = props.users.map((u) => u.name);
+  if (names.length === 0) return "";
+  if (names.length === 1) return `${names[0]} is typing`;
+  if (names.length === 2) return `${names[0]} and ${names[1]} are typing`;
+  return `${names[0]}, ${names[1]} and ${names.length - 2} others are typing`;
+});
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition-all duration-300 ease-out"
+    enter-from-class="opacity-0 max-h-0"
+    enter-to-class="opacity-100 max-h-16"
+    leave-active-class="transition-all duration-200 ease-in"
+    leave-from-class="opacity-100 max-h-16"
+    leave-to-class="opacity-0 max-h-0"
+  >
+    <div
+      v-if="users.length"
+      class="flex gap-2.5 items-end mt-3 overflow-hidden"
+    >
+      <UAvatarGroup size="xs">
+        <UAvatar
+          v-for="user in users"
+          :key="user.name"
+          :alt="user.name"
+          size="xs"
+          :style="user.avatarStyle"
+        />
+      </UAvatarGroup>
+      <div class="flex items-center gap-2">
+        <div class="bg-(--ui-bg-elevated) rounded-xl px-3 py-2.5">
+          <span class="flex gap-1 items-center h-4">
+            <span
+              v-for="i in 3"
+              :key="i"
+              class="size-1.5 rounded-full bg-(--ui-text-muted) animate-[chat-typing-wave_1.4s_ease-in-out_infinite]"
+              :style="{ animationDelay: `${(i - 1) * 160}ms` }"
+            />
+          </span>
+        </div>
+        <span class="text-xs text-(--ui-text-dimmed) whitespace-nowrap">
+          {{ typingLabel }}
+        </span>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+@keyframes chat-typing-wave{0%,60%,to{opacity:.4;transform:scale(1)}30%{opacity:1;transform:scale(1.4)}}
+</style>