@meistrari/chat-nuxt 1.0.0

package/dist/runtime/components/chat/workstation-query-widget.vue

@@ -0,0 +1,552 @@
+<script setup>
+import { formatShortDate } from "../../utils/format-time";
+const props = defineProps({
+  toolUse: { type: Object, required: true },
+  toolResult: { type: Object, required: false },
+  isActive: { type: Boolean, required: false },
+  isBashExecution: { type: Boolean, required: false }
+});
+const { knowledgeSources, getWorkstationName } = useKnowledgeSources();
+const queryParams = computed(() => {
+  let jsonStr = null;
+  if (props.isBashExecution) {
+    const command = props.toolUse.input?.command;
+    if (typeof command === "string") {
+      const match = command.match(/'(\{[\s\S]*\})'/);
+      if (match && match[1]) {
+        jsonStr = match[1];
+      }
+    }
+  } else {
+    const args = props.toolUse.input?.args;
+    if (typeof args === "string") {
+      jsonStr = args;
+    }
+  }
+  if (!jsonStr)
+    return null;
+  try {
+    return JSON.parse(jsonStr);
+  } catch {
+    return null;
+  }
+});
+const formattedFilters = computed(() => {
+  const parts = [];
+  if (queryParams.value?.limit) {
+    parts.push(`Limite: ${queryParams.value.limit}`);
+  }
+  if (queryParams.value?.offset) {
+    parts.push(`Offset: ${queryParams.value.offset}`);
+  }
+  if (queryParams.value?.orderBy) {
+    const order = queryParams.value.order === "asc" ? "\u2191" : "\u2193";
+    parts.push(`Ordenar: ${queryParams.value.orderBy} ${order}`);
+  }
+  if (queryParams.value?.select && queryParams.value.select.length > 0) {
+    parts.push(`Campos: ${queryParams.value.select.join(", ")}`);
+  }
+  const filters = queryParams.value?.filters;
+  if (filters) {
+    if (filters.status && Array.isArray(filters.status)) {
+      parts.push(`Status: ${filters.status.join(", ")}`);
+    }
+    if (filters.createdAtSince) {
+      parts.push(`Desde: ${formatShortDate(filters.createdAtSince)}`);
+    }
+    if (filters.createdAtUntil) {
+      parts.push(`At\xE9: ${formatShortDate(filters.createdAtUntil)}`);
+    }
+    if (filters.tags && Array.isArray(filters.tags)) {
+      parts.push(`Tags: ${filters.tags.join(", ")}`);
+    }
+    if (filters.approvedBy && Array.isArray(filters.approvedBy)) {
+      parts.push(`Aprovado por: ${filters.approvedBy.join(", ")}`);
+    }
+    if (filters.createdBy && Array.isArray(filters.createdBy)) {
+      parts.push(`Criado por: ${filters.createdBy.join(", ")}`);
+    }
+  }
+  return parts.length > 0 ? parts : null;
+});
+function formatCondition(field, ops) {
+  const results = [];
+  for (const [op, value] of Object.entries(ops)) {
+    if (value === void 0 || op === "$type")
+      continue;
+    switch (op) {
+      case "$eq":
+        results.push(`${field} = ${value}`);
+        break;
+      case "$ne":
+        results.push(`${field} \u2260 ${value}`);
+        break;
+      case "$contains":
+        results.push(`${field} cont\xE9m "${value}"`);
+        break;
+      case "$gt":
+        results.push(`${field} > ${value}`);
+        break;
+      case "$gte":
+        results.push(`${field} \u2265 ${value}`);
+        break;
+      case "$lt":
+        results.push(`${field} < ${value}`);
+        break;
+      case "$lte":
+        results.push(`${field} \u2264 ${value}`);
+        break;
+      case "$in":
+        if (Array.isArray(value)) {
+          results.push(`${field} em [${value.join(", ")}]`);
+        }
+        break;
+    }
+  }
+  return results;
+}
+function formatElemMatch(path, elemMatch) {
+  const results = [];
+  for (const [field, condition] of Object.entries(elemMatch)) {
+    if (condition === void 0)
+      continue;
+    if (typeof condition === "object" && condition !== null) {
+      const ops = condition;
+      if (ops.$elemMatch) {
+        const nestedPath = path ? `${path}.${field}` : field;
+        results.push(...formatElemMatch(nestedPath, ops.$elemMatch));
+      } else {
+        const fullField = path ? `${path}.${field}` : field;
+        results.push(...formatCondition(fullField, ops));
+      }
+    } else {
+      const fullField = path ? `${path}.${field}` : field;
+      results.push(`${fullField} = ${condition}`);
+    }
+  }
+  return results;
+}
+const formattedOutputQuery = computed(() => {
+  if (!queryParams.value?.outputQuery)
+    return null;
+  const query = queryParams.value.outputQuery;
+  const parts = [];
+  for (const [field, condition] of Object.entries(query)) {
+    if (condition === void 0)
+      continue;
+    if (typeof condition === "object" && condition !== null) {
+      const ops = condition;
+      if (ops.$elemMatch) {
+        const elemMatchResults = formatElemMatch(field, ops.$elemMatch);
+        parts.push(...elemMatchResults);
+      } else {
+        parts.push(...formatCondition(field, ops));
+      }
+    } else {
+      parts.push(`${field} = ${condition}`);
+    }
+  }
+  return parts.length > 0 ? parts : null;
+});
+const parsedResult = computed(() => {
+  if (!props.toolResult?.output)
+    return null;
+  const output = props.toolResult.output;
+  const lines = output.split("\n");
+  const summaryMatch = output.match(/Found (\d+) total tasks \(showing (\d+)\)/);
+  const pageMatch = output.match(/Page (\d+) of (\d+)/);
+  const tasks = [];
+  let currentTask = null;
+  let inOutput = false;
+  let outputLines = [];
+  for (const line of lines) {
+    const taskMatch = line.match(/^-{3,}\s*Task:\s*(.+?)\s*-{3,}$/);
+    if (taskMatch) {
+      if (currentTask?.name) {
+        if (outputLines.length > 0) {
+          try {
+            currentTask.output = parseOutputLines(outputLines);
+          } catch {
+            currentTask.output = {};
+          }
+        }
+        tasks.push(currentTask);
+      }
+      currentTask = { name: taskMatch[1], output: {} };
+      inOutput = false;
+      outputLines = [];
+      continue;
+    }
+    if (!currentTask)
+      continue;
+    const idMatch = line.match(/^\s*ID:\s*(.+)$/);
+    const statusMatch = line.match(/^\s*Status:\s*(.+)$/);
+    const createdMatch = line.match(/^\s*Created:\s*(.+)$/);
+    const approvedMatch = line.match(/^\s*Approved:\s*(.+)$/);
+    if (idMatch)
+      currentTask.id = idMatch[1];
+    else if (statusMatch)
+      currentTask.status = statusMatch[1];
+    else if (createdMatch)
+      currentTask.createdAt = createdMatch[1];
+    else if (approvedMatch)
+      currentTask.approvedAt = approvedMatch[1];
+    else if (line.trim() === "Output:")
+      inOutput = true;
+    else if (inOutput && line.trim())
+      outputLines.push(line);
+  }
+  if (currentTask?.name) {
+    if (outputLines.length > 0) {
+      try {
+        currentTask.output = parseOutputLines(outputLines);
+      } catch {
+        currentTask.output = {};
+      }
+    }
+    tasks.push(currentTask);
+  }
+  if (!summaryMatch && tasks.length === 0)
+    return null;
+  const totalTasks = summaryMatch?.[1] ? Number.parseInt(summaryMatch[1], 10) : tasks.length;
+  const showingTasks = summaryMatch?.[2] ? Number.parseInt(summaryMatch[2], 10) : tasks.length;
+  const page = pageMatch?.[1] ? Number.parseInt(pageMatch[1], 10) : 1;
+  const totalPages = pageMatch?.[2] ? Number.parseInt(pageMatch[2], 10) : 1;
+  return { totalTasks, showingTasks, page, totalPages, tasks };
+});
+function parseOutputLines(lines) {
+  try {
+    const output = {};
+    for (const line of lines) {
+      const match = line.match(/^\s+(\w+): (.+)$/);
+      if (match && match[1] && match[2]) {
+        const key = match[1];
+        const value = match[2];
+        try {
+          output[key] = JSON.parse(value);
+        } catch {
+          output[key] = value;
+        }
+      }
+    }
+    return output;
+  } catch {
+    return {};
+  }
+}
+function formatDateTime(dateStr) {
+  try {
+    return new Date(dateStr).toLocaleDateString("pt-BR", {
+      day: "2-digit",
+      month: "short",
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  } catch {
+    return dateStr;
+  }
+}
+function getStatusColor(status) {
+  switch (status.toLowerCase()) {
+    case "approved":
+    case "completed":
+      return "bg-emerald-100 text-emerald-700";
+    case "validating":
+    case "pending":
+      return "bg-amber-100 text-amber-700";
+    case "failed":
+    case "rejected":
+      return "bg-red-100 text-red-700";
+    default:
+      return "bg-gray-100 text-gray-700";
+  }
+}
+function getStatusLabel(status) {
+  const labels = {
+    approved: "Aprovado",
+    completed: "Conclu\xEDdo",
+    validating: "Validando",
+    pending: "Pendente",
+    failed: "Falhou",
+    rejected: "Rejeitado"
+  };
+  return labels[status.toLowerCase()] || status;
+}
+const isLaunchMessage = computed(() => {
+  if (!props.toolResult?.output)
+    return true;
+  const output = props.toolResult.output.trim();
+  const isLaunching = output.startsWith("Launching skill:");
+  const hasResults = output.includes("Found") || output.includes("Task:") || output.includes("Status:");
+  return isLaunching && !hasResults;
+});
+const statusVariant = computed(() => {
+  if (!props.toolResult) {
+    return "executing";
+  }
+  if (props.toolResult.isError) {
+    return "error";
+  }
+  if (isLaunchMessage.value) {
+    return "executing";
+  }
+  return "completed";
+});
+const statusLabel = computed(() => {
+  if (props.toolResult && !props.toolResult.isError && parsedResult.value) {
+    return `${parsedResult.value.totalTasks} ${parsedResult.value.totalTasks === 1 ? "tarefa" : "tarefas"}`;
+  }
+  return void 0;
+});
+const expanded = ref(false);
+const selectedTask = ref(null);
+const canExpand = computed(() => {
+  if (!props.toolResult)
+    return false;
+  if (isLaunchMessage.value)
+    return false;
+  return true;
+});
+const workstationId = computed(() => {
+  if (queryParams.value?.workstationId) {
+    return queryParams.value.workstationId;
+  }
+  if (props.toolResult?.output) {
+    const match = props.toolResult.output.match(/Querying workstation: ([a-f0-9-]{36})/i);
+    if (match)
+      return match[1];
+  }
+  return null;
+});
+const displayName = computed(() => {
+  const id = workstationId.value;
+  if (!id) {
+    if (knowledgeSources.value.length === 1 && knowledgeSources.value[0]) {
+      return knowledgeSources.value[0].name;
+    }
+    return "Workstation";
+  }
+  const name = getWorkstationName(id);
+  if (name)
+    return name;
+  return `Workstation ${id.slice(0, 8)}...`;
+});
+</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">
+                    Consulta de Dados
+                </h3>
+                <p v-if="displayName !== 'Workstation'" class="text-12px text-secondary truncate mt-2px">
+                    {{ displayName }}
+                </p>
+            </div>
+            <TelaStatus
+                :variant="statusVariant"
+                :label="statusLabel"
+                :is-icon-animated="!toolResult"
+            />
+        </div>
+
+        <!-- Filters preview (when collapsed) -->
+        <div
+            v-if="!expanded && canExpand && (formattedFilters || formattedOutputQuery)"
+            class="px-24px pb-12px"
+        >
+            <div class="flex flex-wrap items-center gap-6px">
+                <template v-if="formattedFilters">
+                    <span
+                        v-for="filter in formattedFilters.slice(0, 3)"
+                        :key="filter"
+                        class="text-11px px-8px py-3px rounded-6px bg-gray-100 text-gray-600"
+                    >
+                        {{ filter }}
+                    </span>
+                </template>
+                <template v-if="formattedOutputQuery">
+                    <span
+                        v-for="query in formattedOutputQuery.slice(0, 3)"
+                        :key="query"
+                        class="text-11px px-8px py-3px rounded-6px bg-blue-100 text-blue-700"
+                    >
+                        {{ query }}
+                    </span>
+                </template>
+                <span
+                    v-if="(formattedFilters?.length || 0) + (formattedOutputQuery?.length || 0) > 3"
+                    class="text-11px text-gray-400"
+                >
+                    +{{ (formattedFilters?.length || 0) + (formattedOutputQuery?.length || 0) - 3 }} mais
+                </span>
+            </div>
+        </div>
+
+        <!-- Launch message (when only have launching output) -->
+        <div v-if="toolResult && isLaunchMessage" class="px-24px pb-16px">
+            <div class="bg-blue-50 rounded-xl border-0.5px border-blue-200 px-16px py-12px">
+                <div class="flex items-center gap-8px">
+                    <div class="i-ph-clock text-16px text-blue-600 animate-pulse" />
+                    <p class="text-13px text-blue-700 m-0">
+                        Aguardando resultados da consulta...
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Expand/Collapse button -->
+        <div v-if="toolResult && !isLaunchMessage" class="px-24px pb-12px">
+            <button
+                type="button"
+                class="w-full flex items-center justify-center gap-6px px-12px py-8px text-13px font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-8px transition-colors"
+                @click="expanded = !expanded"
+            >
+                <span>{{ expanded ? "Ocultar detalhes" : "Ver detalhes" }}</span>
+                <div
+                    class="i-ph-caret-down text-12px transition-transform"
+                    :class="expanded && 'rotate-180'"
+                />
+            </button>
+        </div>
+
+        <!-- Expanded content -->
+        <div v-if="expanded && toolResult && !isLaunchMessage" class="px-24px pb-24px space-y-16px">
+            <!-- Filters section -->
+            <div v-if="formattedFilters || formattedOutputQuery">
+                <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
+                    Filtros aplicados
+                </div>
+                <div class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2">
+                    <div class="flex flex-wrap gap-6px">
+                        <span
+                            v-for="filter in formattedFilters"
+                            :key="filter"
+                            class="text-12px px-8px py-3px rounded-6px bg-gray-100 text-gray-700"
+                        >
+                            {{ filter }}
+                        </span>
+                        <span
+                            v-for="query in formattedOutputQuery"
+                            :key="query"
+                            class="text-12px px-8px py-3px rounded-6px bg-blue-100 text-blue-700"
+                        >
+                            {{ query }}
+                        </span>
+                        <span
+                            v-if="!formattedFilters && !formattedOutputQuery"
+                            class="text-12px text-gray-400 italic"
+                        >
+                            Nenhum filtro aplicado
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Error display -->
+            <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>
+
+            <!-- Results section -->
+            <div v-else-if="parsedResult">
+                <div class="flex items-center justify-between mb-2">
+                    <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700">
+                        Resultados
+                    </div>
+                    <div class="text-12px text-gray-500">
+                        Mostrando {{ parsedResult.showingTasks }} de {{ parsedResult.totalTasks }}
+                        <span v-if="parsedResult.totalPages > 1">
+                            (página {{ parsedResult.page }}/{{ parsedResult.totalPages }})
+                        </span>
+                    </div>
+                </div>
+
+                <!-- Tasks list -->
+                <div class="bg-white rounded-xl border-0.5px border-gray-200 overflow-hidden">
+                    <div v-if="parsedResult.tasks.length > 0" class="divide-y divide-gray-100 max-h-400px overflow-y-auto">
+                        <div
+                            v-for="task in parsedResult.tasks"
+                            :key="task.id"
+                            class="p-12px cursor-pointer hover:bg-gray-50 transition-colors"
+                            :class="selectedTask?.id === task.id && 'bg-blue-50'"
+                            @click="selectedTask = selectedTask?.id === task.id ? null : task"
+                        >
+                            <div class="flex items-start justify-between gap-8px">
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex items-center gap-8px mb-4px">
+                                        <span
+                                            class="text-10px font-medium px-6px py-2px rounded-4px"
+                                            :class="getStatusColor(task.status)"
+                                        >
+                                            {{ getStatusLabel(task.status) }}
+                                        </span>
+                                        <span class="text-11px text-gray-400">
+                                            {{ formatDateTime(task.createdAt) }}
+                                        </span>
+                                    </div>
+                                    <h4 class="text-14px font-medium text-gray-900 truncate">
+                                        {{ task.name }}
+                                    </h4>
+                                </div>
+                                <div
+                                    class="i-ph-caret-down text-14px text-gray-400 transition-transform flex-shrink-0"
+                                    :class="selectedTask?.id === task.id && 'rotate-180'"
+                                />
+                            </div>
+
+                            <!-- Expanded task details -->
+                            <div
+                                v-if="selectedTask?.id === task.id && Object.keys(task.output).length > 0"
+                                class="mt-10px pt-10px border-t border-gray-200"
+                            >
+                                <div class="text-11px font-medium text-gray-500 uppercase tracking-wide mb-6px">
+                                    Dados extraídos
+                                </div>
+                                <div class="grid gap-4px">
+                                    <div
+                                        v-for="(value, key) in task.output"
+                                        :key="key"
+                                        class="flex items-start gap-8px text-12px"
+                                    >
+                                        <span class="font-medium text-gray-600 min-w-80px">{{ key }}:</span>
+                                        <span class="text-gray-800 break-words">
+                                            {{ typeof value === "object" ? JSON.stringify(value) : value }}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- No results message -->
+                    <div v-else class="text-center py-32px px-16px">
+                        <div class="i-ph-magnifying-glass text-40px text-gray-300 mx-auto mb-8px" />
+                        <p class="text-14px text-gray-500">
+                            Nenhuma tarefa encontrada com os filtros aplicados
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Raw output fallback (hide for launch messages) -->
+            <div v-else-if="toolResult && !isLaunchMessage">
+                <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
+                    Resultado
+                </div>
+                <div class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2">
+                    <pre class="text-14px text-primary whitespace-pre-wrap break-words m-0">{{ toolResult.output }}</pre>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

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

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