Friendly Chat Engine

A real-time chat application exploring reactive trigger systems, visual effects, and conversation flow patterns. Built with Node.js, Express, Socket.io, and Vanilla JavaScript.

This is a collaborative architecture study exploring chat system patterns.

Features

🎨 Visual Effects

• Animated spiral patterns with particle effects
• Screen flash effects for system events
• Gradient backgrounds

🔊 Audio Features

• Text-to-speech synthesis for messages
• Audio cues for system events
• Volume control

💬 Chat Features

• Real-time messaging via WebSockets
• Message history
• Live user counter
• Keyword detection and highlighting

⚙️ Controls

• Toggle visual effects
• Enable/disable text-to-speech
• Toggle keyword detection system
• Responsive mobile-friendly design

Quick Start

Prerequisites

• Node.js v18+
• npm (comes with Node.js)

Installation

git clone https://github.com/Pantheon-LadderWorks/js-bambisleep-chat.git
cd js-bambisleep-chat
npm install
npm start

Access: Navigate to http://localhost:7878

Development Mode

npm run dev

Starts both backend server (port 7878) and frontend dev server (port 5173).

Project Structure

js-bambisleep-chat/
├── public/                # Frontend static files
│   ├── index.html        # Main HTML template
│   ├── css/
│   │   └── style.css     # Styles and animations
│   └── js/
│       ├── aigf-core.js          # Core chat functionality
│       ├── psychodelic-trigger-mania.js  # Visual effects
│       ├── text2speech.js       # TTS system
│       └── triggers.js          # Keyword management
├── server.js             # Express server + Socket.io
├── package.json          # Dependencies and scripts
└── README.md            # This file

Configuration

Environment Variables

Copy .env.example to .env and customize:

PORT=7878                   # Server port
NODE_ENV=development        # Environment mode
MAX_MESSAGE_LENGTH=500     # Message length limit
CHAT_HISTORY_LIMIT=100     # Chat history size

API Endpoints

• GET / - Main chat interface
• GET /api/health - Server health check
• GET /api/history - Chat message history
• GET /api/triggers - Get keyword metadata
• GET /api/triggers/json - Get raw triggers data
• POST /api/tts - Text-to-speech endpoint

Technology Stack

Backend

• Node.js - Runtime environment
• Express - Web framework
• Socket.io - Real-time communication

Frontend

• Vanilla JavaScript - Core functionality
• p5.js - Creative coding and animations
• Socket.io Client - Real-time communication
• Web Speech API - Text-to-speech
• CSS3 - Styling and animations

Build Tools

• Vite - Frontend build tool
• Nodemon - Development server

Development

Customizing Animations

Edit public/js/psychodelic-trigger-mania.js:

// Modify animation parameters
this.spiralSpeed = 0.02;    // Animation speed
this.maxParticles = 100;    // Particle count

Styling Changes

Modify public/css/style.css for visual customization.

Browser Compatibility

• Chrome/Edge: Full support
• Firefox: Full support
• Safari: Full support
• Mobile: Responsive design

Testing

# Run all tests
npm test

# Clean build artifacts
npm run clean

License

MIT License

Contributing

This is a study project exploring chat architecture patterns. Original architecture by HarleyVader.

---

Exploring reactive conversation systems 🌀