@meistrari/chat-nuxt 1.7.0 → 1.8.0

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

@@ -0,0 +1,48 @@
+<script setup>
+import { onKeyStroke } from "@vueuse/core";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  title: { type: String, required: false }
+});
+const emit = defineEmits(["close"]);
+onKeyStroke("Escape", () => {
+  if (props.open) {
+    emit("close");
+  }
+});
+</script>
+
+<template>
+    <Transition name="sheet-scrim">
+        <div
+            v-if="open"
+            class="sheet-scrim"
+            @click="emit('close')"
+        />
+    </Transition>
+
+    <Transition name="sheet">
+        <div
+            v-if="open"
+            class="sheet"
+            role="dialog"
+            aria-modal="true"
+        >
+            <div class="sheet__grabber-area">
+                <div class="sheet__grabber" />
+            </div>
+
+            <div v-if="title" class="sheet__title-row">
+                <span class="sheet__title">{{ title }}</span>
+            </div>
+
+            <div class="sheet__body">
+                <slot />
+            </div>
+        </div>
+    </Transition>
+</template>
+
+<style scoped>
+.sheet-scrim{background:rgba(0,0,0,.32);inset:0;position:absolute;z-index:40}.sheet-scrim-enter-active,.sheet-scrim-leave-active{transition:opacity .2s linear}.sheet-scrim-enter-from,.sheet-scrim-leave-to{opacity:0}.sheet{background:#fff;border-radius:18px 18px 0 0;bottom:0;box-shadow:0 3px 12px rgba(103,127,148,.08),0 12px 52px rgba(103,127,148,.16);display:flex;flex-direction:column;left:0;max-height:70%;position:absolute;right:0;z-index:41}.sheet-enter-active,.sheet-leave-active{transition:transform .26s cubic-bezier(.2,.8,.2,1)}.sheet-enter-from,.sheet-leave-to{transform:translateY(100%)}.sheet__grabber-area{display:flex;justify-content:center;padding:8px 0 4px}.sheet__grabber{background:#e8e8e8;border-radius:999px;height:4px;width:36px}.sheet__title-row{border-bottom:.5px solid #f5f5f5;padding:4px 16px 10px}.sheet__title{color:#171717;font-size:16px;font-weight:500;letter-spacing:-.2px;line-height:20px}.sheet__body{flex:1;overflow-y:auto;padding:4px 0 8px}
+</style>

package/dist/runtime/components/chat/mobile/primitives/bottom-sheet.vue.d.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;
+    };
+};

package/dist/runtime/components/chat/mobile/primitives/info-bubble.d.vue.ts

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

