Главная Обзор Помощь
Вход
star_oraculo
/
frontend
2
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

alterações frontend

leonardo 3 месяцев назад
Родитель
70d2fafe97
Сommit
60c8c9b587
10 измененных файлов с 222 добавлено и 320 удалено
Единый вид Показать статистику Diff
  1. 3 3
      dist/index.html
  2. 4 4
      src/components/ChatWindow.vue
  3. 17 40
      src/components/DocumentList.vue
  4. 14 10
      src/components/DocumentUpload.vue
  5. 16 44
      src/components/SearchBox.vue
  6. 117 141
      src/layout/LayoutSistema.vue
  7. 4 1
      src/styles/tailwind.css
  8. 28 42
      src/views/conversas/ConversasHistoricoView.vue
  9. 16 31
      src/views/conversas/ConversasPesquisarView.vue
  10. 3 4
      src/views/pagina-inicial/PaginaInicialView.vue

+ 3 - 3
dist/index.html
Просмотреть файл 

@@ -5,9 +5,9 @@
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
 
     <link rel="icon" type="image/x-icon" href="/favicon.ico?v=2" />
 
     <link rel="icon" type="image/x-icon" href="/favicon.ico?v=2" />
 
-    <title>ORACULO</title>
 
-    <script type="module" crossorigin src="/assets/index-Bgqg0aRD.js"></script>
 
-    <link rel="stylesheet" crossorigin href="/assets/index-CYiuIo4I.css">
 
+    <title>ORÁCULO</title>
 
+    <script type="module" crossorigin src="/assets/index-uz8bSdN3.js"></script>
 
+    <link rel="stylesheet" crossorigin href="/assets/index-CJTUk5er.css">
 
   </head>
 
   </head>
 
   <body class="bg-background">
 
   <body class="bg-background">
 
     <noscript>
 
     <noscript>

+ 4 - 4
src/components/ChatWindow.vue
Просмотреть файл 

@@ -2,12 +2,12 @@
 
   <div class="flex h-full min-h-[520px] w-full flex-col gap-4">
 
   <div class="flex h-full min-h-[520px] w-full flex-col gap-4">
 
     <div
 
     <div
 
       ref="chatEl"
 
       ref="chatEl"
 
-      class="min-h-0 flex-1 overflow-auto rounded-2xl border border-border bg-black/10 p-4 dark:bg-black/20"
 
+      class="min-h-0 flex-1 overflow-auto rounded-2xl border border-gray-200 bg-background/60 p-4 dark:border-gray-700 dark:bg-black/20"
 
     >
 
     >
 
       <div v-if="!messages.length" class="grid h-full place-items-center">
 
       <div v-if="!messages.length" class="grid h-full place-items-center">
 
         <div class="text-center">
 
         <div class="text-center">
 
           <div class="text-xl font-semibold tracking-tight">Nova conversa</div>
 
           <div class="text-xl font-semibold tracking-tight">Nova conversa</div>
 
-          <div class="mt-2 text-sm text-muted-foreground">Digite sua pergunta abaixo para começar.</div>
 
+          <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">Digite sua pergunta abaixo para começar.</div>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
 
 
@@ -18,7 +18,7 @@
 
             :class="
 
             :class="
 
               m.role === 'user'
 
               m.role === 'user'
 
                 ? 'border-primary/25 bg-primary/10 text-foreground'
 
                 ? 'border-primary/25 bg-primary/10 text-foreground'
 
-                : 'border-border bg-white/30 text-foreground dark:bg-white/10'
 
+                : 'border-gray-200 bg-white/30 text-foreground dark:border-gray-700 dark:bg-white/10'
 
             "
 
             "
 
           >
 
           >
 
             {{ m.content }}
 
             {{ m.content }}
 
@@ -39,7 +39,7 @@
 
       <button :disabled="loading || !draft.trim()" @click="onSend">Enviar</button>
 
       <button :disabled="loading || !draft.trim()" @click="onSend">Enviar</button>
 
     </div>
 
     </div>
 
 
 
-    <div v-if="error" class="text-sm text-muted-foreground">Erro: {{ error }}</div>
 
+    <div v-if="error" class="text-sm text-gray-500 dark:text-gray-400">Erro: {{ error }}</div>
 
   </div>
 
   </div>
 
 </template>
 
 </template>

+ 17 - 40
src/components/DocumentList.vue
Просмотреть файл 

@@ -1,18 +1,25 @@
 
 <template>
 
 <template>
 
-  <div class="panel">
 
-    <h2 class="title">Documentos</h2>
 
-    <div class="row">
 
+  <section class="rounded-2xl border border-gray-200 bg-gray-100/50 p-4 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50">
 
+    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Documentos</h2>
 
+
 
+    <div class="mt-3 flex items-center justify-between gap-3">
 
       <button :disabled="loading" @click="$emit('refresh')">Atualizar</button>
 
       <button :disabled="loading" @click="$emit('refresh')">Atualizar</button>
 
