@meistrari/chat-nuxt 4.4.0-rc.9 → 4.4.0

package/dist/module.json

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

package/dist/module.mjs

@@ -190,7 +190,12 @@ const FULL_NAME_COMPONENT_DIRS = ["citations", "conversations", "embed", "files"
 const PATH_PREFIX_COMPONENT_DIRS = ["rendering", "shared"];
 const DYNAMIC_ICON_SAFELIST = [
   "i-ph-folder-minus",
+  // Folder actions menu (conversation-list.ts).
+  "i-ph-folder-minus-bold",
   "i-ph-folder-open",
+  // Sidebar folder rows build their icon name in conversation-list.ts.
+  "i-ph-folder-notch",
+  "i-ph-folder-notch-open",
   // Neutral pill icon for host-defined user mentions (user-mentions.ts).
   "i-ph-paperclip"
 ];

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

@@ -33,23 +33,37 @@ function setRenameInputRef(element) {
 </script>
 
 <template>
-    <div
-        v-if="isRenamingInline"
-        pl-10px pr-4px
-        h-32px
-        rounded-10px
-        :class="active ? 'bg-muted' : ''"
+    <a
+        :href="conversationPath"
+        :draggable="draggable && !isRenamingInline"
+        block
+        pl-12px pr-4px
+        h-30px
+        rounded-8px
+        class="group data-[active=true]:bg-muted data-[active=false]:hover:bg-subtle"
+        :class="isRenamingInline ? '' : 'cursor-pointer'"
+        :data-active="active"
+        @click="handleConversationClick"
+        @dblclick.prevent.stop="startRename"
+        @dragstart="handleConversationDragStart"
+        @dragend="handleConversationDragEnd"
     >
-        <div flex items-center justify-between gap-8px h-full :class="props.itemClass">
-            <div v-if="userImage" w-16px h-16px flex items-center justify-center rounded-full overflow-hidden flex-shrink-0>
+        <div flex items-center justify-between h-full :class="props.itemClass">
+            <!-- User Avatar -->
+            <div
+                v-if="userImage"
+                translate-x--48px w-0 opacity-0 shrink-0 overflow-hidden
+                class="[transition:width_0.26s_cubic-bezier(0.22,1,0.36,1),transform_0.26s_cubic-bezier(0.22,1,0.36,1),opacity_0.2s] group-hover:w-22px group-hover:translate-x-0 group-hover:opacity-100"
+            >
                 <TelaAvatar
                     :image="userImage"
                     alt="Usuário"
                     size="2xs"
+                    class="rounded-full!"
                 />
             </div>
 
-            <div relative flex-1 min-w-0 flex items-center>
+            <div v-if="isRenamingInline" relative flex-1 min-w-0 flex items-center>
                 <input
                     :ref="setRenameInputRef"
                     v-model="renameTitle"
@@ -58,7 +72,7 @@ function setRenameInputRef(element) {
                     aria-label="Nome da conversa"
                     w-full min-w-0
                     bg-transparent border-none outline-none
-                    body-14-medium text-neutral-700
+                    body-14-medium text-taupe-600
                     p-0
                     @blur="handleRenameBlur"
                     @keydown.enter.prevent="submitRename"
@@ -66,69 +80,36 @@ function setRenameInputRef(element) {
                 >
                 <div aria-hidden="true" absolute inset-x-0 bottom--0.5px h-0.5px bg-border pointer-events-none />
             </div>
-        </div>
-    </div>
 
-    <a
-        v-else
-        :href="conversationPath"
-        :draggable="draggable"
-        block
-        pl-10px pr-4px
-        h-32px
-        rounded-10px
-        cursor-pointer
-        class="group data-[active=true]:bg-muted data-[active=false]:hover:bg-subtle"
-        :data-active="active"
-        @click="handleConversationClick"
-        @dblclick.prevent.stop="startRename"
-        @dragstart="handleConversationDragStart"
-        @dragend="handleConversationDragEnd"
-    >
-        <div flex items-center justify-between gap-8px h-full :class="props.itemClass">
-            <!-- User Avatar -->
-            <div v-if="userImage" w-16px h-16px flex items-center justify-center rounded-full overflow-hidden flex-shrink-0>
-                <TelaAvatar
-                    :image="userImage"
-                    alt="Usuário"
-                    size="2xs"
-                />
-            </div>
+            <template v-else>
+                <div flex-1 min-w-0 flex items-center>
+                    <span
+                        body-14-medium
+                        text-taupe-700
+                        truncate
+                    >
+                        {{ displayTitle }}
+                    </span>
+                </div>
 
-            <div flex-1 min-w-0 flex items-center>
-                <span
-                    body-14-medium
-                    text-secondary
-                    class="group-hover:text-primary group-data-[active=true]:text-primary"
-                    truncate
+                <div
+                    flex
+                    items-center
+                    class="opacity-0 group-hover:opacity-100 focus-within:opacity-100 [&:has([data-state=open])]:opacity-100"
                 >
-                    {{ displayTitle }}
-                </span>
-            </div>
-
-            <div
-                mt-2px
-                flex
-                items-center
-                class="opacity-0 group-hover:opacity-100 focus-within:opacity-100 [&:has([data-state=open])]:opacity-100"
-            >
-                <TelaDropdownMenu :items="menuItems" content-class="chat-sidebar-floating">
-                    <button
-                        p-4px
-                        rounded-8px
-                        hover:bg-lowered
-                        cursor-pointer
-                        class="group data-[state=open]:!bg-lowered"
-                        @click.prevent.stop
-                    >
-                        <TelaIcon
-                            name="i-ph-dots-three"
-                            size="18px"
-                            color="icon-subtle group-hover:icon-tertiary group-data-[state=open]:icon-tertiary"
+                    <TelaDropdownMenu :items="menuItems" content-class="chat-sidebar-floating">
+                        <TelaIconButton
+                            icon="i-ph-dots-three"
+                            color="secondary"
+                            size="3xs"
+                            aria-label="Ações da conversa"
+                            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
                         />
-                    </button>
-                </TelaDropdownMenu>
-            </div>
+                    </TelaDropdownMenu>
+                </div>
+            </template>
         </div>
     </a>
 

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

@@ -47,29 +47,37 @@ const {
   handleDragLeave,
   getConversationItemProps,
   handleConversationDrop,
-  startConversationInGroup
+  startConversationInGroup,
+  startUngroupedConversation,
+  createNewGroup
 } = useConversationList(props);
+const ROW_HEIGHT = 32;
+const HEADING_HEIGHT = 28;
+const ERROR_ROW_HEIGHT = 20;
+const SECTION_GAP = 10;
 const rows = computed(() => {
   const result = [];
   if (groupItems.value.length > 0)
-    result.push({ type: "folders", key: "folders", height: 18, groupId: null });
+    result.push({ type: "folders", key: "folders", height: HEADING_HEIGHT, groupId: null });
   for (const groupBucket of groupItems.value) {
     const groupId = groupBucket.group.id;
-    result.push({ type: "group", key: `group:${groupId}`, height: 34, groupId, groupBucket });
+    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: 20, groupId, groupBucket });
+      result.push({ type: "error", key: `error:${groupId}`, height: ERROR_ROW_HEIGHT, groupId, groupBucket });
     if (!groupBucket.open)
       continue;
     for (const conversation of groupBucket.items)
-      result.push({ type: "conversation", key: conversation.id, height: 33, groupId, conversation });
+      result.push({ type: "conversation", key: conversation.id, height: ROW_HEIGHT, groupId, conversation });
     if (groupBucket.showNewConversationAction)
-      result.push({ type: "new", key: `new:${groupId}`, height: 33, groupId, groupBucket });
+      result.push({ type: "new", key: `new:${groupId}`, height: ROW_HEIGHT, groupId, groupBucket });
     else if (groupBucket.showSearchEmpty)
-      result.push({ type: "empty", key: `empty:${groupId}`, height: 33, groupId, groupBucket });
+      result.push({ type: "empty", key: `empty:${groupId}`, height: ROW_HEIGHT, groupId, groupBucket });
   }
-  result.push({ type: "ungrouped", key: "ungrouped", height: 24, groupId: null });
+  if (groupItems.value.length > 0)
+    result.push({ type: "spacer", key: "spacer", height: SECTION_GAP, groupId: null });
+  result.push({ type: "ungrouped", key: "ungrouped", height: HEADING_HEIGHT, groupId: null });
   for (const conversation of ungroupedConversations.value)
-    result.push({ type: "conversation", key: conversation.id, height: 33, groupId: null, conversation });
+    result.push({ type: "conversation", key: conversation.id, height: ROW_HEIGHT, groupId: null, conversation });
   let offset = 0;
   return result.map((row) => {
     const positionedRow = { ...row, offset };
@@ -117,7 +125,7 @@ async function handleRowKeydown(event, index) {
     return;
   const direction = event.shiftKey ? -1 : 1;
   let nextIndex = index + direction;
-  while (rows.value[nextIndex] && ["folders", "ungrouped", "empty", "error"].includes(rows.value[nextIndex].type))
+  while (rows.value[nextIndex] && ["folders", "spacer", "ungrouped", "empty", "error"].includes(rows.value[nextIndex].type))
     nextIndex += direction;
   const nextRow = rows.value[nextIndex];
   if (!nextRow)
@@ -132,7 +140,7 @@ async function handleRowKeydown(event, index) {
 }
 watch(conversationSearch, () => scrollTo(0), { flush: "post" });
 function acceptsDrops(row) {
-  return row.type !== "folders";
+  return row.type !== "folders" && row.type !== "spacer";
 }
 function dropListeners(row) {
   if (!acceptsDrops(row))
@@ -153,6 +161,13 @@ function dropListeners(row) {
     }
   };
 }
+function isNestedRow(row) {
+  return Boolean(row.groupId) && (row.type === "conversation" || row.type === "new" || row.type === "empty");
+}
+function isLastNestedRow(index) {
+  const next = rows.value[index + 1];
+  return !next || !isNestedRow(next) || next.groupId !== rows.value[index].groupId;
+}
 function dropTargetClass(row) {
   if (!acceptsDrops(row))
     return "";
@@ -163,10 +178,9 @@ function dropTargetClass(row) {
 </script>
 
 <template>
-    <div flex="~ col" gap-12px h-full min-h-0 overflow-hidden>
-        <div px-8px flex="~ col" gap-8px shrink-0>
+    <div flex="~ col" gap-6px h-full min-h-0 overflow-hidden>
+        <div px-8px shrink-0>
             <ChatConversationSearch v-model="conversationSearch" />
-            <ChatConversationCreatorFilter />
         </div>
 
         <div v-if="shouldShowSkeleton" flex="~ col" gap-4px>
@@ -208,19 +222,41 @@ function dropTargetClass(row) {
                     @dragend.capture="draggedRowKey = null"
                     v-on="dropListeners(row)"
                 >
-                    <span v-if="row.type === 'folders'" body-12-medium text-secondary pl-10px>
-                        Pastas · {{ groupItems.length }}
-                    </span>
-                    <span v-else-if="row.type === 'ungrouped'" block body-12-medium text-secondary pl-10px pt-4px>
-                        {{ ungroupedConversationLabel }}
-                    </span>
+                    <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'"
-                        rounded-10px
-                        class="group"
-                        :class="row.groupBucket.dropTarget ? '' : row.groupBucket.open ? 'bg-muted' : 'hover:bg-subtle'"
+                        pl-12px pr-4px
+                        h-30px
+                        rounded-8px
+                        class="group hover:bg-subtle"
+                        :data-active="row.groupBucket.open && !row.groupBucket.dropTarget"
                     >
-                        <div h-32px w-full pl-10px pr-4px flex items-center gap-8px text-left>
+                        <div flex items-center justify-between h-full gap-8px>
                             <template v-if="row.groupBucket.isRenaming">
                                 <TelaIcon
                                     :name="row.groupBucket.folderIcon"
@@ -228,11 +264,7 @@ function dropTargetClass(row) {
                                     color="icon-secondary"
                                     shrink-0
                                 />
-                                <div
-                                    relative
-                                    flex-1 min-w-0 flex items-center
-                                    mr-4px
-                                >
+                                <div relative flex-1 min-w-0 flex items-center>
                                     <input
                                         :ref="(element) => setRenameGroupInputRef(element, row.groupBucket.group.id)"
                                         v-model="renameGroupName"
@@ -242,7 +274,7 @@ function dropTargetClass(row) {
                                         aria-label="Nome da pasta"
                                         w-full min-w-0
                                         bg-transparent border-none outline-none
-                                        body-14-medium text-primary
+                                        body-14-medium text-taupe-600
                                         p-0
                                         :disabled="groupActionLoading"
                                         @blur="handleRenameGroupBlur"
@@ -253,7 +285,7 @@ function dropTargetClass(row) {
                                     >
                                     <div
                                         aria-hidden="true"
-                                        absolute inset-x-0 bottom--2px h-0.5px pointer-events-none
+                                        absolute inset-x-0 bottom--0.5px h-0.5px pointer-events-none
                                         :class="renameGroupError ? 'bg-red-500' : 'bg-border'"
                                     />
                                 </div>
@@ -272,41 +304,31 @@ function dropTargetClass(row) {
                                     <TelaIcon
                                         :name="row.groupBucket.folderIcon"
                                         size="16px"
-                                        color="icon-secondary"
+                                        color="icon-tertiary"
                                         shrink-0
                                     />
-                                    <div flex items-center gap-6px>
-                                        <span min-w-0 truncate body-14-medium :class="row.groupBucket.open ? 'text-primary' : 'text-secondary group-hover:text-primary'">
-                                            {{ row.groupBucket.group.name }}
-                                        </span>
-                                        <TelaAnimatedNumber v-if="row.groupBucket.conversationCountLabel" :value="row.groupBucket.conversationCountLabel" body-12-medium text-tertiary />
-                                    </div>
+                                    <span min-w-0 truncate body-14-medium text-taupe-700>
+                                        {{ row.groupBucket.group.name }}
+                                    </span>
                                 </button>
 
                                 <div
-                                    flex items-center justify-center shrink-0
+                                    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"
                                     >
-                                        <button
-                                            type="button"
+                                        <TelaIconButton
+                                            icon="i-ph-dots-three"
+                                            color="secondary"
+                                            size="3xs"
                                             aria-label="Ações da pasta"
-                                            p-4px mt-2px
-                                            rounded-8px
-                                            hover:bg-lowered
-                                            cursor-pointer
-                                            class="group data-[state=open]:!bg-lowered"
+                                            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="i-ph-dots-three"
-                                                size="18px"
-                                                color="icon-subtle group-hover:icon-tertiary group-data-[state=open]:icon-tertiary"
-                                            />
-                                        </button>
+                                        />
                                     </TelaDropdownMenu>
                                 </div>
                             </template>
@@ -332,25 +354,26 @@ function dropTargetClass(row) {
                     <button
                         v-if="row.type === 'new'"
                         type="button"
-                        h-32px px-12px w-full
-                        flex items-center gap-9px
-                        rounded-10px
+                        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-secondary leading-18px ml-24px>
+                        <span body-14-medium text-taupe-500 ml-24px>
                             Nova conversa
                         </span>
-                        <TelaIcon name="i-ph-plus" size="14px" color="icon-secondary" shrink-0 />
                     </button>
-                    <div v-if="row.type === 'empty'" h-32px flex items-center ml-36px>
+                    <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="row.groupId && (row.type === 'conversation' || row.type === 'new' || row.type === 'empty')"
-                        aria-hidden="true" absolute top-0 left-17px h-full w-0.5px bg-border pointer-events-none
+                        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>

package/dist/runtime/conversations/composables/conversation-item.js

@@ -55,6 +55,10 @@ export function useConversationItem(options, emit) {
     showDeleteModal.value = false;
   }
   function handleConversationClick(event) {
+    if (isRenamingInline.value) {
+      event.preventDefault();
+      return;
+    }
     if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
       return;
     event.preventDefault();

package/dist/runtime/conversations/composables/conversation-list.d.ts

@@ -123,4 +123,6 @@ export declare function useConversationList(options: ConversationListOptions): {
     };
     handleConversationDrop: (event: DragEvent, groupId: string | null) => Promise<void>;
     startConversationInGroup: (groupId: string) => void;
+    startUngroupedConversation: () => void;
+    createNewGroup: () => Promise<void>;
 };

package/dist/runtime/conversations/composables/conversation-list.js

@@ -15,7 +15,7 @@ export function useConversationList(options) {
   const embedConfig = useEmbedConfig();
   const { activeOrganization } = useChatAuth();
   const { deleteConversation, renameConversation, duplicateConversation, moveConversationToGroup } = useConversations();
-  const { groups, fetchGroups, deleteGroup, renameGroup, error: groupError, pendingRenameGroupId } = useConversationGroups();
+  const { groups, fetchGroups, createGroup, deleteGroup, renameGroup, error: groupError, pendingRenameGroupId } = useConversationGroups();
   const { setConversation } = useChat();
   const route = useRoute();
   const router = useRouter();
@@ -239,7 +239,7 @@ export function useConversationList(options) {
       ...groupBucket,
       open,
       dropTarget,
-      folderIcon: open ? "i-ph-folder-notch-open-bold" : "i-ph-folder-notch-bold",
+      folderIcon: open ? "i-ph-folder-notch-open" : "i-ph-folder-notch",
       isRenaming: renamingGroupId.value === groupBucket.group.id,
       conversationCountLabel: groupBucket.items.length > 0 ? String(groupBucket.items.length) : null,
       showNewConversationAction: !hasConversationSearchQuery.value,
@@ -249,7 +249,7 @@ export function useConversationList(options) {
   }));
   const ungroupedConversations = computed(() => groupedConversations.value.unfiled);
   const ungroupedDropTarget = computed(() => isDropTarget(null));
-  const ungroupedConversationLabel = computed(() => `Conversas \xB7 ${ungroupedConversations.value.length}`);
+  const ungroupedConversationLabel = computed(() => `Conversas`);
   const shouldShowUngroupedHeader = computed(() => groupItems.value.length > 0);
   const showGroupCreationPrompt = computed(
     () => groupsReady.value && !hasConversationSearchQuery.value && groups.value.length === 0
@@ -496,6 +496,33 @@ export function useConversationList(options) {
       return;
     await moveConversationToGroup(conversationId, groupId);
   }
+  const DEFAULT_GROUP_NAME = "Nova pasta";
+  const isCreatingGroup = ref(false);
+  function nextGroupName() {
+    const names = new Set(groups.value.map((group) => group.name));
+    if (!names.has(DEFAULT_GROUP_NAME))
+      return DEFAULT_GROUP_NAME;
+    let index = 2;
+    while (names.has(`${DEFAULT_GROUP_NAME} ${index}`))
+      index += 1;
+    return `${DEFAULT_GROUP_NAME} ${index}`;
+  }
+  async function createNewGroup() {
+    if (isCreatingGroup.value)
+      return;
+    isCreatingGroup.value = true;
+    const group = await createGroup(nextGroupName());
+    isCreatingGroup.value = false;
+    if (group)
+      pendingRenameGroupId.value = group.id;
+  }
+  function startUngroupedConversation() {
+    if (options.startConversation) {
+      void options.startConversation(null);
+    } else if (options.resetConversation) {
+      void options.resetConversation();
+    }
+  }
   function startConversationInGroup(groupId) {
     setGroupOpen(groupId, true);
     if (options.startConversation) {
@@ -562,6 +589,8 @@ export function useConversationList(options) {
     isDropTarget,
     getConversationItemProps,
     handleConversationDrop,
-    startConversationInGroup
+    startConversationInGroup,
+    startUngroupedConversation,
+    createNewGroup
   };
 }

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

@@ -19,7 +19,7 @@ type __VLS_Props = {
 };
 declare var __VLS_11: {}, __VLS_96: {
     message: useChatAuth;
-}, __VLS_204: {
+}, __VLS_127: {}, __VLS_129: {}, __VLS_210: {
     message: useChatAuth;
 };
 type __VLS_Slots = {} & {
@@ -27,7 +27,11 @@ type __VLS_Slots = {} & {
 } & {
     'failed-message-actions'?: (props: typeof __VLS_96) => any;
 } & {
-    'failed-message-actions'?: (props: typeof __VLS_204) => any;
+    'topbar-leading'?: (props: typeof __VLS_127) => any;
+} & {
+    'topbar-leading'?: (props: typeof __VLS_129) => any;
+} & {
+    'failed-message-actions'?: (props: typeof __VLS_210) => 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

@@ -888,7 +888,7 @@ async function handleDelete() {
 </script>
 
 <template>
-    <div ref="dropZoneRef" h-full flex bg-white relative>
+    <div ref="dropZoneRef" h-full flex bg relative>
         <div
             v-if="chatError"
             role="alert"
@@ -1205,7 +1205,18 @@ async function handleDelete() {
                 @debug="showDebugModal = true"
                 @delete="showDeleteModal = true"
                 @tab-change="handleTabChange"
-            />
+            >
+                <template v-if="$slots['topbar-leading']" #leading>
+                    <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
+                :style="{ left: 'var(--chat-panel-offset)' }"
+            >
+                <slot name="topbar-leading" />
+            </div>
 
             <div
                 v-if="!isMobile && showOutdatedBanner"

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

@@ -19,7 +19,7 @@ type __VLS_Props = {
 };
 declare var __VLS_11: {}, __VLS_96: {
     message: useChatAuth;
-}, __VLS_204: {
+}, __VLS_127: {}, __VLS_129: {}, __VLS_210: {
     message: useChatAuth;
 };
 type __VLS_Slots = {} & {
@@ -27,7 +27,11 @@ type __VLS_Slots = {} & {
 } & {
     'failed-message-actions'?: (props: typeof __VLS_96) => any;
 } & {
-    'failed-message-actions'?: (props: typeof __VLS_204) => any;
+    'topbar-leading'?: (props: typeof __VLS_127) => any;
+} & {
+    'topbar-leading'?: (props: typeof __VLS_129) => any;
+} & {
+    'failed-message-actions'?: (props: typeof __VLS_210) => 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,8 +1,10 @@
-declare var __VLS_26: {}, __VLS_29: any;
+declare var __VLS_26: {}, __VLS_29: {}, __VLS_32: any;
 type __VLS_Slots = {} & {
     'sidebar-bottom'?: (props: typeof __VLS_26) => any;
 } & {
-    'failed-message-actions'?: (props: typeof __VLS_29) => any;
+    'topbar-leading'?: (props: typeof __VLS_29) => any;
+} & {
+    'failed-message-actions'?: (props: typeof __VLS_32) => 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

@@ -173,6 +173,9 @@ provideChatMessageTerminal((payload) => {
         <template v-if="$slots['sidebar-bottom']" #sidebar-bottom>
             <slot name="sidebar-bottom" />
         </template>
+        <template v-if="$slots['topbar-leading']" #topbar-leading>
+            <slot name="topbar-leading" />
+        </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,8 +1,10 @@
-declare var __VLS_26: {}, __VLS_29: any;
+declare var __VLS_26: {}, __VLS_29: {}, __VLS_32: any;
 type __VLS_Slots = {} & {
     'sidebar-bottom'?: (props: typeof __VLS_26) => any;
 } & {
-    'failed-message-actions'?: (props: typeof __VLS_29) => any;
+    'topbar-leading'?: (props: typeof __VLS_29) => any;
+} & {
+    'failed-message-actions'?: (props: typeof __VLS_32) => 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>;