@meistrari/chat-nuxt 1.0.0

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

@@ -0,0 +1,272 @@
+<script setup>
+import { useMagicKeys } from "@vueuse/core";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  knowledgeSources: { type: [Array, null], required: true }
+});
+const emit = defineEmits(["close", "save"]);
+const { workstations, projects, canvas, loadingWorkstations } = useTela();
+function getProjectIdForWorkstation(workstation) {
+  const prompt = canvas.value.find((c) => c.id === workstation.promptId);
+  return prompt?.projectId;
+}
+const searchQuery = ref("");
+const selectedWorkstations = ref(/* @__PURE__ */ new Set());
+function initSelectedWorkstations() {
+  const ids = /* @__PURE__ */ new Set();
+  if (props.knowledgeSources) {
+    for (const source of props.knowledgeSources) {
+      if (source.type === "workstation") {
+        ids.add(source.id);
+      }
+    }
+  }
+  selectedWorkstations.value = ids;
+}
+const { escape } = useMagicKeys();
+watch(() => props.open, (isOpen) => {
+  if (isOpen) {
+    initSelectedWorkstations();
+    searchQuery.value = "";
+  }
+});
+watch(() => escape?.value, (pressed) => {
+  if (pressed && props.open) {
+    handleClose();
+  }
+});
+const filteredWorkstations = 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 ? workstations.value.filter((w) => {
+    const projectId = getProjectIdForWorkstation(w);
+    return w.name.toLowerCase().includes(query) || w.description?.toLowerCase().includes(query) || projectId && matchingProjectIds.has(projectId);
+  }) : workstations.value;
+});
+function sortWithSelectedFirst(workstations2) {
+  return [...workstations2].sort((a, b) => {
+    const aSelected = selectedWorkstations.value.has(a.id);
+    const bSelected = selectedWorkstations.value.has(b.id);
+    if (aSelected && !bSelected)
+      return -1;
+    if (!aSelected && bSelected)
+      return 1;
+    return a.name.localeCompare(b.name);
+  });
+}
+const groupedByProject = computed(() => {
+  const list = filteredWorkstations.value;
+  const groups = /* @__PURE__ */ new Map();
+  for (const w of list) {
+    const key = getProjectIdForWorkstation(w);
+    if (!key)
+      continue;
+    if (!groups.has(key)) {
+      groups.set(key, []);
+    }
+    groups.get(key).push(w);
+  }
+  const result = [];
+  for (const project of projects.value) {
+    const projectWorkstations = groups.get(project.id);
+    if (projectWorkstations?.length) {
+      result.push({ project, workstations: sortWithSelectedFirst(projectWorkstations) });
+    }
+  }
+  return result;
+});
+function toggleWorkstation(workstationId) {
+  if (selectedWorkstations.value.has(workstationId))
+    selectedWorkstations.value.delete(workstationId);
+  else
+    selectedWorkstations.value.add(workstationId);
+  selectedWorkstations.value = new Set(selectedWorkstations.value);
+}
+function buildKnowledgeSources() {
+  const sources = [];
+  for (const id of selectedWorkstations.value) {
+    const item = workstations.value.find((w) => w.id === id);
+    if (!item)
+      continue;
+    const projectId = getProjectIdForWorkstation(item);
+    if (!projectId)
+      continue;
+    sources.push({
+      type: "workstation",
+      id,
+      name: item.name,
+      projectId,
+      description: item.description,
+      taskCount: item.taskCount
+    });
+  }
+  return sources;
+}
+function handleSave() {
+  emit("save", buildKnowledgeSources());
+  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 Fontes de Conhecimento
+                        </h2>
+                        <p text-12px text-gray-500>
+                            Conecte workstations do Tela para buscar informações
+                        </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 workstation 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="selectedWorkstations.size > 0" px-24px py-12px b-b=".5px gray-120" bg-emerald-50>
+                    <div flex items-center gap-8px mb-8px>
+                        <div i-ph-check-circle text-14px text-emerald-500 />
+                        <span text-12px font-medium text-emerald-700>
+                            {{ selectedWorkstations.size }} selecionado{{ selectedWorkstations.size > 1 ? "s" : "" }}
+                        </span>
+                    </div>
+                    <div flex flex-wrap gap-6px>
+                        <div
+                            v-for="workstationId in selectedWorkstations" :key="workstationId"
+                            flex items-center gap-6px px-8px py-4px rounded-6px bg-white b=".5px emerald-200"
+                        >
+                            <div i-ph-database text-emerald-500 text-12px />
+                            <span text-12px text-emerald-700 max-w-120px truncate>
+                                {{ workstations.find((w) => w.id === workstationId)?.name ?? "Workstation" }}
+                            </span>
+                            <button p-1px rounded-2px hover:bg-emerald-100 transition cursor-pointer @click="toggleWorkstation(workstationId)">
+                                <div i-ph-x text-emerald-400 text-10px />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Workstation List -->
+                <div flex-1 overflow-y-auto min-h-200px max-h-400px>
+                    <div v-if="loadingWorkstations" flex items-center justify-center py-48px>
+                        <div i-ph-spinner animate-spin text-24px text-gray-400 />
+                    </div>
+
+                    <div v-else-if="filteredWorkstations.length === 0" text-center py-48px>
+                        <div i-ph-database text-32px text-gray-300 mb-8px />
+                        <p text-gray-400 text-14px>
+                            {{ workstations.length === 0 ? "Nenhuma workstation com tarefas processadas" : "Nenhum resultado encontrado" }}
+                        </p>
+                    </div>
+
+                    <template v-else>
+                        <div v-for="group in groupedByProject" :key="group.project.id" 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 }}
+                                </span>
+                                <span text-11px text-gray-400>
+                                    ({{ group.workstations.length }})
+                                </span>
+                            </div>
+
+                            <div flex="~ col">
+                                <div
+                                    v-for="item in group.workstations"
+                                    :key="item.id"
+                                    flex="~ col"
+                                    px-24px py-10px
+                                    transition cursor-pointer
+                                    :class="[
+  selectedWorkstations.has(item.id) ? 'bg-emerald-50' : 'hover:bg-gray-50'
+]"
+                                    @click="toggleWorkstation(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="[
+  selectedWorkstations.has(item.id) ? 'bg-emerald-500 b-emerald-500' : 'bg-white b-gray-300'
+]"
+                                        >
+                                            <div v-if="selectedWorkstations.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.name }}
+                                            </span>
+                                            <span v-if="item.description" text-12px text-gray-500 truncate>
+                                                {{ item.description }}
+                                            </span>
+                                        </div>
+
+                                        <span
+                                            v-if="item.taskCount"
+                                            text-11px px-6px py-2px rounded-4px
+                                            bg-gray-100 text-gray-500
+                                        >
+                                            {{ item.taskCount }} {{ item.taskCount === 1 ? "tarefa" : "tarefas" }}
+                                        </span>
+                                    </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/workstation-selector-modal.vue.d.ts

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

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

