@meistrari/chat-nuxt 1.3.0 → 1.5.0

package/dist/runtime/components/chat/message-input.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { DEFAULT_MODEL } from "../../types/chat";
 import { formatFileSize, getMimeIcon, getMimeLabel } from "../../utils/file";
+import { getAgentInputReadiness } from "../../utils/agent-input-readiness";
 import { MAX_FILE_SIZE, MAX_FILES } from "../../composables/useWorkspaceContextFiles";
-import { FEATURE_FLAGS } from "../../types/feature-flags";
 const props = defineProps({
   disabled: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
@@ -13,19 +13,48 @@ const props = defineProps({
   hasDisclaimer: { type: Boolean, required: false },
   messages: { type: Array, required: false },
   conversationFiles: { type: Array, required: false },
-  workspaceSettings: { type: null, required: false }
+  workspaceSettings: { type: null, required: false },
+  allowModelSelection: { type: Boolean, required: false },
+  agentInputSchema: { type: null, required: false },
+  agentInputSchemaLoading: { type: Boolean, required: false },
+  showModelSelector: { type: Boolean, required: false },
+  showCancelButton: { type: Boolean, required: false }
 });
 const emit = defineEmits(["send", "cancel"]);
 const selectedModel = defineModel("model", { type: null, ...{ default: DEFAULT_MODEL } });
 const { uploadFiles, uploading, uploadError } = useFileUpload();
-const { isFeatureEnabled } = useFeatureFlags();
-const isCancelEnabled = computed(() => isFeatureEnabled(FEATURE_FLAGS.ENABLE_CANCEL_GENERATION));
-const isModelSelectorEnabled = computed(() => isFeatureEnabled(FEATURE_FLAGS.ENABLE_MODEL_SELECTOR));
+const isCancelEnabled = computed(() => props.showCancelButton === true);
+const isModelSelectorEnabled = computed(() => props.showModelSelector === true && props.allowModelSelection !== false);
 const content = ref("");
 const editorRef = ref(null);
 const fileInputRef = ref(null);
 const pendingFiles = ref([]);
+const selectedUploadInputName = ref(void 0);
+const agentInputTexts = ref({});
+const isAgentInputsOpen = ref(false);
 const isLocked = computed(() => props.disabled || props.loading);
+const agentInputVariables = computed(
+  () => (props.agentInputSchema ?? []).filter((input) => input.name.trim())
+);
+const fileInputVariables = computed(
+  () => agentInputVariables.value.filter((input) => input.type === "file")
+);
+const textInputVariables = computed(
+  () => agentInputVariables.value.filter((input) => input.type === "text")
+);
+const hasAgentInputs = computed(() => agentInputVariables.value.length > 0);
+const requiredAgentInputCount = computed(
+  () => agentInputVariables.value.filter((input) => input.required).length
+);
+const defaultFileInputName = computed(
+  () => fileInputVariables.value.length === 1 ? fileInputVariables.value[0]?.name : void 0
+);
+const agentInputReadiness = computed(() => getAgentInputReadiness({
+  inputVariables: agentInputVariables.value,
+  inputTexts: agentInputTexts.value,
+  files: pendingFiles.value
+}));
+const hasUnmappedAgentFiles = computed(() => agentInputReadiness.value.hasUnmappedFiles);
 const messagesRef = computed(() => props.messages ?? []);
 const inputHistory = useInputHistory(messagesRef);
 let restoringHistory = false;
@@ -92,9 +121,21 @@ const mentionAutocomplete = useMentionAutocomplete({
   onInsert: handleInput
 });
 const canSend = computed(
-  () => content.value.trim().length > 0 && !isLocked.value && !uploading.value
+  () => content.value.trim().length > 0 && !isLocked.value && !uploading.value && !props.agentInputSchemaLoading && agentInputReadiness.value.ready
 );
-function openFileDialog() {
+watch(agentInputVariables, (variables) => {
+  const variableNames = new Set(variables.map((input) => input.name));
+  agentInputTexts.value = Object.fromEntries(
+    Object.entries(agentInputTexts.value).filter(([name]) => variableNames.has(name))
+  );
+  pendingFiles.value = pendingFiles.value.map((pendingFile) => {
+    if (!pendingFile.inputName || variableNames.has(pendingFile.inputName))
+      return pendingFile;
+    return { ...pendingFile, inputName: void 0 };
+  });
+}, { deep: true });
+function openFileDialog(inputName) {
+  selectedUploadInputName.value = inputName ?? defaultFileInputName.value;
   fileInputRef.value?.click();
 }
 function handleFileSelect(event) {
@@ -107,28 +148,100 @@ function handleFileSelect(event) {
     }
     return true;
   });
-  const availableSlots = MAX_FILES - pendingFiles.value.length;
-  pendingFiles.value = [...pendingFiles.value, ...newFiles.slice(0, availableSlots)];
+  queueFiles(newFiles, selectedUploadInputName.value);
+  selectedUploadInputName.value = void 0;
   target.value = "";
 }
-function removeFile(index) {
-  pendingFiles.value = pendingFiles.value.filter((_, i) => i !== index);
+function createPendingFile(file, inputName) {
+  return {
+    id: `${file.name}-${file.lastModified}-${file.size}-${Math.random().toString(36).slice(2)}`,
+    file,
+    inputName
+  };
+}
+function queueFiles(files, inputName) {
+  const availableSlots = MAX_FILES - pendingFiles.value.length;
+  if (availableSlots <= 0)
+    return;
+  const mappedInputName = inputName ?? defaultFileInputName.value;
+  pendingFiles.value = [
+    ...pendingFiles.value,
+    ...files.slice(0, availableSlots).map((file) => createPendingFile(file, mappedInputName))
+  ];
+}
+function removeFile(id) {
+  pendingFiles.value = pendingFiles.value.filter((file) => file.id !== id);
+}
+function updatePendingFileInput(id, event) {
+  const value = event.target.value;
+  pendingFiles.value = pendingFiles.value.map((file) => {
+    if (file.id !== id)
+      return file;
+    return { ...file, inputName: value || void 0 };
+  });
+}
+function countFilesForInput(inputName) {
+  return pendingFiles.value.filter((file) => file.inputName === inputName).length;
+}
+function handleVariableDrop(event, inputName) {
+  const files = event.dataTransfer?.files ? Array.from(event.dataTransfer.files) : [];
+  addFiles(files, inputName);
+}
+function getVaultRef(file) {
+  return file.vaultReference?.trim() || (file.url.startsWith("vault://") ? file.url : null);
+}
+function buildAgentInputs(files, queuedFiles) {
+  if (!hasAgentInputs.value)
+    return [];
+  const inputs = [];
+  for (const input of textInputVariables.value) {
+    const text = (agentInputTexts.value[input.name] ?? "").trim();
+    if (!text)
+      continue;
+    inputs.push({
+      type: "text",
+      name: input.name,
+      content: text
+    });
+  }
+  files.forEach((file, index) => {
+    const inputName = queuedFiles[index]?.inputName;
+    const vaultRef = getVaultRef(file);
+    if (!inputName || !vaultRef)
+      return;
+    inputs.push({
+      type: "file",
+      name: inputName,
+      vaultRef,
+      filename: file.name.slice(0, 255)
+    });
+  });
+  return inputs;
 }
 async function handleSend() {
   if (!canSend.value)
     return;
   let files = [];
-  if (pendingFiles.value.length > 0) {
+  const queuedFiles = [...pendingFiles.value];
+  if (queuedFiles.length > 0) {
     try {
-      files = await uploadFiles(pendingFiles.value);
+      files = await uploadFiles(queuedFiles.map((item) => item.file));
     } catch {
       return;
     }
   }
   const taggedContent = mentionAutocomplete.buildTaggedContent();
-  emit("send", taggedContent.trim(), files, selectedModel.value);
+  const agentInputs = buildAgentInputs(files, queuedFiles);
+  emit(
+    "send",
+    taggedContent.trim(),
+    files,
+    isModelSelectorEnabled.value ? selectedModel.value : void 0,
+    agentInputs.length > 0 ? agentInputs : void 0
+  );
   content.value = "";
   pendingFiles.value = [];
+  agentInputTexts.value = {};
   mentionAutocomplete.resetMentions();
   inputHistory.resetNavigation();
   nextTick(() => {
@@ -273,15 +386,14 @@ function focusEditor() {
     return;
   editorRef.value?.focus();
 }
-function addFiles(files) {
+function addFiles(files, inputName) {
   const validFiles = files.filter((file) => {
     if (file.size > MAX_FILE_SIZE) {
       return false;
     }
     return true;
   });
-  const availableSlots = MAX_FILES - pendingFiles.value.length;
-  pendingFiles.value = [...pendingFiles.value, ...validFiles.slice(0, availableSlots)];
+  queueFiles(validFiles, inputName);
 }
 defineExpose({
   addFiles
@@ -291,11 +403,120 @@ defineExpose({
 <template>
     <div :class="centered ? '' : hasDisclaimer ? 'px-24px' : 'px-24px pb-24px'" bg-transparent>
         <div :class="centered ? 'w-700px' : 'max-w-800px'" mx-auto>
+            <Transition name="agent-inputs-panel-motion" mode="out-in" appear>
+                <div
+                    v-if="hasAgentInputs"
+                    class="agent-inputs-panel"
+                    mb-6px
+                    rounded-12px
+                    b=".5px gray-200"
+                    bg-white
+                    overflow-hidden
+                >
+                    <button
+                        type="button"
+                        w-full
+                        flex
+                        items-center
+                        gap-8px
+                        h-40px
+                        px-12px
+                        text-left
+                        hover:bg-gray-50
+                        transition-colors
+                        @click.stop="isAgentInputsOpen = !isAgentInputsOpen"
+                    >
+                        <span i-ph-brackets-curly text-14px text-gray-500 />
+                        <span text-13px font-580 text-gray-800>Variáveis</span>
+                        <span px-6px py-2px rounded-4px bg-gray-100 text-11px text-gray-600>{{ agentInputVariables.length }}</span>
+                        <span v-if="requiredAgentInputCount" text-11px text-gray-400>{{ requiredAgentInputCount }} obrigatória(s)</span>
+                        <div flex-1 />
+                        <span
+                            i-ph-caret-down-bold
+                            text-12px
+                            text-gray-400
+                            transition-transform
+                            :class="{ 'rotate-180': isAgentInputsOpen }"
+                        />
+                    </button>
+
+                    <Transition name="agent-inputs-content">
+                        <div v-if="isAgentInputsOpen" class="agent-inputs-content" flex="~ col" gap-10px px-12px pb-12px @click.stop>
+                            <label
+                                v-for="input in textInputVariables"
+                                :key="`text-${input.id || input.name}`"
+                                flex="~ col"
+                                gap-6px
+                            >
+                                <span flex items-center gap-6px text-12px font-580 text-gray-700>
+                                    <span w-6px h-6px rounded-full bg-blue-400 />
+                                    {{ input.name }}<span v-if="input.required" text-orange-500>*</span>
+                                </span>
+                                <textarea
+                                    v-model="agentInputTexts[input.name]"
+                                    class="agent-text-input"
+                                    :placeholder="input.description || input.name"
+                                    :disabled="isLocked"
+                                    rows="2"
+                                />
+                            </label>
+
+                            <div
+                                v-for="input in fileInputVariables"
+                                :key="`file-${input.id || input.name}`"
+                                class="agent-file-input-row"
+                                rounded-10px
+                                b=".5px dashed gray-300"
+                                p-10px
+                                flex
+                                items-center
+                                gap-10px
+                                transition-colors
+                                :class="isLocked ? 'opacity-60' : 'hover:bg-gray-50 cursor-pointer'"
+                                @click.stop="openFileDialog(input.name)"
+                                @dragover.prevent
+                                @drop.stop.prevent="handleVariableDrop($event, input.name)"
+                            >
+                                <span w-6px h-6px rounded-full bg-orange-400 shrink-0 />
+                                <div flex="~ col" min-w-0 flex-1>
+                                    <span text-12px font-580 text-gray-700 truncate>
+                                        {{ input.name }}<span v-if="input.required" text-orange-500>*</span>
+                                    </span>
+                                    <span v-if="input.description" text-11px text-gray-400 truncate>{{ input.description }}</span>
+                                </div>
+                                <span
+                                    v-if="countFilesForInput(input.name) > 0"
+                                    px-6px
+                                    py-2px
+                                    rounded-4px
+                                    bg-orange-50
+                                    text-11px
+                                    text-orange-600
+                                >
+                                    {{ countFilesForInput(input.name) }}
+                                </span>
+                                <TelaTooltip content="Anexar arquivo" side="top">
+                                    <TelaIconButton
+                                        icon="i-ph-paperclip"
+                                        size="sm"
+                                        color="secondary"
+                                        class="rounded-8px! p-4px!"
+                                        icon-class="text-gray-400 text-16px"
+                                        :disabled="isLocked || pendingFiles.length >= MAX_FILES"
+                                        @click.stop="openFileDialog(input.name)"
+                                    />
+                                </TelaTooltip>
+                            </div>
+                        </div>
+                    </Transition>
+                </div>
+            </Transition>
+
             <div v-if="pendingFiles.length > 0" flex flex-wrap gap-8px mb-12px>
                 <div
-                    v-for="(file, index) in pendingFiles"
-                    :key="file.name + index"
-                    flex items-center gap-8px
+                    v-for="pendingFile in pendingFiles"
+                    :key="pendingFile.id"
+                    flex items-center gap-8px flex-wrap
                     px-12px py-8px
                     rounded-8px
                     bg-gray-100
@@ -303,9 +524,28 @@ defineExpose({
                 >
                     <div i-ph-file text-gray-600 text-16px />
                     <div flex="~ col" gap-2px>
-                        <span body-12-medium text-black-700 max-w-150px truncate>{{ file.name }}</span>
-                        <span body-11-regular text-gray-500>{{ formatFileSize(file.size) }}</span>
+                        <span body-12-medium text-black-700 max-w-150px truncate>{{ pendingFile.file.name }}</span>
+                        <span body-11-regular text-gray-500>{{ formatFileSize(pendingFile.file.size) }}</span>
                     </div>
+                    <select
+                        v-if="fileInputVariables.length > 0"
+                        class="agent-file-variable-select"
+                        :value="pendingFile.inputName ?? ''"
+                        :disabled="isLocked"
+                        @change="updatePendingFileInput(pendingFile.id, $event)"
+                        @click.stop
+                    >
+                        <option value="" disabled>
+                            Selecionar variável
+                        </option>
+                        <option
+                            v-for="input in fileInputVariables"
+                            :key="input.id || input.name"
+                            :value="input.name"
+                        >
+                            {{ input.name }}
+                        </option>
+                    </select>
                     <TelaIconButton
                         p-4px
                         icon="i-ph-x"
@@ -314,11 +554,15 @@ defineExpose({
                         hover:bg-gray-200
                         transition
                         icon-class="text-gray-500 text-12px"
-                        @click="removeFile(index)"
+                        @click="removeFile(pendingFile.id)"
                     />
                 </div>
             </div>
 
+            <div v-if="hasUnmappedAgentFiles" text-orange-600 body-12-regular mb-8px>
+                Selecione uma variável para cada arquivo anexado.
+            </div>
+
             <div v-if="uploadError" text-red-600 body-12-regular mb-8px>
                 {{ uploadError }}
             </div>
@@ -424,5 +668,5 @@ defineExpose({
 </template>
 
 <style scoped>
-.input-container{border:.5px solid #e5e7eb;box-shadow:0 3px 10px 0 hsla(0,0%,64%,.08),0 12px 20px 0 hsla(0,0%,64%,.06)}.input-locked{background:var(--Base-Gray-gray-100,#f3f4f6);border:.5px solid var(--Base-Neutral-neutral-300,#d9d9d9);box-shadow:0 12px 20px 0 hsla(0,0%,64%,.06)}.editor-content{caret-color:#111827;color:#111827;max-height:200px;outline:none;overflow-y:auto;white-space:pre-wrap;word-break:break-word}.editor-content.is-empty:before{color:#bdc4cc;content:attr(data-placeholder);float:left;height:0;pointer-events:none}.icon-button:disabled{cursor:not-allowed;opacity:.5}.custom-scrollbar{scrollbar-color:#d1d5db transparent;scrollbar-width:thin}.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:3px}.stop-button{align-items:center;background:transparent;border:none;cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;position:relative;transition:opacity .15s ease;width:32px}.stop-button:hover{opacity:.8}.stop-button-ring{border:2px solid #e5e7eb;border-radius:50%;inset:0;position:absolute}.stop-button-ring:before{animation:spin 1s linear infinite;border:2px solid transparent;border-radius:50%;border-top-color:#111827;content:"";inset:-2px;position:absolute}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+.input-container{border:.5px solid #e5e7eb;box-shadow:0 3px 10px 0 hsla(0,0%,64%,.08),0 12px 20px 0 hsla(0,0%,64%,.06);position:relative;z-index:2}.input-locked{background:var(--Base-Gray-gray-100,#f3f4f6);border:.5px solid var(--Base-Neutral-neutral-300,#d9d9d9);box-shadow:0 12px 20px 0 hsla(0,0%,64%,.06)}.agent-inputs-panel{box-shadow:0 3px 10px 0 hsla(0,0%,64%,.06);position:relative;transform-origin:bottom center;will-change:max-height,opacity,transform,filter;z-index:1}.agent-inputs-panel-motion-enter-active,.agent-inputs-panel-motion-leave-active{overflow:hidden;transition:max-height .26s cubic-bezier(.2,.8,.2,1),opacity .18s ease,transform .26s cubic-bezier(.2,.8,.2,1),filter .22s ease}.agent-inputs-panel-motion-enter-from,.agent-inputs-panel-motion-leave-to{filter:blur(2px);max-height:0;opacity:0;transform:translateY(46px) scale(.985)}.agent-inputs-panel-motion-enter-to,.agent-inputs-panel-motion-leave-from{filter:blur(0);max-height:560px;opacity:1;transform:translateY(0) scale(1)}.agent-inputs-content{transform-origin:bottom center;will-change:max-height,opacity,transform,filter}.agent-inputs-content-enter-active,.agent-inputs-content-leave-active{overflow:hidden;transition:max-height .22s cubic-bezier(.2,.8,.2,1),opacity .16s ease,transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease}.agent-inputs-content-enter-from,.agent-inputs-content-leave-to{filter:blur(2px);max-height:0;opacity:0;transform:translateY(14px) scale(.985)}.agent-inputs-content-enter-to,.agent-inputs-content-leave-from{filter:blur(0);max-height:900px;opacity:1;transform:translateY(0) scale(1)}.agent-text-input{border:.5px solid #e5e7eb;border-radius:8px;color:#111827;font-size:13px;line-height:18px;min-height:64px;outline:none;padding:8px 10px;resize:vertical;width:100%}.agent-text-input:focus{border-color:#d1d5db}.agent-text-input:disabled{background-color:#f3f4f6;cursor:not-allowed}.agent-file-variable-select{background:#fff;border:.5px solid #d1d5db;border-radius:6px;color:#374151;font-size:12px;height:28px;max-width:160px;outline:none;padding:0 8px}.editor-content{caret-color:#111827;color:#111827;max-height:200px;outline:none;overflow-y:auto;white-space:pre-wrap;word-break:break-word}.editor-content.is-empty:before{color:#bdc4cc;content:attr(data-placeholder);float:left;height:0;pointer-events:none}.icon-button:disabled{cursor:not-allowed;opacity:.5}.custom-scrollbar{scrollbar-color:#d1d5db transparent;scrollbar-width:thin}.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:3px}.stop-button{align-items:center;background:transparent;border:none;cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;position:relative;transition:opacity .15s ease;width:32px}.stop-button:hover{opacity:.8}.stop-button-ring{border:2px solid #e5e7eb;border-radius:50%;inset:0;position:absolute}.stop-button-ring:before{animation:spin 1s linear infinite;border:2px solid transparent;border-radius:50%;border-top-color:#111827;content:"";inset:-2px;position:absolute}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
 </style>

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

@@ -1,6 +1,7 @@
 import type { ConversationFile, FileUploadInput, Message, ModelOption } from '../../types/chat.js';
 import type { DeepReadonly } from 'vue';
-import type { WorkspaceSettings } from '../../composables/useWorkspaceSettings.js';
+import type { WorkspaceSettings } from '../../types/workspace-settings-data.js';
+import type { TelaAgentInputVariable } from '../../types/tela-agent.js';
 type __VLS_Props = {
     disabled?: boolean;
     loading?: boolean;
@@ -12,8 +13,13 @@ type __VLS_Props = {
     messages?: Message[];
     conversationFiles?: ConversationFile[];
     workspaceSettings?: DeepReadonly<WorkspaceSettings> | null;
+    allowModelSelection?: boolean;
+    agentInputSchema?: DeepReadonly<TelaAgentInputVariable[]> | null;
+    agentInputSchemaLoading?: boolean;
+    showModelSelector?: boolean;
+    showCancelButton?: boolean;
 };
-declare function addFiles(files: File[]): void;
+declare function addFiles(files: File[], inputName?: string): void;
 type __VLS_ModelProps = {
     'model'?: ModelOption;
 };
@@ -24,10 +30,30 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     "update:model": (value: "claude-sonnet-4-5" | "claude-sonnet-4-6" | "claude-haiku-4-5" | "claude-opus-4-5" | "claude-opus-4-6") => any;
 } & {
     cancel: () => any;
-    send: (content: string, files: FileUploadInput[], model: "claude-sonnet-4-5" | "claude-sonnet-4-6" | "claude-haiku-4-5" | "claude-opus-4-5" | "claude-opus-4-6") => any;
+    send: (content: string, files: FileUploadInput[], model?: "claude-sonnet-4-5" | "claude-sonnet-4-6" | "claude-haiku-4-5" | "claude-opus-4-5" | "claude-opus-4-6" | undefined, agentInputs?: ({
+        type: "file";
+        name: string;
+        vaultRef: string;
+        filename: string;
+        metadata?: string | undefined;
+    } | {
+        type: "text";
+        name: string;
+        content: string;
+    })[] | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onCancel?: (() => any) | undefined;
-    onSend?: ((content: string, files: FileUploadInput[], model: "claude-sonnet-4-5" | "claude-sonnet-4-6" | "claude-haiku-4-5" | "claude-opus-4-5" | "claude-opus-4-6") => any) | undefined;
+    onSend?: ((content: string, files: FileUploadInput[], model?: "claude-sonnet-4-5" | "claude-sonnet-4-6" | "claude-haiku-4-5" | "claude-opus-4-5" | "claude-opus-4-6" | undefined, agentInputs?: ({
+        type: "file";
+        name: string;
+        vaultRef: string;
+        filename: string;
+        metadata?: string | undefined;
+    } | {
+        type: "text";
+        name: string;
+        content: string;
+    })[] | undefined) => any) | undefined;
     "onUpdate:model"?: ((value: "claude-sonnet-4-5" | "claude-sonnet-4-6" | "claude-haiku-4-5" | "claude-opus-4-5" | "claude-opus-4-6") => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,4 +1,5 @@
-import type { Conversation, ConversationWithMessages, Message } from '../types/chat.js';
+import type { Conversation, ConversationWithMessages, FileUploadInput, Message } from '../types/chat.js';
+import type { TelaAgentExecutionInput } from '../types/tela-agent.js';
 export declare function useChat(): {
     currentConversation: any;
     messages: any;
@@ -12,10 +13,7 @@ export declare function useChat(): {
     animatedTitle: any;
     loadConversation: (id: string) => Promise<void>;
     setConversation: (conv: Conversation | ConversationWithMessages) => void;
-    sendMessage: (content: string, files?: {
-        url: string;
-        name: string;
-    }[], model?: string) => Promise<Message | null>;
+    sendMessage: (content: string, files?: FileUploadInput[], model?: string, agentInputs?: TelaAgentExecutionInput[]) => Promise<Message | null>;
     retryMessage: (messageId: string) => Promise<boolean>;
     cancelConversation: () => Promise<boolean>;
     startPolling: any;

package/dist/runtime/composables/useChat.js

@@ -1,6 +1,11 @@
 import * as Sentry from "@sentry/nuxt";
 import { exportConversationToMarkdown } from "../utils/export-conversation.js";
+import { resolveChatStateScope } from "../utils/tela-chat.js";
 import { useConversationFileActions } from "./useConversationFiles.js";
+function resolveTelaAgentInputs(messageInputs, configuredInputs) {
+  const inputs = messageInputs ?? configuredInputs ?? void 0;
+  return inputs?.length ? inputs : void 0;
+}
 function getStepKey(step) {
   if (typeof step === "string") {
     return `text:${step.slice(0, 100)}`;
@@ -147,7 +152,11 @@ export function useChat() {
   const embedConfig = useEmbedConfig();
   const { user: authUser, activeOrganization } = useTelaApplicationAuth();
   const { addFilesToConversation } = useConversationFileActions();
-  const chatScope = computed(() => embedConfig?.workspaceId.value.trim() || activeOrganization.value?.id?.trim() || "default");
+  const isTelaAgentMode = computed(() => !!embedConfig?.telaAgentId.value);
+  const chatScope = computed(() => resolveChatStateScope(
+    embedConfig?.workspaceId.value || activeOrganization.value?.id,
+    embedConfig?.telaAgentId.value
+  ));
   const currentConversationBuckets = useState("chat-current-conversation", () => ({}));
   const messageBuckets = useState("chat-messages", () => ({}));
   const currentConversation = computed({
@@ -271,7 +280,7 @@ export function useChat() {
       loading.value = false;
     }
   };
-  const sendMessage = async (content, files, model) => {
+  const sendMessage = async (content, files, model, agentInputs) => {
     if (!currentConversation.value)
       return null;
     sending.value = true;
@@ -307,11 +316,23 @@ export function useChat() {
     };
     messages.value = [...messages.value, optimisticUserMessage, optimisticAssistantMessage];
     try {
+      const workspaceSettingsSnapshot = embedConfig?.workspaceSettings.value;
+      const resolvedAgentInputs = resolveTelaAgentInputs(agentInputs, embedConfig?.telaAgentInputs?.value);
+      const body = {
+        content,
+        files,
+        ...isTelaAgentMode.value ? {
+          ...resolvedAgentInputs ? { agentInputs: resolvedAgentInputs } : {}
+        } : {
+          model,
+          ...workspaceSettingsSnapshot !== void 0 ? { workspaceSettingsSnapshot } : {}
+        }
+      };
       const response = await $fetch(
         chatApi.path(`/conversations/${currentConversation.value.id}/messages`),
         chatApi.withChatHeaders({
           method: "POST",
-          body: { content, files, model }
+          body
         })
       );
       messages.value = messages.value.map((msg) => {

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

@@ -0,0 +1,10 @@
+export type ChatActionPayload = {
+    name: string;
+    data: unknown;
+    messageId?: string;
+};
+export type ChatActionHandler = (payload: ChatActionPayload) => void;
+export declare function provideChatAction(handler: ChatActionHandler): void;
+export declare function useChatAction(): {
+    emit(name: string, data?: unknown, messageId?: string): void;
+};

package/dist/runtime/composables/useChatAction.js

@@ -0,0 +1,12 @@
+const CHAT_ACTION_KEY = Symbol("chat-nuxt:action");
+export function provideChatAction(handler) {
+  provide(CHAT_ACTION_KEY, handler);
+}
+export function useChatAction() {
+  const handler = inject(CHAT_ACTION_KEY, null);
+  return {
+    emit(name, data, messageId) {
+      handler?.({ name, data, messageId });
+    }
+  };
+}

package/dist/runtime/composables/useChatApi.js

@@ -9,6 +9,10 @@ export function useChatApi() {
     if (workspaceId) {
       mergedHeaders["x-chat-workspace-id"] = workspaceId;
     }
+    const telaAgentId = embedConfig?.telaAgentId.value;
+    if (telaAgentId) {
+      mergedHeaders["x-chat-tela-agent-id"] = telaAgentId;
+    }
     return Object.keys(mergedHeaders).length > 0 ? mergedHeaders : void 0;
   }
   function withChatHeaders(options) {

package/dist/runtime/composables/useConversations.js

@@ -1,4 +1,5 @@
 import * as Sentry from "@sentry/nuxt";
+import { resolveChatStateScope } from "../utils/tela-chat.js";
 function sortConversationsByUpdatedAt(conversations) {
   return [...conversations].sort(
     (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
@@ -33,7 +34,11 @@ export function useConversations() {
   const mutationVersionBuckets = useState("conversations-mutation-version", () => ({}));
   const deletedIdBuckets = useState("conversations-deleted-ids", () => ({}));
   const mutatedIdBuckets = useState("conversations-mutated-ids", () => ({}));
-  const workspaceScope = computed(() => embedConfig?.workspaceId.value.trim() || activeOrganization.value?.id?.trim() || "default");
+  const isTelaAgentMode = computed(() => !!embedConfig?.telaAgentId.value);
+  const workspaceScope = computed(() => resolveChatStateScope(
+    embedConfig?.workspaceId.value || activeOrganization.value?.id,
+    embedConfig?.telaAgentId.value
+  ));
   const conversations = computed({
     get: () => conversationBuckets.value[workspaceScope.value] ?? [],
     set: (value) => {
@@ -166,7 +171,7 @@ export function useConversations() {
         chatApi.path("/conversations"),
         chatApi.withChatHeaders({
           method: "POST",
-          body: options?.model ? { model: options.model } : void 0
+          body: !isTelaAgentMode.value && options?.model ? { model: options.model } : void 0
         })
       );
       commitConversations([conversation, ...conversations.value], conversation.id);
@@ -222,6 +227,7 @@ export function useConversations() {
         model: updated.model,
         appliedSettingsAt: updated.appliedSettingsAt,
         appliedSettingsSnapshot: cloneAppliedSettingsSnapshot(updated.appliedSettingsSnapshot),
+        telaAgentId: updated.telaAgentId,
         createdBy: updated.createdBy,
         createdAt: updated.createdAt,
         updatedAt: updated.updatedAt

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

@@ -1,19 +1,29 @@
-import type { DeepReadonly, MaybeRefOrGetter, Ref } from 'vue';
+import type { Component, DeepReadonly, MaybeRefOrGetter, Ref } from 'vue';
+import type { TelaAgentExecutionInput } from '../types/tela-agent.js';
+import type { WorkspaceSettings } from '../types/workspace-settings-data.js';
 import type { ChatLoadingMessageMode } from '../utils/chat-loading-messages.js';
-import type { WorkspaceSettings } from './useWorkspaceSettings.js';
+type ConfiguredTelaAgentInputs = DeepReadonly<TelaAgentExecutionInput[]> | null | undefined;
 export type EmbedConfig = {
     workspaceId: Ref<string>;
+    telaAgentId: Ref<string | null>;
+    telaAgentInputs: Ref<ConfiguredTelaAgentInputs>;
     workspaceSettings: Ref<DeepReadonly<WorkspaceSettings> | WorkspaceSettings | null | undefined>;
     hideSidebar: Ref<boolean>;
     loadingMessages: Ref<readonly string[] | null | undefined>;
     loadingMessagesMode: Ref<ChatLoadingMessageMode | null | undefined>;
+    customComponents: Ref<Record<string, Component> | undefined>;
+    customHtmlTags: Ref<readonly string[] | undefined>;
 };
 type EmbedConfigInput = {
     workspaceId: MaybeRefOrGetter<string>;
+    telaAgentId?: MaybeRefOrGetter<string | null | undefined>;
+    telaAgentInputs?: MaybeRefOrGetter<ConfiguredTelaAgentInputs>;
     workspaceSettings?: MaybeRefOrGetter<DeepReadonly<WorkspaceSettings> | WorkspaceSettings | null | undefined>;
     hideSidebar?: MaybeRefOrGetter<boolean | undefined>;
     loadingMessages?: MaybeRefOrGetter<readonly string[] | null | undefined>;
     loadingMessagesMode?: MaybeRefOrGetter<ChatLoadingMessageMode | null | undefined>;
+    customComponents?: MaybeRefOrGetter<Record<string, Component> | undefined>;
+    customHtmlTags?: MaybeRefOrGetter<readonly string[] | undefined>;
 };
 type ProvideEmbedConfigOptions = {
     syncGlobal?: boolean;