@meistrari/tela-build 1.65.1 → 1.66.0

package/components/tela/chat/chat.mdx

@@ -726,7 +726,9 @@ const status = computed(() => streaming.value ? 'streaming' : 'ready')
 
 ### Message Feedback
 
-Thumbs under an assistant message. Persist the `@submit` payload and feed the saved vote back via `rating` to keep it controlled.
+Thumbs under an assistant message. Feed the saved vote back via `rating` to keep it controlled.
+
+Pass `submit` when the vote is persisted remotely: the form disables its controls while the promise is in flight and only clears the draft on `{ ok: true }`. On `{ ok: false, message? }` it stays open with the chips and comment intact and swaps the confirm button to `retryLabel`. A handler that stalls past `submitTimeoutMs` (15s by default) is treated as a failure, so the form can never lock the user out. Without `submit` the component falls back to the `@submit` emit and confirms immediately.
 
 ```vue
 <script setup lang="ts">
@@ -738,8 +740,11 @@ const message = ref({
     rating: null as FeedbackRating | null,
 })
 
-function saveFeedback(payload: { rating: FeedbackRating, reasons: string[], comment: string }) {
+async function saveFeedback(payload: { rating: FeedbackRating, reasons: string[], comment: string }) {
+    await new Promise(resolve => setTimeout(resolve, 600))
     message.value.rating = payload.rating
+
+    return { ok: true as const }
 }
 </script>
 
@@ -756,7 +761,7 @@ function saveFeedback(payload: { rating: FeedbackRating, reasons: string[], comm
             :positive-reasons="['Accurate', 'Well written', 'Helpful']"
             :negative-reasons="['Incorrect', 'Off topic', 'Too long']"
             require-reason
-            @submit="saveFeedback($event)"
+            :submit="saveFeedback"
         />
     </div>
 </template>
@@ -1005,7 +1010,7 @@ import { TelaChatIconsAnthropic, TelaChatIconsGemini, TelaChatIconsOpenai } from
 | `TelaChatMessage` | Aligns one message by author (`from="user" \| "assistant"`). |
 | `TelaChatMessageContent` | Message surface: `contained` (bubble) or `flat` (bare text). |
 | `TelaChatMessageAvatar` | Avatar displayed alongside a message. |
-| `TelaChatMessageFeedback` | Thumbs-up/Thumbs-down with reason chips and comment; emits `submit`. |
+| `TelaChatMessageFeedback` | Thumbs-up/Thumbs-down with reason chips and comment; persists via `submit` or emits `submit`. |
 | `TelaChatPromptInput` | Input shell (border, focus surface, `locked` state). |
 | `TelaChatPromptInputTextarea` | Contenteditable editor with auto-grow, max-height and scroll fog. Host owns the content state. |
 | `TelaChatPromptInputToolbar` | Bottom row of the input: tools on the left, model selector + submit on the right. |
@@ -1093,13 +1098,21 @@ type MessageAvatarProps = {
 
 type FeedbackRating = 'positive' | 'negative'
 
+type FeedbackPayload = { rating: FeedbackRating, reasons: string[], comment: string }
+type FeedbackSubmitResult = { ok: true } | { ok: false, message?: string }
+
 type MessageFeedbackProps = {
   rating?: FeedbackRating | null
   positiveReasons?: string[]
   negativeReasons?: string[]
   requireReason?: boolean
+  submit?: (payload: FeedbackPayload) => Promise<FeedbackSubmitResult>
+  submitTimeoutMs?: number // default: 15_000
+  submittingLabel?: string // default: 'Submitting…'
+  retryLabel?: string      // default: 'Try again'
+  submitErrorMessage?: string // default: 'Could not submit feedback. Try again.'
 }
-// emits: submit(payload: { rating: FeedbackRating, reasons: string[], comment: string })
+// emits: submit(payload: FeedbackPayload) — only when the `submit` prop is absent
 ```
 
 ### Prompt Input

package/components/tela/chat/message/message-feedback-state.test.ts

