@meistrari/chat-nuxt 4.4.0-rc.0 → 4.4.0-rc.10

package/README.md

@@ -33,6 +33,20 @@ Runtime internals under `src/runtime/**`, generated Nuxt aliases, and workspace-
 | [Workspace settings](docs/guides/workspace-settings.md) | Settings overrides, agent runtime ownership, `<ChatConfigurationModal>` |
 | [Upgrading to 4.0](docs/guides/upgrading-to-4.md) | Required Chat API version for v2 sends, upgrade order, vue-i18n removal |
 
+## Harness selection
+
+Select the Tela agent; its published `agent.config.json` determines the harness:
+
+```vue
+<MeistrariChatEmbed tela-agent-id="your-agent-id" />
+```
+
+The chat resolves the agent before mounting its UI. Explicit branches use that branch's configuration. Missing, unreadable or unsupported harnesses show an error and never fall back to Claude. The host cannot select a harness through props or HTTP headers.
+
+Both harnesses share the chat screen, composer, navigation and state controller, while their protocol adapters and renderers remain separate. Selecting another agent clears the old UI and resolves its configuration again. The backend independently reads the configured harness for routed requests.
+
+Requires Agent API v4’s `GET /v4/agents/{organizationName}/{repository}/harness` endpoint. Chat resolves the existing agent coordinates, then reads the configured harness directly from Agent API using the published commit or selected branch. The response exposes only the harness. Deploy the Agent API endpoint before this Chat version; no Tela API changes are required.
+
 ## Conversation forks
 
 Completed assistant responses offer **Continuar em nova conversa** in the three-dot
@@ -74,7 +88,7 @@ Declared in `src/runtime/embed/types.ts`; prop, feature-flag, and event payload
 | `initialConversationId` | `string \| null` | `null` | Conversation to open once on mount when `conversationId` is uncontrolled |
 | `conversationScope` | `string \| null` | `null` | Isolate conversation history by technical scope within the current workspace and runtime. Scoped embeds only see same-scope conversations; values are trimmed, blank becomes `null`, and the server accepts 1-200 chars from `A-Z`, `a-z`, `0-9`, `.`, `_`, `:`, `/`, `-` |
 | `defaultConversationCreatorFilter` | `'all' \| 'mine'` | `'all'` | Initial sidebar creator filter: every conversation in scope, or only the current user's |
-| `availableModels` | `AvailableChatModels` | Full catalog | Non-empty ordered list of models this embed may display and execute. A missing or invalid restored selection falls back to the first entry; an empty list fails fast |
+| `availableModels` | `AvailableChatModels` | Workspace catalog | Optional non-empty ordered subset of models served for the active workspace. Unknown ids fail at runtime; a restored unavailable selection stays visible and blocked until the user chooses an available model |
 | `defaultModel` | `ChatModel` | Package default | Initial model for untouched drafts. Explicit selections and existing conversations take precedence; `availableModels` still limits the selection |
 | `defaultReasoningEffort` | `ChatReasoningEffort` | Automatic (`null`) | Initial reasoning effort for untouched drafts. Explicit user choices (including automatic) take precedence |
 | `conversationCreatorFilter` | `'all' \| 'mine'` | — | Controlled sidebar creator filter; use with `v-model:conversation-creator-filter` when the host changes it at runtime |

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@meistrari/chat-nuxt",
   "configKey": "chatNuxt",
-  "version": "4.4.0-rc.0",
+  "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"
 ];
@@ -445,6 +450,7 @@ const module$1 = defineNuxtModule({
     const rc = nuxt.options.runtimeConfig;
     rc.chatApiUrl = options.chatApiUrl || rc.chatApiUrl || process.env.CHAT_API_URL || "";
     rc.public = rc.public || {};
+    rc.public.chatConfig = { ...rc.public.chatConfig };
     const existingChatNuxtRuntimeConfig = rc.chatNuxt;
     rc.chatNuxt = {
       chatApiUrl: existingChatNuxtRuntimeConfig?.chatApiUrl || rc.chatApiUrl,

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/conversations/composables/conversations.js

@@ -1,3 +1,4 @@
+import { getChatApiErrorMessage } from "../../shared/chat-api-error.js";
 import { useChatAuth } from "#chat-auth";
 import * as Sentry from "@sentry/nuxt";
 import { resolveChatStateScope } from "../scope.js";
@@ -348,7 +349,7 @@ export function useConversations() {
     } catch (err) {
       removeConversationFromLoadedBuckets(optimisticConversation.id, requestRuntimeScope);
       restoreConversationMetadata(requestRuntimeScope, metadataSnapshot);
-      const message = err instanceof Error ? err.message : "Erro ao criar conversa";
+      const message = getChatApiErrorMessage(err) ?? "Erro ao criar conversa";
       error.value = message;
       statusToast.update({
         text: "Erro ao criar conversa",

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

@@ -1,8 +1,10 @@
+import { useChatAuth } from '#chat-auth';
 import type { ConversationEvent } from '../../types/schemas/chat/conversations.js';
 import type { ChatFeatureConfig } from '../feature-config.js';
 import type { ChatActor, ChatSidebarConfig, ChatSuggestion } from '../types.js';
 type EmbedUser = ChatActor;
 type __VLS_Props = {
+    syncBrowserState?: boolean;
     conversationId?: string | null;
     conversationEvents?: readonly ConversationEvent[] | null;
     composerDisabled?: boolean;
@@ -15,13 +17,21 @@ type __VLS_Props = {
     user?: EmbedUser | null;
     features?: Partial<ChatFeatureConfig>;
 };
-declare var __VLS_11: {}, __VLS_96: any, __VLS_204: any;
+declare var __VLS_11: {}, __VLS_96: {
+    message: useChatAuth;
+}, __VLS_127: {}, __VLS_129: {}, __VLS_210: {
+    message: useChatAuth;
+};
 type __VLS_Slots = {} & {
     'sidebar-bottom'?: (props: typeof __VLS_11) => any;
 } & {
     '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;
@@ -35,6 +45,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     compact: boolean;
     hideSettings: boolean;
     hideSidebar: boolean;
+    syncBrowserState: boolean;
     initialConversationId: string | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;