Skip to content
This repository was archived by the owner on Mar 4, 2026. It is now read-only.

Add personal AI companion component with voice and visual states#27

Merged
HeadyConnection merged 4 commits intocopilot/add-admin-ui-heartbeat-sectionfrom
copilot/add-personal-ai-companion-ui
Jan 26, 2026
Merged

Add personal AI companion component with voice and visual states#27
HeadyConnection merged 4 commits intocopilot/add-admin-ui-heartbeat-sectionfrom
copilot/add-personal-ai-companion-ui

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Jan 26, 2026

Implements a cross-UI AI companion with contextual visual states, speech synthesis, and wave-form visualization. Component appears as a pulsating orb with animated robotic face that responds to interaction states.

Implementation

Core Component (heady_companion.js)

  • Vanilla JS class, zero dependencies (~20KB)
  • Four visual states: idle, listening, speaking, thinking (CSS animations)
  • Web Speech API integration with voice selection
  • Canvas-based wave-form mouth animation during speech
  • Configurable positioning, sizing, theming

Integration

  • Drop-in component via script include or auto-init
  • Integrated into heady_gaia_monitor.html as reference implementation
  • Standalone demo page with customization controls

Customization

  • System voice selection from available voices
  • Color theming (primary/secondary/accent)
  • Positioning (4 corners) and sizing (S/M/L)
  • Placeholder for custom voice training

Usage

const companion = new HeadyCompanion({
    container: '#app',
    position: 'bottom-right',
    primaryColor: '#97c97c',
    voice: 'Google US English'
});

companion.speak('Hello! How can I help you today?');

Screenshots

Visual States

Idle Listening Speaking Thinking
idle listening speaking thinking

Integrated with HeadyGaia Monitor
integration

Technical Notes

  • Speech synthesis runs entirely in-browser (no external APIs)
  • Wave-form visualization uses requestAnimationFrame for 60fps
  • Proper cleanup in destroy() prevents memory leaks
  • CodeQL: 0 alerts
Original prompt

Pull request: #24
nice. now across all user UI and ux, the personal ai companion should function across perceived boundaries and operate alongside the person present in their user space. I imagine a welcoming roundish symmetrical and pulsating relative to functioning certain ways such as when speaking the visual representation of the ai companion speaking is a mini friendly looking robotic style face that has an area where the mouth should be that shows moving wave type functions to represent the sound eminating from the device. this ai interface should be customizable to allow for ease in comfort including having many voice options including trading a model to have my voice for fun


💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

@HeadyConnection HeadyConnection marked this pull request as ready for review January 26, 2026 03:09
Copilot AI review requested due to automatic review settings January 26, 2026 03:09
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot wasn't able to review any files in this pull request.

Copilot AI and others added 2 commits January 26, 2026 03:12
Co-authored-by: HeadyConnection <250789142+HeadyConnection@users.noreply.github.com>
Co-authored-by: HeadyConnection <250789142+HeadyConnection@users.noreply.github.com>
Co-authored-by: HeadyConnection <250789142+HeadyConnection@users.noreply.github.com>
Copilot AI changed the title [WIP] Add personal AI companion UI and UX enhancements Add personal AI companion component with voice and visual states Jan 26, 2026
Copilot AI requested a review from HeadyConnection January 26, 2026 03:21
@HeadyConnection HeadyConnection merged commit fa233b9 into copilot/add-admin-ui-heartbeat-section Jan 26, 2026
@HeadyConnection HeadyConnection deleted the copilot/add-personal-ai-companion-ui branch January 26, 2026 03:29
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants