ajuste sugestao do atendente

src/composables/useConversas.js

@@ -97,6 +97,11 @@ export function useConversas() {
     }
   }
 
+  function descartarSugestao() {
+    sugestao.value = null;
+    sugestaoError.value = "";
+  }
+
   async function buscarNovasMensagens() {
     if (!conversaAtivaId.value || buscandoNovasMensagens) return;
     buscandoNovasMensagens = true;
@@ -195,7 +200,8 @@ export function useConversas() {
     fecharConversa,
     enviarResposta,
     excluirConversa,
-    buscarSugestao
+    buscarSugestao,
+    descartarSugestao
   };
 
   return singleton;

src/views/conversas/ConversasWhatsappView.vue

@@ -31,7 +31,8 @@ const {
   abrirConversa,
   fecharConversa,
   enviarResposta,
-  excluirConversa
+  excluirConversa,
+  descartarSugestao
 } = useConversas();
 
 const mediaViewer = ref(null);
@@ -380,23 +381,41 @@ onUnmounted(() => {
           </div>
 
           <div v-if="sugestao" class="mx-3 mb-2 rounded-xl border border-primary/30 bg-primary/5 p-3 dark:border-primary/40 dark:bg-primary/10">
-            <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-primary">
-              Sugestão do star-atendente
+            <div class="mb-1 flex items-center justify-between">
+              <div class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-primary">
+                <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M12 3v4M12 17v4M3 12h4M17 12h4M6.34 6.34l1.42 1.42M16.24 16.24l1.42 1.42M6.34 17.66l1.42-1.42M16.24 7.76l1.42-1.42" />
+                </svg>
+                Sugestão do star-atendente
+              </div>
+              <button
+                type="button"
+                class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
+                aria-label="Descartar sugestão"
+                @click="descartarSugestao"
+              >
+                <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M18 6L6 18M6 6l12 12" />
+                </svg>
+              </button>
             </div>
             <p class="whitespace-pre-wrap break-words text-sm text-gray-800 dark:text-gray-200">{{ sugestao }}</p>
             <button
               type="button"
-              class="mt-2 rounded-lg bg-primary px-3 py-1 text-xs font-medium text-white"
+              class="mt-2 rounded-lg bg-primary px-3 py-1 text-xs font-medium text-white transition-colors hover:bg-primary/90"
               @click="usarSugestao"
             >
               Usar esta resposta
             </button>
           </div>
-          <div v-else-if="sugestaoLoading" class="mx-3 mb-2 text-xs italic text-gray-400 dark:text-gray-500">
-            Gerando sugestão...
+          <div v-else-if="sugestaoLoading" class="mx-3 mb-2 flex items-center gap-1 rounded-xl border border-primary/30 bg-primary/5 px-3 py-2 dark:border-primary/40 dark:bg-primary/10">
+            <span class="h-1.5 w-1.5 animate-bounce rounded-full bg-primary" style="animation-delay: 0ms" />
+            <span class="h-1.5 w-1.5 animate-bounce rounded-full bg-primary" style="animation-delay: 150ms" />
+            <span class="h-1.5 w-1.5 animate-bounce rounded-full bg-primary" style="animation-delay: 300ms" />
+            <span class="ml-1 text-xs text-gray-400 dark:text-gray-500">Gerando sugestão...</span>
           </div>
-          <div v-else-if="sugestaoError" class="mx-3 mb-2 text-xs text-gray-400 dark:text-gray-500">
-            {{ sugestaoError }}
+          <div v-else-if="sugestaoError" class="mx-3 mb-2 rounded-lg bg-red-50 px-3 py-2 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">
+            Não foi possível gerar a sugestão: {{ sugestaoError }}
           </div>
 
           <form class="flex items-center gap-2 border-t border-gray-200 p-3 dark:border-gray-700" @submit.prevent="enviar">