Part 10: Vue.js Frontend Interface

<!-- App.vue - Main Application Component -->
<template>
  <div id="app" class="min-h-screen bg-gray-50">
    <!-- Navigation Header -->
    <nav class="bg-blue-600 text-white shadow-lg">
      <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between items-center h-16">
          <div class="flex items-center space-x-4">
            <div class="flex items-center">
              <svg class="w-8 h-8 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
              <h1 class="text-xl font-bold">AlexAI Assistant</h1>
            </div>
          </div>
          
          <div class="flex items-center space-x-4">
            <!-- Status Indicator -->
            <div class="flex items-center space-x-2">
              <div :class="[
                'w-3 h-3 rounded-full',
                systemStatus.status === 'running' ? 'bg-green-400' : 'bg-red-400'
              ]"></div>
              <span class="text-sm">{{ systemStatus.status }}</span>
            </div>
            
            <!-- Settings Button -->
            <button 
              @click="showSettings = !showSettings"
              class="p-2 rounded-lg hover:bg-blue-700 transition-colors"
            >
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </nav>

    <div class="flex h-[calc(100vh-4rem)]">
      <!-- Sidebar -->
      <aside class="w-64 bg-white shadow-lg border-r">
        <div class="p-4">
          <nav class="space-y-2">
            <button
              v-for="tab in tabs"
              :key="tab.id"
              @click="activeTab = tab.id"
              :class="[
                'w-full flex items-center px-4 py-3 text-left rounded-lg transition-colors',
                activeTab === tab.id 
                  ? 'bg-blue-100 text-blue-700 border-l-4 border-blue-700' 
                  : 'text-gray-600 hover:bg-gray-100'
              ]"
            >
              <component :is="tab.icon" class="w-5 h-5 mr-3" />
              {{ tab.name }}
            </button>
          </nav>
        </div>

        <!-- System Status Panel -->
        <div class="p-4 border-t">
          <h3 class="text-sm font-semibold text-gray-700 mb-2">System Status</h3>
          <div class="space-y-2 text-xs text-gray-600">
            <div class="flex justify-between">
              <span>Uptime:</span>
              <span>{{ formatUptime(systemStatus.uptime) }}</span>
            </div>
            <div class="flex justify-between">
              <span>Requests:</span>
              <span>{{ systemStatus.total_requests }}</span>
            </div>
            <div class="flex justify-between">
              <span>Sessions:</span>
              <span>{{ systemStatus.active_sessions }}</span>
            </div>
          </div>
        </div>
      </aside>

      <!-- Main Content -->
      <main class="flex-1 flex flex-col">
        <!-- Chat Interface -->
        <ChatInterface 
          v-if="activeTab === 'chat'" 
          :messages="chatMessages"
          :loading="chatLoading"
          @send-message="sendChatMessage"
          @clear-chat="clearChat"
        />

        <!-- Document Processing -->
        <DocumentProcessor 
          v-if="activeTab === 'documents'"
          @process-document="processDocument"
        />

        <!-- Voice Interaction -->
        <VoiceInterface 
          v-if="activeTab === 'voice'"
          :is-listening="isListening"
          :is-speaking="isSpeaking"
          @start-listening="startVoiceInteraction"
          @stop-listening="stopVoiceInteraction"
          @text-to-speech="textToSpeech"
        />

        <!-- Knowledge Base -->
        <KnowledgeBase 
          v-if="activeTab === 'knowledge'"
          :search-results="knowledgeResults"
          @search-knowledge="searchKnowledge"
          @add-knowledge="addKnowledge"
        />

        <!-- System Monitor -->
        <SystemMonitor 
          v-if="activeTab === 'system'"
          :status="systemStatus"
          :logs="systemLogs"
          @refresh-status="refreshSystemStatus"
        />
      </main>
    </div>

    <!-- Settings Modal -->
    <SettingsModal 
      v-if="showSettings"
      :settings="appSettings"
      @close="showSettings = false"
      @update-settings="updateSettings"
    />

    <!-- Loading Overlay -->
    <div 
      v-if="globalLoading"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
    >
      <div class="bg-white rounded-lg p-6 flex items-center space-x-4">
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
        <span class="text-gray-700">{{ loadingMessage }}</span>
      </div>
    </div>

    <!-- Toast Notifications -->
    <div class="fixed top-4 right-4 space-y-2 z-40">
      <div
        v-for="notification in notifications"
        :key="notification.id"
        :class="[
          'p-4 rounded-lg shadow-lg max-w-sm transition-all duration-300',
          notification.type === 'success' ? 'bg-green-500 text-white' :
          notification.type === 'error' ? 'bg-red-500 text-white' :
          notification.type === 'warning' ? 'bg-yellow-500 text-white' :
          'bg-blue-500 text-white'
        ]"
      >
        <div class="flex items-center justify-between">
          <span>{{ notification.message }}</span>
          <button @click="removeNotification(notification.id)" class="ml-2 text-white hover:text-gray-200">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { apiService } from './services/api'
