@meistrari/chat-nuxt 1.0.0

package/dist/runtime/components/chat/new-conversation-modal.vue

@@ -0,0 +1,271 @@
+<script setup>
+import { useMagicKeys } from "@vueuse/core";
+const emit = defineEmits(["create"]);
+const isOpen = defineModel({ type: Boolean });
+const { escape } = useMagicKeys();
+watch(() => escape?.value, (pressed) => {
+  if (pressed && isOpen.value) {
+    isOpen.value = false;
+  }
+});
+const { canvas, projects, loading } = useTela();
+const selectedCanvas = ref(/* @__PURE__ */ new Map());
+const searchQuery = ref("");
+const hasSelection = computed(() => selectedCanvas.value.size > 0);
+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 updateDescription(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 handleCreate() {
+  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)
+    });
+  }
+  emit("create", tools);
+  isOpen.value = false;
+}
+function handleClose() {
+  selectedCanvas.value = /* @__PURE__ */ new Map();
+  searchQuery.value = "";
+}
+</script>
+
+<template>
+    <TelaModal v-model="isOpen" title="Nova conversa" modal-width="lg" compact class="!min-w-900px" @close="handleClose">
+        <template #content>
+            <div w-full flex="~ col" max-h-500px>
+                <div flex-1 overflow-y-auto px-32px mt-16px>
+                    <TelaCollapsibleSection
+                        :default-open="false"
+                    >
+                        <template #trigger="{ isOpen: isSectionOpen }">
+                            <TelaCollapsibleTrigger w-full>
+                                <div
+                                    w-full flex items-center justify-between
+                                    py-10px px-12px rounded-8px cursor-pointer
+                                    mb-8px
+                                    border="0.5px solid gray-200"
+                                    hover:bg-gray-50
+                                    transition
+                                >
+                                    <div flex items-center gap-8px>
+                                        <span text-14px font-medium text-gray-700 h-full>
+                                            Tela Tools
+                                        </span>
+                                        <TelaIcon name="i-ph-wrench-bold" size="16px" text-gray-500 h-full />
+                                    </div>
+                                    <div
+                                        i-ph-caret-down text-14px text-gray-400
+                                        transition-transform
+                                        :class="isSectionOpen && 'rotate-180'"
+                                    />
+                                </div>
+                            </TelaCollapsibleTrigger>
+                        </template>
+
+                        <div flex="~ col" gap-16px border="0.5px solid gray-200" rounded-8px p-16px>
+                            <p text-14px text-gray-400>
+                                Você pode selecionar um canvas ou workflow do seu workspace para utilizar na conversa
+                            </p>
+
+                            <div mb-16px>
+                                <div relative>
+                                    <div absolute left-12px top="50%" translate-y="-50%" i-ph-magnifying-glass text-16px text-gray-400 />
+                                    <input
+                                        v-model="searchQuery"
+                                        type="text"
+                                        placeholder="Buscar projetos ou canvas..."
+                                        w-full pl-40px pr-12px py-10px rounded-8px
+                                        b="0.5px solid gray-200" text-14px
+                                        focus:outline-none focus:b-blue-400
+                                    >
+                                </div>
+                            </div>
+                            <div v-if="loading" flex items-center justify-center py-32px>
+                                <div i-ph-spinner animate-spin text-24px text-gray-400 />
+                            </div>
+
+                            <div v-else-if="filteredCanvas.length === 0" text-center py-32px text-gray-400>
+                                {{ canvas.length === 0 ? "Nenhum canvas dispon\xEDvel" : "Nenhum resultado encontrado" }}
+                            </div>
+                            <template v-else-if="groupedByProject.length > 0">
+                                <div v-for="group in groupedByProject" :key="group.project?.id ?? 'orphan'">
+                                    <div flex items-center gap-8px mb-12px>
+                                        <div i-ph-folder text-16px text-gray-400 />
+                                        <span text-14px font-medium text-gray-600>
+                                            {{ group.project?.title ?? "Sem projeto" }}
+                                        </span>
+                                        <span text-12px text-gray-400>
+                                            ({{ group.canvas.length }})
+                                        </span>
+                                    </div>
+
+                                    <div flex="~ col" gap-8px pl-24px>
+                                        <div
+                                            v-for="item in group.canvas"
+                                            :key="item.id"
+                                            rounded-10px p-12px
+                                            b="0.5px solid"
+                                            transition
+                                            :class="[
+  !item.promotedVersion ? 'bg-gray-20 b-gray-120 opacity-50 cursor-not-allowed' : selectedCanvas.has(item.id) ? 'bg-blue-50 b-blue-200 cursor-pointer' : 'bg-gray-20 b-gray-120 hover:bg-gray-100 cursor-pointer'
+]"
+                                            @click="item.promotedVersion && toggleCanvas(item.id)"
+                                        >
+                                            <div flex items-start gap-10px>
+                                                <div
+                                                    w-18px h-18px rounded-4px
+                                                    b="0.5px solid"
+                                                    flex items-center justify-center flex-shrink-0 mt-1px
+                                                    :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-1 min-w-0>
+                                                    <div flex items-center gap-6px>
+                                                        <span
+                                                            body-14-regular text-gray-700 truncate
+                                                            class="leading-[1.25] w-[300px] max-w-[400px]"
+                                                        >
+                                                            {{ item.title }}
+                                                        </span>
+                                                        <div
+                                                            inline-block px-5px rounded-5px select-none
+                                                            b="0.5px solid gray-300"
+                                                        >
+                                                            <span
+                                                                flex items-center gap-4px text-9px whitespace-nowrap
+                                                                font-400 leading-16px tracking-wider uppercase text-gray-400
+                                                            >
+                                                                {{ !item.promotedVersion ? "N\xE3o publicado" : item.promotedVersion.workflowSpec ? "Workflow" : "Canvas" }}
+                                                            </span>
+                                                        </div>
+                                                    </div>
+
+                                                    <div
+                                                        v-if="item.promotedVersion?.variables?.length"
+                                                        mt-6px flex flex-wrap gap-4px
+                                                    >
+                                                        <span
+                                                            v-for="v in item.promotedVersion.variables"
+                                                            :key="v.name"
+                                                            text-10px bg-gray-200 text-gray-500 px-5px py-1px rounded-3px
+                                                        >
+                                                            {{ v.name }}
+                                                        </span>
+                                                    </div>
+
+                                                    <div
+                                                        v-if="selectedCanvas.has(item.id)"
+                                                        mt-10px
+                                                        @click.stop
+                                                    >
+                                                        <label text-11px text-gray-500 mb-3px block>
+                                                            Descrição (opcional)
+                                                        </label>
+                                                        <input
+                                                            type="text"
+                                                            :value="selectedCanvas.get(item.id)?.description"
+                                                            :placeholder="item.title"
+                                                            w-full px-10px py-6px rounded-6px
+                                                            b="0.5px solid gray-200" text-13px
+                                                            focus:outline-none focus:b-blue-400
+                                                            @input="(e) => updateDescription(item.id, e.target.value)"
+                                                        >
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </template>
+                            <div v-else text-center py-32px text-gray-400>
+                                Nenhum resultado encontrado
+                            </div>
+                        </div>
+                    </TelaCollapsibleSection>
+                </div>
+            </div>
+        </template>
+
+        <template #footer>
+            <div w-full flex justify-end gap-12px>
+                <TelaButton variant="secondary" @click="isOpen = false">
+                    Cancelar
+                </TelaButton>
+                <TelaButton @click="handleCreate">
+                    {{ hasSelection ? `Criar com ${selectedCanvas.size} tool(s)` : "Criar conversa" }}
+                </TelaButton>
+            </div>
+        </template>
+    </TelaModal>
+</template>