@@ -0,0 +1,165 @@
+<script setup>
+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 content = computed(() => {
+  const c = props.toolUse.input?.content;
+  return typeof c === "string" ? c : "";
+});
+const lineCount = computed(() => {
+  if (!content.value)
+    return 0;
+  return content.value.split("\n").length;
+});
+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";
+  return "i-ph-file-code";
+});
+const statusVariant = computed(() => {
+  if (props.toolResult) {
+    return props.toolResult.isError ? "error" : "completed";
+  }
+  return "running";
+});
+const statusLabel = computed(() => {
+  if (props.toolResult) {
+    return props.toolResult.isError ? "Erro" : "Criado";
+  }
+  return "Escrevendo...";
+});
+const previewLines = computed(() => {
+  if (!content.value)
+    return [];
+  return content.value.split("\n").slice(0, 15);
+});
+const hasMoreLines = computed(() => {
+  return lineCount.value > 15;
+});
+</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">
+                    Write
+                </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>
+
+            <!-- Code section -->
+            <div>
+                <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
+                    Código
+                </div>
+                <div class="bg-[#1e1e1e] rounded-8px overflow-hidden">
+                    <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="(_, index) in previewLines" :key="index" class="leading-5 text-11px">
+                                {{ index + 1 }}
+                            </span>
+                        </div>
+                        <!-- Code content -->
+                        <div class="flex-1 py-8px px-12px overflow-x-auto">
+                            <pre class="font-mono text-11px text-gray-300 m-0"><code><template v-for="(line, index) in previewLines" :key="index">{{ line }}
+</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 {{ lineCount - 15 }} linhas
+                    </div>
+                </div>
+            </div>
+
+            <!-- Error message if any -->
+            <div v-if="toolResult?.isError">
+                <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
+                    Erro
+                </div>
+                <div 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>
+        </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/write-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/conversation-files-panel.d.vue.ts

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