@meistrari/chat-nuxt 1.13.0 → 2.0.0

package/dist/runtime/messages/components/chat-context-config.vue

@@ -0,0 +1,425 @@
+<script setup>
+import { useFileUpload } from "../../files/composables/file-upload";
+import { useTela } from "../../shared/composables/tela";
+import { MAX_FILES, MAX_FILE_SIZE } from "../../workspace/composables/workspace-context-files";
+import { formatFileSize } from "../../files/formatting";
+const props = defineProps({
+  systemMessage: { type: [String, null], required: true },
+  contextFiles: { type: [Array, null], required: true },
+  canvasTools: { type: [Array, null], required: true },
+  knowledgeSources: { type: [Array, null], required: true },
+  hasMessages: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:systemMessage", "update:contextFiles", "update:canvasTools", "update:knowledgeSources", "clearThread", "saved"]);
+const { uploadFiles, uploading } = useFileUpload();
+const { canvas, workstations } = useTela();
+const localSystemMessage = ref(props.systemMessage ?? "");
+const fileInputRef = ref(null);
+const pendingFiles = ref([]);
+const pendingCanvasTools = ref(null);
+const pendingKnowledgeSources = ref(null);
+const isSaving = ref(false);
+const isCanvasModalOpen = ref(false);
+const isWorkstationModalOpen = ref(false);
+const showClearThreadDialog = ref(false);
+const hasCanvasChanges = computed(() => {
+  if (pendingCanvasTools.value === null)
+    return false;
+  const currentIds = new Set(props.canvasTools?.map((t) => t.canvasId) ?? []);
+  const pendingIds = new Set(pendingCanvasTools.value.map((t) => t.canvasId));
+  if (currentIds.size !== pendingIds.size)
+    return true;
+  for (const id of currentIds) {
+    if (!pendingIds.has(id))
+      return true;
+    const currentTool = props.canvasTools?.find((t) => t.canvasId === id);
+    const pendingTool = pendingCanvasTools.value.find((t) => t.canvasId === id);
+    if (currentTool?.description !== pendingTool?.description)
+      return true;
+  }
+  return false;
+});
+const hasKnowledgeSourcesChanges = computed(() => {
+  if (pendingKnowledgeSources.value === null)
+    return false;
+  const currentIds = new Set(props.knowledgeSources?.map((s) => s.id) ?? []);
+  const pendingIds = new Set(pendingKnowledgeSources.value.map((s) => s.id));
+  if (currentIds.size !== pendingIds.size)
+    return true;
+  for (const id of currentIds) {
+    if (!pendingIds.has(id))
+      return true;
+  }
+  return false;
+});
+const hasSystemMessageChanges = computed(
+  () => localSystemMessage.value !== (props.systemMessage ?? "")
+);
+const hasContextFilesChanges = computed(
+  () => pendingFiles.value.length > 0
+);
+const hasChanges = computed(
+  () => hasSystemMessageChanges.value || hasContextFilesChanges.value || hasCanvasChanges.value || hasKnowledgeSourcesChanges.value
+);
+const hasThreadBreakingChanges = computed(
+  () => hasSystemMessageChanges.value || hasContextFilesChanges.value
+);
+const displayCanvasTools = computed(
+  () => pendingCanvasTools.value !== null ? pendingCanvasTools.value : props.canvasTools
+);
+const displayKnowledgeSources = computed(
+  () => pendingKnowledgeSources.value !== null ? pendingKnowledgeSources.value : props.knowledgeSources
+);
+const currentFileCount = computed(
+  () => (props.contextFiles?.length ?? 0) + pendingFiles.value.length
+);
+watch(() => props.systemMessage, (newValue) => {
+  localSystemMessage.value = newValue ?? "";
+});
+function addFiles(files) {
+  const validFiles = files.filter((file) => file.size <= MAX_FILE_SIZE);
+  const availableSlots = MAX_FILES - currentFileCount.value;
+  pendingFiles.value = [...pendingFiles.value, ...validFiles.slice(0, availableSlots)];
+}
+defineExpose({ addFiles });
+function openFileDialog() {
+  fileInputRef.value?.click();
+}
+function handleFileSelect(event) {
+  const target = event.target;
+  if (!target.files)
+    return;
+  const newFiles = Array.from(target.files).filter((file) => {
+    if (file.size > MAX_FILE_SIZE) {
+      return false;
+    }
+    return true;
+  });
+  const availableSlots = MAX_FILES - currentFileCount.value;
+  pendingFiles.value = [...pendingFiles.value, ...newFiles.slice(0, availableSlots)];
+  target.value = "";
+}
+function removePendingFile(index) {
+  pendingFiles.value = pendingFiles.value.filter((_, i) => i !== index);
+}
+function removeContextFile(index) {
+  const newFiles = [...props.contextFiles ?? []];
+  newFiles.splice(index, 1);
+  emit("update:contextFiles", newFiles);
+}
+function removeCanvasTool(canvasId) {
+  const currentTools = pendingCanvasTools.value ?? props.canvasTools ?? [];
+  pendingCanvasTools.value = currentTools.filter((t) => t.canvasId !== canvasId);
+}
+function handleCanvasSave(tools) {
+  pendingCanvasTools.value = tools;
+}
+function removeKnowledgeSource(sourceId) {
+  const currentSources = pendingKnowledgeSources.value ?? props.knowledgeSources ?? [];
+  pendingKnowledgeSources.value = currentSources.filter((s) => s.id !== sourceId);
+}
+function handleKnowledgeSourcesSave(sources) {
+  pendingKnowledgeSources.value = sources;
+}
+function handleSave() {
+  if (!hasChanges.value || isSaving.value)
+    return;
+  if (props.hasMessages && hasThreadBreakingChanges.value) {
+    showClearThreadDialog.value = true;
+    return;
+  }
+  performSave();
+}
+async function performSave(clearThread = false) {
+  isSaving.value = true;
+  try {
+    if (clearThread) {
+      emit("clearThread");
+    }
+    if (hasSystemMessageChanges.value) {
+      emit("update:systemMessage", localSystemMessage.value);
+    }
+    if (hasContextFilesChanges.value) {
+      const uploadedFiles = await uploadFiles(pendingFiles.value);
+      const newContextFiles = [
+        ...props.contextFiles ?? [],
+        ...uploadedFiles.map((f) => ({ url: f.url, vaultReference: f.vaultReference, name: f.name, mimeType: f.mimeType }))
+      ];
+      emit("update:contextFiles", newContextFiles);
+      pendingFiles.value = [];
+    }
+    if (hasCanvasChanges.value && pendingCanvasTools.value !== null) {
+      emit("update:canvasTools", pendingCanvasTools.value);
+      pendingCanvasTools.value = null;
+    }
+    if (hasKnowledgeSourcesChanges.value && pendingKnowledgeSources.value !== null) {
+      emit("update:knowledgeSources", pendingKnowledgeSources.value);
+      pendingKnowledgeSources.value = null;
+    }
+    emit("saved");
+  } finally {
+    isSaving.value = false;
+    showClearThreadDialog.value = false;
+  }
+}
+function handleConfirmClearThread() {
+  performSave(true);
+}
+function handleCancelClearThread() {
+  showClearThreadDialog.value = false;
+}
+</script>
+
+<template>
+    <div class="h-full flex flex-col">
+        <div class="flex-1 overflow-auto px-24px py-20px">
+            <div class="max-w-640px mx-auto flex flex-col gap-24px">
+                <!-- System Message -->
+                <div flex="~ col" gap-8px>
+                    <label text-13px font-semibold text-gray-700>
+                        Instrução inicial (System Message)
+                    </label>
+                    <textarea
+                        v-model="localSystemMessage"
+                        placeholder="Ex: Você é um assistente especializado em..."
+                        rows="8"
+                        w-full px-14px py-12px rounded-12px b="1px gray-200" text-14px
+                        bg-white leading-relaxed
+                        focus:outline-none focus:b-blue-400 focus:ring-2 focus:ring-blue-100
+                        :disabled="disabled"
+                    />
+                    <p text-12px text-gray-400>
+                        Esta instrução será aplicada a todas as mensagens da conversa
+                    </p>
+                </div>
+
+                <!-- Context Files -->
+                <div flex="~ col" gap-8px>
+                    <label text-13px font-semibold text-gray-700>
+                        Arquivos de contexto
+                    </label>
+
+                    <input ref="fileInputRef" type="file" multiple hidden @change="handleFileSelect">
+
+                    <div v-if="contextFiles && contextFiles.length > 0 || pendingFiles.length > 0" flex flex-wrap gap-8px mb-4px>
+                        <div
+                            v-for="(file, index) in contextFiles" :key="`existing-${file.url}`" flex items-center gap-8px
+                            px-12px py-8px rounded-8px bg-gray-50 b="1px gray-200"
+                        >
+                            <div i-ph-file text-gray-500 text-16px />
+                            <span text-13px text-gray-700 max-w-160px truncate>{{ file.name }}</span>
+                            <button
+                                p-4px rounded-6px hover:bg-gray-200 transition cursor-pointer :disabled="disabled"
+                                @click="removeContextFile(index)"
+                            >
+                                <div i-ph-x text-gray-400 text-12px />
+                            </button>
+                        </div>
+
+                        <div
+                            v-for="(file, index) in pendingFiles" :key="`pending-${file.name}${index}`" flex items-center
+                            gap-8px px-12px py-8px rounded-8px bg-blue-50 b="1px blue-200"
+                        >
+                            <div i-ph-file text-blue-500 text-16px />
+                            <div flex="~ col" gap-1px>
+                                <span text-13px text-blue-700 max-w-140px truncate>{{ file.name }}</span>
+                                <span text-11px text-blue-500>{{ formatFileSize(file.size) }}</span>
+                            </div>
+                            <button p-4px rounded-6px hover:bg-blue-100 transition cursor-pointer @click="removePendingFile(index)">
+                                <div i-ph-x text-blue-400 text-12px />
+                            </button>
+                        </div>
+                    </div>
+
+                    <button
+                        flex items-center gap-8px px-14px py-10px rounded-10px b="1px dashed gray-300" text-14px
+                        text-gray-500 hover:bg-gray-50 hover:b-gray-400 transition cursor-pointer
+                        :disabled="disabled || currentFileCount >= MAX_FILES"
+                        :class="{ 'opacity-50 cursor-not-allowed': currentFileCount >= MAX_FILES }" @click="openFileDialog"
+                    >
+                        <div i-ph-plus text-16px />
+                        <span>Adicionar arquivo</span>
+                    </button>
+                    <p text-12px text-gray-400>
+                        Estes arquivos serão incluídos como contexto em todas as mensagens
+                    </p>
+                </div>
+
+                <!-- Knowledge Sources -->
+                <div flex="~ col" gap-8px>
+                    <label text-13px font-semibold text-gray-700>
+                        Fontes de Conhecimento
+                    </label>
+
+                    <!-- Selected Knowledge Sources Pills -->
+                    <div v-if="displayKnowledgeSources && displayKnowledgeSources.length > 0" flex flex-wrap gap-8px mb-4px>
+                        <div
+                            v-for="source in displayKnowledgeSources" :key="source.id"
+                            flex items-center gap-8px px-12px py-8px rounded-8px
+                            :class="hasKnowledgeSourcesChanges ? 'bg-emerald-50 b-1px b-emerald-200' : 'bg-gray-50 b-1px b-gray-200'"
+                        >
+                            <div i-ph-database text-16px :class="hasKnowledgeSourcesChanges ? 'text-emerald-500' : 'text-gray-500'" />
+                            <div flex="~ col" gap-1px>
+                                <span text-13px max-w-160px truncate :class="hasKnowledgeSourcesChanges ? 'text-emerald-700' : 'text-gray-700'">
+                                    {{ workstations.find((w) => w.id === source.id)?.name ?? source.name }}
+                                </span>
+                                <span v-if="source.taskCount" text-11px :class="hasKnowledgeSourcesChanges ? 'text-emerald-500' : 'text-gray-400'">
+                                    {{ source.taskCount }} tarefas
+                                </span>
+                            </div>
+                            <button
+                                p-4px rounded-6px transition cursor-pointer
+                                :class="hasKnowledgeSourcesChanges ? 'hover:bg-emerald-100' : 'hover:bg-gray-200'"
+                                :disabled="disabled"
+                                @click="removeKnowledgeSource(source.id)"
+                            >
+                                <div i-ph-x text-12px :class="hasKnowledgeSourcesChanges ? 'text-emerald-400' : 'text-gray-400'" />
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Add Knowledge Source Button -->
+                    <button
+                        flex items-center gap-8px px-14px py-10px rounded-10px b="1px dashed gray-300" text-14px
+                        text-gray-500 hover:bg-gray-50 hover:b-gray-400 transition cursor-pointer
+                        :disabled="disabled"
+                        @click="isWorkstationModalOpen = true"
+                    >
+                        <div i-ph-database text-16px />
+                        <span>{{ displayKnowledgeSources && displayKnowledgeSources.length > 0 ? "Editar fontes" : "Adicionar fonte" }}</span>
+                    </button>
+
+                    <p text-12px text-gray-400>
+                        Workstations do Tela com dados extraídos para consulta pelo assistente
+                    </p>
+                </div>
+
+                <!-- Tela Canvas Tools -->
+                <div flex="~ col" gap-8px>
+                    <label text-13px font-semibold text-gray-700>
+                        Tela Canvas / Workflows
+                    </label>
+
+                    <!-- Selected Canvas Pills -->
+                    <div v-if="displayCanvasTools && displayCanvasTools.length > 0" flex flex-wrap gap-8px mb-4px>
+                        <div
+                            v-for="tool in displayCanvasTools" :key="tool.canvasId"
+                            flex items-center gap-8px px-12px py-8px rounded-8px
+                            :class="hasCanvasChanges ? 'bg-blue-50 b-1px b-blue-200' : 'bg-gray-50 b-1px b-gray-200'"
+                        >
+                            <div i-ph-puzzle-piece text-16px :class="hasCanvasChanges ? 'text-blue-500' : 'text-gray-500'" />
+                            <span text-13px max-w-160px truncate :class="hasCanvasChanges ? 'text-blue-700' : 'text-gray-700'">
+                                {{ canvas.find((c) => c.id === tool.canvasId)?.title ?? tool.name }}
+                            </span>
+                            <button
+                                p-4px rounded-6px transition cursor-pointer
+                                :class="hasCanvasChanges ? 'hover:bg-blue-100' : 'hover:bg-gray-200'"
+                                :disabled="disabled"
+                                @click="removeCanvasTool(tool.canvasId)"
+                            >
+                                <div i-ph-x text-12px :class="hasCanvasChanges ? 'text-blue-400' : 'text-gray-400'" />
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Add Canvas Button -->
+                    <button
+                        flex items-center gap-8px px-14px py-10px rounded-10px b="1px dashed gray-300" text-14px
+                        text-gray-500 hover:bg-gray-50 hover:b-gray-400 transition cursor-pointer
+                        :disabled="disabled"
+                        @click="isCanvasModalOpen = true"
+                    >
+                        <div i-ph-puzzle-piece text-16px />
+                        <span>{{ displayCanvasTools && displayCanvasTools.length > 0 ? "Editar canvas" : "Adicionar canvas" }}</span>
+                    </button>
+
+                    <p text-12px text-gray-400>
+                        Canvas e workflows do Tela disponíveis como ferramentas para o assistente
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Fixed Save Bar -->
+        <div
+            v-if="hasChanges"
+            class="flex-shrink-0 px-24px py-16px border-t border-gray-200 bg-white"
+        >
+            <div class="max-w-640px mx-auto flex justify-end">
+                <TelaButton :disabled="isSaving || uploading" @click="handleSave">
+                    <div v-if="isSaving || uploading" i-ph-spinner animate-spin mr-6px />
+                    {{ isSaving || uploading ? "Salvando..." : "Salvar altera\xE7\xF5es" }}
+                </TelaButton>
+            </div>
+        </div>
+
+        <!-- Canvas Selector Modal -->
+        <ChatCanvasSelectorModal
+            :open="isCanvasModalOpen"
+            :canvas-tools="displayCanvasTools"
+            @close="isCanvasModalOpen = false"
+            @save="handleCanvasSave"
+        />
+
+        <!-- Workstation Selector Modal -->
+        <ChatWorkstationSelectorModal
+            :open="isWorkstationModalOpen"
+            :knowledge-sources="displayKnowledgeSources"
+            @close="isWorkstationModalOpen = false"
+            @save="handleKnowledgeSourcesSave"
+        />
+
+        <!-- Clear Thread Confirmation Dialog -->
+        <Teleport to="body">
+            <div
+                v-if="showClearThreadDialog"
+                fixed inset-0 z-50 flex items-center justify-center
+                @click.self="handleCancelClearThread"
+            >
+                <div absolute inset-0 bg-black op-40 />
+                <div
+                    relative w-full max-w-400px mx-16px
+                    bg-white rounded-16px shadow-xl
+                    p-24px
+                >
+                    <div flex items-start gap-16px>
+                        <div
+                            w-40px h-40px rounded-full
+                            bg-amber-100 flex items-center justify-center
+                            flex-shrink-0
+                        >
+                            <div i-ph-warning text-20px text-amber-600 />
+                        </div>
+                        <div flex="~ col" gap-8px flex-1>
+                            <h3 text-16px font-semibold text-gray-900>
+                                Limpar histórico da conversa?
+                            </h3>
+                            <p text-14px text-gray-600 leading-relaxed>
+                                Alterar a instrução inicial ou os arquivos de contexto requer iniciar uma nova conversa.
+                                O histórico atual será apagado permanentemente.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div flex justify-end gap-12px mt-24px>
+                        <TelaButton
+                            variant="ghost"
+                            @click="handleCancelClearThread"
+                        >
+                            Cancelar
+                        </TelaButton>
+                        <TelaButton
+                            variant="danger"
+                            :disabled="isSaving"
+                            @click="handleConfirmClearThread"
+                        >
+                            <div v-if="isSaving" i-ph-spinner animate-spin mr-6px />
+                            {{ isSaving ? "Salvando..." : "Limpar e salvar" }}
+                        </TelaButton>
+                    </div>
+                </div>
+            </div>
+        </Teleport>
+    </div>
+</template>

package/dist/runtime/messages/components/chat-context-config.vue.d.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;

package/dist/runtime/messages/components/chat-mention-dropdown.d.vue.ts

@@ -0,0 +1,14 @@
+import type { MentionItem } from '../../types/schemas/chat/ui.js';
+type __VLS_Props = {
+    items: MentionItem[];
+    highlightedIndex: number;
+    trigger: '@' | '/';
+    query: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (item: MentionItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: MentionItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/messages/components/chat-mention-dropdown.vue.d.ts

@@ -0,0 +1,14 @@
+import type { MentionItem } from '../../types/schemas/chat/ui.js';
+type __VLS_Props = {
+    items: MentionItem[];
+    highlightedIndex: number;
+    trigger: '@' | '/';
+    query: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (item: MentionItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: MentionItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/messages/components/chat-message-bubble.d.vue.ts

@@ -0,0 +1,11 @@
+import type { Message } from '../../types/schemas/chat/conversations.js';
+type __VLS_Props = {
+    message: Message;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    retry: (messageId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRetry?: ((messageId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;