@meistrari/chat-nuxt 1.1.3 → 1.2.0

package/dist/runtime/composables/usePdf.js

@@ -1,7 +1,17 @@
 import * as Sentry from "@sentry/nuxt";
-import * as pdfjsLib from "pdfjs-dist";
-import { markRaw } from "vue";
-pdfjsLib.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.mjs`;
+import { markRaw, onUnmounted, reactive, watch } from "vue";
+let pdfjsLibPromise = null;
+async function loadPdfjs() {
+  if (!import.meta.client)
+    return null;
+  if (!pdfjsLibPromise) {
+    pdfjsLibPromise = import("pdfjs-dist").then((lib) => {
+      lib.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${lib.version}/build/pdf.worker.min.mjs`;
+      return lib;
+    });
+  }
+  return pdfjsLibPromise;
+}
 export function usePdf(url) {
   const state = reactive({
     pdfDoc: null,
@@ -13,6 +23,11 @@ export function usePdf(url) {
   async function loadPdf() {
     if (isUnmounted)
       return null;
+    const pdfjsLib = await loadPdfjs();
+    if (!pdfjsLib) {
+      state.isLoading = false;
+      return null;
+    }
     state.isLoading = true;
     state.loadError = null;
     try {
@@ -68,6 +83,9 @@ export function usePdf(url) {
   async function renderTextLayer(page, viewport, textLayer, highlight, highlightPage, pageNum) {
     if (isUnmounted)
       return;
+    const pdfjsLib = await loadPdfjs();
+    if (!pdfjsLib)
+      return;
     textLayer.innerHTML = "";
     textLayer.style.width = `${viewport.width}px`;
     textLayer.style.height = `${viewport.height}px`;

package/dist/runtime/composables/useWorkspaceContextFiles.d.ts

@@ -1,8 +1,7 @@
 import type { ContextFile } from '../server/db/schema.js';
-import type { WorkspaceSettings, WorkspaceSettingsUpdate } from './useWorkspaceSettings.js';
 export declare const MAX_FILES = 10;
 export declare const MAX_FILE_SIZE: number;
-export declare function useWorkspaceContextFiles(searchQuery: Ref<string>, currentContextFiles: Ref<readonly ContextFile[] | null | undefined> | ComputedRef<readonly ContextFile[] | null | undefined>, updateSettings: (updates: WorkspaceSettingsUpdate) => Promise<WorkspaceSettings>): {
+export declare function useWorkspaceContextFiles(searchQuery: Ref<string>, currentContextFiles: Ref<readonly ContextFile[] | null | undefined> | ComputedRef<readonly ContextFile[] | null | undefined>): {
     pendingFiles: any;
     filteredContextFiles: any;
     filteredPendingFiles: any;
@@ -11,9 +10,10 @@ export declare function useWorkspaceContextFiles(searchQuery: Ref<string>, curre
     maxFiles: number;
     handleFileSelect: (event: Event) => void;
     removePendingFile: (file: File) => void;
-    removeContextFile: (url: string) => Promise<void>;
+    removeContextFile: (url: string) => void;
     getFileType: (fileName: string) => string;
     initialize: () => void;
     getPendingFiles: () => File[];
+    getKeptContextFiles: () => ContextFile[];
     clearPendingFiles: () => void;
 };

package/dist/runtime/composables/useWorkspaceContextFiles.js

@@ -1,14 +1,16 @@
 export const MAX_FILES = 10;
 export const MAX_FILE_SIZE = 10 * 1024 * 1024;
-export function useWorkspaceContextFiles(searchQuery, currentContextFiles, updateSettings) {
+export function useWorkspaceContextFiles(searchQuery, currentContextFiles) {
   const pendingFiles = ref([]);
+  const removedUrls = ref(/* @__PURE__ */ new Set());
+  const effectiveContextFiles = computed(
+    () => (currentContextFiles.value ?? []).filter((file) => !removedUrls.value.has(file.url))
+  );
   const filteredContextFiles = computed(() => {
-    if (!currentContextFiles.value)
-      return [];
     if (!searchQuery.value.trim())
-      return currentContextFiles.value;
+      return effectiveContextFiles.value;
     const query = searchQuery.value.toLowerCase();
-    return currentContextFiles.value.filter(
+    return effectiveContextFiles.value.filter(
       (file) => file.name.toLowerCase().includes(query)
     );
   });
@@ -21,10 +23,10 @@ export function useWorkspaceContextFiles(searchQuery, currentContextFiles, updat
     );
   });
   const currentFileCount = computed(
-    () => (currentContextFiles.value?.length ?? 0) + pendingFiles.value.length
+    () => effectiveContextFiles.value.length + pendingFiles.value.length
   );
   const hasChanges = computed(
-    () => pendingFiles.value.length > 0
+    () => pendingFiles.value.length > 0 || removedUrls.value.size > 0
   );
   function handleFileSelect(event) {
     const target = event.target;
@@ -40,21 +42,27 @@ export function useWorkspaceContextFiles(searchQuery, currentContextFiles, updat
     if (idx !== -1)
       pendingFiles.value = pendingFiles.value.filter((_, i) => i !== idx);
   }
-  async function removeContextFile(url) {
-    const newFiles = (currentContextFiles.value ?? []).filter((f) => f.url !== url);
-    await updateSettings({ contextFiles: newFiles.length > 0 ? newFiles : null });
+  function removeContextFile(url) {
+    const next = new Set(removedUrls.value);
+    next.add(url);
+    removedUrls.value = next;
   }
   function getFileType(fileName) {
     return fileName.split(".").pop()?.toUpperCase() ?? "";
   }
   function initialize() {
     pendingFiles.value = [];
+    removedUrls.value = /* @__PURE__ */ new Set();
   }
   function getPendingFiles() {
     return [...pendingFiles.value];
   }
+  function getKeptContextFiles() {
+    return [...effectiveContextFiles.value];
+  }
   function clearPendingFiles() {
     pendingFiles.value = [];
+    removedUrls.value = /* @__PURE__ */ new Set();
   }
   return {
     pendingFiles: readonly(pendingFiles),
@@ -69,6 +77,7 @@ export function useWorkspaceContextFiles(searchQuery, currentContextFiles, updat
     getFileType,
     initialize,
     getPendingFiles,
+    getKeptContextFiles,
     clearPendingFiles
   };
 }

package/dist/runtime/composables/useWorkspaceExternalSkills.d.ts

@@ -1,5 +1,5 @@
 import type { ExternalSkill } from '../server/db/schema.js';
-export declare function useWorkspaceExternalSkills(searchQuery?: Ref<string>): {
+export declare function useWorkspaceExternalSkills(currentExternalSkills: Ref<readonly ExternalSkill[] | null | undefined> | ComputedRef<readonly ExternalSkill[] | null | undefined>, searchQuery?: Ref<string>): {
     displayedSkills: any;
     filteredSkills: any;
     hasChanges: any;

package/dist/runtime/composables/useWorkspaceExternalSkills.js

@@ -1,15 +1,14 @@
-export function useWorkspaceExternalSkills(searchQuery) {
-  const { settings } = useWorkspaceSettings();
+export function useWorkspaceExternalSkills(currentExternalSkills, searchQuery) {
   const { user } = useTelaApplicationAuth();
   const { connection: skillsConnection, fetchConnection: fetchGitHubConnection, connect: connectGitHub } = useGitHubSkills();
-  const pendingSkills = useState("workspace-external-skills-pending", () => []);
-  const removedRefs = useState("workspace-external-skills-removed", () => []);
+  const pendingSkills = ref([]);
+  const removedRefs = ref([]);
   const skillModalOpen = ref(false);
   const skillRefInput = ref("");
   const skillError = ref("");
   const discoveringSkills = ref(false);
   const displayedSkills = computed(() => {
-    const current = (settings.value?.externalSkills ?? []).filter((s) => !removedRefs.value.includes(s.ref));
+    const current = (currentExternalSkills.value ?? []).filter((s) => !removedRefs.value.includes(s.ref));
     return [...current, ...pendingSkills.value];
   });
   const filteredSkills = computed(() => {
@@ -38,7 +37,7 @@ export function useWorkspaceExternalSkills(searchQuery) {
     removedRefs.value = [...removedRefs.value, ref2];
   }
   function buildExternalSkills() {
-    const currentSkills = (settings.value?.externalSkills ?? []).filter((s) => !removedRefs.value.includes(s.ref)).map((s) => ({
+    const currentSkills = (currentExternalSkills.value ?? []).filter((s) => !removedRefs.value.includes(s.ref)).map((s) => ({
       ...s,
       allowedTools: [...s.allowedTools],
       addedBy: { ...s.addedBy }

package/dist/runtime/composables/useWorkspacePersonalization.d.ts

@@ -1,4 +1,4 @@
-export declare function useWorkspacePersonalization(): {
+export declare function useWorkspacePersonalization(currentSystemMessage: Ref<string | null | undefined> | ComputedRef<string | null | undefined>): {
     localSystemMessage: any;
     hasChanges: any;
     getSystemMessage: () => string | null;

package/dist/runtime/composables/useWorkspacePersonalization.js

@@ -1,14 +1,13 @@
-export function useWorkspacePersonalization() {
-  const { settings } = useWorkspaceSettings();
-  const localSystemMessage = useState("workspace-personalization-system-message", () => "");
+export function useWorkspacePersonalization(currentSystemMessage) {
+  const localSystemMessage = ref("");
   const hasChanges = computed(
-    () => localSystemMessage.value !== (settings.value?.systemMessage ?? "")
+    () => localSystemMessage.value !== (currentSystemMessage.value ?? "")
   );
   function getSystemMessage() {
     return localSystemMessage.value.trim() || null;
   }
   function initialize() {
-    localSystemMessage.value = settings.value?.systemMessage ?? "";
+    localSystemMessage.value = currentSystemMessage.value ?? "";
   }
   return {
     localSystemMessage,

package/dist/runtime/composables/useWorkspaceSettings.js

@@ -2,7 +2,8 @@ import * as Sentry from "@sentry/nuxt";
 export function useWorkspaceSettings() {
   const chatApi = useChatApi();
   const embedConfig = useEmbedConfig();
-  const workspaceScope = computed(() => embedConfig?.workspaceId.value.trim() || "default");
+  const { activeOrganization } = useTelaApplicationAuth();
+  const workspaceScope = computed(() => embedConfig?.workspaceId.value.trim() || activeOrganization.value?.id?.trim() || "default");
   const settingsBuckets = useState("workspace-settings", () => ({}));
   const loadingBuckets = useState("workspace-settings-loading", () => ({}));
   const errorBuckets = useState("workspace-settings-error", () => ({}));
@@ -35,7 +36,8 @@ export function useWorkspaceSettings() {
   });
   const isModalOpen = useState("workspace-settings-modal-open", () => false);
   const initialTab = useState("workspace-settings-initial-tab", () => null);
-  if (embedConfig !== null && embedConfig.workspaceSettings.value !== void 0) {
+  const hasWorkspaceSettingsOverride = computed(() => embedConfig?.workspaceSettings.value !== void 0);
+  if (embedConfig !== null && hasWorkspaceSettingsOverride.value) {
     settings.value = embedConfig.workspaceSettings.value;
   }
   if (embedConfig !== null) {
@@ -64,7 +66,9 @@ export function useWorkspaceSettings() {
     try {
       const currentSettings = settings.value;
       let data;
-      if (embedConfig !== null) {
+      if (hasWorkspaceSettingsOverride.value) {
+        return settings.value;
+      } else if (embedConfig !== null) {
         data = await $fetch(
           chatApi.path("/workspace/settings"),
           chatApi.withChatHeaders()
@@ -102,15 +106,14 @@ export function useWorkspaceSettings() {
     }
   }
   async function updateSettings(updates) {
-    if (embedConfig !== null)
+    if (hasWorkspaceSettingsOverride.value)
       return settings.value;
     loading.value = true;
     error.value = null;
     try {
-      const data = await $fetch("/api/workspace/settings", {
-        method: "PATCH",
-        body: updates
-      });
+      const path = embedConfig !== null ? chatApi.path("/workspace/settings") : "/api/workspace/settings";
+      const options = embedConfig !== null ? chatApi.withChatHeaders({ method: "PATCH", body: updates }) : { method: "PATCH", body: updates };
+      const data = await $fetch(path, options);
       settings.value = data;
       return data;
     } catch (e) {

package/dist/runtime/embed/components/ChatConfigurationModal.d.vue.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/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>