import { useNotifications } from './composables/useNotifications'

// Import components
import ChatInterface from './components/Chat/ChatInterface.vue'
import DocumentProcessor from './components/Document/DocumentProcessor.vue'
import VoiceInterface from './components/Voice/VoiceInterface.vue'
import KnowledgeBase from './components/Knowledge/KnowledgeBase.vue'
import SystemMonitor from './components/System/SystemMonitor.vue'
import SettingsModal from './components/Settings/SettingsModal.vue'

// Icons
import ChatIcon from './components/Icons/ChatIcon.vue'
import DocumentIcon from './components/Icons/DocumentIcon.vue'
import VoiceIcon from './components/Icons/VoiceIcon.vue'
import KnowledgeIcon from './components/Icons/KnowledgeIcon.vue'
import SystemIcon from './components/Icons/SystemIcon.vue'

export default {
  name: 'App',
  components: {
    ChatInterface,
    DocumentProcessor,
    VoiceInterface,
    KnowledgeBase,
    SystemMonitor,
    SettingsModal
  },
  setup() {
    // Reactive state
    const activeTab = ref('chat')
    const showSettings = ref(false)
    const globalLoading = ref(false)
    const loadingMessage = ref('')

    // System status
    const systemStatus = ref({
      service: 'AlexAI',
      version: '1.0.0',
      status: 'connecting',
      uptime: 0,
      active_sessions: 0,
      total_requests: 0,
      memory_usage: {}
    })

    // Chat state
    const chatMessages = ref([])
    const chatLoading = ref(false)

    // Voice state
    const isListening = ref(false)
    const isSpeaking = ref(false)

    // Knowledge state
    const knowledgeResults = ref([])

    // System logs
    const systemLogs = ref([])

    // App settings
    const appSettings = ref({
      theme: 'light',
      voiceEnabled: true,
      autoSave: true,
      apiTimeout: 30000,
      sessionId: 'web_session_' + Date.now()
    })

    // Notifications composable
    const { notifications, addNotification, removeNotification } = useNotifications()

    // Navigation tabs
    const tabs = [
      { id: 'chat', name: 'Chat', icon: ChatIcon },
      { id: 'documents', name: 'Documents', icon: DocumentIcon },
      { id: 'voice', name: 'Voice', icon: VoiceIcon },
      { id: 'knowledge', name: 'Knowledge', icon: KnowledgeIcon },
      { id: 'system', name: 'System', icon: SystemIcon }
    ]

    // Methods
    const refreshSystemStatus = async () => {
      try {
        const status = await apiService.getSystemStatus()
        systemStatus.value = status
        
        if (status.status === 'running') {
          addNotification('Connected to AlexAI', 'success')
        }
      } catch (error) {
        console.error('Failed to get system status:', error)
        systemStatus.value.status = 'error'
        addNotification('Failed to connect to AlexAI', 'error')
      }
    }

    const sendChatMessage = async (message) => {
      if (!message.trim()) return

      // Add user message to chat
      chatMessages.value.push({
        id: Date.now(),
        type: 'user',
        content: message,
        timestamp: new Date()
      })

      chatLoading.value = true

      try {
        const response = await apiService.sendChatMessage({
          message: message,
          session_id: appSettings.value.sessionId,
          use_memory: true,
          use_rag: true,
          voice_response: false
        })

        // Add assistant response to chat
        chatMessages.value.push({
          id: Date.now() + 1,
          type: 'assistant',
          content: response.response,
          timestamp: new Date(),
          metadata: {
            response_time: response.response_time,
            used_memory: response.used_memory,
            used_rag: response.used_rag,
            confidence_score: response.confidence_score
          }
        })

        // Update system status
        systemStatus.value.total_requests++

      } catch (error) {
        console.error('Chat error:', error)
        chatMessages.value.push({
          id: Date.now() + 1,
          type: 'error',
          content: 'Sorry, I encountered an error processing your message.',
          timestamp: new Date()
        })
        addNotification('Chat error: ' + error.message, 'error')
      } finally {
        chatLoading.value = false
      }
    }

    const clearChat = () => {
      chatMessages.value = []
      addNotification('Chat cleared', 'info')
    }

    const processDocument = async (file, analysisType, question) => {
      globalLoading.value = true
      loadingMessage.value = 'Processing document...'

      try {
        // Create FormData for file upload
        const formData = new FormData()
        formData.append('file', file)
        formData.append('analysis_type', analysisType)
        if (question) {
          formData.append('question', question)
        }

        const response = await apiService.processDocument(formData)

        // Show results in notification or modal
        addNotification(`Document processed successfully. Confidence: ${response.confidence.toFixed(1)}%`, 'success')

        // Could also switch to results tab or show in modal
        return response

      } catch (error) {
        console.error('Document processing error:', error)
        addNotification('Document processing failed: ' + error.message, 'error')
      } finally {
        globalLoading.value = false
        loadingMessage.value = ''
      }
    }

    const startVoiceInteraction = async () => {
      isListening.value = true
      
      try {
        const response = await apiService.voiceInteraction({
          mode: 'conversation',
          timeout: 30,
          wake_word_detection: true
        })

        if (response.response_text) {
          // Add voice response to chat
          chatMessages.value.push({
            id: Date.now(),
            type: 'assistant',
            content: response.response_text,
            timestamp: new Date(),
            metadata: { source: 'voice' }
          })
        }

        addNotification('Voice interaction completed', 'success')

      } catch (error) {
        console.error('Voice interaction error:', error)
        addNotification('Voice interaction failed: ' + error.message, 'error')
      } finally {
        isListening.value = false
      }
    }

    const stopVoiceInteraction = () => {
      isListening.value = false
      addNotification('Voice interaction stopped', 'info')
    }

    const textToSpeech = async (text) => {
      if (!text.trim()) return

      isSpeaking.value = true

      try {
        await apiService.voiceInteraction({
          mode: 'speak',
          text: text
        })

        addNotification('Text spoken successfully', 'success')

      } catch (error) {
        console.error('Text-to-speech error:', error)
        addNotification('Text-to-speech failed: ' + error.message, 'error')
      } finally {
        isSpeaking.value = false
      }
    }

    const searchKnowledge = async (query, collection = 'documents') => {
      try {
        const response = await apiService.searchKnowledge({
          action: 'search',
          query: query,
          collection: collection
        })

        knowledgeResults.value = response.results || []
        addNotification(`Found ${knowledgeResults.value.length} results`, 'success')

      } catch (error) {
        console.error('Knowledge search error:', error)
        addNotification('Knowledge search failed: ' + error.message, 'error')
      }
    }

    const addKnowledge = async (content, metadata = {}) => {
      try {
        const response = await apiService.addKnowledge({
          action: 'add',
          query: content,
          metadata: metadata
        })

        addNotification(`Knowledge added with ID: ${response.document_id}`, 'success')

      } catch (error) {
        console.error('Add knowledge error:', error)
        addNotification('Failed to add knowledge: ' + error.message, 'error')
      }
    }

    const updateSettings = (newSettings) => {
      appSettings.value = { ...appSettings.value, ...newSettings }
      localStorage.setItem('alexai_settings', JSON.stringify(appSettings.value))
      addNotification('Settings updated', 'success')
    }

    const formatUptime = (seconds) => {
      if (seconds < 60) return `${seconds.toFixed(0)}s`
      if (seconds < 3600) return `${(seconds / 60).toFixed(0)}m`
      return `${(seconds / 3600).toFixed(1)}h`
    }

    // Initialize app
    onMounted(async () => {
      // Load settings from localStorage
      const savedSettings = localStorage.getItem('alexai_settings')
      if (savedSettings) {
        appSettings.value = { ...appSettings.value, ...JSON.parse(savedSettings) }
      }

      // Initial system status check
      await refreshSystemStatus()

      // Set up periodic status updates
      setInterval(refreshSystemStatus, 30000) // Every 30 seconds

      // Welcome message
      chatMessages.value.push({
        id: Date.now(),
        type: 'assistant',
        content: 'Hello! I\'m AlexAI, your personal assistant. How can I help you today?',
        timestamp: new Date()
      })
    })

    return {
      // State
      activeTab,
      showSettings,
      globalLoading,
      loadingMessage,
      systemStatus,
      chatMessages,
      chatLoading,
      isListening,
      isSpeaking,
      knowledgeResults,
      systemLogs,
      appSettings,
      notifications,
      tabs,

      // Methods
      refreshSystemStatus,
      sendChatMessage,
      clearChat,
      processDocument,
      startVoiceInteraction,
      stopVoiceInteraction,
      textToSpeech,
      searchKnowledge,
      addKnowledge,
      updateSettings,
      removeNotification,
      formatUptime
    }
  }
}
</script>

