front_ponto_eletronico/src/components/Train.vue

<template>
  <v-container fluid>
    <v-card class="mx-auto card" width="100%">
      <v-toolbar class="header">
        <v-toolbar-title class="text">Criar Novo Agente</v-toolbar-title>
      </v-toolbar>
      
      <v-card-text>
        <v-form @submit.prevent="createAgent">
          <v-text-field
            v-model="agentName"
            label="Nome do Agente*"
            placeholder="Ex: Assistente de Vendas"
            variant="outlined"
            required
            class="mb-4"
            :rules="[v => !!v || 'Nome é obrigatório']"
          ></v-text-field>
          
          <v-text-field
            v-model="agentDescription"
            label="Descrição*"
            placeholder="Ex: Especialista em atendimento ao cliente"
            variant="outlined"
            required
            class="mb-4"
            :rules="[v => !!v || 'Descrição é obrigatória']"
          ></v-text-field>
          
          <v-select
            v-model="agentFunction"
            label="Função do Agente*"
            :items="functionOptions"
            variant="outlined"
            required
            class="mb-4"
            :rules="[v => !!v || 'Função é obrigatória']"
          ></v-select>
          
          <v-select
            v-model="agentPersonality"
            label="Personalidade*"
            :items="personalityOptions"
            variant="outlined"
            required
            class="mb-4"
            :rules="[v => !!v || 'Personalidade é obrigatória']"
          ></v-select>
          
          <v-select
            v-model="openAiModel"
            label="Modelo OpenAI*"
            :items="modelOptions"
            variant="outlined"
            required
            class="mb-4"
            :rules="[v => !!v || 'Modelo é obrigatório']"
          ></v-select>
          
          <v-select
            v-model="toolType"
            label="Tipo de Agente*"
            :items="toolOptions"
            variant="outlined"
            required
            class="mb-4"
            :rules="[v => !!v || 'Tipo é obrigatório']"
          ></v-select>
          
          <v-btn 
            color="primary" 
            block 
            type="submit"
            :loading="isLoading"
          >
            Criar Agente
          </v-btn>
        </v-form>
      </v-card-text>
    </v-card>
  </v-container>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth'; // Importe sua store de autenticação

const router = useRouter();
const authStore = useAuthStore();
const apiUrl = import.meta.env.VITE_API_AGENT;

// Variáveis do formulário
const agentName = ref('');
const agentDescription = ref('');
const agentFunction = ref('assistente geral');
const agentPersonality = ref('neutro');
const openAiModel = ref('gpt-4');
const toolType = ref('chat');
const isLoading = ref(false);

// Opções para selects
const functionOptions = [
  'assistente geral',
  'suporte técnico',
  'vendas',
  'atendimento ao cliente',
  'recursos humanos',
  'financeiro'
];

const personalityOptions = [
  'neutro',
  'formal',
  'amigável',
  'técnico',
  'entusiasta',
  'profissional'
];

const modelOptions = [
  'gpt-4',
  'gpt-3.5-turbo'
];

const toolOptions = [
  'chat',
  'db'
];

const createAgent = async () => {
  if (!agentName.value || !agentDescription.value || !toolType.value) {
    alert('Por favor, preencha todos os campos obrigatórios');
    return;
  }

  isLoading.value = true;
  try {
    const payload = {
      user_id: authStore.user?.id, // Remove o fallback '1' (obrigatório ter usuário logado)
      name: agentName.value,
      description: agentDescription.value,
      personality: agentPersonality.value,
      function: agentFunction.value,
      model: openAiModel.value,
      tool_type: toolType.value,
    };

    const response = await axios.post(`${apiUrl}/new-api/create-agent`, payload);
    window.dispatchEvent(new CustomEvent('agent-created'));
    router.push({ name: 'agentList' });
  } catch (error) {
    console.error('Erro ao criar agente:', error);
    if (error.response?.status === 400) {
      alert('Usuário não autenticado. Faça login novamente.');
      router.push({ name: 'login' }); // Redireciona para login se o user_id for inválido
    }
  } finally {
    isLoading.value = false;
  }
};
</script>

<style scoped>
.header {
  background: linear-gradient(145deg, #eeeded, #ffffff);
}

.card {
  color: #333;
  border-radius: 25px;
  background: linear-gradient(145deg, #eeeded, #ffffff);
  box-shadow: 20px 20px 60px #d9d9d9,
             -20px -20px 60px #ffffff;
  padding: 20px;
}

.text {
  font-weight: 600;
  color: #333;
}
</style>