@meistrari/chat-nuxt 1.1.2 → 1.2.0

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

@@ -0,0 +1,133 @@
+<script setup>
+defineProps({
+  searchQuery: { type: String, required: true },
+  filteredContextFiles: { type: Array, required: true },
+  filteredPendingFiles: { type: Array, required: true },
+  currentFileCount: { type: Number, required: true },
+  maxFiles: { type: Number, required: true },
+  getFileType: { type: Function, required: true }
+});
+const emit = defineEmits(["update:searchQuery", "handleFileSelect", "removePendingFile", "removeContextFile"]);
+const fileInputRef = ref(null);
+function openFileDialog() {
+  fileInputRef.value?.click();
+}
+function onFileChange(event) {
+  emit("handleFileSelect", event);
+}
+</script>
+
+<template>
+    <div mb-24px>
+        <h2 text-16px font-semibold text-primary tracking="-.2px" leading-20px>
+            Arquivos de contexto
+        </h2>
+        <div h-px bg-gray-200 mt-24px />
+    </div>
+
+    <input ref="fileInputRef" type="file" multiple hidden @change="onFileChange">
+
+    <div flex items-center justify-between mb-24px>
+        <div
+            flex items-center gap-8px
+            w-240px pl-12px pr-8px py-4px
+            bg-white b=".5px gray-200" rounded-10px
+            shadow-sm
+        >
+            <div i-ph-magnifying-glass text-12px text-gray-400 />
+            <input
+                :value="searchQuery"
+                type="text"
+                placeholder="Buscar"
+                text-14px text-primary placeholder:text-gray-400
+                bg-transparent border-none outline-none
+                flex-1 leading-18px tracking="-.15px"
+                @input="emit('update:searchQuery', $event.target.value)"
+            >
+        </div>
+        <button
+            px-16px py-10px
+            bg-white b=".5px gray-200" rounded-12px
+            text-16px font-semibold text-gray-900
+            cursor-pointer hover:bg-gray-50 transition
+            :disabled="currentFileCount >= maxFiles"
+            :class="{ 'opacity-50 cursor-not-allowed': currentFileCount >= maxFiles }"
+            @click="openFileDialog"
+        >
+            Enviar
+        </button>
+    </div>
+
+    <div w-full>
+        <div flex items-center b-y=".5px gray-200" bg-white>
+            <div flex-1 px-20px py-12px>
+                <span text-12px font-semibold text-primary leading-16px>Nome</span>
+            </div>
+            <div w-100px px-20px py-12px>
+                <span text-12px font-semibold text-primary leading-16px>Tipo</span>
+            </div>
+            <div w-40px />
+        </div>
+
+        <div>
+            <div
+                v-for="file in filteredContextFiles"
+                :key="`existing-${file.url}`"
+                flex items-center b-b=".5px gray-100" bg-white
+            >
+                <div flex items-center gap-8px flex-1 h-48px px-20px py-12px>
+                    <div i-ph-file-pdf text-16px text-red-500 shrink-0 />
+                    <span text-14px text-gray-900 leading-18px tracking="-.15px" truncate>
+                        {{ file.name }}
+                    </span>
+                </div>
+                <div w-100px h-48px px-20px py-12px flex items-center>
+                    <span text-12px text-tertiary leading-16px>
+                        {{ getFileType(file.name) }}
+                    </span>
+                </div>
+                <div w-40px px-8px py-12px>
+                    <button
+                        p-4px rounded-6px hover:bg-gray-100 transition cursor-pointer
+                        @click="emit('removeContextFile', file.url)"
+                    >
+                        <div i-ph-x text-16px text-primary />
+                    </button>
+                </div>
+            </div>
+
+            <div
+                v-for="file in filteredPendingFiles"
+                :key="`pending-${file.name}-${file.size}-${file.lastModified}`"
+                flex items-center b-b=".5px blue-200" bg-blue-50
+            >
+                <div flex items-center gap-8px flex-1 h-48px px-20px py-12px>
+                    <div i-ph-file-pdf text-16px text-blue-500 shrink-0 />
+                    <span text-14px text-blue-900 leading-18px tracking="-.15px" truncate>
+                        {{ file.name }}
+                    </span>
+                </div>
+                <div w-100px h-48px px-20px py-12px flex items-center>
+                    <span text-12px text-blue-500 leading-16px>
+                        {{ getFileType(file.name) }}
+                    </span>
+                </div>
+                <div w-40px px-8px py-12px>
+                    <button
+                        p-4px rounded-6px hover:bg-blue-100 transition cursor-pointer
+                        @click="emit('removePendingFile', file)"
+                    >
+                        <div i-ph-x text-16px text-blue-500 />
+                    </button>
+                </div>
+            </div>
+
+            <div
+                v-if="filteredContextFiles.length === 0 && filteredPendingFiles.length === 0"
+                flex items-center justify-center py-48px text-14px text-tertiary
+            >
+                Nenhum arquivo adicionado ainda
+            </div>
+        </div>
+    </div>
+</template>

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

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

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    searchQuery: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:searchQuery": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:searchQuery"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/embed/components/configuration/ChatConfigurationCredentialsTab.vue

