|
|
@@ -1,5 +1,12 @@
|
|
|
<script setup>
|
|
|
-import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
|
|
|
+import {
|
|
|
+ computed,
|
|
|
+ onBeforeUnmount,
|
|
|
+ onMounted,
|
|
|
+ reactive,
|
|
|
+ ref,
|
|
|
+ watch,
|
|
|
+} from "vue";
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
import BotaoAlterarTema from "../components/BotaoAlterarTema.vue";
|
|
|
import DocumentList from "../components/DocumentList.vue";
|
|
|
@@ -13,18 +20,50 @@ const router = useRouter();
|
|
|
const route = useRoute();
|
|
|
const { newConversation } = useChat();
|
|
|
|
|
|
-const { results: searchResults, loading: searchLoading, error: searchError, run: runSearch } = useSearch();
|
|
|
+const {
|
|
|
+ results: searchResults,
|
|
|
+ loading: searchLoading,
|
|
|
+ error: searchError,
|
|
|
+ run: runSearch,
|
|
|
+} = useSearch();
|
|
|
|
|
|
const docs = reactive({
|
|
|
items: [],
|
|
|
loading: false,
|
|
|
- error: ""
|
|
|
+ error: "",
|
|
|
});
|
|
|
|
|
|
+const sidebarRecolhida = ref(false);
|
|
|
const painelAberto = ref("");
|
|
|
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 layoutStyle = computed(() => ({
|
|
|
+ "--layout-sidebar-width": sidebarRecolhida.value ? "84px" : "280px",
|
|
|
+}));
|
|
|
+const classeItemSidebarBase = computed(() =>
|
|
|
+ sidebarRecolhida.value
|
|
|
+ ? "w-full flex items-center justify-center gap-0 rounded-xl p-2.5 text-sm font-medium transition-colors !bg-none !bg-transparent !border-0 !transform-none hover:!transform-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
|
|
|
+ : "w-full flex items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm font-medium transition-colors !bg-none !bg-transparent !border-0 !transform-none hover:!transform-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
|
|
|
+);
|
|
|
+const classeItemSidebarAtivo =
|
|
|
+ "text-gray-900 !bg-gray-200/70 hover:!bg-gray-300/70 dark:text-white dark:!bg-white/10 dark:hover:!bg-white/10";
|
|
|
+const classeItemSidebarInativo =
|
|
|
+ "text-gray-600 hover:text-gray-900 hover:!bg-gray-300/70 dark:text-white/70 dark:hover:text-white dark:hover:!bg-white/10";
|
|
|
+const classeIconAtivo = "text-gray-900 dark:text-white";
|
|
|
+const classeIconInativo = "text-gray-500 dark:text-white/60";
|
|
|
+const classeRotulo = computed(() =>
|
|
|
+ sidebarRecolhida.value ? "sr-only" : "min-w-0 truncate",
|
|
|
+);
|
|
|
+
|
|
|
+function classeItemSidebar(ativo) {
|
|
|
+ return [
|
|
|
+ classeItemSidebarBase.value,
|
|
|
+ ativo ? classeItemSidebarAtivo : classeItemSidebarInativo,
|
|
|
+ ];
|
|
|
+}
|
|
|
+
|
|
|
+function classeIcon(ativo) {
|
|
|
+ return ["h-5 w-5 shrink-0", ativo ? classeIconAtivo : classeIconInativo];
|
|
|
+}
|
|
|
const tituloPagina = computed(() => {
|
|
|
const nome = rotaAtiva.value;
|
|
|
if (nome === "home") return "Nova conversa";
|
|
|
@@ -88,6 +127,18 @@ onMounted(async () => {
|
|
|
await loadDocs();
|
|
|
});
|
|
|
|
|
|
+onMounted(() => {
|
|
|
+ const v = window.localStorage.getItem("layout.sidebarRecolhida");
|
|
|
+ if (v != null) sidebarRecolhida.value = v === "1" || v === "true";
|
|
|
+});
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => sidebarRecolhida.value,
|
|
|
+ (v) => {
|
|
|
+ window.localStorage.setItem("layout.sidebarRecolhida", v ? "1" : "0");
|
|
|
+ },
|
|
|
+);
|
|
|
+
|
|
|
function onKeyDown(e) {
|
|
|
if (!painelAberto.value) return;
|
|
|
if (e?.key === "Escape") fecharModal();
|
|
|
@@ -112,14 +163,15 @@ watch(
|
|
|
} else {
|
|
|
document.body.style.overflow = overflowAntes;
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
);
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<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]"
|
|
|
+ class="[--layout-header-height:5rem] relative grid h-full min-h-0 grid-cols-[var(--layout-sidebar-width)_1fr] grid-rows-[var(--layout-header-height)_1fr] overflow-hidden transition-[grid-template-columns] duration-200 ease-in-out max-[980px]:grid-cols-1 max-[980px]:grid-rows-[var(--layout-header-height)_1fr_auto]"
|
|
|
+ :style="layoutStyle"
|
|
|
>
|
|
|
<div
|
|
|
aria-hidden="true"
|
|
|
@@ -131,14 +183,25 @@ watch(
|
|
|
/>
|
|
|
|
|
|
<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"
|
|
|
+ class="col-span-full row-start-1 relative z-10 grid grid-cols-[var(--layout-sidebar-width)_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 class="min-w-0 overflow-hidden">
|
|
|
+ <div
|
|
|
+ class="truncate whitespace-nowrap text-[16px] font-extrabold tracking-[0.14em]"
|
|
|
+ >
|
|
|
+ ORÁCULO
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="!sidebarRecolhida"
|
|
|
+ class="mt-1.5 text-xs text-primary-foreground/80"
|
|
|
+ >
|
|
|
+ Assistente interno com base de conhecimento
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="min-w-0 flex items-center justify-between gap-3 max-[980px]:flex-1">
|
|
|
+ <div
|
|
|
+ class="min-w-0 flex items-center justify-between gap-4 max-[980px]:flex-1"
|
|
|
+ >
|
|
|
<div class="min-w-0">
|
|
|
<div class="truncate text-base font-medium">{{ tituloPagina }}</div>
|
|
|
</div>
|
|
|
@@ -147,75 +210,234 @@ watch(
|
|
|
</header>
|
|
|
|
|
|
<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"
|
|
|
+ class="col-start-1 row-start-2 relative z-10 flex min-h-0 min-w-0 flex-col gap-3 overflow-hidden border-r border-gray-200 bg-transparent p-0 dark:border-gray-700 max-[980px]:row-start-3 max-[980px]:border-r-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
|
|
|
+ class="flex min-h-0 flex-1 flex-col overflow-hidden rounded-[28px] border border-gray-200 bg-white/70 p-3 shadow-sm backdrop-blur-md dark:border-white/10 dark:bg-gradient-to-b dark:from-[#101827] dark:to-[#070b16] dark:shadow-[0_18px_50px_rgba(0,0,0,0.35)]"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ :class="
|
|
|
+ sidebarRecolhida
|
|
|
+ ? 'flex items-center justify-center px-1 pb-1'
|
|
|
+ : 'flex items-center justify-end px-1 pb-1'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ class="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-gray-200 bg-white/60 text-gray-600 transition-colors hover:bg-white/80 hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background dark:border-white/10 dark:bg-white/5 dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
|
|
|
+ :aria-label="
|
|
|
+ sidebarRecolhida ? 'Expandir sidebar' : 'Recolher sidebar'
|
|
|
+ "
|
|
|
+ :title="sidebarRecolhida ? 'Expandir sidebar' : 'Recolher sidebar'"
|
|
|
+ @click="sidebarRecolhida = !sidebarRecolhida"
|
|
|
+ >
|
|
|
+ <svg
|
|
|
+ v-if="sidebarRecolhida"
|
|
|
+ class="h-5 w-5"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ fill="none"
|
|
|
+ stroke="currentColor"
|
|
|
+ stroke-width="1.8"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ d="m9 6 6 6-6 6"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+ <svg
|
|
|
+ v-else
|
|
|
+ class="h-5 w-5"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ fill="none"
|
|
|
+ stroke="currentColor"
|
|
|
+ stroke-width="1.8"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ d="m15 6-6 6 6 6"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <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">
|
|
|
+ <nav class="grid gap-1.5">
|
|
|
<button
|
|
|
type="button"
|
|
|
- :class="[classeBotaoSidebar, rotaAtiva === 'home' ? '!border-ring' : '']"
|
|
|
+ :class="classeItemSidebar(rotaAtiva === 'home')"
|
|
|
+ :title="sidebarRecolhida ? 'Nova conversa' : ''"
|
|
|
@click="novaConversa"
|
|
|
>
|
|
|
- Nova conversa
|
|
|
+ <svg
|
|
|
+ :class="classeIcon(rotaAtiva === 'home')"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ fill="none"
|
|
|
+ stroke="currentColor"
|
|
|
+ stroke-width="1.8"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ d="M3 10.5 12 3l9 7.5V21a.75.75 0 0 1-.75.75H3.75A.75.75 0 0 1 3 21v-10.5Z"
|
|
|
+ />
|
|
|
+ <path
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ d="M9 21v-7.5a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 .75.75V21"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+ <span :class="classeRotulo">Nova conversa</span>
|
|
|
</button>
|
|
|
+
|
|
|
<button
|
|
|
type="button"
|
|
|
- :class="[classeBotaoSidebar, rotaAtiva === 'conversas-pesquisar' ? '!border-ring' : '']"
|
|
|
+ :class="classeItemSidebar(rotaAtiva === 'conversas-pesquisar')"
|
|
|
+ :title="sidebarRecolhida ? 'Pesquisar conversas' : ''"
|
|
|
@click="irPara('conversas-pesquisar')"
|
|
|
>
|
|
|
- Pesquisar conversas
|
|
|
+ <svg
|
|
|
+ :class="classeIcon(rotaAtiva === 'conversas-pesquisar')"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ fill="none"
|
|
|
+ stroke="currentColor"
|
|
|
+ stroke-width="1.8"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ d="M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
|
|
|
+ />
|
|
|
+ <path
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ d="M16.5 16.5 21 21"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+ <span :class="classeRotulo">Pesquisar conversas</span>
|
|
|
</button>
|
|
|
+
|
|
|
<button
|
|
|
type="button"
|
|
|
- :class="[classeBotaoSidebar, rotaAtiva === 'conversas-historico' ? '!border-ring' : '']"
|
|
|
+ :class="classeItemSidebar(rotaAtiva === 'conversas-historico')"
|
|
|
+ :title="sidebarRecolhida ? 'Histórico' : ''"
|
|
|
@click="irPara('conversas-historico')"
|
|
|
>
|
|
|
- Histórico
|
|
|
+ <svg
|
|
|
+ :class="classeIcon(rotaAtiva === 'conversas-historico')"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ fill="none"
|
|
|
+ stroke="currentColor"
|
|
|
+ stroke-width="1.8"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ d="M12 6v6l4 2"
|
|
|
+ />
|
|
|
+ <path
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ d="M21 12a9 9 0 1 1-3.2-6.9"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+ <span :class="classeRotulo">Histórico</span>
|
|
|
</button>
|
|
|
+ </nav>
|
|
|
|
|
|
- <div class="my-1 h-px bg-gray-200 dark:bg-gray-700" />
|
|
|
+ <div class="mt-auto grid gap-1.5 pt-3">
|
|
|
+ <div class="my-1 h-px bg-black/10 dark:bg-white/10" />
|
|
|
|
|
|
<button
|
|
|
type="button"
|
|
|
- :class="[classeBotaoSidebar, painelAberto === 'update' ? '!border-ring' : '']"
|
|
|
+ :class="classeItemSidebar(painelAberto === 'update')"
|
|
|
+ :title="sidebarRecolhida ? 'Update' : ''"
|
|
|
@click="alternarPainel('update')"
|
|
|
>
|
|
|
- Update
|
|
|
+ <svg
|
|
|
+ :class="classeIcon(painelAberto === 'update')"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ fill="none"
|
|
|
+ stroke="currentColor"
|
|
|
+ stroke-width="1.8"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ d="M12 3v12"
|
|
|
+ />
|
|
|
+ <path
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ d="M7.5 7.5 12 3l4.5 4.5"
|
|
|
+ />
|
|
|
+ <path
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ d="M4 21h16"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+ <span :class="classeRotulo">Update</span>
|
|
|
</button>
|
|
|
+
|
|
|
<button
|
|
|
type="button"
|
|
|
- :class="[classeBotaoSidebar, painelAberto === 'documentos' ? '!border-ring' : '']"
|
|
|
+ :class="classeItemSidebar(painelAberto === 'documentos')"
|
|
|
+ :title="sidebarRecolhida ? 'Documentos' : ''"
|
|
|
@click="alternarPainel('documentos')"
|
|
|
>
|
|
|
- Documentos
|
|
|
+ <svg
|
|
|
+ :class="classeIcon(painelAberto === 'documentos')"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ fill="none"
|
|
|
+ stroke="currentColor"
|
|
|
+ stroke-width="1.8"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ d="M7 3h7l3 3v15a.75.75 0 0 1-.75.75H7.75A.75.75 0 0 1 7 21V3Z"
|
|
|
+ />
|
|
|
+ <path
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ d="M14 3v4h4"
|
|
|
+ />
|
|
|
+ <path
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ d="M9 12h6M9 15.5h6"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+ <span :class="classeRotulo">Documentos</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <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
|
|
|
- </div>
|
|
|
+
|
|
|
</aside>
|
|
|
|
|
|
<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 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>
|
|
|
+ <div
|
|
|
+ class="flex items-center justify-between gap-3 border-b border-gray-300 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"
|
|
|
+ class="rounded-lg border border-primary bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:border-[var(--primary-600)] hover:bg-[var(--primary-600)]"
|
|
|
@click="fecharModal"
|
|
|
>
|
|
|
Fechar
|
|
|
@@ -223,11 +445,24 @@ watch(
|
|
|
</div>
|
|
|
|
|
|
<div class="max-h-[calc(100vh-8rem)] overflow-auto p-4">
|
|
|
- <DocumentUpload v-if="painelAberto === 'update'" @ingested="onIngested" />
|
|
|
+ <DocumentUpload
|
|
|
+ v-if="painelAberto === 'update'"
|
|
|
+ @ingested="onIngested"
|
|
|
+ />
|
|
|
<template v-else-if="painelAberto === 'documentos'">
|
|
|
- <SearchBox :results="searchResults" :loading="searchLoading" :error="searchError" @search="runSearch" />
|
|
|
+ <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" />
|
|
|
+ <DocumentList
|
|
|
+ :items="docs.items"
|
|
|
+ :loading="docs.loading"
|
|
|
+ :error="docs.error"
|
|
|
+ @refresh="loadDocs"
|
|
|
+ />
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -235,11 +470,10 @@ watch(
|
|
|
</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' : ''"
|
|
|
- >
|
|
|
+ <main
|
|
|
+ class="col-start-2 row-start-2 relative z-10 flex min-h-0 min-w-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 bg-black/10 p-4 md:p-6">
|
|
|
<slot />
|
|
|
</div>
|
|
|
</main>
|
