@meistrari/chat-nuxt 1.7.0 → 1.8.0

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

@@ -0,0 +1,384 @@
+<script setup>
+import ChatMobileBottomSheet from "../primitives/bottom-sheet.vue";
+import ChatMobileFilePreview from "./file-preview.vue";
+import { formatFileSize, formatUploadDate, getFileTypeLabel } from "../../../../utils/file";
+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/components/chat/mobile/files/files-view.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    conversationId: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    viewInChat: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onViewInChat?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    showDrawerButton?: boolean;
+    showWorkspaceButton?: boolean;
+    workspaceInitial?: string;
+    workspaceLogo?: string;
+    workspaceName?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    openDrawer: () => any;
+    openWorkspace: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenDrawer?: (() => any) | undefined;
+    onOpenWorkspace?: (() => any) | undefined;
+}>, {
+    showDrawerButton: boolean;
+    showWorkspaceButton: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/mobile/home/header.vue

@@ -0,0 +1,55 @@
+<script setup>
+defineProps({
+  showDrawerButton: { type: Boolean, required: false, default: true },
+  showWorkspaceButton: { type: Boolean, required: false, default: true },
+  workspaceInitial: { type: String, required: false },
+  workspaceLogo: { type: String, required: false },
+  workspaceName: { type: String, required: false }
+});
+const emit = defineEmits(["openDrawer", "openWorkspace"]);
+</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>
+
+        <span flex-1 />
+
+        <button
+            v-if="showWorkspaceButton"
+            class="workspace-btn"
+            :aria-label="`Workspace ${workspaceName ?? ''}`"
+            @click="emit('openWorkspace')"
+        >
+            <img
+                v-if="workspaceLogo"
+                :src="workspaceLogo"
+                :alt="workspaceName ?? 'Workspace'"
+                class="workspace-btn__img"
+            >
+            <span v-else>
+                {{ (workspaceInitial ?? "M").charAt(0).toUpperCase() }}
+            </span>
+        </button>
+    </div>
+</template>
+
+<style scoped>
+.workspace-btn{align-items:center;background:#5167f4;border-radius:8px;color:#fff;display:inline-flex;font-family:inherit;font-size:14px;font-weight:580;height:32px;justify-content:center;overflow:hidden;transition:transform .12s;width:32px}.workspace-btn:active{transform:scale(.94)}.workspace-btn__img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}
+</style>

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    showDrawerButton?: boolean;
+    showWorkspaceButton?: boolean;
+    workspaceInitial?: string;
+    workspaceLogo?: string;
+    workspaceName?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    openDrawer: () => any;
+    openWorkspace: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenDrawer?: (() => any) | undefined;
+    onOpenWorkspace?: (() => any) | undefined;
+}>, {
+    showDrawerButton: boolean;
+    showWorkspaceButton: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,14 @@
+import type { DeepReadonly } from 'vue';
+import type { Conversation } from '../../../../types/chat.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/components/chat/mobile/home/recents.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { formatRelativeTime } from "../../../../utils/format-time";
+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>

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

@@ -0,0 +1,14 @@
+import type { DeepReadonly } from 'vue';
+import type { Conversation } from '../../../../types/chat.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/components/chat/mobile/home/suggestions.d.vue.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    pick: (label: string) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onPick?: ((label: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/mobile/home/suggestions.vue

@@ -0,0 +1,31 @@
+<script setup>
+const emit = defineEmits(["pick"]);
+const suggestions = [
+  { id: "s1", icon: "i-ph-file-text", label: "Resumir um documento longo" },
+  { id: "s2", icon: "i-ph-envelope", label: "Escrever um e-mail formal" },
+  { id: "s3", icon: "i-ph-lightbulb", label: "Brainstorm de campanha de marketing" }
+];
+</script>
+
+<template>
+    <div flex="~ col">
+        <span class="eyebrow">Sugestões</span>
+
+        <div class="chip-row">
+            <button
+                v-for="s in suggestions"
+                :key="s.id"
+                type="button"
+                class="chip"
+                @click="emit('pick', s.label)"
+            >
+                <span :class="s.icon" class="chip__icon" />
+                <span>{{ s.label }}</span>
+            </button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.eyebrow{color:#a3a3a3;font-size:11px;font-weight:580;letter-spacing:.6px;padding:0 18px 6px;text-transform:uppercase}.chip-row{display:flex;gap:8px;overflow-x:auto;padding:4px 14px 8px;scrollbar-width:none}.chip-row::-webkit-scrollbar{display:none}.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:460;gap:8px;line-height:16px;padding:9px 13px;transition:background .12s;white-space:nowrap}.chip:active{background:#f5f5f5}.chip__icon{color:#737373;font-size:16px}
+</style>

package/dist/runtime/components/chat/mobile/home/suggestions.vue.d.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    pick: (label: string) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onPick?: ((label: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/mobile/primitives/bottom-sheet.d.vue.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    open: boolean;
+    title?: string;
+};
+declare var __VLS_13: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};