Преглед на файлове

ajustes: corrige seletor de modo(documentos/atendimentos) na tela inicial do chat

leonardo преди 2 месеца
родител
ревизия
64fef2a99f
променени са 3 файла, в които са добавени 32 реда и са изтрити 18 реда
  1. 27 0
      src/components/ChatModeToggle.vue
  2. 2 18
      src/components/ChatWindow.vue
  3. 3 0
      src/views/pagina-inicial/PaginaInicialView.vue

+ 27 - 0
src/components/ChatModeToggle.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-gray-50 p-0.5 text-xs dark:border-gray-700 dark:bg-gray-800/50">
+    <button
+      type="button"
+      class="rounded-md px-2.5 py-1 font-medium transition-colors"
+      :class="mode === 'documentos' ? 'bg-white text-foreground shadow-sm dark:bg-gray-700' : 'text-gray-500 dark:text-gray-400'"
+      @click="$emit('update:mode', 'documentos')"
+    >
+      Documentos
+    </button>
+    <button
+      type="button"
+      class="rounded-md px-2.5 py-1 font-medium transition-colors"
+      :class="mode === 'atendimentos' ? 'bg-white text-foreground shadow-sm dark:bg-gray-700' : 'text-gray-500 dark:text-gray-400'"
+      @click="$emit('update:mode', 'atendimentos')"
+    >
+      Atendimentos
+    </button>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  mode: { type: String, default: "documentos" }
+});
+defineEmits(["update:mode"]);
+</script>

+ 2 - 18
src/components/ChatWindow.vue

@@ -102,24 +102,7 @@
       </div>
     </div>
 
-    <div class="flex items-center gap-1 self-start rounded-lg border border-gray-200 bg-gray-50 p-0.5 text-xs dark:border-gray-700 dark:bg-gray-800/50">
-      <button
-        type="button"
-        class="rounded-md px-2.5 py-1 font-medium transition-colors"
-        :class="mode === 'documentos' ? 'bg-white text-foreground shadow-sm dark:bg-gray-700' : 'text-gray-500 dark:text-gray-400'"
-        @click="$emit('update:mode', 'documentos')"
-      >
-        Documentos
-      </button>
-      <button
-        type="button"
-        class="rounded-md px-2.5 py-1 font-medium transition-colors"
-        :class="mode === 'atendimentos' ? 'bg-white text-foreground shadow-sm dark:bg-gray-700' : 'text-gray-500 dark:text-gray-400'"
-        @click="$emit('update:mode', 'atendimentos')"
-      >
-        Atendimentos
-      </button>
-    </div>
+    <ChatModeToggle class="self-start" :mode="mode" @update:mode="$emit('update:mode', $event)" />
 
     <div class="grid gap-3 md:grid-cols-[1fr_auto] md:items-end">
       <textarea
@@ -164,6 +147,7 @@ import { marked, Renderer } from "marked";
 import DOMPurify from "dompurify";
 import hljs from "highlight.js";
 import BaseButton from "./base/BaseButton.vue";
+import ChatModeToggle from "./ChatModeToggle.vue";
 
 const props = defineProps({
   messages: { type: Array, required: true },

+ 3 - 0
src/views/pagina-inicial/PaginaInicialView.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import ChatWindow from "../../components/ChatWindow.vue";
+import ChatModeToggle from "../../components/ChatModeToggle.vue";
 import LayoutSistema from "../../layout/LayoutSistema.vue";
 import { useChat } from "../../composables/useChat.js";
 import BaseButton from "../../components/base/BaseButton.vue";
@@ -144,6 +145,8 @@ onMounted(() => {
               Enviar
             </BaseButton>
           </div>
+
+          <ChatModeToggle class="mt-3" :mode="chatMode" @update:mode="setMode" />
         </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">