@@ -0,0 +1,226 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+    canSubmitNegativeFeedback,
+    closeMessageFeedback,
+    createMessageFeedbackState,
+    openMessageFeedback,
+    submitMessageFeedback,
+    toggleMessageFeedbackReason,
+} from './message-feedback-state'
+
+describe('message feedback submission', () => {
+    it('keeps the popover and draft while persistence is pending', async () => {
+        const state = createMessageFeedbackState()
+        openMessageFeedback(state, 'negative')
+        toggleMessageFeedbackReason(state, 'Resposta incorreta')
+        state.comment = 'A fonte citada não sustenta a conclusão.'
+
+        let finish: ((result: { ok: true }) => void) | undefined
+        const pending = submitMessageFeedback(
+            state,
+            'negative',
+            async () => await new Promise(resolve => finish = resolve),
+            'Não foi possível enviar.',
+        )
+
+        expect(state).toMatchObject({
+            openRating: 'negative',
+            selectedReasons: ['Resposta incorreta'],
+            comment: 'A fonte citada não sustenta a conclusão.',
+            submitting: true,
+            localRating: null,
+        })
+
+        closeMessageFeedback(state)
+        expect(state.openRating).toBe('negative')
+
+        finish?.({ ok: true })
+        await pending
+    })
+
+    it('preserves the draft and leaves the rating unchanged when persistence fails', async () => {
+        const state = createMessageFeedbackState()
+        openMessageFeedback(state, 'negative')
+        toggleMessageFeedbackReason(state, 'Resposta incorreta')
+        state.comment = 'A fonte citada não sustenta a conclusão.'
+
+        const saved = await submitMessageFeedback(
+            state,
+            'negative',
+            async () => ({ ok: false, message: 'Sua sessão expirou. Entre novamente e tente enviar o feedback.' }),
+            'Não foi possível enviar.',
+        )
+
+        expect(saved).toBe(false)
+        expect(state).toMatchObject({
+            openRating: 'negative',
+            selectedReasons: ['Resposta incorreta'],
+            comment: 'A fonte citada não sustenta a conclusão.',
+            submitting: false,
+            localRating: null,
+            error: 'Sua sessão expirou. Entre novamente e tente enviar o feedback.',
+        })
+    })
+
+    it('keeps the draft on an unexpected exception and succeeds on retry', async () => {
+        const state = createMessageFeedbackState()
+        openMessageFeedback(state, 'negative')
+        toggleMessageFeedbackReason(state, 'Outro')
+        state.comment = 'Detalhes que não podem ser perdidos.'
+
+        await submitMessageFeedback(
+            state,
+            'negative',
+            async () => { throw new Error('network failure') },
+            'Não foi possível enviar o feedback. Tente novamente.',
+        )
+
+        expect(state.error).toBe('Não foi possível enviar o feedback. Tente novamente.')
+        expect(state.comment).toBe('Detalhes que não podem ser perdidos.')
+
+        const saved = await submitMessageFeedback(
+            state,
+            'negative',
+            async payload => payload.comment === 'Detalhes que não podem ser perdidos.' ? { ok: true } : { ok: false },
+            'Não foi possível enviar o feedback. Tente novamente.',
+        )
+
+        expect(saved).toBe(true)
+        expect(state).toMatchObject({
+            openRating: null,
+            selectedReasons: [],
+            comment: '',
+            submitting: false,
+            localRating: 'negative',
+            error: null,
+        })
+    })
+})
+
+describe('message feedback drafts', () => {
+    it('drops the previous draft when the other rating is opened', () => {
+        const state = createMessageFeedbackState()
+        openMessageFeedback(state, 'positive')
+        toggleMessageFeedbackReason(state, 'Preciso')
+        state.comment = 'Rascunho do voto positivo.'
+
+        openMessageFeedback(state, 'negative')
+
+        expect(state).toMatchObject({
+            openRating: 'negative',
+            selectedReasons: [],
+            comment: '',
+        })
+    })
+
+    it('keeps the draft when the already open rating is reopened', () => {
+        const state = createMessageFeedbackState()
+        openMessageFeedback(state, 'negative')
+        toggleMessageFeedbackReason(state, 'Resposta incorreta')
+
+        openMessageFeedback(state, 'negative')
+
+        expect(state.selectedReasons).toEqual(['Resposta incorreta'])
+    })
+
+    it('toggles a reason off on the second selection', () => {
+        const state = createMessageFeedbackState()
+        toggleMessageFeedbackReason(state, 'Resposta incorreta')
+        toggleMessageFeedbackReason(state, 'Fora do tema')
+        toggleMessageFeedbackReason(state, 'Resposta incorreta')
+
+        expect(state.selectedReasons).toEqual(['Fora do tema'])
+    })
+
+    it('clears the draft and the error when the popover is closed', () => {
+        const state = createMessageFeedbackState()
+        openMessageFeedback(state, 'negative')
+        toggleMessageFeedbackReason(state, 'Resposta incorreta')
+        state.error = 'Falha anterior.'
+
+        closeMessageFeedback(state)
+
+        expect(state).toMatchObject({
+            openRating: null,
+            selectedReasons: [],
+            comment: '',
+            error: null,
+        })
+    })
+})
+
+describe('negative feedback validation', () => {
+    it('accepts a bare thumbs-down when no reason is required', () => {
+        const state = createMessageFeedbackState()
+
+        expect(canSubmitNegativeFeedback(state, false, [])).toBe(true)
+    })
+
+    it('requires a chip when chips are configured', () => {
+        const state = createMessageFeedbackState()
+        const reasons = ['Resposta incorreta']
+
+        expect(canSubmitNegativeFeedback(state, true, reasons)).toBe(false)
+        toggleMessageFeedbackReason(state, 'Resposta incorreta')
+        expect(canSubmitNegativeFeedback(state, true, reasons)).toBe(true)
+    })
+
+    it('falls back to a non-blank comment when no chip is configured', () => {
+        const state = createMessageFeedbackState()
+
+        state.comment = '   '
+        expect(canSubmitNegativeFeedback(state, true, [])).toBe(false)
+
+        state.comment = 'A resposta ignorou a pergunta.'
+        expect(canSubmitNegativeFeedback(state, true, [])).toBe(true)
+    })
+})
+
+describe('message feedback timeout', () => {
+    it('gives up on a handler that never settles and offers a retry', async () => {
+        const state = createMessageFeedbackState()
+        openMessageFeedback(state, 'negative')
+        toggleMessageFeedbackReason(state, 'Resposta incorreta')
+
+        const saved = await submitMessageFeedback(
+            state,
+            'negative',
+            async () => await new Promise<never>(() => {}),
+            'Não foi possível enviar o feedback. Tente novamente.',
+            10,
+        )
+
+        expect(saved).toBe(false)
+        expect(state).toMatchObject({
+            openRating: 'negative',
+            selectedReasons: ['Resposta incorreta'],
+            submitting: false,
+            localRating: null,
+            error: 'Não foi possível enviar o feedback. Tente novamente.',
+        })
+    })
+
+    it('ignores a second submission while the first is in flight', async () => {
+        const state = createMessageFeedbackState()
+        openMessageFeedback(state, 'positive')
+
+        let calls = 0
+        let finish: ((result: { ok: true }) => void) | undefined
+        const pending = submitMessageFeedback(
+            state,
+            'positive',
+            async () => {
+                calls += 1
+                return await new Promise<{ ok: true }>(resolve => finish = resolve)
+            },
+            'Não foi possível enviar.',
+        )
+
+        expect(await submitMessageFeedback(state, 'positive', async () => ({ ok: true }), 'Não foi possível enviar.')).toBe(false)
+
+        finish?.({ ok: true })
+        expect(await pending).toBe(true)
+        expect(calls).toBe(1)
+    })
+})