-      <div class="muted">{{ loading ? "Carregando..." : `${items.length} itens` }}</div>
 
+      <div class="text-xs text-gray-500 dark:text-gray-400">{{ loading ? "Carregando..." : `${items.length} itens` }}</div>
 
     </div>
 
     </div>
 
-    <div v-if="error" class="muted" style="margin-top: 10px">Erro: {{ error }}</div>
 
-    <div class="list">
 
-      <div v-for="it in items" :key="String(it.id)" class="item">
 
-        <div class="muted">{{ it.source || "sem fonte" }} · chunk {{ it.chunkIndex ?? "-" }}</div>
 
-        <div class="text">{{ it.text }}</div>
 
+
 
+    <div v-if="error" class="mt-2.5 text-sm text-gray-500 dark:text-gray-400">Erro: {{ error }}</div>
 
+
 
+    <div class="mt-3 grid max-h-[520px] gap-2 overflow-auto">
 
+      <div
 
+        v-for="it in items"
 
+        :key="String(it.id)"
 
+        class="rounded-xl border border-gray-200 bg-background/60 p-3 dark:border-gray-700 dark:bg-background/10"
 
+      >
 
+        <div class="text-xs text-gray-500 dark:text-gray-400">{{ it.source || "sem fonte" }} · chunk {{ it.chunkIndex ?? "-" }}</div>
 
+        <div class="mt-1 whitespace-pre-wrap text-sm leading-snug text-gray-900 dark:text-gray-100">{{ it.text }}</div>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
-  </div>
 
+  </section>
 
 </template>
 
 </template>
 
 
 
 <script setup>
 
 <script setup>
 
@@ -23,33 +30,3 @@ defineProps({
 
 });
 
 });
 
 defineEmits(["refresh"]);
 
 defineEmits(["refresh"]);
 
 </script>
 
 </script>
 
-
 
-<style scoped>
 
-.row {
 
-  display: flex;
 
-  align-items: center;
 
-  justify-content: space-between;
 
-  gap: 10px;
 
-}
 
-
 
-.list {
 
-  margin-top: 12px;
 
-  display: grid;
 
-  gap: 10px;
 
-  max-height: 520px;
 
-  overflow: auto;
 
-}
 
-
 
-.item {
 
-  border: 1px solid var(--border);
 
-  border-radius: 12px;
 
-  padding: 10px;
 
-  background: var(--surface-2);
 
-}
 
-
 
-.text {
 
-  margin-top: 6px;
 
-  white-space: pre-wrap;
 
-  line-height: 1.35;
 
-}
 
-</style>

+ 14 - 10
src/components/DocumentUpload.vue
Просмотреть файл 

@@ -1,23 +1,27 @@
 
 <template>
 
 <template>
 
-  <div class="panel">
 
-    <h2 class="title">Ingestão</h2>
 
-    <div class="muted" style="margin-bottom: 10px">
 
+  <section class="rounded-2xl border border-gray-200 bg-gray-100/50 p-4 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50">
 
+    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Ingestão</h2>
 
+    <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
 
       Envie .txt, .pdf, .docx ou imagens (png/jpg) com manuais/prints para alimentar a base.
 
       Envie .txt, .pdf, .docx ou imagens (png/jpg) com manuais/prints para alimentar a base.
 
     </div>
 
     </div>
 
     <input
 
     <input
 
+      class="mt-3"
 
       type="file"
 
       type="file"
 
       accept=".txt,.pdf,.docx,.png,.jpg,.jpeg,.webp,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/*,text/plain"
 
       accept=".txt,.pdf,.docx,.png,.jpg,.jpeg,.webp,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/*,text/plain"
 
       @change="onFile"
 
       @change="onFile"
 
     />
 
     />
 
-    <div style="height: 10px" />
 
-    <textarea v-model="manualText" rows="6" placeholder="Ou cole um texto aqui para ingestão..." />
 
-    <div style="height: 10px" />
 
-    <button :disabled="loading || (!manualText.trim() && !file)" @click="onIngest">
 
+    <textarea
 
+      v-model="manualText"
 
+      class="mt-3"
 
+      rows="6"
 
+      placeholder="Ou cole um texto aqui para ingestão..."
 
+    />
 
+    <button class="mt-3" :disabled="loading || (!manualText.trim() && !file)" @click="onIngest">
 
       Ingerir
 
       Ingerir
 
     </button>
 
     </button>
 
-    <div v-if="status" class="muted" style="margin-top: 10px">{{ status }}</div>
 
-    <div v-if="error" class="muted" style="margin-top: 10px">Erro: {{ error }}</div>
 
-  </div>
 
+    <div v-if="status" class="mt-2.5 text-sm text-gray-500 dark:text-gray-400">{{ status }}</div>
 
+    <div v-if="error" class="mt-2.5 text-sm text-gray-500 dark:text-gray-400">Erro: {{ error }}</div>
 
+  </section>
 
 </template>
 
 </template>
 
 
 
 <script setup>
 
 <script setup>

