@meistrari/chat-nuxt 1.13.0 → 2.0.0

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

@@ -0,0 +1,244 @@
+<script setup>
+import { useConversationUsage } from "../../../usage/composables/conversation-usage";
+import { formatTokenCount } from "../../../usage/formatting";
+import { formatDateWithTime } from "../../../shared/date-formatting";
+import ChatMobileInfoBubble from "./chat-mobile-info-bubble.vue";
+const props = defineProps({
+  conversationId: { type: String, required: true },
+  createdAt: { type: [String, Date], required: false },
+  updatedAt: { type: [String, Date], required: false }
+});
+const conversationIdRef = computed(() => props.conversationId);
+const {
+  usageData,
+  loading,
+  error,
+  cacheInsight,
+  costBreakdown,
+  modelRows,
+  costBarSegments,
+  formatBillingCost,
+  fetchUsage
+} = useConversationUsage(conversationIdRef);
+const COLOR_INPUT = "#6469E8";
+const COLOR_OUTPUT = "#F5B86C";
+const COLOR_REUSED = "#A57BE0";
+const COLOR_NEW = "#7BD9A6";
+const segmentColor = {
+  input: COLOR_INPUT,
+  output: COLOR_OUTPUT
+};
+const breakdownTooltip = {
+  input: "Custo dos tokens enviados (prompt + contexto).",
+  output: "Custo dos tokens gerados pelo modelo."
+};
+onMounted(fetchUsage);
+watch(() => props.conversationId, fetchUsage);
+</script>
+
+<template>
+    <div class="usage-screen" pt-54px h-full overflow-y-auto>
+        <div v-if="loading" flex="~ col" items-center justify-center gap-16px py-64px>
+            <span i-ph-spinner animate-spin text-32px text-neutral-400 />
+            <p text-14px text-neutral-500>
+                Carregando dados de uso...
+            </p>
+        </div>
+
+        <div v-else-if="error" flex="~ col" items-center justify-center gap-16px py-64px px-24px>
+            <span i-ph-warning text-32px text-amber-500 />
+            <p text-14px text-neutral-500 text-center>
+                {{ error }}
+            </p>
+            <button
+                px-16px py-8px rounded-8px
+                bg-neutral-100 text-neutral-900 text-14px
+                @click="fetchUsage"
+            >
+                Tentar novamente
+            </button>
+        </div>
+
+        <div
+            v-else-if="!usageData"
+            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-chart-bar text-22px />
+            </div>
+            <div flex="~ col" gap-4px>
+                <p text-16px font-500 text-neutral-900 leading-20px tracking="-.2px">
+                    Sem dados de uso
+                </p>
+                <p text-14px text-neutral-500 leading-18px max-w-240px>
+                    Métricas de tokens e custo desta conversa aparecerão aqui.
+                </p>
+            </div>
+        </div>
+
+        <div v-else flex="~ col" gap-12px px-14px pt-12px pb-24px>
+            <!-- Hero card -->
+            <div class="card card--hero">
+                <div flex="~ col" gap-4px>
+                    <span class="eyebrow">
+                        Custo total
+                        <ChatMobileInfoBubble text="Soma de todos os custos de processamento desta conversa." />
+                    </span>
+                    <span class="hero-number">
+                        {{ formatBillingCost(usageData.cost.total) }}
+                    </span>
+                </div>
+
+                <div class="hero-divider" />
+
+                <div flex="~ col">
+                    <div class="stat-row stat-row--bordered">
+                        <span class="stat-label">
+                            Tokens utilizados
+                            <ChatMobileInfoBubble text="Total de tokens consumidos por todos os modelos." />
+                        </span>
+                        <span class="stat-value">
+                            {{ formatTokenCount(usageData.tokens.total) }}
+                        </span>
+                    </div>
+                    <div class="stat-row stat-row--bordered">
+                        <span class="stat-label">Data de criação</span>
+                        <span class="stat-value">{{ formatDateWithTime(createdAt) }}</span>
+                    </div>
+                    <div class="stat-row">
+                        <span class="stat-label">Último uso</span>
+                        <span class="stat-value">{{ formatDateWithTime(updatedAt) }}</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Cost breakdown card -->
+            <div class="card">
+                <span class="card-title">Detalhamento de custos</span>
+
+                <div flex="~ col" mt-12px>
+                    <div
+                        v-for="(item, idx) in costBreakdown"
+                        :key="item.key"
+                        class="breakdown-row"
+                        :class="{ 'breakdown-row--bordered': idx < costBreakdown.length - 1 }"
+                    >
+                        <span class="dot" :style="{ background: segmentColor[item.key] }" />
+                        <span class="stat-label">
+                            {{ item.label }}
+                            <ChatMobileInfoBubble :text="breakdownTooltip[item.key]" />
+                        </span>
+                        <span flex-1 />
+                        <span class="breakdown-tokens">
+                            {{ formatTokenCount(item.tokens) }} tokens
+                        </span>
+                        <span class="breakdown-cost">{{ formatBillingCost(item.cost) }}</span>
+                        <span class="breakdown-pct">({{ item.percentage }}%)</span>
+                    </div>
+                </div>
+
+                <div v-if="costBarSegments.length > 0" mt-14px>
+                    <div class="bar bar--track" aria-hidden="true">
+                        <div
+                            v-for="seg in costBarSegments"
+                            :key="seg.key"
+                            class="bar__fill"
+                            :style="{ width: `${Math.max(seg.percentage, 1)}%`, background: segmentColor[seg.key] }"
+                        />
+                    </div>
+
+                    <div flex items-center gap-14px mt-10px>
+                        <div
+                            v-for="seg in costBarSegments"
+                            :key="seg.key"
+                            flex items-center gap-4px
+                        >
+                            <span class="dot dot--sm" :style="{ background: segmentColor[seg.key] }" />
+                            <span class="legend-label">{{ seg.label }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Context reuse card -->
+            <div v-if="cacheInsight.hasData" class="card">
+                <div flex items-baseline flex-wrap gap-8px>
+                    <span class="reuse-number">{{ cacheInsight.percentage }}%</span>
+                    <span class="reuse-tail">do contexto foi reutilizado</span>
+                </div>
+
+                <p class="reuse-caption">
+                    Contexto reutilizado reduz o custo de processamento.
+                </p>
+
+                <div mt-14px>
+                    <div class="bar bar--track" aria-hidden="true">
+                        <div
+                            class="bar__fill"
+                            :style="{ width: `${cacheInsight.percentage}%`, background: COLOR_REUSED }"
+                        />
+                        <div
+                            class="bar__fill"
+                            :style="{ width: `${100 - cacheInsight.percentage}%`, background: COLOR_NEW }"
+                        />
+                    </div>
+                </div>
+
+                <div flex items-center justify-between mt-10px gap-8px>
+                    <div flex items-center gap-4px>
+                        <span class="dot dot--sm" :style="{ background: COLOR_REUSED }" />
+                        <span class="reuse-token-bold">{{ formatTokenCount(cacheInsight.reusedTokens) }}</span>
+                        <span class="legend-label">reutilizado</span>
+                    </div>
+                    <div flex items-center gap-4px>
+                        <span class="dot dot--sm" :style="{ background: COLOR_NEW }" />
+                        <span class="reuse-token-bold">{{ formatTokenCount(cacheInsight.storedTokens) }}</span>
+                        <span class="legend-label">novo</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Models section -->
+            <div v-if="modelRows.length > 0" flex="~ col" gap-8px mt-4px>
+                <div class="models-header">
+                    <span class="card-title">Modelos</span>
+                    <ChatMobileInfoBubble text="Modelos auxiliares podem ser utilizados internamente para auxiliar o processamento." />
+                </div>
+
+                <div
+                    v-for="row in modelRows"
+                    :key="row.modelId + row.tokens"
+                    class="card card--model"
+                >
+                    <div flex items-center gap-10px>
+                        <div class="provider-badge">
+                            <IconsAnthropic w-14px h-14px text-current />
+                        </div>
+                        <span class="model-name">{{ row.modelName }}</span>
+                        <span class="model-cost">{{ row.cost }}</span>
+                    </div>
+
+                    <div flex items-center gap-8px mt-10px>
+                        <span class="model-tokens">{{ row.tokens }} tokens</span>
+                        <div class="bar bar--track bar--thin" flex-1 aria-hidden="true">
+                            <div
+                                class="bar__fill"
+                                :style="{ width: `${Math.max(row.costShare, 1)}%`, background: COLOR_INPUT }"
+                            />
+                        </div>
+                        <span class="model-pct">{{ Math.round(row.costShare) }}%</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.usage-screen{background:#fafafa;font-variant-numeric:tabular-nums}.card{background:#fff;border:.5px solid #e8e8e8;border-radius:12px;box-shadow:0 1px 4px rgba(103,127,148,.03);padding:16px}.card--hero{padding:18px 16px}.card--model{padding:14px}.eyebrow{align-items:center;color:#737373;display:inline-flex;font-size:12px;font-weight:500;gap:4px;letter-spacing:.1px;white-space:nowrap}.hero-number{color:#171717;font-size:40px;font-variant-numeric:tabular-nums;font-weight:580;letter-spacing:-.8px;line-height:1.05;margin-top:4px}.hero-divider{background:#f5f5f5;height:1px;margin:14px -16px 12px}.stat-row{align-items:center;display:flex;gap:8px;justify-content:space-between;padding:8px 0}.stat-row--bordered{border-bottom:.5px solid #f5f5f5}.stat-label{align-items:center;color:#737373;display:inline-flex;font-size:13px;font-weight:460}.stat-value{color:#171717;font-size:13px;font-variant-numeric:tabular-nums;font-weight:500;text-align:right}.card-title{color:#171717;font-size:14px;font-weight:580}.breakdown-row{align-items:center;display:flex;font-size:13px;gap:8px;padding:6px 0}.breakdown-row--bordered{border-bottom:.5px solid #f5f5f5}.dot{border-radius:999px;display:inline-block;flex-shrink:0;height:8px;width:8px}.dot--sm{height:7px;width:7px}.breakdown-tokens{color:#737373;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}.breakdown-cost{color:#171717;font-variant-numeric:tabular-nums;font-weight:500;min-width:52px;text-align:right}.breakdown-pct{color:#a3a3a3;font-size:11px;font-variant-numeric:tabular-nums;min-width:28px;text-align:right}.bar{display:flex;overflow:hidden}.bar--track{background:#f5f5f5;border-radius:999px;height:8px}.bar--thin{height:4px}.bar__fill{border-radius:999px;height:100%;transition:width .2s ease}.legend-label{color:#737373;font-size:11.5px}.reuse-number{color:#171717;font-size:32px;font-variant-numeric:tabular-nums;font-weight:580;letter-spacing:-.5px;line-height:1}.reuse-tail{color:#737373;font-size:14px;font-weight:460}.reuse-caption{color:#a3a3a3;font-size:12.5px;line-height:1.45;margin-top:6px}.reuse-token-bold{color:#171717;font-size:11.5px;font-variant-numeric:tabular-nums;font-weight:500}.models-header{align-items:center;display:flex;gap:6px;padding:0 4px}.provider-badge{align-items:center;background:#f5f5f5;border-radius:8px;color:#c2410c;display:inline-flex;flex-shrink:0;height:28px;justify-content:center;width:28px}.model-name{flex:1;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.model-cost,.model-name{color:#171717;font-weight:500}.model-cost{font-size:13px;font-variant-numeric:tabular-nums}.model-tokens{color:#737373;white-space:nowrap}.model-pct,.model-tokens{font-size:12px;font-variant-numeric:tabular-nums}.model-pct{color:#a3a3a3;min-width:30px;text-align:right}
+</style>

package/dist/runtime/embed/components/mobile/chat-mobile-workspace-sheet.vue

@@ -0,0 +1,51 @@
+<script setup>
+import ChatMobileBottomSheet from "./chat-mobile-bottom-sheet.vue";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  workspaceName: { type: String, required: false },
+  workspaceLogo: { type: String, required: false },
+  workspaceSubtitle: { type: String, required: false }
+});
+const emit = defineEmits(["close", "settings", "switchWorkspace", "signout"]);
+const initial = computed(() => (props.workspaceName ?? "M").charAt(0).toUpperCase());
+function pick(action) {
+  emit(action);
+  emit("close");
+}
+</script>
+
+<template>
+    <ChatMobileBottomSheet :open="open" @close="emit('close')">
+        <div class="identity-row">
+            <div class="ws-tile">
+                <img v-if="workspaceLogo" :src="workspaceLogo" :alt="workspaceName ?? ''" class="ws-tile__img">
+                <span v-else>{{ initial }}</span>
+            </div>
+            <div flex="~ col" gap-2px min-w-0 flex-1>
+                <span class="ws-name">{{ workspaceName ?? "Workspace" }}</span>
+                <span class="ws-subtitle">{{ workspaceSubtitle ?? "Workspace pessoal" }}</span>
+            </div>
+        </div>
+
+        <div class="menu">
+            <button class="menu__item" @click="pick('settings')">
+                <span i-ph-gear-six class="menu__icon" />
+                <span class="menu__label">Configurações</span>
+            </button>
+            <div class="menu__divider" />
+            <button class="menu__item" @click="pick('switchWorkspace')">
+                <span i-ph-arrows-left-right class="menu__icon" />
+                <span class="menu__label">Trocar Workspace</span>
+            </button>
+            <div class="menu__divider" />
+            <button class="menu__item" @click="pick('signout')">
+                <span i-ph-sign-out class="menu__icon" />
+                <span class="menu__label">Sair</span>
+            </button>
+        </div>
+    </ChatMobileBottomSheet>
+</template>
+
+<style scoped>
+.identity-row{align-items:center;border-bottom:.5px solid #f5f5f5;display:flex;gap:12px;padding:8px 18px 14px}.ws-tile{align-items:center;background:#171717;border-radius:8px;color:#fff;display:inline-flex;flex-shrink:0;font-size:16px;font-weight:580;height:40px;justify-content:center;overflow:hidden;width:40px}.ws-tile__img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.ws-name{color:#171717;font-size:14px;font-weight:580;letter-spacing:-.15px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ws-subtitle{color:#a3a3a3;font-size:12px;line-height:16px}.menu{padding-bottom:18px}.menu__item{align-items:center;background:transparent;color:#171717;display:flex;gap:14px;padding:14px 18px;transition:background .12s;width:100%}.menu__item:active{background:#f5f5f5}.menu__icon{color:#404040;font-size:20px}.menu__label{color:#171717;font-size:15px;font-weight:500;line-height:20px}.menu__divider{background:#f5f5f5;height:.5px;margin:0 18px}
+</style>

package/dist/runtime/embed/components/powered-by-tela.vue

@@ -0,0 +1,8 @@
+<template>
+    <div flex="~ col" gap-8px items-start>
+        <div body-9-medium text="#9DA2AA">
+            Desenvolvido por
+        </div>
+        <IconsTelaWordmark h-12px text="#030C16" />
+    </div>
+</template>

package/dist/runtime/embed/composables/embed-config.d.ts

@@ -0,0 +1,40 @@
+import type { Component, DeepReadonly, MaybeRefOrGetter, Ref } from 'vue';
+import type { ConversationCreatorFilter } from '../../types/schemas/chat/primitives.js';
+import type { WorkspaceSettingsResponse as WorkspaceSettings } from '../../types/schemas/chat/workspace-settings.js';
+import type { TelaAgentExecutionInput } from '../../types/schemas/integrations/tela-agent-api.js';
+import type { ChatLoadingMessageMode } from '../loading-messages.js';
+type ConfiguredTelaAgentInputs = DeepReadonly<TelaAgentExecutionInput[]> | null | undefined;
+export type EmbedConfig = {
+    workspaceId: Ref<string>;
+    telaAgentId: Ref<string | null>;
+    conversationScope: Ref<string | null>;
+    defaultConversationCreatorFilter: Ref<ConversationCreatorFilter>;
+    telaAgentInputs: Ref<ConfiguredTelaAgentInputs>;
+    workspaceSettings: Ref<DeepReadonly<WorkspaceSettings> | WorkspaceSettings | null | undefined>;
+    hideSidebar: Ref<boolean>;
+    hideSettings: Ref<boolean>;
+    loadingMessages: Ref<readonly string[] | null | undefined>;
+    loadingMessagesMode: Ref<ChatLoadingMessageMode | null | undefined>;
+    customComponents: Ref<Record<string, Component> | undefined>;
+    customHtmlTags: Ref<readonly string[] | undefined>;
+};
+type EmbedConfigInput = {
+    workspaceId: MaybeRefOrGetter<string>;
+    telaAgentId?: MaybeRefOrGetter<string | null | undefined>;
+    conversationScope?: MaybeRefOrGetter<string | null | undefined>;
+    defaultConversationCreatorFilter?: MaybeRefOrGetter<ConversationCreatorFilter | null | undefined>;
+    telaAgentInputs?: MaybeRefOrGetter<ConfiguredTelaAgentInputs>;
+    workspaceSettings?: MaybeRefOrGetter<DeepReadonly<WorkspaceSettings> | WorkspaceSettings | null | undefined>;
+    hideSidebar?: MaybeRefOrGetter<boolean | undefined>;
+    hideSettings?: MaybeRefOrGetter<boolean | undefined>;
+    loadingMessages?: MaybeRefOrGetter<readonly string[] | null | undefined>;
+    loadingMessagesMode?: MaybeRefOrGetter<ChatLoadingMessageMode | null | undefined>;
+    customComponents?: MaybeRefOrGetter<Record<string, Component> | undefined>;
+    customHtmlTags?: MaybeRefOrGetter<readonly string[] | undefined>;
+};
+type ProvideEmbedConfigOptions = {
+    syncGlobal?: boolean;
+};
+export declare function provideEmbedConfig(input: EmbedConfigInput, options?: ProvideEmbedConfigOptions): void;
+export declare function useEmbedConfig(): EmbedConfig | null;
+export {};

package/dist/runtime/embed/composables/embed-config.js

@@ -0,0 +1,81 @@
+import { normalizeConversationScope } from "../../conversations/scope.js";
+const EMBED_CONFIG_KEY = "embed-config";
+function useGlobalCustomComponentsState() {
+  const nuxtApp = useNuxtApp();
+  nuxtApp._chatEmbedConfigCustomComponents ??= shallowRef(void 0);
+  return nuxtApp._chatEmbedConfigCustomComponents;
+}
+function useGlobalEmbedConfigState() {
+  return {
+    provided: useState("chat-embed-config-provided", () => false),
+    workspaceId: useState("chat-embed-config-workspace-id", () => ""),
+    telaAgentId: useState("chat-embed-config-tela-agent-id", () => null),
+    conversationScope: useState("chat-embed-config-conversation-scope", () => null),
+    defaultConversationCreatorFilter: useState("chat-embed-config-default-conversation-creator-filter", () => void 0),
+    telaAgentInputs: useState("chat-embed-config-tela-agent-inputs", () => void 0),
+    workspaceSettings: useState("chat-embed-config-workspace-settings", () => void 0),
+    hideSidebar: useState("chat-embed-config-hide-sidebar", () => void 0),
+    hideSettings: useState("chat-embed-config-hide-settings", () => void 0),
+    loadingMessages: useState("chat-embed-config-loading-messages", () => void 0),
+    loadingMessagesMode: useState("chat-embed-config-loading-messages-mode", () => void 0),
+    customComponents: useGlobalCustomComponentsState(),
+    customHtmlTags: useState("chat-embed-config-custom-html-tags", () => void 0)
+  };
+}
+export function provideEmbedConfig(input, options = {}) {
+  const config = {
+    workspaceId: computed(() => toValue(input.workspaceId)),
+    telaAgentId: computed(() => toValue(input.telaAgentId) ?? null),
+    conversationScope: computed(() => normalizeConversationScope(toValue(input.conversationScope))),
+    defaultConversationCreatorFilter: computed(() => toValue(input.defaultConversationCreatorFilter) ?? "all"),
+    telaAgentInputs: computed(() => toValue(input.telaAgentInputs)),
+    workspaceSettings: computed(() => toValue(input.workspaceSettings)),
+    hideSidebar: computed(() => toValue(input.hideSidebar) ?? true),
+    hideSettings: computed(() => toValue(input.hideSettings) ?? false),
+    loadingMessages: computed(() => toValue(input.loadingMessages)),
+    loadingMessagesMode: computed(() => toValue(input.loadingMessagesMode)),
+    customComponents: computed(() => toValue(input.customComponents)),
+    customHtmlTags: computed(() => toValue(input.customHtmlTags))
+  };
+  const globalConfig = useGlobalEmbedConfigState();
+  if (options.syncGlobal ?? true) {
+    watchEffect(() => {
+      globalConfig.provided.value = true;
+      globalConfig.workspaceId.value = config.workspaceId.value;
+      globalConfig.telaAgentId.value = config.telaAgentId.value;
+      globalConfig.conversationScope.value = config.conversationScope.value;
+      globalConfig.defaultConversationCreatorFilter.value = config.defaultConversationCreatorFilter.value;
+      globalConfig.telaAgentInputs.value = config.telaAgentInputs.value;
+      globalConfig.workspaceSettings.value = config.workspaceSettings.value;
+      globalConfig.hideSidebar.value = config.hideSidebar.value;
+      globalConfig.hideSettings.value = config.hideSettings.value;
+      globalConfig.loadingMessages.value = config.loadingMessages.value;
+      globalConfig.loadingMessagesMode.value = config.loadingMessagesMode.value;
+      globalConfig.customComponents.value = config.customComponents.value;
+      globalConfig.customHtmlTags.value = config.customHtmlTags.value;
+    });
+  }
+  provide(EMBED_CONFIG_KEY, config);
+}
+export function useEmbedConfig() {
+  const injectedConfig = inject(EMBED_CONFIG_KEY, null);
+  if (injectedConfig)
+    return injectedConfig;
+  const globalConfig = useGlobalEmbedConfigState();
+  if (!globalConfig.provided.value)
+    return null;
+  return {
+    workspaceId: computed(() => globalConfig.workspaceId.value),
+    telaAgentId: computed(() => globalConfig.telaAgentId.value),
+    conversationScope: computed(() => globalConfig.conversationScope.value),
+    defaultConversationCreatorFilter: computed(() => globalConfig.defaultConversationCreatorFilter.value ?? "all"),
+    telaAgentInputs: computed(() => globalConfig.telaAgentInputs.value),
+    workspaceSettings: computed(() => globalConfig.workspaceSettings.value),
+    hideSidebar: computed(() => globalConfig.hideSidebar.value ?? true),
+    hideSettings: computed(() => globalConfig.hideSettings.value ?? false),
+    loadingMessages: computed(() => globalConfig.loadingMessages.value),
+    loadingMessagesMode: computed(() => globalConfig.loadingMessagesMode.value),
+    customComponents: computed(() => globalConfig.customComponents.value),
+    customHtmlTags: computed(() => globalConfig.customHtmlTags.value)
+  };
+}

package/dist/runtime/embed/composables/tela-agent-metadata.d.ts

@@ -0,0 +1,8 @@
+import type { TelaAgent } from '../../types/schemas/integrations/tela-agent-api.js';
+export declare function useTelaAgentMetadata(): {
+    agentId: any;
+    metadata: any;
+    loading: any;
+    error: any;
+    fetchAgentMetadata: () => Promise<TelaAgent | null>;
+};

package/dist/runtime/embed/composables/tela-agent-metadata.js

@@ -0,0 +1,66 @@
+import * as Sentry from "@sentry/nuxt";
+import { useEmbedConfig } from "./embed-config.js";
+export function useTelaAgentMetadata() {
+  const embedConfig = useEmbedConfig();
+  const agentId = computed(() => embedConfig?.telaAgentId.value?.trim() || null);
+  const metadataByAgentId = useState("chat-tela-agent-metadata", () => ({}));
+  const loadingByAgentId = useState("chat-tela-agent-metadata-loading", () => ({}));
+  const errorByAgentId = useState("chat-tela-agent-metadata-error", () => ({}));
+  const metadata = computed(() => {
+    const currentAgentId = agentId.value;
+    if (!currentAgentId)
+      return null;
+    return metadataByAgentId.value[currentAgentId] ?? null;
+  });
+  const loading = computed(() => {
+    const currentAgentId = agentId.value;
+    return currentAgentId ? loadingByAgentId.value[currentAgentId] === true : false;
+  });
+  const error = computed(() => {
+    const currentAgentId = agentId.value;
+    return currentAgentId ? errorByAgentId.value[currentAgentId] ?? null : null;
+  });
+  async function fetchAgentMetadata() {
+    const currentAgentId = agentId.value;
+    if (!currentAgentId)
+      return null;
+    if (metadataByAgentId.value[currentAgentId])
+      return metadataByAgentId.value[currentAgentId];
+    loadingByAgentId.value = {
+      ...loadingByAgentId.value,
+      [currentAgentId]: true
+    };
+    errorByAgentId.value = {
+      ...errorByAgentId.value,
+      [currentAgentId]: null
+    };
+    try {
+      const data = await $fetch(`/api/tela/agents/${encodeURIComponent(currentAgentId)}`);
+      metadataByAgentId.value = {
+        ...metadataByAgentId.value,
+        [currentAgentId]: data
+      };
+      return data;
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Erro ao carregar agente Tela";
+      errorByAgentId.value = {
+        ...errorByAgentId.value,
+        [currentAgentId]: message
+      };
+      Sentry.captureException(err);
+      return null;
+    } finally {
+      loadingByAgentId.value = {
+        ...loadingByAgentId.value,
+        [currentAgentId]: false
+      };
+    }
+  }
+  return {
+    agentId,
+    metadata,
+    loading,
+    error,
+    fetchAgentMetadata
+  };
+}

package/dist/runtime/embed/feature-config.d.ts

@@ -0,0 +1,13 @@
+export type ChatFeatureConfig = {
+    showUsageTab?: boolean;
+    showDebugOption?: boolean;
+    showModelSelector?: boolean;
+    showCancelButton?: boolean;
+};
+export type ResolvedChatFeatureConfig = {
+    showUsageTab: boolean;
+    showDebugOption: boolean;
+    showModelSelector: boolean;
+    showCancelButton: boolean;
+};
+export declare function resolveChatFeatures(features?: Partial<ChatFeatureConfig>): ResolvedChatFeatureConfig;

package/dist/runtime/embed/feature-config.js

@@ -0,0 +1,8 @@
+export function resolveChatFeatures(features) {
+  return {
+    showUsageTab: features?.showUsageTab ?? false,
+    showDebugOption: features?.showDebugOption ?? false,
+    showModelSelector: features?.showModelSelector ?? false,
+    showCancelButton: features?.showCancelButton ?? false
+  };
+}

package/dist/runtime/embed/types.d.ts

@@ -0,0 +1,58 @@
+import type { Component, DeepReadonly } from 'vue';
+import type { WorkspaceSettingsResponse as WorkspaceSettings } from '../types/schemas/chat/workspace-settings.js';
+import type { TelaAgentExecutionInput } from '../types/schemas/integrations/tela-agent-api.js';
+import type { ConversationCreatorFilter } from '../types/schemas/chat/primitives.js';
+import type { ChatLoadingMessageMode } from './loading-messages.js';
+import type { ChatFeatureConfig } from './feature-config.js';
+export type ChatActor = {
+    name?: string | null;
+    email?: string | null;
+    image?: string | null;
+};
+export type ChatEmbedSharedProps = {
+    /** Controlled conversation id. Use with `v-model:conversation-id` when the host owns active conversation state. */
+    conversationId?: string | null;
+    /** Conversation id to open once on mount when `conversationId` is uncontrolled. */
+    initialConversationId?: string | null;
+    /** Technical scope that isolates conversation history within the current workspace and runtime. */
+    conversationScope?: string | null;
+    /** Initial creator filter for the sidebar conversation list. Defaults to all conversations. */
+    defaultConversationCreatorFilter?: ConversationCreatorFilter;
+    /** Hide the conversation list and render only the active chat surface. */
+    hideSidebar?: boolean;
+    /** Hide workspace settings actions while keeping the chat header and content unchanged. */
+    hideSettings?: boolean;
+    /** Custom pending-response messages shown while the assistant is working. */
+    loadingMessages?: readonly string[] | null;
+    /** How custom loading messages rotate. Defaults to ordered behavior when omitted. */
+    loadingMessagesMode?: ChatLoadingMessageMode | null;
+    /** Custom markdown component renderers keyed by markdown node or tag name. */
+    customComponents?: Record<string, Component>;
+    /** Extra HTML tags allowed by the markdown renderer. */
+    customHtmlTags?: readonly string[];
+};
+export type DefaultChatEmbedProps = ChatEmbedSharedProps & {
+    /** Omitted in default chat mode. Set this to switch to Tela agent mode. */
+    telaAgentId?: undefined;
+    /** Tela agent inputs are only accepted in Tela agent mode. */
+    telaAgentInputs?: undefined;
+    /** Optional host-provided workspace settings. When omitted, chat-nuxt loads workspace settings itself. */
+    workspaceSettings?: DeepReadonly<WorkspaceSettings> | WorkspaceSettings | null;
+    /** Optional display identity for messages created by the current user. */
+    user?: ChatActor | null;
+    /** Optional UI feature toggles for the default chat runtime. */
+    features?: Partial<ChatFeatureConfig>;
+};
+export type TelaAgentChatEmbedProps = ChatEmbedSharedProps & {
+    /** Tela agent id that switches the embed into Tela agent runtime mode. */
+    telaAgentId: string;
+    /** Inputs sent with each Tela agent run. Non-null values hide the variables panel. */
+    telaAgentInputs?: DeepReadonly<TelaAgentExecutionInput[]> | null;
+    /** Not accepted in Tela agent mode because the Tela agent owns runtime settings. */
+    workspaceSettings?: never;
+    /** Not accepted in Tela agent mode because execution identity comes from the Tela agent runtime. */
+    user?: never;
+    /** Optional UI feature toggles that are still supported in Tela agent mode. */
+    features?: Partial<ChatFeatureConfig>;
+};
+export type MeistrariChatEmbedProps = DefaultChatEmbedProps | TelaAgentChatEmbedProps;

package/dist/runtime/files/components/chat-file-preview.d.vue.ts

@@ -0,0 +1,7 @@
+import type { DetectedFile } from '../content-detection.js';
+type __VLS_Props = {
+    file: DetectedFile;
+};
+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;