bmad-elsabro 1.0.0

package/renderer/components/MessageInput.tsx

@@ -0,0 +1,252 @@
+/**
+ * MessageInput Component
+ *
+ * Text input area for composing and sending chat messages.
+ * Features multi-line support, keyboard shortcuts, and auto-resize.
+ *
+ * Features:
+ * - Multi-line text input with auto-resize
+ * - Send on Enter (Shift+Enter for new line)
+ * - Character counter
+ * - Disabled state
+ * - Dark/light theme support
+ * - Keyboard shortcuts
+ * - Accessibility support
+ */
+
+import React, { useState, useRef, useEffect, KeyboardEvent, ChangeEvent } from 'react';
+
+export interface MessageInputProps {
+  /**
+   * Callback when message is sent
+   */
+  onSend: (message: string) => void;
+
+  /**
+   * Whether the input is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Placeholder text
+   */
+  placeholder?: string;
+
+  /**
+   * Maximum message length
+   */
+  maxLength?: number;
+
+  /**
+   * Custom CSS class name
+   */
+  className?: string;
+}
+
+/**
+ * MessageInput Component
+ *
+ * Provides a text input area for composing chat messages.
+ * Supports multi-line input with auto-resize and keyboard shortcuts.
+ *
+ * @example
+ * ```tsx
+ * <MessageInput
+ *   onSend={(message) => console.log('Send:', message)}
+ *   disabled={false}
+ *   placeholder="Type your message..."
+ * />
+ * ```
+ */
+export const MessageInput: React.FC<MessageInputProps> = ({
+  onSend,
+  disabled = false,
+  placeholder = 'Type your message...',
+  maxLength = 2000,
+  className = '',
+}) => {
+  const [value, setValue] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  /**
+   * Auto-resize textarea based on content
+   */
+  const adjustHeight = () => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    // Reset height to auto to get the correct scrollHeight
+    textarea.style.height = 'auto';
+
+    // Set new height based on content (max 200px)
+    const newHeight = Math.min(textarea.scrollHeight, 200);
+    textarea.style.height = `${newHeight}px`;
+  };
+
+  /**
+   * Handle text change
+   */
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+  };
+
+  /**
+   * Handle keyboard events
+   */
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    // Send on Enter (without Shift)
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+
+    // Clear on Escape
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      setValue('');
+      adjustHeight();
+    }
+  };
+
+  /**
+   * Handle send button click
+   */
+  const handleSend = () => {
+    const trimmedValue = value.trim();
+
+    if (!trimmedValue || disabled) return;
+
+    // Send message
+    onSend(trimmedValue);
+
+    // Clear input
+    setValue('');
+
+    // Reset height
+    setTimeout(() => {
+      adjustHeight();
+      textareaRef.current?.focus();
+    }, 0);
+  };
+
+  /**
+   * Adjust height when value changes
+   */
+  useEffect(() => {
+    adjustHeight();
+  }, [value]);
+
+  /**
+   * Focus input on mount
+   */
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+
+  const canSend = value.trim().length > 0 && !disabled;
+  const characterCount = value.length;
+  const isNearLimit = characterCount > maxLength * 0.9;
+  const isOverLimit = characterCount > maxLength;
+
+  return (
+    <div className={`px-4 py-3 ${className}`}>
+      <div className="flex flex-col gap-2">
+        {/* Input Area */}
+        <div className="flex items-end gap-2">
+          {/* Textarea */}
+          <div className="flex-1 relative">
+            <textarea
+              ref={textareaRef}
+              value={value}
+              onChange={handleChange}
+              onKeyDown={handleKeyDown}
+              disabled={disabled}
+              placeholder={placeholder}
+              maxLength={maxLength}
+              rows={1}
+              className={`
+                w-full px-4 py-3 rounded-lg resize-none
+                bg-gray-50 dark:bg-gray-800
+                border border-gray-300 dark:border-gray-600
+                text-gray-900 dark:text-white
+                placeholder-gray-500 dark:placeholder-gray-400
+                focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+                disabled:opacity-50 disabled:cursor-not-allowed
+                transition-colors
+                ${isOverLimit ? 'border-red-500 dark:border-red-500 focus:ring-red-500' : ''}
+              `.trim()}
+              aria-label="Message input"
+              aria-describedby="message-input-help"
+            />
+
+            {/* Character counter (shown when near limit) */}
+            {isNearLimit && (
+              <div
+                className={`
+                  absolute bottom-2 right-2 text-xs
+                  ${isOverLimit ? 'text-red-600 dark:text-red-400 font-semibold' : 'text-gray-500 dark:text-gray-400'}
+                `.trim()}
+                aria-live="polite"
+              >
+                {characterCount}/{maxLength}
+              </div>
+            )}
+          </div>
+
+          {/* Send Button */}
+          <button
+            onClick={handleSend}
+            disabled={!canSend}
+            className={`
+              px-6 py-3 rounded-lg font-medium transition-all
+              ${
+                canSend
+                  ? 'bg-blue-600 hover:bg-blue-700 text-white shadow-sm hover:shadow-md active:scale-95'
+                  : 'bg-gray-300 dark:bg-gray-700 text-gray-500 dark:text-gray-500 cursor-not-allowed'
+              }
+            `.trim()}
+            aria-label="Send message"
+            title={disabled ? 'Waiting for response...' : 'Send message (Enter)'}
+          >
+            {disabled ? (
+              <span className="flex items-center gap-2">
+                <span className="inline-block w-4 h-4 border-2 border-gray-500 border-t-transparent rounded-full animate-spin" />
+                <span className="hidden sm:inline">Sending...</span>
+              </span>
+            ) : (
+              <span className="flex items-center gap-2">
+                <span>Send</span>
+                <span>↑</span>
+              </span>
+            )}
+          </button>
+        </div>
+
+        {/* Help Text */}
+        <div
+          id="message-input-help"
+          className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-4"
+        >
+          <span>
+            <kbd className="px-2 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-xs">Enter</kbd>
+            {' '}to send
+          </span>
+          <span>
+            <kbd className="px-2 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-xs">Shift</kbd>
+            {' + '}
+            <kbd className="px-2 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-xs">Enter</kbd>
+            {' '}for new line
+          </span>
+          <span>
+            <kbd className="px-2 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-xs">Esc</kbd>
+            {' '}to clear
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+MessageInput.displayName = 'MessageInput';
+
+export default MessageInput;

package/renderer/components/MessageList.tsx

@@ -0,0 +1,204 @@
+/**
+ * MessageList Component
+ *
+ * Displays a list of chat messages with streaming support.
+ * Handles different message types (user, assistant, system) with distinct styling.
+ *
+ * Features:
+ * - Streaming message display with character-by-character animation
+ * - Role-based message styling
+ * - Timestamp display
+ * - Empty state
+ * - Loading indicators
+ * - Accessibility support
+ */
+
+import React from 'react';
+import type { Message } from './ChatPanel';
+
+export interface MessageListProps {
+  /**
+   * Array of messages to display
+   */
+  messages: Message[];
+
+  /**
+   * Whether the chat is in a loading state
+   */
+  isLoading?: boolean;
+
+  /**
+   * Custom CSS class name
+   */
+  className?: string;
+}
+
+/**
+ * Format timestamp for display
+ */
+const formatTimestamp = (date: Date): string => {
+  return new Intl.DateTimeFormat('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date);
+};
+
+/**
+ * MessageBubble Component
+ *
+ * Individual message bubble with role-based styling
+ */
+interface MessageBubbleProps {
+  message: Message;
+}
+
+const MessageBubble: React.FC<MessageBubbleProps> = ({ message }) => {
+  const isUser = message.role === 'user';
+  const isSystem = message.role === 'system';
+  const isAssistant = message.role === 'assistant';
+
+  // Role-based styling
+  const bubbleClasses = `
+    max-w-[80%] rounded-lg px-4 py-3 break-words
+    ${isUser ? 'bg-blue-600 text-white ml-auto' : ''}
+    ${isAssistant ? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white' : ''}
+    ${isSystem ? 'bg-yellow-50 dark:bg-yellow-900/20 text-yellow-900 dark:text-yellow-200 mx-auto text-center text-sm' : ''}
+    ${message.error ? 'bg-red-100 dark:bg-red-900/20 text-red-900 dark:text-red-200 border border-red-300 dark:border-red-700' : ''}
+  `.trim();
+
+  const containerClasses = `
+    flex mb-4
+    ${isUser ? 'justify-end' : 'justify-start'}
+    ${isSystem ? 'justify-center' : ''}
+  `.trim();
+
+  return (
+    <div className={containerClasses}>
+      <div className="flex flex-col max-w-[80%]">
+        {/* Message Header (for assistant messages) */}
+        {isAssistant && (
+          <div className="flex items-center gap-2 mb-1 text-xs text-gray-500 dark:text-gray-400">
+            <span className="font-medium">
+              {message.agent || 'AI Assistant'}
+            </span>
+            <span>•</span>
+            <span>{formatTimestamp(message.timestamp)}</span>
+            {message.isStreaming && (
+              <span className="flex items-center gap-1">
+                <span className="inline-block w-1 h-1 bg-green-500 rounded-full animate-pulse" />
+                <span>typing...</span>
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* Message Bubble */}
+        <div className={bubbleClasses}>
+          {/* Content */}
+          <div className="whitespace-pre-wrap">
+            {message.content || (message.isStreaming ? '' : '...')}
+          </div>
+
+          {/* Streaming cursor indicator */}
+          {message.isStreaming && message.content && (
+            <span className="inline-block w-2 h-4 ml-0.5 bg-current animate-pulse" />
+          )}
+        </div>
+
+        {/* Timestamp (for user messages) */}
+        {isUser && (
+          <div className="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">
+            {formatTimestamp(message.timestamp)}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * LoadingIndicator Component
+ *
+ * Shows a loading animation while waiting for AI response
+ */
+const LoadingIndicator: React.FC = () => {
+  return (
+    <div className="flex justify-start mb-4">
+      <div className="bg-gray-100 dark:bg-gray-800 rounded-lg px-4 py-3 flex items-center gap-2">
+        <div className="flex gap-1">
+          <span className="w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+          <span className="w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
+          <span className="w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
+        </div>
+        <span className="text-sm text-gray-600 dark:text-gray-400">
+          Thinking...
+        </span>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * EmptyState Component
+ *
+ * Shows when there are no messages
+ */
+const EmptyState: React.FC = () => {
+  return (
+    <div className="flex flex-col items-center justify-center h-full text-center px-4 py-12">
+      <div className="text-6xl mb-4">💬</div>
+      <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+        Start a Conversation
+      </h3>
+      <p className="text-gray-600 dark:text-gray-400 max-w-md">
+        Send a message to begin chatting with the AI assistant.
+        Your messages will appear here with streaming responses.
+      </p>
+    </div>
+  );
+};
+
+/**
+ * MessageList Component
+ *
+ * Displays a scrollable list of chat messages with streaming support.
+ *
+ * @example
+ * ```tsx
+ * <MessageList
+ *   messages={messages}
+ *   isLoading={false}
+ * />
+ * ```
+ */
+export const MessageList: React.FC<MessageListProps> = ({
+  messages,
+  isLoading = false,
+  className = '',
+}) => {
+  // Show empty state if no messages
+  if (messages.length === 0 && !isLoading) {
+    return <EmptyState />;
+  }
+
+  return (
+    <div
+      className={`px-4 py-6 ${className}`}
+      role="log"
+      aria-live="polite"
+      aria-label="Chat messages"
+    >
+      {/* Render all messages */}
+      {messages.map((message) => (
+        <MessageBubble key={message.id} message={message} />
+      ))}
+
+      {/* Loading indicator */}
+      {isLoading && <LoadingIndicator />}
+    </div>
+  );
+};
+
+MessageList.displayName = 'MessageList';
+
+export default MessageList;