+ 16 - 44
src/components/SearchBox.vue
Просмотреть файл 

@@ -1,21 +1,26 @@
 
 <template>
 
 <template>
 
-  <div class="panel">
 
-    <h2 class="title">Busca</h2>
 
-    <div class="row">
 
+  <section class="rounded-2xl border border-gray-200 bg-gray-100/50 p-4 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50">
 
+    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Busca</h2>
 
+    <div class="mt-3 grid grid-cols-1 gap-2 min-[520px]:grid-cols-[1fr_120px]">
 
       <input v-model="query" placeholder="Buscar na base..." @keydown.enter="onSearch" />
 
       <input v-model="query" placeholder="Buscar na base..." @keydown.enter="onSearch" />
 
       <button :disabled="loading || !query.trim()" @click="onSearch">Buscar</button>
 
       <button :disabled="loading || !query.trim()" @click="onSearch">Buscar</button>
 
     </div>
 
     </div>
 
-    <div v-if="error" class="muted" style="margin-top: 10px">Erro: {{ error }}</div>
 
-    <div v-if="results.length" class="results">
 
-      <div v-for="r in results" :key="String(r.id)" class="hit">
 
-        <div class="hitHeader">
 
-          <div class="muted">score: {{ r.score?.toFixed?.(3) ?? r.score }}</div>
 
-          <div class="muted">{{ r.source || "sem fonte" }}</div>
 
+    <div v-if="error" class="mt-2.5 text-sm text-gray-500 dark:text-gray-400">Erro: {{ error }}</div>
 
+
 
+    <div v-if="results.length" class="mt-3 grid gap-2">
 
+      <div
 
+        v-for="r in results"
 
+        :key="String(r.id)"
 
+        class="rounded-xl border border-gray-200 bg-background/60 p-3 dark:border-gray-700 dark:bg-background/10"
 
+      >
 
+        <div class="flex items-center justify-between gap-3">
 
+          <div class="text-xs text-gray-500 dark:text-gray-400">score: {{ r.score?.toFixed?.(3) ?? r.score }}</div>
 
+          <div class="truncate text-xs text-gray-500 dark:text-gray-400">{{ r.source || "sem fonte" }}</div>
 
         </div>
 
         </div>
 
-        <div class="hitText">{{ r.text }}</div>
 
+        <div class="mt-2 whitespace-pre-wrap text-sm leading-snug text-gray-900 dark:text-gray-100">{{ r.text }}</div>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
-  </div>
 
+  </section>
 
 </template>
 
 </template>
 
 
 
 <script setup>
 
 <script setup>
 
@@ -33,36 +38,3 @@ function onSearch() {
 
   emit("search", query.value);
 
   emit("search", query.value);
 
 }
 
 }
 
 </script>
 
 </script>
 
-
 
-<style scoped>
 
-.row {
 
-  display: grid;
 
-  grid-template-columns: 1fr 120px;
 
-  gap: 10px;
 
-}
 
-
 
-.results {
 
-  margin-top: 12px;
 
-  display: grid;
 
-  gap: 10px;
 
-}
 
-
 
-.hit {
 
-  border: 1px solid var(--border);
 
-  border-radius: 12px;
 
-  padding: 10px;
 
-  background: var(--surface-2);
 
-}
 
-
 
-.hitHeader {
 
-  display: flex;
 
-  justify-content: space-between;
 
-  gap: 10px;
 
-  margin-bottom: 8px;
 
-}
 
-
 
-.hitText {
 
-  white-space: pre-wrap;
 
-  line-height: 1.35;
 
-}
 
-</style>

+ 117 - 141
src/layout/LayoutSistema.vue
Просмотреть файл 

@@ -1,5 +1,5 @@
 
 <script setup>
 
 <script setup>
 
-import { computed, onMounted, reactive, ref } from "vue";
 
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
 
 import { useRoute, useRouter } from "vue-router";
 
 import { useRoute, useRouter } from "vue-router";
 
 import BotaoAlterarTema from "../components/BotaoAlterarTema.vue";
 
 import BotaoAlterarTema from "../components/BotaoAlterarTema.vue";
 
 import DocumentList from "../components/DocumentList.vue";
 
 import DocumentList from "../components/DocumentList.vue";
 
