@meistrari/chat-nuxt 4.4.1-rc.0 → 4.5.0-rc.0

package/dist/module.json

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

package/dist/runtime/conversations/components/chat-conversation-creator-filter.vue

@@ -1,14 +1,13 @@
 <script setup>
 import { useConversations } from "../composables/conversations";
-import { conversationCreatorFilterOptions } from "../../types/schemas/chat/ui.js";
 import { hasConversationCreatorFilterResults } from "../creator-filter";
 import { useEmbedConfig } from "../../embed/composables/embed-config";
+const FILTER_OPTIONS = [
+  { value: "all", label: "Todas" },
+  { value: "mine", label: "Minhas" }
+];
 const embedConfig = useEmbedConfig();
 const { conversationCreatorFilter, conversationCreatorFilterCounts } = useConversations();
-const filterOptions = computed(() => conversationCreatorFilterOptions.map((option) => ({
-  value: option.value,
-  label: `${option.label} ${conversationCreatorFilterCounts.value[option.value]}`
-})));
 const showConversationCreatorFilter = computed(
   () => !embedConfig?.hideConversationCreatorFilter.value && hasConversationCreatorFilterResults(conversationCreatorFilterCounts.value)
 );
@@ -23,13 +22,25 @@ function handleFilterUpdate(value) {
 </script>
 
 <template>
-    <TelaSegmentToggle
+    <TelaSelectMenu
         v-if="showConversationCreatorFilter"
         :model-value="conversationCreatorFilter"
-        :options="filterOptions"
-        class="w-full"
-        buttons-class="flex-1 min-w-0 px-8px"
-        aria-label="Filtrar conversas por criador"
+        :options="FILTER_OPTIONS"
+        content-class="min-w-130px! rounded-16px!"
+        enable-portal
         @update:model-value="handleFilterUpdate"
-    />
+    >
+        <template #trigger>
+            <!-- Styled to match the sibling "+" icon button; the caret is hidden. -->
+            <TelaSelectMenuTrigger
+                aria-label="Filtrar conversas por criador"
+                class="size-22px! p-3px! gap-0! justify-center! rounded-6px! border-0! bg-transparent! shadow-none! text-icon-tertiary hover:bg-muted! hover:text-primary data-[state=open]:bg-muted! data-[state=open]:text-primary [&>:last-child]:hidden"
+            >
+                <TelaIcon
+                    name="i-ph-sliders-horizontal"
+                    size="16px"
+                />
+            </TelaSelectMenuTrigger>
+        </template>
+    </TelaSelectMenu>
 </template>

package/dist/runtime/conversations/components/chat-conversation-list.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useVirtualList } from "@vueuse/core";
+import { usePreferredReducedMotion, useVirtualList } from "@vueuse/core";
 import { useConversationList } from "../composables/conversation-list";
 const props = defineProps({
   conversations: { type: null, required: true },
@@ -55,6 +55,46 @@ const ROW_HEIGHT = 32;
 const HEADING_HEIGHT = 28;
 const ERROR_ROW_HEIGHT = 20;
 const SECTION_GAP = 10;
+const FOLDER_TOGGLE_DURATION = 270;
+const togglingFolder = shallowRef(null);
+const reducedMotion = usePreferredReducedMotion();
+let togglingFrame = 0;
+function easeOutCubic(t) {
+  return 1 - (1 - t) ** 3;
+}
+function stopFolderAnimation() {
+  if (togglingFrame)
+    cancelAnimationFrame(togglingFrame);
+  togglingFrame = 0;
+  togglingFolder.value = null;
+}
+function animateFolder(groupId, from, to) {
+  stopFolderAnimation();
+  if (typeof requestAnimationFrame === "undefined" || reducedMotion.value === "reduce")
+    return;
+  const startedAt = Date.now();
+  const tick = () => {
+    const t = Math.min((Date.now() - startedAt) / FOLDER_TOGGLE_DURATION, 1);
+    if (t >= 1) {
+      togglingFrame = 0;
+      togglingFolder.value = null;
+      return;
+    }
+    togglingFolder.value = { groupId, progress: from + (to - from) * easeOutCubic(t) };
+    togglingFrame = requestAnimationFrame(tick);
+  };
+  tick();
+}
+function folderProgress(groupId) {
+  return togglingFolder.value?.groupId === groupId ? togglingFolder.value.progress : null;
+}
+function handleToggleGroup(groupId) {
+  const wasOpen = groupItems.value.find((group) => group.group.id === groupId)?.open ?? false;
+  const from = folderProgress(groupId) ?? (wasOpen ? 1 : 0);
+  toggleGroup(groupId);
+  animateFolder(groupId, from, wasOpen ? 0 : 1);
+}
+onBeforeUnmount(stopFolderAnimation);
 const rows = computed(() => {
   const result = [];
   if (groupItems.value.length > 0)
@@ -64,14 +104,18 @@ const rows = computed(() => {
     result.push({ type: "group", key: `group:${groupId}`, height: ROW_HEIGHT, groupId, groupBucket });
     if (groupBucket.isRenaming && renameGroupError.value)
       result.push({ type: "error", key: `error:${groupId}`, height: ERROR_ROW_HEIGHT, groupId, groupBucket });
-    if (!groupBucket.open)
+    const progress = folderProgress(groupId);
+    if (!groupBucket.open && progress === null)
       continue;
-    for (const conversation of groupBucket.items)
-      result.push({ type: "conversation", key: conversation.id, height: ROW_HEIGHT, groupId, conversation });
+    const children = groupBucket.items.map((conversation) => ({ type: "conversation", key: conversation.id, height: ROW_HEIGHT, groupId, conversation }));
     if (groupBucket.showNewConversationAction)
-      result.push({ type: "new", key: `new:${groupId}`, height: ROW_HEIGHT, groupId, groupBucket });
+      children.push({ type: "new", key: `new:${groupId}`, height: ROW_HEIGHT, groupId, groupBucket });
     else if (groupBucket.showSearchEmpty)
-      result.push({ type: "empty", key: `empty:${groupId}`, height: ROW_HEIGHT, groupId, groupBucket });
+      children.push({ type: "empty", key: `empty:${groupId}`, height: ROW_HEIGHT, groupId, groupBucket });
+    const scale = progress ?? 1;
+    const clipHeight = children.length * ROW_HEIGHT * scale;
+    for (const child of children)
+      result.push({ ...child, height: ROW_HEIGHT * scale, layoutHeight: ROW_HEIGHT, clipHeight });
   }
   if (groupItems.value.length > 0)
     result.push({ type: "spacer", key: "spacer", height: SECTION_GAP, groupId: null });
@@ -79,8 +123,20 @@ const rows = computed(() => {
   for (const conversation of ungroupedConversations.value)
     result.push({ type: "conversation", key: conversation.id, height: ROW_HEIGHT, groupId: null, conversation });
   let offset = 0;
+  let clip = null;
   return result.map((row) => {
-    const positionedRow = { ...row, offset };
+    let clipTop;
+    let localOffset = 0;
+    if (row.clipHeight !== void 0 && row.groupId) {
+      if (clip?.groupId !== row.groupId)
+        clip = { groupId: row.groupId, top: offset, localOffset: 0 };
+      clipTop = clip.top;
+      localOffset = clip.localOffset;
+      clip.localOffset += row.layoutHeight ?? row.height;
+    } else {
+      clip = null;
+    }
+    const positionedRow = { ...row, offset, clipTop, localOffset };
     offset += row.height;
     return positionedRow;
   });
@@ -100,6 +156,25 @@ const renderedRows = computed(() => {
   }
   return [...indexes].sort((a, b) => a - b).map((index) => ({ ...rows.value[index], index }));
 });
+const renderedBlocks = computed(() => {
+  const blocks = [];
+  const clipBlocks = /* @__PURE__ */ new Map();
+  for (const row of renderedRows.value) {
+    if (row.clipTop === void 0 || !row.groupId) {
+      blocks.push({ key: row.key, top: row.offset, height: row.height, clip: false, opacity: 1, rows: [row] });
+      continue;
+    }
+    const existing = clipBlocks.get(row.groupId);
+    if (existing) {
+      existing.rows.push(row);
+      continue;
+    }
+    const block = { key: `clip:${row.groupId}`, top: row.clipTop, height: row.clipHeight ?? 0, clip: true, opacity: folderProgress(row.groupId) ?? 1, rows: [row] };
+    clipBlocks.set(row.groupId, block);
+    blocks.push(block);
+  }
+  return blocks;
+});
 const totalHeight = computed(() => {
   const last = rows.value.at(-1);
   return last ? last.offset + last.height : 0;
@@ -205,176 +280,187 @@ function dropTargetClass(row) {
             </p>
         </div>
 
-        <div v-else v-bind="containerProps" flex-1 min-h-0 mt-4px>
+        <div v-else v-bind="containerProps" flex-1 min-h-0 mt-4px no-scrollbar>
             <div relative :style="{ height: `${totalHeight}px` }">
                 <div
-                    v-for="row in renderedRows"
-                    :key="row.key"
-                    :style="{ height: `${row.height}px`, top: `${row.offset}px` }"
+                    v-for="block in renderedBlocks"
+                    :key="block.key"
                     absolute inset-x-0
-                    :data-row-index="row.index"
-                    rounded-8px
-                    :class="dropTargetClass(row)"
-                    @keydown="handleRowKeydown($event, row.index)"
-                    @focusin="retainedRowKey = row.key"
-                    @pointerdown="retainedRowKey = row.key"
-                    @dragstart.capture="draggedRowKey = row.key"
-                    @dragend.capture="draggedRowKey = null"
-                    v-on="dropListeners(row)"
+                    :class="block.clip ? 'overflow-hidden' : ''"
+                    :style="{ top: `${block.top}px`, height: `${block.height}px`, opacity: block.opacity }"
                 >
-                    <div v-if="row.type === 'folders'" h-full flex items-center justify-between pl-12px pr-2px>
-                        <span body-12-medium text-tertiary>
-                            Pastas
-                        </span>
-                        <TelaIconButton
-                            icon="i-ph-plus"
-                            color="secondary"
-                            size="sm"
-                            button-class="p-3px! rounded-6px!"
-                            aria-label="Nova pasta"
-                            @click="createNewGroup"
-                        />
-                    </div>
-                    <div v-else-if="row.type === 'ungrouped'" h-full flex items-center justify-between pl-12px pr-2px>
-                        <span body-12-medium text-secondary>
-                            {{ ungroupedConversationLabel }}
-                        </span>
-                        <TelaIconButton
-                            icon="i-ph-plus"
-                            color="secondary"
-                            size="sm"
-                            button-class="p-3px! rounded-6px!"
-                            aria-label="Nova conversa"
-                            @click="startUngroupedConversation"
-                        />
-                    </div>
                     <div
-                        v-if="row.type === 'group'"
-                        pl-12px pr-4px
-                        h-30px
+                        v-for="row in block.rows"
+                        :key="row.key"
+                        :style="{ height: `${row.layoutHeight ?? row.height}px`, top: `${row.localOffset}px` }"
+                        absolute inset-x-0
+                        :data-row-index="row.index"
                         rounded-8px
-                        class="group hover:bg-subtle"
-                        :data-active="row.groupBucket.open && !row.groupBucket.dropTarget"
+                        :class="dropTargetClass(row)"
+                        @keydown="handleRowKeydown($event, row.index)"
+                        @focusin="retainedRowKey = row.key"
+                        @pointerdown="retainedRowKey = row.key"
+                        @dragstart.capture="draggedRowKey = row.key"
+                        @dragend.capture="draggedRowKey = null"
+                        v-on="dropListeners(row)"
                     >
-                        <div flex items-center justify-between h-full gap-8px>
-                            <template v-if="row.groupBucket.isRenaming">
-                                <TelaIcon
-                                    :name="row.groupBucket.folderIcon"
-                                    size="16px"
-                                    color="icon-secondary"
-                                    shrink-0
+                        <div v-if="row.type === 'folders'" h-full flex items-center justify-between pl-12px pr-2px>
+                            <span body-12-medium text-tertiary>
+                                Pastas
+                            </span>
+                            <TelaIconButton
+                                icon="i-ph-plus"
+                                color="secondary"
+                                size="sm"
+                                button-class="p-3px! rounded-6px!"
+                                aria-label="Nova pasta"
+                                @click="createNewGroup"
+                            />
+                        </div>
+                        <div v-else-if="row.type === 'ungrouped'" h-full flex items-center justify-between pl-12px pr-2px>
+                            <span body-12-medium text-tertiary>
+                                {{ ungroupedConversationLabel }}
+                            </span>
+                            <div flex items-center gap-2px>
+                                <ChatConversationCreatorFilter />
+                                <TelaIconButton
+                                    icon="i-ph-plus"
+                                    color="secondary"
+                                    size="sm"
+                                    button-class="p-3px! rounded-6px!"
+                                    aria-label="Nova conversa"
+                                    @click="startUngroupedConversation"
                                 />
-                                <div relative flex-1 min-w-0 flex items-center>
-                                    <input
-                                        :ref="(element) => setRenameGroupInputRef(element, row.groupBucket.group.id)"
-                                        v-model="renameGroupName"
-                                        type="text"
-                                        autocomplete="off"
-                                        maxlength="80"
-                                        aria-label="Nome da pasta"
-                                        w-full min-w-0
-                                        bg-transparent border-none outline-none
-                                        body-14-medium text-taupe-600
-                                        p-0
-                                        :disabled="groupActionLoading"
-                                        @blur="handleRenameGroupBlur"
-                                        @keydown.enter.prevent="submitRenameGroup"
-                                        @keydown.escape.prevent.stop="cancelRenameGroup"
-                                        @click.stop
-                                        @dblclick.stop
-                                    >
-                                    <div
-                                        aria-hidden="true"
-                                        absolute inset-x-0 bottom--0.5px h-0.5px pointer-events-none
-                                        :class="renameGroupError ? 'bg-red-500' : 'bg-border'"
-                                    />
-                                </div>
-                            </template>
-
-                            <template v-else>
-                                <button
-                                    type="button"
-                                    h-full flex-1 min-w-0
-                                    flex items-center gap-8px
-                                    text-left
-                                    cursor-pointer
-                                    :aria-expanded="row.groupBucket.open"
-                                    @click="toggleGroup(row.groupBucket.group.id)"
-                                >
+                            </div>
+                        </div>
+                        <div
+                            v-if="row.type === 'group'"
+                            pl-12px pr-4px
+                            h-30px
+                            rounded-8px
+                            class="group hover:bg-subtle"
+                            :data-active="row.groupBucket.open && !row.groupBucket.dropTarget"
+                        >
+                            <div flex items-center justify-between h-full gap-8px>
+                                <template v-if="row.groupBucket.isRenaming">
                                     <TelaIcon
                                         :name="row.groupBucket.folderIcon"
-                                        size="16px"
-                                        color="icon-tertiary"
+                                        size="18px"
+                                        color="icon-secondary"
                                         shrink-0
                                     />
-                                    <span min-w-0 truncate body-14-medium text-taupe-700>
-                                        {{ row.groupBucket.group.name }}
-                                    </span>
-                                </button>
+                                    <div relative flex-1 min-w-0 flex items-center>
+                                        <input
+                                            :ref="(element) => setRenameGroupInputRef(element, row.groupBucket.group.id)"
+                                            v-model="renameGroupName"
+                                            type="text"
+                                            autocomplete="off"
+                                            maxlength="80"
+                                            aria-label="Nome da pasta"
+                                            w-full min-w-0
+                                            bg-transparent border-none outline-none
+                                            body-14-medium text-taupe-600
+                                            p-0
+                                            :disabled="groupActionLoading"
+                                            @blur="handleRenameGroupBlur"
+                                            @keydown.enter.prevent="submitRenameGroup"
+                                            @keydown.escape.prevent.stop="cancelRenameGroup"
+                                            @click.stop
+                                            @dblclick.stop
+                                        >
+                                        <div
+                                            aria-hidden="true"
+                                            absolute inset-x-0 bottom--0.5px h-0.5px pointer-events-none
+                                            :class="renameGroupError ? 'bg-red-500' : 'bg-border'"
+                                        />
+                                    </div>
+                                </template>
 
-                                <div
-                                    flex items-center
-                                    class="opacity-0 group-hover:opacity-100 focus-within:opacity-100 [&:has([data-state=open])]:opacity-100"
-                                >
-                                    <TelaDropdownMenu
-                                        :items="row.groupBucket.menuItems"
-                                        content-class="chat-sidebar-floating"
+                                <template v-else>
+                                    <button
+                                        type="button"
+                                        h-full flex-1 min-w-0
+                                        flex items-center gap-8px
+                                        text-left
+                                        cursor-pointer
+                                        :aria-expanded="row.groupBucket.open"
+                                        @click="handleToggleGroup(row.groupBucket.group.id)"
                                     >
-                                        <TelaIconButton
-                                            icon="i-ph-dots-three"
-                                            color="secondary"
-                                            size="3xs"
-                                            aria-label="Ações da pasta"
-                                            class="group hover:!bg-lowered data-[state=open]:!bg-lowered"
-                                            icon-class="group-hover:icon-tertiary group-data-[state=open]:icon-tertiary"
-                                            @click.prevent.stop
+                                        <TelaIcon
+                                            :name="row.groupBucket.folderIcon"
+                                            size="16px"
+                                            color="icon-tertiary"
+                                            shrink-0
                                         />
-                                    </TelaDropdownMenu>
-                                </div>
-                            </template>
+                                        <span min-w-0 truncate body-14-medium text-taupe-700>
+                                            {{ row.groupBucket.group.name }}
+                                        </span>
+                                    </button>
+
+                                    <div
+                                        flex items-center
+                                        class="opacity-0 group-hover:opacity-100 focus-within:opacity-100 [&:has([data-state=open])]:opacity-100"
+                                    >
+                                        <TelaDropdownMenu
+                                            :items="row.groupBucket.menuItems"
+                                            content-class="chat-sidebar-floating"
+                                        >
+                                            <TelaIconButton
+                                                icon="i-ph-dots-three"
+                                                color="secondary"
+                                                size="3xs"
+                                                aria-label="Ações da pasta"
+                                                class="group hover:!bg-lowered data-[state=open]:!bg-lowered"
+                                                icon-class="group-hover:icon-tertiary group-data-[state=open]:icon-tertiary"
+                                                @click.prevent.stop
+                                            />
+                                        </TelaDropdownMenu>
+                                    </div>
+                                </template>
+                            </div>
                         </div>
-                    </div>
 
-                    <div v-if="row.type === 'error'" ml-44px mr-8px>
-                        <span block truncate text-12px text-red-600 leading-16px aria-live="polite" :title="renameGroupError ?? void 0">
-                            {{ renameGroupError }}
-                        </span>
-                    </div>
-                    <ChatConversationItem
-                        v-if="row.type === 'conversation'"
-                        v-bind="getConversationItemProps(row.conversation)"
-                        :item-class="row.groupId ? 'ml-24px' : void 0"
-                        @delete="handleDelete"
-                        @rename="handleRename"
-                        @duplicate="handleDuplicate"
-                        @export="handleExport"
-                        @drag-start="handleConversationDragStart"
-                        @drag-end="clearDragState"
-                    />
-                    <button
-                        v-if="row.type === 'new'"
-                        type="button"
-                        relative h-30px pl-12px w-full
-                        flex items-center justify-between
-                        rounded-8px
-                        text-left
-                        hover:bg-subtle
-                        cursor-pointer
-                        @click="startConversationInGroup(row.groupBucket.group.id)"
-                    >
-                        <span body-14-medium text-taupe-500 ml-24px>
-                            Nova conversa
-                        </span>
-                    </button>
-                    <div v-if="row.type === 'empty'" h-full flex items-center ml-36px>
-                        <span body-14-medium text-tertiary>Sem resultados</span>
+                        <div v-if="row.type === 'error'" ml-44px mr-8px>
+                            <span block truncate text-12px text-red-600 leading-16px aria-live="polite" :title="renameGroupError ?? void 0">
+                                {{ renameGroupError }}
+                            </span>
+                        </div>
+                        <ChatConversationItem
+                            v-if="row.type === 'conversation'"
+                            v-bind="getConversationItemProps(row.conversation)"
+                            :item-class="row.groupId ? 'ml-24px' : void 0"
+                            @delete="handleDelete"
+                            @rename="handleRename"
+                            @duplicate="handleDuplicate"
+                            @export="handleExport"
+                            @drag-start="handleConversationDragStart"
+                            @drag-end="clearDragState"
+                        />
+                        <button
+                            v-if="row.type === 'new'"
+                            type="button"
+                            relative h-30px pl-12px w-full
+                            flex items-center justify-between
+                            rounded-8px
+                            text-left
+                            hover:bg-subtle
+                            cursor-pointer
+                            @click="startConversationInGroup(row.groupBucket.group.id)"
+                        >
+                            <span body-14-medium text-taupe-500 ml-24px>
+                                Nova conversa
+                            </span>
+                        </button>
+                        <div v-if="row.type === 'empty'" h-full flex items-center ml-36px>
+                            <span body-14-medium text-tertiary>Sem resultados</span>
+                        </div>
+                        <div
+                            v-if="isNestedRow(row)"
+                            aria-hidden="true"
+                            absolute top-0 left-19px w-0.5px bg-border pointer-events-none
+                            :class="isLastNestedRow(row.index) ? 'h-30px' : 'h-full'"
+                        />
                     </div>
-                    <div
-                        v-if="isNestedRow(row)"
-                        aria-hidden="true"
-                        absolute top-0 left-19px w-0.5px bg-border pointer-events-none
-                        :class="isLastNestedRow(row.index) ? 'h-30px' : 'h-full'"
-                    />
                 </div>
             </div>
         </div>

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

@@ -8,6 +8,8 @@ type __VLS_Props = {
     conversationId?: string | null;
     conversationEvents?: readonly ConversationEvent[] | null;
     composerDisabled?: boolean;
+    /** Keeps typing available while sending waits for the agent protocol to be confirmed. */
+    sendBlocked?: boolean;
     initialConversationId?: string | null;
     hideSidebar?: boolean;
     sidebar?: ChatSidebarConfig;
@@ -17,21 +19,29 @@ type __VLS_Props = {
     user?: EmbedUser | null;
     features?: Partial<ChatFeatureConfig>;
 };
-declare var __VLS_11: {}, __VLS_96: {
+declare var __VLS_6: {}, __VLS_80: {}, __VLS_93: {
     message: useChatAuth;
-}, __VLS_127: {}, __VLS_129: {}, __VLS_210: {
+}, __VLS_105: {}, __VLS_133: {}, __VLS_142: {}, __VLS_206: {}, __VLS_225: {
     message: useChatAuth;
-};
+}, __VLS_237: {};
 type __VLS_Slots = {} & {
-    'sidebar-bottom'?: (props: typeof __VLS_11) => any;
+    'sidebar-bottom'?: (props: typeof __VLS_6) => any;
+} & {
+    'composer-bottom'?: (props: typeof __VLS_80) => any;
+} & {
+    'failed-message-actions'?: (props: typeof __VLS_93) => any;
+} & {
+    'composer-bottom'?: (props: typeof __VLS_105) => any;
+} & {
+    'topbar-leading'?: (props: typeof __VLS_133) => any;
 } & {
-    'failed-message-actions'?: (props: typeof __VLS_96) => any;
+    'topbar-leading'?: (props: typeof __VLS_142) => any;
 } & {
-    'topbar-leading'?: (props: typeof __VLS_127) => any;
+    'composer-bottom'?: (props: typeof __VLS_206) => any;
 } & {
-    'topbar-leading'?: (props: typeof __VLS_129) => any;
+    'failed-message-actions'?: (props: typeof __VLS_225) => any;
 } & {
-    'failed-message-actions'?: (props: typeof __VLS_210) => any;
+    'composer-bottom'?: (props: typeof __VLS_237) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:conversationId": (value: string | null) => any;