frontend/src/views/pagina-inicial/PaginaInicialView.vue

<script setup>
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
import ChatWindow from "../../components/ChatWindow.vue";
import LayoutSistema from "../../layout/LayoutSistema.vue";
import { useChat } from "../../composables/useChat.js";
import BaseButton from "../../components/base/BaseButton.vue";

const {
  messages: chatMessages,
  loading: chatLoading,
  error: chatError,
  send: sendMessage,
  clearError,
  cancelCurrentStream,
  activeConversationId,
  exportConversation
} = useChat();
onUnmounted(() => cancelCurrentStream());

const exportando = ref(false);

async function onExport() {
  if (!activeConversationId.value || exportando.value) return;
  exportando.value = true;
  try {
    await exportConversation(activeConversationId.value);
  } finally {
    exportando.value = false;
  }
}

const landingDraft = ref("");
const isLanding = computed(() => {
  const ms = chatMessages.value ?? [];
  if (ms.length === 0) return true;
  if (ms.length === 1 && ms[0]?.role === "assistant") return true;
  return false;
});

async function onLandingSend() {
  const text = landingDraft.value;
  if (!text.trim()) return;
  landingDraft.value = "";
  await sendMessage(text);
}


const FRASES_EXEMPLO = [
  "Qual é a política de férias da empresa?",
  "Resuma o manual de integração de novos funcionários",
  "Como solicito reembolso de despesas de viagem?",
  "Quais são os benefícios disponíveis para colaboradores?",
];
const PLACEHOLDER_PADRAO = "Digite sua pergunta...";
const placeholderTexto = ref(PLACEHOLDER_PADRAO);
let typingTimer = null;
let fraseIdx = 0;

const prefereMenosMovimento =
  typeof window !== "undefined" &&
  window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches === true;

function digitar(i) {
  const frase = FRASES_EXEMPLO[fraseIdx];
  placeholderTexto.value = frase.slice(0, i) + (i < frase.length ? "▍" : "");
  if (i < frase.length) typingTimer = setTimeout(() => digitar(i + 1), 40 + Math.random() * 45);
  else typingTimer = setTimeout(() => apagar(frase.length), 2400);
}

function apagar(i) {
  const frase = FRASES_EXEMPLO[fraseIdx];
  placeholderTexto.value = frase.slice(0, i) + (i > 0 ? "▍" : "");
  if (i > 0) typingTimer = setTimeout(() => apagar(i - 1), 18);
  else {
    fraseIdx = (fraseIdx + 1) % FRASES_EXEMPLO.length;
    typingTimer = setTimeout(() => digitar(0), 400);
  }
}

function iniciarTypewriter() {
  if (prefereMenosMovimento || typingTimer) return;
  digitar(0);
}

function pararTypewriter() {
  clearTimeout(typingTimer);
  typingTimer = null;
  placeholderTexto.value = PLACEHOLDER_PADRAO;
}

watch(
  [isLanding, landingDraft],
  ([landing, draft]) => {
    if (landing && !draft) iniciarTypewriter();
    else pararTypewriter();
  },
  { immediate: true }
);
onUnmounted(pararTypewriter);


const textareaEl = ref(null);

function ajustarAltura() {
  const el = textareaEl.value;
  if (!el) return;
  el.style.height = "auto";
  el.style.height = `${Math.min(el.scrollHeight, 220)}px`;
}

watch(landingDraft, () => nextTick(ajustarAltura));

onMounted(() => {
  textareaEl.value?.focus();
});
</script>

<template>
  <LayoutSistema>
    <div v-if="isLanding" class="min-h-[calc(100vh-var(--layout-header-height))] flex items-center justify-center pb-12 md:pb-16">
      <div class="w-full max-w-[720px]">
        <div class="text-3xl font-extrabold tracking-tight">Como posso ajudar?</div>
        <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
          Digite sua pergunta abaixo. Você também pode alimentar a base pela barra lateral.
        </div>

        <div class="mt-6 rounded-2xl border border-gray-300 bg-white/70 p-4 shadow-sm backdrop-blur-md transition-[border-color,box-shadow] duration-200 focus-within:border-ring/60 focus-within:ring-2 focus-within:ring-ring/15 dark:border-white/10 dark:bg-white/[0.04] dark:focus-within:border-ring/60">
          <textarea
            ref="textareaEl"
            v-model="landingDraft"
            rows="3"
            :placeholder="placeholderTexto"
            aria-label="Digite sua pergunta"
            class="min-h-20 max-h-[220px] w-full resize-none border-0 bg-transparent shadow-none focus:ring-0 !outline-none"
            @keydown.enter.exact.prevent="onLandingSend"
          />
          <div class="mt-3 flex items-center justify-between gap-3 ">
            <span class="text-xs text-gray-400 dark:text-gray-500">Enter para enviar · Shift+Enter para nova linha</span>
            <BaseButton :disabled="chatLoading || !landingDraft.trim()" :loading="chatLoading" @click="onLandingSend">
              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
              </svg>
              Enviar
            </BaseButton>
          </div>
        </div>

        <div v-if="chatError" class="mt-3 flex items-center justify-between gap-2 rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-300">
          <span>Erro: {{ chatError }}</span>
          <button type="button" class="shrink-0 rounded p-0.5 opacity-60 hover:opacity-100 transition-opacity" aria-label="Fechar erro" @click="clearError">
            <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <div v-else class="relative h-full w-full">
      <div class="relative flex h-full w-full flex-col p-4 md:p-6">
        <div class="mb-2 flex items-center justify-end">
          <button
            v-if="activeConversationId"
            type="button"
            class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white/60 px-2.5 py-1.5 text-xs font-medium text-gray-500 transition-colors hover:bg-white hover:text-gray-700 disabled:opacity-50 dark:border-white/10 dark:bg-white/5 dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white/80"
            :disabled="exportando || chatLoading"
            @click="onExport"
          >
            <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
            </svg>
            {{ exportando ? "Exportando..." : "Exportar .md" }}
          </button>
        </div>
        <ChatWindow class="flex-1 min-h-1" :messages="chatMessages" :loading="chatLoading" :error="chatError" @send="sendMessage" @clearError="clearError" />
      </div>
    </div>
  </LayoutSistema>
</template>