feat: Add FloatingResponse component with bubbleResponse MCP tool

Add a floating response panel that allows the agent to display messages
directly in the UI instead of through the terminal. Includes support for
info, success, warning, and error message types with auto-dismiss.
This commit is contained in:
2026-02-13 19:55:17 -06:00
parent 607527d98d
commit 86b3246fa1
7 changed files with 557 additions and 3 deletions

View File

@@ -0,0 +1,59 @@
/**
* Floating Response handlers
* Controls the FloatingResponse component for agent UI responses
*/
import type { ToolConfig } from './index'
export interface ResponseControls {
addMessage: (message: string, type?: 'info' | 'success' | 'warning' | 'error') => string
removeMessage: (id: string) => void
clearAll: () => void
getMessages: () => Array<{ id: string; message: string; type: string; timestamp: number }>
move: (x: number, y: number) => void
}
// Global reference to response controls (set by App.vue)
let responseControls: ResponseControls | null = null
export function setResponseControls(controls: ResponseControls) {
responseControls = controls
;(window as any).__responseControls = controls
}
export function getResponseControls(): ResponseControls | null {
return responseControls
}
export function createResponseHandlers(): ToolConfig[] {
return [
{
name: 'bubbleResponse',
description: 'Responde al usuario mostrando un mensaje en la UI (terminal flotante) en lugar de en Claude Code',
category: 'terminal',
schema: {
type: 'object',
properties: {
message: {
type: 'string',
description: 'El mensaje a mostrar al usuario en la UI'
},
type: {
type: 'string',
enum: ['info', 'success', 'warning', 'error'],
description: 'Tipo de mensaje: info (default), success, warning, error'
}
},
required: ['message']
},
handler: (args: { message: string; type?: 'info' | 'success' | 'warning' | 'error' }) => {
if (!responseControls) return 'Error: Response controls not initialized'
const type = args.type || 'info'
const id = responseControls.addMessage(args.message, type)
return `Mensaje mostrado en UI (id: ${id}, tipo: ${type})`
}
}
]
}