@siteboon/claude-code-ui 1.8.2 → 1.8.3

package/src/components/MicButton.jsx

@@ -1,272 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Mic, Loader2, Brain } from 'lucide-react';
-import { transcribeWithWhisper } from '../utils/whisper';
-
-export function MicButton({ onTranscript, className = '' }) {
-  const [state, setState] = useState('idle'); // idle, recording, transcribing, processing
-  const [error, setError] = useState(null);
-  const [isSupported, setIsSupported] = useState(true);
-  
-  const mediaRecorderRef = useRef(null);
-  const streamRef = useRef(null);
-  const chunksRef = useRef([]);
-  const lastTapRef = useRef(0);
-  
-  // Check microphone support on mount
-  useEffect(() => {
-    const checkSupport = () => {
-      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-        setIsSupported(false);
-        setError('Microphone not supported. Please use HTTPS or a modern browser.');
-        return;
-      }
-      
-      // Additional check for secure context
-      if (location.protocol !== 'https:' && location.hostname !== 'localhost') {
-        setIsSupported(false);
-        setError('Microphone requires HTTPS. Please use a secure connection.');
-        return;
-      }
-      
-      setIsSupported(true);
-      setError(null);
-    };
-    
-    checkSupport();
-  }, []);
-
-  // Start recording
-  const startRecording = async () => {
-    try {
-      console.log('Starting recording...');
-      setError(null);
-      chunksRef.current = [];
-
-      // Check if getUserMedia is available
-      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-        throw new Error('Microphone access not available. Please use HTTPS or a supported browser.');
-      }
-
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      streamRef.current = stream;
-
-      const mimeType = MediaRecorder.isTypeSupported('audio/webm') ? 'audio/webm' : 'audio/mp4';
-      const recorder = new MediaRecorder(stream, { mimeType });
-      mediaRecorderRef.current = recorder;
-
-      recorder.ondataavailable = (e) => {
-        if (e.data.size > 0) {
-          chunksRef.current.push(e.data);
-        }
-      };
-
-      recorder.onstop = async () => {
-        console.log('Recording stopped, creating blob...');
-        const blob = new Blob(chunksRef.current, { type: mimeType });
-        
-        // Clean up stream
-        if (streamRef.current) {
-          streamRef.current.getTracks().forEach(track => track.stop());
-          streamRef.current = null;
-        }
-
-        // Start transcribing
-        setState('transcribing');
-        
-        // Check if we're in an enhancement mode
-        const whisperMode = window.localStorage.getItem('whisperMode') || 'default';
-        const isEnhancementMode = whisperMode === 'prompt' || whisperMode === 'vibe' || whisperMode === 'instructions' || whisperMode === 'architect';
-        
-        // Set up a timer to switch to processing state for enhancement modes
-        let processingTimer;
-        if (isEnhancementMode) {
-          processingTimer = setTimeout(() => {
-            setState('processing');
-          }, 2000); // Switch to processing after 2 seconds
-        }
-        
-        try {
-          const text = await transcribeWithWhisper(blob);
-          if (text && onTranscript) {
-            onTranscript(text);
-          }
-        } catch (err) {
-          console.error('Transcription error:', err);
-          setError(err.message);
-        } finally {
-          if (processingTimer) {
-            clearTimeout(processingTimer);
-          }
-          setState('idle');
-        }
-      };
-
-      recorder.start();
-      setState('recording');
-      console.log('Recording started successfully');
-    } catch (err) {
-      console.error('Failed to start recording:', err);
-      
-      // Provide specific error messages based on error type
-      let errorMessage = 'Microphone access failed';
-      
-      if (err.name === 'NotAllowedError') {
-        errorMessage = 'Microphone access denied. Please allow microphone permissions.';
-      } else if (err.name === 'NotFoundError') {
-        errorMessage = 'No microphone found. Please check your audio devices.';
-      } else if (err.name === 'NotSupportedError') {
-        errorMessage = 'Microphone not supported by this browser.';
-      } else if (err.name === 'NotReadableError') {
-        errorMessage = 'Microphone is being used by another application.';
-      } else if (err.message.includes('HTTPS')) {
-        errorMessage = err.message;
-      }
-      
-      setError(errorMessage);
-      setState('idle');
-    }
-  };
-
-  // Stop recording
-  const stopRecording = () => {
-    console.log('Stopping recording...');
-    if (mediaRecorderRef.current && mediaRecorderRef.current.state === 'recording') {
-      mediaRecorderRef.current.stop();
-      // Don't set state here - let the onstop handler do it
-    } else {
-      // If recorder isn't in recording state, force cleanup
-      console.log('Recorder not in recording state, forcing cleanup');
-      if (streamRef.current) {
-        streamRef.current.getTracks().forEach(track => track.stop());
-        streamRef.current = null;
-      }
-      setState('idle');
-    }
-  };
-
-  // Handle button click
-  const handleClick = (e) => {
-    // Prevent double firing on mobile
-    if (e) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-    
-    // Don't proceed if microphone is not supported
-    if (!isSupported) {
-      return;
-    }
-    
-    // Debounce for mobile double-tap issue
-    const now = Date.now();
-    if (now - lastTapRef.current < 300) {
-      console.log('Ignoring rapid tap');
-      return;
-    }
-    lastTapRef.current = now;
-    
-    console.log('Button clicked, current state:', state);
-    
-    if (state === 'idle') {
-      startRecording();
-    } else if (state === 'recording') {
-      stopRecording();
-    }
-    // Do nothing if transcribing or processing
-  };
-
-  // Clean up on unmount
-  useEffect(() => {
-    return () => {
-      if (streamRef.current) {
-        streamRef.current.getTracks().forEach(track => track.stop());
-      }
-    };
-  }, []);
-
-  // Button appearance based on state
-  const getButtonAppearance = () => {
-    if (!isSupported) {
-      return {
-        icon: <Mic className="w-5 h-5" />,
-        className: 'bg-gray-400 cursor-not-allowed',
-        disabled: true
-      };
-    }
-    
-    switch (state) {
-      case 'recording':
-        return {
-          icon: <Mic className="w-5 h-5 text-white" />,
-          className: 'bg-red-500 hover:bg-red-600 animate-pulse',
-          disabled: false
-        };
-      case 'transcribing':
-        return {
-          icon: <Loader2 className="w-5 h-5 animate-spin" />,
-          className: 'bg-blue-500 hover:bg-blue-600',
-          disabled: true
-        };
-      case 'processing':
-        return {
-          icon: <Brain className="w-5 h-5 animate-pulse" />,
-          className: 'bg-purple-500 hover:bg-purple-600',
-          disabled: true
-        };
-      default: // idle
-        return {
-          icon: <Mic className="w-5 h-5" />,
-          className: 'bg-gray-700 hover:bg-gray-600',
-          disabled: false
-        };
-    }
-  };
-
-  const { icon, className: buttonClass, disabled } = getButtonAppearance();
-
-  return (
-    <div className="relative">
-      <button
-        type="button"
-        style={{
-          backgroundColor: state === 'recording' ? '#ef4444' : 
-                          state === 'transcribing' ? '#3b82f6' : 
-                          state === 'processing' ? '#a855f7' :
-                          '#374151'
-        }}
-        className={`
-          flex items-center justify-center
-          w-12 h-12 rounded-full
-          text-white transition-all duration-200
-          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
-          dark:ring-offset-gray-800
-          touch-action-manipulation
-          ${disabled ? 'cursor-not-allowed opacity-75' : 'cursor-pointer'}
-          ${state === 'recording' ? 'animate-pulse' : ''}
-          hover:opacity-90
-          ${className}
-        `}
-        onClick={handleClick}
-        disabled={disabled}
-      >
-        {icon}
-      </button>
-      
-      {error && (
-        <div className="absolute top-full mt-2 left-1/2 transform -translate-x-1/2 
-                        bg-red-500 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-10
-                        animate-fade-in">
-          {error}
-        </div>
-      )}
-      
-      {state === 'recording' && (
-        <div className="absolute -inset-1 rounded-full border-2 border-red-500 animate-ping pointer-events-none" />
-      )}
-      
-      {state === 'processing' && (
-        <div className="absolute -inset-1 rounded-full border-2 border-purple-500 animate-ping pointer-events-none" />
-      )}
-    </div>
-  );
-}

