refactor: Split AgentBar into modular components with PromptBar chat flow

Extract 1226-line monolithic AgentBar.vue into focused components: - types/agent.ts: shared types (Agent, AgentStatusState, ClaudeStatus, ConversationEntry) - agent/FloatBubble.vue: bubble with all status/ejecutor animations, hold detection, recording audio bars - agent/PromptBar.vue: floating panel with chat conversation, transcript, history - agent/ChatInput.vue: reusable input row (text, mic, send, history buttons) - agent/TranscriptCard.vue: typewriter transcription simulation - agent/ResponseCard.vue: thinking dots + mock response - agent/ConversationHistory.vue: scrollable mock history entries - AgentBar.vue: thin orchestrator (~290 lines) keeping WebSocket + status logic New interaction: click bubble opens PromptBar in text mode, hold opens in recording mode with audio bar animation on the bubble. Spring enter/blur exit animations on PromptBar. Text submit shows chat bubbles with mock agent responses.
2026-02-15 19:33:29 -06:00
parent ffceb2efc2
commit 68edc01d44
8 changed files with 1741 additions and 1013 deletions
--- a/frontend/src/components/agent/PromptBar.vue
+++ b/frontend/src/components/agent/PromptBar.vue
@@ -0,0 +1,443 @@
+<script setup lang="ts">
+import { ref, reactive, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import type { Agent } from '../../types/agent'
+import ChatInput from './ChatInput.vue'
+import TranscriptCard from './TranscriptCard.vue'
+import ConversationHistory from './ConversationHistory.vue'
+
+interface ChatMessage {
+  id: number
+  role: 'user' | 'agent'
+  content: string
+  status: 'sent' | 'thinking' | 'done'
+}
+
+const MOCK_RESPONSES = [
+  'Entendido. Revisé el código y encontré el problema — la validación se saltaba cuando el token venía en formato Bearer sin espacio. Ya está corregido.',
+  'Listo. Implementé los cambios en el componente. Los tests existentes siguen pasando y agregué dos nuevos para cubrir el edge case que mencionas.',
+  'Analicé la estructura del módulo. Hay 3 archivos que necesitan cambios: el store, el middleware de auth y el composable de sesión. ¿Procedo con los tres?',
+  'Hecho. El refactor reduce la complejidad ciclomática de 12 a 4. Eliminé las condiciones redundantes y extraje la lógica de retry a un helper separado.',
+  'Encontré el bug. El problema era una race condition en el useEffect — se desmontaba el componente antes de que la promise resolviera. Agregué un abort controller.',
+]
+
+let idCounter = 0
+let thinkTimer: number | null = null
+
+const props = defineProps<{
+  agent: Agent
+  anchorRect: DOMRect | null
+  visible: boolean
+  startRecording?: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  submit: [text: string]
+}>()
+
+const contentEl = ref<HTMLDivElement | null>(null)
+const chatInputEl = ref<InstanceType<typeof ChatInput> | null>(null)
+const isRecording = ref(false)
+const showTranscript = ref(false)
+const showHistory = ref(false)
+const messages = reactive<ChatMessage[]>([])
+
+const panelStyle = computed(() => {
+  if (!props.anchorRect) return {}
+  const bubbleCenterX = props.anchorRect.left + props.anchorRect.width / 2
+  const bottomOffset = window.innerHeight - props.anchorRect.top + 12
+
+  const panelWidth = 360
+  let left = bubbleCenterX - panelWidth / 2
+  left = Math.max(12, Math.min(left, window.innerWidth - panelWidth - 12))
+
+  return {
+    position: 'fixed' as const,
+    bottom: `${bottomOffset}px`,
+    left: `${left}px`,
+    width: `${panelWidth}px`
+  }
+})
+
+const hasContent = computed(() =>
+  messages.length > 0 || showTranscript.value || showHistory.value
+)
+
+async function scrollToBottom() {
+  await nextTick()
+  if (contentEl.value) {
+    contentEl.value.scrollTop = contentEl.value.scrollHeight
+  }
+}
+
+function pushAgentResponse(agentMsg: ChatMessage) {
+  const delay = 1200 + Math.random() * 800
+  thinkTimer = window.setTimeout(() => {
+    agentMsg.content = MOCK_RESPONSES[Math.floor(Math.random() * MOCK_RESPONSES.length)]
+    agentMsg.status = 'done'
+    scrollToBottom()
+  }, delay)
+}
+
+function handleSubmit(text: string) {
+  messages.push({ id: ++idCounter, role: 'user', content: text, status: 'sent' })
+  emit('submit', text)
+
+  const agentMsg: ChatMessage = { id: ++idCounter, role: 'agent', content: '', status: 'thinking' }
+  messages.push(agentMsg)
+  scrollToBottom()
+  pushAgentResponse(agentMsg)
+}
+
+function handleMic() {
+  if (showTranscript.value) return
+  isRecording.value = true
+  showTranscript.value = true
+  scrollToBottom()
+}
+
+function handleTranscriptDone(text: string) {
+  isRecording.value = false
+  showTranscript.value = false
+
+  messages.push({ id: ++idCounter, role: 'user', content: text, status: 'sent' })
+
+  const agentMsg: ChatMessage = { id: ++idCounter, role: 'agent', content: '', status: 'thinking' }
+  messages.push(agentMsg)
+  scrollToBottom()
+  pushAgentResponse(agentMsg)
+}
+
+function toggleHistory() {
+  showHistory.value = !showHistory.value
+  if (showHistory.value) scrollToBottom()
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') emit('close')
+}
+
+watch(() => props.visible, async (v) => {
+  if (v) {
+    isRecording.value = false
+    showTranscript.value = false
+    showHistory.value = false
+    messages.length = 0
+    idCounter = 0
+    await nextTick()
+    if (props.startRecording) {
+      handleMic()
+    } else {
+      chatInputEl.value?.focus()
+    }
+  }
+})
+
+defineExpose({ isRecording })
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', handleKeydown)
+  if (thinkTimer) clearTimeout(thinkTimer)
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="prompt-bar">
+      <div v-if="visible && anchorRect" class="prompt-bar-backdrop" @click.self="emit('close')">
+        <div class="prompt-bar-panel" :style="panelStyle">
+          <!-- Header -->
+          <div class="pb-header">
+            <div class="pb-agent-badge" :style="{ background: agent.uiConfig?.gradient || agent.uiConfig?.color }">
+              {{ agent.uiConfig?.shortLabel }}
+            </div>
+            <span class="pb-agent-label">{{ agent.uiConfig?.label || agent.name }}</span>
+            <button class="pb-close" @click="emit('close')">
+              <svg width="10" height="10" viewBox="0 0 10 10">
+                <line x1="1" y1="1" x2="9" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                <line x1="9" y1="1" x2="1" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              </svg>
+            </button>
+          </div>
+
+          <!-- Conversation content area -->
+          <div ref="contentEl" class="pb-content" :class="{ empty: !hasContent }">
+            <div
+              v-for="msg in messages"
+              :key="msg.id"
+              class="chat-msg"
+              :class="msg.role"
+            >
+              <template v-if="msg.role === 'user'">
+                <div class="msg-bubble user-bubble">{{ msg.content }}</div>
+              </template>
+              <template v-else>
+                <div class="msg-bubble agent-bubble">
+                  <div v-if="msg.status === 'thinking'" class="thinking-inline">
+                    <span class="dot"></span>
+                    <span class="dot"></span>
+                    <span class="dot"></span>
+                  </div>
+                  <div v-else class="agent-text fade-in">{{ msg.content }}</div>
+                </div>
+              </template>
+            </div>
+
+            <TranscriptCard v-if="showTranscript" @done="handleTranscriptDone" />
+            <ConversationHistory v-if="showHistory" :agent="agent" />
+          </div>
+
+          <!-- Input -->
+          <ChatInput
+            ref="chatInputEl"
+            :placeholder="`Mensaje a ${agent.uiConfig?.label || agent.name}...`"
+            :recording="isRecording"
+            :history-active="showHistory"
+            :autofocus="visible"
+            @submit="handleSubmit"
+            @mic="handleMic"
+            @toggle-history="toggleHistory"
+          />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.prompt-bar-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+}
+
+.prompt-bar-panel {
+  background: rgba(15, 10, 26, 0.85);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
+  overflow: hidden;
+  transform-origin: bottom center;
+}
+
+/* Header */
+.pb-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.pb-agent-badge {
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.pb-agent-label {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.7);
+  font-family: system-ui, sans-serif;
+}
+
+.pb-close {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: rgba(255, 255, 255, 0.3);
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.15s;
+}
+
+.pb-close:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* Content area */
+.pb-content {
+  max-height: 350px;
+  overflow-y: auto;
+  padding: 10px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
+  scroll-behavior: smooth;
+}
+
+.pb-content.empty {
+  padding: 0;
+  max-height: 0;
+}
+
+/* Chat messages */
+.chat-msg {
+  display: flex;
+  animation: msg-in 0.2s ease-out;
+}
+
+.chat-msg.user {
+  justify-content: flex-end;
+}
+
+.chat-msg.agent {
+  justify-content: flex-start;
+}
+
+.msg-bubble {
+  max-width: 85%;
+  padding: 8px 12px;
+  border-radius: 12px;
+  font-size: 13px;
+  line-height: 1.5;
+  font-family: system-ui, sans-serif;
+  word-break: break-word;
+}
+
+.user-bubble {
+  background: rgba(99, 102, 241, 0.25);
+  border: 1px solid rgba(99, 102, 241, 0.3);
+  color: rgba(255, 255, 255, 0.92);
+  border-bottom-right-radius: 4px;
+}
+
+.agent-bubble {
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.85);
+  border-bottom-left-radius: 4px;
+}
+
+/* Thinking dots inline */
+.thinking-inline {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 0;
+}
+
+.thinking-inline .dot {
+  width: 6px;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: 50%;
+  animation: dot-bounce 1.4s ease-in-out infinite;
+}
+
+.thinking-inline .dot:nth-child(1) { animation-delay: 0s; }
+.thinking-inline .dot:nth-child(2) { animation-delay: 0.2s; }
+.thinking-inline .dot:nth-child(3) { animation-delay: 0.4s; }
+
+.agent-text {
+  white-space: pre-wrap;
+}
+
+/* Animations */
+.fade-in {
+  animation: fade-in 0.25s ease-out;
+}
+
+@keyframes msg-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes dot-bounce {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+/* Transition — enter */
+.prompt-bar-enter-active {
+  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.prompt-bar-enter-active .prompt-bar-panel {
+  animation: pb-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+.prompt-bar-enter-from {
+  opacity: 0;
+}
+
+/* Transition — leave */
+.prompt-bar-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.prompt-bar-leave-active .prompt-bar-panel {
+  animation: pb-leave 0.2s ease both;
+}
+
+.prompt-bar-leave-to {
+  opacity: 0;
+}
+
+@keyframes pb-enter {
+  0% {
+    opacity: 0;
+    transform: translateY(16px) scale(0.85);
+    filter: blur(4px);
+  }
+  60% {
+    opacity: 1;
+    filter: blur(0);
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    filter: blur(0);
+  }
+}
+
+@keyframes pb-leave {
+  0% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    filter: blur(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(12px) scale(0.92);
+    filter: blur(3px);
+  }
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+  .prompt-bar-panel {
+    left: 8px !important;
+    right: 8px;
+    width: auto !important;
+  }
+}
+</style>