Skip to content

Matt/bra2 1100 embed #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
koenmatt merged 5 commits into from
Feb 4, 2026
Merged

Matt/bra2 1100 embed #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
195ac19
added
koenmatt Feb 4, 2026
79d979f
added voice mode
koenmatt Feb 4, 2026
68de325
added voice and the rest
koenmatt Feb 4, 2026
2223beb
fixing type errors
koenmatt Feb 4, 2026
28548dd
fixing build issues
koenmatt Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 81 additions & 0 deletions dev/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
// Import styles FIRST to ensure CSS variables are loaded
import '../src/styles/variables.css';
// Then import the component (which also imports variables, but order matters)
import { ChatWidget } from '../src';

// ============================================
// 🔧 CONFIGURE YOUR TEST WIDGET HERE
// ============================================

const TEST_CONFIG = {
// Replace with your real embed ID to test with real API data
embedId: 'erakRkiwWD3XPpAWbjgSi',

// Set to true to use mock responses instead of real API
mockMode: false,

// Widget starts closed so we can test auto-open
defaultOpen: false,

// Position: 'bottom-right' | 'bottom-left' | 'inline'
position: 'bottom-right' as const,

theme: 'dark' as const,

// Auto-open after 3 seconds and send trigger message
timeToOpen: 3,

// Voice mode configuration
voiceTokenUrl: 'https://lk-demo-beta.vercel.app/api/token',
voiceAgentName: 'voice-agent',
enableVoiceMode: true,

// Show collapse button when widget is open (default: true)
showCollapseButton: true,

// Home page configuration
homeImage: 'https://images.unsplash.com/photo-1531746790731-6c087fecd65a?w=400&h=300&fit=crop',
homeTitle: 'Getting Started Guide',
homeDescription: 'Learn how to get the most out of our platform with our comprehensive guide.',
homeLink: 'https://docs.brainbase.com/getting-started',

// Optional overrides (leave undefined to use values from API/database)
// primaryColor: '#1a1a2e',
// agentName: 'Test Agent',
// welcomeMessage: 'Hello! This is a test message.',
};

// ============================================

function App() {

Check warning on line 52 in dev/main.tsx

View workflow job for this annotation

GitHub Actions / build 

Fast refresh only works when a file has exports. Move your component(s) to a separate file
return (
<ChatWidget
embedId={TEST_CONFIG.embedId}
mockMode={TEST_CONFIG.mockMode}
defaultOpen={TEST_CONFIG.defaultOpen}
position={TEST_CONFIG.position}
theme={TEST_CONFIG.theme}
timeToOpen={TEST_CONFIG.timeToOpen}
voiceTokenUrl={TEST_CONFIG.voiceTokenUrl}
voiceAgentName={TEST_CONFIG.voiceAgentName}
enableVoiceMode={TEST_CONFIG.enableVoiceMode}
showCollapseButton={TEST_CONFIG.showCollapseButton}
homeImage={TEST_CONFIG.homeImage}
homeTitle={TEST_CONFIG.homeTitle}
homeDescription={TEST_CONFIG.homeDescription}
homeLink={TEST_CONFIG.homeLink}
onSessionStart={(sessionId) => console.log('Session started:', sessionId)}
onSessionEnd={(session) => console.log('Session ended:', session)}
onMessage={(message) => console.log('Message:', message)}
onError={(error) => console.error('Error:', error)}
/>
);
}

ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
74 changes: 74 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chat Widget Test</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 40px;
}

.container {
max-width: 800px;
margin: 0 auto;
}

.container h1 {
color: white;
margin-bottom: 8px;
font-size: 2rem;
}

.container > p {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 24px;
}

.card {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.card h2 {
color: #1a1a2e;
margin-bottom: 16px;
font-size: 1.25rem;
}

.card p {
color: #6b7280;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<h1>🧪 Chat Widget Test Page</h1>
<p>This page loads the ChatWidget with real API data. Edit the embedId in dev/main.tsx to test different deployments.</p>

<div class="card">
<h2>Sample Content</h2>
<p>
This is a sample page to test the chat widget overlay.
The widget should appear in the bottom-right corner.
Click the chat button to open it and test your UI changes!
</p>
</div>
</div>

<div id="root"></div>
<script type="module" src="/dev/main.tsx"></script>
</body>
</html>
Loading