bmad-elsabro 1.0.0

package/renderer/components/PartyMode.tsx

@@ -0,0 +1,555 @@
+/**
+ * PartyMode Component
+ *
+ * Multi-agent coordination UI that enables group discussions between multiple
+ * BMAD agents. Orchestrates conversations, displays agent roster, and manages
+ * collaborative interactions.
+ *
+ * Features:
+ * - Multi-agent conversation orchestration
+ * - Agent roster display with personalities
+ * - Real-time agent participation indicators
+ * - Conversation flow management
+ * - Agent selection and coordination
+ * - Dark/light theme support
+ *
+ * @module renderer/components/PartyMode
+ */
+
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+
+/**
+ * Agent information in Party Mode
+ */
+export interface PartyAgent {
+  /**
+   * Agent unique identifier
+   */
+  id: string;
+
+  /**
+   * Display name for the agent
+   */
+  displayName: string;
+
+  /**
+   * Agent role/title
+   */
+  title: string;
+
+  /**
+   * Visual identifier (emoji)
+   */
+  icon: string;
+
+  /**
+   * Agent capabilities
+   */
+  role: string;
+
+  /**
+   * Agent background/expertise
+   */
+  identity: string;
+
+  /**
+   * Communication style
+   */
+  communicationStyle: string;
+
+  /**
+   * Agent status in party mode
+   */
+  status: 'idle' | 'thinking' | 'speaking' | 'active';
+
+  /**
+   * Number of contributions in current session
+   */
+  contributions: number;
+}
+
+/**
+ * Party Mode message
+ */
+export interface PartyMessage {
+  /**
+   * Message unique identifier
+   */
+  id: string;
+
+  /**
+   * Agent ID (or 'user' for user messages)
+   */
+  agentId: string;
+
+  /**
+   * Agent display name
+   */
+  agentName: string;
+
+  /**
+   * Message content
+   */
+  content: string;
+
+  /**
+   * Timestamp
+   */
+  timestamp: Date;
+
+  /**
+   * Whether this message is currently streaming
+   */
+  isStreaming?: boolean;
+
+  /**
+   * Whether this is a user message
+   */
+  isUser?: boolean;
+}
+
+/**
+ * Props for PartyMode component
+ */
+export interface PartyModeProps {
+  /**
+   * Initial agents to include in party mode
+   */
+  initialAgents?: PartyAgent[];
+
+  /**
+   * Callback when party mode ends
+   */
+  onEnd?: () => void;
+
+  /**
+   * Custom CSS class name
+   */
+  className?: string;
+}
+
+/**
+ * PartyMode Component
+ *
+ * Provides a multi-agent coordination interface for collaborative discussions.
+ *
+ * @example
+ * ```tsx
+ * <PartyMode
+ *   initialAgents={agentsList}
+ *   onEnd={() => console.log('Party mode ended')}
+ * />
+ * ```
+ */
+export const PartyMode: React.FC<PartyModeProps> = ({
+  initialAgents = [],
+  onEnd,
+  className = '',
+}) => {
+  const [agents, setAgents] = useState<PartyAgent[]>(initialAgents);
+  const [messages, setMessages] = useState<PartyMessage[]>([]);
+  const [inputValue, setInputValue] = useState('');
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [showAgentRoster, setShowAgentRoster] = useState(true);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  /**
+   * Scroll to bottom of messages
+   */
+  const scrollToBottom = useCallback(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, []);
+
+  /**
+   * Effect: Auto-scroll when messages change
+   */
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, scrollToBottom]);
+
+  /**
+   * Effect: Load agents from coordinator on mount
+   */
+  useEffect(() => {
+    const loadAgents = async () => {
+      if (initialAgents.length === 0) {
+        // Load agents from party coordinator
+        try {
+          const loadedAgents = await window.electron.party.getAgents();
+          setAgents(loadedAgents);
+        } catch (error) {
+          console.error('Failed to load agents:', error);
+        }
+      }
+
+      // Add welcome message
+      addWelcomeMessage();
+    };
+
+    loadAgents();
+  }, []);
+
+  /**
+   * Add welcome message to start party mode
+   */
+  const addWelcomeMessage = useCallback(() => {
+    const welcomeMessage: PartyMessage = {
+      id: 'welcome',
+      agentId: 'facilitator',
+      agentName: 'Party Mode Facilitator',
+      content: `🎉 PARTY MODE ACTIVATED! 🎉
+
+Welcome! All BMAD agents are here and ready for a dynamic group discussion. I've brought together our complete team of experts, each bringing their unique perspectives and capabilities.
+
+**What would you like to discuss with the team today?**`,
+      timestamp: new Date(),
+      isUser: false,
+    };
+
+    setMessages([welcomeMessage]);
+  }, []);
+
+  /**
+   * Update agent status
+   */
+  const updateAgentStatus = useCallback(
+    (agentId: string, status: PartyAgent['status']) => {
+      setAgents((prev) =>
+        prev.map((agent) =>
+          agent.id === agentId ? { ...agent, status } : agent
+        )
+      );
+    },
+    []
+  );
+
+  /**
+   * Simulate agent response (mock for demonstration)
+   * In production, this would call the party-coordinator service
+   */
+  const getAgentResponse = useCallback(
+    async (userMessage: string): Promise<void> => {
+      // Select 2-3 relevant agents for response
+      const selectedAgents = agents
+        .filter((a) => a.status !== 'thinking')
+        .slice(0, Math.min(3, agents.length));
+
+      if (selectedAgents.length === 0) return;
+
+      // Simulate sequential agent responses
+      for (const agent of selectedAgents) {
+        // Mark agent as thinking
+        updateAgentStatus(agent.id, 'thinking');
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+
+        // Mark agent as speaking
+        updateAgentStatus(agent.id, 'speaking');
+
+        // Create agent message
+        const agentMessage: PartyMessage = {
+          id: `${agent.id}-${Date.now()}`,
+          agentId: agent.id,
+          agentName: agent.displayName,
+          content: `${agent.icon} **${agent.displayName}**: This is a mock response. In production, this would be generated by the AI based on the agent's personality and expertise.`,
+          timestamp: new Date(),
+          isStreaming: true,
+        };
+
+        setMessages((prev) => [...prev, agentMessage]);
+
+        // Simulate streaming (in production, use actual streaming)
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+
+        // Mark as complete
+        setMessages((prev) =>
+          prev.map((msg) =>
+            msg.id === agentMessage.id ? { ...msg, isStreaming: false } : msg
+          )
+        );
+
+        // Increment contributions
+        setAgents((prev) =>
+          prev.map((a) =>
+            a.id === agent.id
+              ? { ...a, contributions: a.contributions + 1, status: 'active' }
+              : a
+          )
+        );
+
+        // Mark agent as idle
+        updateAgentStatus(agent.id, 'idle');
+      }
+    },
+    [agents, updateAgentStatus]
+  );
+
+  /**
+   * Handle sending a message
+   */
+  const handleSendMessage = useCallback(async () => {
+    if (!inputValue.trim() || isProcessing) return;
+
+    const userMessage: PartyMessage = {
+      id: `user-${Date.now()}`,
+      agentId: 'user',
+      agentName: 'You',
+      content: inputValue.trim(),
+      timestamp: new Date(),
+      isUser: true,
+    };
+
+    // Add user message
+    setMessages((prev) => [...prev, userMessage]);
+    setInputValue('');
+    setIsProcessing(true);
+
+    // Check for exit triggers
+    const exitTriggers = ['*exit', 'goodbye', 'end party', 'quit'];
+    if (
+      exitTriggers.some((trigger) =>
+        inputValue.toLowerCase().includes(trigger.toLowerCase())
+      )
+    ) {
+      handleEndPartyMode();
+      setIsProcessing(false);
+      return;
+    }
+
+    // Get agent responses
+    try {
+      await getAgentResponse(inputValue);
+    } catch (error) {
+      console.error('Error getting agent response:', error);
+    } finally {
+      setIsProcessing(false);
+      inputRef.current?.focus();
+    }
+  }, [inputValue, isProcessing, getAgentResponse]);
+
+  /**
+   * Handle ending party mode
+   */
+  const handleEndPartyMode = useCallback(() => {
+    const goodbyeMessage: PartyMessage = {
+      id: 'goodbye',
+      agentId: 'facilitator',
+      agentName: 'Party Mode Facilitator',
+      content: `👋 Thanks for the great discussion! Party Mode is ending now. All agents are signing off. See you next time!`,
+      timestamp: new Date(),
+      isUser: false,
+    };
+
+    setMessages((prev) => [...prev, goodbyeMessage]);
+
+    // Call onEnd callback after a brief delay
+    setTimeout(() => {
+      onEnd?.();
+    }, 2000);
+  }, [onEnd]);
+
+  /**
+   * Handle keyboard shortcuts
+   */
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSendMessage();
+      } else if (e.key === 'Escape') {
+        setInputValue('');
+      }
+    },
+    [handleSendMessage]
+  );
+
+  return (
+    <div
+      className={`flex h-full bg-gray-50 dark:bg-gray-900 ${className}`}
+      role="main"
+      aria-label="Party Mode Multi-Agent Coordination"
+    >
+      {/* Agent Roster Sidebar */}
+      {showAgentRoster && (
+        <aside
+          className="w-80 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col"
+          role="complementary"
+          aria-label="Agent Roster"
+        >
+          <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
+              🎭 Agent Roster
+            </h2>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+              {agents.length} agents in party mode
+            </p>
+          </div>
+
+          <div className="flex-1 overflow-y-auto p-4 space-y-3">
+            {agents.map((agent) => (
+              <div
+                key={agent.id}
+                className={`p-3 rounded-lg border transition-colors ${
+                  agent.status === 'speaking'
+                    ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+                    : agent.status === 'thinking'
+                    ? 'border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20'
+                    : agent.status === 'active'
+                    ? 'border-green-500 bg-green-50 dark:bg-green-900/20'
+                    : 'border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900'
+                }`}
+                role="article"
+                aria-label={`Agent ${agent.displayName}`}
+              >
+                <div className="flex items-start gap-2">
+                  <span className="text-2xl" aria-hidden="true">
+                    {agent.icon}
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <h3 className="font-medium text-gray-900 dark:text-white text-sm">
+                      {agent.displayName}
+                    </h3>
+                    <p className="text-xs text-gray-600 dark:text-gray-400 truncate">
+                      {agent.title}
+                    </p>
+                    <p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
+                      {agent.contributions} contribution
+                      {agent.contributions !== 1 ? 's' : ''}
+                    </p>
+                  </div>
+                  {agent.status === 'thinking' && (
+                    <div className="flex gap-1" aria-label="Agent thinking">
+                      <span className="w-1 h-1 bg-yellow-500 rounded-full animate-pulse" />
+                      <span
+                        className="w-1 h-1 bg-yellow-500 rounded-full animate-pulse"
+                        style={{ animationDelay: '0.2s' }}
+                      />
+                      <span
+                        className="w-1 h-1 bg-yellow-500 rounded-full animate-pulse"
+                        style={{ animationDelay: '0.4s' }}
+                      />
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="p-4 border-t border-gray-200 dark:border-gray-700">
+            <button
+              onClick={handleEndPartyMode}
+              className="w-full px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg transition-colors text-sm font-medium"
+              aria-label="End Party Mode"
+            >
+              End Party Mode
+            </button>
+          </div>
+        </aside>
+      )}
+
+      {/* Conversation Panel */}
+      <main className="flex-1 flex flex-col">
+        {/* Header */}
+        <header className="p-4 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-xl font-bold text-gray-900 dark:text-white">
+                🎉 Party Mode
+              </h1>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                Multi-agent collaborative discussion
+              </p>
+            </div>
+            <button
+              onClick={() => setShowAgentRoster(!showAgentRoster)}
+              className="px-3 py-2 text-sm bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 rounded-lg transition-colors"
+              aria-label={showAgentRoster ? 'Hide roster' : 'Show roster'}
+            >
+              {showAgentRoster ? 'Hide Roster' : 'Show Roster'}
+            </button>
+          </div>
+        </header>
+
+        {/* Messages */}
+        <div
+          className="flex-1 overflow-y-auto p-4 space-y-4"
+          role="log"
+          aria-label="Party Mode Conversation"
+          aria-live="polite"
+        >
+          {messages.map((message) => (
+            <div
+              key={message.id}
+              className={`flex ${message.isUser ? 'justify-end' : 'justify-start'}`}
+            >
+              <div
+                className={`max-w-3xl rounded-lg p-4 ${
+                  message.isUser
+                    ? 'bg-blue-500 text-white'
+                    : 'bg-white dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-200 dark:border-gray-700'
+                }`}
+              >
+                {!message.isUser && (
+                  <div className="flex items-center gap-2 mb-2">
+                    <span className="font-medium text-sm">
+                      {message.agentName}
+                    </span>
+                    {message.isStreaming && (
+                      <span
+                        className="inline-block w-1 h-4 bg-blue-500 animate-pulse"
+                        aria-label="Streaming"
+                      />
+                    )}
+                  </div>
+                )}
+                <div className="text-sm whitespace-pre-wrap">
+                  {message.content}
+                </div>
+                <div
+                  className={`text-xs mt-2 ${
+                    message.isUser
+                      ? 'text-blue-100'
+                      : 'text-gray-500 dark:text-gray-400'
+                  }`}
+                >
+                  {message.timestamp.toLocaleTimeString()}
+                </div>
+              </div>
+            </div>
+          ))}
+          <div ref={messagesEndRef} />
+        </div>
+
+        {/* Input */}
+        <div className="p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
+          <div className="flex gap-2">
+            <textarea
+              ref={inputRef}
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Type your message... (Press Enter to send, Shift+Enter for new line)"
+              className="flex-1 px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 dark:text-white placeholder-gray-500 resize-none"
+              rows={3}
+              disabled={isProcessing}
+              aria-label="Message input"
+            />
+            <button
+              onClick={handleSendMessage}
+              disabled={!inputValue.trim() || isProcessing}
+              className="px-6 py-3 bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 dark:disabled:bg-gray-700 text-white rounded-lg transition-colors font-medium"
+              aria-label="Send message"
+            >
+              {isProcessing ? 'Processing...' : 'Send'}
+            </button>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
+            Tip: Type 'goodbye' or '*exit' to end party mode
+          </p>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default PartyMode;