@meistrari/chat-nuxt 1.0.0

package/dist/runtime/components/app-markdown-render.d.vue.ts

@@ -0,0 +1,15 @@
+import type { Component } from 'vue';
+type __VLS_Props = {
+    content?: string | null;
+    renderCodeBlocksAsPre?: boolean;
+    typewriter?: boolean;
+    customComponents?: Record<string, Component>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    content: string | null;
+    renderCodeBlocksAsPre: boolean;
+    typewriter: boolean;
+    customComponents: Record<string, Component>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/app-markdown-render.vue

@@ -0,0 +1,45 @@
+<script setup>
+import MarkdownRender, { getMarkdown, parseMarkdownToStructure, removeCustomComponents, setCustomComponents } from "markstream-vue";
+import MermaidDiagram from "./renderers/mermaid-diagram.vue";
+import { transformMarkdownNodes } from "../utils/markdown-nodes";
+const props = defineProps({
+  content: { type: [String, null], required: false, default: "" },
+  renderCodeBlocksAsPre: { type: Boolean, required: false, default: false },
+  typewriter: { type: Boolean, required: false, default: true },
+  customComponents: { type: Object, required: false, default: () => ({}) }
+});
+const attrs = useAttrs();
+const markdown = getMarkdown();
+const instance = getCurrentInstance();
+const scopeId = `app-markdown-render-${instance?.uid ?? Math.random().toString(36).slice(2)}`;
+function escapeSingleDollarSigns(text) {
+  return text.replace(/(```[\s\S]*?```|``+[^`]*``+|`[^`]*`|!?\[(?:[^\[\]]|\[[^\[\]]*\])*\]\([^)]*\))|(?<![$\\])\$(?!\$)/g, (_match, codeSpan) => {
+    if (codeSpan)
+      return codeSpan;
+    return "\\$";
+  });
+}
+const nodes = computed(() => {
+  const parsedNodes = parseMarkdownToStructure(escapeSingleDollarSigns(props.content ?? ""), markdown);
+  return transformMarkdownNodes(parsedNodes);
+});
+watchEffect(() => {
+  setCustomComponents(scopeId, {
+    mermaid: MermaidDiagram,
+    ...props.customComponents
+  });
+});
+onBeforeUnmount(() => {
+  removeCustomComponents(scopeId);
+});
+</script>
+
+<template>
+    <MarkdownRender
+        v-bind="attrs"
+        :nodes="nodes"
+        :custom-id="scopeId"
+        :render-code-blocks-as-pre="renderCodeBlocksAsPre"
+        :typewriter="typewriter"
+    />
+</template>

package/dist/runtime/components/app-markdown-render.vue.d.ts

@@ -0,0 +1,15 @@
+import type { Component } from 'vue';
+type __VLS_Props = {
+    content?: string | null;
+    renderCodeBlocksAsPre?: boolean;
+    typewriter?: boolean;
+    customComponents?: Record<string, Component>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    content: string | null;
+    renderCodeBlocksAsPre: boolean;
+    typewriter: boolean;
+    customComponents: Record<string, Component>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/application-card.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    id: string;
+    name: string;
+    description: string;
+    doneCount: number;
+};
+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/application-card.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { useLocalStorage } from "@vueuse/core";
+const props = defineProps({
+  id: { type: String, required: true },
+  name: { type: String, required: true },
+  description: { type: String, required: true },
+  doneCount: { type: Number, required: true }
+});
+const lastUsedAtDate = useLocalStorage(`${props.id}-last-used-at`, null);
+const lastUsedAtText = computed(() => {
+  if (!lastUsedAtDate.value) {
+    return "Nunca utilizado";
+  }
+  return formatTime(lastUsedAtDate.value);
+});
+</script>
+
+<template>
+    <NuxtLink
+        :to="`/app/${id}`" px-32px py-24px b=".5px gray-120" rounded-16px
+        hover:bg-gray-40 transition ease
+        flex-none
+    >
+        <div body-12-regular text-black-900 op-50>
+            {{ lastUsedAtText }}
+        </div>
+
+        <div h-48px />
+
+        <div body-18-semibold text-black-900>
+            {{ name }}
+        </div>
+        <div h-7px />
+        <div body-14-regular text-black-560>
+            {{ description }}
+        </div>
+
+        <div h-69px />
+
+        <div v-if="doneCount > 0">
+            <div body-12-regular text-black-560>
+                Concluídos
+            </div>
+            <div flex items-center gap-4px>
+                <div body-16-semibold text="#6D8784">
+                    {{ doneCount }}
+                </div>
+                <div i-ph-check-circle text="#27CA69" />
+            </div>
+        </div>
+    </NuxtLink>
+</template>

package/dist/runtime/components/application-card.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    id: string;
+    name: string;
+    description: string;
+    doneCount: number;
+};
+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/audio-preview.d.vue.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    url: string;
+    name?: string;
+    clickable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+    loaded: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+    onLoaded?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/audio-preview.vue

@@ -0,0 +1,52 @@
+<script setup>
+defineProps({
+  url: { type: String, required: true },
+  name: { type: String, required: false },
+  clickable: { type: Boolean, required: false }
+});
+const emit = defineEmits(["click", "loaded"]);
+const isLoading = ref(true);
+const error = ref(false);
+function onCanPlay() {
+  isLoading.value = false;
+  emit("loaded");
+}
+function onError() {
+  isLoading.value = false;
+  error.value = true;
+}
+</script>
+
+<template>
+    <div
+        relative
+        w-full
+        overflow-hidden
+        rounded-16px
+        bg-transparent
+        transition-all
+        :class="clickable !== false ? 'cursor-pointer hover:shadow-md' : ''"
+        @click="clickable !== false && emit('click')"
+    >
+        <div v-if="isLoading" class="flex items-center justify-center h-300px mt-24px mb-24px">
+            <TelaSkeleton class="rounded-8px" />
+        </div>
+
+        <div v-else-if="error" class="flex items-center justify-center h-300px mt-24px">
+            <div class="flex items-center gap-8px text-negative-dark">
+                <TelaIcon name="i-ph-speaker-x" />
+                <span body-small-regular>Falha ao carregar áudio</span>
+            </div>
+        </div>
+
+        <div v-show="!isLoading && !error" class="w-full">
+            <audio
+                :src="url"
+                controls
+                class="w-full"
+                @canplay="onCanPlay"
+                @error="onError"
+            />
+        </div>
+    </div>
+</template>

package/dist/runtime/components/audio-preview.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    url: string;
+    name?: string;
+    clickable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+    loaded: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+    onLoaded?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/bash-widget.d.vue.ts

@@ -0,0 +1,9 @@
+import type { ToolUse, ToolResult } from '../../types/reasoning.js';
+type __VLS_Props = {
+    toolUse: ToolUse;
+    toolResult?: ToolResult;
+    isActive?: boolean;
+};
+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/bash-widget.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { isCodeLike } from "../../utils/code-detection";
+const props = defineProps({
+  toolUse: { type: Object, required: true },
+  toolResult: { type: Object, required: false },
+  isActive: { type: Boolean, required: false }
+});
+const command = computed(() => {
+  const cmd = props.toolUse.input?.command;
+  return typeof cmd === "string" ? cmd : "";
+});
+const statusVariant = computed(() => {
+  if (props.toolResult) {
+    return props.toolResult.isError ? "error" : "completed";
+  }
+  return "executing";
+});
+const statusLabel = computed(() => {
+  if (props.toolResult) {
+    return props.toolResult.isError ? "Erro" : "Conclu\xEDdo";
+  }
+  return "Executando...";
+});
+const isOutputCode = computed(() => {
+  if (!props.toolResult?.output)
+    return false;
+  return isCodeLike(props.toolResult.output);
+});
+</script>
+
+<template>
+    <div class="bg-subtle rounded-16px border border-gray-200">
+        <!-- Header -->
+        <div class="px-24px py-24px flex items-center justify-between">
+            <h3 class="text-20px font-580 leading-24px tracking-[-0.5px] text-primary truncate">
+                Bash
+            </h3>
+            <TelaStatus :variant="statusVariant" :label="statusLabel" />
+        </div>
+
+        <!-- Content -->
+        <div v-if="toolResult" class="px-24px pb-24px space-y-16px">
+            <!-- Command section -->
+            <div>
+                <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
+                    Comando executado
+                </div>
+                <div class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2">
+                    <p class="text-14px text-primary font-mono break-words">
+                        <span class="text-emerald-600 mr-2">$</span>{{ command }}
+                    </p>
+                </div>
+            </div>
+
+            <!-- Output section -->
+            <div>
+                <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
+                    {{ toolResult.isError ? "Erro" : "Resultado" }}
+                </div>
+                <div
+                    v-if="isOutputCode"
+                    class="bg-[#1e1e1e] rounded-8px p-12px overflow-auto max-h-300px"
+                >
+                    <pre class="font-mono text-12px text-gray-300 whitespace-pre-wrap break-all"><code>{{ toolResult.output }}</code></pre>
+                </div>
+                <div
+                    v-else-if="!toolResult.output || toolResult.output.trim().length === 0"
+                    class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2"
+                >
+                    <p class="text-14px text-tertiary m-0">
+                        Nenhum resultado disponível
+                    </p>
+                </div>
+                <div
+                    v-else
+                    class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2"
+                    :class="toolResult.isError ? 'text-red-600' : 'text-primary'"
+                >
+                    <p class="text-14px whitespace-pre-wrap break-words m-0">
+                        {{ toolResult.output }}
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

package/dist/runtime/components/chat/bash-widget.vue.d.ts

@@ -0,0 +1,9 @@
+import type { ToolUse, ToolResult } from '../../types/reasoning.js';
+type __VLS_Props = {
+    toolUse: ToolUse;
+    toolResult?: ToolResult;
+    isActive?: boolean;
+};
+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/canvas-selector-modal.d.vue.ts

@@ -0,0 +1,14 @@
+import type { CanvasTool } from '../../types/agent.js';
+type __VLS_Props = {
+    open: boolean;
+    canvasTools: readonly CanvasTool[] | CanvasTool[] | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    save: (tools: CanvasTool[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onSave?: ((tools: CanvasTool[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/canvas-selector-modal.vue

@@ -0,0 +1,290 @@
+<script setup>
+import { useMagicKeys } from "@vueuse/core";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  canvasTools: { type: [Array, null], required: true }
+});
+const emit = defineEmits(["close", "save"]);
+const { canvas, projects, loading: loadingCanvas } = useTela();
+const searchQuery = ref("");
+const selectedCanvas = ref(/* @__PURE__ */ new Map());
+function initSelectedCanvas() {
+  const map = /* @__PURE__ */ new Map();
+  if (props.canvasTools) {
+    for (const tool of props.canvasTools) {
+      map.set(tool.canvasId, { description: tool.description });
+    }
+  }
+  selectedCanvas.value = map;
+}
+const { escape } = useMagicKeys();
+watch(() => props.open, (isOpen) => {
+  if (isOpen) {
+    initSelectedCanvas();
+    searchQuery.value = "";
+  }
+});
+watch(() => escape?.value, (pressed) => {
+  if (pressed && props.open) {
+    handleClose();
+  }
+});
+const filteredCanvas = computed(() => {
+  const query = searchQuery.value.toLowerCase().trim();
+  const matchingProjects = query ? projects.value.filter((p) => p.title.toLowerCase().includes(query)) : [];
+  const matchingProjectIds = new Set(matchingProjects.map((p) => p.id));
+  return query ? canvas.value.filter(
+    (c) => c.title.toLowerCase().includes(query) || matchingProjectIds.has(c.projectId)
+  ) : canvas.value;
+});
+const groupedByProject = computed(() => {
+  const canvasList = filteredCanvas.value;
+  const groups = /* @__PURE__ */ new Map();
+  for (const c of canvasList) {
+    const key = c.projectId;
+    if (!groups.has(key)) {
+      groups.set(key, []);
+    }
+    groups.get(key).push(c);
+  }
+  const result = [];
+  for (const project of projects.value) {
+    const projectCanvas = groups.get(project.id);
+    if (projectCanvas?.length) {
+      result.push({ project, canvas: projectCanvas });
+    }
+  }
+  const orphanCanvas = canvasList.filter(
+    (c) => !projects.value.some((p) => p.id === c.projectId)
+  );
+  if (orphanCanvas.length)
+    result.push({ project: null, canvas: orphanCanvas });
+  return result;
+});
+function toggleCanvas(canvasId) {
+  if (selectedCanvas.value.has(canvasId))
+    selectedCanvas.value.delete(canvasId);
+  else
+    selectedCanvas.value.set(canvasId, { description: "" });
+  selectedCanvas.value = new Map(selectedCanvas.value);
+}
+function updateCanvasDescription(canvasId, description) {
+  const current = selectedCanvas.value.get(canvasId);
+  if (current) {
+    selectedCanvas.value.set(canvasId, { description });
+    selectedCanvas.value = new Map(selectedCanvas.value);
+  }
+}
+function transformVariables(variables) {
+  if (!variables?.length)
+    return void 0;
+  return variables.reduce((acc, v) => {
+    acc[v.name] = {
+      name: v.name,
+      description: v.description ?? v.name,
+      type: v.type
+    };
+    return acc;
+  }, {});
+}
+function buildCanvasTools() {
+  const tools = [];
+  for (const [canvasId, data] of selectedCanvas.value) {
+    const item = canvas.value.find((c) => c.id === canvasId);
+    if (!item)
+      continue;
+    const name = item.title.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, "");
+    tools.push({
+      canvasId,
+      name,
+      description: data.description.trim() || item.title,
+      variables: transformVariables(item.promotedVersion?.variables)
+    });
+  }
+  return tools;
+}
+function handleSave() {
+  emit("save", buildCanvasTools());
+  emit("close");
+}
+function handleClose() {
+  emit("close");
+}
+</script>
+
+<template>
+    <Teleport to="body">
+        <div
+            v-if="open"
+            fixed inset-0 z-50 flex items-center justify-center
+            @click.self="handleClose"
+        >
+            <!-- Backdrop -->
+            <div absolute inset-0 bg-black op-40 />
+
+            <!-- Modal -->
+            <div
+                relative w-full max-w-540px mx-16px
+                bg-white rounded-16px shadow-xl
+                flex="~ col"
+                max-h="90vh"
+            >
+                <!-- Header -->
+                <div flex items-center justify-between px-24px py-16px b-b=".5px gray-120">
+                    <div flex="~ col" gap-2px>
+                        <h2 text-16px font-semibold text-gray-900>
+                            Selecionar Canvas / Workflows
+                        </h2>
+                        <p text-12px text-gray-500>
+                            Escolha os canvas do Tela para usar como ferramentas
+                        </p>
+                    </div>
+                    <button
+                        p-8px rounded-8px hover:bg-gray-100 transition cursor-pointer
+                        @click="handleClose"
+                    >
+                        <div i-ph-x text-20px text-gray-400 />
+                    </button>
+                </div>
+
+                <!-- Search -->
+                <div px-24px py-12px b-b=".5px gray-120">
+                    <div relative>
+                        <div absolute left-12px top="50%" translate-y="-50%" i-ph-magnifying-glass text-14px text-gray-400 />
+                        <input
+                            v-model="searchQuery"
+                            type="text"
+                            placeholder="Buscar canvas ou projeto..."
+                            w-full pl-36px pr-12px py-10px rounded-8px
+                            b=".5px gray-200" text-14px bg-gray-50
+                            focus:outline-none focus:b-blue-400 focus:bg-white
+                        >
+                    </div>
+                </div>
+
+                <!-- Selected Pills -->
+                <div v-if="selectedCanvas.size > 0" px-24px py-12px b-b=".5px gray-120" bg-blue-50>
+                    <div flex items-center gap-8px mb-8px>
+                        <div i-ph-check-circle text-14px text-blue-500 />
+                        <span text-12px font-medium text-blue-700>
+                            {{ selectedCanvas.size }} selecionado{{ selectedCanvas.size > 1 ? "s" : "" }}
+                        </span>
+                    </div>
+                    <div flex flex-wrap gap-6px>
+                        <div
+                            v-for="[canvasId] in selectedCanvas" :key="canvasId"
+                            flex items-center gap-6px px-8px py-4px rounded-6px bg-white b=".5px blue-200"
+                        >
+                            <div i-ph-puzzle-piece text-blue-500 text-12px />
+                            <span text-12px text-blue-700 max-w-120px truncate>
+                                {{ canvas.find((c) => c.id === canvasId)?.title ?? "Canvas" }}
+                            </span>
+                            <button p-1px rounded-2px hover:bg-blue-100 transition cursor-pointer @click="toggleCanvas(canvasId)">
+                                <div i-ph-x text-blue-400 text-10px />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Canvas List -->
+                <div flex-1 overflow-y-auto min-h-200px max-h-400px>
+                    <div v-if="loadingCanvas" flex items-center justify-center py-48px>
+                        <div i-ph-spinner animate-spin text-24px text-gray-400 />
+                    </div>
+
+                    <div v-else-if="filteredCanvas.length === 0" text-center py-48px>
+                        <div i-ph-puzzle-piece text-32px text-gray-300 mb-8px />
+                        <p text-gray-400 text-14px>
+                            {{ canvas.length === 0 ? "Nenhum canvas dispon\xEDvel" : "Nenhum resultado encontrado" }}
+                        </p>
+                    </div>
+
+                    <template v-else>
+                        <div v-for="group in groupedByProject" :key="group.project?.id ?? 'orphan'" py-12px>
+                            <div flex items-center gap-8px px-24px mb-8px>
+                                <div i-ph-folder text-14px text-gray-400 />
+                                <span text-12px font-semibold text-gray-500 uppercase tracking-wide>
+                                    {{ group.project?.title ?? "Sem projeto" }}
+                                </span>
+                                <span text-11px text-gray-400>
+                                    ({{ group.canvas.length }})
+                                </span>
+                            </div>
+
+                            <div flex="~ col">
+                                <div
+                                    v-for="item in group.canvas"
+                                    :key="item.id"
+                                    flex="~ col"
+                                    px-24px py-10px
+                                    transition
+                                    :class="[
+  !item.promotedVersion ? 'opacity-40 cursor-not-allowed' : selectedCanvas.has(item.id) ? 'bg-blue-50 cursor-pointer' : 'hover:bg-gray-50 cursor-pointer'
+]"
+                                    @click="item.promotedVersion && toggleCanvas(item.id)"
+                                >
+                                    <div flex items-center gap-12px>
+                                        <div
+                                            w-18px h-18px rounded-4px b=".5px solid"
+                                            flex items-center justify-center flex-shrink-0
+                                            :class="[
+  selectedCanvas.has(item.id) ? 'bg-blue-500 b-blue-500' : 'bg-white b-gray-300'
+]"
+                                        >
+                                            <div v-if="selectedCanvas.has(item.id)" i-ph-check text-11px text-white />
+                                        </div>
+
+                                        <div flex="~ col" gap-2px flex-1 min-w-0>
+                                            <span text-14px text-gray-800 truncate>
+                                                {{ item.title }}
+                                            </span>
+                                        </div>
+
+                                        <span
+                                            text-10px px-6px py-2px rounded-4px
+                                            :class="[
+  !item.promotedVersion ? 'bg-gray-100 text-gray-400' : item.promotedVersion.workflowSpec ? 'bg-purple-100 text-purple-600' : 'bg-green-100 text-green-600'
+]"
+                                        >
+                                            {{ !item.promotedVersion ? "Rascunho" : item.promotedVersion.workflowSpec ? "Workflow" : "Canvas" }}
+                                        </span>
+                                    </div>
+
+                                    <!-- Description input when selected -->
+                                    <div
+                                        v-if="selectedCanvas.has(item.id)"
+                                        mt-10px ml-30px
+                                        @click.stop
+                                    >
+                                        <label text-11px text-gray-500 mb-4px block>
+                                            Descrição (opcional)
+                                        </label>
+                                        <input
+                                            type="text"
+                                            :value="selectedCanvas.get(item.id)?.description"
+                                            :placeholder="`Ex: Use para ${item.title.toLowerCase()}`"
+                                            w-full px-10px py-6px rounded-6px
+                                            b=".5px gray-200" text-13px bg-white
+                                            focus:outline-none focus:b-blue-400
+                                            @input="(e) => updateCanvasDescription(item.id, e.target.value)"
+                                        >
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+
+                <!-- Footer -->
+                <div flex items-center justify-end gap-12px px-24px py-16px b-t=".5px gray-120">
+                    <TelaButton variant="ghost" @click="handleClose">
+                        Cancelar
+                    </TelaButton>
+                    <TelaButton @click="handleSave">
+                        Confirmar seleção
+                    </TelaButton>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>

package/dist/runtime/components/chat/canvas-selector-modal.vue.d.ts

@@ -0,0 +1,14 @@
+import type { CanvasTool } from '../../types/agent.js';
+type __VLS_Props = {
+    open: boolean;
+    canvasTools: readonly CanvasTool[] | CanvasTool[] | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    save: (tools: CanvasTool[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onSave?: ((tools: CanvasTool[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;