@meistrari/chat-nuxt 3.9.2 → 3.11.0

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

@@ -2,10 +2,14 @@
 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({
-  message: { type: null, required: true }
+  message: { type: null, required: true },
+  streamActive: { type: Boolean, required: false },
+  preparingSteps: { type: [Array, null], required: false },
+  showTtft: { type: Boolean, required: false, default: true }
 });
 const emit = defineEmits(["retry"]);
 const { user } = useChatAuth();
@@ -39,6 +43,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 +109,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 +126,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 +165,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
@@ -200,48 +179,63 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
         </template>
 
         <template v-else>
+            <!--
+                A live stream normally owns the pending state, so this block stays
+                out of its way. Stand-in steps are the exception: until the run
+                emits anything the stream has nothing to show, and that silence is
+                exactly what they cover.
+            -->
             <ChatReasoningThought
-                v-if="hasReasoning || isPending"
+                v-if="hasReasoning || preparingSteps?.length && !message.content || isPending && !streamActive"
                 :reasoning-data="message.reasoningData ?? []"
                 :animate="wasEverPending"
                 :completed="!isPending"
+                :preparing-steps="preparingSteps"
                 :created-at="message.createdAt"
                 :updated-at="message.updatedAt"
             />
 
             <div
-                v-if="!isPending && message.content"
+                v-if="!isPending && message.content || isPending && streamActive"
                 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>
@@ -254,7 +248,7 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                                     :custom-components="mergedCustomComponents"
                                     :custom-html-tags="mergedCustomHtmlTags"
                                     :render-code-blocks-as-pre="true"
-                                    :typewriter="shouldAnimate"
+                                    :typewriter="isPending || shouldAnimate"
                                 />
                             </ClientOnly>
                             <ChatFilePreview
@@ -277,31 +271,30 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                             :custom-components="mergedCustomComponents"
                             :custom-html-tags="mergedCustomHtmlTags"
                             :render-code-blocks-as-pre="true"
-                            :typewriter="shouldAnimate"
+                            :typewriter="isPending || shouldAnimate"
                             text-black-900
                         />
                     </ClientOnly>
                     <div
+                        v-if="!isPending"
                         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="showTtft && formattedTtft || hasMessageFeedback" />
+                        <div flex items-center gap-8px>
+                            <span v-if="showTtft && 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-bubble.vue.d.ts

@@ -1,11 +1,20 @@
 import type { Message } from '../../types/schemas/chat/conversations.js';
 type __VLS_Props = {
     message: Message;
+    streamActive?: boolean;
+    /**
+     * Stand-in steps shown while this turn is still working towards its first
+     * output. They yield as soon as the run emits real reasoning or content.
+     */
+    preparingSteps?: readonly string[] | null;
+    showTtft?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     retry: (messageId: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRetry?: ((messageId: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    showTtft: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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>