cleaned up the files

Author: ramsrib

example/src/App.tsx

@@ -7,7 +7,6 @@ import AnimatedStatusIconPreview from './components/AnimatedStatusIconPreview'
 import type { WidgetConfig } from './types'
 import VapiLogomark from '../logomark-primary.svg'
 
-// Import extracted components
 import NavigationTabs from './components/builder/NavigationTabs'
 import WidgetEmbedSection from './components/builder/WidgetEmbedSection'
 import ModeSection from './components/builder/ModeSection'
@@ -17,7 +16,6 @@ import TextLabelsSection from './components/builder/TextLabelsSection'
 import LegalConsentSection from './components/builder/LegalConsentSection'
 import VapiConfigurationSection from './components/builder/VapiConfigurationSection'
 
-// Main App Component
 function App() {
   const [config, setConfig] = useState<WidgetConfig>({
     mode: 'voice',
@@ -66,7 +64,6 @@ function App() {
     setConfig(prev => ({ ...prev, [key]: value }))
   }
 
-  // Generate vapiConfig based on the selected type
   const generateVapiConfig = () => {
     try {
       switch (config.vapiConfigType) {

example/src/components/builder/VapiConfigurationSection.tsx

@@ -17,7 +17,7 @@ const VapiConfigurationSection: React.FC<VapiConfigurationSectionProps> = ({ con
       Configure how the widget connects to Vapi AI
     </p>
 
-    {/* Public Key - Always shown first */}
+    {/* Public Key */}
     <div className="mb-6">
       <label className="block text-sm font-medium mb-2 text-gray-700">
         Vapi Public Key

example/src/types/index.ts

@@ -15,10 +15,11 @@ export interface WidgetConfig {
   termsContent: string
   localStorageKey: string
   showTranscript: boolean
+
   // Vapi Configuration
   publicKey: string
   vapiConfigType: 'assistantId' | 'assistantWithOverrides' | 'assistantObject'
   assistantId: string
   assistantOverrides: string
   assistantObject: string
-} 
+}

src/components/AnimatedStatusIcon.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react'
 
-// Type definitions for bar objects
 type CircularBar = {
   x: number
   y: number

src/components/VapiWidget.tsx

@@ -1,13 +1,10 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { useVapiWidget } from '../hooks'
 
-// Import extracted types
 import { VapiWidgetProps, ColorScheme, StyleConfig } from './types'
 
-// Import extracted constants
 import { sizeClasses, radiusClasses, positionClasses } from './constants'
 
-// Import extracted components
 import ConsentForm from './widget/ConsentForm'
 import FloatingButton from './widget/FloatingButton'
 import WidgetHeader from './widget/WidgetHeader'
@@ -18,7 +15,6 @@ import VoiceControls from './widget/controls/VoiceControls'
 import ChatControls from './widget/controls/ChatControls'
 import HybridControls from './widget/controls/HybridControls'
 
-// Import animations
 import '../styles/animations.css'
 
 const VapiWidget: React.FC<VapiWidgetProps> = ({
@@ -54,13 +50,10 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
   const [hasConsent, setHasConsent] = useState(false)
   const [chatInput, setChatInput] = useState('')
 
-  // Ref for auto-scrolling
   const conversationEndRef = useRef<HTMLDivElement>(null)
 
-  // Ref for input field focus
   const inputRef = useRef<HTMLInputElement>(null)
 
-  // Use the new combined hook
   const vapi = useVapiWidget({
     mode,
     publicKey,
@@ -72,7 +65,6 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
     onError
   })
 
-  // Create color scheme object
   const colors: ColorScheme = {
     baseColor: baseColor 
       ? (theme === 'dark' && baseColor === '#FFFFFF' ? '#000000' : baseColor)
@@ -82,17 +74,14 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
     buttonAccentColor: buttonAccentColor || '#FFFFFF'
   }
 
-  // Adjust size for chat/hybrid modes - tiny behaves as medium
   const effectiveSize = mode !== 'voice' && size === 'tiny' ? 'compact' : size
 
-  // Create style config object
   const styles: StyleConfig = {
     size: effectiveSize,
     radius,
     theme
   }
 
-  // Check consent on mount
   useEffect(() => {
     if (requireConsent) {
       const storedConsent = localStorage.getItem(localStorageKey)
@@ -103,15 +92,12 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
     }
   }, [requireConsent, localStorageKey])
 
-  // Auto-scroll to bottom when new messages arrive or content streams
   useEffect(() => {
     conversationEndRef.current?.scrollIntoView({ behavior: 'smooth' })
   }, [vapi.conversation, vapi.chat.isTyping])
 
-  // Auto-focus input when widget expands in chat or hybrid mode
   useEffect(() => {
     if (isExpanded && (mode === 'chat' || mode === 'hybrid')) {
-      // Small delay to ensure the DOM is ready
       setTimeout(() => {
         inputRef.current?.focus()
       }, 100)
@@ -121,11 +107,9 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
   const handleConsentAgree = () => {
     localStorage.setItem(localStorageKey, 'true')
     setHasConsent(true)
-    // Widget will automatically show since isExpanded is already true
   }
 
   const handleConsentCancel = () => {
-    // Just close the expanded view
     setIsExpanded(false)
   }
 
@@ -136,14 +120,11 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
   const handleSendMessage = async () => {
     if (!chatInput.trim()) return
 
-    // Store the message and clear input immediately
     const message = chatInput.trim()
     setChatInput('')
 
-    // Then send the message
     await vapi.chat.sendMessage(message)
 
-    // Maintain focus on the input field
     inputRef.current?.focus()
   }
 
@@ -154,22 +135,18 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
   }
 
   const handleReset = () => {
-    // Clear all conversation history and session states
     vapi.clearConversation()
 
-    // If there's an active call, end it
     if (vapi.voice.isCallActive) {
       vapi.voice.endCall()
     }
 
-    // Clear the chat input
     setChatInput('')
   }
 
   // Don't allow expanded view for tiny voice mode
   const showExpandedView = isExpanded && !(mode === 'voice' && size === 'tiny')
 
-  // Handle floating button click
   const handleFloatingButtonClick = () => {
     setIsExpanded(true)
   }
@@ -178,7 +155,6 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
     <>
       <div className={`fixed z-[50] ${positionClasses[position]}`}>
         {showExpandedView ? (
-          // Check if we need to show consent form or the actual widget
           requireConsent && !hasConsent ? (
             <ConsentForm
               termsContent={termsContent}
@@ -189,7 +165,6 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
               radius={radius}
             />
           ) : (
-            // Expanded Widget
             <div 
               className={`${sizeClasses[size].expanded} ${radiusClasses[radius]} border flex flex-col overflow-hidden ${
                 styles.theme === 'dark' 
@@ -230,7 +205,6 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
                     : {})
                 }}
               >
-                {/* Show transcript when: showTranscript is true OR in chat mode OR in hybrid mode but voice is not active */}
                 {(showTranscript || mode === 'chat' || (mode === 'hybrid' && !vapi.voice.isCallActive)) ? (
                   <>
                     {vapi.conversation.length === 0 ? (
@@ -268,7 +242,6 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
                     )}
                   </>
                 ) : (
-                  /* Show center volume indicator when transcript is hidden and voice call is active */
                   vapi.voice.isCallActive ? (
                     <VolumeIndicator
                       volumeLevel={vapi.voice.volumeLevel}
@@ -348,7 +321,6 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
             </div>
           )
         ) : (
-          // Floating Button - Always visible
           <FloatingButton
             isCallActive={vapi.voice.isCallActive}
             connectionStatus={vapi.voice.connectionStatus}

src/components/index.ts

@@ -1,4 +1,5 @@
 export { default as AnimatedStatusIcon } from './AnimatedStatusIcon'
 export { default as VapiWidget } from './VapiWidget'
+
 export type { VapiWidgetProps } from './types'
 export type { AnimatedStatusIconProps } from './AnimatedStatusIcon' 

src/components/types.ts

@@ -1,11 +1,11 @@
 export interface VapiWidgetProps {
   publicKey: string
 
-  // Vapi Configuration - Generic support for all vapi.start() patterns
+  // Vapi Configuration
   vapiConfig: any // This gets passed directly to vapi.start()
 
   // API Configuration
-  apiUrl?: string // Optional custom API URL for chat
+  apiUrl?: string
 
   // Layout & Position
   position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
@@ -41,7 +41,7 @@ export interface VapiWidgetProps {
   // Transcript
   showTranscript?: boolean
 
-  // Legacy props (for backwards compatibility)
+  // TODO: Remove this
   primaryColor?: string
 
   // Event handlers

src/components/widget/WidgetHeader.tsx

@@ -16,7 +16,7 @@ const WidgetHeader: React.FC<WidgetHeaderProps> = ({
   colors,
   styles
 }) => {
-  // Determine the status message based on current state
+
   const getStatusMessage = () => {
     if (connectionStatus === 'connecting') return 'Connecting...'
 
@@ -26,14 +26,12 @@ const WidgetHeader: React.FC<WidgetHeaderProps> = ({
 
     if (isTyping) return 'Assistant is typing...'
 
-    // If there's an active conversation, show appropriate status
     if (hasActiveConversation) {
       if (mode === 'chat') return 'Chat active'
       if (mode === 'hybrid') return 'Ready to assist'
       return 'Connected'
     }
 
-    // No conversation yet - show how to start
     if (mode === 'voice') return 'Click the microphone to start'
     if (mode === 'chat') return 'Type a message below'
     return 'Choose voice or text'

src/components/widget/conversation/Message.tsx

@@ -3,12 +3,10 @@ import ReactMarkdown from 'react-markdown'
 import { ConversationMessageProps, MarkdownMessageProps } from '../../types'
 import { messageRadiusClasses } from '../../constants'
 
-// Markdown message renderer component
 const MarkdownMessage: React.FC<MarkdownMessageProps> = ({ content, isLoading, role }) => (
   <div className="markdown-content">
     <ReactMarkdown
       components={{
-        // Style markdown elements to fit the chat bubble design
         p: ({children}) => <p className="mb-1 last:mb-0">{children}</p>,
         ul: ({children}) => <ul className="list-disc list-inside mb-1 last:mb-0">{children}</ul>,
         ol: ({children}) => <ol className="list-decimal list-inside mb-1 last:mb-0">{children}</ol>,

src/hooks/useVapiChat.ts

@@ -90,7 +90,6 @@ export const useVapiChat = ({
     try {
       setIsLoading(true)
 
-      // Add user message
       const userMessage: ChatMessage = {
         role: 'user',
         content: text.trim(),
@@ -103,15 +102,13 @@ export const useVapiChat = ({
       assistantMessageIndexRef.current = null
       setIsTyping(true)
 
-      // Start streaming
       const abort = await clientRef.current.streamChat(
         {
           input: text.trim(),
           assistantId,
           sessionId,  // Use current sessionId if available
           stream: true
         },
-        // On chunk callback
         (chunk) => {
           // Update sessionId if provided in response
           if (chunk.sessionId && chunk.sessionId !== sessionId) {
@@ -122,23 +119,19 @@ export const useVapiChat = ({
           if (content) {
             currentAssistantMessageRef.current += content
 
-            // Update the assistant message in real-time
             setMessages(prev => {
               const newMessages = [...prev]
 
               // Check if we already have an assistant message index for this stream
               if (assistantMessageIndexRef.current !== null && assistantMessageIndexRef.current < newMessages.length) {
-                // Update existing message by creating a new object
                 const existingMessage = newMessages[assistantMessageIndexRef.current]
                 if (existingMessage && existingMessage.role === 'assistant') {
-                  // Create a new message object to trigger React re-render
                   newMessages[assistantMessageIndexRef.current] = {
                     ...existingMessage,
                     content: currentAssistantMessageRef.current
                   }
                 }
               } else {
-                // Create new assistant message and track its index
                 assistantMessageIndexRef.current = newMessages.length
                 newMessages.push({
                   role: 'assistant',