<style>
/* Global styles */
#app {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Animation classes */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active {
  transition: all 0.3s ease-out;
}

.slide-up-leave-active {
  transition: all 0.2s ease-in;
}

.slide-up-enter-from {
  transform: translateY(20px);
  opacity: 0;
}

.slide-up-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
</style>

// services/api.js
class ApiService {
  constructor() {
    this.baseURL = process.env.VUE_APP_API_URL || 'http://localhost:8000'
    this.timeout = 30000
  }

  async request(endpoint, options = {}) {
    const url = `${this.baseURL}${endpoint}`
    const config = {
      timeout: this.timeout,
      headers: {
        'Content-Type': 'application/json',
        ...options.headers
      },
      ...options
    }

    try {
      const response = await fetch(url, config)
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
      }

      const contentType = response.headers.get('content-type')
      if (contentType && contentType.includes('application/json')) {
        return await response.json()
      }
      
      return await response.text()
    } catch (error) {
      console.error(`API request failed: ${endpoint}`, error)
      throw error
    }
  }

  // System endpoints
  async getSystemStatus() {
    return this.request('/status')
  }

  // Chat endpoints
  async sendChatMessage(data) {
    return this.request('/chat', {
      method: 'POST',
      body: JSON.stringify(data)
    })
  }

  // Document processing endpoints
  async processDocument(formData) {
    return this.request('/document', {
      method: 'POST',
      headers: {}, // Remove Content-Type to let browser set multipart boundary
      body: formData
    })
  }

  // Voice interaction endpoints
  async voiceInteraction(data) {
    return this.request('/voice', {
      method: 'POST',
      body: JSON.stringify(data)
    })
  }

  // Knowledge base endpoints
  async searchKnowledge(data) {
    return this.request('/knowledge', {
      method: 'POST',
      body: JSON.stringify(data)
    })
  }

  async addKnowledge(data) {
    return this.request('/knowledge', {
      method: 'POST',
      body: JSON.stringify(data)
    })
  }
}