package/src/components/MobileNav.jsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import { MessageSquare, Folder, Terminal, GitBranch, Globe, CheckSquare } from 'lucide-react';
-import { useTasksSettings } from '../contexts/TasksSettingsContext';
-
-function MobileNav({ activeTab, setActiveTab, isInputFocused }) {
-  const { tasksEnabled } = useTasksSettings();
-  // Detect dark mode
-  const isDarkMode = document.documentElement.classList.contains('dark');
-  const navItems = [
-    {
-      id: 'chat',
-      icon: MessageSquare,
-      onClick: () => setActiveTab('chat')
-    },
-    {
-      id: 'shell',
-      icon: Terminal,
-      onClick: () => setActiveTab('shell')
-    },
-    {
-      id: 'files',
-      icon: Folder,
-      onClick: () => setActiveTab('files')
-    },
-    {
-      id: 'git',
-      icon: GitBranch,
-      onClick: () => setActiveTab('git')
-    },
-    // Conditionally add tasks tab if enabled
-    ...(tasksEnabled ? [{
-      id: 'tasks',
-      icon: CheckSquare,
-      onClick: () => setActiveTab('tasks')
-    }] : [])
-  ];
-
-  return (
-    <>
-      <style>
-        {`
-          .mobile-nav-container {
-            background-color: ${isDarkMode ? '#1f2937' : '#ffffff'} !important;
-          }
-          .mobile-nav-container:hover {
-            background-color: ${isDarkMode ? '#1f2937' : '#ffffff'} !important;
-          }
-        `}
-      </style>
-      <div 
-        className={`mobile-nav-container fixed bottom-0 left-0 right-0 border-t border-gray-200 dark:border-gray-700 z-50 ios-bottom-safe transform transition-transform duration-300 ease-in-out shadow-lg ${
-          isInputFocused ? 'translate-y-full' : 'translate-y-0'
-        }`}
-      >
-      <div className="flex items-center justify-around py-1">
-        {navItems.map((item) => {
-          const Icon = item.icon;
-          const isActive = activeTab === item.id;
-          
-          return (
-            <button
-              key={item.id}
-              onClick={item.onClick}
-              onTouchStart={(e) => {
-                e.preventDefault();
-                item.onClick();
-              }}
-              className={`flex items-center justify-center p-2 rounded-lg min-h-[40px] min-w-[40px] relative touch-manipulation ${
-                isActive
-                  ? 'text-blue-600 dark:text-blue-400'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
-              }`}
-              aria-label={item.id}
-            >
-              <Icon className="w-5 h-5" />
-              {isActive && (
-                <div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-6 h-0.5 bg-blue-600 dark:bg-blue-400 rounded-full" />
-              )}
-            </button>
-          );
-        })}
-      </div>
-    </div>
-    </>
-  );
-}
-
-export default MobileNav;