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

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@meistrari/chat-nuxt",
   "configKey": "chatNuxt",
-  "version": "4.4.1-rc.1",
+  "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

@@ -19,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;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { inject, provide } from "vue";
+import { inject, provide, useSlots } from "vue";
 import { useChatHarnessAdapter } from "../composables/harness-adapter";
 import ChatMessageList from "../../messages/components/chat-message-list.vue";
 import { CHAT_COMPOSER_EXTENSION_KEY } from "../../types/composer";
@@ -11,6 +11,7 @@ import { exportConversationToMarkdown } from "../../conversations/export";
 import { CHAT_MOBILE_BREAKPOINT } from "../../shared/breakpoints";
 import ChatMobileFilePreview from "./mobile/chat-mobile-file-preview.vue";
 import ChatMobileShell from "./mobile/chat-mobile-shell.vue";
+import ChatSidebarToggle from "./chat-sidebar-toggle.vue";
 import ChatMessageInput from "../../messages/components/chat-message-input.vue";
 import { normalizeConversationId } from "../../conversations/scope";
 import { resolveChatFeatures } from "../feature-config";
@@ -32,6 +33,7 @@ import { useConversationFiles } from "../../files/composables/conversation-files
 import { useConversationFilesPanel } from "../../files/composables/conversation-files-panel";
 import { useConversations } from "../../conversations/composables/conversations";
 import { useEmbedConfig } from "../composables/embed-config";
+import { resolveEmptyStateLabels } from "../empty-state-labels";
 import { useAgentWake } from "../composables/use-agent-wake";
 import { useFileDrop } from "../../files/composables/file-drop";
 import { useFilePreviewPanel } from "../../files/composables/file-preview-panel";
@@ -68,6 +70,7 @@ const isSidebarCollapsed = ref(props.sidebar?.defaultCollapsed ?? false);
 const sidebarCollapsed = computed(
   () => sidebarCollapsible.value && isSidebarCollapsed.value
 );