@@ -0,0 +1,220 @@
+<script setup>
+const props = defineProps({
+  searchQuery: { type: String, required: true }
+});
+const emit = defineEmits(["update:searchQuery"]);
+const localSearchQuery = computed({
+  get: () => props.searchQuery,
+  set: (value) => emit("update:searchQuery", value)
+});
+const {
+  credentials,
+  loading: credentialsLoading,
+  fetchCredentials,
+  filteredCredentials,
+  credentialModalOpen,
+  deleteModalOpen,
+  credentialForm,
+  credentialSaving,
+  credentialDeleting,
+  credentialError,
+  editingCredential,
+  deletingCredential,
+  openCreateModal,
+  closeModal,
+  handleSave,
+  handleDelete,
+  getMenuItems,
+  formatLastRotated
+} = useWorkspaceCredentials(localSearchQuery);
+onMounted(() => {
+  if (!credentials.value.length)
+    fetchCredentials();
+});
+</script>
+
+<template>
+    <div mb-24px>
+        <h2 text-16px font-semibold text-primary tracking="-.2px" leading-20px>
+            Credenciais
+        </h2>
+        <div h-px bg-gray-200 mt-24px />
+    </div>
+
+    <div flex items-center justify-between mb-16px>
+        <div
+            flex items-center gap-8px
+            w-240px pl-12px pr-8px py-4px
+            bg-white b=".5px gray-200" rounded-10px
+            shadow-sm
+        >
+            <div i-ph-magnifying-glass text-12px text-gray-400 />
+            <input
+                v-model="localSearchQuery"
+                type="text"
+                placeholder="Buscar por key"
+                text-14px text-primary placeholder:text-gray-400
+                bg-transparent border-none outline-none
+                flex-1 leading-18px tracking="-.15px"
+            >
+        </div>
+        <TelaButton
+            variant="secondary"
+            @click="openCreateModal"
+        >
+            <div i-ph-plus text-16px />
+            <span>Adicionar</span>
+        </TelaButton>
+    </div>
+
+    <div v-if="credentialsLoading && !credentials.length" flex items-center justify-center py-48px>
+        <div i-ph-spinner animate-spin text-32px text-gray-400 />
+    </div>
+
+    <div v-else :class="{ 'opacity-50 pointer-events-none': credentialsLoading }">
+        <TelaTable v-if="credentials.length > 0" class="table-fixed" w-full overflow-x-hidden>
+            <TelaTableHeader>
+                <TelaTableRow>
+                    <TelaTableHead class="!py-10px text-14px font-medium text-secondary">
+                        Nome
+                    </TelaTableHead>
+                    <TelaTableHead class="!py-10px !w-200px text-14px font-medium text-secondary hide-narrow">
+                        Valor
+                    </TelaTableHead>
+                    <TelaTableHead class="!py-10px !w-180px text-14px font-medium text-secondary">
+                        Última rotação
+                    </TelaTableHead>
+                    <TelaTableHead class="!py-10px !w-48px" />
+                </TelaTableRow>
+            </TelaTableHeader>
+            <TelaTableBody>
+                <TelaTableRow
+                    v-for="credential in filteredCredentials"
+                    :key="credential.id"
+                >
+                    <TelaTableCell class="!py-14px">
+                        <span text-14px font-mono text-primary>{{ credential.key }}</span>
+                    </TelaTableCell>
+                    <TelaTableCell class="!py-14px !w-200px hide-narrow">
+                        <span text-14px text-primary>••••••••••</span>
+                    </TelaTableCell>
+                    <TelaTableCell class="!py-14px !w-180px">
+                        <span text-14px text-secondary>{{ formatLastRotated(credential.updatedAt, credential.createdAt) }}</span>
+                    </TelaTableCell>
+                    <TelaTableCell class="!py-14px !w-48px">
+                        <TelaDropdownMenu :items="getMenuItems(credential)" align="end">
+                            <button p-6px rounded-6px text-gray-400 hover:text-gray-600 transition-colors cursor-pointer>
+                                <div i-ph-dots-three text-18px />
+                            </button>
+                        </TelaDropdownMenu>
+                    </TelaTableCell>
+                </TelaTableRow>
+                <TelaTableRow v-if="filteredCredentials.length === 0 && searchQuery">
+                    <TelaTableCell :colspan="4" class="!py-32px text-center">
+                        <span text-14px text-secondary>Nenhum resultado para "{{ searchQuery }}"</span>
+                    </TelaTableCell>
+                </TelaTableRow>
+            </TelaTableBody>
+        </TelaTable>
+
+        <div v-else flex="~ col" items-center justify-center py-48px gap-8px>
+            <div i-ph-password-bold-duotone text-32px text-gray-300 />
+            <p text-14px text-secondary>
+                Nenhuma credencial adicionada ainda
+            </p>
+        </div>
+    </div>
+
+    <TelaModal
+        v-model="credentialModalOpen"
+        :prevent-close="credentialSaving"
+        class="w-420px! relative p-20px! pt-16px!"
+        compact
+        :title="editingCredential ? 'Editar credencial' : 'Nova credencial'"
+        small-title
+        :is-close-icon="false"
+        hide-dividers
+        @keydown.esc.stop="credentialModalOpen = false"
+    >
+        <div relative flex="~ col" pt-24px gap-24px w-full>
+            <TelaIconButton
+                icon="i-ph-x"
+                size="md"
+                color="secondary"
+                outline-none
+                absolute p-8px top--32px right--12px
+                @click="credentialModalOpen = false"
+            />
+            <form flex="~ col" gap-24px w-full @submit.prevent="handleSave">
+                <div v-if="credentialError" body-12-regular text-red-500 bg-red-50 px-12px py-8px rounded-8px>
+                    {{ credentialError }}
+                </div>
+
+                <div flex="~ col" gap-8px>
+                    <TelaLabel for="credentialKey">
+                        Nome
+                    </TelaLabel>
+                    <TelaInput
+                        id="credentialKey"
+                        v-model="credentialForm.key"
+                        size="sm"
+                        :disabled="!!editingCredential"
+                        :autofocus="!editingCredential"
+                        placeholder="DATABASE_URL"
+                        input-class="!px-9px !py-4px"
+                    />
+                    <p body-12-regular text-secondary>
+                        Apenas letras maiúsculas, números e underscore (ex: API_KEY)
+                    </p>
+                </div>
+
+                <div flex="~ col" gap-8px>
+                    <TelaLabel for="credentialValue">
+                        Valor
+                    </TelaLabel>
+                    <TelaInput
+                        id="credentialValue"
+                        v-model="credentialForm.value"
+                        size="sm"
+                        type="password"
+                        :autofocus="!!editingCredential"
+                        :placeholder="editingCredential ? 'Novo valor (deixe vazio para manter)' : 'Valor da credencial'"
+                        input-class="!px-9px !py-4px"
+                    />
+                </div>
+
+                <div flex items-center justify-end gap-8px>
+                    <TelaButton type="button" size="md" variant="secondary" @click="closeModal">
+                        Cancelar
+                    </TelaButton>
+                    <TelaButton
+                        type="submit"
+                        size="md"
+                        :loading="credentialSaving"
+                        :disabled="!editingCredential && (!credentialForm.key || !credentialForm.value)"
+                    >
+                        {{ editingCredential ? "Salvar" : "Adicionar" }}
+                    </TelaButton>
+                </div>
+            </form>
+        </div>
+    </TelaModal>
+
+    <TelaConfirmationModal
+        v-model:open="deleteModalOpen"
+        title="Excluir credencial?"
+        variant="danger"
+        confirm-button-text="Excluir"
+        cancel-button-text="Cancelar"
+        :loading="credentialDeleting"
+        @confirm="handleDelete"
+        @cancel="deleteModalOpen = false"
+        @keydown.esc.stop="deleteModalOpen = false"
+    >
+        A credencial <span font-mono font-semibold>{{ deletingCredential?.key }}</span> será excluída permanentemente.
+    </TelaConfirmationModal>
+</template>
+
+<style scoped>
+@media (max-width:950px){.hide-narrow{display:none}}
+</style>

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

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    searchQuery: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:searchQuery": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:searchQuery"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,32 @@
+import type { ExternalSkill } from '../../../server/db/schema.js';
+type __VLS_Props = {
+    searchQuery: string;
+    displayedSkills: readonly ExternalSkill[];
+    filteredSkills: readonly ExternalSkill[];
+    hasChanges: boolean;
+    isPending: (ref: string) => boolean;
+    skillModalOpen: boolean;
+    skillRefInput: string;
+    skillError: string;
+    discoveringSkills: boolean;
+    gitHubButtonText: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:searchQuery": (value: string) => any;
+    "update:skillModalOpen": (value: boolean) => any;
+    "update:skillRefInput": (value: string) => any;
+    removeSkill: (ref: string) => any;
+    closeSkillModal: () => any;
+    handleAddSkillAndClose: () => any;
+    connectGitHub: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:searchQuery"?: ((value: string) => any) | undefined;
+    "onUpdate:skillModalOpen"?: ((value: boolean) => any) | undefined;
+    "onUpdate:skillRefInput"?: ((value: string) => any) | undefined;
+    onRemoveSkill?: ((ref: string) => any) | undefined;
+    onCloseSkillModal?: (() => any) | undefined;
+    onHandleAddSkillAndClose?: (() => any) | undefined;
+    onConnectGitHub?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/embed/components/configuration/ChatConfigurationExternalSkillsTab.vue

@@ -0,0 +1,222 @@
+<script setup>
+defineProps({
+  searchQuery: { type: String, required: true },
+  displayedSkills: { type: Array, required: true },
+  filteredSkills: { type: Array, required: true },
+  hasChanges: { type: Boolean, required: true },
+  isPending: { type: Function, required: true },
+  skillModalOpen: { type: Boolean, required: true },
+  skillRefInput: { type: String, required: true },
+  skillError: { type: String, required: true },
+  discoveringSkills: { type: Boolean, required: true },
+  gitHubButtonText: { type: String, required: true }
+});
+const emit = defineEmits(["update:searchQuery", "update:skillModalOpen", "update:skillRefInput", "removeSkill", "closeSkillModal", "handleAddSkillAndClose", "connectGitHub"]);
+const githubIconUrl = "/github.svg";
+</script>
+
+<template>
+    <div mb-24px>
+        <h2 text-16px font-semibold text-primary tracking="-.2px" leading-20px>
+            Skills Externas
+        </h2>
+        <div h-px bg-gray-200 mt-24px />
+    </div>
+
+    <div v-if="displayedSkills.length === 0 && !hasChanges" flex="~ col" items-center justify-center h-400px gap-24px>
+        <div
+            w-88px h-64px rounded-10px bg-white b=".5px gray-100"
+            flex items-center justify-center
+            shadow-sm
+        >
+            <div i-ph-wrench text-32px style="color: #DFE3E7;" />
+        </div>
+        <p text-20px font-semibold text-primary tracking="-.5px" leading-24px text-center>
+            Sua equipe ainda não<br>adicionou skills externas
+        </p>
+        <div flex items-center gap-12px>
+            <TelaButton
+                variant="primary"
+                @click="emit('update:skillModalOpen', true)"
+            >
+                <div i-ph-plus text-16px />
+                <span>Adicionar Skill</span>
+            </TelaButton>
+            <TelaButton
+                variant="secondary"
+                @click="emit('connectGitHub')"
+            >
+                <img :src="githubIconUrl">
+                <span>{{ gitHubButtonText }}</span>
+            </TelaButton>
+        </div>
+    </div>
+
+    <template v-else>
+        <div flex items-center justify-between mb-24px>
+            <div
+                flex items-center gap-8px
+                w-240px pl-12px
+                bg-white b=".5px gray-200" rounded-10px
+                shadow-sm
+            >
+                <div i-ph-magnifying-glass text-12px text-gray-400 />
+                <input
+                    :value="searchQuery"
+                    type="text"
+                    placeholder="Buscar skills"
+                    text-14px text-primary placeholder:text-gray-400 h-32px
+                    bg-transparent border-none outline-none
+                    flex-1 leading-18px tracking="-.15px"
+                    @input="emit('update:searchQuery', $event.target.value)"
+                >
+            </div>
+
+            <div flex items-center gap-8px>
+                <TelaButton
+                    variant="secondary"
+                    @click="emit('update:skillModalOpen', true)"
+                >
+                    <div i-ph-plus text-16px />
+                    <span>Adicionar Skill</span>
+                </TelaButton>
+                <TelaButton
+                    variant="secondary"
+                    @click="emit('connectGitHub')"
+                >
+                    <img :src="githubIconUrl">
+                    <span>{{ gitHubButtonText }}</span>
+                </TelaButton>
+            </div>
+        </div>
+
+        <div max-h-400px overflow-y-auto>
+            <TelaTable class="table-fixed" w-full>
+                <TelaTableHeader>
+                    <TelaTableRow>
+                        <TelaTableHead class="!py-12px text-12px font-semibold text-primary leading-16px w-160px!">
+                            Skill
+                        </TelaTableHead>
+                        <TelaTableHead class="!py-12px !w-280px text-12px font-semibold text-primary leading-16px">
+                            Fonte
+                        </TelaTableHead>
+                        <TelaTableHead class="!py-12px !w-48px" />
+                    </TelaTableRow>
+                </TelaTableHeader>
+                <TelaTableBody>
+                    <TelaTableRow
+                        v-for="skill in filteredSkills"
+                        :key="skill.ref"
+                        hover:bg-gray-50 transition
+                        :class="{
+  'bg-blue-50': isPending(skill.ref)
+}"
+                    >
+                        <TelaTableCell>
+                            <div flex="~ col" gap-2px>
+                                <span text-14px text-gray-900 tracking="-.15px" truncate>
+                                    {{ skill.name }}
+                                </span>
+                            </div>
+                        </TelaTableCell>
+                        <TelaTableCell>
+                            <div flex items-center gap-8px>
+                                <span text-12px text-tertiary truncate font-mono>
+                                    {{ skill.ref }}
+                                </span>
+                                <TelaBadge v-if="!skill.isPublic">
+                                    Privado
+                                </TelaBadge>
+                            </div>
+                        </TelaTableCell>
+                        <TelaTableCell class="!w-48px">
+                            <TelaDropdownMenu
+                                :items="[
+  {
+    label: 'Excluir',
+    icon: 'i-ph-trash',
+    color: 'negative',
+    click: () => emit('removeSkill', skill.ref)
+  }
+]"
+                                align="end"
+                            >
+                                <button
+                                    p-4px rounded-6px text-gray-400
+                                    hover:text-gray-600 hover:bg-gray-100
+                                    cursor-pointer transition
+                                >
+                                    <div i-ph-dots-three text-16px />
+                                </button>
+                            </TelaDropdownMenu>
+                        </TelaTableCell>
+                    </TelaTableRow>
+                </TelaTableBody>
+            </TelaTable>
+        </div>
+    </template>
+
+    <TelaModal
+        :model-value="skillModalOpen"
+        !w-420px
+        !p-20px
+        hide-header
+        @update:model-value="(v) => {
+  if (!v) emit('closeSkillModal');
+}"
+    >
+        <div flex="~ col" w-full>
+            <div flex items-center justify-between mb-16px>
+                <span text-12px font-460 leading-16px text-black-500>
+                    Adicionar Skill
+                </span>
+                <button
+                    p-4px rounded-8px
+                    hover:bg-gray-100
+                    transition cursor-pointer
+                    @click="emit('closeSkillModal')"
+                >
+                    <div i-ph-x text-20px />
+                </button>
+            </div>
+
+            <div flex="~ col" gap-8px>
+                <label text-14px font-580 leading-16px tracking="-.15px" text-primary>
+                    Referência da Skill
+                </label>
+                <TelaInput
+                    :model-value="skillRefInput"
+                    type="text"
+                    size="sm"
+                    placeholder="github.com/owner/repo/tree/main/path"
+                    :disabled="discoveringSkills"
+                    @update:model-value="(v) => emit('update:skillRefInput', v)"
+                />
+                <p v-if="skillError" text-12px text-red-500>
+                    {{ skillError }}
+                </p>
+                <p v-else text-12px font-400 leading-16px text-secondary>
+                    Cole a URL do repositório ou a referência gh:owner/repo/path
+                </p>
+            </div>
+
+            <div flex justify-end gap-12px mt-24px>
+                <TelaButton
+                    variant="secondary"
+                    :disabled="discoveringSkills"
+                    @click="emit('closeSkillModal')"
+                >
+                    Cancelar
+                </TelaButton>
+                <TelaButton
+                    variant="primary"
+                    :disabled="discoveringSkills"
+                    @click="emit('handleAddSkillAndClose')"
+                >
+                    <div v-if="discoveringSkills" i-ph-spinner animate-spin text-14px />
+                    <span>{{ discoveringSkills ? "Buscando..." : "Adicionar" }}</span>
+                </TelaButton>
+            </div>
+        </div>
+    </TelaModal>
+</template>