export const apiService = new ApiService()

<!-- components/Chat/ChatInterface.vue -->
<template>
  <div class="flex flex-col h-full">
    <!-- Chat Header -->
    <div class="bg-white border-b px-6 py-4 flex justify-between items-center">
      <h2 class="text-lg font-semibold text-gray-800">Chat with AlexAI</h2>
      <div class="flex space-x-2">
        <button
          @click="toggleVoiceResponse"
          :class="[
            'px-3 py-1 rounded text-sm transition-colors',
            voiceEnabled ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700'
          ]"
        >
          🔊 Voice {{ voiceEnabled ? 'On' : 'Off' }}
        </button>
        <button
          @click="$emit('clear-chat')"
          class="px-3 py-1 bg-red-100 text-red-700 rounded text-sm hover:bg-red-200 transition-colors"
        >
          Clear Chat
        </button>
      </div>
    </div>

    <!-- Messages Container -->
    <div class="flex-1 overflow-y-auto p-6 space-y-4" ref="messagesContainer">
      <div
        v-for="message in messages"
        :key="message.id"
        :class="[
          'flex',
          message.type === 'user' ? 'justify-end' : 'justify-start'
        ]"
      >
        <div
          :class="[
            'max-w-xs lg:max-w-md px-4 py-2 rounded-lg',
            message.type === 'user' 
              ? 'bg-blue-600 text-white' 
              : message.type === 'error'
              ? 'bg-red-100 text-red-800 border border-red-200'
              : 'bg-gray-100 text-gray-800'
          ]"
        >
          <div class="text-sm">{{ message.content }}</div>
          
          <!-- Message metadata -->
          <div 
            v-if="message.metadata"
            class="text-xs mt-2 opacity-75"
          >
            <div v-if="message.metadata.response_time">
              Response: {{ message.metadata.response_time.toFixed(2) }}s
            </div>
            <div v-if="message.metadata.confidence_score">
              Confidence: {{ (message.metadata.confidence_score * 100).toFixed(1) }}%
            </div>
            <div class="flex space-x-2 mt-1">
              <span v-if="message.metadata.used_memory" class="bg-blue-500 px-1 rounded">Memory</span>
              <span v-if="message.metadata.used_rag" class="bg-green-500 px-1 rounded">RAG</span>
              <span v-if="message.metadata.source" class="bg-purple-500 px-1 rounded">{{ message.metadata.source }}</span>
            </div>
          </div>
          
          <div class="text-xs mt-1 opacity-75">
            {{ formatTime(message.timestamp) }}
          </div>
        </div>
      </div>

      <!-- Loading indicator -->
      <div v-if="loading" class="flex justify-start">
        <div class="bg-gray-100 text-gray-800 px-4 py-2 rounded-lg flex items-center space-x-2">
          <div class="animate-spin w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full"></div>
          <span>AlexAI is thinking...</span>
        </div>
      </div>
    </div>

    <!-- Message Input -->
    <div class="bg-white border-t p-4">
      <div class="flex space-x-2">
        <input
          v-model="currentMessage"
          @keyup.enter="sendMessage"
          @keydown.ctrl.enter="sendMessage"
          type="text"
          placeholder="Type your message... (Enter to send, Ctrl+Enter for new line)"
          class="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          :disabled="loading"
        />
        <button
          @click="sendMessage"
          :disabled="loading || !currentMessage.trim()"
          class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          Send
        </button>
      </div>
      
      <!-- Quick actions -->
      <div class="flex space-x-2 mt-2">
        <button
          v-for="quick in quickActions"
          :key="quick.text"
          @click="sendQuickMessage(quick.text)"
          class="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm hover:bg-gray-200 transition-colors"
        >
          {{ quick.label }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, nextTick, watch } from 'vue'

