@meistrari/chat-nuxt 3.9.1 → 3.10.0

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

@@ -7,8 +7,7 @@ const props = defineProps({
   selectConversation: { type: Function, required: false },
   resetConversation: { type: Function, required: false },
   startConversation: { type: Function, required: false },
-  loading: { type: Boolean, required: false },
-  hideFolderHint: { type: Boolean, required: false }
+  loading: { type: Boolean, required: false }
 });
 const {
   conversationSearch,
@@ -20,8 +19,6 @@ const {
   ungroupedConversations,
   ungroupedDropTarget,
   ungroupedConversationLabel,
-  shouldShowUngroupedHeader,
-  showGroupCreationPrompt,
   showDeleteGroupModal,
   showDeleteGroupConversationsModal,
   groupActionLoading,
@@ -82,44 +79,12 @@ const {
             </p>
         </div>
 
-        <template v-else>
-            <div
-                v-if="showGroupCreationPrompt && !hideFolderHint"
-                mx-8px
-                flex="~ col" gap-10px
-            >
-                <div h-20px flex items-center px-4px>
-                    <span text-12px font-semibold text-neutral-400 uppercase style="letter-spacing: 0">
-                        PASTAS
-                    </span>
-                </div>
-                <div flex="~ col" gap-6px>
-                    <div
-                        h-36px px-10px
-                        flex items-center gap-10px
-                        rounded-8px
-                        b=".5px dashed neutral-200"
-                    >
-                        <span i-ph-folder text-16px text-neutral-400 shrink-0 />
-                        <span h-10px w-120px rounded-full bg-neutral-100 />
-                    </div>
-                    <div
-                        h-36px px-10px
-                        flex items-center gap-10px
-                        rounded-8px
-                        b=".5px dashed neutral-200"
-                    >
-                        <span i-ph-folder text-16px text-neutral-400 shrink-0 />
-                        <span h-10px w-84px rounded-full bg-neutral-100 />
-                    </div>
-                </div>
-                <p px-4px text-14px text-neutral-500 leading-20px>
-                    Suas pastas aparecem aqui. Crie uma para começar a agrupar conversas.
-                </p>
-                <ChatConversationNewGroupButton label="Criar pasta" variant="empty-state" />
-            </div>
-
+        <div v-else flex="~ col" gap-4px mt-4px>
             <div v-if="groupItems.length > 0" flex="~ col" gap-2px>
+                <span body-12-medium text-secondary pl-10px>
+                    Pastas · {{ groupItems.length }}
+                </span>
+
                 <div
                     v-for="groupBucket in groupItems"
                     :key="groupBucket.group.id"
@@ -133,100 +98,99 @@ const {
                     @drop.prevent="handleConversationDrop($event, groupBucket.group.id)"
                 >
                     <div
-                        v-if="groupBucket.isRenaming"
-                        h-32px w-full px-8px
-                        flex items-center gap-8px
-                        rounded-8px
-                        :class="groupBucket.dropTarget ? 'bg-neutral-200' : ''"
+                        rounded-10px
+                        class="group"
+                        :class="groupBucket.dropTarget ? '' : groupBucket.open ? 'bg-muted' : 'hover:bg-subtle'"
                     >
-                        <span
-                            i-ph-caret-right
-                            text-12px text-neutral-400
-                            transition-transform
-                            :class="groupBucket.open && 'rotate-90'"
-                        />
-                        <span
-                            :class="groupBucket.folderIcon"
-                            text-16px text-neutral-500 shrink-0
-                        />
-                        <div
-                            flex-1 min-w-0 flex items-center
-                            pb-1px
-                            b-b=".5px solid #A3A3A3"
-                            :class="renameGroupError && 'border-red-500'"
-                        >
-                            <input
-                                :ref="(element) => setRenameGroupInputRef(element, 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
-                                text-14px font-semibold text-neutral-700 leading-18px
-                                p-0
-                                :disabled="groupActionLoading"
-                                @blur="handleRenameGroupBlur"
-                                @keydown.enter.prevent="submitRenameGroup"
-                                @keydown.escape.prevent.stop="cancelRenameGroup"
-                                @click.stop
-                                @dblclick.stop
-                            >
-                        </div>
-                    </div>
-
-                    <div v-else rounded-8px class="group" :class="groupBucket.dropTarget ? '' : 'hover:bg-neutral-100'">
-                        <div h-32px w-full px-8px flex items-center gap-4px text-left>
-                            <button
-                                type="button"
-                                h-full flex-1 min-w-0
-                                flex items-center gap-8px
-                                text-left
-                                cursor-pointer
-                                @click="toggleGroup(groupBucket.group.id)"
-                            >
-                                <span
-                                    i-ph-caret-right
-                                    text-12px text-neutral-400
-                                    transition-transform
-                                    :class="groupBucket.open && 'rotate-90'"
-                                />
-                                <span
-                                    :class="groupBucket.folderIcon"
-                                    text-16px text-neutral-500 shrink-0
+                        <div h-32px w-full pl-10px pr-4px flex items-center gap-8px text-left>
+                            <template v-if="groupBucket.isRenaming">
+                                <TelaIcon
+                                    :name="groupBucket.folderIcon"
+                                    size="16px"
+                                    color="icon-secondary"
+                                    shrink-0
                                 />
-                                <span flex-1 min-w-0 truncate text-14px font-semibold text-neutral-900 leading-18px>
-                                    {{ groupBucket.group.name }}
-                                </span>
-                                <span v-if="groupBucket.conversationCountLabel" text-13px font-medium text-neutral-400 tabular-nums>
-                                    {{ groupBucket.conversationCountLabel }}
-                                </span>
-                            </button>
+                                <div
+                                    relative
+                                    flex-1 min-w-0 flex items-center
+                                    mr-4px
+                                >
+                                    <input
+                                        :ref="(element) => setRenameGroupInputRef(element, 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-primary
+                                        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--2px h-0.5px pointer-events-none
+                                        :class="renameGroupError ? 'bg-red-500' : 'bg-border'"
+                                    />
+                                </div>
+                            </template>
 
-                            <div
-                                flex items-center justify-center shrink-0
-                                class="opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity"
-                            >
-                                <TelaDropdownMenu
-                                    :items="groupBucket.menuItems"
-                                    align="end"
-                                    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
+                                    @click="toggleGroup(groupBucket.group.id)"
                                 >
-                                    <button
-                                        type="button"
-                                        aria-label="Ações da pasta"
-                                        p-4px
-                                        rounded-6px
-                                        hover:bg-neutral-200
-                                        transition-colors
-                                        cursor-pointer
-                                        @click.prevent.stop
+                                    <TelaIcon
+                                        :name="groupBucket.folderIcon"
+                                        size="16px"
+                                        color="icon-secondary"
+                                        shrink-0
+                                    />
+                                    <div flex items-center gap-6px>
+                                        <span min-w-0 truncate body-14-medium :class="groupBucket.open ? 'text-primary' : 'text-secondary group-hover:text-primary'">
+                                            {{ groupBucket.group.name }}
+                                        </span>
+                                        <TelaAnimatedNumber v-if="groupBucket.conversationCountLabel" :value="groupBucket.conversationCountLabel" body-12-medium text-tertiary />
+                                    </div>
+                                </button>
+
+                                <div
+                                    flex items-center justify-center shrink-0
+                                    class="opacity-0 group-hover:opacity-100 focus-within:opacity-100 [&:has([data-state=open])]:opacity-100"
+                                >
+                                    <TelaDropdownMenu
+                                        :items="groupBucket.menuItems"
+                                        content-class="chat-sidebar-floating"
                                     >
-                                        <div i-ph-dots-three-vertical text-16px text-neutral-400 />
-                                    </button>
-                                </TelaDropdownMenu>
-                            </div>
+                                        <button
+                                            type="button"
+                                            aria-label="Ações da pasta"
+                                            p-4px mt-2px
+                                            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"
+                                            />
+                                        </button>
+                                    </TelaDropdownMenu>
+                                </div>
+                            </template>
                         </div>
                     </div>
 
@@ -239,14 +203,15 @@ const {
                         </span>
                     </div>
 
-                    <Transition name="group-slide">
-                        <div v-if="groupBucket.open" class="group-slide-panel">
-                            <div class="group-slide__inner">
-                                <div flex="~ col" gap-1px ml-20px mt-1px mb-4px>
+                    <TelaCollapsible :open="groupBucket.open" @update:open="toggleGroup(groupBucket.group.id)">
+                        <TelaCollapsibleContent>
+                            <div flex="~ col" relative>
+                                <div flex="~ col" gap-1px mt-1px>
                                     <ChatConversationItem
                                         v-for="conversation in groupBucket.items"
                                         :key="conversation.id"
                                         v-bind="getConversationItemProps(conversation)"
+                                        item-class="ml-24px"
                                         @delete="handleDelete"
                                         @rename="handleRename"
                                         @duplicate="handleDuplicate"
@@ -257,50 +222,48 @@ const {
                                     <button
                                         v-if="groupBucket.showNewConversationAction"
                                         type="button"
-                                        h-32px px-8px
-                                        flex items-center gap-8px
-                                        rounded-8px
+                                        h-32px px-12px
+                                        flex items-center gap-9px
+                                        rounded-10px
                                         text-left
-                                        hover:bg-neutral-100
-                                        transition-colors
+                                        hover:bg-subtle
                                         cursor-pointer
                                         @click="startConversationInGroup(groupBucket.group.id)"
                                     >
-                                        <span i-ph-plus text-14px text-neutral-500 shrink-0 />
-                                        <span text-14px font-medium text-neutral-500 leading-18px>
+                                        <span body-14-medium text-secondary leading-18px ml-24px>
                                             Nova conversa
                                         </span>
+                                        <TelaIcon name="i-ph-plus" size="14px" color="icon-secondary" shrink-0 />
                                     </button>
                                     <div
                                         v-else-if="groupBucket.showSearchEmpty"
-                                        h-32px px-8px flex items-center
+                                        h-32px flex items-center ml-36px
                                     >
-                                        <span text-13px text-neutral-400 leading-17px>
+                                        <span body-14-medium text-tertiary>
                                             Sem resultados
                                         </span>
                                     </div>
                                 </div>
+
+                                <div aria-hidden="true" absolute left-17px h-full w-0.5px bg-border pointer-events-none />
                             </div>
-                        </div>
-                    </Transition>
+                        </TelaCollapsibleContent>
+                    </TelaCollapsible>
                 </div>
             </div>
 
             <div
                 flex="~ col" gap-4px
-                rounded-8px
-                transition-colors
-                :class="ungroupedDropTarget ? 'bg-neutral-100' : ''"
+                rounded-10px
+                :class="ungroupedDropTarget ? 'bg-lowered' : ''"
                 @dragenter.prevent="handleDragEnter(null)"
                 @dragover.prevent="handleDragOver($event, null)"
                 @dragleave="handleDragLeave($event, null)"
                 @drop.prevent="handleConversationDrop($event, null)"
             >
-                <div v-if="shouldShowUngroupedHeader" h-20px flex items-center pl-12px pr-4px mb-4px>
-                    <span text-12px font-semibold text-neutral-400 uppercase style="letter-spacing: 0">
-                        {{ ungroupedConversationLabel }}
-                    </span>
-                </div>
+                <span body-12-medium text-secondary pl-10px pt-4px>
+                    {{ ungroupedConversationLabel }}
+                </span>
 
                 <div v-if="ungroupedConversations.length > 0" flex="~ col" gap-1px>
                     <ChatConversationItem
@@ -316,7 +279,7 @@ const {
                     />
                 </div>
             </div>
-        </template>
+        </div>
     </div>
 
     <TelaConfirmationModal
@@ -347,7 +310,3 @@ const {
         {{ deleteGroupConversationsConfirmationMessage }}
     </TelaConfirmationModal>
 </template>
-
-<style scoped>
-.group-slide-panel{display:grid;grid-template-rows:1fr}.group-slide-enter-active,.group-slide-leave-active{overflow:hidden;transition:grid-template-rows .18s cubic-bezier(.2,.8,.2,1),opacity .14s ease,transform .18s cubic-bezier(.2,.8,.2,1)}.group-slide-enter-from,.group-slide-leave-to{grid-template-rows:0fr;opacity:0;transform:translateY(-4px)}.group-slide-enter-to,.group-slide-leave-from{grid-template-rows:1fr;opacity:1;transform:translateY(0)}.group-slide__inner{min-height:0;overflow:hidden}
-</style>

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

@@ -8,7 +8,6 @@ type __VLS_Props = {
     resetConversation?: () => void | Promise<void>;
     startConversation?: (groupId?: string | null) => void | Promise<void>;
     loading?: boolean;
-    hideFolderHint?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/conversations/components/chat-conversation-new-group-button.vue

@@ -1,91 +1,52 @@
 <script setup>
 import { useConversationGroups } from "../composables/conversation-groups";
-import ChatConversationNewGroupPopoverContent from "./chat-conversation-new-group-popover-content.vue";
 const props = defineProps({
   label: { type: String, required: false },
   variant: { type: String, required: false }
 });
-const { createGroup, error: groupCreationError } = useConversationGroups();
-const isOpen = ref(false);
-const groupName = ref("");
-const isSaving = ref(false);
-const creationErrorMessage = ref(null);
-const popoverContentRef = ref(null);
+const DEFAULT_GROUP_NAME = "Nova pasta";
+const { groups, createGroup, pendingRenameGroupId } = useConversationGroups();
+const isCreating = ref(false);
 const hasLabel = computed(() => Boolean(props.label?.trim()));
 const isEmptyState = computed(() => props.variant === "empty-state");
 const buttonClasses = computed(() => {
   if (isEmptyState.value)
-    return "h-32px w-full gap-6px px-12px border-neutral-300 hover:bg-neutral-50";
+    return "h-32px w-full gap-6px px-12px";
   if (hasLabel.value)
-    return "h-28px px-10px gap-6px self-start border-neutral-300 hover:bg-neutral-50";
-  return "h-32px w-40px border-neutral-300 hover:bg-neutral-50";
+    return "h-28px px-10px gap-6px self-start";
+  return "h-32px! w-40px! p-0!";
 });
-const iconClasses = computed(() => isEmptyState.value ? "text-neutral-900" : "text-neutral-700");
-const labelClasses = computed(
-  () => isEmptyState.value ? "text-14px font-semibold text-neutral-900 leading-18px" : "text-13px font-medium text-neutral-700 leading-17px"
-);
-watch(isOpen, async (open) => {
-  if (!open) {
-    creationErrorMessage.value = null;
-    return;
-  }
-  await nextTick();
-  popoverContentRef.value?.focusInput?.();
-});
-watch(groupName, () => {
-  creationErrorMessage.value = null;
-});
-async function submitGroup() {
-  const name = groupName.value.trim();
-  if (!name || isSaving.value)
-    return;
-  creationErrorMessage.value = null;
-  isSaving.value = true;
-  const group = await createGroup(name);
-  isSaving.value = false;
-  if (!group) {
-    creationErrorMessage.value = groupCreationError.value || "Erro ao criar pasta";
-    return;
-  }
-  groupName.value = "";
-  creationErrorMessage.value = null;
-  isOpen.value = 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}`;
 }
-function cancelGroup() {
-  groupName.value = "";
-  creationErrorMessage.value = null;
-  isOpen.value = false;
+async function handleCreateGroup() {
+  if (isCreating.value)
+    return;
+  isCreating.value = true;
+  const group = await createGroup(nextGroupName());
+  isCreating.value = false;
+  if (group)
+    pendingRenameGroupId.value = group.id;
 }
 </script>
 
 <template>
-    <TelaPopover v-model:open="isOpen">
-        <TelaPopoverTrigger as-child>
-            <button
-                type="button"
-                flex items-center justify-center
-                bg-white b=".5px solid"
-                rounded-10px
-                transition-colors
-                cursor-pointer
-                :class="buttonClasses"
-                :aria-label="label || 'Nova pasta'"
-                :title="label || 'Nova pasta'"
-            >
-                <span i-ph-folder-plus text-16px :class="iconClasses" />
-                <span v-if="hasLabel" :class="labelClasses">
-                    {{ label }}
-                </span>
-            </button>
-        </TelaPopoverTrigger>
-
-        <ChatConversationNewGroupPopoverContent
-            ref="popoverContentRef"
-            v-model="groupName"
-            :error-message="creationErrorMessage"
-            :saving="isSaving"
-            @submit="submitGroup"
-            @cancel="cancelGroup"
-        />
-    </TelaPopover>
+    <TelaButton
+        type="button"
+        variant="secondary"
+        :class="buttonClasses"
+        :aria-label="label || 'Nova pasta'"
+        @click="handleCreateGroup"
+    >
+        <TelaIcon name="i-ph-folder-plus" size="16px" color="icon-secondary" ml-0.5px />
+        <span v-if="hasLabel">
+            {{ label }}
+        </span>
+    </TelaButton>
 </template>

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

@@ -3,9 +3,6 @@ defineProps({
   placeholder: { type: String, required: false, default: "Buscar conversas" }
 });
 const searchQuery = defineModel({ type: String, ...{ required: true } });
-function clearSearch() {
-  searchQuery.value = "";
-}
 </script>
 
 <template>
@@ -14,22 +11,5 @@ function clearSearch() {
         icon="i-ph-magnifying-glass-bold"
         :placeholder="placeholder"
         autocomplete="off"
-    >
-        <template v-if="searchQuery" #trailing>
-            <TelaTooltip content="Limpar busca">
-                <button
-                    type="button"
-                    aria-label="Limpar busca"
-                    hover:bg="#EBEFF199"
-                    transition-colors
-                    p-4px rounded-full
-                    class="group"
-                    tabindex="-1"
-                    @click.stop="clearSearch"
-                >
-                    <TelaIcon name="i-ph-x-circle-light" text="#031E22" op-40 group-hover:op-100 transition-opacity />
-                </button>
-            </TelaTooltip>
-        </template>
-    </TelaInput>
+    />
 </template>

package/dist/runtime/conversations/components/chat-widget-history-list.d.vue.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+    emptySearchMessage?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    searchPlaceholder: string;
+    emptyMessage: string;
+    emptySearchMessage: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/conversations/components/chat-widget-history-list.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { useConversations } from "../composables/conversations";
+import { capitalizeFirst } from "../../shared/string";
+defineProps({
+  searchPlaceholder: { type: String, required: false, default: "Buscar conversas" },
+  emptyMessage: { type: String, required: false, default: "Nenhuma conversa ainda" },
+  emptySearchMessage: { type: String, required: false, default: "Nenhuma conversa encontrada" }
+});
+const { conversations, loading, fetchConversations } = useConversations();
+onMounted(() => {
+  fetchConversations();
+});
+const items = computed(() => conversations.value.map((conversation) => ({
+  id: conversation.id,
+  title: capitalizeFirst(conversation.title || "Nova conversa")
+})));
+</script>
+
+<template>
+    <TelaChatWidgetHistoryList
+        :items="items"
+        :loading="loading"
+        :search-placeholder="searchPlaceholder"
+        :empty-message="emptyMessage"
+        :empty-search-message="emptySearchMessage"
+    />
+</template>

package/dist/runtime/conversations/components/chat-widget-history-list.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+    emptySearchMessage?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    searchPlaceholder: string;
+    emptyMessage: string;
+    emptySearchMessage: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -3,6 +3,7 @@ export declare function useConversationGroups(): {
     groups: any;
     loading: any;
     error: any;
+    pendingRenameGroupId: any;
     fetchGroups: (options?: {
         force?: boolean;
     }) => Promise<void>;

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

@@ -20,6 +20,7 @@ export function useConversationGroups() {
   const loadingBuckets = useState("conversation-groups-loading", () => ({}));
   const fetchedBuckets = useState("conversation-groups-fetched", () => ({}));
   const errorBuckets = useState("conversation-groups-error", () => ({}));
+  const pendingRenameGroupId = useState("conversation-groups-pending-rename", () => null);
   const runtimeScope = computed(() => resolveChatStateScope(
     embedConfig?.workspaceId.value || activeOrganization.value?.id,
     embedConfig?.telaAgentId.value,
@@ -155,6 +156,7 @@ export function useConversationGroups() {
     groups: readonly(groups),
     loading: readonly(loading),
     error: readonly(error),
+    pendingRenameGroupId,
     fetchGroups,
     createGroup,
     renameGroup,

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

@@ -128,22 +128,22 @@ export function useConversationItem(options, emit) {
   const menuItems = [
     {
       label: "Renomear",
-      icon: "i-ph-pencil-simple",
+      icon: "i-ph-pencil-simple-bold",
       click: () => startRename()
     },
     {
       label: "Duplicar",
-      icon: "i-ph-copy",
+      icon: "i-ph-copy-bold",
       click: () => emit("duplicate", options.conversation.id)
     },
     {
       label: "Exportar",
-      icon: "i-ph-download-simple",
+      icon: "i-ph-download-simple-bold",
       click: () => emit("export", options.conversation.id)
     },
     {
       label: "Excluir",
-      icon: "i-ph-trash",
+      icon: "i-ph-trash-bold",
       color: "negative",
       click: () => showDeleteModal.value = true
     }