chatbot/src/components/MessageComposer.vue

<template>
  <v-card class="composer-card mt-3" rounded="xl" elevation="0">
    <v-card-text class="pa-4">
      <v-textarea
        :model-value="input"
        label="¿Cómo te sientes hoy?"
        placeholder="Ej: hoy me siento ansioso pero con ganas de algo diferente..."
        auto-grow
        rows="2"
        variant="outlined"
        color="primary"
        hide-details
        :disabled="loading"
        @update:model-value="$emit('update:input', $event)"
        @keydown.enter.exact.prevent="$emit('analyze')"
      />
      <div class="composer-row mt-3">
        <v-select
          :model-value="estrategia"
          :items="strategyItems"
          item-title="title"
          item-value="value"
          label="Estrategia"
          variant="outlined"
          color="primary"
          density="comfortable"
          hide-details
          class="strategy-select"
          :disabled="loading"
          @update:model-value="$emit('update:estrategia', $event)"
        />
        <v-btn
          color="primary"
          variant="flat"
          :loading="loading"
          :disabled="loading"
          prepend-icon="mdi-brain"
          rounded="lg"
          class="analyze-btn"
          @click="$emit('analyze')"
        >
          Analizar
        </v-btn>
      </div>
    </v-card-text>
  </v-card>
</template>

<script setup>
const strategyItems = [
  { title: "Básica",       value: "v1" },
  { title: "Avanzada",     value: "v2" },
  { title: "Experimental", value: "v3" },
];

defineProps({
  input:      { type: String,  default: "" },
  loading:    { type: Boolean, default: false },
  estrategia: { type: String,  default: "v1" },
});

defineEmits(["update:input", "analyze", "update:estrategia"]);
</script>

<style scoped>
.composer-card {
  border: 1.5px solid var(--vs-border);
  background: var(--vs-panel);
  backdrop-filter: blur(var(--vs-glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--vs-glass-blur)) saturate(120%);
  box-shadow: var(--vs-card-shadow);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.composer-card:focus-within {
  border-color: rgba(102, 126, 234, 0.45);
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
}

.composer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.strategy-select { max-width: 160px; }

.analyze-btn {
  font-weight: 600;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.analyze-btn:hover:not(:disabled) {
  box-shadow: 0 6px 18px rgba(102, 126, 234, 0.35);
  transform: translateY(-1px);
}

:deep(.v-field__input) {
  color: var(--vs-text) !important;
  font-size: 0.94rem;
}
</style>