export default {
  name: 'ChatInterface',
  props: {
    messages: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  emits: ['send-message', 'clear-chat'],
  setup(props, { emit }) {
    const currentMessage = ref('')
    const voiceEnabled = ref(false)
    const messagesContainer = ref(null)

    const quickActions = [
      { label: 'Help', text: 'What can you help me with?' },
      { label: 'Status', text: 'What is your current status?' },
      { label: 'Capabilities', text: 'What are your capabilities?' },
      { label: 'Privacy', text: 'How do you protect my privacy?' }
    ]

    const sendMessage = () => {
      if (currentMessage.value.trim() && !props.loading) {
        emit('send-message', currentMessage.value.trim())
        currentMessage.value = ''
      }
    }

    const sendQuickMessage = (message) => {
      if (!props.loading) {
        emit('send-message', message)
      }
    }

    const toggleVoiceResponse = () => {
      voiceEnabled.value = !voiceEnabled.value
    }

    const formatTime = (date) => {
      return new Intl.DateTimeFormat('en-US', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      }).format(date)
    }

    const scrollToBottom = () => {
      nextTick(() => {
        if (messagesContainer.value) {
          messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
        }
      })
    }

    // Auto-scroll when new messages arrive
    watch(() => props.messages.length, scrollToBottom)

    return {
      currentMessage,
      voiceEnabled,
      messagesContainer,
      quickActions,
      sendMessage,
      sendQuickMessage,
      toggleVoiceResponse,
      formatTime
    }
  }
}
</script>