+const sidebarToggle = computed(() => props.sidebar?.toggle ?? "edge");
 const sidebarToggleIcon = computed(() => {
   const pointsRight = sidebarPosition.value === "right" ? !sidebarCollapsed.value : sidebarCollapsed.value;
   return pointsRight ? "i-ph-caret-right" : "i-ph-caret-left";
@@ -177,6 +180,9 @@ function applySuggestion(prompt) {
 }
 const breakpoints = useBreakpoints({ mobile: CHAT_MOBILE_BREAKPOINT });
 const isMobile = breakpoints.smaller("mobile");
+const showTopbarSidebarToggle = computed(() => sidebarCollapsible.value && sidebarToggle.value === "topbar" && !props.hideSidebar && !isMobile.value && !props.compact);
+const slots = useSlots();
+const hasTopbarLeading = computed(() => showTopbarSidebarToggle.value || !!slots["topbar-leading"]);
 const drawerOpen = ref(false);
 function restoreQueuedSend(send) {
   messageInputRef.value?.restoreDraft(send);
@@ -548,6 +554,7 @@ watch(
   { immediate: true }
 );
 const currentUser = computed(() => props.user ?? authUser.value ?? null);
+const emptyStateLabels = computed(() => resolveEmptyStateLabels(embedConfig?.labels.value, currentUser.value?.name));
 const conversationCreator = computed(
   () => resolveConversationCreator(currentConversation.value?.userId, {
     currentUser: currentUser.value,
@@ -920,48 +927,18 @@ async function handleDelete() {
                     :inert="sidebarCollapsed || void 0"
                     h-full
                     flex="~ col"
-                    bg-neutral-50
+                    bg
+                    border
                     :style="{ width: `${sidebarWidth}px` }"
                     :class="
-  sidebarPosition === 'right' ? 'border-l-0.5px border-l-neutral-200' : 'border-r-0.5px border-r-neutral-200'
+  sidebarPosition === 'right' ? 'border-l-0.5px' : 'border-r-0.5px'
 "
                 >
-                    <div px-12px pt-16px pb-8px flex gap-8px>
-                        <button
-                            flex
-                            items-center
-                            justify-center
-                            gap-6px
-                            h-32px
-                            px-12px
-                            flex-1
-                            min-w-0
-                            bg-white
-                            b=".5px neutral-300"
-                            rounded-10px
-                            hover:bg-neutral-50
-                            transition-colors
-                            cursor-pointer
-                            @click="() => handleNewConversation()"
-                        >
-                            <span i-ph-chat-circle text-12px text-gray-900 />
-                            <span
-                                text-14px
-                                font-semibold
-                                text-neutral-900
-                                tracking="-.15px"
-                                leading-18px
-                            >
-                                Nova conversa
-                            </span>
-                        </button>
-                        <ChatConversationNewGroupButton />
-                    </div>
-
                     <div
                         min-h-0
                         overflow-hidden
-                        px-4px
+                        pt-12px
+                        px-6px
                         :class="$slots['sidebar-bottom'] ? '' : 'flex-1'"
                         :style="
   $slots['sidebar-bottom'] ? { flexGrow: 100 - sidebarBottomHeight, flexBasis: 0 } : void 0
@@ -991,7 +968,7 @@ async function handleDelete() {
             </div>
 
             <button
-                v-if="sidebarCollapsible"
+                v-if="sidebarCollapsible && sidebarToggle === 'edge'"
                 type="button"
                 class="chat-sidebar__toggle"
                 :aria-label="
@@ -1091,8 +1068,8 @@ async function handleDelete() {
                 <template #empty>
                     <TelaChatEmptyState
                         compact
-                        :title="`Ol\xE1, ${currentUser?.name?.split(' ')[0] ?? 'usu\xE1rio'}`"
-                        description="Como posso te ajudar hoje?"
+                        :title="emptyStateLabels.title"
+                        :description="emptyStateLabels.description"
                     >
                         <TelaChatSuggestions v-if="resolvedSuggestions.length">
                             <TelaChatSuggestion
@@ -1105,7 +1082,7 @@ async function handleDelete() {
                             </TelaChatSuggestion>
                         </TelaChatSuggestions>
 
-                        <TelaChatPromptInputHints size="sm" :hints="PROMPT_INPUT_HINTS" />
+                        <TelaChatPromptInputHints v-if="resolvedFeatures.showPromptInputHints" size="sm" :hints="PROMPT_INPUT_HINTS" />
 
                         <template #input>
                             <ChatMessageInput
@@ -1132,6 +1109,9 @@ async function handleDelete() {
                                 @send="handleSend"
                                 @cancel="handleCancel"
                             />
+                            <div v-if="$slots['composer-bottom']" data-chat-composer-bottom w-full>
+                                <slot name="composer-bottom" />
+                            </div>
                         </template>
                     </TelaChatEmptyState>
                 </template>
@@ -1181,6 +1161,9 @@ async function handleDelete() {
                         @send="handleSend"
                         @cancel="handleCancel"
                     />
+                    <div v-if="$slots['composer-bottom']" data-chat-composer-bottom w-full max-w-700px mx-auto mt--12px>
+                        <slot name="composer-bottom" />
+                    </div>
                 </div>
             </ChatMobileShell>
 
@@ -1211,15 +1194,17 @@ async function handleDelete() {
                 @delete="showDeleteModal = true"
                 @tab-change="handleTabChange"
             >
-                <template v-if="$slots['topbar-leading']" #leading>
+                <template v-if="hasTopbarLeading" #leading>
+                    <ChatSidebarToggle v-if="showTopbarSidebarToggle" :open="!sidebarCollapsed" @toggle="toggleSidebarCollapsed" />
                     <slot name="topbar-leading" />
                 </template>
             </ChatTopbar>
             <div
-                v-else-if="$slots['topbar-leading'] && !isMobile && !compact"
-                absolute top-0 z-10 h-56px flex items-center pl-16px
+                v-else-if="hasTopbarLeading && !isMobile && !compact"
+                absolute top-0 z-10 h-56px flex items-center gap-8px pl-16px
                 :style="{ left: 'var(--chat-panel-offset)' }"
             >
+                <ChatSidebarToggle v-if="showTopbarSidebarToggle" :open="!sidebarCollapsed" @toggle="toggleSidebarCollapsed" />
                 <slot name="topbar-leading" />
             </div>
 
@@ -1316,8 +1301,8 @@ async function handleDelete() {
             <TelaChatEmptyState
                 v-else-if="!isMobile && !hasMessages"
                 :compact="compact"
-                :title="`Ol\xE1, ${currentUser?.name?.split(' ')[0] ?? 'usu\xE1rio'}`"
-                description="Como posso te ajudar hoje?"
+                :title="emptyStateLabels.title"
+                :description="emptyStateLabels.description"
                 :class="currentConversation && !compact ? 'pt-64px' : ''"
             >
                 <TelaChatSuggestions v-if="resolvedSuggestions.length">
@@ -1332,6 +1317,7 @@ async function handleDelete() {
                 </TelaChatSuggestions>
 
                 <TelaChatPromptInputHints
+                    v-if="resolvedFeatures.showPromptInputHints"
                     :size="compact ? 'sm' : 'md'"
                     :hints="PROMPT_INPUT_HINTS"
                 />
@@ -1361,6 +1347,9 @@ async function handleDelete() {
                         @send="handleSend"
                         @cancel="handleCancel"
                     />
+                    <div v-if="$slots['composer-bottom']" data-chat-composer-bottom w-full>
+                        <slot name="composer-bottom" />
+                    </div>
                 </template>
             </TelaChatEmptyState>
 
@@ -1413,6 +1402,9 @@ async function handleDelete() {
                         @send="handleSend"
                         @cancel="handleCancel"
                     />
+                    <div v-if="$slots['composer-bottom']" data-chat-composer-bottom w-full max-w-700px mx-auto mt--12px>
+                        <slot name="composer-bottom" />
+                    </div>
                 </div>
             </TelaChatBody>
 

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

@@ -19,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;

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

@@ -1,10 +1,12 @@
-declare var __VLS_26: {}, __VLS_29: {}, __VLS_32: any;
+declare var __VLS_26: {}, __VLS_29: {}, __VLS_32: {}, __VLS_35: any;
 type __VLS_Slots = {} & {
     'sidebar-bottom'?: (props: typeof __VLS_26) => any;
 } & {
     'topbar-leading'?: (props: typeof __VLS_29) => any;
 } & {
-    'failed-message-actions'?: (props: typeof __VLS_32) => any;
+    'composer-bottom'?: (props: typeof __VLS_32) => any;
+} & {
+    'failed-message-actions'?: (props: typeof __VLS_35) => any;
 };
 declare const __VLS_base: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -177,6 +177,9 @@ provideChatMessageTerminal((payload) => {
         <template v-if="$slots['topbar-leading']" #topbar-leading>
             <slot name="topbar-leading" />
         </template>
+        <template v-if="$slots['composer-bottom']" #composer-bottom>
+            <slot name="composer-bottom" />
+        </template>
         <template v-if="$slots['failed-message-actions']" #failed-message-actions="slotProps">
             <slot name="failed-message-actions" v-bind="slotProps" />
         </template>

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

@@ -1,10 +1,12 @@
-declare var __VLS_26: {}, __VLS_29: {}, __VLS_32: any;
+declare var __VLS_26: {}, __VLS_29: {}, __VLS_32: {}, __VLS_35: any;
 type __VLS_Slots = {} & {
     'sidebar-bottom'?: (props: typeof __VLS_26) => any;
 } & {
     'topbar-leading'?: (props: typeof __VLS_29) => any;
 } & {
-    'failed-message-actions'?: (props: typeof __VLS_32) => any;
+    'composer-bottom'?: (props: typeof __VLS_32) => any;
+} & {
+    'failed-message-actions'?: (props: typeof __VLS_35) => any;
 };
 declare const __VLS_base: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    open: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/embed/components/chat-sidebar-toggle.vue

@@ -0,0 +1,49 @@
+<script setup>
+const props = defineProps({
+  open: { type: Boolean, required: true }
+});
+const emit = defineEmits(["toggle"]);
+const panelWidth = computed(() => props.open ? 6.5 : 4.5);
+</script>
+
+<template>
+    <button
+        type="button"
+        :aria-label="open ? 'Recolher conversas' : 'Expandir conversas'"
+        :aria-expanded="open"
+        h-32px w-32px
+        flex items-center justify-center
+        flex-shrink-0
+        rounded-8px
+        text-icon-tertiary
+        hover:bg-muted hover:text-icon-secondary
+        cursor-pointer
+        @click="emit('toggle')"
+    >
+        <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <defs>
+                <clipPath id="chat-sidebar-toggle-clip">
+                    <rect x="0.5" y="0.5" width="15" height="13" rx="3.5" />
+                </clipPath>
+            </defs>
+            <rect
+                x="0.5"
+                y="0.5"
+                :width="panelWidth"
+                height="13"
+                fill="#D9D9D9"
+                clip-path="url(#chat-sidebar-toggle-clip)"
+                :style="{ opacity: open ? 1 : 0, transition: 'width 0.2s ease-out, opacity 0.2s ease-out' }"
+            />
+            <rect x="0.5" y="0.5" width="15" height="13" rx="3.5" stroke="currentColor" />
+            <rect
+                :x="panelWidth - 0.5"
+                y="0.5"
+                width="1"
+                height="13"
+                fill="currentColor"
+                :style="{ transition: 'x 0.2s ease-out' }"
+            />
+        </svg>
+    </button>
+</template>

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

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    open: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -26,6 +26,8 @@ type MeistrariChatEmbedSlots = SlotsType<{
     'sidebar-bottom'?: () => any;
     /** Rendered at the start of the conversation topbar, before the title. Page variant only. */
     'topbar-leading'?: () => any;
+    /** Rendered right under the prompt input, flush with it, on the empty state and in a conversation. Page variant only. */
+    'composer-bottom'?: () => any;
     /** Rendered inside a failed assistant message's error box, next to "Tentar novamente"; receives the failed message. */
     'failed-message-actions'?: (props: { message: Message }) => any;
 }>;

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

@@ -121,6 +121,9 @@ const widgetEmbedProps = computed(() => ({
         <template v-if="$slots['topbar-leading']" #topbar-leading>
             <slot name="topbar-leading" />
         </template>
+        <template v-if="$slots['composer-bottom']" #composer-bottom>
+            <slot name="composer-bottom" />
+        </template>
         <template v-if="$slots['failed-message-actions']" #failed-message-actions="slotProps">
             <slot name="failed-message-actions" v-bind="slotProps" />
         </template>

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

@@ -26,6 +26,8 @@ type MeistrariChatEmbedSlots = SlotsType<{
     'sidebar-bottom'?: () => any;
     /** Rendered at the start of the conversation topbar, before the title. Page variant only. */
     'topbar-leading'?: () => any;
+    /** Rendered right under the prompt input, flush with it, on the empty state and in a conversation. Page variant only. */
+    'composer-bottom'?: () => any;
     /** Rendered inside a failed assistant message's error box, next to "Tentar novamente"; receives the failed message. */
     'failed-message-actions'?: (props: { message: Message }) => any;
 }>;

package/dist/runtime/embed/components/mobile/chat-mobile-shell.vue

@@ -1,5 +1,7 @@
 <script setup>
 import ChatMessageInput from "../../../messages/components/chat-message-input.vue";
+import { useEmbedConfig } from "../../composables/embed-config";
+import { resolveEmptyStateLabels } from "../../empty-state-labels";
 import ChatMobileFilesView from "./chat-mobile-files-view.vue";
 import ChatMobileHomeHeader from "./chat-mobile-home-header.vue";
 import ChatMobileHomeRecents from "./chat-mobile-home-recents.vue";
@@ -47,6 +49,8 @@ const props = defineProps({
   workspaceSheetOpen: { type: Boolean, required: true }
 });
 const emit = defineEmits(["cancel", "cancelEditing", "copyLink", "debug", "delete", "dismissOutdatedBanner", "duplicate", "export", "newConversation", "rename", "saveTitle", "selectConversation", "send", "settings", "signout", "switchWorkspace", "tabChange", "update:drawerOpen", "update:editTitle", "update:workspaceSheetOpen"]);
+const embedConfig = useEmbedConfig();
+const emptyStateLabels = computed(() => resolveEmptyStateLabels(embedConfig?.labels.value, props.currentUser?.name));
 const selectedModel = defineModel("selectedModel", { type: [String, null], ...{ default: null } });
 const selectedReasoningEffort = defineModel("selectedReasoningEffort", { type: null, ...{ default: null } });
 const renameInputRef = ref(null);
@@ -215,10 +219,10 @@ function startNewConversationFromOutdatedSettings() {
             <div flex="~ col 1" justify-center>
                 <div px-20px pb-20px text-center>
                     <h1 text-24px font-580 text-neutral-900 leading-28px tracking="-.4px">
-                        Olá, {{ currentUser?.name?.split(" ")[0] ?? "usu\xE1rio" }}
+                        {{ emptyStateLabels.title }}
                     </h1>
                     <p text-14px text-neutral-500 leading-18px mt-6px>
-                        Como posso te ajudar hoje?
+                        {{ emptyStateLabels.description }}
                     </p>
                 </div>
 

package/dist/runtime/embed/empty-state-labels.d.ts

@@ -0,0 +1,5 @@
+import type { ChatLabels } from './types.js';
+export declare function resolveEmptyStateLabels(labels: Partial<ChatLabels> | undefined, userName: string | null | undefined): {
+    title: string;
+    description: string;
+};

package/dist/runtime/embed/empty-state-labels.js

@@ -0,0 +1,9 @@
+const DEFAULT_EMPTY_STATE_TITLE = "Ol\xE1, {name}";
+const DEFAULT_EMPTY_STATE_DESCRIPTION = "Como posso te ajudar hoje?";
+export function resolveEmptyStateLabels(labels, userName) {
+  const firstName = userName?.split(" ")[0] || "usu\xE1rio";
+  return {
+    title: (labels?.emptyStateTitle ?? DEFAULT_EMPTY_STATE_TITLE).replaceAll("{name}", firstName),
+    description: labels?.emptyStateDescription ?? DEFAULT_EMPTY_STATE_DESCRIPTION
+  };
+}

package/dist/runtime/embed/feature-config.d.ts

@@ -10,6 +10,8 @@ export type ChatFeatureConfig = {
     showTtft?: boolean;
     /** Reliable outbound delivery and sandbox readiness handling. Defaults to true. */
     chatOutboundQueue?: boolean;
+    /** `@` / `/` shortcut hints below the empty-state composer. Defaults to true. */
+    showPromptInputHints?: boolean;
 };
 export type ResolvedChatFeatureConfig = {
     showUsageTab: boolean;
@@ -17,5 +19,6 @@ export type ResolvedChatFeatureConfig = {
     showCancelButton: boolean;
     showTtft: boolean;
     chatOutboundQueue: boolean;
+    showPromptInputHints: boolean;
 };
 export declare function resolveChatFeatures(features?: Partial<ChatFeatureConfig>): ResolvedChatFeatureConfig;

package/dist/runtime/embed/feature-config.js

@@ -4,6 +4,7 @@ export function resolveChatFeatures(features) {
     showDebugOption: features?.showDebugOption ?? true,
     showCancelButton: features?.showCancelButton ?? true,
     showTtft: features?.showTtft ?? true,
-    chatOutboundQueue: features?.chatOutboundQueue ?? true
+    chatOutboundQueue: features?.chatOutboundQueue ?? true,
+    showPromptInputHints: features?.showPromptInputHints ?? true
   };
 }

package/dist/runtime/embed/types.d.ts

@@ -15,6 +15,13 @@ export type ChatLabels = {
     conversationSearchPlaceholder: string;
     /** Clear-button tooltip in the sidebar and mobile drawer search. Defaults to `Limpar`. */
     conversationSearchClear: string;
+    /**
+     * Empty-state heading. `{name}` is replaced with the user's first name
+     * (or `usuário` when unknown). Defaults to `Olá, {name}`.
+     */
+    emptyStateTitle: string;
+    /** Empty-state subheading. Defaults to `Como posso te ajudar hoje?`. */
+    emptyStateDescription: string;
 };
 export type ChatSuggestion = {
     /** Short label rendered on the suggestion pill. */
@@ -45,6 +52,12 @@ export type ChatSidebarConfig = {
     collapsible?: boolean;
     /** Start collapsed on first render when `collapsible` is set. Defaults to false. */
     defaultCollapsed?: boolean;
+    /**
+     * Where the collapse control lives when `collapsible` is set: `'edge'` is the handle on the
+     * sidebar's inner edge; `'topbar'` is chat-app's sidebar toggle at the start of the
+     * conversation topbar (desktop only). Defaults to `'edge'`.
+     */
+    toggle?: 'edge' | 'topbar';
 };
 export type ChatEmbedSharedProps = {
     /** Let the embed synchronize its conversation with the browser URL and title. Defaults to true. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/chat-nuxt",
-  "version": "4.4.1-rc.1",
+  "version": "4.5.0-rc.0",
   "type": "module",
   "exports": {
     ".": {