Initial commit - agent-ui project
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
136
frontend/src/components/Canvas.vue
Normal file
136
frontend/src/components/Canvas.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useCanvasStore } from '../stores/canvas'
|
||||
|
||||
const canvasStore = useCanvasStore()
|
||||
|
||||
onMounted(async () => {
|
||||
// Importar webmcp - esto crea el widget automáticamente
|
||||
const WebMCPModule = await import('@nucleoriofrio/webmcp/src/webmcp.js')
|
||||
const WebMCP = WebMCPModule.default || WebMCPModule
|
||||
|
||||
const webmcp = new WebMCP({
|
||||
color: '#6366f1',
|
||||
position: 'bottom-right',
|
||||
inactivityTimeout: 60 * 60 * 1000 // 1 hora
|
||||
})
|
||||
|
||||
// Registrar herramientas para el canvas
|
||||
registerCanvasTools(webmcp)
|
||||
|
||||
// Exponer webmcp globalmente para debug
|
||||
;(window as any).webmcp = webmcp
|
||||
})
|
||||
|
||||
function registerCanvasTools(mcp: any) {
|
||||
// render_html: Renderiza HTML en el canvas con soporte para scripts inline
|
||||
mcp.registerTool(
|
||||
'render_html',
|
||||
'Renderiza HTML en el canvas. Soporta <script> tags que se ejecutan automáticamente y <style> tags.',
|
||||
{
|
||||
type: 'object',
|
||||
properties: {
|
||||
html: {
|
||||
type: 'string',
|
||||
description: 'El código HTML a renderizar (puede incluir <script> y <style> tags)'
|
||||
},
|
||||
mode: {
|
||||
type: 'string',
|
||||
enum: ['replace', 'append', 'prepend'],
|
||||
description: 'Modo: replace (reemplaza), append (agrega al final), prepend (al inicio)'
|
||||
}
|
||||
},
|
||||
required: ['html']
|
||||
},
|
||||
(args: { html: string; mode?: string }) => {
|
||||
const container = document.getElementById('canvas-content')
|
||||
if (!container) return 'Error: canvas no encontrado'
|
||||
|
||||
// Quitar placeholder si existe
|
||||
const placeholder = container.querySelector('.canvas-placeholder')
|
||||
if (placeholder) placeholder.remove()
|
||||
|
||||
const mode = args.mode || 'replace'
|
||||
if (mode === 'replace') {
|
||||
container.innerHTML = args.html
|
||||
} else if (mode === 'append') {
|
||||
container.insertAdjacentHTML('beforeend', args.html)
|
||||
} else if (mode === 'prepend') {
|
||||
container.insertAdjacentHTML('afterbegin', args.html)
|
||||
}
|
||||
|
||||
// Ejecutar scripts inline
|
||||
const scripts = container.querySelectorAll('script')
|
||||
scripts.forEach((oldScript) => {
|
||||
const newScript = document.createElement('script')
|
||||
Array.from(oldScript.attributes).forEach(attr => {
|
||||
newScript.setAttribute(attr.name, attr.value)
|
||||
})
|
||||
newScript.textContent = oldScript.textContent
|
||||
oldScript.parentNode?.replaceChild(newScript, oldScript)
|
||||
})
|
||||
|
||||
canvasStore.addToHistory({ tool: 'render_html', args, timestamp: Date.now() })
|
||||
return 'HTML renderizado'
|
||||
}
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="canvas-container">
|
||||
<div id="canvas-content" class="canvas-content">
|
||||
<div class="canvas-placeholder">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||||
<path d="M3 9h18"/>
|
||||
<path d="M9 21V9"/>
|
||||
</svg>
|
||||
<p>Canvas listo</p>
|
||||
<span>Haz clic en el cuadrado azul (abajo derecha) para conectar con Claude Code</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.canvas-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-primary);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.canvas-content {
|
||||
flex: 1;
|
||||
padding: 1.5rem;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.canvas-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.canvas-placeholder svg {
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.canvas-placeholder p {
|
||||
font-size: 1.25rem;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.canvas-placeholder span {
|
||||
font-size: 0.875rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
66
frontend/src/components/StatusBar.vue
Normal file
66
frontend/src/components/StatusBar.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useCanvasStore } from '../stores/canvas'
|
||||
|
||||
const canvasStore = useCanvasStore()
|
||||
|
||||
const statusText = computed(() => {
|
||||
return canvasStore.isConnected ? 'Conectado' : 'Desconectado'
|
||||
})
|
||||
|
||||
const statusClass = computed(() => {
|
||||
return canvasStore.isConnected ? 'connected' : 'disconnected'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="status-bar">
|
||||
<div class="status-indicator" :class="statusClass">
|
||||
<span class="status-dot"></span>
|
||||
<span class="status-text">{{ statusText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.status-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.status-indicator.connected {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.status-indicator.connected .status-dot {
|
||||
background: #22c55e;
|
||||
box-shadow: 0 0 8px #22c55e;
|
||||
}
|
||||
|
||||
.status-indicator.disconnected {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.status-indicator.disconnected .status-dot {
|
||||
background: #ef4444;
|
||||
}
|
||||
</style>
|
||||
87
frontend/src/components/Toolbar.vue
Normal file
87
frontend/src/components/Toolbar.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<script setup lang="ts">
|
||||
import { useCanvasStore } from '../stores/canvas'
|
||||
|
||||
const canvasStore = useCanvasStore()
|
||||
|
||||
function clearCanvas() {
|
||||
const container = document.getElementById('canvas-content')
|
||||
if (container) {
|
||||
container.innerHTML = `
|
||||
<div class="canvas-placeholder">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||||
<path d="M3 9h18"/>
|
||||
<path d="M9 21V9"/>
|
||||
</svg>
|
||||
<p>Canvas listo</p>
|
||||
<span>Claude Code puede renderizar contenido aquí usando las herramientas MCP</span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
function toggleHistory() {
|
||||
canvasStore.toggleHistoryPanel()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="toolbar">
|
||||
<div class="toolbar-section">
|
||||
<button class="toolbar-btn" @click="clearCanvas" title="Limpiar canvas">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 6h18"/>
|
||||
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
|
||||
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="toolbar-btn" @click="toggleHistory" title="Historial">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 8v4l3 3"/>
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
width: 56px;
|
||||
background: var(--bg-secondary);
|
||||
border-right: 1px solid var(--border-color);
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.toolbar-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.toolbar-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user