@meistrari/tela-build 1.65.1 → 1.67.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
+    }
+}