bmad-elsabro 1.0.0

package/renderer/components/ChatPanel.tsx

@@ -0,0 +1,285 @@
+/**
+ * ChatPanel Component
+ *
+ * Main chat interface with streaming AI responses inspired by Auto-Claude.
+ * Manages conversation state and coordinates message display and input.
+ *
+ * Features:
+ * - Real-time streaming AI responses (character-by-character)
+ * - Message history management
+ * - Agent selection
+ * - Dark/light theme support
+ * - Scroll management
+ * - Loading states
+ */
+
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import MessageList from './MessageList';
+import MessageInput from './MessageInput';
+
+export interface Message {
+  /**
+   * Unique identifier for the message
+   */
+  id: string;
+
+  /**
+   * Role of the message sender
+   */
+  role: 'user' | 'assistant' | 'system';
+
+  /**
+   * Message content (full or partial for streaming)
+   */
+  content: string;
+
+  /**
+   * Timestamp of the message
+   */
+  timestamp: Date;
+
+  /**
+   * Whether this message is currently streaming
+   */
+  isStreaming?: boolean;
+
+  /**
+   * Optional agent name for AI messages
+   */
+  agent?: string;
+
+  /**
+   * Optional error state
+   */
+  error?: boolean;
+}
+
+export interface ChatPanelProps {
+  /**
+   * Optional initial messages
+   */
+  initialMessages?: Message[];
+
+  /**
+   * Current agent name
+   */
+  agent?: string;
+
+  /**
+   * Callback when agent changes
+   */
+  onAgentChange?: (agent: string) => void;
+
+  /**
+   * Custom CSS class name
+   */
+  className?: string;
+
+  /**
+   * Whether the chat is in a loading state
+   */
+  isLoading?: boolean;
+}
+
+/**
+ * ChatPanel Component
+ *
+ * Provides a complete chat interface with streaming AI responses.
+ * Handles message state, streaming updates, and user interactions.
+ *
+ * @example
+ * ```tsx
+ * <ChatPanel
+ *   agent="auto-claude"
+ *   onAgentChange={(agent) => console.log('Agent changed:', agent)}
+ * />
+ * ```
+ */
+export const ChatPanel: React.FC<ChatPanelProps> = ({
+  initialMessages = [],
+  agent = 'auto-claude',
+  onAgentChange,
+  className = '',
+  isLoading = false,
+}) => {
+  const [messages, setMessages] = useState<Message[]>(initialMessages);
+  const [isSending, setIsSending] = useState(false);
+  const messageListRef = useRef<HTMLDivElement>(null);
+  const streamingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  /**
+   * Scroll to bottom of message list
+   */
+  const scrollToBottom = useCallback(() => {
+    if (messageListRef.current) {
+      messageListRef.current.scrollTop = messageListRef.current.scrollHeight;
+    }
+  }, []);
+
+  /**
+   * Simulate streaming AI response character-by-character
+   */
+  const streamResponse = useCallback((messageId: string, fullText: string) => {
+    let currentIndex = 0;
+    const chunkSize = 3; // Characters per update
+    const delayMs = 30; // Delay between updates
+
+    const streamNextChunk = () => {
+      if (currentIndex < fullText.length) {
+        const nextChunk = fullText.slice(0, currentIndex + chunkSize);
+        currentIndex += chunkSize;
+
+        setMessages((prev) =>
+          prev.map((msg) =>
+            msg.id === messageId
+              ? { ...msg, content: nextChunk, isStreaming: true }
+              : msg
+          )
+        );
+
+        scrollToBottom();
+
+        streamingTimeoutRef.current = setTimeout(streamNextChunk, delayMs);
+      } else {
+        // Streaming complete
+        setMessages((prev) =>
+          prev.map((msg) =>
+            msg.id === messageId
+              ? { ...msg, content: fullText, isStreaming: false }
+              : msg
+          )
+        );
+        setIsSending(false);
+      }
+    };
+
+    streamNextChunk();
+  }, [scrollToBottom]);
+
+  /**
+   * Clean up streaming timeout on unmount
+   */
+  useEffect(() => {
+    return () => {
+      if (streamingTimeoutRef.current) {
+        clearTimeout(streamingTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  /**
+   * Handle sending a new message
+   */
+  const handleSendMessage = useCallback(async (content: string) => {
+    if (!content.trim() || isSending) return;
+
+    setIsSending(true);
+
+    // Add user message
+    const userMessage: Message = {
+      id: `user-${Date.now()}`,
+      role: 'user',
+      content: content.trim(),
+      timestamp: new Date(),
+    };
+
+    setMessages((prev) => [...prev, userMessage]);
+    scrollToBottom();
+
+    // TODO: Replace with actual AI API call
+    // For now, simulate AI response
+    const aiMessageId = `ai-${Date.now()}`;
+    const aiMessage: Message = {
+      id: aiMessageId,
+      role: 'assistant',
+      content: '',
+      timestamp: new Date(),
+      isStreaming: true,
+      agent,
+    };
+
+    // Add empty AI message immediately
+    setMessages((prev) => [...prev, aiMessage]);
+
+    // Simulate AI response after a short delay
+    setTimeout(() => {
+      const mockResponse = `Thank you for your message: "${content}". I'm ${agent}, an AI assistant. This is a simulated streaming response to demonstrate the character-by-character display functionality. The actual implementation will integrate with the AI backend to provide real responses with proper streaming support.`;
+
+      streamResponse(aiMessageId, mockResponse);
+    }, 500);
+  }, [isSending, agent, scrollToBottom, streamResponse]);
+
+  /**
+   * Handle clearing all messages
+   */
+  const handleClearMessages = useCallback(() => {
+    setMessages([]);
+  }, []);
+
+  return (
+    <div className={`flex flex-col h-full bg-white dark:bg-gray-900 ${className}`}>
+      {/* Chat Header */}
+      <div className="flex-none border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-4 py-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+              Chat
+            </h2>
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              Agent: {agent}
+            </p>
+          </div>
+
+          <div className="flex items-center gap-2">
+            {/* Agent Selector - TODO: Implement dropdown */}
+            <button
+              className="px-3 py-1 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 transition-colors"
+              aria-label="Change agent"
+              title="Change agent"
+            >
+              🤖 Switch Agent
+            </button>
+
+            {/* Clear Chat Button */}
+            <button
+              onClick={handleClearMessages}
+              className="px-3 py-1 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-red-50 dark:hover:bg-red-900/20 text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+              aria-label="Clear chat history"
+              title="Clear chat history"
+            >
+              🗑️ Clear
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Message List */}
+      <div
+        ref={messageListRef}
+        className="flex-1 overflow-y-auto"
+      >
+        <MessageList
+          messages={messages}
+          isLoading={isLoading}
+        />
+      </div>
+
+      {/* Message Input */}
+      <div className="flex-none border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
+        <MessageInput
+          onSend={handleSendMessage}
+          disabled={isSending || isLoading}
+          placeholder={
+            isSending
+              ? 'Waiting for response...'
+              : 'Type your message...'
+          }
+        />
+      </div>
+    </div>
+  );
+};
+
+ChatPanel.displayName = 'ChatPanel';
+
+export default ChatPanel;

package/renderer/components/CodeEditor.tsx

@@ -0,0 +1,327 @@
+/**
+ * CodeEditor Component
+ *
+ * A Monaco Editor wrapper component with offline support for the Electron application.
+ * Provides syntax highlighting for TypeScript, JavaScript, YAML, JSON, and other languages.
+ *
+ * Features:
+ * - Offline Monaco Editor integration
+ * - Syntax highlighting for multiple languages
+ * - IntelliSense and auto-completion
+ * - Customizable themes (light/dark)
+ * - Read-only mode support
+ * - Auto-formatting
+ * - Validation markers
+ * - File system integration for loading/saving project files
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import Editor, { OnMount, OnChange } from '@monaco-editor/react';
+import type * as monacoType from 'monaco-editor';
+import {
+  configureMonacoLoader,
+  getLanguageOptions,
+  getLanguageFromFilePath,
+  defaultMonacoOptions,
+} from '../lib/monaco-loader';
+import {
+  getFileSystemProvider,
+  loadFileForEditor,
+  saveFileFromEditor,
+} from '../lib/file-system-provider';
+import type {
+  CodeEditorProps,
+  CodeEditorHandle,
+  SupportedLanguage,
+} from './CodeEditor.types';
+
+/**
+ * CodeEditor Component
+ *
+ * A flexible code editor component powered by Monaco Editor with offline support.
+ * Automatically configures Monaco to load from local node_modules instead of CDN.
+ * Integrates with file system provider for loading/saving project files.
+ *
+ * @example
+ * ```tsx
+ * // With explicit value
+ * <CodeEditor
+ *   value={code}
+ *   onChange={setCode}
+ *   language="typescript"
+ *   theme="vs-dark"
+ *   height="600px"
+ * />
+ *
+ * // With file system integration
+ * <CodeEditor
+ *   path="/path/to/file.ts"
+ *   onChange={(value) => console.log('File changed:', value)}
+ *   theme="vs-dark"
+ * />
+ * ```
+ */
+export const CodeEditor = React.forwardRef<CodeEditorHandle, CodeEditorProps>(
+  (
+    {
+      value,
+      onChange,
+      language = 'typescript',
+      theme = 'vs-dark',
+      height = '500px',
+      width = '100%',
+      readOnly = false,
+      lineNumbers = true,
+      minimap = true,
+      options = {},
+      onMount,
+      beforeMount,
+      onValidate,
+      className = '',
+      loading = 'Loading editor...',
+      path,
+      autoDetectLanguage = true,
+    },
+    ref
+  ) => {
+    // Store editor and monaco instances
+    const editorRef = useRef<monacoType.editor.IStandaloneCodeEditor | null>(
+      null
+    );
+    const monacoRef = useRef<typeof monacoType | null>(null);
+
+    // File system integration state
+    const [fileContent, setFileContent] = useState<string | null>(null);
+    const [fileLoadError, setFileLoadError] = useState<string | null>(null);
+    const [isLoadingFile, setIsLoadingFile] = useState(false);
+    const fileSystemProvider = useRef(getFileSystemProvider());
+
+    // Determine the language to use
+    const effectiveLanguage: SupportedLanguage =
+      autoDetectLanguage && path
+        ? (getLanguageFromFilePath(path) as SupportedLanguage)
+        : language;
+
+    // Configure Monaco for offline usage on mount
+    useEffect(() => {
+      configureMonacoLoader();
+    }, []);
+
+    /**
+     * Load file content from file system when path changes
+     * Automatically loads file content if path is provided and file system provider is available
+     */
+    useEffect(() => {
+      // Only attempt to load if:
+      // 1. Path is provided
+      // 2. File system provider is available
+      // 3. No explicit value is provided (to avoid conflicts)
+      if (path && fileSystemProvider.current.isAvailable() && !value) {
+        setIsLoadingFile(true);
+        setFileLoadError(null);
+
+        loadFileForEditor(path)
+          .then((result) => {
+            setFileContent(result.content);
+            setIsLoadingFile(false);
+          })
+          .catch((error) => {
+            const message =
+              error instanceof Error ? error.message : 'Failed to load file';
+            setFileLoadError(message);
+            setIsLoadingFile(false);
+          });
+      }
+    }, [path, value]);
+
+    /**
+     * Handle editor mount
+     * Called when Monaco Editor is fully initialized
+     */
+    const handleEditorMount: OnMount = (editor, monaco) => {
+      editorRef.current = editor;
+      monacoRef.current = monaco;
+
+      // Set up validation markers listener
+      if (onValidate) {
+        const model = editor.getModel();
+        if (model) {
+          // Listen for marker changes
+          monaco.editor.onDidChangeMarkers(([resource]) => {
+            if (model.uri.toString() === resource.toString()) {
+              const markers = monaco.editor.getModelMarkers({
+                resource: model.uri,
+              });
+              onValidate(markers);
+            }
+          });
+        }
+      }
+
+      // Call user's onMount callback
+      if (onMount) {
+        onMount(editor, monaco);
+      }
+    };
+
+    /**
+     * Handle editor content change
+     * Calls user's onChange callback with the new value
+     */
+    const handleEditorChange: OnChange = (value) => {
+      if (onChange) {
+        onChange(value);
+      }
+
+      // Update file content state if we're managing it
+      if (fileContent !== null && value !== undefined) {
+        setFileContent(value);
+      }
+    };
+
+    /**
+     * Handle before editor mount
+     * Configure Monaco before the editor is created
+     */
+    const handleBeforeMount = (monaco: typeof monacoType) => {
+      // Configure Monaco for offline usage
+      configureMonacoLoader();
+
+      // Call user's beforeMount callback
+      if (beforeMount) {
+        beforeMount(monaco);
+      }
+    };
+
+    /**
+     * Save current editor content to file system
+     */
+    const saveFile = async (): Promise<void> => {
+      if (!path) {
+        throw new Error('No file path specified');
+      }
+
+      if (!fileSystemProvider.current.isAvailable()) {
+        throw new Error('File system provider not available');
+      }
+
+      const currentValue = editorRef.current?.getValue();
+      if (currentValue === undefined) {
+        throw new Error('No content to save');
+      }
+
+      await saveFileFromEditor(path, currentValue);
+      // Update cache to reflect saved content
+      setFileContent(currentValue);
+    };
+
+    /**
+     * Reload file content from file system
+     */
+    const reloadFile = async (): Promise<void> => {
+      if (!path) {
+        throw new Error('No file path specified');
+      }
+
+      if (!fileSystemProvider.current.isAvailable()) {
+        throw new Error('File system provider not available');
+      }
+
+      setIsLoadingFile(true);
+      setFileLoadError(null);
+
+      try {
+        const result = await loadFileForEditor(path);
+        setFileContent(result.content);
+        editorRef.current?.setValue(result.content);
+        setIsLoadingFile(false);
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : 'Failed to reload file';
+        setFileLoadError(message);
+        setIsLoadingFile(false);
+        throw error;
+      }
+    };
+
+    // Expose editor methods via ref
+    React.useImperativeHandle(ref, () => ({
+      getEditor: () => editorRef.current,
+      getMonaco: () => monacoRef.current,
+      getValue: () => editorRef.current?.getValue(),
+      setValue: (newValue: string) => {
+        editorRef.current?.setValue(newValue);
+        if (fileContent !== null) {
+          setFileContent(newValue);
+        }
+      },
+      focus: () => {
+        editorRef.current?.focus();
+      },
+      format: async () => {
+        if (editorRef.current) {
+          await editorRef.current.getAction('editor.action.formatDocument')?.run();
+        }
+      },
+      // File system operations
+      saveFile,
+      reloadFile,
+    }));
+
+    // Merge editor options
+    const languageOptions = getLanguageOptions(effectiveLanguage);
+    const mergedOptions: monacoType.editor.IStandaloneEditorConstructionOptions = {
+      ...defaultMonacoOptions,
+      ...languageOptions,
+      readOnly,
+      lineNumbers: lineNumbers ? 'on' : 'off',
+      minimap: { enabled: minimap },
+      ...options,
+    };
+
+    // Determine the effective value to display
+    // Priority: explicit value prop > loaded file content > empty string
+    const effectiveValue = value !== undefined ? value : fileContent || '';
+
+    // Show loading state if file is being loaded
+    const effectiveLoading = isLoadingFile ? 'Loading file...' : loading;
+
+    return (
+      <div className={`code-editor-container ${className}`}>
+        {fileLoadError && (
+          <div
+            className="code-editor-error"
+            style={{
+              padding: '12px',
+              margin: '8px 0',
+              backgroundColor: '#fee',
+              color: '#c33',
+              border: '1px solid #fcc',
+              borderRadius: '4px',
+              fontSize: '14px',
+            }}
+          >
+            <strong>Error loading file:</strong> {fileLoadError}
+          </div>
+        )}
+        <Editor
+          height={height}
+          width={width}
+          language={effectiveLanguage}
+          value={effectiveValue}
+          theme={theme}
+          onChange={handleEditorChange}
+          onMount={handleEditorMount}
+          beforeMount={handleBeforeMount}
+          options={mergedOptions}
+          loading={effectiveLoading}
+          path={path}
+        />
+      </div>
+    );
+  }
+);
+
+CodeEditor.displayName = 'CodeEditor';
+
+export default CodeEditor;