@meistrari/chat-nuxt 1.1.2 → 1.2.0

package/dist/runtime/embed/components/ChatConfigurationModal.vue

@@ -0,0 +1,373 @@
+<script setup>
+import { useMagicKeys } from "@vueuse/core";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  settings: { type: null, required: false },
+  initialTab: { type: String, required: false, default: "personalization" },
+  saving: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["update:open", "save"]);
+const { uploadFiles, uploading } = useFileUpload();
+const { canvas, projects, workstations, loadingWorkstations } = useTela();
+const { setKnowledgeSources } = useKnowledgeSources();
+const statusToast = useStatusToast();
+const { escape } = useMagicKeys();
+const {
+  settings: workspaceSettings,
+  loading: workspaceSettingsLoading,
+  fetchSettings,
+  updateSettings
+} = useWorkspaceSettings();
+const searchQuery = ref("");
+const activeTab = ref(props.initialTab);
+const showDiscardConfirm = ref(false);
+const loadingInitialSettings = ref(false);
+const hasSettingsOverride = computed(() => props.settings !== void 0);
+const mutableSettings = computed(() => hasSettingsOverride.value ? props.settings : workspaceSettings.value);
+const currentSystemMessage = computed(() => mutableSettings.value?.systemMessage ?? null);
+const currentContextFiles = computed(() => mutableSettings.value?.contextFiles ?? null);
+const currentCanvasTools = computed(() => mutableSettings.value?.canvasTools ?? null);
+const currentKnowledgeSources = computed(() => mutableSettings.value?.knowledgeSources ?? null);
+const currentExternalSkills = computed(() => mutableSettings.value?.externalSkills ?? null);
+const personalization = useWorkspacePersonalization(currentSystemMessage);
+const telaTools = useWorkspaceTelaTools(canvas, projects, searchQuery, currentCanvasTools);
+const knowledgeSources = useWorkspaceKnowledgeSources(workstations, canvas, projects, searchQuery, currentKnowledgeSources);
+const contextFiles = useWorkspaceContextFiles(searchQuery, currentContextFiles);
+const externalSkills = useWorkspaceExternalSkills(currentExternalSkills, searchQuery);
+const settingsTabs = [
+  { value: "personalization", label: "Personaliza\xE7\xE3o", icon: "i-ph-sliders" },
+  { value: "context-files", label: "Arquivos de contexto", icon: "i-ph-file-text" },
+  { value: "knowledge-sources", label: "Tela workstations", icon: "i-ph-database" },
+  { value: "tela-tools", label: "Skills Tela", icon: "i-ph-puzzle-piece" },
+  { value: "external-skills", label: "Skills Externas", icon: "i-ph-wrench" },
+  { value: "credentials", label: "Credenciais", icon: "i-ph-password-bold" }
+];
+const hasChanges = computed(
+  () => personalization.hasChanges.value || contextFiles.hasChanges.value || telaTools.hasChanges.value || knowledgeSources.hasChanges.value || externalSkills.hasChanges.value
+);
+const isBusy = computed(() => props.saving || uploading.value || !hasSettingsOverride.value && workspaceSettingsLoading.value);
+const gitHubButtonText = computed(() => externalSkills.getGitHubButtonText());
+watch(() => escape?.value, (pressed) => {
+  if (pressed && props.open && !showDiscardConfirm.value)
+    handleClose();
+});
+watch(() => props.open, (isOpen) => {
+  if (isOpen) {
+    searchQuery.value = "";
+    activateTab(props.initialTab);
+    if (!hasSettingsOverride.value && !mutableSettings.value) {
+      void loadSettings();
+      return;
+    }
+    initializeConfigurationState();
+  } else {
+    loadingInitialSettings.value = false;
+  }
+});
+watch(() => props.initialTab, (tab) => {
+  if (props.open)
+    activateTab(tab);
+});
+watch(currentSystemMessage, () => {
+  if (props.open)
+    personalization.initialize();
+});
+watch(mutableSettings, (settings, previousSettings) => {
+  if (props.open && hasSettingsOverride.value && settings && !previousSettings)
+    initializeConfigurationState();
+});
+function initializeConfigurationState() {
+  personalization.initialize();
+  telaTools.initialize();
+  knowledgeSources.initialize();
+  contextFiles.initialize();
+  externalSkills.initialize();
+}
+function activateTab(tab) {
+  activeTab.value = tab;
+  searchQuery.value = "";
+  if (tab === "external-skills")
+    void externalSkills.fetchGitHubConnection();
+}
+async function loadSettings() {
+  loadingInitialSettings.value = true;
+  try {
+    await fetchSettings();
+    initializeConfigurationState();
+  } catch (error) {
+    console.error("Failed to load workspace settings:", error);
+    statusToast.update({
+      text: "Erro ao carregar configura\xE7\xF5es",
+      icon: "i-ph-warning"
+    });
+  } finally {
+    loadingInitialSettings.value = false;
+  }
+}
+async function handleSave() {
+  if (!hasChanges.value || isBusy.value)
+    return;
+  try {
+    const updates = {};
+    if (personalization.hasChanges.value)
+      updates.systemMessage = personalization.getSystemMessage();
+    if (contextFiles.hasChanges.value) {
+      const pendingFilesList = contextFiles.getPendingFiles();
+      const uploadedFiles = pendingFilesList.length > 0 ? await uploadFiles(pendingFilesList) : [];
+      const newContextFiles = [
+        ...contextFiles.getKeptContextFiles(),
+        ...uploadedFiles.map((f) => ({ url: f.url, name: f.name, mimeType: f.mimeType }))
+      ];
+      updates.contextFiles = newContextFiles.length > 0 ? newContextFiles : null;
+    }
+    if (telaTools.hasChanges.value) {
+      const tools = telaTools.buildCanvasTools();
+      updates.canvasTools = tools.length > 0 ? tools : null;
+    }
+    let pendingKnowledgeSources = null;
+    if (knowledgeSources.hasChanges.value) {
+      const sources = knowledgeSources.buildKnowledgeSources();
+      updates.knowledgeSources = sources.length > 0 ? sources : null;
+      pendingKnowledgeSources = sources.length > 0 ? sources : null;
+    }
+    if (externalSkills.hasChanges.value)
+      updates.externalSkills = externalSkills.buildExternalSkills();
+    const shouldUpdateKnowledgeSources = pendingKnowledgeSources !== null || knowledgeSources.hasChanges.value;
+    const shouldClearContextFiles = contextFiles.hasChanges.value;
+    const shouldResetExternalSkills = externalSkills.hasChanges.value;
+    const onSaved = () => {
+      if (shouldUpdateKnowledgeSources)
+        setKnowledgeSources(pendingKnowledgeSources);
+      if (shouldClearContextFiles)
+        contextFiles.clearPendingFiles();
+      if (shouldResetExternalSkills)
+        externalSkills.initialize();
+    };
+    if (hasSettingsOverride.value) {
+      emit("save", { updates, onSaved });
+      return;
+    }
+    await updateSettings(updates);
+    onSaved();
+    statusToast.update({
+      text: "Configura\xE7\xF5es salvas",
+      icon: "i-ph-check"
+    });
+    emit("update:open", false);
+  } catch (error) {
+    console.error("Failed to prepare settings update:", error);
+    statusToast.update({
+      text: "Erro ao salvar configura\xE7\xF5es",
+      icon: "i-ph-warning"
+    });
+  }
+}
+function handleClose() {
+  if (isBusy.value)
+    return;
+  if (hasChanges.value)
+    showDiscardConfirm.value = true;
+  else
+    emit("update:open", false);
+}
+function confirmDiscard() {
+  showDiscardConfirm.value = false;
+  emit("update:open", false);
+}
+function cancelDiscard() {
+  showDiscardConfirm.value = false;
+}
+</script>
+
+<template>
+    <TelaModal
+        :model-value="open"
+        modal-width="lg"
+        compact
+        hide-dividers
+        hide-header
+        class="!w-[min(1024px,95vw)] !max-w-[min(1024px,95vw)] p-0!"
+        @update:model-value="handleClose"
+    >
+        <div flex class="h-[min(722px,90vh)]" w-full>
+            <div w-256px bg-neutral-100 flex="~ col" overflow-hidden rounded-l-16px relative>
+                <p text-12px text-secondary px-16px pt-16px leading-16px style="color: #767E88;">
+                    Configurações do Workspace
+                </p>
+
+                <div flex="~ col" gap-1px px-6px mt-24px>
+                    <button
+                        v-for="tab in settingsTabs"
+                        :key="tab.value"
+                        flex items-center gap-12px
+                        px-12px py-7px
+                        rounded-8px
+                        cursor-pointer
+                        transition
+                        text-left
+                        w-full
+                        :class="[
+  activeTab === tab.value ? 'bg-black/4' : 'hover:bg-black/2'
+]"
+                        @click="activateTab(tab.value)"
+                    >
+                        <div
+                            :class="tab.icon"
+                            text-16px
+                            :style="{ color: '#6B7280' }"
+                        />
+                        <span
+                            text-14px
+                            tracking="-.15px"
+                            leading-18px
+                            font-460
+                            :class="[
+  activeTab === tab.value ? 'text-primary' : 'text-secondary'
+]"
+                        >
+                            {{ tab.label }}
+                        </span>
+                    </button>
+                </div>
+
+                <div flex-1 />
+
+                <div absolute bottom-0 left-0 w-full h-56px bg-gradient-to-t from-neutral-50 to-transparent pointer-events-none />
+                <div px-16px pb-16px relative z-10>
+                    <button
+                        p-6px rounded-full
+                        bg-white b=".5px gray-200"
+                        flex items-center justify-center
+                        cursor-pointer
+                        hover:bg-gray-50
+                        transition
+                    >
+                        <div i-ph-question text-20px style="color: #767E88;" />
+                    </button>
+                </div>
+            </div>
+
+            <div flex-1 flex="~ col" bg-white relative overflow-hidden rounded-r-16px>
+                <button
+                    absolute top-12px right-12px
+                    p-8px rounded-12px
+                    hover:bg-gray-100
+                    transition cursor-pointer
+                    z-10
+                    @click="handleClose"
+                >
+                    <div i-ph-x text-24px text-primary />
+                </button>
+
+                <div flex-1 overflow-auto px-48px pt-32px pb-24px>
+                    <div
+                        v-if="loadingInitialSettings"
+                        h-full min-h-360px flex="~ col" items-center justify-center gap-12px
+                    >
+                        <div i-ph-spinner animate-spin text-24px text-gray-500 />
+                        <p text-14px text-gray-500>
+                            Carregando configurações...
+                        </p>
+                    </div>
+
+                    <ChatConfigurationPersonalizationTab
+                        v-else-if="activeTab === 'personalization'"
+                        v-model:system-message="personalization.localSystemMessage.value"
+                    />
+
+                    <ChatConfigurationContextFilesTab
+                        v-else-if="activeTab === 'context-files'"
+                        :search-query="searchQuery"
+                        :filtered-context-files="contextFiles.filteredContextFiles.value"
+                        :filtered-pending-files="contextFiles.filteredPendingFiles.value"
+                        :current-file-count="contextFiles.currentFileCount.value"
+                        :max-files="contextFiles.maxFiles"
+                        :get-file-type="contextFiles.getFileType"
+                        @update:search-query="searchQuery = $event"
+                        @handle-file-select="contextFiles.handleFileSelect"
+                        @remove-pending-file="contextFiles.removePendingFile"
+                        @remove-context-file="contextFiles.removeContextFile"
+                    />
+
+                    <ChatConfigurationKnowledgeSourcesTab
+                        v-else-if="activeTab === 'knowledge-sources'"
+                        :search-query="searchQuery"
+                        :workstations="workstations"
+                        :loading-workstations="loadingWorkstations"
+                        :filtered-workstations="knowledgeSources.filteredWorkstations.value"
+                        :selected-ids="knowledgeSources.selectedKnowledgeSourceIds.value"
+                        :get-project-name-for-workstation="knowledgeSources.getProjectNameForWorkstation"
+                        @update:search-query="searchQuery = $event"
+                        @toggle="knowledgeSources.toggleKnowledgeSource"
+                    />
+
+                    <ChatConfigurationTelaToolsTab
+                        v-else-if="activeTab === 'tela-tools'"
+                        :search-query="searchQuery"
+                        :canvas="canvas"
+                        :filtered-canvas-tools="telaTools.filteredCanvasTools.value"
+                        :selected-tool-ids="telaTools.selectedToolIds.value"
+                        :all-tools-selected="telaTools.allToolsSelected.value"
+                        :get-project-name="telaTools.getProjectName"
+                        @update:search-query="searchQuery = $event"
+                        @toggle-tool="telaTools.toggleCanvasTool"
+                        @toggle-all="telaTools.toggleAllTools"
+                    />
+
+                    <ChatConfigurationExternalSkillsTab
+                        v-else-if="activeTab === 'external-skills'"
+                        :search-query="searchQuery"
+                        :displayed-skills="externalSkills.displayedSkills.value"
+                        :filtered-skills="externalSkills.filteredSkills.value"
+                        :has-changes="externalSkills.hasChanges.value"
+                        :is-pending="externalSkills.isPending"
+                        :skill-modal-open="externalSkills.skillModalOpen.value"
+                        :skill-ref-input="externalSkills.skillRefInput.value"
+                        :skill-error="externalSkills.skillError.value"
+                        :discovering-skills="externalSkills.discoveringSkills.value"
+                        :git-hub-button-text="gitHubButtonText"
+                        @update:search-query="searchQuery = $event"
+                        @update:skill-modal-open="externalSkills.skillModalOpen.value = $event"
+                        @update:skill-ref-input="externalSkills.skillRefInput.value = $event"
+                        @remove-skill="externalSkills.removeSkill"
+                        @close-skill-modal="externalSkills.closeSkillModal"
+                        @handle-add-skill-and-close="externalSkills.handleAddSkillAndClose"
+                        @connect-git-hub="externalSkills.connectGitHub"
+                    />
+
+                    <ChatConfigurationCredentialsTab
+                        v-else-if="activeTab === 'credentials'"
+                        :search-query="searchQuery"
+                        @update:search-query="searchQuery = $event"
+                    />
+                </div>
+
+                <div flex-shrink-0 px-48px pb-48px flex justify-end gap-12px>
+                    <TelaButton
+                        size="lg"
+                        :disabled="!hasChanges || isBusy"
+                        @click="handleSave"
+                    >
+                        <span v-if="isBusy" flex items-center gap-6px>
+                            <div i-ph-spinner animate-spin />
+                            Salvando...
+                        </span>
+                        <span v-else>Salvar</span>
+                    </TelaButton>
+                </div>
+            </div>
+        </div>
+
+        <TelaConfirmationModal
+            v-model:open="showDiscardConfirm"
+            title="Descartar alterações?"
+            variant="danger"
+            confirm-button-text="Descartar"
+            cancel-button-text="Continuar editando"
+            @confirm="confirmDiscard"
+            @cancel="cancelDiscard"
+        >
+            Você tem alterações não salvas. Deseja descartá-las?
+        </TelaConfirmationModal>
+    </TelaModal>
+</template>