<!-- components/Document/DocumentProcessor.vue -->
<template>
  <div class="flex flex-col h-full">
    <!-- Header -->
    <div class="bg-white border-b px-6 py-4">
      <h2 class="text-lg font-semibold text-gray-800">Document Processing</h2>
      <p class="text-sm text-gray-600 mt-1">Upload images and documents for OCR and AI analysis</p>
    </div>

    <div class="flex-1 p-6 overflow-y-auto">
      <!-- Upload Area -->
      <div
        @drop="handleDrop"
        @dragover.prevent
        @dragenter.prevent
        :class="[
          'border-2 border-dashed rounded-lg p-8 text-center transition-colors',
          isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300'
        ]"
      >
        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
          <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <p class="mt-2 text-sm text-gray-600">
          <span class="font-medium">Drop files here</span> or 
          <label class="text-blue-600 hover:text-blue-500 cursor-pointer">
            <span>browse</span>
            <input
              ref="fileInput"
              type="file"
              class="sr-only"
              accept="image/*,.pdf"
              multiple
              @change="handleFileSelect"
            />
          </label>
        </p>
        <p class="text-xs text-gray-500 mt-1">Supports: JPG, PNG, PDF (up to 10MB)</p>
      </div>

      <!-- Analysis Options -->
      <div class="mt-6 bg-white rounded-lg border p-4">
        <h3 class="text-sm font-medium text-gray-800 mb-3">Analysis Options</h3>
        
        <div class="space-y-3">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Analysis Type</label>
            <select 
              v-model="analysisType" 
              class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            >
              <option value="extract">Extract Text Only</option>
              <option value="analyze">Full Analysis</option>
              <option value="qa">Question & Answer</option>
            </select>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Enhancement Type</label>
            <select 
              v-model="enhancementType" 
              class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            >
              <option value="default">Default</option>
              <option value="scan">Scanned Document</option>
              <option value="photo">Photo of Document</option>
              <option value="screenshot">Screenshot</option>
            </select>
          </div>

          <div v-if="analysisType === 'qa'">
            <label class="block text-sm font-medium text-gray-700 mb-1">Question</label>
            <input
              v-model="question"
              type="text"
              placeholder="What would you like to know about this document?"
              class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>
        </div>
      </div>

      <!-- File Queue -->
      <div v-if="fileQueue.length > 0" class="mt-6">
        <h3 class="text-sm font-medium text-gray-800 mb-3">Files to Process</h3>
        <div class="space-y-2">
          <div
            v-for="(file, index) in fileQueue"
            :key="index"
            class="flex items-center justify-between bg-gray-50 rounded-lg p-3"
          >
            <div class="flex items-center space-x-3">
              <div class="flex-shrink-0">
                <svg class="h-8 w-8 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"/>
                </svg>
              </div>
              <div>
                <p class="text-sm font-medium text-gray-900">{{ file.name }}</p>
                <p class="text-xs text-gray-500">{{ formatFileSize(file.size) }}</p>
              </div>
            </div>
            
            <div class="flex items-center space-x-2">
              <span
                v-if="file.status === 'processing'"
                class="text-xs text-blue-600 bg-blue-100 px-2 py-1 rounded"
              >
                Processing...
              </span>
              <span
                v-else-if="file.status === 'completed'"
                class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded"
              >
                Completed
              </span>
              <span
                v-else-if="file.status === 'error'"
                class="text-xs text-red-600 bg-red-100 px-2 py-1 rounded"
              >
                Error
              </span>
              
              <button
                @click="removeFile(index)"
                class="text-gray-400 hover:text-red-500 transition-colors"
              >
                <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                </svg>
              </button>
            </div>
          </div>
        </div>

        <!-- Process Button -->
        <div class="mt-4">
          <button
            @click="processFiles"
            :disabled="processing || fileQueue.every(f => f.status === 'completed')"
            class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            {{ processing ? 'Processing...' : 'Process Documents' }}
          </button>
        </div>
      </div>

      <!-- Results -->
      <div v-if="results.length > 0" class="mt-6">
        <h3 class="text-sm font-medium text-gray-800 mb-3">Processing Results</h3>
        <div class="space-y-4">
          <div
            v-for="(result, index) in results"
            :key="index"
            class="bg-white border rounded-lg p-4"
          >
            <div class="flex justify-between items-start mb-3">
              <h4 class="font-medium text-gray-900">{{ result.filename }}</h4>
              <div class="flex space-x-2 text-xs">
                <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded">
                  {{ result.confidence.toFixed(1) }}% confidence
                </span>
                <span class="bg-gray-100 text-gray-800 px-2 py-1 rounded">
                  {{ result.word_count }} words
                </span>
              </div>
            </div>

            <!-- Extracted Text -->
            <div v-if="result.text" class="mb-3">
              <h5 class="text-sm font-medium text-gray-700 mb-1">Extracted Text:</h5>
              <div class="bg-gray-50 rounded p-3 text-sm max-h-32 overflow-y-auto">
                {{ result.text }}
              </div>
            </div>

            <!-- Analysis -->
            <div v-if="result.analysis" class="mb-3">
              <h5 class="text-sm font-medium text-gray-700 mb-1">Analysis:</h5>
              <div class="bg-blue-50 rounded p-3 text-sm max-h-32 overflow-y-auto">
                {{ result.analysis }}
              </div>
            </div>

            <!-- Actions -->
            <div class="flex space-x-2">
              <button
                @click="copyToClipboard(result.text || result.analysis)"
                class="text-xs bg-gray-100 text-gray-700 px-3 py-1 rounded hover:bg-gray-200 transition-colors"
              >
                Copy Text
              </button>
              <button
                @click="addToKnowledge(result)"
                class="text-xs bg-green-100 text-green-700 px-3 py-1 rounded hover:bg-green-200 transition-colors"
              >
                Add to Knowledge Base
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'DocumentProcessor',
  emits: ['process-document'],
  setup(props, { emit }) {
    const fileInput = ref(null)
    const isDragging = ref(false)
    const fileQueue = ref([])
    const processing = ref(false)
    const results = ref([])
    
    // Options
    const analysisType = ref('analyze')
    const enhancementType = ref('default')
    const question = ref('')

    const handleDrop = (e) => {
      e.preventDefault()
      isDragging.value = false
      
      const files = Array.from(e.dataTransfer.files)
      addFiles(files)
    }

    const handleFileSelect = (e) => {
      const files = Array.from(e.target.files)
      addFiles(files)
      e.target.value = '' // Reset input
    }

    const addFiles = (files) => {
      const validFiles = files.filter(file => {
        const isValidType = file.type.startsWith('image/') || file.type === 'application/pdf'
        const isValidSize = file.size <= 10 * 1024 * 1024 // 10MB
        return isValidType && isValidSize
      })

      validFiles.forEach(file => {
        fileQueue.value.push({
          file,
          name: file.name,
          size: file.size,
          status: 'pending'
        })
      })
    }

    const removeFile = (index) => {
      fileQueue.value.splice(index, 1)
    }

    const processFiles = async () => {
      if (processing.value) return

      processing.value = true
      
      try {
        for (let i = 0; i < fileQueue.value.length; i++) {
          const fileItem = fileQueue.value[i]
          
          if (fileItem.status === 'completed') continue
          
          fileItem.status = 'processing'
          
          try {
            const result = await emit('process-document', 
              fileItem.file, 
              analysisType.value, 
              question.value
            )
            
            results.value.push({
              filename: fileItem.name,
              ...result
            })
            
            fileItem.status = 'completed'
            
          } catch (error) {
            console.error('Processing failed:', error)
            fileItem.status = 'error'
          }
        }
      } finally {
        processing.value = false
      }
    }

    const formatFileSize = (bytes) => {
      if (bytes === 0) return '0 Bytes'
      const k = 1024
      const sizes = ['Bytes', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    }

    const copyToClipboard = async (text) => {
      try {
        await navigator.clipboard.writeText(text)
        // Could add notification here
      } catch (error) {
        console.error('Failed to copy:', error)
      }
    }

    const addToKnowledge = (result) => {
      // Could emit event to parent to add to knowledge base
      emit('add-to-knowledge', {
        content: result.text || result.analysis,
        metadata: {
          source: 'document_processing',
          filename: result.filename,
          confidence: result.confidence
        }
      })
    }

    return {
      fileInput,
      isDragging,
      fileQueue,
      processing,
      results,
      analysisType,
      enhancementType,
      question,
      handleDrop,
      handleFileSelect,
      removeFile,
      processFiles,
      formatFileSize,
      copyToClipboard,
      addToKnowledge
    }
  }
}
</script>