package/components/tela/chat/message/message-feedback-state.ts

@@ -0,0 +1,123 @@
+export type FeedbackRating = 'positive' | 'negative'
+
+export type FeedbackPayload = {
+    rating: FeedbackRating
+    reasons: string[]
+    comment: string
+}
+
+export type FeedbackSubmitResult
+    = | { ok: true }
+        | { ok: false, message?: string }
+
+export type FeedbackSubmitHandler = (payload: FeedbackPayload) => Promise<FeedbackSubmitResult>
+
+export type MessageFeedbackState = {
+    localRating: FeedbackRating | null
+    openRating: FeedbackRating | null
+    selectedReasons: string[]
+    comment: string
+    submitting: boolean
+    error: string | null
+}
+
+export function createMessageFeedbackState(): MessageFeedbackState {
+    return {
+        localRating: null,
+        openRating: null,
+        selectedReasons: [],
+        comment: '',
+        submitting: false,
+        error: null,
+    }
+}
+
+function resetDraft(state: MessageFeedbackState): void {
+    state.selectedReasons = []
+    state.comment = ''
+    state.error = null
+}
+
+export function openMessageFeedback(state: MessageFeedbackState, rating: FeedbackRating): void {
+    if (state.submitting || state.openRating === rating)
+        return
+
+    resetDraft(state)
+    state.openRating = rating
+}
+
+export function closeMessageFeedback(state: MessageFeedbackState): void {
+    if (state.submitting)
+        return
+
+    state.openRating = null
+    resetDraft(state)
+}
+
+export function toggleMessageFeedbackReason(state: MessageFeedbackState, reason: string): void {
+    state.selectedReasons = state.selectedReasons.includes(reason)
+        ? state.selectedReasons.filter(item => item !== reason)
+        : [...state.selectedReasons, reason]
+}
+
+export function canSubmitNegativeFeedback(
+    state: MessageFeedbackState,
+    requireReason: boolean,
+    negativeReasons: readonly string[],
+): boolean {
+    if (!requireReason)
+        return true
+    if (negativeReasons.length > 0)
+        return state.selectedReasons.length > 0
+    return state.comment.trim().length > 0
+}
+
+export const DEFAULT_SUBMIT_TIMEOUT_MS = 15_000
+
+export async function submitMessageFeedback(
+    state: MessageFeedbackState,
+    rating: FeedbackRating,
+    submit: FeedbackSubmitHandler,
+    fallbackErrorMessage: string,
+    timeoutMs: number = DEFAULT_SUBMIT_TIMEOUT_MS,
+): Promise<boolean> {
+    if (state.submitting)
+        return false
+
+    const payload: FeedbackPayload = {
+        rating,
+        reasons: [...state.selectedReasons],
+        comment: state.comment.trim(),
+    }
+
+    state.submitting = true
+    state.error = null
+
+    // Without this race a handler that never settles leaves the popover pinned
+    // open with every control disabled and no way for the user to escape.
+    let timer: ReturnType<typeof setTimeout> | undefined
+    const timeout = new Promise<FeedbackSubmitResult>((resolve) => {
+        timer = setTimeout(() => resolve({ ok: false }), timeoutMs)
+    })
+
+    try {
+        const result = await Promise.race([submit(payload), timeout])
+        if (!result.ok) {
+            state.error = result.message || fallbackErrorMessage
+            return false
+        }
+
+        state.localRating = rating
+        state.openRating = null
+        resetDraft(state)
+        return true
+    }
+    catch {
+        state.error = fallbackErrorMessage
+        return false
+    }
+    finally {
+        clearTimeout(timer)
+        state.submitting = false
+    }
+}

