@meistrari/chat-nuxt 4.10.0-rc.0 → 4.10.0-rc.2

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@meistrari/chat-nuxt",
   "configKey": "chatNuxt",
-  "version": "4.10.0-rc.0",
+  "version": "4.10.0-rc.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/embed/components/chat-embed-inner.d.vue.ts

@@ -19,27 +19,27 @@ type __VLS_Props = {
     user?: EmbedUser | null;
     features?: Partial<ChatFeatureConfig>;
 };
-declare var __VLS_14: {}, __VLS_92: {}, __VLS_105: {
+declare var __VLS_14: {}, __VLS_92: {}, __VLS_107: {
     message: useChatAuth;
-}, __VLS_118: {}, __VLS_127: {}, __VLS_191: {}, __VLS_210: {
+}, __VLS_120: {}, __VLS_129: {}, __VLS_193: {}, __VLS_214: {
     message: useChatAuth;
-}, __VLS_223: {};
+}, __VLS_227: {};
 type __VLS_Slots = {} & {
     'sidebar-bottom'?: (props: typeof __VLS_14) => any;
 } & {
     'composer-bottom'?: (props: typeof __VLS_92) => any;
 } & {
-    'failed-message-actions'?: (props: typeof __VLS_105) => any;
+    'failed-message-actions'?: (props: typeof __VLS_107) => any;
 } & {
-    'composer-bottom'?: (props: typeof __VLS_118) => any;
+    'composer-bottom'?: (props: typeof __VLS_120) => any;
 } & {
-    'topbar-leading'?: (props: typeof __VLS_127) => any;
+    'topbar-leading'?: (props: typeof __VLS_129) => any;
 } & {
-    'composer-bottom'?: (props: typeof __VLS_191) => any;
+    'composer-bottom'?: (props: typeof __VLS_193) => any;
 } & {
-    'failed-message-actions'?: (props: typeof __VLS_210) => any;
+    'failed-message-actions'?: (props: typeof __VLS_214) => any;
 } & {
-    'composer-bottom'?: (props: typeof __VLS_223) => any;
+    'composer-bottom'?: (props: typeof __VLS_227) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:conversationId": (value: string | null) => any;

package/dist/runtime/embed/components/chat-embed-inner.vue

@@ -2,10 +2,11 @@
 import { inject, provide, useSlots } from "vue";
 import { useChatHarnessAdapter } from "../composables/harness-adapter";
 import ChatMessageList from "../../messages/components/chat-message-list.vue";
+import { shouldScrollOnComposerResize } from "../../messages/composables/use-stick-to-bottom";
 import { CHAT_COMPOSER_EXTENSION_KEY } from "../../types/composer";
 import { CHAT_MESSAGE_SEND_KEY } from "../../types/messages";
 import { useChatAuth } from "#chat-auth";
-import { useBreakpoints } from "@vueuse/core";
+import { useBreakpoints, useResizeObserver } from "@vueuse/core";
 import { useCitationPanel } from "../../citations/composables/citation-panel";
 import { exportConversationToMarkdown } from "../../conversations/export";
 import { CHAT_MOBILE_BREAKPOINT } from "../../shared/breakpoints";
@@ -175,6 +176,15 @@ provide("chat-answer-target", answerTarget);
 function setAnswerTarget(el) {
   answerTarget.value = el instanceof HTMLElement ? el : null;
 }
+const messageListRef = ref(null);
+const composerRef = ref(null);
+let composerHeights = { composer: 0, dock: 0 };
+useResizeObserver(composerRef, ([entry]) => {
+  const next = { composer: entry?.contentRect.height ?? 0, dock: answerTarget.value?.offsetHeight ?? 0 };
+  if (shouldScrollOnComposerResize(composerHeights, next, Boolean(messageListRef.value?.isPinned)))
+    requestAnimationFrame(() => messageListRef.value?.scrollToBottom());
+  composerHeights = next;
+});
 const messageInputRef = ref(null);
 const PROMPT_INPUT_HINTS = [
   { icon: "i-ph-at-bold", label: "Para mencionar arquivos" },
@@ -1053,6 +1063,7 @@ async function handleDelete() {
 
                 <ChatMessageList
                     :key="currentConversation?.id ?? 'draft'"
+                    ref="messageListRef"
                     :messages="messages"
                     :events="displayConversationEvents"
                     :streaming-active-message-id="streamingActiveMessageId"
@@ -1069,7 +1080,7 @@ async function handleDelete() {
                         <slot name="failed-message-actions" v-bind="slotProps" />
                     </template>
                 </ChatMessageList>
-                <div data-chat-composer flex="~ col" gap-12px min-h-0>
+                <div ref="composerRef" data-chat-composer flex="~ col" gap-12px min-h-0>
                     <div :ref="setAnswerTarget" data-chat-answer-dock class="empty:hidden max-h-[50dvh] overflow-y-auto" />
                     <ChatMessageInput
                         ref="messageInputRef"
@@ -1266,6 +1277,7 @@ async function handleDelete() {
             >
                 <ChatMessageList
                     :key="currentConversation?.id ?? 'draft'"
+                    ref="messageListRef"
                     :messages="messages"
                     :events="displayConversationEvents"
                     :streaming-active-message-id="streamingActiveMessageId"
@@ -1282,7 +1294,7 @@ async function handleDelete() {
                         <slot name="failed-message-actions" v-bind="slotProps" />
                     </template>
                 </ChatMessageList>
-                <div data-chat-composer flex="~ col" gap-12px min-h-0>
+                <div ref="composerRef" data-chat-composer flex="~ col" gap-12px min-h-0>
                     <div :ref="setAnswerTarget" data-chat-answer-dock class="empty:hidden max-h-[50dvh] overflow-y-auto" />
                     <ChatMessageInput
                         ref="messageInputRef"

package/dist/runtime/embed/components/chat-embed-inner.vue.d.ts

@@ -19,27 +19,27 @@ type __VLS_Props = {
     user?: EmbedUser | null;
     features?: Partial<ChatFeatureConfig>;
 };
-declare var __VLS_14: {}, __VLS_92: {}, __VLS_105: {
+declare var __VLS_14: {}, __VLS_92: {}, __VLS_107: {
     message: useChatAuth;
-}, __VLS_118: {}, __VLS_127: {}, __VLS_191: {}, __VLS_210: {
+}, __VLS_120: {}, __VLS_129: {}, __VLS_193: {}, __VLS_214: {
     message: useChatAuth;
-}, __VLS_223: {};
+}, __VLS_227: {};
 type __VLS_Slots = {} & {
     'sidebar-bottom'?: (props: typeof __VLS_14) => any;
 } & {
     'composer-bottom'?: (props: typeof __VLS_92) => any;
 } & {
-    'failed-message-actions'?: (props: typeof __VLS_105) => any;
+    'failed-message-actions'?: (props: typeof __VLS_107) => any;
 } & {
-    'composer-bottom'?: (props: typeof __VLS_118) => any;
+    'composer-bottom'?: (props: typeof __VLS_120) => any;
 } & {
-    'topbar-leading'?: (props: typeof __VLS_127) => any;
+    'topbar-leading'?: (props: typeof __VLS_129) => any;
 } & {
-    'composer-bottom'?: (props: typeof __VLS_191) => any;
+    'composer-bottom'?: (props: typeof __VLS_193) => any;
 } & {
-    'failed-message-actions'?: (props: typeof __VLS_210) => any;
+    'failed-message-actions'?: (props: typeof __VLS_214) => any;
 } & {
-    'composer-bottom'?: (props: typeof __VLS_223) => any;
+    'composer-bottom'?: (props: typeof __VLS_227) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:conversationId": (value: string | null) => any;

package/dist/runtime/files/components/{audio-preview.d.vue.ts → chat-file-audio.d.vue.ts}

@@ -1,14 +1,15 @@
+import type { ChatFileMenuItem } from './chat-file-card.vue.js';
 type __VLS_Props = {
-    url: string;
-    name?: string;
-    clickable?: boolean;
+    url?: string;
+    iconSrc: string;
+    name: string;
+    meta: string;
+    menuItems: ChatFileMenuItem[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: () => any;
-    loaded: () => any;
+    open: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClick?: (() => any) | undefined;
-    onLoaded?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/files/components/chat-file-audio.vue

@@ -0,0 +1,94 @@
+<script setup>
+import ChatFileCard from "./chat-file-card.vue";
+import { formatPlaybackTime } from "../formatting";
+const props = defineProps({
+  url: { type: String, required: false },
+  iconSrc: { type: String, required: true },
+  name: { type: String, required: true },
+  meta: { type: String, required: true },
+  menuItems: { type: Array, required: true }
+});
+const emit = defineEmits(["open"]);
+const player = ref();
+const playing = ref(false);
+const currentTime = ref(0);
+const duration = ref(0);
+const failed = ref(false);
+const progress = computed(() => duration.value > 0 ? currentTime.value / duration.value * 100 : 0);
+function togglePlayback() {
+  const audio = player.value;
+  if (!audio)
+    return;
+  if (audio.paused)
+    void audio.play();
+  else
+    audio.pause();
+}
+function seek(event) {
+  const audio = player.value;
+  if (!audio || duration.value <= 0)
+    return;
+  audio.currentTime = Number(event.target.value) / 100 * duration.value;
+}
+watch(() => props.url, () => {
+  playing.value = false;
+  currentTime.value = 0;
+  duration.value = 0;
+  failed.value = false;
+});
+</script>
+
+<template>
+    <ChatFileCard
+        :icon-src="iconSrc"
+        :name="name"
+        :meta="failed ? 'Falha ao carregar \xE1udio' : meta"
+        :menu-items="menuItems"
+        :disabled="!url"
+        @open="emit('open')"
+    >
+        <template #actions>
+            <TelaIconButton
+                :icon="playing ? 'i-ph-pause-fill' : 'i-ph-play-fill'"
+                color="secondary"
+                size="xs"
+                :aria-label="playing ? 'Pausar \xE1udio' : 'Reproduzir \xE1udio'"
+                :disabled="!url || failed"
+                @click="togglePlayback"
+            />
+        </template>
+        <div flex items-center gap-12px px-12px py-10px border-t-0.5px border>
+            <input
+                type="range"
+                min="0"
+                max="100"
+                step="0.1"
+                :value="progress"
+                :disabled="!url || failed || duration <= 0"
+                aria-label="Posição do áudio"
+                flex-1 cursor-pointer text-primary
+                class="chat-file-audio__track"
+                @input="seek"
+            >
+            <span body-12-regular text-secondary tabular-nums shrink-0>
+                {{ formatPlaybackTime(currentTime) }} / {{ formatPlaybackTime(duration) }}
+            </span>
+        </div>
+        <audio
+            v-if="url"
+            ref="player"
+            :src="url"
+            preload="metadata"
+            @play="playing = true"
+            @pause="playing = false"
+            @ended="playing = false"
+            @timeupdate="currentTime = player?.currentTime ?? 0"
+            @loadedmetadata="duration = player?.duration ?? 0"
+            @error="failed = true"
+        />
+    </ChatFileCard>
+</template>
+
+<style scoped>
+.chat-file-audio__track{accent-color:currentColor;height:4px}
+</style>

package/dist/runtime/files/components/{image-preview.d.vue.ts → chat-file-audio.vue.d.ts}

@@ -1,14 +1,15 @@
+import type { ChatFileMenuItem } from './chat-file-card.vue.js';
 type __VLS_Props = {
-    url: string;
-    maxHeight?: number;
-    clickable?: boolean;
+    url?: string;
+    iconSrc: string;
+    name: string;
+    meta: string;
+    menuItems: ChatFileMenuItem[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: () => any;
-    loaded: () => any;
+    open: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClick?: (() => any) | undefined;
-    onLoaded?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/files/components/chat-file-card.d.vue.ts

@@ -0,0 +1,31 @@
+export interface ChatFileMenuItem {
+    label: string;
+    icon: string;
+    click: () => void;
+}
+type __VLS_Props = {
+    iconSrc: string;
+    name: string;
+    meta: string;
+    menuItems: ChatFileMenuItem[];
+    disabled?: boolean;
+};
+declare var __VLS_1: {}, __VLS_14: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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/files/components/chat-file-card.vue

@@ -0,0 +1,44 @@
+<script setup>
+defineProps({
+  iconSrc: { type: String, required: true },
+  name: { type: String, required: true },
+  meta: { type: String, required: true },
+  menuItems: { type: Array, required: true },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["open"]);
+</script>
+
+<template>
+    <div w-full max-w-480px rounded-12px border-0.5px border bg overflow-hidden data-chat-file="card">
+        <div flex items-center gap-12px p-12px>
+            <button
+                type="button"
+                flex items-center gap-12px flex-1 min-w-0 text-left
+                :class="disabled ? 'cursor-default' : 'cursor-pointer'"
+                :disabled="disabled"
+                :aria-label="`Abrir ${name}`"
+                @click="emit('open')"
+            >
+                <span size-40px rounded-8px bg-subtle flex items-center justify-center shrink-0>
+                    <img :src="iconSrc" alt="" size-20px>
+                </span>
+                <span flex flex-col min-w-0>
+                    <span body-14-medium text-primary truncate :title="name">{{ name }}</span>
+                    <span body-12-regular text-secondary truncate>{{ meta }}</span>
+                </span>
+            </button>
+            <slot name="actions" />
+            <TelaDropdownMenu :items="menuItems" align="end">
+                <TelaIconButton
+                    icon="i-ph-dots-three"
+                    color="secondary"
+                    size="3xs"
+                    aria-label="Ações do arquivo"
+                    :disabled="disabled"
+                />
+            </TelaDropdownMenu>
+        </div>
+        <slot />
+    </div>
+</template>

package/dist/runtime/files/components/chat-file-card.vue.d.ts

@@ -0,0 +1,31 @@
+export interface ChatFileMenuItem {
+    label: string;
+    icon: string;
+    click: () => void;
+}
+type __VLS_Props = {
+    iconSrc: string;
+    name: string;
+    meta: string;
+    menuItems: ChatFileMenuItem[];
+    disabled?: boolean;
+};
+declare var __VLS_1: {}, __VLS_14: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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;
+    };
+};