package/dist/runtime/embed/components/ChatConfigurationModal.vue.d.ts

@@ -0,0 +1,25 @@
+import type { DeepReadonly } from 'vue';
+import type { WorkspaceSettings, WorkspaceSettingsUpdate } from '../../composables/useWorkspaceSettings.js';
+export type ChatConfigurationTab = 'personalization' | 'context-files' | 'knowledge-sources' | 'tela-tools' | 'external-skills' | 'credentials';
+export type ChatConfigurationSavePayload = {
+    updates: WorkspaceSettingsUpdate;
+    onSaved: () => void;
+};
+type __VLS_Props = {
+    open: boolean;
+    settings?: DeepReadonly<WorkspaceSettings> | WorkspaceSettings | null;
+    initialTab?: ChatConfigurationTab;
+    saving?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    save: (payload: ChatConfigurationSavePayload) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSave?: ((payload: ChatConfigurationSavePayload) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    initialTab: ChatConfigurationTab;
+    saving: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/embed/components/ChatEmbed.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { provideEmbedConfig, useEmbedConfig } from "../../composables/useEmbedConfig";
 import ChatEmbedInner from "./ChatEmbedInner.vue";
 const props = defineProps({
   workspaceId: { type: String, required: true },
@@ -10,7 +11,17 @@ const props = defineProps({
   features: { type: Object, required: false }
 });
 defineEmits(["update:conversationId"]);
-provideEmbedConfig(props);
+const parentEmbedConfig = useEmbedConfig();
+if (import.meta.dev && parentEmbedConfig) {
+  watchEffect(() => {
+    const parentWorkspaceId = parentEmbedConfig.workspaceId.value.trim();
+    const propWorkspaceId = props.workspaceId.trim();
+    if (parentWorkspaceId && propWorkspaceId && parentWorkspaceId !== propWorkspaceId) {
+      console.warn(`[MeistrariChatEmbed] workspaceId prop (${propWorkspaceId}) differs from parent embed config (${parentWorkspaceId}); using prop value for this embed.`);
+    }
+  });
+}
+provideEmbedConfig(props, { syncGlobal: !parentEmbedConfig });
 </script>
 
 <template>

package/dist/runtime/embed/components/ChatEmbedInner.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { exportConversationToMarkdown } from "../../utils/export-conversation";
+import { conversationListSkeletonRows } from "../../utils/conversation-list-skeleton";
 import {
   normalizeConversationId,
   resolveChatFeatures,
@@ -18,9 +19,9 @@ const embedConfig = useEmbedConfig();
 const { user: authUser } = useTelaApplicationAuth();
 const { getMember } = useWorkspaceMembers();
 const statusToast = useStatusToast();
-const { conversations, fetchConversations, createConversation, deleteConversation, renameConversation, duplicateConversation } = useConversations();
+const { conversations, loading: conversationsLoading, fetchConversations, createConversation, deleteConversation, renameConversation, duplicateConversation, updateConversationInList } = useConversations();
 const { settings: workspaceSettingsState, fetchSettings } = useWorkspaceSettings();
-const effectiveWorkspaceSettings = computed(() => embedConfig?.workspaceSettings.value ?? workspaceSettingsState.value);
+const effectiveWorkspaceSettings = computed(() => embedConfig?.workspaceSettings.value !== void 0 ? embedConfig.workspaceSettings.value : workspaceSettingsState.value);
 const { closePanel: closeFilesPanel } = useConversationFilesPanel();
 const activeConversationId = ref(
   normalizeConversationId(props.conversationId) ?? normalizeConversationId(props.initialConversationId)
@@ -45,6 +46,7 @@ const {
   animatedTitle,
   hasPendingMessage,
   loadConversation,
+  setConversation,
   sendMessage,
   retryMessage,
   cancelConversation,
@@ -200,7 +202,7 @@ const displayTitle = computed(() => {
 });
 watch(
   () => [currentConversation.value?.id ?? null, currentConversation.value?.title ?? null],
-  ([conversationId, conversationTitle], [previousConversationId]) => {
+  ([conversationId, conversationTitle], [previousConversationId, previousTitle]) => {
     if (conversationId !== previousConversationId) {
       optimisticTitle.value = null;
       return;
@@ -208,6 +210,9 @@ watch(
     if (optimisticTitle.value !== null && conversationTitle === optimisticTitle.value) {
       optimisticTitle.value = null;
     }
+    if (conversationTitle && conversationTitle !== previousTitle && currentConversation.value) {
+      updateConversationInList(currentConversation.value);
+    }
   }
 );
 const currentUser = computed(() => props.user ?? authUser.value ?? null);
@@ -218,22 +223,23 @@ const conversationCreator = computed(
   })
 );
 async function handleSend(content, files, model) {
+  let createdConversationId = null;
   if (!activeConversationId.value || !currentConversation.value) {
     const conversation = await createConversation({
       model: model ?? selectedModel.value
     });
     if (!conversation)
       return;
-    updateConversationId(conversation.id);
-    await ensureConversationLoaded(conversation.id);
-    if (!currentConversation.value) {
-      statusToast.update({ text: "Erro ao carregar conversa", icon: "i-ph-warning" });
-      return;
-    }
+    setConversation(conversation);
+    createdConversationId = conversation.id;
   }
   if (!currentConversation.value)
     return;
-  await sendMessage(content, files.length > 0 ? files : void 0, model);
+  const sendPromise = sendMessage(content, files.length > 0 ? files : void 0, model);
+  if (createdConversationId) {
+    updateConversationId(createdConversationId);
+  }
+  await sendPromise;
 }
 async function handleRetry(messageId) {
   await retryMessage(messageId);
@@ -295,8 +301,8 @@ async function handleDuplicate() {
     return;
   const duplicated = await duplicateConversation(currentConversation.value.id);
   if (duplicated) {
+    setConversation(duplicated);
     updateConversationId(duplicated.id);
-    await ensureConversationLoaded(duplicated.id);
   }
 }
 async function handleExport() {
@@ -322,9 +328,6 @@ async function handleDelete() {
     await handleNewConversation();
   }
 }
-onBeforeUnmount(() => {
-  clearConversation();
-});
 </script>
 
 <template>
@@ -351,7 +354,16 @@ onBeforeUnmount(() => {
             </div>
 
             <div flex-1 overflow-y-auto px-4px>
-                <div v-if="visibleConversations.length === 0" p-16px text-center>
+                <div v-if="conversationsLoading && visibleConversations.length === 0" flex="~ col" gap-1px px-8px py-8px>
+                    <div
+                        v-for="row in conversationListSkeletonRows"
+                        :key="row.id"
+                        flex items-center h-32px px-8px rounded-8px
+                    >
+                        <TelaSkeleton rounded-6px bg-neutral-200 :style="{ width: row.width, height: '13px' }" />
+                    </div>
+                </div>
+                <div v-else-if="visibleConversations.length === 0" p-16px text-center>
                     <p text-14px text-neutral-400>
                         Nenhuma conversa ainda
                     </p>
@@ -449,7 +461,10 @@ onBeforeUnmount(() => {
             </template>
 
             <template v-else-if="loading">
-                <div flex-1 pt-64px />
+                <ChatMessageList
+                    :messages="[]"
+                    loading
+                />
                 <ChatMessageInput
                     v-model:model="selectedModel"
                     :disabled="true"

package/dist/runtime/embed/components/configuration/ChatConfigurationContextFilesTab.d.vue.ts

@@ -0,0 +1,22 @@
+import type { ContextFile } from '../../../server/db/schema.js';
+type __VLS_Props = {
+    searchQuery: string;
+    filteredContextFiles: readonly ContextFile[];
+    filteredPendingFiles: readonly File[];
+    currentFileCount: number;
+    maxFiles: number;
+    getFileType: (fileName: string) => string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    handleFileSelect: (event: Event) => any;
+    removeContextFile: (url: string) => any;
+    removePendingFile: (file: File) => any;
+    "update:searchQuery": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onHandleFileSelect?: ((event: Event) => any) | undefined;
+    onRemoveContextFile?: ((url: string) => any) | undefined;
+    onRemovePendingFile?: ((file: File) => any) | undefined;
+    "onUpdate:searchQuery"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;