Skip to main content

Components

React components for building VAssist’s 3D character interface, chat UI, and AI-powered toolbar.

VirtualAssistant

High-level wrapper component managing the 3D scene, animations, and character positioning.

Props

function
Callback when assistant is initialized. Receives object with animationManager, positionManager, and scene.
boolean
default:false
Enable preview mode for setup wizard (renders inline instead of portal)
string
default:"100%"
Width for preview mode
string
default:"100%"
Height for preview mode
string
default:""
Additional CSS classes for preview container
boolean
default:false
Enable portrait mode in preview (clips model at waist)
string
default:"bottom-center"
Position preset for preview mode

Ref Methods

Access these methods via ref:
function
Make the assistant speak with lip sync and emotion-based body animation.Parameters:
  • text: Text to speak
  • mouthAnimationBlobUrl: Blob URL to BVMD file with lip-sync animation
  • emotionCategory: Animation category (‘talking’, ‘idle’, ‘thinking’, ‘celebrating’, ‘walking’)
  • options: Blending weights for composite animations
Example:
function
Returns assistant to idle state.
function
Sets assistant state directly using state from AssistantState enum or emotion string.
function
Triggers specific action: ‘think’, ‘walk’, ‘celebrate’, ‘speak’.
function
Plays composite animation with stitched fill animations.
function
Returns current assistant state.
function
Checks if AnimationManager is initialized.
function
Gets direct access to AnimationManager instance.
function
Sets model position using preset (‘bottom-right’, ‘bottom-left’, ‘center’, etc.).
function
Gets direct access to PositionManager instance.
function
Queues a simple animation to play after current animation finishes.
function
Clears all queued animations.

AIToolbar

Floating context-aware toolbar for text and image operations. Appears on text selection, input focus, or image hover.

Features

  • Summarization: TL;DR, headline, key points, teaser
  • Translation: Auto-detect source language, translate to target
  • Image Analysis: Describe, extract text, analyze images
  • Text Rewriting: Grammar fix, tone adjustment, length changes
  • Content Writing: Generate new content from prompts
  • Voice Dictation: Speech-to-text for editable fields
  • Language Detection: Identify text language

Usage

AIToolbar is automatically rendered and managed by the application. It appears contextually based on user actions.
  • Text Selection: Shows summarize, translate, rewrite options
  • Input Focus: Shows dictation button
  • Image Hover: Shows image analysis options
  • Editable Content: Shows insert/replace options after processing

ChatContainer

Main chat interface managing messages, TTS playback, history, and settings.

Props

boolean
default:false
Whether 3D model is disabled (chat-only mode)
function
Callback to handle dropped content (images, audio, text)

Features

  • Message Display: Streaming text with smooth animation
  • TTS Playback: Text-to-speech for AI messages
  • Branch Navigation: Navigate between message variations
  • Chat History: Save/load conversations
  • Settings Panel: Configure AI, TTS, STT, UI
  • Drag & Drop: Attach images and audio files
  • Background Detection: Adaptive light/dark theme

ChatInput

Chat input component with voice recording, multimodal attachments, and drag-drop support.

Props

function
required
Callback when message is sent. Receives text, image data URLs, and audio data URLs.
function
Callback when input is closed (Esc key)
function
Callback for voice transcription results
function
Callback when voice conversation mode changes

Features

  • Text Input: Multi-line textarea with auto-resize
  • Voice Recording: One-shot speech-to-text
  • Voice Conversation: Continuous back-and-forth conversation
  • Image Attachments: Upload or paste up to 5 images (max 10MB each)
  • Audio Attachments: Upload up to 3 audio files (max 25MB each)
  • Drag & Drop: Drop files directly onto input
  • Keyboard Shortcuts: Enter to send, Shift+Enter for new line, Esc to close

BabylonScene

Babylon.js 3D scene component managing scene initialization, rendering, and cleanup.

Props

function
Custom scene builder function. Receives canvas, engine, and config.
function
Callback when scene is ready. Receives Babylon.js Scene object.
function
Callback for loading progress updates (0-100).
object
Scene configuration object passed to builder
object
Ref to PositionManager instance for drag-drop overlay positioning
boolean
default:false
Render as inline preview instead of full-screen portal
string
default:"100%"
Width for preview mode
string
default:"100%"
Height for preview mode
string
default:""
Additional CSS classes for preview container

Features

  • Automatic Initialization: Creates engine and scene on mount
  • FPS Limiting: Configurable frame rate limiting (30/60/90/native)
  • Drag & Drop Overlay: Positioned over 3D model for file drops
  • Resource Cleanup: Proper disposal of Babylon resources on unmount
  • Portal Rendering: Renders to document.body in production mode
  • Preview Mode: Inline rendering for setup/configuration UIs

Scene Metadata

The scene builder should attach managers to scene.metadata:

Usage Examples