@@ -23,6 +23,8 @@ const docs = reactive({
 
 
 
 const painelAberto = ref("");
 
 const painelAberto = ref("");
 
 const rotaAtiva = computed(() => String(route.name ?? ""));
 
 const rotaAtiva = computed(() => String(route.name ?? ""));
 
+const classeBotaoSidebar =
 
+  "w-full rounded-lg border px-3 py-2.5 text-center text-sm font-medium transition-colors !border-primary !bg-none !bg-primary !text-primary-foreground hover:!bg-[var(--primary-600)] hover:!border-[var(--primary-600)]";
 
 const tituloPagina = computed(() => {
 
 const tituloPagina = computed(() => {
 
   const nome = rotaAtiva.value;
 
   const nome = rotaAtiva.value;
 
   if (nome === "home") return "Nova conversa";
 
   if (nome === "home") return "Nova conversa";
 
@@ -31,6 +33,12 @@ const tituloPagina = computed(() => {
 
   return "Oráculo";
 
   return "Oráculo";
 
 });
 
 });
 
 
 
+const tituloModal = computed(() => {
 
+  if (painelAberto.value === "update") return "Update";
 
+  if (painelAberto.value === "documentos") return "Documentos";
 
+  return "";
 
+});
 
+
 
 function irPara(nome) {
 
 function irPara(nome) {
 
   router.push({ name: nome });
 
   router.push({ name: nome });
 
 }
 
 }
 
@@ -40,6 +48,10 @@ function alternarPainel(nome) {
 
   painelAberto.value = painelAberto.value === n ? "" : n;
 
   painelAberto.value = painelAberto.value === n ? "" : n;
 
 }
 
 }
 
 
 
+function fecharModal() {
 
+  painelAberto.value = "";
 
+}
 
+
 
 async function novaConversa() {
 
 async function novaConversa() {
 
   newConversation();
 
   newConversation();
 
   await router.push({ name: "home" });
 
   await router.push({ name: "home" });
 
@@ -75,198 +87,162 @@ async function onIngested({ text, source, file } = {}) {
 
 onMounted(async () => {
 
 onMounted(async () => {
 
   await loadDocs();
 
   await loadDocs();
 
 });
 
 });
 
+
 
+function onKeyDown(e) {
 
+  if (!painelAberto.value) return;
 
+  if (e?.key === "Escape") fecharModal();
 
+}
 
+
 
+onMounted(() => {
 
+  window.addEventListener("keydown", onKeyDown);
 
+});
 
+
 
+onBeforeUnmount(() => {
 
+  window.removeEventListener("keydown", onKeyDown);
 
+});
 
+
 
+let overflowAntes = "";
 
+watch(
 
+  () => painelAberto.value,
 
+  (v) => {
 
+    const aberto = Boolean(v);
 
+    if (aberto) {
 
+      overflowAntes = document.body.style.overflow || "";
 
+      document.body.style.overflow = "hidden";
 
+    } else {
 
+      document.body.style.overflow = overflowAntes;
 
+    }
 
+  }
 
+);
 
 </script>
 
 </script>
 
 
 
 <template>
 
 <template>
 
-  <div class="app">
 
-    <div class="appShell layoutShell">
 
-      <div class="layoutOverlay" aria-hidden="true" />
 
-
 
-      <header class="layoutHeader">
 
-        <div class="layoutHeaderLeft">
 
-          <div class="brandTitle">ORÁCULO</div>
 
-          <div class="brandSub">Assistente interno com base de conhecimento</div>
 
+  <div class="h-screen overflow-hidden bg-background text-foreground">
 
+    <div
 
+      class="[--layout-header-height:5rem] relative grid h-full min-h-0 grid-cols-[340px_1fr] grid-rows-[var(--layout-header-height)_1fr] overflow-hidden max-[980px]:grid-cols-1 max-[980px]:grid-rows-[var(--layout-header-height)_1fr_auto]"
 
+    >
 
+      <div
 
+        aria-hidden="true"
 
+        class="pointer-events-none absolute inset-0 z-0 bg-[radial-gradient(900px_520px_at_20%_10%,rgba(37,99,235,0.12),transparent_60%),radial-gradient(700px_520px_at_85%_35%,rgba(162,102,255,0.10),transparent_60%)] dark:hidden"
 
+      />
 
+      <div
 
+        aria-hidden="true"
 
+        class="pointer-events-none absolute inset-0 z-0 hidden bg-[radial-gradient(900px_520px_at_20%_10%,rgba(91,140,255,0.18),transparent_60%),radial-gradient(700px_520px_at_85%_35%,rgba(162,102,255,0.14),transparent_60%)] dark:block"
 
+      />
 
+
 
+      <header
 
+        class="col-span-full row-start-1 relative z-10 grid grid-cols-[340px_1fr] items-center gap-[18px] border-b border-gray-200 bg-primary px-[18px] py-[14px] text-primary-foreground dark:border-gray-700 dark:bg-primary max-[980px]:flex"
 
+      >
 
+        <div class="min-w-0">
 
+          <div class="text-[16px] font-extrabold tracking-[0.14em]">ORÁCULO</div>
 
+          <div class="mt-1.5 text-xs text-primary-foreground/80">Assistente interno com base de conhecimento</div>
 
         </div>
 
         </div>
 
 
 
-        <div class="layoutHeaderRight">
 
+        <div class="min-w-0 flex items-center justify-between gap-3 max-[980px]:flex-1">
 
           <div class="min-w-0">
 
           <div class="min-w-0">
 
-            <div class="text-base font-medium truncate ">{{ tituloPagina }}</div>
 
+            <div class="truncate text-base font-medium">{{ tituloPagina }}</div>
 
           </div>
 
           </div>
 
           <BotaoAlterarTema />
 
           <BotaoAlterarTema />
 
         </div>
 
         </div>
 
       </header>
 
       </header>
 
 
 
-      <aside class="sidebar layoutSidebar">
 
+      <aside
 
+        class="col-start-1 row-start-2 relative z-10 flex min-h-0 flex-col gap-[14px] overflow-hidden border-r border-gray-200 bg-gray-100/50 p-[18px] shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50 max-[980px]:row-start-3 max-[980px]:border-r-0 max-[980px]:border-b-0 max-[980px]:border-t"
 
+      >
 
+        <div class="grid flex-1 min-h-0 gap-[14px] overflow-auto pr-0.5">
 
+          <div class="rounded-xl border border-gray-200 bg-background/60 p-4 text-sm text-gray-500 dark:border-gray-700 dark:bg-background/10 dark:text-gray-400">
 
+           
+          </div>
 
+        </div>
 
 
 
-        <div class="sidebarScroll">
 
-          <div class="panel sidebarNav">
 
+        <div class="rounded-xl border border-gray-200 bg-background/60 p-2 shadow-sm backdrop-blur-md dark:border-gray-700">
 
+          <div class="grid content-end gap-1.5">
 
             <button
 
             <button
 
               type="button"
 
               type="button"
 
-              class="sidebarNavButton"
 
-              :class="{ active: rotaAtiva === 'home' }"
 
+              :class="[classeBotaoSidebar, rotaAtiva === 'home' ? '!border-ring' : '']"
 
               @click="novaConversa"
 
               @click="novaConversa"
 
             >
 
             >
 
               Nova conversa
 
               Nova conversa
 
             </button>
 
             </button>
 
             <button
 
             <button
 
               type="button"
 
               type="button"
 
-              class="sidebarNavButton"
 
-              :class="{ active: rotaAtiva === 'conversas-pesquisar' }"
 
+              :class="[classeBotaoSidebar, rotaAtiva === 'conversas-pesquisar' ? '!border-ring' : '']"
 
               @click="irPara('conversas-pesquisar')"
 
               @click="irPara('conversas-pesquisar')"
 
             >
 
             >
 
               Pesquisar conversas
 
               Pesquisar conversas
 
             </button>
 
             </button>
 
             <button
 
             <button
 
               type="button"
 
               type="button"
 
-              class="sidebarNavButton"
 
-              :class="{ active: rotaAtiva === 'conversas-historico' }"
 
+              :class="[classeBotaoSidebar, rotaAtiva === 'conversas-historico' ? '!border-ring' : '']"
 
               @click="irPara('conversas-historico')"
 
               @click="irPara('conversas-historico')"
 
             >
 
             >
 
               Histórico
 
               Histórico
 
             </button>
 
             </button>
 
 
 
-            <div class="sidebarNavDivider" />
 
+            <div class="my-1 h-px bg-gray-200 dark:bg-gray-700" />
 
 
 
             <button
 
             <button
 
               type="button"
 
               type="button"
 
-              class="sidebarNavButton"
 
-              :class="{ active: painelAberto === 'ingestao' }"
 
-              @click="alternarPainel('ingestao')"
 
+              :class="[classeBotaoSidebar, painelAberto === 'update' ? '!border-ring' : '']"
 
+              @click="alternarPainel('update')"
 
             >
 
             >
 
-              Ingestão
 
+              Update
 
             </button>
 
             </button>
 
             <button
 
             <button
 
               type="button"
 
               type="button"
 
-              class="sidebarNavButton"
 
-              :class="{ active: painelAberto === 'documentos' }"
 
+              :class="[classeBotaoSidebar, painelAberto === 'documentos' ? '!border-ring' : '']"
 
               @click="alternarPainel('documentos')"
 
               @click="alternarPainel('documentos')"
 
             >
 
             >
 
               Documentos
 
               Documentos
 
             </button>
 
             </button>
 
           </div>
 
           </div>
 
-
 
-          <DocumentUpload v-if="painelAberto === 'ingestao'" @ingested="onIngested" />
 
-          <template v-if="painelAberto === 'documentos'">
 
-            <SearchBox :results="searchResults" :loading="searchLoading" :error="searchError" @search="runSearch" />
 
-            <DocumentList :items="docs.items" :loading="docs.loading" :error="docs.error" @refresh="loadDocs" />
 
-          </template>
 
         </div>
 
         </div>
 
 
 
-        <div class="sidebarFooter muted">
 
+        <div class="pr-8 text-[11px] leading-snug text-gray-400 dark:text-gray-500">
 
           Backend: http://localhost:3001 · Qdrant: http://localhost:6333 · Ollama: http://localhost:11434
 
           Backend: http://localhost:3001 · Qdrant: http://localhost:6333 · Ollama: http://localhost:11434
 
         </div>
 
         </div>
 
       </aside>
 
       </aside>
 
 
 
-      <main class="main layoutMain !flex !flex-col !p-0 !overflow-hidden">
 
-        <div class="flex-1 overflow-auto p-4 md:p-6">
 
+      <Teleport to="body">
 
+        <div v-if="painelAberto" class="fixed inset-0 z-[9999]">
 
+          <div class="absolute inset-0 bg-black/40 dark:bg-black/60" @click="fecharModal" />
 
+          <div class="absolute inset-0 flex items-center justify-center p-4">
 
+            <div
 
+              class="w-full max-w-[980px] overflow-hidden rounded-2xl border border-gray-200 bg-background text-foreground shadow-lg dark:border-gray-700"
 
+              @click.stop
 
+            >
 
+              <div class="flex items-center justify-between gap-3 border-b border-gray-200 px-4 py-3 dark:border-gray-700">
 
+                <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ tituloModal }}</div>
 
+                <button
 
+                  type="button"
 
+                  class="rounded-lg border border-gray-200 bg-background/60 px-3 py-1.5 text-sm text-gray-500 transition-colors hover:border-gray-500 dark:border-gray-700 dark:bg-background/10 dark:text-gray-400 dark:hover:border-gray-400"
 
+                  @click="fecharModal"
 
+                >
 
+                  Fechar
 
+                </button>
 
+              </div>
 
+
 
+              <div class="max-h-[calc(100vh-8rem)] overflow-auto p-4">
 
+                <DocumentUpload v-if="painelAberto === 'update'" @ingested="onIngested" />
 
+                <template v-else-if="painelAberto === 'documentos'">
 
+                  <SearchBox :results="searchResults" :loading="searchLoading" :error="searchError" @search="runSearch" />
 
+                  <div class="h-3" />
 
+                  <DocumentList :items="docs.items" :loading="docs.loading" :error="docs.error" @refresh="loadDocs" />
 
+                </template>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </Teleport>
 
+
 
+      <main class="col-start-2 row-start-2 relative z-10 flex min-h-0 flex-col overflow-hidden p-0 max-[980px]:col-start-1 max-[980px]:row-start-2">
 
+        <div
 
+          class="flex-1 min-h-0 overflow-auto p-4 md:p-6"
 
+          :class="rotaAtiva === 'home' ? 'bg-black/10' : ''"
 
+        >
 
           <slot />
 
           <slot />
 
         </div>
 
         </div>
 
       </main>
 
       </main>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </template>
 
 </template>
 
-
 
-<style scoped>
 
-.layoutShell {
 
-  --layout-header-height: 5rem;
 
-  position: relative;
 
-  grid-template-rows: var(--layout-header-height) 1fr;
 
-}
 
-
 
-.layoutOverlay {
 
-  position: absolute;
 
-  inset: 0;
 
-  pointer-events: none;
 
-  z-index: 0;
 
-  background: radial-gradient(900px 520px at 20% 10%, rgba(37, 99, 235, 0.12), transparent 60%),
 
-    radial-gradient(700px 520px at 85% 35%, rgba(162, 102, 255, 0.1), transparent 60%);
 
-}
 
-
 
-:global(html.dark) .layoutOverlay {
 
-  background: radial-gradient(900px 520px at 20% 10%, rgba(91, 140, 255, 0.18), transparent 60%),
 
-    radial-gradient(700px 520px at 85% 35%, rgba(162, 102, 255, 0.14), transparent 60%);
 
-}
 
-
 
-.layoutHeader {
 
-  grid-column: 1 / -1;
 
-  grid-row: 1;
 
-  position: relative;
 
-  z-index: 10;
 
-  display: grid;
 
-  grid-template-columns: 340px 1fr;
 
-  align-items: center;
 
-  gap: 18px;
 
-  padding: 14px 18px;
 
-  background: var(--primary);
 
-  color: var(--primary-foreground);
 
-  border-bottom: 1px solid var(--border);
 
-}
 
-
 
-.layoutHeaderLeft {
 
-  min-width: 0;
 
-}
 
-
 
-.layoutHeaderRight {
 
-  min-width: 0;
 
-  display: flex;
 
-  align-items: center;
 
-  justify-content: space-between;
 
-  gap: 14px;
 
-}
 
-
 
-.layoutSidebar {
 
-  grid-column: 1;
 
-  grid-row: 2;
 
-  position: relative;
 
-  z-index: 10;
 
-  grid-template-rows: 1fr auto;
 
-}
 
-
 
-.layoutMain {
 
-  grid-column: 2;
 
-  grid-row: 2;
 
-  position: relative;
 
-  z-index: 10;
 
-}
 
-
 
-@media (max-width: 980px) {
 
-  .layoutHeader {
 
-    display: flex;
 
-  }
 
-
 
-  .layoutHeaderRight {
 
-    flex: 1;
 
-  }
 
-}
 
-
 
-.sidebarNav {
 
-  display: grid;
 
-  align-content: end;
 
-  gap: 6px;
 
-  padding: 6px;
 
-}
 
-
 
-.sidebarNavButton {
 
-  width: 100%;
 
-  height: 95%;
 
-  text-align: center;
 
-  background: var(--primary);
 
-  color: var(--primary-foreground);
 
-  border-color: var(--primary);
 
-}
 
-
 
-.sidebarNavButton:hover:not(:disabled) {
 
-  background: var(--primary-600);
 
-  border-color: var(--primary-600);
 
-}
 
-
 
-.sidebarNavButton.active {
 
-  border-color: var(--ring);
 
-}
 
-
 
-.sidebarNavDivider {
 
-  height: 1px;
 
-  background: var(--border);
 
-  margin: 4px 0;
 
-}
 
-</style>

+ 4 - 1
src/styles/tailwind.css
Просмотреть файл 

@@ -235,7 +235,10 @@ body {
 
 
 
 @layer base {
 
 @layer base {
 
   * {
 
   * {
 
-    @apply border-border outline-ring/50;
 
+    @apply border-gray-200 outline-ring/50;
 
+  }
 
+  .dark * {
 
+    @apply border-gray-700;
 
   }
 
   }
 
   body {
 
   body {
 
     @apply bg-background text-foreground;
 
     @apply bg-background text-foreground;

+ 28 - 42
src/views/conversas/ConversasHistoricoView.vue
Просмотреть файл 

@@ -31,51 +31,37 @@ function excluirConversa(id) {
 
 
 
 <template>
 
 <template>
 
   <LayoutSistema>
 
   <LayoutSistema>
 
-    <div class="panel">
 
-      <h2 class="title">Histórico</h2>
 
-      <div class="muted" style="margin-bottom: 10px">{{ items.length }} conversas</div>
 
+    <section class="rounded-2xl border border-gray-200 bg-gray-100/50 p-4 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50">
 
+      <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Histórico</h2>
 
+      <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">{{ items.length }} conversas</div>
 
 
 
-      <div class="historyList">
 
-        <div v-for="c in items" :key="c.id" class="historyItem" :class="{ active: c.id === activeConversationId }">
 
-          <button class="historyOpen" type="button" @click="abrirConversa(c.id)">
 
-            <div class="historyTitle">{{ c.title || "Nova conversa" }}</div>
 
-            <div class="muted">{{ formatarData(c.updatedAt) }} · {{ c.messageCount ?? 0 }} msgs</div>
 
+      <div class="mt-3 grid gap-2">
 
+        <div v-for="c in items" :key="c.id" class="grid grid-cols-[1fr_auto] items-stretch gap-2">
 
+          <button
 
+            type="button"
 
+            class="rounded-xl border bg-background/60 p-3 text-left transition-colors dark:bg-background/10"
 
+            :class="
 
+              c.id === activeConversationId
 
+                ? 'border-gray-500 dark:border-gray-400'
 
+                : 'border-gray-200 hover:border-gray-500 dark:border-gray-700 dark:hover:border-gray-400'
 
+            "
 
+            @click="abrirConversa(c.id)"
 
+          >
 
+            <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ c.title || 'Nova conversa' }}</div>
 
+            <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
 
+              {{ formatarData(c.updatedAt) }} · {{ c.messageCount ?? 0 }} msgs
 
+            </div>
 
+          </button>
 
+
 
+          <button
 
+            type="button"
 
+            class="rounded-xl border border-gray-200 bg-background/60 px-3 py-2 text-sm text-gray-500 transition-colors hover:border-gray-500 dark:border-gray-700 dark:bg-background/10 dark:text-gray-400 dark:hover:border-gray-400"
 
+            @click="excluirConversa(c.id)"
 
+          >
 
+            Excluir
 
           </button>
 
           </button>
 
-          <button class="historyDelete" type="button" @click="excluirConversa(c.id)">Excluir</button>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
-    </div>
 
+    </section>
 
   </LayoutSistema>
 
   </LayoutSistema>
 
 </template>
 
 </template>
 
-
 
-<style scoped>
 
-.historyList {
 
-  display: grid;
 
-  gap: 10px;
 
-}
 
-
 
-.historyItem {
 
-  display: grid;
 
-  grid-template-columns: 1fr auto;
 
-  gap: 10px;
 
-  align-items: stretch;
 
-}
 
-
 
-.historyItem.active .historyOpen {
 
-  border-color: var(--ring);
 
-}
 
-
 
-.historyOpen {
 
-  text-align: left;
 
-}
 
-
 
-.historyTitle {
 
-  font-weight: 650;
 
-  margin-bottom: 6px;
 
-}
 
-
 
-.historyDelete {
 
-  white-space: nowrap;
 
-}
 
-</style>
 
-

+ 16 - 31
src/views/conversas/ConversasPesquisarView.vue
Просмотреть файл 

@@ -23,9 +23,10 @@ function abrirConversa(id) {
 
 
 
 <template>
 
 <template>
 
   <LayoutSistema>
 
   <LayoutSistema>
 
-    <div class="panel">
 
-      <h2 class="title">Pesquisar conversas</h2>
 
-      <div class="row">
 
+    <section class="rounded-2xl border border-gray-200 bg-gray-100/50 p-4 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50">
 
+      <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Pesquisar conversas</h2>
 
+
 
+      <div class="mt-3 grid grid-cols-1 gap-2 min-[520px]:grid-cols-[1fr_120px]">
 
         <input
 
         <input
 
           v-model="draftQuery"
 
           v-model="draftQuery"
 
           placeholder="Buscar por título ou conteúdo..."
 
           placeholder="Buscar por título ou conteúdo..."
 
@@ -34,38 +35,22 @@ function abrirConversa(id) {
 
         <button type="button" :disabled="!draftQuery.trim()" @click="buscar">Buscar</button>
 
         <button type="button" :disabled="!draftQuery.trim()" @click="buscar">Buscar</button>
 
       </div>
 
       </div>
 
 
 
-      <div class="muted" style="margin-top: 10px">
 
+      <div class="mt-2.5 text-sm text-gray-500 dark:text-gray-400">
 
         {{ query.trim() ? `${results.length} resultados` : "Digite para filtrar o histórico." }}
 
         {{ query.trim() ? `${results.length} resultados` : "Digite para filtrar o histórico." }}
 
       </div>
 
       </div>
 
 
 
-      <div class="results" style="margin-top: 12px">
 
-        <button v-for="c in results" :key="c.id" class="resultItem" type="button" @click="abrirConversa(c.id)">
 
-          <div class="resultTitle">{{ c.title || "Nova conversa" }}</div>
 
-          <div class="muted">{{ c.messageCount ?? 0 }} msgs</div>
 
+      <div class="mt-3 grid gap-2">
 
+        <button
 
+          v-for="c in results"
 
+          :key="c.id"
 
+          type="button"
 
+          class="rounded-xl border border-gray-200 bg-background/60 p-3 text-left transition-colors hover:border-gray-500 dark:border-gray-700 dark:bg-background/10 dark:hover:border-gray-400"
 
+          @click="abrirConversa(c.id)"
 
+        >
 
+          <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ c.title || "Nova conversa" }}</div>
 
+          <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ c.messageCount ?? 0 }} msgs</div>
 
         </button>
 
         </button>
 
       </div>
 
       </div>
 
-    </div>
 
+    </section>
 
   </LayoutSistema>
 
   </LayoutSistema>
 
 </template>
 
 </template>
 
-
 
-<style scoped>
 
-.row {
 
-  display: grid;
 
-  grid-template-columns: 1fr 120px;
 
-  gap: 10px;
 
-}
 
-
 
-.results {
 
-  display: grid;
 
-  gap: 10px;
 
-}
 
-
 
-.resultItem {
 
-  text-align: left;
 
-}
 
-
 
-.resultTitle {
 
-  font-weight: 650;
 
-  margin-bottom: 6px;
 
-}
 
-</style>

+ 3 - 4
src/views/pagina-inicial/PaginaInicialView.vue
Просмотреть файл 

@@ -27,7 +27,7 @@ async function onLandingSend() {
 
     <div v-if="isLanding" class="min-h-[calc(100vh-var(--layout-header-height))] flex items-end justify-center pb-12 md:pb-16">
 
     <div v-if="isLanding" class="min-h-[calc(100vh-var(--layout-header-height))] flex items-end justify-center pb-12 md:pb-16">
 
       <div class="w-full max-w-[760px]">
 
       <div class="w-full max-w-[760px]">
 
         <div class="text-3xl font-extrabold tracking-tight">Como posso ajudar?</div>
 
         <div class="text-3xl font-extrabold tracking-tight">Como posso ajudar?</div>
 
-        <div class="mt-2 text-sm text-muted-foreground">
 
+        <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
 
           Digite sua pergunta no campo abaixo. Você também pode alimentar a base pela barra lateral.
 
           Digite sua pergunta no campo abaixo. Você também pode alimentar a base pela barra lateral.
 
         </div>
 
         </div>
 
 
 
@@ -42,14 +42,13 @@ async function onLandingSend() {
 
           />
 
           />
 
         </div>
 
         </div>
 
 
 
-        <div v-if="chatError" class="mt-2.5 text-sm text-muted-foreground">Erro: {{ chatError }}</div>
 
+        <div v-if="chatError" class="mt-2.5 text-sm text-gray-500 dark:text-gray-400">Erro: {{ chatError }}</div>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
 
 
     <div v-else class="relative h-full w-full">
 
     <div v-else class="relative h-full w-full">
 
-      <div class="absolute inset-0 rounded-2xl bg-black/20 dark:bg-black/35" />
 
       <div class="relative flex h-full w-full flex-col p-4 md:p-6">
 
       <div class="relative flex h-full w-full flex-col p-4 md:p-6">
 
-        <ChatWindow class="flex-1 min-h-0" :messages="chatMessages" :loading="chatLoading" :error="chatError" @send="sendMessage" />
 
+        <ChatWindow class="flex-1 min-h-1" :messages="chatMessages" :loading="chatLoading" :error="chatError" @send="sendMessage" />
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
   </LayoutSistema>
 
   </LayoutSistema>