@meistrari/chat-nuxt 3.9.1 → 3.10.0

package/dist/runtime/files/icons.d.ts

@@ -1,4 +1,4 @@
 export declare const FILE_ICONS: Record<string, string>;
-export declare function getFileIcon(mimeType: string): string;
+export declare function getFileIcon(mimeType?: string): string;
 export declare function getMimeIcon(mimeType?: string): string;
 export declare function getMimeLabel(mimeType?: string): string;

package/dist/runtime/files/icons.js

@@ -42,7 +42,7 @@ export const FILE_ICONS = {
   "unknown": "/chat-files/generic.svg"
 };
 export function getFileIcon(mimeType) {
-  return FILE_ICONS[mimeType] ?? "/chat-files/generic.svg";
+  return FILE_ICONS[mimeType ?? "unknown"] ?? "/chat-files/generic.svg";
 }
 export function getMimeIcon(mimeType) {
   if (!mimeType)

package/dist/runtime/messages/components/chat-mention-dropdown.d.vue.ts

@@ -1,9 +1,14 @@
 import type { MentionItem } from '../../types/schemas/chat/ui.js';
+type MentionDropdownItem = MentionItem & {
+    iconUrl?: string;
+};
 type __VLS_Props = {
-    items: MentionItem[];
+    items: MentionDropdownItem[];
     highlightedIndex: number;
     trigger: '@' | '/';
     query: string;
+    /** Viewport rect of the trigger character ('@' / '/') the panel anchors to. */
+    caretRect?: DOMRect | null;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     select: (item: MentionItem) => any;

package/dist/runtime/messages/components/chat-mention-dropdown.vue

@@ -3,10 +3,21 @@ const props = defineProps({
   items: { type: Array, required: true },
   highlightedIndex: { type: Number, required: true },
   trigger: { type: String, required: true },
-  query: { type: String, required: true }
+  query: { type: String, required: true },
+  caretRect: { type: null, required: false }
 });
 const emit = defineEmits(["select"]);
 const listRef = ref(null);
+const panelStyle = computed(() => {
+  const rect = props.caretRect;
+  if (!rect)
+    return {};
+  return {
+    position: "fixed",
+    left: `${Math.max(8, Math.min(rect.left, window.innerWidth - 416))}px`,
+    bottom: `${window.innerHeight - rect.top + 4}px`
+  };
+});
 const sections = computed(() => {
   if (props.trigger === "@") {
     return [{
@@ -43,41 +54,54 @@ watch(() => props.highlightedIndex, () => {
 </script>
 
 <template>
+    <!-- Custom listbox (not a reka menu: it must stay open and keep focus in
+         the contenteditable while the user types). Surface and item styling
+         mirror TelaMenubarContent / TelaMenubarItem exactly. -->
     <div
-        absolute bottom="100%" left-0 right-0 mb-4px
-        z-10
-        bg-white
-        rounded-12px
-        class="mention-dropdown custom-scrollbar"
-        max-h-240px
-        overflow-y-auto
+        :style="panelStyle"
+        class="mention-dropdown"
+        w-max min-w-244px max-w-400px
+        max-h-260px overflow-y-auto no-scrollbar
+        rounded-2xl
+        b-0.5px border-strong
+        bg
+        p-4px
     >
-        <div v-if="items.length === 0" px-12px py-10px>
-            <span text-13px text-gray-400>{{ emptyMessage }}</span>
+        <div v-if="items.length === 0" px-12px py-6px>
+            <span body-14-regular text-tertiary>{{ emptyMessage }}</span>
         </div>
 
-        <div ref="listRef" pb-8px flex="~ col" gap-4px>
+        <div v-else ref="listRef" flex="~ col">
             <template v-for="section in sections" :key="section.title">
-                <div px-12px pt-10px pb-0>
-                    <span text-11px font-500 text-gray-400 uppercase tracking-wide>{{ section.title }}</span>
+                <div px-12px pb-2px>
+                    <span body-12-medium text-tertiary>{{ section.title }}</span>
                 </div>
                 <button
                     v-for="entry in section.items"
                     :key="entry.item.id"
+                    type="button"
                     :data-highlighted="entry.globalIndex === highlightedIndex"
                     flex items-center gap-8px
-                    w-full
-                    h-48px
-                    px-12px
+                    w-full min-w-0
+                    rounded-10px
+                    px-12px py-4px
                     text-left
-                    transition-colors
-                    :class="entry.globalIndex === highlightedIndex ? 'bg-gray-200' : 'hover:bg-gray-50'"
+                    cursor-pointer select-none
+                    outline-none
+                    :class="entry.globalIndex === highlightedIndex ? 'bg-muted' : 'hover:bg-muted'"
                     @mousedown.prevent="emit('select', entry.item)"
                 >
-                    <div :class="entry.item.icon" text-16px text-gray-500 shrink-0 />
+                    <img
+                        v-if="entry.item.iconUrl"
+                        :src="entry.item.iconUrl"
+                        alt=""
+                        aria-hidden="true"
+                        w-18px h-18px shrink-0
+                    >
+                    <TelaIcon v-else :name="entry.item.icon" size="18px" color="icon-secondary" shrink-0 />
                     <div flex="~ col" min-w-0>
-                        <span text-13px text-gray-900 truncate>{{ entry.item.label }}</span>
-                        <span v-if="entry.item.description" text-11px text-gray-400 truncate>{{ entry.item.description }}</span>
+                        <span body-12-medium text-primary truncate>{{ entry.item.label }}</span>
+                        <span v-if="entry.item.description" body-10-regular leading-12px text-tertiary truncate>{{ entry.item.description }}</span>
                     </div>
                 </button>
             </template>
@@ -86,5 +110,5 @@ watch(() => props.highlightedIndex, () => {
 </template>
 
 <style scoped>
-.mention-dropdown{animation:mention-dropdown-in .25s ease-out;border:.5px solid #e5e7eb;box-shadow:0 3px 10px 0 hsla(0,0%,64%,.08),0 12px 20px 0 hsla(0,0%,64%,.06)}.custom-scrollbar{scrollbar-color:#d1d5db transparent;scrollbar-width:thin}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:3px}@keyframes mention-dropdown-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
+.mention-dropdown{bottom:100%;box-shadow:0 4px 16px 0 rgba(85,91,98,.14);margin-left:-4px;position:absolute;z-index:50}
 </style>

package/dist/runtime/messages/components/chat-mention-dropdown.vue.d.ts

@@ -1,9 +1,14 @@
 import type { MentionItem } from '../../types/schemas/chat/ui.js';
+type MentionDropdownItem = MentionItem & {
+    iconUrl?: string;
+};
 type __VLS_Props = {
-    items: MentionItem[];
+    items: MentionDropdownItem[];
     highlightedIndex: number;
     trigger: '@' | '/';
     query: string;
+    /** Viewport rect of the trigger character ('@' / '/') the panel anchors to. */
+    caretRect?: DOMRect | null;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     select: (item: MentionItem) => any;

package/dist/runtime/messages/components/chat-message-bubble.vue

@@ -2,6 +2,7 @@
 import { useChatAuth } from "#chat-auth";
 import { useEmbedConfig } from "../../embed/composables/embed-config";
 import { useWorkspaceMembers } from "../../workspace/composables/workspace-members";
+import { isPromptTooLongFailure } from "../../types/schemas/chat/messages.js";
 import { parseContentWithFiles } from "../../files/content-detection";
 import ChatVaultLink from "../../files/components/chat-vault-link.vue";
 const props = defineProps({
@@ -39,6 +40,7 @@ const isOwnMessage = computed(() => {
 });
 const isPending = computed(() => props.message.status === "pending");
 const isFailed = computed(() => props.message.status === "failed");
+const isPromptTooLong = computed(() => isFailed.value && isPromptTooLongFailure(props.message.failReason));
 const hasReasoning = computed(() => {
   const data = props.message.reasoningData;
   return props.message.role === "assistant" && data && Array.isArray(data) && data.length > 0;
@@ -104,9 +106,9 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
 </script>
 
 <template>
-    <div
-        flex="~ col"
-        :class="isOwnMessage ? 'items-end' : 'items-start'"
+    <TelaChatMessage
+        :from="message.role === 'user' ? 'user' : 'assistant'"
+        :align="isOwnMessage ? 'end' : 'start'"
     >
         <template v-if="message.role === 'user'">
             <div
@@ -121,46 +123,20 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                     items-center
                     gap-4px
                 >
-                    <div h-16px w-16px flex-shrink-0 overflow-hidden rounded-full>
-                        <img
-                            v-if="senderImage"
-                            :src="senderImage"
-                            :alt="senderName"
-                            h-full w-full object-cover
-                        >
-                        <div
-                            v-else
-                            h-full w-full
-                            flex
-                            items-center
-                            justify-center
-                            bg-neutral-200
-                        >
-                            <span text-8px text-neutral-500 font-medium>
-                                {{ senderName.charAt(0).toUpperCase() }}
-                            </span>
-                        </div>
-                    </div>
+                    <TelaChatMessageAvatar
+                        :src="senderImage ?? void 0"
+                        :name="senderName"
+                        size="2xs"
+                    />
                     <span text-12px leading-16px font-semibold text-primary>
                         {{ senderName }}
                     </span>
                 </div>
 
-                <div
-                    flex="~ col"
-                    gap-12px
-                    px-24px
-                    pt-16px
-                    pb-20px
-                    bg-subtle
-                    text-primary
-                    border-0.5px
-                    border-solid
-                    border-subtle
-                    :class="[
-  isOwnMessage ? 'rounded-tl-[16px] rounded-tr-[16px] rounded-br-[4px] rounded-bl-[16px]' : 'rounded-tl-[4px] rounded-tr-[16px] rounded-br-[16px] rounded-bl-[16px]',
-  isPending && 'op-80'
-]"
+                <TelaChatMessageContent
+                    variant="contained"
+                    :align="isOwnMessage ? 'end' : 'start'"
+                    :class="isPending && 'op-80'"
                 >
                     <div v-if="hasFiles" flex="~ col" gap-4px mb-8px>
                         <a
@@ -186,7 +162,7 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                     <div v-else body-16-regular whitespace-pre-wrap>
                         {{ message.content }}
                     </div>
-                </div>
+                </TelaChatMessageContent>
 
                 <div
                     mt-8px
@@ -213,35 +189,43 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                 v-if="!isPending && message.content"
                 max-w-prose
                 :class="[
-  isFailed ? 'flex gap-12px items-start p-16px bg-subtle border border-solid rounded-12px w-full' : 'p-16px rounded-12px code-theme'
+  isFailed ? 'flex gap-12px items-start bg-subtle border border-solid rounded-12px w-full' : 'rounded-12px code-theme'
 ]"
             >
                 <template v-if="isFailed">
                     <div i-ph-warning-circle-fill text-16px text-red-600 shrink-0 mt-2px />
                     <div flex flex-col gap-4px grow>
                         <div flex items-center gap-4px>
-                            <span heading-h5-semibold text-primary>Erro</span>
+                            <span heading-h5-semibold text-primary>{{ isPromptTooLong ? "Limite de contexto atingido" : "Erro" }}</span>
                             <span body-10-regular text-secondary>{{ formatTime(message.createdAt) }}</span>
                         </div>
-                        <div body-12-regular text-secondary whitespace-pre-wrap>
-                            {{ displayContent }}
+                        <div v-if="isPromptTooLong" body-12-regular text-secondary whitespace-pre-wrap>
+                            Esta conversa atingiu o limite de contexto do modelo e não pode continuar. Inicie uma nova conversa para seguir com o assunto.
                         </div>
-                        <button
-                            mt-8px
-                            flex items-center gap-6px
-                            px-12px py-6px
-                            rounded-6px
-                            bg-gray-100
-                            hover:bg-gray-200
-                            text-13px text-gray-700
-                            transition-colors
-                            cursor-pointer
-                            self-start
-                            @click="emit('retry', message.id)"
-                        >
-                            <div i-ph-arrow-clockwise text-14px />
-                            <span>Tentar novamente</span>
-                        </button>
+                        <template v-else>
+                            <div body-12-regular text-secondary whitespace-pre-wrap>
+                                {{ displayContent }}
+                            </div>
+                            <div v-if="message.failReason" body-10-regular text-tertiary whitespace-pre-wrap>
+                                {{ message.failReason }}
+                            </div>
+                            <button
+                                mt-8px
+                                flex items-center gap-6px
+                                px-12px py-6px
+                                rounded-6px
+                                bg-gray-100
+                                hover:bg-gray-200
+                                text-13px text-gray-700
+                                transition-colors
+                                cursor-pointer
+                                self-start
+                                @click="emit('retry', message.id)"
+                            >
+                                <div i-ph-arrow-clockwise text-14px />
+                                <span>Tentar novamente</span>
+                            </button>
+                        </template>
                     </div>
                 </template>
                 <template v-else>
@@ -285,23 +269,21 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                         mt-8px
                         flex
                         items-center
-                        gap-6px
+                        gap-8px
                         body-11-regular
-                        text-black-400
+                        text-tertiary
                     >
-                        <div w-full flex items-center justify-between gap-12px>
-                            <span>{{ formatTime(message.updatedAt || message.createdAt) }}</span>
-                            <div flex items-center gap-8px>
-                                <span v-if="formattedTtft" flex items-center gap-4px text-black-300>
-                                    <span i-ph-timer text-12px />
-                                    TTFT: {{ formattedTtft }}
-                                </span>
-                                <ChatMessageFeedback v-if="hasMessageFeedback" :message="message" />
-                            </div>
+                        <span>{{ formatTime(message.updatedAt || message.createdAt) }}</span>
+                        <TelaDotSeparator v-if="formattedTtft || hasMessageFeedback" />
+                        <div flex items-center gap-8px>
+                            <span v-if="formattedTtft" flex items-center gap-4px>
+                                {{ formattedTtft }}
+                            </span>
+                            <ChatMessageFeedback v-if="hasMessageFeedback" :message="message" />
                         </div>
                     </div>
                 </template>
             </div>
         </template>
-    </div>
+    </TelaChatMessage>
 </template>

package/dist/runtime/messages/components/chat-message-feedback.vue

@@ -7,245 +7,41 @@ const props = defineProps({
 const embedConfig = useEmbedConfig();
 const { emit: emitFeedback } = useMessageFeedback();
 const config = computed(() => embedConfig?.feedbackConfig.value ?? null);
-const positiveReasons = computed(() => config.value?.positiveReasons ?? []);
-const negativeReasons = computed(() => config.value?.negativeReasons ?? []);
+const positiveReasons = computed(() => [...config.value?.positiveReasons ?? []]);
+const negativeReasons = computed(() => [...config.value?.negativeReasons ?? []]);
 const persistedMap = computed(() => embedConfig?.messageFeedback.value ?? null);
 const persistedRating = computed(() => persistedMap.value?.[props.message.id] ?? null);
 const localRating = ref(null);
 const rating = computed(() => persistedMap.value ? persistedRating.value : localRating.value);
-const openRating = ref(null);
-const positiveOpen = computed({
-  get: () => openRating.value === "positive",
-  set: (open) => {
-    openRating.value = open ? "positive" : null;
-  }
-});
-const negativeOpen = computed({
-  get: () => openRating.value === "negative",
-  set: (open) => {
-    openRating.value = open ? "negative" : null;
-  }
-});
-const selectedReasons = ref([]);
-const comment = ref("");
-watch(openRating, (opened) => {
-  if (opened) {
-    selectedReasons.value = [];
-    comment.value = "";
-  }
-});
-const canSubmitNegative = computed(() => {
-  if (!config.value?.requireReason)
-    return true;
-  if (negativeReasons.value.length > 0)
-    return selectedReasons.value.length > 0;
-  return comment.value.trim().length > 0;
-});
-function submitRating(next) {
+function handleSubmit(payload) {
   emitFeedback({
     conversationId: props.message.conversationId,
     messageId: props.message.id,
-    rating: next,
-    reasons: [...selectedReasons.value],
-    comment: comment.value.trim()
+    rating: payload.rating,
+    reasons: payload.reasons,
+    comment: payload.comment
   });
-  localRating.value = next;
-  openRating.value = null;
-}
-function toggleReason(reason) {
-  selectedReasons.value = selectedReasons.value.includes(reason) ? selectedReasons.value.filter((item) => item !== reason) : [...selectedReasons.value, reason];
+  localRating.value = payload.rating;
 }
 </script>
 
 <template>
-    <div flex items-center gap-2px>
-        <!-- Frictionless 👍: with no positive reasons configured there is nothing
-             to ask, so the vote submits directly instead of opening an empty popover. -->
-        <button
-            v-if="positiveReasons.length === 0"
-            type="button"
-            h-28px w-28px
-            flex items-center justify-center
-            rounded-8px
-            transition-colors
-            cursor-pointer
-            :class="rating === 'positive' ? 'bg-green-100 text-green-700' : 'text-black-400 hover:bg-neutral-100 hover:text-black-600'"
-            aria-label="Resposta útil"
-            title="Resposta útil"
-            @click="submitRating('positive')"
-        >
-            <span :class="rating === 'positive' ? 'i-ph-thumbs-up-fill' : 'i-ph-thumbs-up'" text-15px />
-        </button>
-        <TelaPopover v-else v-model:open="positiveOpen">
-            <TelaPopoverTrigger as-child>
-                <button
-                    type="button"
-                    h-28px w-28px
-                    flex items-center justify-center
-                    rounded-8px
-                    transition-colors
-                    cursor-pointer
-                    :class="rating === 'positive' ? 'bg-green-100 text-green-700' : 'text-black-400 hover:bg-neutral-100 hover:text-black-600'"
-                    aria-label="Resposta útil"
-                    title="Resposta útil"
-                >
-                    <span :class="rating === 'positive' ? 'i-ph-thumbs-up-fill' : 'i-ph-thumbs-up'" text-15px />
-                </button>
-            </TelaPopoverTrigger>
-            <TelaPopoverContent
-                align="end"
-                :side-offset="4"
-                class="!w-auto !rounded-12px !border-neutral-200 !bg-white !p-0 !text-neutral-900 !shadow-lg"
-            >
-                <div w-288px p-12px flex="~ col" gap-10px>
-                    <div flex="~ col" gap-2px>
-                        <span text-14px font-medium text-neutral-900 leading-18px>O que ajudou?</span>
-                        <span text-12px text-neutral-500 leading-16px>Marcar o que funcionou refina as próximas respostas.</span>
-                    </div>
-                    <div flex flex-wrap gap-6px>
-                        <button
-                            v-for="reason in positiveReasons"
-                            :key="reason"
-                            type="button"
-                            h-26px px-10px
-                            rounded-full
-                            b=".5px solid"
-                            text-12px leading-16px
-                            transition-colors
-                            cursor-pointer
-                            :class="selectedReasons.includes(reason) ? 'bg-green-100 text-green-700 border-transparent font-medium' : 'bg-white text-neutral-600 border-neutral-300 hover:bg-neutral-50'"
-                            @click="toggleReason(reason)"
-                        >
-                            {{ reason }}
-                        </button>
-                    </div>
-                    <textarea
-                        v-model="comment"
-                        rows="2"
-                        placeholder="Comentário (opcional)…"
-                        aria-label="Comentário"
-                        w-full
-                        px-10px py-8px
-                        rounded-8px
-                        b=".5px neutral-300"
-                        bg-white
-                        outline-none
-                        resize-none
-                        text-13px text-neutral-900 leading-18px
-                        focus:b-neutral-900
-                        @keydown.escape.prevent.stop="positiveOpen = false"
-                    />
-                    <div flex justify-end gap-6px>
-                        <button
-                            type="button"
-                            h-28px px-10px rounded-8px
-                            text-13px font-medium text-neutral-700
-                            hover:bg-neutral-100
-                            transition-colors
-                            @click="positiveOpen = false"
-                        >
-                            Cancelar
-                        </button>
-                        <button
-                            type="button"
-                            h-28px px-10px rounded-8px
-                            bg-neutral-900 text-white
-                            text-13px font-medium
-                            transition-opacity
-                            @click="submitRating('positive')"
-                        >
-                            Enviar
-                        </button>
-                    </div>
-                </div>
-            </TelaPopoverContent>
-        </TelaPopover>
-
-        <TelaPopover v-model:open="negativeOpen">
-            <TelaPopoverTrigger as-child>
-                <button
-                    type="button"
-                    h-28px w-28px
-                    flex items-center justify-center
-                    rounded-8px
-                    transition-colors
-                    cursor-pointer
-                    :class="rating === 'negative' ? 'bg-red-100 text-red-700' : 'text-black-400 hover:bg-neutral-100 hover:text-black-600'"
-                    aria-label="Resposta não útil"
-                    title="Resposta não útil"
-                >
-                    <span :class="rating === 'negative' ? 'i-ph-thumbs-down-fill' : 'i-ph-thumbs-down'" text-15px />
-                </button>
-            </TelaPopoverTrigger>
-            <TelaPopoverContent
-                align="end"
-                :side-offset="4"
-                class="!w-auto !rounded-12px !border-neutral-200 !bg-white !p-0 !text-neutral-900 !shadow-lg"
-            >
-                <div w-288px p-12px flex="~ col" gap-10px>
-                    <div flex="~ col" gap-2px>
-                        <span text-14px font-medium text-neutral-900 leading-18px>O que não funcionou?</span>
-                        <span text-12px text-neutral-500 leading-16px>Seu retorno vai para a triagem de qualidade.</span>
-                    </div>
-                    <div v-if="negativeReasons.length > 0" flex flex-wrap gap-6px>
-                        <button
-                            v-for="reason in negativeReasons"
-                            :key="reason"
-                            type="button"
-                            h-26px px-10px
-                            rounded-full
-                            b=".5px solid"
-                            text-12px leading-16px
-                            transition-colors
-                            cursor-pointer
-                            :class="selectedReasons.includes(reason) ? 'bg-blue-100 text-blue-900 border-transparent font-medium' : 'bg-white text-neutral-600 border-neutral-300 hover:bg-neutral-50'"
-                            @click="toggleReason(reason)"
-                        >
-                            {{ reason }}
-                        </button>
-                    </div>
-                    <textarea
-                        v-model="comment"
-                        rows="2"
-                        placeholder="Conte o que faltou (opcional)…"
-                        aria-label="Comentário"
-                        w-full
-                        px-10px py-8px
-                        rounded-8px
-                        b=".5px neutral-300"
-                        bg-white
-                        outline-none
-                        resize-none
-                        text-13px text-neutral-900 leading-18px
-                        focus:b-neutral-900
-                        @keydown.escape.prevent.stop="negativeOpen = false"
-                    />
-                    <div flex justify-end gap-6px>
-                        <button
-                            type="button"
-                            h-28px px-10px rounded-8px
-                            text-13px font-medium text-neutral-700
-                            hover:bg-neutral-100
-                            transition-colors
-                            @click="negativeOpen = false"
-                        >
-                            Cancelar
-                        </button>
-                        <button
-                            type="button"
-                            h-28px px-10px rounded-8px
-                            bg-neutral-900 text-white
-                            text-13px font-medium
-                            transition-opacity
-                            :disabled="!canSubmitNegative"
-                            :class="!canSubmitNegative && 'opacity-40 cursor-not-allowed'"
-                            @click="submitRating('negative')"
-                        >
-                            Enviar
-                        </button>
-                    </div>
-                </div>
-            </TelaPopoverContent>
-        </TelaPopover>
-    </div>
+    <TelaChatMessageFeedback
+        :rating="rating"
+        :positive-reasons="positiveReasons"
+        :negative-reasons="negativeReasons"
+        :require-reason="config?.requireReason ?? false"
+        positive-title="O que ajudou?"
+        positive-description="Marcar o que funcionou refina as próximas respostas."
+        positive-comment-placeholder="Comentário (opcional)…"
+        negative-title="O que não funcionou?"
+        negative-description="Seu retorno vai para a triagem de qualidade."
+        negative-comment-placeholder="Conte o que faltou (opcional)…"
+        cancel-label="Cancelar"
+        submit-label="Enviar"
+        helpful-label="Resposta útil"
+        not-helpful-label="Resposta não útil"
+        comment-label="Comentário"
+        @submit="handleSubmit"
+    />
 </template>