Matt/bra2 1100 embed

[koenmatt]

• Added voice and a bunch of styling and config options

[koenmatt]

@greptileai

[greptile-apps]

Greptile Overview

Greptile Summary

This PR adds voice mode functionality with real-time audio visualization and numerous configuration options for the chat widget.

Key Changes:

• Added voice mode with LiveKit integration for real-time audio conversations
• Implemented Three.js particle visualization that reacts to audio amplitude
• Added extensive styling customization (primary/accent colors, gradients, header text color)
• Created home page view with customizable image, title, description, and navigation
• Implemented auto-open feature with timeToOpen that triggers conversation after delay
• Added artificialDelay for typing indicator and response timing
• Enhanced useChat hook with sendTriggerMessage for programmatic conversation start
• Extended web component attributes to support all new configuration options
• Added transcript download functionality

Areas to Note:

• Voice mode loads Three.js and GSAP from CDN at runtime (security and performance consideration)
• Placeholder TODOs for attachment, emoji, and GIF picker features
• The accentColor prop in VoiceMode is declared but unused

Confidence Score: 4/5

• This PR is safe to merge with minor style improvements recommended
• The implementation is well-structured with proper React patterns, good separation of concerns, and comprehensive feature additions. The code includes proper cleanup in useEffect hooks and error handling. Confidence reduced by 1 point due to runtime CDN loading of large libraries and minor style issues (unused prop, unnecessary dependency)
• VoiceMode.tsx could benefit from bundling dependencies instead of runtime CDN loading

Important Files Changed

Filename	Overview
src/components/VoiceMode/VoiceMode.tsx	New voice mode component with Three.js visualization, LiveKit integration for real-time audio, and audio analysis for particle animation
src/hooks/useChat.ts	Enhanced with sendTriggerMessage for auto-open, artificial delay support, and improved non-streaming mode with delayed message display
src/types/index.ts	Extended with voice mode props (voiceTokenUrl, voiceAgentName, enableVoiceMode), styling options (gradients, colors), and home page configuration
src/components/ChatWidget/ChatWidget.tsx	Added auto-open timer with timeToOpen, voice mode configuration, gradient styling, and home page view support
src/embed/ChatWidgetElement.ts	Web component updated with all new attributes for voice mode, gradients, home page, artificial delay, and auto-open configuration

Sequence Diagram

sequenceDiagram
    participant User
    participant ChatWidget
    participant ChatContainer
    participant VoiceMode
    participant LiveKit
    participant MessageInput
    participant useChat

    User->>ChatWidget: Opens widget
    ChatWidget->>useChat: Initialize session
    
    alt Auto-open enabled
        ChatWidget->>useChat: sendTriggerMessage()
        useChat->>API: Send empty message
        API-->>useChat: Welcome response
    end

    User->>MessageInput: Clicks audio button
    MessageInput->>ChatContainer: handleVoiceClick()
    ChatContainer->>VoiceMode: Mount VoiceMode
    VoiceMode->>VoiceMode: Load Three.js & GSAP from CDN
    VoiceMode->>VoiceMode: Initialize particle visualization
    
    User->>VoiceMode: Tap orb to connect
    VoiceMode->>LiveKit: POST tokenUrl (with agentName)
    LiveKit-->>VoiceMode: Return token & server URL
    VoiceMode->>LiveKit: Connect to room
    VoiceMode->>VoiceMode: Enable microphone
    LiveKit-->>VoiceMode: Remote audio track
    VoiceMode->>VoiceMode: Setup audio analysers
    VoiceMode->>VoiceMode: Animate particles with audio
    
    User->>VoiceMode: Tap orb to end call
    VoiceMode->>LiveKit: Disconnect
    VoiceMode->>ChatContainer: onClose()
    ChatContainer->>ChatWidget: Return to chat view

Loading

[greptile-apps]

_{5 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

getAmplitude dependency is unnecessary since it has no dependencies and is stable

Suggested change

	}, [getAmplitude]);
	}, []);

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/components/VoiceMode/VoiceMode.tsx
Line: 408:408

Comment:
`getAmplitude` dependency is unnecessary since it has no dependencies and is stable

```suggestion
  }, []);
```

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

accentColor prop is defined but never used in the component

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/components/VoiceMode/VoiceMode.tsx
Line: 16:16

Comment:
`accentColor` prop is defined but never used in the component

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

Loading external scripts from CDN at runtime creates security risk (no SRI) and performance issues. Consider bundling Three.js and GSAP as dependencies

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/components/VoiceMode/VoiceMode.tsx
Line: 139:140

Comment:
Loading external scripts from CDN at runtime creates security risk (no SRI) and performance issues. Consider bundling Three.js and GSAP as dependencies

How can I resolve this? If you propose a fix, please make it concise.