@meistrari/chat-nuxt 1.13.0 → 2.0.0

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

@@ -1,688 +0,0 @@
-<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";
-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: DEFAULT_MODEL } });
-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>