amayo/README/README_EDITOR.md

🤖 Amayo Bot Editor

Editor visual estilo VS Code construido con Tauri, TypeScript y Vue para gestionar comandos y eventos de tu bot de Discord.

✨ Características

• 📊 Dashboard con Estadísticas: Visualiza en tiempo real:

  • Comandos de mensaje (prefix-based)
  • Comandos slash
  • Eventos estándar de Discord.js
  • Eventos custom/extras

• 📝 Editor de Código Integrado:

  • Monaco Editor (el mismo de VS Code)
  • Sintaxis highlighting para TypeScript
  • Autocompletado inteligente
  • Shortcuts de teclado (Ctrl+S para guardar)

• ➕ Creadores Visuales:

  • Crear comandos slash y de mensaje con GUI
  • Crear eventos estándar y custom
  • Formularios para metadatos
  • Snippets predefinidos para Discord.js

• 🔍 Explorador de Archivos:

  • Navegación intuitiva por comandos y eventos
  • Iconos diferenciados por tipo
  • Edición en tiempo real

🚀 Instalación

Prerrequisitos

• Node.js 18+
• Rust (para compilar Tauri)
• npm o yarn

Pasos

1. Navega al directorio del editor:

cd AEditor

2. Instala las dependencias:

npm install

3. Ejecuta en modo desarrollo:

npm run tauri dev

4. Para compilar la aplicación:

npm run tauri build

📖 Uso

Crear un Comando

1. Haz clic en "➕ Nuevo Comando" en el sidebar
2. Selecciona el tipo:
   • Comando de Mensaje: Usa prefix (ej: !ping)
   • Comando Slash: Usa / (ej: /ping)
3. Completa los metadatos:
   • Nombre del comando
   • Descripción
   • Categoría (opcional)
   • Cooldown (opcional)
   • Aliases (solo para comandos de mensaje)
4. Escribe la lógica en el editor Monaco
5. Usa el botón "📝 Insertar Snippet" para código común
6. Guarda con "➕ Crear Comando"

Crear un Evento

1. Haz clic en "➕ Nuevo Evento" en el sidebar
2. Selecciona el tipo:
   • Evento Estándar: Eventos de Discord.js (ready, messageCreate, etc.)
   • Evento Custom: Funciones que se ejecutan desde otros eventos
3. Elige el evento de Discord (si es estándar)
4. Escribe el nombre del archivo
5. Implementa la lógica en el editor
6. Guarda con "➕ Crear Evento"

Editar Archivos Existentes

1. En el sidebar, navega a la sección de Comandos o Eventos
2. Haz clic en el archivo que deseas editar
3. Edita el código en el editor Monaco
4. Guarda con Ctrl+S o el botón "💾 Guardar"

🎨 Estructura del Proyecto

AEditor/
├── src/
│   ├── components/
│   │   ├── Sidebar.vue           # Panel lateral con estadísticas
│   │   ├── MonacoEditor.vue      # Editor de código
│   │   ├── CommandCreator.vue    # Creador de comandos
│   │   └── EventCreator.vue      # Creador de eventos
│   ├── types/
│   │   └── bot.ts                # Tipos TypeScript
│   └── App.vue                   # Componente principal
├── src-tauri/
│   └── src/
│       └── lib.rs                # Comandos Rust/Tauri
└── package.json

🛠️ Tecnologías

• Frontend: Vue 3 + TypeScript + Vite
• Editor: Monaco Editor
• Desktop: Tauri (Rust)
• Estilos: CSS personalizado (tema VS Code Dark)

📝 Tipos de Comandos Soportados

Comandos de Mensaje (Message Commands)

export default {
  name: "ping",
  type: 'message' as const,
  description: "Responde con pong",
  aliases: ["p", "latencia"],
  cooldown: 5,
  async run(message: Message, args: string[], client: Amayo) {
    await message.reply("¡Pong!");
  }
}

Comandos Slash (Slash Commands)

export default {
  name: "ping",
  description: "Responde con pong",
  type: 'slash' as const,
  cooldown: 5,
  async run(interaction: ChatInputCommandInteraction, client: Amayo) {
    await interaction.reply({
      content: "¡Pong!",
      ephemeral: true
    });
  }
}

🎯 Tipos de Eventos Soportados

Eventos Estándar

Eventos nativos de Discord.js como ready, messageCreate, interactionCreate, etc.

import { bot } from "../main";
import { Events } from "discord.js";

bot.on(Events.MessageCreate, async (message) => {
  // Tu lógica aquí
});

Eventos Custom/Extras

Funciones que se ejecutan desde otros eventos (por ejemplo, desde messageCreate):

import { Message } from "discord.js";

export async function alliance(message: Message) {
  // Tu lógica custom
}

⌨️ Shortcuts

• Ctrl+S: Guardar archivo actual
• Ctrl+N: Nuevo comando (cuando esté implementado)
• F5: Actualizar estadísticas del proyecto

🔧 Comandos Tauri Disponibles

• get_project_root(): Obtiene la ruta raíz del proyecto
• scan_commands(projectRoot): Escanea todos los comandos
• scan_events(projectRoot): Escanea todos los eventos
• get_project_stats(projectRoot): Obtiene estadísticas del proyecto
• read_file_content(filePath): Lee el contenido de un archivo
• write_file_content(filePath, content): Escribe contenido a un archivo

🐛 Solución de Problemas

Error al cargar el proyecto

Asegúrate de que estás ejecutando el editor desde el directorio AEditor y que existe la carpeta src con comandos y eventos en el nivel superior.

Monaco Editor no se muestra

Verifica que Monaco Editor esté correctamente instalado:

npm list monaco-editor

Errores de compilación de Rust

Asegúrate de tener Rust instalado y actualizado:

rustup update

📄 Licencia

Este proyecto es parte del bot Amayo y sigue la misma licencia del proyecto principal.

🤝 Contribuciones

Las contribuciones son bienvenidas. Por favor abre un issue o pull request en el repositorio principal.

📮 Soporte

Si encuentras algún problema o tienes sugerencias, abre un issue en el repositorio de GitHub.

---

Hecho con ❤️ para la comunidad de Amayo Bot