@meistrari/chat-nuxt 1.13.0 → 2.0.0

package/dist/runtime/embed/components/mobile/chat-mobile-files-view.vue

@@ -0,0 +1,386 @@
+<script setup>
+import ChatMobileBottomSheet from "./chat-mobile-bottom-sheet.vue";
+import ChatMobileFilePreview from "./chat-mobile-file-preview.vue";
+import { useConversationFileDownloads } from "../../../files/composables/conversation-file-downloads";
+import { useConversationFiles } from "../../../files/composables/conversation-files";
+import { formatFileSize, formatUploadDate, getFileTypeLabel } from "../../../files/formatting";
+const props = defineProps({
+  conversationId: { type: String, required: true }
+});
+const emit = defineEmits(["viewInChat"]);
+const conversationIdRef = computed(() => props.conversationId);
+const { files, loading } = useConversationFiles(conversationIdRef);
+const { downloadFile } = useConversationFileDownloads();
+const typeFilter = ref(null);
+const originFilter = ref(null);
+const searchExpanded = ref(false);
+const searchQuery = ref("");
+const searchInput = ref(null);
+const typeOptions = [
+  { value: "pdf", label: "PDF" },
+  { value: "document", label: "Documento" },
+  { value: "spreadsheet", label: "Planilha" },
+  { value: "text", label: "Texto" },
+  { value: "image", label: "Imagem" },
+  { value: "video", label: "V\xEDdeo" },
+  { value: "audio", label: "\xC1udio" }
+];
+const originOptions = [
+  { value: "user", label: "Usu\xE1rio" },
+  { value: "assistant", label: "Assistente" }
+];
+function matchesType(mime, filter) {
+  const m = mime.toLowerCase();
+  switch (filter) {
+    case "pdf":
+      return m.includes("pdf");
+    case "document":
+      return m.includes("word") || m.includes("document");
+    case "spreadsheet":
+      return m.includes("excel") || m.includes("spreadsheet") || m.includes("csv");
+    case "text":
+      return m.startsWith("text/") || m.includes("json");
+    case "image":
+      return m.startsWith("image/");
+    case "video":
+      return m.startsWith("video/");
+    case "audio":
+      return m.startsWith("audio/");
+  }
+}
+const filteredFiles = computed(() => {
+  let result = files.value;
+  if (searchQuery.value.trim()) {
+    const q = searchQuery.value.toLowerCase();
+    result = result.filter((f) => f.name.toLowerCase().includes(q));
+  }
+  if (typeFilter.value) {
+    result = result.filter((f) => matchesType(f.mimeType, typeFilter.value));
+  }
+  if (originFilter.value) {
+    result = result.filter((f) => f.messageRole === originFilter.value);
+  }
+  return result;
+});
+const totalCount = computed(() => files.value.length);
+const filteredCount = computed(() => filteredFiles.value.length);
+const hasActiveFilters = computed(
+  () => typeFilter.value !== null || originFilter.value !== null || searchQuery.value.trim().length > 0
+);
+const countLabel = computed(() => {
+  if (hasActiveFilters.value) {
+    return `${filteredCount.value} de ${totalCount.value} ${totalCount.value === 1 ? "arquivo" : "arquivos"}`;
+  }
+  return `${totalCount.value} ${totalCount.value === 1 ? "arquivo" : "arquivos"}`;
+});
+const typeChipLabel = computed(() => {
+  if (!typeFilter.value)
+    return "Tipo";
+  return typeOptions.find((o) => o.value === typeFilter.value)?.label ?? "Tipo";
+});
+const originChipLabel = computed(() => {
+  if (!originFilter.value)
+    return "Origem";
+  return originOptions.find((o) => o.value === originFilter.value)?.label ?? "Origem";
+});
+const typeSheetOpen = ref(false);
+const originSheetOpen = ref(false);
+const actionsFile = ref(null);
+const previewFile = ref(null);
+function clearAll() {
+  typeFilter.value = null;
+  originFilter.value = null;
+  searchQuery.value = "";
+  searchExpanded.value = false;
+}
+async function expandSearch() {
+  searchExpanded.value = true;
+  await nextTick();
+  searchInput.value?.focus();
+}
+function collapseSearch() {
+  searchExpanded.value = false;
+  searchQuery.value = "";
+}
+function pickType(value) {
+  typeFilter.value = value;
+  typeSheetOpen.value = false;
+}
+function pickOrigin(value) {
+  originFilter.value = value;
+  originSheetOpen.value = false;
+}
+function openActions(file, event) {
+  event.stopPropagation();
+  actionsFile.value = file;
+}
+function handleRowClick(file) {
+  previewFile.value = file;
+}
+function handleVisualize() {
+  if (actionsFile.value) {
+    previewFile.value = actionsFile.value;
+  }
+  actionsFile.value = null;
+}
+function handleDownloadFromSheet() {
+  if (actionsFile.value) {
+    void downloadFile(actionsFile.value);
+  }
+  actionsFile.value = null;
+}
+function handleViewInChat() {
+  emit("viewInChat");
+  actionsFile.value = null;
+}
+function getTilePalette(file) {
+  const m = file.mimeType.toLowerCase();
+  if (m.startsWith("image/")) {
+    return { bg: "#EEF2FF", fg: "#4D46DC", icon: "i-ph-image" };
+  }
+  if (m.includes("pdf")) {
+    return { bg: "#FEE2E2", fg: "#DC2626", icon: "i-ph-file-pdf" };
+  }
+  if (m.includes("excel") || m.includes("spreadsheet") || m.includes("csv")) {
+    return { bg: "#DCFCE7", fg: "#16A34A", icon: "i-ph-file-xls" };
+  }
+  if (m.startsWith("audio/")) {
+    return { bg: "#FEF3C7", fg: "#D97706", icon: "i-ph-music-note" };
+  }
+  return { bg: "#F5F5F5", fg: "#737373", icon: "i-ph-file" };
+}
+function metaLine(file) {
+  const parts = [getFileTypeLabel(file.mimeType)];
+  if (file.size) {
+    parts.push(formatFileSize(file.size));
+  }
+  if (file.createdAt) {
+    parts.push(formatUploadDate(file.createdAt));
+  }
+  return parts.join(" \xB7 ");
+}
+</script>
+
+<template>
+    <div h-full flex="~ col" pt-54px overflow-hidden relative>
+        <div
+            flex items-center gap-8px overflow-x-auto
+            px-14px pt-10px pb-6px shrink-0
+            class="filter-bar"
+        >
+            <button
+                class="filter-chip"
+                :class="{ 'filter-chip--active': typeFilter !== null }"
+                aria-label="Filtrar por tipo"
+                @click="typeSheetOpen = true"
+            >
+                <span>{{ typeChipLabel }}</span>
+                <span i-ph-caret-down text-12px />
+            </button>
+
+            <button
+                class="filter-chip"
+                :class="{ 'filter-chip--active': originFilter !== null }"
+                aria-label="Filtrar por origem"
+                @click="originSheetOpen = true"
+            >
+                <span>{{ originChipLabel }}</span>
+                <span i-ph-caret-down text-12px />
+            </button>
+
+            <button
+                v-if="!searchExpanded"
+                class="filter-search-icon"
+                aria-label="Buscar"
+                @click="expandSearch"
+            >
+                <span i-ph-magnifying-glass text-16px />
+            </button>
+
+            <div v-else class="filter-search">
+                <span i-ph-magnifying-glass text-14px text-neutral-400 />
+                <input
+                    ref="searchInput"
+                    v-model="searchQuery"
+                    type="text"
+                    placeholder="Buscar"
+                >
+                <button
+                    aria-label="Limpar busca"
+                    class="filter-search__clear"
+                    @click="collapseSearch"
+                >
+                    <span i-ph-x text-12px />
+                </button>
+            </div>
+        </div>
+
+        <div
+            flex items-center justify-between gap-8px
+            px-16px pt-2px pb-6px shrink-0
+        >
+            <span text-12px text-neutral-400 leading-16px>
+                {{ countLabel }}
+            </span>
+            <button
+                v-if="hasActiveFilters"
+                text-12px text-neutral-900 leading-16px underline
+                @click="clearAll"
+            >
+                Limpar
+            </button>
+        </div>
+
+        <div flex-1 min-h-0 overflow-y-auto px-8px pb-16px>
+            <div v-if="loading" flex="~ col" items-center justify-center py-64px>
+                <span i-ph-spinner animate-spin text-32px text-neutral-300 />
+            </div>
+
+            <div
+                v-else-if="totalCount === 0"
+                flex="~ col" items-center justify-center
+                gap-14px px-28px py-40px text-center
+            >
+                <div
+                    w-48px h-48px rounded-14px
+                    bg-neutral-100 text-neutral-500
+                    flex items-center justify-center
+                >
+                    <span i-ph-folder text-22px />
+                </div>
+                <div flex="~ col" gap-4px>
+                    <p text-16px font-500 text-neutral-900 leading-20px tracking="-.2px">
+                        Sem arquivos
+                    </p>
+                    <p text-14px text-neutral-500 leading-18px max-w-240px>
+                        Envie arquivos no chat e eles aparecerão aqui.
+                    </p>
+                </div>
+            </div>
+
+            <div
+                v-else-if="filteredCount === 0"
+                px-24px py-48px text-center
+            >
+                <p text-14px text-neutral-400 leading-18px>
+                    Nenhum arquivo encontrado.
+                </p>
+            </div>
+
+            <div v-else flex="~ col" gap-2px>
+                <div
+                    v-for="file in filteredFiles"
+                    :key="file.id"
+                    class="file-row"
+                >
+                    <button
+                        class="file-row__main"
+                        @click="handleRowClick(file)"
+                    >
+                        <div
+                            class="file-tile"
+                            :style="{ background: getTilePalette(file).bg, color: getTilePalette(file).fg }"
+                        >
+                            <span :class="getTilePalette(file).icon" text-22px />
+                        </div>
+
+                        <div flex="~ col" gap-3px min-w-0 flex-1 text-left>
+                            <span text-14px font-500 text-neutral-900 leading-18px truncate>
+                                {{ file.name }}
+                            </span>
+                            <span text-12px text-neutral-400 leading-16px truncate>
+                                {{ metaLine(file) }}
+                            </span>
+                        </div>
+                    </button>
+
+                    <button
+                        class="file-row__more"
+                        aria-label="Ações do arquivo"
+                        @click="openActions(file, $event)"
+                    >
+                        <span i-ph-dots-three text-18px />
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <ChatMobileBottomSheet
+            :open="typeSheetOpen"
+            title="Tipo de arquivo"
+            @close="typeSheetOpen = false"
+        >
+            <button
+                class="sheet-option"
+                :class="{ 'sheet-option--active': typeFilter === null }"
+                @click="pickType(null)"
+            >
+                <span>Todos</span>
+                <span v-if="typeFilter === null" class="sheet-option__dot" />
+            </button>
+            <button
+                v-for="opt in typeOptions"
+                :key="opt.value"
+                class="sheet-option"
+                :class="{ 'sheet-option--active': typeFilter === opt.value }"
+                @click="pickType(opt.value)"
+            >
+                <span>{{ opt.label }}</span>
+                <span v-if="typeFilter === opt.value" class="sheet-option__dot" />
+            </button>
+        </ChatMobileBottomSheet>
+
+        <ChatMobileBottomSheet
+            :open="originSheetOpen"
+            title="Origem do arquivo"
+            @close="originSheetOpen = false"
+        >
+            <button
+                class="sheet-option"
+                :class="{ 'sheet-option--active': originFilter === null }"
+                @click="pickOrigin(null)"
+            >
+                <span>Todas as origens</span>
+                <span v-if="originFilter === null" class="sheet-option__dot" />
+            </button>
+            <button
+                v-for="opt in originOptions"
+                :key="opt.value"
+                class="sheet-option"
+                :class="{ 'sheet-option--active': originFilter === opt.value }"
+                @click="pickOrigin(opt.value)"
+            >
+                <span>{{ opt.label }}</span>
+                <span v-if="originFilter === opt.value" class="sheet-option__dot" />
+            </button>
+        </ChatMobileBottomSheet>
+
+        <ChatMobileBottomSheet
+            :open="actionsFile !== null"
+            :title="actionsFile?.name"
+            @close="actionsFile = null"
+        >
+            <button class="sheet-action" @click="handleVisualize">
+                <span i-ph-eye text-18px />
+                <span>Visualizar</span>
+            </button>
+            <button class="sheet-action" @click="handleDownloadFromSheet">
+                <span i-ph-download-simple text-18px />
+                <span>Baixar</span>
+            </button>
+            <button class="sheet-action" @click="handleViewInChat">
+                <span i-ph-chat-circle text-18px />
+                <span>Ver no chat</span>
+            </button>
+        </ChatMobileBottomSheet>
+
+        <ChatMobileFilePreview
+            :file="previewFile"
+            @close="previewFile = null"
+        />
+    </div>
+</template>
+
+<style scoped>
+.filter-bar{scrollbar-width:none}.filter-bar::-webkit-scrollbar{display:none}.filter-chip{align-items:center;background:#fff;border:.5px solid #d9d9d9;border-radius:999px;color:#171717;display:inline-flex;flex-shrink:0;font-size:13px;font-weight:500;gap:4px;line-height:16px;padding:7px 12px;transition:background .15s,border-color .15s;white-space:nowrap}.filter-chip--active{background:#f5f5f5;border-color:#171717}.filter-search-icon{color:#171717;height:34px;justify-content:center;width:34px}.filter-search,.filter-search-icon{align-items:center;background:#fff;border:.5px solid #d9d9d9;border-radius:999px;display:inline-flex;flex-shrink:0}.filter-search{gap:6px;min-width:160px;padding:7px 12px}.filter-search input{background:transparent;border:none;color:#171717;flex:1;font-size:13px;line-height:16px;min-width:0;outline:none}.filter-search input::-moz-placeholder{color:#a3a3a3}.filter-search input::placeholder{color:#a3a3a3}.filter-search__clear{align-items:center;background:#f5f5f5;border-radius:999px;color:#737373;display:inline-flex;flex-shrink:0;height:18px;justify-content:center;width:18px}.file-row{align-items:center;background:transparent;border-radius:10px;display:flex;gap:4px;padding:0 8px 0 0;transition:background .12s;width:100%}.file-row:has(.file-row__main:active){background:#f5f5f5}.file-row__main{align-items:center;background:transparent;border-radius:10px;display:flex;flex:1;gap:12px;min-width:0;padding:10px 8px}.file-tile{border-radius:10px;height:44px;width:44px}.file-row__more,.file-tile{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.file-row__more{background:transparent;border-radius:8px;color:#737373;height:32px;transition:background .12s;width:32px}.file-row__more:hover{background:#f5f5f5}.sheet-option{align-items:center;background:transparent;color:#171717;display:flex;font-size:14px;font-weight:500;justify-content:space-between;letter-spacing:-.15px;line-height:18px;padding:14px 18px;transition:background .12s;width:100%}.sheet-option--active{background:#f5f5f5}.sheet-option__dot{background:#171717;border-radius:50%;height:8px;width:8px}.sheet-action{align-items:center;background:transparent;color:#171717;display:flex;font-size:14px;font-weight:500;gap:14px;letter-spacing:-.15px;line-height:18px;padding:14px 18px;transition:background .12s;width:100%}.sheet-action:active{background:#f5f5f5}.sheet-action--danger{color:#dc2626}
+</style>

package/dist/runtime/embed/components/mobile/chat-mobile-header.d.vue.ts

@@ -0,0 +1,40 @@
+import type { TopbarTab } from '../../../types/schemas/chat/ui.js';
+type __VLS_Props = {
+    title: string;
+    creatorName?: string;
+    creatorEmail?: string;
+    creatorImage?: string;
+    updatedAt: string | Date;
+    generatingTitle?: boolean;
+    filesCount?: number;
+    activeTab?: TopbarTab;
+    showOutdatedBadge?: boolean;
+    showUsageTab?: boolean;
+    showDebugOption?: boolean;
+    showDrawerButton?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    delete: () => any;
+    rename: () => any;
+    duplicate: () => any;
+    export: () => any;
+    copyLink: () => any;
+    openDrawer: () => any;
+    openOutdatedSettings: () => any;
+    debug: () => any;
+    tabChange: (tab: TopbarTab) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    onRename?: (() => any) | undefined;
+    onDuplicate?: (() => any) | undefined;
+    onExport?: (() => any) | undefined;
+    onCopyLink?: (() => any) | undefined;
+    onOpenDrawer?: (() => any) | undefined;
+    onOpenOutdatedSettings?: (() => any) | undefined;
+    onDebug?: (() => any) | undefined;
+    onTabChange?: ((tab: TopbarTab) => any) | undefined;
+}>, {
+    showDrawerButton: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/embed/components/mobile/chat-mobile-header.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { formatRelativeTime } from "../../../shared/date-formatting";
+import { capitalizeFirst } from "../../../shared/string";
+const props = defineProps({
+  title: { type: String, required: true },
+  creatorName: { type: String, required: false },
+  creatorEmail: { type: String, required: false },
+  creatorImage: { type: String, required: false },
+  updatedAt: { type: [String, Date], required: true },
+  generatingTitle: { type: Boolean, required: false },
+  filesCount: { type: Number, required: false },
+  activeTab: { type: null, required: false },
+  showOutdatedBadge: { type: Boolean, required: false },
+  showUsageTab: { type: Boolean, required: false },
+  showDebugOption: { type: Boolean, required: false },
+  showDrawerButton: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["openDrawer", "openOutdatedSettings", "rename", "duplicate", "export", "copyLink", "debug", "delete", "tabChange"]);
+const currentTab = computed(() => props.activeTab ?? "chat");
+const tabItems = computed(() => {
+  const items = [
+    { id: "chat", icon: "i-ph-chat-circle", label: "Chat" },
+    { id: "files", icon: "i-ph-folder", label: "Arquivos" }
+  ];
+  if (props.showUsageTab) {
+    items.push({ id: "usage", icon: "i-ph-chart-bar", label: "Uso" });
+  }
+  return items;
+});
+const headerMenuItems = computed(() => {
+  const items = [
+    { label: "Renomear", icon: "i-ph-pencil-simple", click: () => emit("rename") },
+    { label: "Duplicar", icon: "i-ph-copy", click: () => emit("duplicate") },
+    { label: "Exportar", icon: "i-ph-download-simple", click: () => emit("export") },
+    { label: "Copiar link", icon: "i-ph-link", click: () => emit("copyLink") }
+  ];
+  if (props.showDebugOption) {
+    items.push({ label: "Debug", icon: "i-ph-bug", click: () => emit("debug") });
+  }
+  items.push({ label: "Excluir", icon: "i-ph-trash", color: "negative", click: () => emit("delete") });
+  return items;
+});
+</script>
+
+<template>
+    <div
+        flex items-center gap-8px
+        px-10px pt-10px pb-8px
+        b-b=".5px solid rgba(0,0,0,0.08)"
+        bg-white
+        absolute top-0 right-0 left-0 z-10
+    >
+        <button
+            v-if="showDrawerButton"
+            flex items-center justify-center
+            w-32px h-32px rounded-8px
+            class="hover:bg-neutral-100 active:scale-94"
+            transition-all
+            aria-label="Abrir menu"
+            @click="emit('openDrawer')"
+        >
+            <span i-ph-list text-20px text-neutral-700 />
+        </button>
+
+        <div flex="~ col 1" gap-2px min-w-0>
+            <p
+                text-14px font-580 text-neutral-900 leading-18px tracking="-.15px"
+                truncate
+            >
+                {{ capitalizeFirst(title) }}<span v-if="generatingTitle" class="typing-cursor">|</span>
+            </p>
+            <div flex items-center gap-4px text-11px text-secondary leading-14px truncate>
+                <div w-12px h-12px rounded-full overflow-hidden flex-shrink-0>
+                    <img
+                        v-if="creatorImage"
+                        :src="creatorImage"
+                        :alt="creatorName ?? 'Usu\xE1rio'"
+                        w-full h-full object-cover
+                    >
+                    <div v-else w-full h-full bg-purple-500 flex items-center justify-center>
+                        <span text-7px text-white font-semibold>
+                            {{ (creatorName ?? creatorEmail ?? "U").charAt(0).toUpperCase() }}
+                        </span>
+                    </div>
+                </div>
+                <span truncate>
+                    {{ creatorName ?? creatorEmail ?? "Usu\xE1rio" }} · {{ formatRelativeTime(updatedAt) }}
+                </span>
+            </div>
+        </div>
+
+        <div
+            inline-flex items-center shrink-0
+            p-2px rounded-8px bg-neutral-100
+        >
+            <button
+                v-for="tab in tabItems"
+                :key="tab.id"
+                class="segmented-tab"
+                :class="{ 'segmented-tab--active': currentTab === tab.id }"
+                :aria-label="tab.label"
+                :title="tab.label"
+                @click="emit('tabChange', tab.id)"
+            >
+                <span :class="tab.icon" />
+            </button>
+        </div>
+
+        <button
+            v-if="showOutdatedBadge"
+            flex items-center justify-center shrink-0
+            w-28px h-28px rounded-8px
+            bg="#FFF1D8"
+            class="hover:bg-[#FFE9BE] active:scale-94"
+            transition-transform
+            aria-label="Configurações do workspace atualizadas"
+            title="Configurações do workspace atualizadas"
+            @click="emit('openOutdatedSettings')"
+        >
+            <span i-ph-warning text-14px text-neutral-800 />
+        </button>
+
+        <TelaDropdownMenu :items="headerMenuItems" align="end">
+            <button
+                flex items-center justify-center
+                w-32px h-32px rounded-8px
+                class="hover:bg-neutral-100"
+                transition-colors
+                aria-label="Mais opções"
+            >
+                <span i-ph-dots-three text-18px text-neutral-700 />
+            </button>
+        </TelaDropdownMenu>
+    </div>
+</template>
+
+<style scoped>
+.segmented-tab{align-items:center;background:transparent;border:.5px solid transparent;border-radius:6px;box-sizing:border-box;color:#a3a3a3;display:inline-flex;font-size:16px;height:24px;justify-content:center;line-height:0;padding:0;transition:background .15s,border-color .15s,box-shadow .15s,color .15s;width:28px}.segmented-tab--active{background:#fff;border-color:rgba(0,0,0,.06);box-shadow:0 1px 2px rgba(64,64,64,.04);color:#171717}.typing-cursor{animation:blink .7s infinite;color:#6b7280;font-weight:400}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}
+</style>

package/dist/runtime/embed/components/mobile/chat-mobile-header.vue.d.ts

@@ -0,0 +1,40 @@
+import type { TopbarTab } from '../../../types/schemas/chat/ui.js';
+type __VLS_Props = {
+    title: string;
+    creatorName?: string;
+    creatorEmail?: string;
+    creatorImage?: string;
+    updatedAt: string | Date;
+    generatingTitle?: boolean;
+    filesCount?: number;
+    activeTab?: TopbarTab;
+    showOutdatedBadge?: boolean;
+    showUsageTab?: boolean;
+    showDebugOption?: boolean;
+    showDrawerButton?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    delete: () => any;
+    rename: () => any;
+    duplicate: () => any;
+    export: () => any;
+    copyLink: () => any;
+    openDrawer: () => any;
+    openOutdatedSettings: () => any;
+    debug: () => any;
+    tabChange: (tab: TopbarTab) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    onRename?: (() => any) | undefined;
+    onDuplicate?: (() => any) | undefined;
+    onExport?: (() => any) | undefined;
+    onCopyLink?: (() => any) | undefined;
+    onOpenDrawer?: (() => any) | undefined;
+    onOpenOutdatedSettings?: (() => any) | undefined;
+    onDebug?: (() => any) | undefined;
+    onTabChange?: ((tab: TopbarTab) => any) | undefined;
+}>, {
+    showDrawerButton: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/embed/components/mobile/chat-mobile-home-recents.d.vue.ts

@@ -0,0 +1,14 @@
+import type { DeepReadonly } from 'vue';
+import type { Conversation } from '../../../types/schemas/chat/conversations.js';
+type __VLS_Props = {
+    conversations: DeepReadonly<Conversation[]>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (id: string) => any;
+    seeAll: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((id: string) => any) | undefined;
+    onSeeAll?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/embed/components/mobile/chat-mobile-home-recents.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { formatRelativeTime } from "../../../shared/date-formatting";
+const props = defineProps({
+  conversations: { type: null, required: true }
+});
+const emit = defineEmits(["select", "seeAll"]);
+const recents = computed(() => props.conversations.slice(0, 2));
+</script>
+
+<template>
+    <div v-if="recents.length > 0" flex="~ col">
+        <div class="header-row">
+            <span class="eyebrow">Conversas recentes</span>
+            <span flex-1 />
+            <button
+                type="button"
+                class="see-all"
+                @click="emit('seeAll')"
+            >
+                Ver todas
+            </button>
+        </div>
+
+        <div flex="~ col" gap-2px px-8px>
+            <button
+                v-for="c in recents"
+                :key="c.id"
+                type="button"
+                class="row"
+                @click="emit('select', c.id)"
+            >
+                <div class="row__icon">
+                    <span i-ph-chat-circle text-16px />
+                </div>
+                <div flex="~ col 1" gap-2px min-w-0 text-left>
+                    <span class="row__title">{{ c.title || "Nova conversa" }}</span>
+                </div>
+                <span class="row__time">
+                    {{ formatRelativeTime(c.updatedAt) }}
+                </span>
+            </button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.header-row{align-items:center;display:flex;padding:0 18px 4px}.eyebrow{color:#a3a3a3;font-size:11px;font-weight:580;letter-spacing:.6px;text-transform:uppercase}.see-all{color:#5167f4;font-size:12px;font-weight:500;padding:4px 6px;white-space:nowrap}.row,.see-all{background:transparent}.row{align-items:center;border-radius:10px;display:flex;gap:12px;padding:10px 12px;transition:background .12s;width:100%}.row:active,.row__icon{background:#f5f5f5}.row__icon{align-items:center;border-radius:8px;color:#737373;display:inline-flex;flex-shrink:0;height:32px;justify-content:center;width:32px}.row__title{color:#171717;font-size:13.5px;font-weight:500;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row__time{color:#a3a3a3;flex-shrink:0;font-size:11px}
+</style>