package/dist/runtime/components/chat/new-conversation-modal.vue.d.ts

@@ -0,0 +1,14 @@
+import type { CanvasTool } from '../../types/agent.js';
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+} & {
+    create: (canvasTools: CanvasTool[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+    onCreate?: ((canvasTools: CanvasTool[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/read-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/read-widget.vue

@@ -0,0 +1,195 @@
+<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 filePath = computed(() => {
+  const path = props.toolUse.input?.file_path;
+  return typeof path === "string" ? path : "";
+});
+const fileName = computed(() => {
+  if (!filePath.value)
+    return "arquivo";
+  const parts = filePath.value.split("/");
+  return parts[parts.length - 1] || "arquivo";
+});
+const fileExtension = computed(() => {
+  const name = fileName.value;
+  const lastDot = name.lastIndexOf(".");
+  if (lastDot === -1)
+    return "";
+  return name.slice(lastDot + 1).toLowerCase();
+});
+const parentDir = computed(() => {
+  if (!filePath.value)
+    return "";
+  const parts = filePath.value.split("/");
+  if (parts.length <= 2)
+    return "";
+  const relevantParts = parts.slice(-3, -1);
+  return relevantParts.join("/");
+});
+const fileIcon = computed(() => {
+  const ext = fileExtension.value;
+  if (["ts", "tsx", "mts", "cts"].includes(ext))
+    return "i-ph-file-ts";
+  if (["js", "jsx", "mjs", "cjs"].includes(ext))
+    return "i-ph-file-js";
+  if (ext === "vue")
+    return "i-ph-file-vue";
+  if (["css", "scss", "sass", "less"].includes(ext))
+    return "i-ph-file-css";
+  if (["html", "htm"].includes(ext))
+    return "i-ph-file-html";
+  if (["json", "jsonc"].includes(ext))
+    return "i-ph-brackets-curly";
+  if (["yaml", "yml", "toml"].includes(ext))
+    return "i-ph-file-text";
+  if (["md", "mdx"].includes(ext))
+    return "i-ph-markdown-logo";
+  if (["png", "jpg", "jpeg", "gif", "svg", "webp"].includes(ext))
+    return "i-ph-image";
+  if (ext === "py")
+    return "i-ph-file-py";
+  if (["sh", "bash", "zsh"].includes(ext))
+    return "i-ph-terminal";
+  if (ext === "sql")
+    return "i-ph-database";
+  if (ext === "pdf")
+    return "i-ph-file-pdf";
+  return "i-ph-file-code";
+});
+const contentPreview = computed(() => {
+  if (!props.toolResult?.output || props.toolResult.isError)
+    return [];
+  const lines = props.toolResult.output.split("\n");
+  const parsed = [];
+  for (const line of lines.slice(0, 20)) {
+    const match = line.match(/^(\s*\d+)→(.*)$/);
+    if (match && match[1]) {
+      parsed.push({
+        lineNum: match[1].trim(),
+        content: match[2] ?? ""
+      });
+    } else if (line.trim()) {
+      parsed.push({
+        lineNum: "",
+        content: line
+      });
+    }
+  }
+  return parsed.slice(0, 15);
+});
+const totalLinesRead = computed(() => {
+  if (!props.toolResult?.output || props.toolResult.isError)
+    return 0;
+  return props.toolResult.output.split("\n").filter((l) => l.match(/^\s*\d+→/)).length;
+});
+const hasMoreLines = computed(() => {
+  return totalLinesRead.value > 15;
+});
+const statusVariant = computed(() => {
+  if (props.toolResult) {
+    return props.toolResult.isError ? "error" : "completed";
+  }
+  return "running";
+});
+const statusLabel = computed(() => {
+  if (!props.toolResult)
+    return "Lendo...";
+  if (props.toolResult.isError)
+    return void 0;
+  return totalLinesRead.value > 0 ? `${totalLinesRead.value} linhas` : "Lido";
+});
+const isContentCode = computed(() => {
+  if (!props.toolResult?.output || props.toolResult.isError)
+    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">
+            <div class="flex-1 min-w-0">
+                <h3 class="text-20px font-580 leading-24px tracking-[-0.5px] text-primary truncate">
+                    Read
+                </h3>
+                <p class="text-12px text-secondary truncate mt-2px">
+                    {{ fileName }}
+                    <span v-if="parentDir" class="opacity-60">em {{ parentDir }}</span>
+                </p>
+            </div>
+            <TelaStatus :variant="statusVariant" :label="statusLabel" />
+        </div>
+
+        <!-- Content -->
+        <div v-if="toolResult" class="px-24px pb-24px space-y-16px">
+            <!-- File path section -->
+            <div>
+                <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
+                    Arquivo
+                </div>
+                <div class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2">
+                    <div class="flex items-center gap-8px">
+                        <div class="text-14px text-gray-500" :class="fileIcon" />
+                        <span class="text-14px text-primary font-mono truncate">{{ filePath }}</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Content section -->
+            <div v-if="contentPreview.length > 0 || toolResult.isError">
+                <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
+                    Conteúdo
+                </div>
+                <div
+                    v-if="isContentCode"
+                    class="bg-[#1e1e1e] rounded-8px p-12px overflow-auto max-h-300px"
+                >
+                    <div class="font-mono text-11px text-gray-300">
+                        <div class="flex">
+                            <!-- Line numbers -->
+                            <div class="flex flex-col py-8px px-12px bg-slate-900/50 text-slate-600 select-none border-r border-slate-800 text-right">
+                                <span v-for="(line, index) in contentPreview" :key="index" class="leading-5">
+                                    {{ line.lineNum || " " }}
+                                </span>
+                            </div>
+                            <!-- Code content -->
+                            <div class="flex-1 py-8px px-12px overflow-x-auto">
+                                <pre class="text-slate-300 m-0"><code><template v-for="(line, index) in contentPreview" :key="index">{{ line.content }}
+</template></code></pre>
+                            </div>
+                        </div>
+                        <div v-if="hasMoreLines" class="text-slate-600 px-12px py-8px border-t border-slate-800 text-center text-11px">
+                            ... mais {{ totalLinesRead - 15 }} linhas
+                        </div>
+                    </div>
+                </div>
+                <div
+                    v-else-if="toolResult.isError"
+                    class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2"
+                >
+                    <p class="text-14px text-red-600 whitespace-pre-wrap break-words m-0">
+                        {{ toolResult.output }}
+                    </p>
+                </div>
+                <div
+                    v-else
+                    class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2"
+                >
+                    <p class="text-14px text-primary whitespace-pre-wrap break-words m-0">
+                        {{ toolResult.output }}
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+pre{margin:0;white-space:pre}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
+</style>

package/dist/runtime/components/chat/read-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/reasoning-message.d.vue.ts

@@ -0,0 +1,13 @@
+import type { ReasoningStep } from '../../types/reasoning.js';
+type __VLS_Props = {
+    step: ReasoningStep;
+    stepNumber: number;
+    isFirst?: boolean;
+    isLast?: boolean;
+    isActive?: boolean;
+    isPreviewMode?: boolean;
+    completed?: 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;