package/components/tela/chat/message/message-feedback.vue

@@ -1,5 +1,13 @@
 <script setup lang="ts">
-type FeedbackRating = 'positive' | 'negative'
+import type { FeedbackPayload, FeedbackRating, FeedbackSubmitHandler } from './message-feedback-state'
+import {
+    canSubmitNegativeFeedback,
+    closeMessageFeedback,
+    createMessageFeedbackState,
+    openMessageFeedback,
+    submitMessageFeedback,
+    toggleMessageFeedbackReason,
+} from './message-feedback-state'
 
 const props = withDefaults(defineProps<{
     /**
@@ -14,6 +22,10 @@ const props = withDefaults(defineProps<{
     negativeReasons?: string[]
     /** Blocks a bare thumbs-down: requires a chip (or a comment when no chips exist). */
     requireReason?: boolean
+    /** Persists a vote: `{ ok: true }` confirms and closes the form, while `{ ok: false, message? }` preserves the draft for retry. */
+    submit?: FeedbackSubmitHandler
+    /** How long to wait on `submit` before giving up and offering a retry. Defaults to 15s. */
+    submitTimeoutMs?: number
     positiveTitle?: string
     positiveDescription?: string
     positiveCommentPlaceholder?: string
@@ -25,6 +37,9 @@ const props = withDefaults(defineProps<{
     helpfulLabel?: string
     notHelpfulLabel?: string
     commentLabel?: string
+    submittingLabel?: string
+    retryLabel?: string
+    submitErrorMessage?: string
 }>(), {
     positiveTitle: 'What helped?',
     positiveDescription: 'Marking what worked refines future responses.',
@@ -37,239 +52,255 @@ const props = withDefaults(defineProps<{
     helpfulLabel: 'Helpful response',
     notHelpfulLabel: 'Not helpful',
     commentLabel: 'Comment',
+    submittingLabel: 'Submitting…',
+    retryLabel: 'Try again',
+    submitErrorMessage: 'Could not submit feedback. Try again.',
 })
 
 const emit = defineEmits<{
-    (e: 'submit', payload: { rating: FeedbackRating, reasons: string[], comment: string }): void
+    (e: 'submit', payload: FeedbackPayload): void
 }>()
 
 const positiveReasons = computed(() => props.positiveReasons ?? [])
 const negativeReasons = computed(() => props.negativeReasons ?? [])
 
-const localRating = ref<FeedbackRating | null>(null)
-const currentRating = computed(() => props.rating !== undefined ? props.rating : localRating.value)
+const state = reactive(createMessageFeedbackState())
+const currentRating = computed(() => props.rating !== undefined ? props.rating : state.localRating)
 
-const openRating = ref<FeedbackRating | null>(null)
 const positiveOpen = computed({
-    get: () => openRating.value === 'positive',
+    get: () => state.openRating === 'positive',
     set: (open: boolean) => {
-        openRating.value = open ? 'positive' : null
+        if (open)
+            openMessageFeedback(state, 'positive')
+        else
+            closeMessageFeedback(state)
     },
 })
 const negativeOpen = computed({
-    get: () => openRating.value === 'negative',
+    get: () => state.openRating === 'negative',
     set: (open: boolean) => {
-        openRating.value = open ? 'negative' : null
+        if (open)
+            openMessageFeedback(state, 'negative')
+        else
+            closeMessageFeedback(state)
     },
 })
 
-const selectedReasons = ref<string[]>([])
-const comment = ref('')
-
-// Cleared on close as well as open, so a cancelled popover's reasons/comment
-// never leak into a later direct submit (e.g. the bare thumbs-up button).
-watch(openRating, () => {
-    selectedReasons.value = []
-    comment.value = ''
-})
-
 // A required-reason negative vote is never bare: a chip when chips are
 // configured, otherwise a non-empty comment carries the justification.
-const canSubmitNegative = computed(() => {
-    if (!props.requireReason)
-        return true
-    if (negativeReasons.value.length > 0)
-        return selectedReasons.value.length > 0
-    return comment.value.trim().length > 0
-})
+const canSubmitNegative = computed(() => canSubmitNegativeFeedback(
+    state,
+    props.requireReason ?? false,
+    negativeReasons.value,
+))
 
-function submitRating(next: FeedbackRating) {
-    emit('submit', {
-        rating: next,
-        reasons: [...selectedReasons.value],
-        comment: comment.value.trim(),
+async function submitRating(next: FeedbackRating) {
+    const submit: FeedbackSubmitHandler = props.submit ?? (async (payload: FeedbackPayload) => {
+        emit('submit', payload)
+        return { ok: true }
     })
-    localRating.value = next
-    openRating.value = null
+    await submitMessageFeedback(state, next, submit, props.submitErrorMessage, props.submitTimeoutMs)
 }
 
 function toggleReason(reason: string) {
-    selectedReasons.value = selectedReasons.value.includes(reason)
-        ? selectedReasons.value.filter(item => item !== reason)
-        : [...selectedReasons.value, reason]
+    toggleMessageFeedbackReason(state, reason)
 }
 </script>
 
 <template>
-    <div flex items-center gap-2px ml--5px>
-        <button
-            v-if="positiveReasons.length === 0"
-            type="button"
-            h-28px w-28px
-            flex items-center justify-center
-            rounded-8px
-            duration-80
-            cursor-pointer
-            :class="currentRating === 'positive' ? 'bg-green-100 text-green-700' : 'text-icon-secondary hover:bg-subtle hover:text-icon'"
-            :aria-label="helpfulLabel"
-            @click="submitRating('positive')"
-        >
-            <TelaIcon
-                :name="currentRating === 'positive' ? 'i-ph-thumbs-up-fill' : 'i-ph-thumbs-up'"
-                size="14px"
-            />
-        </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
-                    duration-80
-                    cursor-pointer
-                    :class="currentRating === 'positive' ? 'bg-green-100 text-green-700' : 'text-icon-tertiary hover:bg-subtle hover:text-icon data-[state=open]:bg-subtle data-[state=open]:text-icon'"
-                    :aria-label="helpfulLabel"
-                >
-                    <TelaIcon
-                        :name="currentRating === 'positive' ? 'i-ph-thumbs-up-fill' : 'i-ph-thumbs-up'"
-                        size="18px"
-                    />
-                </button>
-            </TelaPopoverTrigger>
-            <TelaPopoverContent
-                align="start"
-                :side-offset="4"
-                class="!w-auto !rounded-12px !border-neutral-200 !bg-white !p-0 !text-neutral-900 !shadow-lg"
+    <div flex="~ col" items-start gap-4px ml--5px>
+        <div flex items-center gap-2px>
+            <button
+                v-if="positiveReasons.length === 0"
+                type="button"
+                h-28px w-28px
+                flex items-center justify-center
+                rounded-8px
+                duration-80
+                cursor-pointer
+                :disabled="state.submitting"
+                :class="currentRating === 'positive' ? 'bg-green-100 text-green-700' : 'text-icon-secondary hover:bg-subtle hover:text-icon'"
+                :aria-label="helpfulLabel"
+                @click="submitRating('positive')"
             >
-                <div w-288px p-12px flex="~ col" gap-10px>
-                    <div flex="~ col" gap-4px>
-                        <h5 heading-h5-semibold text-primary>
-                            {{ positiveTitle }}
-                        </h5>
-                        <span body-12-regular text-secondary>{{ positiveDescription }}</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>
-                    <TelaTextarea
-                        v-model="comment"
-                        rows="2"
-                        :placeholder="positiveCommentPlaceholder"
-                        :aria-label="commentLabel"
-                        class="min-h-56px!"
-                        @keydown.escape.prevent.stop="positiveOpen = false"
-                    />
-                    <div flex justify-end gap-6px>
-                        <TelaButton
-                            type="button"
-                            variant="secondary"
-                            @click="positiveOpen = false"
-                        >
-                            {{ cancelLabel }}
-                        </TelaButton>
-                        <TelaButton
-                            type="button"
-                            @click="submitRating('positive')"
-                        >
-                            {{ submitLabel }}
-                        </TelaButton>
+                <TelaIcon
+                    :name="currentRating === 'positive' ? 'i-ph-thumbs-up-fill' : 'i-ph-thumbs-up'"
+                    size="14px"
+                />
+            </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
+                        duration-80
+                        cursor-pointer
+                        :disabled="state.submitting"
+                        :class="currentRating === 'positive' ? 'bg-green-100 text-green-700' : 'text-icon-tertiary hover:bg-subtle hover:text-icon data-[state=open]:bg-subtle data-[state=open]:text-icon'"
+                        :aria-label="helpfulLabel"
+                    >
+                        <TelaIcon
+                            :name="currentRating === 'positive' ? 'i-ph-thumbs-up-fill' : 'i-ph-thumbs-up'"
+                            size="18px"
+                        />
+                    </button>
+                </TelaPopoverTrigger>
+                <TelaPopoverContent
+                    align="start"
+                    :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-4px>
+                            <h5 heading-h5-semibold text-primary>
+                                {{ positiveTitle }}
+                            </h5>
+                            <span body-12-regular text-secondary>{{ positiveDescription }}</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
+                                :disabled="state.submitting"
+                                :class="state.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>
+                        <TelaTextarea
+                            v-model="state.comment"
+                            :disabled="state.submitting"
+                            rows="2"
+                            :placeholder="positiveCommentPlaceholder"
+                            :aria-label="commentLabel"
+                            class="min-h-56px!"
+                            @keydown.escape.prevent.stop="positiveOpen = false"
+                        />
+                        <span v-if="state.error" role="alert" body-12-medium text-red-700>
+                            {{ state.error }}
+                        </span>
+                        <div flex justify-end gap-6px>
+                            <TelaButton
+                                type="button"
+                                variant="secondary"
+                                :disabled="state.submitting"
+                                @click="positiveOpen = false"
+                            >
+                                {{ cancelLabel }}
+                            </TelaButton>
+                            <TelaButton
+                                type="button"
+                                :loading="state.submitting"
+                                :aria-label="state.submitting ? submittingLabel : undefined"
+                                @click="submitRating('positive')"
+                            >
+                                {{ state.error ? retryLabel : submitLabel }}
+                            </TelaButton>
+                        </div>
                     </div>
-                </div>
-            </TelaPopoverContent>
-        </TelaPopover>
+                </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="currentRating === 'negative' ? 'bg-red-100 text-red-700' : 'text-icon-tertiary hover:bg-subtle hover:text-icon data-[state=open]:bg-subtle data-[state=open]:text-icon'"
-                    :aria-label="notHelpfulLabel"
+            <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
+                        :disabled="state.submitting"
+                        :class="currentRating === 'negative' ? 'bg-red-100 text-red-700' : 'text-icon-tertiary hover:bg-subtle hover:text-icon data-[state=open]:bg-subtle data-[state=open]:text-icon'"
+                        :aria-label="notHelpfulLabel"
+                    >
+                        <TelaIcon
+                            :name="currentRating === 'negative' ? 'i-ph-thumbs-down-fill' : 'i-ph-thumbs-down'"
+                            size="18px"
+                        />
+                    </button>
+                </TelaPopoverTrigger>
+                <TelaPopoverContent
+                    align="start"
+                    :side-offset="4"
+                    class="!w-auto !rounded-12px !border-neutral-200 !bg-white !p-0 !text-neutral-900 !shadow-lg"
                 >
-                    <TelaIcon
-                        :name="currentRating === 'negative' ? 'i-ph-thumbs-down-fill' : 'i-ph-thumbs-down'"
-                        size="18px"
-                    />
-                </button>
-            </TelaPopoverTrigger>
-            <TelaPopoverContent
-                align="start"
-                :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-4px>
-                        <h5 heading-h5-semibold text-primary>
-                            {{ negativeTitle }}
-                        </h5>
-                        <span body-12-regular text-secondary>{{ negativeDescription }}</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>
-                    <TelaTextarea
-                        v-model="comment"
-                        rows="2"
-                        :placeholder="negativeCommentPlaceholder"
-                        :aria-label="commentLabel"
-                        class="min-h-56px!"
-                        @keydown.escape.prevent.stop="negativeOpen = false"
-                    />
-                    <div flex justify-end gap-6px>
-                        <TelaButton
-                            type="button"
-                            variant="secondary"
-                            @click="negativeOpen = false"
-                        >
-                            {{ cancelLabel }}
-                        </TelaButton>
-                        <TelaButton
-                            type="button"
-                            :disabled="!canSubmitNegative"
-                            @click="submitRating('negative')"
-                        >
-                            {{ submitLabel }}
-                        </TelaButton>
+                    <div w-288px p-12px flex="~ col" gap-10px>
+                        <div flex="~ col" gap-4px>
+                            <h5 heading-h5-semibold text-primary>
+                                {{ negativeTitle }}
+                            </h5>
+                            <span body-12-regular text-secondary>{{ negativeDescription }}</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
+                                :disabled="state.submitting"
+                                :class="state.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>
+                        <TelaTextarea
+                            v-model="state.comment"
+                            :disabled="state.submitting"
+                            rows="2"
+                            :placeholder="negativeCommentPlaceholder"
+                            :aria-label="commentLabel"
+                            class="min-h-56px!"
+                            @keydown.escape.prevent.stop="negativeOpen = false"
+                        />
+                        <span v-if="state.error" role="alert" body-12-medium text-red-700>
+                            {{ state.error }}
+                        </span>
+                        <div flex justify-end gap-6px>
+                            <TelaButton
+                                type="button"
+                                variant="secondary"
+                                :disabled="state.submitting"
+                                @click="negativeOpen = false"
+                            >
+                                {{ cancelLabel }}
+                            </TelaButton>
+                            <TelaButton
+                                type="button"
+                                :loading="state.submitting"
+                                :disabled="!canSubmitNegative || state.submitting"
+                                :aria-label="state.submitting ? submittingLabel : undefined"
+                                @click="submitRating('negative')"
+                            >
+                                {{ state.error ? retryLabel : submitLabel }}
+                            </TelaButton>
+                        </div>
                     </div>
-                </div>
-            </TelaPopoverContent>
-        </TelaPopover>
+                </TelaPopoverContent>
+            </TelaPopover>
+        </div>
+        <span v-if="state.error && state.openRating === null" role="alert" max-w-288px body-12-medium text-red-700>
+            {{ state.error }}
+        </span>
     </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@meistrari/tela-build",
-    "version": "1.65.1",
+    "version": "1.66.0",
     "type": "module",
     "files": [
         "app.config.ts",