@meistrari/chat-nuxt 1.13.0 → 2.0.0

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

@@ -0,0 +1,692 @@
+<script setup>
+import { useFileUpload } from "../../files/composables/file-upload";
+import { useInputHistory } from "../composables/input-history";
+import { useMentionAutocomplete } from "../composables/mention-autocomplete";
+import { MAX_FILE_SIZE, MAX_FILES } from "../../workspace/composables/workspace-context-files";
+import { defaultChatModel } from "../../types/schemas/chat/models.js";
+import { getAgentInputReadiness } from "../input-readiness";
+import { formatFileSize } from "../../files/formatting";
+import { getMimeIcon, getMimeLabel } from "../../files/icons";
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  creatorName: { type: String, required: false },
+  creatorEmail: { type: String, required: false },
+  creatorImage: { type: String, required: false },
+  centered: { type: Boolean, required: false },
+  hasDisclaimer: { type: Boolean, required: false },
+  messages: { type: Array, required: false },
+  conversationFiles: { type: Array, required: false },
+  workspaceSettings: { type: null, required: false },
+  allowModelSelection: { type: Boolean, required: false },
+  agentInputSchema: { type: [Array, 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: defaultChatModel } });
+const { uploadFiles, uploading, uploadError } = useFileUpload();
+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;
+const fileItems = computed(() => {
+  const items = [];
+  if (props.conversationFiles) {
+    for (const f of props.conversationFiles) {
+      items.push({
+        id: f.url,
+        label: f.name,
+        description: getMimeLabel(f.mimeType),
+        icon: getMimeIcon(f.mimeType),
+        category: "file"
+      });
+    }
+  }
+  if (props.workspaceSettings?.contextFiles) {
+    for (const f of props.workspaceSettings.contextFiles) {
+      if (!items.some((i) => i.id === f.url)) {
+        items.push({
+          id: f.url,
+          label: f.name,
+          description: "Contexto",
+          icon: getMimeIcon(f.mimeType),
+          category: "file"
+        });
+      }
+    }
+  }
+  return items;
+});
+const skillItems = computed(() => {
+  const items = [];
+  if (props.workspaceSettings?.externalSkills) {
+    for (const s of props.workspaceSettings.externalSkills) {
+      items.push({
+        id: s.ref,
+        label: s.name,
+        description: s.description,
+        icon: "i-ph-lightning",
+        category: "skill"
+      });
+    }
+  }
+  if (props.workspaceSettings?.canvasTools) {
+    for (const t of props.workspaceSettings.canvasTools) {
+      items.push({
+        id: t.canvasId,
+        label: t.description || t.name,
+        description: "Canvas",
+        icon: "i-ph-wrench",
+        category: "canvas",
+        variables: t.variables
+      });
+    }
+  }
+  return items;
+});
+const mentionAutocomplete = useMentionAutocomplete({
+  editorRef,
+  fileItems,
+  skillItems,
+  disabled: isLocked,
+  onInsert: handleInput
+});
+const canSend = computed(
+  () => content.value.trim().length > 0 && !isLocked.value && !uploading.value && !props.agentInputSchemaLoading && agentInputReadiness.value.ready
+);
+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) {
+  const target = event.target;
+  if (!target.files)
+    return;
+  const newFiles = Array.from(target.files).filter((file) => {
+    if (file.size > MAX_FILE_SIZE) {
+      return false;
+    }
+    return true;
+  });
+  queueFiles(newFiles, selectedUploadInputName.value);
+  selectedUploadInputName.value = void 0;
+  target.value = "";
+}
+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 = [];
+  const queuedFiles = [...pendingFiles.value];
+  if (queuedFiles.length > 0) {
+    try {
+      files = await uploadFiles(queuedFiles.map((item) => item.file));
+    } catch {
+      return;
+    }
+  }
+  const taggedContent = mentionAutocomplete.buildTaggedContent();
+  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(() => {
+    editorRef.value?.focus();
+  });
+}
+const MENTION_RE = /<(file_mention|skill_mention|canvas_mention)\s+name="([^"]*)"(?:\s+(?:url|ref|canvas-id)="([^"]*)")?(?:\s+description="([^"]*)")?[^>]*>[\s\S]*?<\/\1>/g;
+const TAG_TO_CATEGORY = {
+  file_mention: "file",
+  skill_mention: "skill",
+  canvas_mention: "canvas"
+};
+function createMentionPill(category, label, id, description, variables) {
+  const span = document.createElement("span");
+  span.className = `mention-tag mention-tag-${category}`;
+  span.contentEditable = "false";
+  span.dataset.mentionId = id;
+  span.dataset.mentionCategory = category;
+  span.dataset.mentionLabel = label;
+  if (description)
+    span.dataset.mentionDescription = description;
+  if (variables)
+    span.dataset.mentionVariables = variables;
+  const icon = document.createElement("span");
+  icon.className = category === "file" ? "i-ph-note-blank" : category === "canvas" ? "i-ph-wrench" : "i-ph-hexagon";
+  icon.setAttribute("aria-hidden", "true");
+  span.appendChild(icon);
+  span.appendChild(document.createTextNode(label));
+  return span;
+}
+function setEditorContent(text) {
+  if (!editorRef.value)
+    return;
+  restoringHistory = true;
+  editorRef.value.innerHTML = "";
+  let lastIndex = 0;
+  let match;
+  MENTION_RE.lastIndex = 0;
+  while ((match = MENTION_RE.exec(text)) !== null) {
+    const before = text.slice(lastIndex, match.index);
+    if (before)
+      editorRef.value.appendChild(document.createTextNode(before));
+    const tag = match[1];
+    const label = match[2] ?? "";
+    const id = match[3] ?? "";
+    const description = match[4];
+    const category = TAG_TO_CATEGORY[tag ?? ""] ?? "skill";
+    const canvasItem = category === "canvas" ? skillItems.value.find((s) => s.id === id) : void 0;
+    const variables = canvasItem?.variables ? JSON.stringify(canvasItem.variables) : void 0;
+    editorRef.value.appendChild(createMentionPill(category, label, id, description, variables));
+    editorRef.value.appendChild(document.createTextNode("\xA0"));
+    lastIndex = MENTION_RE.lastIndex;
+  }
+  const remaining = text.slice(lastIndex);
+  if (remaining)
+    editorRef.value.appendChild(document.createTextNode(remaining));
+  content.value = (editorRef.value.textContent ?? "").replace(/\u00A0/g, " ");
+  const range = document.createRange();
+  range.selectNodeContents(editorRef.value);
+  range.collapse(false);
+  const sel = window.getSelection();
+  sel?.removeAllRanges();
+  sel?.addRange(range);
+  nextTick(() => {
+    restoringHistory = false;
+  });
+}
+function handleKeydown(e) {
+  mentionAutocomplete.handleKeydown(e);
+  if (e.defaultPrevented)
+    return;
+  if (e.key === "ArrowUp" && !e.shiftKey && (!content.value.trim() || inputHistory.isNavigating.value)) {
+    const prev = inputHistory.navigateUp(mentionAutocomplete.buildTaggedContent());
+    if (prev !== null) {
+      e.preventDefault();
+      setEditorContent(prev);
+    }
+    return;
+  }
+  if (e.key === "ArrowDown" && !e.shiftKey && inputHistory.isNavigating.value) {
+    const next = inputHistory.navigateDown();
+    if (next !== null) {
+      e.preventDefault();
+      setEditorContent(next);
+    }
+    return;
+  }
+  if (e.key === "Enter") {
+    e.preventDefault();
+    if (!e.shiftKey) {
+      handleSend();
+    } else {
+      const sel = window.getSelection();
+      if (sel && sel.rangeCount > 0) {
+        const range = sel.getRangeAt(0);
+        range.deleteContents();
+        const br = document.createElement("br");
+        range.insertNode(br);
+        const isAtEnd = br.nextSibling === null || br.nextSibling.nodeType === Node.TEXT_NODE && br.nextSibling.data === "";
+        if (isAtEnd) {
+          const sentinel = document.createElement("br");
+          sentinel.dataset.sentinel = "true";
+          br.after(sentinel);
+        }
+        const newRange = document.createRange();
+        newRange.setStartAfter(br);
+        newRange.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(newRange);
+        handleInput();
+      }
+    }
+  }
+}
+function handleBlur() {
+  setTimeout(() => mentionAutocomplete.dismiss(), 100);
+}
+function handleInput() {
+  content.value = (editorRef.value?.textContent ?? "").replace(/\u00A0/g, " ");
+  if (!restoringHistory)
+    inputHistory.resetNavigation();
+  mentionAutocomplete.detectTrigger();
+}
+function handlePaste(e) {
+  e.preventDefault();
+  const text = e.clipboardData?.getData("text/plain") ?? "";
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0)
+    return;
+  const range = sel.getRangeAt(0);
+  range.deleteContents();
+  const textNode = document.createTextNode(text);
+  range.insertNode(textNode);
+  range.setStartAfter(textNode);
+  range.collapse(true);
+  sel.removeAllRanges();
+  sel.addRange(range);
+  handleInput();
+}
+function focusEditor() {
+  if (isLocked.value)
+    return;
+  editorRef.value?.focus();
+}
+function addFiles(files, inputName) {
+  const validFiles = files.filter((file) => {
+    if (file.size > MAX_FILE_SIZE) {
+      return false;
+    }
+    return true;
+  });
+  queueFiles(validFiles, inputName);
+}
+function setDraft(text) {
+  content.value = text;
+  if (editorRef.value) {
+    editorRef.value.textContent = text;
+    const range = document.createRange();
+    range.selectNodeContents(editorRef.value);
+    range.collapse(false);
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+    if (range)
+      selection?.addRange(range);
+  }
+  nextTick(() => {
+    editorRef.value?.focus();
+  });
+}
+defineExpose({
+  addFiles,
+  setDraft
+});
+</script>
+
+<template>
+    <div :class="centered ? 'w-full' : hasDisclaimer ? 'px-24px' : 'px-24px pb-24px'" bg-transparent>
+        <div :class="centered ? 'w-full max-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="pendingFile in pendingFiles"
+                    :key="pendingFile.id"
+                    flex items-center gap-8px flex-wrap
+                    px-12px py-8px
+                    rounded-8px
+                    bg-gray-100
+                    b=".5px gray-200"
+                >
+                    <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>{{ 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"
+                        rounded-4px
+                        color="secondary"
+                        hover:bg-gray-200
+                        transition
+                        icon-class="text-gray-500 text-12px"
+                        @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>
+
+            <input
+                ref="fileInputRef"
+                type="file"
+                multiple
+                hidden
+                @change="handleFileSelect"
+            >
+
+            <div relative>
+                <ChatMentionDropdown
+                    v-if="mentionAutocomplete.isOpen"
+                    :items="mentionAutocomplete.filteredItems"
+                    :highlighted-index="mentionAutocomplete.highlightedIndex"
+                    :trigger="mentionAutocomplete.activeTrigger"
+                    :query="mentionAutocomplete.query"
+                    @select="mentionAutocomplete.selectItem"
+                />
+            </div>
+
+            <div
+                flex="~ col"
+                gap-8px
+                p-16px
+                rounded-16px
+                class="input-container"
+                transition
+                :class="[
+  content.length > 0 && !isLocked && 'b-gray-300',
+  !isLocked && (centered ? 'bg-white' : 'bg-transparent'),
+  isLocked ? 'input-locked cursor-not-allowed' : 'cursor-text'
+]"
+                @click="focusEditor"
+            >
+                <div
+                    ref="editorRef"
+                    class="editor-content custom-scrollbar"
+                    :class="{ 'is-empty': !content.trim() }"
+                    data-placeholder="Escreva sua mensagem, @ para adicionar arquivos, / para skills"
+                    w-full
+                    min-h-20px
+                    text-16px
+                    font-normal
+                    leading-20px
+                    tracking--0.2px
+                    focus:outline-none
+                    :contenteditable="!isLocked"
+                    @keydown="handleKeydown"
+                    @input="handleInput"
+                    @paste="handlePaste"
+                    @blur="handleBlur"
+                />
+                <div flex items-center gap-8px>
+                    <ChatModelSelector v-if="isModelSelectorEnabled" v-model="selectedModel" :disabled="isLocked" @click.stop />
+                    <div flex-1 />
+                    <TelaTooltip :content="pendingFiles.length >= MAX_FILES ? 'Limite de arquivos atingido' : 'Anexar arquivo'" side="top">
+                        <TelaIconButton
+                            icon="i-ph-paperclip"
+                            size="md"
+                            color="secondary"
+                            class="rounded-8px! p-6px! transition-colors" :class="[
+  !isLocked && 'hover:bg-gray-50!'
+]"
+                            icon-class="text-gray-300 text-20px"
+                            :disabled="isLocked || pendingFiles.length >= MAX_FILES"
+                            @click="openFileDialog"
+                        />
+                    </TelaTooltip>
+                    <TelaTooltip :content="loading && isCancelEnabled ? 'Parar gera\xE7\xE3o' : 'Enter para enviar'" side="top">
+                        <button
+                            v-if="loading && isCancelEnabled"
+                            class="stop-button"
+                            @click="emit('cancel')"
+                        >
+                            <span class="stop-button-ring" />
+                            <span i-ph-stop-fill text-14px text-gray-900 />
+                        </button>
+                        <TelaIconButton
+                            v-else
+                            :icon="uploading ? 'i-ph-circle-notch' : 'i-ph-arrow-up'"
+                            size="md"
+                            color="secondary"
+                            class="rounded-10px! p-6px! transition-colors"
+                            :class="[
+  canSend ? 'bg-black-900! text-white! hover:bg-black-800!' : 'bg-gray-100! hover:bg-gray-200!',
+  uploading ? 'animate-spin' : ''
+]"
+                            :icon-class="[
+  'text-20px',
+  canSend ? 'text-white' : 'text-gray-400'
+].join(' ')"
+                            :disabled="!canSend"
+                            @click="handleSend"
+                        />
+                    </TelaTooltip>
+                </div>
+            </div>
+        </div>
+    </div>
+</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);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}@media (max-width:480px){.custom-scrollbar{scrollbar-width:none}.custom-scrollbar::-webkit-scrollbar{display:none}}.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>