vibecodingmachine-core 1.0.0

package/src/ui/ChatInterface.js

@@ -0,0 +1,499 @@
+/**
+ * Shared Chat Interface Component
+ * Provides a consistent UI across electron app and VSCode extension
+ */
+
+import { stateManager } from './StateManager.js';
+import {
+  createAutonomousButton,
+  createPauseButton,
+  createStopButton,
+  createCheckQuotaButton,
+  createOpenIdeButton,
+  createIdeButton,
+  createControlButtonContainer,
+  updateAutonomousButton,
+  updatePauseButton,
+  updateStopButton,
+  updateCheckQuotaButton,
+  updateOpenIdeButton
+} from './ButtonComponents.js';
+
+export class ChatInterface {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.options = {
+      showIdeSelector: true,
+      showChatMessages: true,
+      showInput: true,
+      showControls: true,
+      theme: 'default', // 'default', 'vscode', 'electron'
+      ...options
+    };
+
+    this.elements = {};
+    this.state = stateManager.getState();
+    this.unsubscribe = null;
+
+    this.init();
+  }
+
+  init() {
+    this.render();
+    this.bindEvents();
+    this.subscribeToState();
+  }
+
+  render() {
+    this.container.innerHTML = '';
+
+    // Create header
+    const header = this.createHeader();
+    this.container.appendChild(header);
+
+    // Create IDE selector
+    if (this.options.showIdeSelector) {
+      const ideSelector = this.createIdeSelector();
+      this.container.appendChild(ideSelector);
+    }
+
+    // Create status
+    const status = this.createStatus();
+    this.container.appendChild(status);
+
+    // Create chat messages
+    if (this.options.showChatMessages) {
+      const messages = this.createMessages();
+      this.container.appendChild(messages);
+    }
+
+    // Create input area
+    if (this.options.showInput) {
+      const input = this.createInput();
+      this.container.appendChild(input);
+    }
+
+    // Create autonomous button
+    const autonomousButton = this.createAutonomousButton();
+    this.container.appendChild(autonomousButton);
+
+    // Create control buttons
+    if (this.options.showControls) {
+      const controls = this.createControlButtons();
+      this.container.appendChild(controls);
+    }
+  }
+
+  createHeader() {
+    const header = document.createElement('div');
+    header.className = 'chat-header';
+    header.innerHTML = `
+      <h1>🤖 VibeCodingMachine Chat</h1>
+    `;
+
+    Object.assign(header.style, {
+      textAlign: 'center',
+      marginBottom: '20px'
+    });
+
+    const title = header.querySelector('h1');
+    Object.assign(title.style, {
+      color: this.getThemeColor('primary'),
+      margin: '0',
+      fontSize: '24px',
+      fontWeight: '600'
+    });
+
+    this.elements.header = header;
+    return header;
+  }
+
+  createIdeSelector() {
+    const container = document.createElement('div');
+    container.className = 'ide-selector';
+
+    Object.assign(container.style, {
+      marginBottom: '20px',
+      textAlign: 'center'
+    });
+
+    const ides = ['vscode', 'cursor', 'windsurf'];
+
+    ides.forEach(ide => {
+      const button = createIdeButton({
+        ide,
+        isActive: this.state.currentIde === ide,
+        onClick: () => this.onIdeSelect(ide)
+      });
+      container.appendChild(button);
+    });
+
+    const openIdeButton = createOpenIdeButton({
+      isOpeningIde: this.state.isOpeningIde,
+      onClick: () => this.onOpenIde()
+    });
+    container.appendChild(openIdeButton);
+
+    this.elements.ideSelector = container;
+    this.elements.ideButtons = container.querySelectorAll('.ide-button');
+    this.elements.openIdeButton = openIdeButton;
+    return container;
+  }
+
+  createStatus() {
+    const status = document.createElement('div');
+    status.className = 'status';
+    status.textContent = this.state.status;
+
+    Object.assign(status.style, {
+      textAlign: 'center',
+      margin: '10px 0',
+      fontStyle: 'italic',
+      color: this.getThemeColor('secondary')
+    });
+
+    this.elements.status = status;
+    return status;
+  }
+
+  createMessages() {
+    const container = document.createElement('div');
+    container.className = 'chat-messages';
+
+    Object.assign(container.style, {
+      height: '400px',
+      overflowY: 'auto',
+      border: `1px solid ${this.getThemeColor('border')}`,
+      borderRadius: '4px',
+      padding: '10px',
+      marginBottom: '20px',
+      backgroundColor: this.getThemeColor('background')
+    });
+
+    // Add welcome message
+    const welcome = document.createElement('div');
+    welcome.className = 'message assistant';
+    welcome.textContent = 'Welcome to VibeCodingMachine! Select an IDE and start chatting.';
+
+    Object.assign(welcome.style, {
+      marginBottom: '15px',
+      padding: '10px',
+      borderRadius: '4px',
+      backgroundColor: this.getThemeColor('messageBackground'),
+      border: `1px solid ${this.getThemeColor('border')}`,
+      marginRight: '20%'
+    });
+
+    container.appendChild(welcome);
+
+    this.elements.messages = container;
+    return container;
+  }
+
+  createInput() {
+    const container = document.createElement('div');
+    container.className = 'input-container';
+
+    Object.assign(container.style, {
+      display: 'flex',
+      gap: '10px',
+      marginBottom: '10px'
+    });
+
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.className = 'message-input';
+    input.placeholder = 'Type your message...';
+
+    Object.assign(input.style, {
+      flex: '1',
+      padding: '10px',
+      border: `1px solid ${this.getThemeColor('border')}`,
+      borderRadius: '4px',
+      backgroundColor: this.getThemeColor('background'),
+      color: this.getThemeColor('text')
+    });
+
+    const sendButton = document.createElement('button');
+    sendButton.className = 'send-button';
+    sendButton.textContent = 'Send';
+
+    Object.assign(sendButton.style, {
+      background: this.getThemeColor('primary'),
+      color: 'white',
+      border: 'none',
+      padding: '10px 20px',
+      borderRadius: '4px',
+      cursor: 'pointer'
+    });
+
+    container.appendChild(input);
+    container.appendChild(sendButton);
+
+    this.elements.input = input;
+    this.elements.sendButton = sendButton;
+    return container;
+  }
+
+  createAutonomousButton() {
+    const button = createAutonomousButton({
+      autonomousMode: this.state.autonomousMode,
+      isPaused: this.state.isPaused,
+      onClick: () => this.onAutonomousToggle()
+    });
+
+    Object.assign(button.style, {
+      width: '100%',
+      marginTop: '10px'
+    });
+
+    this.elements.autonomousButton = button;
+    return button;
+  }
+
+  createControlButtons() {
+    const container = createControlButtonContainer();
+
+    const pauseButton = createPauseButton({
+      isPaused: this.state.isPaused,
+      onClick: () => this.onPauseToggle()
+    });
+
+    const stopButton = createStopButton({
+      autonomousMode: this.state.autonomousMode,
+      onClick: () => this.onStop()
+    });
+
+    const checkQuotaButton = createCheckQuotaButton({
+      isCheckingQuota: this.state.isCheckingQuota,
+      onClick: () => this.onCheckQuota()
+    });
+
+    container.appendChild(pauseButton);
+    container.appendChild(stopButton);
+    container.appendChild(checkQuotaButton);
+
+    this.elements.pauseButton = pauseButton;
+    this.elements.stopButton = stopButton;
+    this.elements.checkQuotaButton = checkQuotaButton;
+    this.elements.controlContainer = container;
+
+    return container;
+  }
+
+  bindEvents() {
+    // Input events
+    if (this.elements.input) {
+      this.elements.input.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+          this.onSendMessage();
+        }
+      });
+    }
+
+    if (this.elements.sendButton) {
+      this.elements.sendButton.addEventListener('click', () => {
+        this.onSendMessage();
+      });
+    }
+  }
+
+  subscribeToState() {
+    this.unsubscribe = stateManager.subscribe((newState, oldState) => {
+      this.updateUI(newState, oldState);
+    });
+  }
+
+  updateUI(newState, oldState) {
+    this.state = newState;
+
+    // Update status
+    if (this.elements.status) {
+      this.elements.status.textContent = newState.status;
+    }
+
+    // Update autonomous button
+    if (this.elements.autonomousButton) {
+      updateAutonomousButton(
+        this.elements.autonomousButton,
+        newState.autonomousMode,
+        newState.isPaused
+      );
+    }
+
+    // Update pause button
+    if (this.elements.pauseButton) {
+      updatePauseButton(this.elements.pauseButton, newState.isPaused);
+    }
+
+    // Update stop button
+    if (this.elements.stopButton) {
+      updateStopButton(this.elements.stopButton, newState.autonomousMode);
+    }
+
+    // Update check quota button
+    if (this.elements.checkQuotaButton) {
+      updateCheckQuotaButton(this.elements.checkQuotaButton, newState.isCheckingQuota);
+    }
+
+    // Update open IDE button
+    if (this.elements.openIdeButton) {
+      updateOpenIdeButton(this.elements.openIdeButton, newState.isOpeningIde);
+    }
+
+    // Update IDE buttons
+    if (this.elements.ideButtons) {
+      this.elements.ideButtons.forEach(button => {
+        const ide = button.dataset.ide;
+        button.classList.toggle('active', ide === newState.currentIde);
+        button.style.backgroundColor = ide === newState.currentIde ?
+          this.getThemeColor('primary') : this.getThemeColor('secondary');
+      });
+    }
+
+    // Update messages
+    if (this.elements.messages && newState.messages.length !== oldState.messages.length) {
+      this.updateMessages(newState.messages);
+    }
+  }
+
+  updateMessages(messages) {
+    // Clear existing messages except welcome
+    const welcome = this.elements.messages.querySelector('.message.assistant');
+    this.elements.messages.innerHTML = '';
+    if (welcome) {
+      this.elements.messages.appendChild(welcome);
+    }
+
+    // Add new messages
+    messages.forEach(message => {
+      const messageEl = document.createElement('div');
+      messageEl.className = `message ${message.role}`;
+      messageEl.textContent = message.text;
+
+      Object.assign(messageEl.style, {
+        marginBottom: '15px',
+        padding: '10px',
+        borderRadius: '4px',
+        backgroundColor: message.role === 'user' ?
+          this.getThemeColor('primary') : this.getThemeColor('messageBackground'),
+        color: message.role === 'user' ? 'white' : this.getThemeColor('text'),
+        marginLeft: message.role === 'user' ? '20%' : '0',
+        marginRight: message.role === 'user' ? '0' : '20%'
+      });
+
+      this.elements.messages.appendChild(messageEl);
+    });
+
+    // Scroll to bottom
+    this.elements.messages.scrollTop = this.elements.messages.scrollHeight;
+  }
+
+  getThemeColor(type) {
+    const themes = {
+      default: {
+        primary: '#68217a',
+        secondary: '#007acc',
+        background: '#ffffff',
+        text: '#333333',
+        border: '#cccccc',
+        messageBackground: '#f8f9fa'
+      },
+      vscode: {
+        primary: 'var(--vscode-textLink-foreground)',
+        secondary: 'var(--vscode-button-secondaryBackground)',
+        background: 'var(--vscode-editor-background)',
+        text: 'var(--vscode-editor-foreground)',
+        border: 'var(--vscode-input-border)',
+        messageBackground: 'var(--vscode-input-background)'
+      },
+      electron: {
+        primary: '#68217a',
+        secondary: '#007acc',
+        background: '#ffffff',
+        text: '#333333',
+        border: '#cccccc',
+        messageBackground: '#f8f9fa'
+      }
+    };
+
+    return themes[this.options.theme]?.[type] || themes.default[type];
+  }
+
+  // Event handlers
+  onIdeSelect(ide) {
+    stateManager.setState({ currentIde: ide });
+    if (this.options.onIdeSelect) {
+      this.options.onIdeSelect(ide);
+    }
+  }
+
+  onOpenIde() {
+    if (this.options.onOpenIde) {
+      this.options.onOpenIde(this.state.currentIde);
+    }
+  }
+
+  onSendMessage() {
+    const text = this.elements.input?.value?.trim();
+    if (!text) return;
+
+    stateManager.addMessage('user', text);
+    this.elements.input.value = '';
+
+    if (this.options.onSendMessage) {
+      this.options.onSendMessage(text, this.state.currentIde);
+    }
+  }
+
+  onAutonomousToggle() {
+    if (this.state.autonomousMode) {
+      stateManager.stopAutonomousMode();
+    } else {
+      stateManager.startAutonomousMode(this.state.currentIde);
+    }
+
+    if (this.options.onAutonomousToggle) {
+      this.options.onAutonomousToggle(this.state.autonomousMode);
+    }
+  }
+
+  onPauseToggle() {
+    stateManager.togglePause();
+
+    if (this.options.onPauseToggle) {
+      this.options.onPauseToggle(this.state.isPaused);
+    }
+  }
+
+  onStop() {
+    stateManager.stopAutonomousMode();
+
+    if (this.options.onStop) {
+      this.options.onStop();
+    }
+  }
+
+  onCheckQuota() {
+    stateManager.startQuotaCheck();
+
+    if (this.options.onCheckQuota) {
+      this.options.onCheckQuota(this.state.currentIde);
+    }
+  }
+
+  // Public methods
+  addMessage(role, text) {
+    stateManager.addMessage(role, text);
+  }
+
+  updateStatus(status) {
+    stateManager.updateStatus(status);
+  }
+
+  destroy() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
+  }
+}