package/dist/runtime/components/chat/mobile/primitives/info-bubble.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { onClickOutside, onKeyStroke } from "@vueuse/core";
+defineProps({
+  text: { type: String, required: true }
+});
+const open = ref(false);
+const wrapper = ref(null);
+onClickOutside(wrapper, () => {
+  if (open.value) {
+    open.value = false;
+  }
+});
+onKeyStroke("Escape", () => {
+  if (open.value) {
+    open.value = false;
+  }
+});
+function toggle() {
+  open.value = !open.value;
+}
+</script>
+
+<template>
+    <span ref="wrapper" class="info-wrapper">
+        <button
+            type="button"
+            class="info-trigger"
+            aria-label="Mais informações"
+            :aria-expanded="open"
+            @click.stop="toggle"
+        >
+            i
+        </button>
+
+        <Transition name="info">
+            <div
+                v-if="open"
+                role="tooltip"
+                class="info-tooltip"
+                @click.stop
+            >
+                {{ text }}
+            </div>
+        </Transition>
+    </span>
+</template>
+
+<style scoped>
+.info-wrapper{margin-left:4px;position:relative}.info-trigger,.info-wrapper{align-items:center;display:inline-flex}.info-trigger{background:transparent;border:1px solid #a3a3a3;border-radius:14px;color:#a3a3a3;cursor:pointer;font-family:inherit;font-size:9px;font-style:normal;font-weight:600;height:14px;justify-content:center;line-height:1;width:14px}.info-trigger[aria-expanded=true]{border-color:#171717;color:#171717}.info-tooltip{background:#171717;border-radius:8px;box-shadow:0 3px 12px rgba(103,127,148,.08);color:#fff;font-size:12px;font-weight:400;left:50%;line-height:1.4;padding:8px 10px;position:absolute;text-align:left;top:20px;transform:translateX(-50%);width:200px;z-index:5}.info-enter-active,.info-leave-active{transition:opacity .12s,transform .12s}.info-enter-from,.info-leave-to{opacity:0;transform:translateX(-50%) translateY(-2px)}
+</style>

package/dist/runtime/components/chat/mobile/primitives/info-bubble.vue.d.ts

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

package/dist/runtime/components/chat/mobile/shell/drawer.d.vue.ts

@@ -0,0 +1,22 @@
+import type { DeepReadonly } from 'vue';
+import type { Conversation } from '../../../../types/chat.js';
+type __VLS_Props = {
+    open: boolean;
+    conversations: DeepReadonly<Conversation[]>;
+    activeId: string | null;
+    loading?: boolean;
+    userName?: string;
+    userEmail?: string;
+    userImage?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (id: string) => any;
+    close: () => any;
+    newConvo: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((id: string) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onNewConvo?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/mobile/shell/drawer.vue

@@ -0,0 +1,143 @@
+<script setup>
+import { formatRelativeTime } from "../../../../utils/format-time";
+import { conversationListSkeletonRows } from "../../../../utils/conversation-list-skeleton";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  conversations: { type: null, required: true },
+  activeId: { type: [String, null], required: true },
+  loading: { type: Boolean, required: false },
+  userName: { type: String, required: false },
+  userEmail: { type: String, required: false },
+  userImage: { type: String, required: false }
+});
+const emit = defineEmits(["close", "select", "newConvo"]);
+const initial = computed(() => {
+  const source = props.userName ?? props.userEmail ?? "U";
+  return source.charAt(0).toUpperCase();
+});
+function handleSelect(id) {
+  emit("select", id);
+  emit("close");
+}
+function handleNew() {
+  emit("newConvo");
+  emit("close");
+}
+</script>
+
+<template>
+    <Transition name="scrim">
+        <div
+            v-if="open"
+            absolute inset-0 z-30
+            bg="black/32"
+            @click="emit('close')"
+        />
+    </Transition>
+
+    <div
+        absolute top-0 bottom-0 left-0 z-31
+        flex="~ col"
+        bg-white
+        class="mobile-drawer"
+        :class="open ? 'mobile-drawer--open' : ''"
+    >
+        <div
+            flex items-center gap-8px
+            pt-14px pr-14px pb-14px pl-14px
+            b-b=".5px solid"
+            style="border-bottom-color: #F5F5F5"
+        >
+            <div w-28px h-28px rounded-full overflow-hidden flex-shrink-0>
+                <img
+                    v-if="userImage"
+                    :src="userImage"
+                    :alt="userName ?? '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-12px text-white font-semibold>{{ initial }}</span>
+                </div>
+            </div>
+            <span flex-1 text-14px font-580 text-neutral-900 truncate tracking="-.15px">
+                {{ userName ?? userEmail ?? "Usu\xE1rio" }}
+            </span>
+            <button
+                flex items-center justify-center
+                w-32px h-32px rounded-8px
+                class="hover:bg-neutral-100 active:scale-94"
+                transition-all
+                aria-label="Fechar menu"
+                @click="emit('close')"
+            >
+                <span i-ph-x text-18px text-neutral-700 />
+            </button>
+        </div>
+
+        <div p-12px>
+            <button
+                flex items-center justify-center gap-6px
+                w-full px-12px py-10px rounded-10px
+                bg-white b=".5px neutral-300" shadow-sm
+                class="hover:bg-neutral-50"
+                transition-colors cursor-pointer
+                @click="handleNew"
+            >
+                <span i-ph-chat-circle text-16px text-neutral-900 />
+                <span text-14px font-580 text-neutral-900 leading-18px tracking="-.15px">
+                    Nova conversa
+                </span>
+            </button>
+        </div>
+
+        <div px-14px pt-4px pb-4px>
+            <span
+                text-12px font-medium uppercase text-neutral-400
+                style="letter-spacing: 0.5px"
+            >
+                Recentes
+            </span>
+        </div>
+
+        <div flex-1 overflow-y-auto px-8px pb-8px>
+            <div v-if="loading && conversations.length === 0" flex="~ col" gap-1px py-4px>
+                <div
+                    v-for="row in conversationListSkeletonRows"
+                    :key="row.id"
+                    flex items-center h-44px px-12px rounded-10px
+                >
+                    <TelaSkeleton rounded-6px bg-neutral-200 :style="{ width: row.width, height: '13px' }" />
+                </div>
+            </div>
+            <div v-else-if="conversations.length === 0" p-16px text-center>
+                <p text-14px text-neutral-400>
+                    Nenhuma conversa ainda
+                </p>
+            </div>
+            <div v-else flex="~ col" gap-1px>
+                <button
+                    v-for="conv in conversations"
+                    :key="conv.id"
+                    flex="~ col" gap-2px
+                    w-full px-12px py-10px rounded-10px text-left
+                    transition-colors cursor-pointer
+                    :class="conv.id === activeId ? 'bg-neutral-100' : 'hover:bg-neutral-50'"
+                    @click="handleSelect(conv.id)"
+                >
+                    <div flex items-center gap-8px w-full>
+                        <span flex-1 text-14px font-medium text-neutral-900 leading-18px truncate>
+                            {{ conv.title || "Nova conversa" }}
+                        </span>
+                        <span text-12px text-neutral-400 leading-16px shrink-0>
+                            {{ formatRelativeTime(conv.updatedAt) }}
+                        </span>
+                    </div>
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.mobile-drawer{box-shadow:0 3px 12px rgba(103,127,148,.08),0 12px 52px rgba(103,127,148,.16);transform:translateX(-100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);width:82%}.mobile-drawer--open{transform:translateX(0)}.scrim-enter-active,.scrim-leave-active{transition:opacity .2s linear}.scrim-enter-from,.scrim-leave-to{opacity:0}
+</style>

package/dist/runtime/components/chat/mobile/shell/drawer.vue.d.ts

@@ -0,0 +1,22 @@
+import type { DeepReadonly } from 'vue';
+import type { Conversation } from '../../../../types/chat.js';
+type __VLS_Props = {
+    open: boolean;
+    conversations: DeepReadonly<Conversation[]>;
+    activeId: string | null;
+    loading?: boolean;
+    userName?: string;
+    userEmail?: string;
+    userImage?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (id: string) => any;
+    close: () => any;
+    newConvo: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((id: string) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onNewConvo?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,40 @@
+import type { TopbarTab } from '../../../../types/chat.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;
+    debug: () => any;
+    tabChange: (tab: TopbarTab) => any;
+    openDrawer: () => any;
+    openOutdatedSettings: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    onRename?: (() => any) | undefined;
+    onDuplicate?: (() => any) | undefined;
+    onExport?: (() => any) | undefined;
+    onCopyLink?: (() => any) | undefined;
+    onDebug?: (() => any) | undefined;
+    onTabChange?: ((tab: TopbarTab) => any) | undefined;
+    onOpenDrawer?: (() => any) | undefined;
+    onOpenOutdatedSettings?: (() => any) | undefined;
+}>, {
+    showDrawerButton: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,139 @@
+<script setup>
+import { formatRelativeTime } from "../../../../utils/format-time";
+import { capitalizeFirst } from "../../../../utils/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: String, 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/components/chat/mobile/shell/header.vue.d.ts

@@ -0,0 +1,40 @@
+import type { TopbarTab } from '../../../../types/chat.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;
+    debug: () => any;
+    tabChange: (tab: TopbarTab) => any;
+    openDrawer: () => any;
+    openOutdatedSettings: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    onRename?: (() => any) | undefined;
+    onDuplicate?: (() => any) | undefined;
+    onExport?: (() => any) | undefined;
+    onCopyLink?: (() => any) | undefined;
+    onDebug?: (() => any) | undefined;
+    onTabChange?: ((tab: TopbarTab) => any) | undefined;
+    onOpenDrawer?: (() => any) | undefined;
+    onOpenOutdatedSettings?: (() => any) | undefined;
+}>, {
+    showDrawerButton: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/mobile/shell/outdated-settings-sheet.d.vue.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    open: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    dismiss: () => any;
+    newConversation: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onDismiss?: (() => any) | undefined;
+    onNewConversation?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/mobile/shell/outdated-settings-sheet.vue

@@ -0,0 +1,47 @@
+<script setup>
+import ChatMobileBottomSheet from "../primitives/bottom-sheet.vue";
+defineProps({
+  open: { type: Boolean, required: true }
+});
+const emit = defineEmits(["close", "dismiss", "newConversation"]);
+</script>
+
+<template>
+    <ChatMobileBottomSheet
+        :open="open"
+        @close="emit('close')"
+    >
+        <div class="outdated-sheet">
+            <div class="outdated-sheet__icon">
+                <span i-ph-warning text-20px />
+            </div>
+
+            <div class="outdated-sheet__copy">
+                <h2>Configurações do workspace mudaram</h2>
+                <p>Esta conversa usa configurações antigas. Inicie uma nova conversa para aplicar as atualizações.</p>
+            </div>
+
+            <div class="outdated-sheet__actions">
+                <button
+                    type="button"
+                    class="outdated-sheet__button outdated-sheet__button--primary"
+                    @click="emit('newConversation')"
+                >
+                    <span i-ph-plus text-16px />
+                    <span>Iniciar nova conversa</span>
+                </button>
+                <button
+                    type="button"
+                    class="outdated-sheet__button outdated-sheet__button--ghost"
+                    @click="emit('dismiss')"
+                >
+                    Agora não
+                </button>
+            </div>
+        </div>
+    </ChatMobileBottomSheet>
+</template>
+
+<style scoped>
+.outdated-sheet{display:flex;flex-direction:column;gap:16px;padding:16px 18px 18px}.outdated-sheet__icon{align-items:center;background:#fff1d8;border-radius:14px;color:#171717;display:flex;height:40px;justify-content:center;width:40px}.outdated-sheet__copy{display:flex;flex-direction:column;gap:6px}.outdated-sheet__copy h2{color:#171717;font-size:18px;font-weight:580;letter-spacing:-.2px;line-height:22px;margin:0}.outdated-sheet__copy p{color:#737373;font-size:14px;line-height:19px;margin:0}.outdated-sheet__actions{display:flex;flex-direction:column;gap:8px}.outdated-sheet__button{align-items:center;border-radius:12px;display:flex;font-size:15px;font-weight:580;gap:8px;justify-content:center;line-height:20px;min-height:44px;padding:12px 14px;transition:background .15s,opacity .15s;width:100%}.outdated-sheet__button--primary{background:#171717;color:#fff}.outdated-sheet__button--primary:active{opacity:.88}.outdated-sheet__button--ghost{background:transparent;color:#404040}.outdated-sheet__button--ghost:active{background:#f5f5f5}
+</style>

package/dist/runtime/components/chat/mobile/shell/outdated-settings-sheet.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    open: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    dismiss: () => any;
+    newConversation: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onDismiss?: (() => any) | undefined;
+    onNewConversation?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;