@meistrari/chat-nuxt 1.13.0 → 2.0.0

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

@@ -0,0 +1,291 @@
+<script setup>
+import { useMagicKeys } from "@vueuse/core";
+import { useTela } from "../../shared/composables/tela";
+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/messages/components/chat-canvas-selector-modal.vue.d.ts

@@ -0,0 +1,14 @@
+import type { CanvasTool } from '../../types/schemas/tools/canvas.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/messages/components/chat-context-config.d.vue.ts

@@ -0,0 +1,31 @@
+import type { ContextFile } from '../../types/schemas/chat/files.js';
+import type { KnowledgeSource } from '../../types/schemas/chat/workspace-settings.js';
+import type { CanvasTool } from '../../types/schemas/tools/canvas.js';
+type __VLS_Props = {
+    systemMessage: string | null;
+    contextFiles: readonly ContextFile[] | null;
+    canvasTools: readonly CanvasTool[] | null;
+    knowledgeSources: readonly KnowledgeSource[] | null;
+    hasMessages?: boolean;
+    disabled?: boolean;
+};
+declare function addFiles(files: File[]): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    addFiles: typeof addFiles;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:systemMessage": (value: string) => any;
+    "update:contextFiles": (value: ContextFile[]) => any;
+    "update:canvasTools": (value: CanvasTool[]) => any;
+    "update:knowledgeSources": (value: KnowledgeSource[]) => any;
+    clearThread: () => any;
+    saved: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:systemMessage"?: ((value: string) => any) | undefined;
+    "onUpdate:contextFiles"?: ((value: ContextFile[]) => any) | undefined;
+    "onUpdate:canvasTools"?: ((value: CanvasTool[]) => any) | undefined;
+    "onUpdate:knowledgeSources"?: ((value: KnowledgeSource[]) => any) | undefined;
+    onClearThread?: (() => any) | undefined;
+    onSaved?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;