<!-- components/Voice/VoiceInterface.vue -->
<template>
  <div class="flex flex-col h-full">
    <!-- Header -->
    <div class="bg-white border-b px-6 py-4">
      <h2 class="text-lg font-semibold text-gray-800">Voice Interaction</h2>
      <p class="text-sm text-gray-600 mt-1">Talk to AlexAI using voice commands</p>
    </div>

    <div class="flex-1 p-6">
      <!-- Voice Status -->
      <div class="text-center mb-8">
        <div 
          :class="[
            'w-32 h-32 rounded-full mx-auto mb-4 flex items-center justify-center transition-all duration-300',
            isListening ? 'bg-red-100 border-4 border-red-300 animate-pulse' :
            isSpeaking ? 'bg-blue-100 border-4 border-blue-300 animate-pulse' :
            'bg-gray-100 border-4 border-gray-300'
          ]"
        >
          <svg 
            :class="[
              'w-16 h-16 transition-colors',
              isListening ? 'text-red-600' :
              isSpeaking ? 'text-blue-600' :
              'text-gray-600'
            ]" 
            fill="currentColor" 
            viewBox="0 0 20 20"
          >
            <path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"/>
          </svg>
        </div>

        <p class="text-lg font-medium text-gray-900 mb-2">
          {{ statusText }}
        </p>
        <p class="text-sm text-gray-600">
          {{ statusDescription }}
        </p>
      </div>

      <!-- Voice Controls -->
      <div class="max-w-md mx-auto space-y-4">
        <!-- Quick Voice Actions -->
        <div class="grid grid-cols-2 gap-4">
          <button
            @click="startListening"
            :disabled="isListening || isSpeaking"
            class="flex flex-col items-center p-4 border-2 border-dashed border-gray-300 rounded-lg hover:border-blue-500 hover:bg-blue-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            <svg class="w-8 h-8 text-gray-600 mb-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"/>
            </svg>
            <span class="text-sm font-medium">Start Conversation</span>
          </button>

          <button
            @click="showTextToSpeech = true"
            :disabled="isListening || isSpeaking"
            class="flex flex-col items-center p-4 border-2 border-dashed border-gray-300 rounded-lg hover:border-green-500 hover:bg-green-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            <svg class="w-8 h-8 text-gray-600 mb-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.617.768L4.383 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.383l4-3.232zm7.617 2.924a1 1 0 01.293.707v6.586a1 1 0 01-1.707.707L14 12.414V7.586l1.586-1.586a1 1 0 011.414 0z" clip-rule="evenodd"/>
            </svg>
            <span class="text-sm font-medium">Text to Speech</span>
          </button>
        </div>

        <!-- Stop Button (when active) -->
        <button
          v-if="isListening"
          @click="stopListening"
          class="w-full bg-red-600 text-white py-3 px-6 rounded-lg hover:bg-red-700 transition-colors flex items-center justify-center"
        >
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clip-rule="evenodd"/>
          </svg>
          Stop Listening
        </button>

        <!-- Settings -->
        <div class="bg-gray-50 rounded-lg p-4">
          <h3 class="text-sm font-medium text-gray-800 mb-3">Voice Settings</h3>
          
          <div class="space-y-3">
            <div class="flex items-center justify-between">
              <label class="text-sm text-gray-700">Wake Word Detection</label>
              <input
                v-model="wakeWordEnabled"
                type="checkbox"
                class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
              />
            </div>
            
            <div class="flex items-center justify-between">
              <label class="text-sm text-gray-700">Auto Response</label>
              <input
                v-model="autoResponse"
                type="checkbox"
                class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
              />
            </div>

            <div>
              <label class="block text-sm text-gray-700 mb-1">Timeout (seconds)</label>
              <input
                v-model.number="timeout"
                type="range"
                min="10"
                max="60"
                class="w-full"
              />
              <div class="text-xs text-gray-500 text-center">{{ timeout }}s</div>
            </div>
          </div>
        </div>

        <!-- Voice History -->
        <div v-if="voiceHistory.length > 0" class="bg-white border rounded-lg p-4">
          <h3 class="text-sm font-medium text-gray-800 mb-3">Recent Voice Interactions</h3>
          <div class="space-y-2 max-h-32 overflow-y-auto">
            <div
              v-for="(interaction, index) in voiceHistory.slice(-5)"
              :key="index"
              class="text-xs p-2 bg-gray-50 rounded"
            >
              <div class="font-medium text-gray-900">{{ interaction.timestamp }}</div>
              <div class="text-gray-600">{{ interaction.text }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Text to Speech Modal -->
      <div 
        v-if="showTextToSpeech"
        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
        @click="showTextToSpeech = false"
      >
        <div 
          class="bg-white rounded-lg p-6 max-w-md w-full mx-4"
          @click.stop
        >
          <h3 class="text-lg font-medium text-gray-900 mb-4">Text to Speech</h3>
          
          <textarea
            v-model="textToSpeak"
            placeholder="Enter text to speak..."
            class="w-full border border-gray-300 rounded-md px-3 py-2 h-24 resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          ></textarea>

          <div class="flex justify-end space-x-3 mt-4">
            <button
              @click="showTextToSpeech = false"
              class="px-4 py-2 text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
            >
              Cancel
            </button>
            <button
              @click="speakText"
              :disabled="!textToSpeak.trim() || isSpeaking"
              class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              {{ isSpeaking ? 'Speaking...' : 'Speak' }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  name: 'VoiceInterface',
  props: {
    isListening: {
      type: Boolean,
      default: false
    },
    isSpeaking: {
      type: Boolean,
      default: false
    }
  },
  emits: ['start-listening', 'stop-listening', 'text-to-speech'],
  setup(props, { emit }) {
    const showTextToSpeech = ref(false)
    const textToSpeak = ref('')
    const wakeWordEnabled = ref(true)
    const autoResponse = ref(true)
    const timeout = ref(30)
    const voiceHistory = ref([])

    const statusText = computed(() => {
      if (props.isListening) return 'Listening...'
      if (props.isSpeaking) return 'Speaking...'
      return 'Ready'
    })

    const statusDescription = computed(() => {
      if (props.isListening) return 'Say something to AlexAI'
      if (props.isSpeaking) return 'AlexAI is responding'
      return 'Click to start voice interaction'
    })

    const startListening = () => {
      emit('start-listening')
      addToHistory('Voice interaction started')
    }

    const stopListening = () => {
      emit('stop-listening')
      addToHistory('Voice interaction stopped')
    }

    const speakText = () => {
      if (textToSpeak.value.trim()) {
        emit('text-to-speech', textToSpeak.value.trim())
        addToHistory(`TTS: ${textToSpeak.value.substring(0, 50)}...`)
        textToSpeak.value = ''
        showTextToSpeech.value = false
      }
    }

    const addToHistory = (text) => {
      voiceHistory.value.push({
        timestamp: new Date().toLocaleTimeString(),
        text: text
      })
      
      // Keep only last 10 entries
      if (voiceHistory.value.length > 10) {
        voiceHistory.value = voiceHistory.value.slice(-10)
      }
    }

    return {
      showTextToSpeech,
      textToSpeak,
      wakeWordEnabled,
      autoResponse,
      timeout,
      voiceHistory,
      statusText,
      statusDescription,
      startListening,
      stopListening,
      speakText
    }
  }
}
</script>