cohost.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Co-host /w Vision & Voice - Social Stream Ninja</title>
    <meta name="description" content="Experience real-time AI video conversations with Google's Gemini Vision AI. This interactive demo showcases live video analysis and natural language processing capabilities.">
    <meta name="keywords" content="Gemini AI, video chat, AI assistant, Google AI, computer vision, real-time AI">
    <meta name="robots" content="index, follow">
    <meta property="og:title" content="Gemini Vision Chat">
    <meta property="og:description" content="Live video conversations with Google's Gemini Vision AI">
    <meta property="og:type" content="website">
    <meta name="author" content="Steve Seguin">
    <link rel="me" href="https://github.com/steveseguin">
    <meta property="article:author" content="https://github.com/steveseguin">
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnMSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzQwNEVFRCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6IzU4NjVGMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik04IDhoNDh2MzhIMjJMOCA1NlY4eiIgZmlsbD0idXJsKCNnMSkiLz48cGF0aCBkPSJNMjAgMjhoMjRNMjAgMjBoMjRNMjAgMzZoMTYiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48Y2lyY2xlIGN4PSI0OCIgY3k9IjM2IiByPSIzIiBmaWxsPSIjZmZmIi8+PC9zdmc+">
<style>
body {
    margin: 0;
    padding: 20px;
    display: flex;
    height: 100vh;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, sans-serif;
    background: #1a1a1a;
    color: #e0e0e0;
    position: relative;
}
.github-link {
    position: fixed;
    bottom: 15px;
    right: 15px;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.github-link:hover {
    opacity: 1;
}
p {
    display: inline-block;
}
.left-panel {
    width: 50%;
    padding-right: 20px;
}
.right-panel {
    width: 50%;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.controls {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.preview {
    width: 100%;
    max-height: calc(100vh - 300px);
    object-fit: contain;
    border-radius: 12px;
    background: #2a2a2a;
}
#error {
    color: #ff6b6b;
    margin: 10px 0;
}
select, button, .api-key, .message-input {
    background: #2a2a2a;
    border: 1px solid #404040;
    color: #e0e0e0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
}
select:hover, button:hover {
    background: #333;
    border-color: #505050;
}
button {
    cursor: pointer;
    background: #404eed;
    border: none;
    font-weight: 500;
}
button:hover {
    background: #5865f2;
}
#startButton {
    background: #22c55e;
    font-size: 16px;
    padding: 10px 20px;
    font-weight: 600;
    animation: pulse 2s infinite;
}
#startButton:hover {
    background: #16a34a;
}
#startButton {
    background: #22c55e;
    font-size: 16px;
    padding: 10px 20px;
    font-weight: 600;
    animation: pulse 2s infinite;
}
#startButton[data-started="true"] {
    background: #c5225e;
}
#startButton[data-started="true"]:hover {
    background: #a3164a;
}
select:disabled, button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #251f1f;
}

#chatgpt-device-notice {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    margin-top: 8px;
    color: #a0a0a0;
    text-align: center;
}

/* Optional: Add a subtle visual indicator of disabled selectors */
select:disabled {
    position: relative;
}

select:disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.api-key.highlight {
    border-color: #ff6b6b;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.3);
}
.api-key-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
}
.api-key-info {
    font-size: 13px;
    color: #a0a0a0;
	margin: auto;
}
.api-key-info a {
    color: #5865f2;
    text-decoration: none;
}
.api-key-info a:hover {
    text-decoration: underline;
}
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #251f1f;
}
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #2a2a2a;
    border-radius: 12px;
    overflow: hidden;
}
.responses {
    flex-grow: 1;
    padding: 16px;
    background: #2a2a2a;
    overflow-y: auto;
    margin-bottom: 10px;
}
.input-container {
    display: flex;
    gap: 10px;
    padding: 16px;
    background: #232323;
    border-top: 1px solid #404040;
}
.message {
    margin: 8px 0;
    padding: 12px;
    border-radius: 8px;
    line-height: 1.5;
}
.user-message {
    background: #404eed;
    margin-left: 20px;
    color: #fff;
}
.assistant-message {
    background: #333;
    margin-right: 20px;
}
.markdown-content {
    white-space: pre-wrap;
    word-wrap: break-word;
}
.markdown-content li {
    margin-left: 20px;
    margin-bottom: 5px;
}
.markdown-content code {
    background: #232323;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: ui-monospace, monospace;
    font-size: 0.9em;
}
.responses::-webkit-scrollbar {
    width: 8px;
}
.responses::-webkit-scrollbar-track {
    background: #232323;
    border-radius: 4px;
}
.responses::-webkit-scrollbar-thumb {
    background: #404040;
    border-radius: 4px;
}
.responses::-webkit-scrollbar-thumb:hover {
    background: #505050;
}


.mute-button:hover {
    background: #333;
    border-color: #505050;
}

.mute-button.muted {
    background: #c5225e;
    border-color: #a3164a;
}

.mute-button.muted:hover {
    background: #a3164a;
}

.mute-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    height: 35px;
}

.mute-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #2a2a2a;
    border: 1px solid #404040;
    color: #e0e0e0;
    padding: 8px;
    height: 35px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mute-icon {
    width: 20px;
    height: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.mute-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
}

.mic-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e0e0e0' viewBox='0 0 24 24'%3E%3Cpath d='M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5z'/%3E%3Cpath d='M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z'/%3E%3C/svg%3E");
}

.mic-icon.muted::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e0e0e0' viewBox='0 0 24 24'%3E%3Cpath d='M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9l4.19 4.18L21 20.73 4.27 3z'/%3E%3C/svg%3E");
}

.speaker-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e0e0e0' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
}

.speaker-icon.muted::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e0e0e0' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E");
}

.video-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e0e0e0' viewBox='0 0 24 24'%3E%3Cpath d='M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E");
}

.video-icon.muted::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e0e0e0' viewBox='0 0 24 24'%3E%3Cpath d='M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z'/%3E%3C/svg%3E");
}

:root {
  --puppet-primary: #333;
  --puppet-bg: #74d0ee;
  --puppet-accent: #4a4a4a;
  --puppet-highlight: #fff;
  --puppet-shadow: rgba(0, 0, 0, 0.2);
}
#puppet-container {
    position: fixed;
    z-index: 1000;
}
.puppet {
  width: 300px;
  height: 300px;
  position: relative;
  background: radial-gradient(circle at 30% 30%, var(--puppet-bg) 0%, #e0e0e0 100%);
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 30px var(--puppet-shadow);
}

.face {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

.eyes {
  display: flex;
  gap: 40px;
  transition: all 0.3s ease;
}

.eye {
  width: 32px;
  height: 32px;
  background: var(--puppet-primary);
  border-radius: 50%;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.eye::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--puppet-highlight);
  border-radius: 50%;
  top: 5px;
  left: 5px;
  transition: all 0.3s ease;
}

.eye::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--puppet-bg);
  transform: translateY(-100%);
  transition: transform 0.15s ease;
}

.eyebrows {
  position: absolute;
  width: 100%;
  top: -20px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.eyebrow {
  width: 35px;
  height: 8px;
  background: var(--puppet-primary);
  border-radius: 4px;
  transition: all 0.3s ease;
  transform-origin: center;
  opacity: 0;
}

.mouth {
  width: 80px;
  height: 40px;
  border: 6px solid var(--puppet-primary);
  border-radius: 0 0 40px 40px;
  border-top: 0;
  margin: 25px auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  transform-origin: center;
  margin-top: 32px;
}

.cheeks {
  position: absolute;
  width: 100%;
  top: 34%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  opacity: 0;
  transition: all 0.3s ease;
  left: -19%;
}

.cheek {
  width: 25px;
  height: 15px;
  background: #ff9999;
  border-radius: 50%;
  transform: scale(0);
  transition: all 0.3s ease;
  
}

@keyframes talking {
  0%, 100% { 
    height: 30px; 
    width: 65px;
    border-radius: 32.5px;
  }
  50% { 
    height: 50px; 
    width: 55px;
    border-radius: 27.5px;
  }
}

@keyframes softTalking {
  0%, 100% { 
    height: 40px;
    transform: scale(1);
  }
  50% { 
    height: 50px;
    transform: scale(0.98);
  }
}

@keyframes blink {
  0% { transform: translateY(-100%); }
  50% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@keyframes bounce {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, -47%); }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes idle {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  25% { transform: translate(-51%, -50%) rotate(-0.5deg); }
  75% { transform: translate(-49%, -50%) rotate(0.5deg); }
}

.puppet {
  animation: breathe 4s ease-in-out infinite;
}

.face {
  animation: idle 6s ease-in-out infinite;
}

.talking .mouth {
  animation: talking 0.4s infinite;
}

.blink .eye::after {
  animation: blink 0.15s ease forwards;
}

.happy .mouth {
  height: 60px;
  border-radius: 0 0 80px 80px;
  transform: translateY(0px) scale(0.9);
}

.happy .cheeks {
  opacity: 1;
}

.happy .cheek {
  transform: scale(1);
}

.happy.talking .mouth {
  animation: softTalking 0.4s infinite;
}

.sad .mouth {
  transform: rotate(180deg) translateY(-20px) scale(0.8);
  width: 60px;
  height: 30px;
}

.sad .eyebrows {
  opacity: 1;
}

.sad .eyebrow {
  transform: rotate(-15deg) translateY(5px);
  opacity: 1;
}

.sad .eyebrow:last-child {
  transform: rotate(15deg) translateY(5px);
}

.surprised .mouth {
  height: 80px;
  width: 60px;
  border-radius: 50%;
  transform: translateY(5px);
}

.surprised .eye {
  height: 45px;
  width: 45px;
  transform: translateY(-5px);
}

.surprised .eyebrows {
  opacity: 1;
}

.surprised .eyebrow {
  transform: translateY(-5px);
  opacity: 1;
}

.angry .eyebrows {
  opacity: 1;
}

.angry .eyebrow {
  transform: rotate(30deg) translateY(-2px);
  opacity: 1;
}

.angry .eyebrow:last-child {
  transform: rotate(-30deg) translateY(-2px);
}

.angry .mouth {
  width: 60px;
  height: 20px;
  transform: rotate(-10deg) translateY(10px);
  border-radius: 0 0 20px 20px;
}

.angry .eye::before {
  width: 8px;
  height: 8px;
  top: 12px;
  left: 12px;
}

.thinking .eye {
  height: 12px;
  border-radius: 6px;
  transform: translateY(5px);
}

.thinking .mouth {
  width: 40px;
  height: 12px;
  border-radius: 6px;
  transform: rotate(-10deg) translate(20px, 10px);
}

.thinking .eyebrows {
  opacity: 1;
}

.thinking .eyebrow:last-child {
  transform: rotate(-15deg) translateY(-2px);
  opacity: 1;
}

.wink .eye:first-child {
  height: 5px;
  margin-top: 15px;
  border-radius: 5px;
}

.excited .face {
  animation: bounce 0.4s infinite;
}

.excited .cheeks {
  opacity: 1;
}

.excited .cheek {
  transform: scale(1.2);
  background: #ff7777;
}

.sleepy .eye {
  height: 8px;
  border-radius: 4px;
  transform: translateY(12px);
}

.sleepy .mouth {
  height: 25px;
  width: 40px;
  transform: translateY(10px);
}

.shadow {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 20px;
  background: var(--puppet-shadow);
  border-radius: 50%;
  transition: all 0.3s ease;
  filter: blur(5px);
}

.excited .shadow {
  width: 85%;
  opacity: 0.8;
  transform: translateX(-50%) scaleX(0.95);
}

[data-theme="dark"] {
  --puppet-primary: #fff;
  --puppet-bg: #2a2a2a;
  --puppet-accent: #dadada;
  --puppet-highlight: #333;
  --puppet-shadow: rgba(0, 0, 0, 0.4);
}

.puppet * {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.desktop-capturer-selection {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(30,30,30,.75);
	color: #fff;
	z-index: 10000000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.desktop-capturer-selection__scroller {
	width: 100%;
	max-height: 100vh;
	overflow-y: auto;
}
.desktop-capturer-selection__list {
	max-width: calc(100% - 100px);
	margin: 50px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	overflow: hidden;
	justify-content: center;
}
.desktop-capturer-selection__item {
	display: flex;
	margin: 4px;
}
.desktop-capturer-selection__btn {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 145px;
	margin: 0;
	border: 0;
	border-radius: 3px;
	padding: 4px;
	background: #252626;
	text-align: left;
	transition: background-color .15s, box-shadow .15s;
}
.desktop-capturer-selection__btn:hover,
.desktop-capturer-selection__btn:focus {
	background: rgba(98,100,167,.8);
}
.desktop-capturer-selection__thumbnail {
	width: 100%;
	height: 81px;
	object-fit: cover;
}
.desktop-capturer-selection__name {
	margin: 6px 0 6px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
#apiKey {
	webkitTextSecurity:disc{	
}

</style>
</head>
<body>
    <div class="left-panel">
        <div class="controls">
			<select id="videoSource"></select>
			<select id="audioSource"></select>
			<div class="mute-controls" style="display: flex; gap: 10px;">
				<button id="muteMic" class="mute-button">
					<div class="mute-icon mic-icon"></div>
				</button>
				<button id="muteAudio" class="mute-button">
					<div class="mute-icon speaker-icon"></div>
				</button>
				<button id="muteVideo" class="mute-button">
					<div class="mute-icon video-icon"></div>
				</button>
			</div>
			<button id="startButton">Start and Connect</button>
			<select id="responseType">
				<option value="audio" selected>Audio Response</option>
				<option value="text">Text Response</option>
			</select>
			<select id="voiceSelect" style="display: none;">
				<option value="Aoede">Female Voice 1 (Aoede)</option>
				<option value="Kore">Female Voice 2 (Kore)</option>
				<option value="Puck">Male Voice 1 (Puck)</option>
				<option value="Charon">Male Voice 2 (Charon)</option>
				<option value="Fenrir">Male Voice 3 (Fenrir)</option>
			</select>
			<textarea placeholder="This is where you can specify an initial instruction prompt." id="systemPrompt" rows="4" style="width: 100%; background: #2a2a2a; color: #e0e0e0; border: 1px solid #404040; border-radius: 8px; padding: 8px; font-family: inherit;"></textarea>
			<div class="api-key-container">
				<input type="password" id="apiKey" placeholder="Enter Gemini API Key" size="15" class="api-key">
				<div class="api-key-info" id="apikeyinfo">
					Get your free Gemini API key at <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener">Google AI Studio</a>.
				</div>
			</div>        </div>
        <div id="error"></div>
        <video class="preview" id="preview" autoplay muted></video>
    </div>
    <div class="right-panel">
        <div class="chat-container">
            <div id="responses" class="responses"></div>
            <div class="input-container">
                <input type="text" class="message-input" placeholder="Type a message...">
                <button id="sendButton" title="You must Start the Stream before you can interact with the AI">Send</button>
            </div>
        </div>
    </div>
	<a href="https://github.com/steveseguin/gemini-chatbot" class="github-link" target="_blank" rel="noopener noreferrer" title="Fork on GitHub (MIT License)">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="#e0e0e0">
			<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
		</svg>
	</a>
	<div id="puppet-container"></div>
<script>
class PuppetAvatar {
    constructor(containerSelector) {
        this.container = document.querySelector(containerSelector);
        this.container.style.position = 'fixed';
        this.initializePuppet();
        this.currentEmotion = '';
        this.isTalking = false;
        this.BLINK_INTERVAL = 4000;
        this.BLINK_DURATION = 150;
        this.isDragging = false;
        this.dragOffset = { x: 0, y: 0 };
        this.startBlinking();
        this.initializeDragging();
    }
    initializePuppet() {
        this.container.innerHTML = `
            <div class="puppet">
                <div class="face">
                    <div class="eyebrows">
                        <div class="eyebrow"></div>
                        <div class="eyebrow"></div>
                    </div>
                    <div class="eyes">
                        <div class="eye"></div>
                        <div class="eye"></div>
                    </div>
                    <div class="cheeks">
                        <div class="cheek"></div>
                        <div class="cheek"></div>
                    </div>
                    <div class="mouth"></div>
                </div>
                <div class="shadow"></div>
            </div>`;
        this.puppet = this.container.querySelector('.puppet');
    }
    initializeDragging() {
		this.container.style.cursor = 'grab';
		const scale = 0.5;
		this.container.addEventListener('mousedown', (e) => {
			this.isDragging = true;
			this.container.style.cursor = 'grabbing';
			const rect = this.container.getBoundingClientRect();
			this.dragOffset = {
				x: (e.clientX - rect.left) * (1 / scale),
				y: (e.clientY - rect.top) * (1 / scale)
			};
		});
		document.addEventListener('mousemove', (e) => {
			if (!this.isDragging) return;
			const x = (e.clientX * (1 / scale)) - this.dragOffset.x;
			const y = (e.clientY * (1 / scale)) - this.dragOffset.y;
			const containerWidth = this.container.offsetWidth * scale;
			const containerHeight = this.container.offsetHeight * scale;
			this.setPosition(
				Math.max(0, Math.min(window.innerWidth - containerWidth, x * scale)),
				Math.max(0, Math.min(window.innerHeight - containerHeight, y * scale))
			);
		});
		document.addEventListener('mouseup', () => {
			this.isDragging = false;
			this.container.style.cursor = 'grab';
		});
		window.addEventListener('resize', () => {
			const rect = this.container.getBoundingClientRect();
			const containerWidth = this.container.offsetWidth * scale;
			const containerHeight = this.container.offsetHeight * scale;
			this.setPosition(
				Math.min(window.innerWidth - containerWidth, rect.left),
				Math.min(window.innerHeight - containerHeight, rect.top)
			);
		});
	}
    setEmotion(emotion, talking = false) {
        this.currentEmotion = emotion;
        this.isTalking = talking;
        this.updateState();
        if (emotion === 'sleepy') {
            this.stopBlinking();
            this.startSlowBlinking();
        } else {
            this.startBlinking();
        }
    }
    updateState() {
        const classes = [this.currentEmotion];
        if (this.isTalking) classes.push('talking');
        this.puppet.className = 'puppet ' + classes.join(' ');
    }
    blink() {
        this.puppet.classList.add('blink');
        setTimeout(() => this.puppet.classList.remove('blink'), this.BLINK_DURATION);
    }
    startBlinking() {
        if (this.blinkInterval) clearInterval(this.blinkInterval);
        this.blinkInterval = setInterval(() => {
            this.blink();
            if (Math.random() > 0.7) {
                setTimeout(() => this.blink(), 150);
            }
        }, this.BLINK_INTERVAL + Math.random() * 2000);
    }
    startSlowBlinking() {
        if (this.blinkInterval) clearInterval(this.blinkInterval);
        this.blinkInterval = setInterval(() => this.blink(), this.BLINK_INTERVAL * 2);
    }
    stopBlinking() {
        if (this.blinkInterval) {
            clearInterval(this.blinkInterval);
            this.blinkInterval = null;
        }
    }
    setTheme(theme) {
        document.documentElement.setAttribute('data-theme', theme);
    }
	setPosition(x, y) {
		this.container.style.left = typeof x === 'number' ? `${x}px` : x;
		this.container.style.top = typeof y === 'number' ? `${y}px` : y;
	}
    destroy() {
        this.stopBlinking();
        document.removeEventListener('mousemove', this.handleMouseMove);
        document.removeEventListener('mouseup', this.handleMouseUp);
        window.removeEventListener('resize', this.handleResize);
        this.container.innerHTML = '';
    }
}
class ChatGPTPublisher {
    constructor(stream, apiKey) {
        this.stream = stream;
        this.apiKey = apiKey;
        this.ws = null;
        this.audioContext = null;
        this.stopped = false;
        this.handleMessage = this.handleMessage.bind(this);
        this.audioPlayer = new AudioPlayer();
        this.recognition = null;
        this.isRecognizing = false;
        this.recognitionTimeout = null;
        this.interimTranscript = '';
        this.finalTranscript = '';
        this.activeConversation = false;
        this.responseActive = false;
    }
    setupVideoProcessing() {
        console.log('Video processing not needed for ChatGPT, skipping');
        return Promise.resolve();
    }
	async handleMessage(event) {
		try {
			let response;
			let rawText = '';
			
			// First handle the different types of message data
			if (event.data instanceof Blob) {
				rawText = await event.data.text();
			} else if (typeof event.data === 'string') {
				rawText = event.data;
			} else {
				console.warn('Unhandled message format:', event.data);
				// Still update the activity timestamps even for unknown formats
				this.lastHeartbeatResponse = Date.now();
				this.lastActivityTime = Date.now();
				return;
			}
			
			// Always update activity timestamps, even before JSON parsing
			this.lastHeartbeatResponse = Date.now();
			this.lastActivityTime = Date.now();
			
			// Try to parse as JSON, but don't fail if it's not valid JSON
			try {
				response = JSON.parse(rawText);
			} catch (jsonError) {
				// Log but don't show error for parsing issues
				console.warn('Received non-JSON message or invalid JSON:', 
							 rawText.substring(0, 100) + (rawText.length > 100 ? '...' : ''));
				
				// Reset connection attempts on any activity, even invalid JSON
				this.inactivityReconnectAttempts = 0;
				return;
			}
			
			// Update counts for reconnection logic
			this.inactivityReconnectAttempts = 0;
			this.reconnectAttempts = 0; // Reset reconnect attempts on successful message
			
			// Process based on message type
			if (response.setupComplete) {
				console.log('Setup complete received');
				this.sendPrompt("Hi, introduce yourself in a sentence for me. Be friendly to me.");
			}
			
			// Handle model content
			if (response.serverContent?.modelTurn?.parts) {
				const parts = response.serverContent.modelTurn.parts;
				let hasAudioParts = false;
				parts.forEach(part => {
					if (part.text) {
						console.log('Model response:', part.text);
						const event = new CustomEvent('modelResponse', {
							detail: {
								text: part.text
							}
						});
						window.dispatchEvent(event);
					}
					if (part.inlineData && part.inlineData.mimeType.startsWith('audio/')) {
						hasAudioParts = true;
						console.log('Received audio response with mime type:', part.inlineData.mimeType);
						try {
							const rateMatch = part.inlineData.mimeType.match(/rate=(\d+)/);
							const sampleRate = rateMatch ? parseInt(rateMatch[1]) : 24000;
							this.audioPlayer.resume();
							const audioData = base64ToArrayBuffer(part.inlineData.data);
							console.log('Processing audio chunk of size:', audioData.byteLength);
							this.audioPlayer.addPCM16(new Uint8Array(audioData));
						} catch (err) {
							console.error('Error processing audio:', err);
						}
					}
				});
				if (response.serverContent.turnComplete && hasAudioParts) {
					console.log('Turn complete, finalizing audio');
					this.audioPlayer.complete();
				}
			}
			
			// Simply log heartbeat messages but don't take specific action
			if (rawText.includes('heartbeat')) {
				console.log('Heartbeat received from server');
			}
		} catch (err) {
			// Just log the error but keep connection alive
			console.error('Error handling message:', err);
			
			// Still update timestamps to prevent timeout-based reconnects
			this.lastHeartbeatResponse = Date.now();
			this.lastActivityTime = Date.now();
		}
	}
    async connect() {
        const uri = 'wss://api.openai.com/v1/realtime?model=gpt-4o-mini-realtime-preview-2024-12-17';
        if (this.isConnected()) {
            console.log('Already connected');
            return;
        }
        try {
            this.ws = new WebSocket(
                uri,
                [
                    "realtime",
                    "openai-insecure-api-key." + this.apiKey,
                    "openai-beta.realtime-v1"
                ]
            );
            return new Promise((resolve, reject) => {
                const timeout = setTimeout(() => {
                    reject(new Error('Connection timed out'));
                    this.ws = null;
                }, 10000);
                this.ws.onmessage = this.handleMessage;
                this.ws.onopen = () => {
                    console.log('WebSocket connected successfully');
                    clearTimeout(timeout);
                    const systemPrompt = document.getElementById('systemPrompt');
                    const responseType = document.getElementById('responseType');
                    const setupMessage = {
                        type: 'session.update',
                        session: {
                            modalities: responseType.value === 'audio' ? ['text', 'audio'] : ['text'],
                            instructions: systemPrompt.value
                        }
                    };
                    this.ws.send(JSON.stringify(setupMessage));
                    resolve();
                };
                this.ws.onerror = (error) => {
                    console.error('WebSocket error:', error);
                    clearTimeout(timeout);
                    this.ws = null;
                    reject(new Error('Connection error occurred'));
                };
                this.ws.onclose = (event) => {
                    console.log('WebSocket closed:', event.code, event.reason);
                    clearTimeout(timeout);
                    this.ws = null;
                    if (!this.stopped) {
                        reject(new Error(`Connection closed: ${event.code}`));
                    }
                };
            });
        } catch (error) {
            console.error('Failed to create WebSocket:', error);
            this.ws = null;
            throw error;
        }
    }
    handleConnectionFailure() {
        this.stop();
        const startButton = document.getElementById('startButton');
        const sendButton = document.getElementById('sendButton');
        const systemPrompt = document.getElementById('systemPrompt');
        startButton.textContent = 'Start Stream';
        startButton.dataset.started = "false";
        startButton.disabled = false;
        sendButton.disabled = true;
        systemPrompt.disabled = false;
    }
    async setupSpeechRecognition() {
        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
        if (!SpeechRecognition) {
            console.error('Speech recognition not supported in this browser');
            showError('Speech recognition is not supported in your browser. Try using Chrome.');
            return;
        }
        this.recognition = new SpeechRecognition();
        this.recognition.continuous = true;
        this.recognition.interimResults = true;
        this.recognition.maxAlternatives = 1;
        this.recognition.lang = 'en-US';
        this.recognition.onstart = () => {
            console.log('Speech recognition started');
            this.isRecognizing = true;
            avatar.setEmotion('thinking', false);
        };
        this.recognition.onresult = (event) => {
            let interimTranscript = '';
            let finalTranscript = '';
            for (let i = event.resultIndex; i < event.results.length; ++i) {
                if (event.results[i].isFinal) {
                    finalTranscript += event.results[i][0].transcript;
                } else {
                    interimTranscript += event.results[i][0].transcript;
                }
            }
            this.interimTranscript = interimTranscript;
            if (finalTranscript) {
                this.finalTranscript = finalTranscript;
                console.log('Final transcript:', finalTranscript);
                this.sendPrompt(finalTranscript);
                this.finalTranscript = '';
                this.interimTranscript = '';
            }
            if (interimTranscript || finalTranscript) {
                avatar.setEmotion('happy', true);
                clearTimeout(this.recognitionTimeout);
                this.recognitionTimeout = setTimeout(() => {
                    if (!this.interimTranscript) {
                        avatar.setEmotion('happy', false);
                    }
                }, 1500);
            }
        };
        this.recognition.onerror = (event) => {
            console.error('Speech recognition error:', event.error);
            if (event.error === 'no-speech') {
                console.log('No speech detected');
            } else {
                showError(`Speech recognition error: ${event.error}`);
            }
            if (event.error !== 'not-allowed' && this.isRecognizing && !micMuted) {
                this.restartRecognition();
            } else {
                this.isRecognizing = false;
                avatar.setEmotion('sad', false);
            }
        };
        this.recognition.onend = () => {
            console.log('Speech recognition ended');
            this.isRecognizing = false;
            if (!this.stopped && !micMuted) {
                this.restartRecognition();
            }
        };
        try {
            if (!micMuted) {
                this.recognition.start();
            } else {
                console.log('Microphone is muted, not starting speech recognition');
            }
        } catch (err) {
            console.error('Failed to start speech recognition:', err);
            showError('Failed to start speech recognition: ' + err.message);
        }
    }
    restartRecognition() {
        if (this.stopped || !this.recognition || micMuted) return;
        try {
            setTimeout(() => {
                if (!this.isRecognizing && !this.stopped && !micMuted) {
                    console.log('Restarting speech recognition...');
                    this.recognition.start();
                }
            }, 300);
        } catch (err) {
            console.error('Failed to restart speech recognition:', err);
        }
    }
    sendPrompt(text) {
        if (!this.isConnected()) {
            console.error('WebSocket not connected');
            return;
        }
        this.ws.send(JSON.stringify({
            type: 'conversation.item.create',
            item: {
                type: 'message',
                role: 'user',
                content: [{
                    type: 'input_text',
                    text
                }]
            }
        }));
        if (!this.responseActive) {
            this.responseActive = true;
            setTimeout(() => {
                if (this.isConnected()) {
                    this.ws.send(JSON.stringify({
                        type: 'response.create',
                        response: {
                            modalities: document.getElementById('responseType').value === 'audio' ? ['text', 'audio'] : ['text']
                        }
                    }));
                }
            }, 300);
        } else {
            console.log('Response already active, not creating a new one');
        }
    }
    isConnected() {
        return this.ws && this.ws.readyState === WebSocket.OPEN;
    }
    async start() {
        try {
            this.stopped = false;
            this.isRecognizing = false;
            this.interimTranscript = '';
            this.finalTranscript = '';
            this.activeConversation = false;
            this.responseActive = false;
            await this.connect();
            if (this.stream.getAudioTracks().length > 0) {
                await this.setupSpeechRecognition();
            } else {
                console.log('No audio tracks available, skipping speech recognition');
            }
            console.log('ChatGPT connected successfully');
        } catch (err) {
            console.error('Failed to start ChatGPT:', err);
            this.stop();
            throw err;
        }
    }
    stop() {
        this.stopped = true;
        this.activeConversation = false;
        this.responseActive = false;
        if (this.ws) {
            this.ws.close();
            this.ws = null;
        }
        if (this.recognition) {
            try {
                this.recognition.stop();
            } catch (e) {
                console.log('Error stopping recognition:', e);
            }
            this.recognition = null;
        }
        if (this.audioContext) {
            this.audioContext.close();
            this.audioContext = null;
        }
        if (this.audioPlayer) {
            this.audioPlayer.stop();
        }
        this.isRecognizing = false;
        this.interimTranscript = '';
        this.finalTranscript = '';
        clearTimeout(this.recognitionTimeout);
    }
}
function countTokens(text) {
    // Simple approximation: ~4 characters per token for English text
    return Math.ceil(text.length / 4);
}
class GoogleLivePublisher {
    constructor(stream, apiKey) {
        this.stream = stream;
        this.apiKey = apiKey;
        this.ws = null;
        this.audioContext = null;
        this.videoProcessor = null;
        this.canvasContext = null;
        this.lastImageTime = 0;
        this.imageInterval = 200;
        this.imageWidth = 640;
        this.imageHeight = 360;
        this.handleMessage = this.handleMessage.bind(this);
        this.audioPlayer = new AudioPlayer();
		this.connectionWatchdog = null;
		this.lastActivityTime = Date.now();
		this.inactivityThreshold = 30000;
		this.maxInactivityReconnects = 3;
		this.inactivityReconnectAttempts = 0;
        this.stopped = false;
        this.reconnectAttempts = 0;
        this.maxReconnectAttempts = 5;
        this.reconnectTimeout = null;
        this.pingInterval = null;
        this.lastHeartbeatResponse = Date.now();
		this.conversationHistory = [];
        this.maxTokens = 20000; // Set below the 32K limit
        this.loadConversationHistory(); 
    }
	loadConversationHistory() {
        const savedHistory = localStorage.getItem('conversationHistory');
        if (savedHistory) {
            try {
                this.conversationHistory = JSON.parse(savedHistory);
                console.log(`Loaded ${this.conversationHistory.length} messages from history`);
                
                // Display the loaded history
                this.displaySavedHistory();
            } catch (e) {
                console.error('Failed to parse conversation history:', e);
                localStorage.removeItem('conversationHistory');
                this.conversationHistory = [];
            }
        }
    }
    
    saveConversationHistory() {
        localStorage.setItem('conversationHistory', JSON.stringify(this.conversationHistory));
    }
    
    displaySavedHistory() {
        // Clear existing messages
        const responsesDiv = document.getElementById('responses');
        responsesDiv.innerHTML = '';
        
        // Display each message from history
        this.conversationHistory.forEach(msg => {
            if (msg.role === "user") {
                messageFormatter.appendMessage(msg.content, true);
            } else if (msg.role === "assistant") {
                messageFormatter.appendMessage(msg.content);
            } else if (msg.role === "system") {
                // Display system messages (summaries) differently
                const summaryDiv = document.createElement('div');
                summaryDiv.className = 'message system-message';
                summaryDiv.style.background = '#333';
                summaryDiv.style.color = '#aaa';
                summaryDiv.style.fontStyle = 'italic';
                summaryDiv.style.padding = '8px 12px';
                summaryDiv.style.margin = '8px 0';
                summaryDiv.style.borderRadius = '8px';
                summaryDiv.style.fontSize = '0.9em';
                
                const contentDiv = document.createElement('div');
                contentDiv.className = 'markdown-content';
                contentDiv.innerHTML = messageFormatter.formatMarkdown(msg.content);
                
                summaryDiv.appendChild(contentDiv);
                responsesDiv.appendChild(summaryDiv);
            }
        });
        
        // Scroll to bottom
        responsesDiv.scrollTop = responsesDiv.scrollHeight;
    }
    
    addUserMessage(text) {
        this.conversationHistory.push({
            role: "user",
            content: text,
            timestamp: Date.now()
        });
        
        this.saveConversationHistory();
        this.checkAndTruncateHistory();
    }
    
    addAssistantMessage(text) {
        this.conversationHistory.push({
            role: "assistant",
            content: text,
            timestamp: Date.now()
        });
        
        this.saveConversationHistory();
        this.checkAndTruncateHistory();
    }
    
    checkAndTruncateHistory() {
        let totalTokens = 0;
        
        // Count tokens in the conversation
        this.conversationHistory.forEach(msg => {
            totalTokens += countTokens(msg.content);
        });
        
        console.log(`Current conversation size: ${totalTokens} tokens`);
        
        // If over limit, truncate
        if (totalTokens > this.maxTokens) {
            console.log(`Conversation exceeded token limit (${totalTokens}/${this.maxTokens}), truncating...`);
            this.truncateConversation();
        }
    }
    
    truncateConversation() {
        // Keep the first two messages (usually system prompt and greeting)
        // and the most recent messages to stay under token limit
        const introCount = 2; 
        const recentCount = 10;
        
        if (this.conversationHistory.length <= introCount + recentCount) {
            return; // Not enough messages to truncate
        }
        
        // Keep introduction and recent messages
        const introMessages = this.conversationHistory.slice(0, introCount);
        const recentMessages = this.conversationHistory.slice(-recentCount);
        
        // Create a summary system message
        const summaryMessage = {
            role: "system",
            content: "Some older messages have been summarized to stay within token limits.",
            timestamp: Date.now()
        };
        
        // Update the history
        this.conversationHistory = [...introMessages, summaryMessage, ...recentMessages];
        console.log(`Truncated conversation to ${this.conversationHistory.length} messages`);
        
        // Save the updated history
        this.saveConversationHistory();
    }
    
    clearConversationHistory() {
        this.conversationHistory = [];
        localStorage.removeItem('conversationHistory');
        
        // Clear the UI
        const responsesDiv = document.getElementById('responses');
        responsesDiv.innerHTML = '';
        
        console.log('Conversation history cleared');
    }
    handleConnectionFailure() {
        this.stop();
        const startButton = document.getElementById('startButton');
        const sendButton = document.getElementById('sendButton');
        const systemPrompt = document.getElementById('systemPrompt');
        startButton.textContent = 'Start Stream';
        startButton.dataset.started = "false";
        startButton.disabled = false;
        sendButton.disabled = true;
        systemPrompt.disabled = false;
    }
	async handleMessage(event) {
        try {
            let response;
            let rawText = '';
            
            // First handle the different types of message data
            if (event.data instanceof Blob) {
                rawText = await event.data.text();
            } else if (typeof event.data === 'string') {
                rawText = event.data;
            } else {
                console.warn('Unhandled message format:', event.data);
                // Still update the activity timestamps even for unknown formats
                this.lastHeartbeatResponse = Date.now();
                this.lastActivityTime = Date.now();
                return;
            }
            
            // Always update activity timestamps, even before JSON parsing
            this.lastHeartbeatResponse = Date.now();
            this.lastActivityTime = Date.now();
            
            // Try to parse as JSON, but don't fail if it's not valid JSON
            try {
                response = JSON.parse(rawText);
            } catch (jsonError) {
                // Log but don't show error for parsing issues
                console.warn('Received non-JSON message or invalid JSON:', 
                             rawText.substring(0, 100) + (rawText.length > 100 ? '...' : ''));
                
                // Reset connection attempts on any activity, even invalid JSON
                this.inactivityReconnectAttempts = 0;
                return;
            }
            
            // Update counts for reconnection logic
            this.inactivityReconnectAttempts = 0;
            this.reconnectAttempts = 0; // Reset reconnect attempts on successful message
            
            // Process based on message type
            if (response.setupComplete) {
                console.log('Setup complete received');
                this.sendPrompt("Hi, introduce yourself in a sentence for me. Be friendly to me.");
            }
            
            // Handle model content
            if (response.serverContent?.modelTurn?.parts) {
                const parts = response.serverContent.modelTurn.parts;
                let hasAudioParts = false;
                let modelTextResponse = ""; // Accumulate text response
                
                parts.forEach(part => {
                    if (part.text) {
                        console.log('Model response:', part.text);
                        modelTextResponse += part.text; // Accumulate text
                        
                        const event = new CustomEvent('modelResponse', {
                            detail: {
                                text: part.text
                            }
                        });
                        window.dispatchEvent(event);
                    }
                    if (part.inlineData && part.inlineData.mimeType.startsWith('audio/')) {
                        hasAudioParts = true;
                        console.log('Received audio response with mime type:', part.inlineData.mimeType);
                        try {
                            const rateMatch = part.inlineData.mimeType.match(/rate=(\d+)/);
                            const sampleRate = rateMatch ? parseInt(rateMatch[1]) : 24000;
                            this.audioPlayer.resume();
                            const audioData = base64ToArrayBuffer(part.inlineData.data);
                            console.log('Processing audio chunk of size:', audioData.byteLength);
                            this.audioPlayer.addPCM16(new Uint8Array(audioData));
                        } catch (err) {
                            console.error('Error processing audio:', err);
                        }
                    }
                });
                
                if (response.serverContent.turnComplete && hasAudioParts) {
                    console.log('Turn complete, finalizing audio');
                    this.audioPlayer.complete();
                }
                
                // After processing all parts, add to history if response is complete
                if (modelTextResponse && response.serverContent.turnComplete) {
                    this.addAssistantMessage(modelTextResponse);
                }
            }
            
            // Handle ANY response from server as a valid heartbeat response
            // We're not explicitly looking for a heartbeat property anymore
            
            // Log unknown response types for debugging but continue processing
            if (!response.setupComplete && !response.serverContent) {
                // Don't attempt to stringify the entire response as it may be large
                // Just log that we received something unknown
                console.log('Received message with unknown structure');
                console.log('Response keys:', Object.keys(response));
                
                // If the response has a heartbeat field (in any form), log it
                if (rawText.includes('heartbeat')) {
                    console.log('Message appears to contain heartbeat information');
                }
            }
        } catch (err) {
            // Just log the error but keep connection alive
            console.error('Error handling message:', err);
            
            // Still update timestamps to prevent timeout-based reconnects
            this.lastHeartbeatResponse = Date.now();
            this.lastActivityTime = Date.now();
        }
    }
    sendPrompt(text) {
        if (!this.isConnected()) {
            console.error('WebSocket not connected, attempting reconnect...');
            this.reconnect().then(() => {
                this._sendPromptInternal(text);
            }).catch(error => {
                console.error('Failed to reconnect:', error);
                showError('Connection lost. Please try restarting the stream.');
            });
            return;
        }
        
        // Add message to history
        this.addUserMessage(text);
        
        this._sendPromptInternal(text);
    }
    _sendPromptInternal(text) {
        if (this.isConnected()) {
            const message = {
                clientContent: {
                    turns: [{
                        role: "user",
                        parts: [{
                            text
                        }]
                    }],
                    turnComplete: true
                }
            };
            console.log('Sending prompt:', message);
            this.ws.send(JSON.stringify(message));
        } else {
            console.error('WebSocket still not ready after reconnect attempt');
        }
    }
    sendMediaChunk(mediaChunks) {
        if (this.ws?.readyState === WebSocket.OPEN) {
            const message = {
                realtimeInput: {
                    mediaChunks
                }
            };
            this.ws.send(JSON.stringify(message));
        }
    }
    isConnected() {
        return this.ws && this.ws.readyState === WebSocket.OPEN;
    }
	async connect() {
		
		this.loadConversationHistory();
		
		const host = 'generativelanguage.googleapis.com';
		const uri = `wss://${host}/ws/google.ai.generativelanguage.v1alpha.GenerativeService.BidiGenerateContent?key=${this.apiKey}`;
		if (this.isConnected()) {
			console.log('Already connected');
			return;
		}
		if (this.ws && this.ws.readyState === WebSocket.CONNECTING) {
			console.log('Connection already in progress, waiting...');
			return new Promise((resolve, reject) => {
				const checkState = () => {
					if (!this.ws) {
						reject(new Error('WebSocket was closed while connecting'));
						return;
					}
					if (this.ws.readyState === WebSocket.OPEN) {
						resolve();
					} else if (this.ws.readyState === WebSocket.CLOSED || this.ws.readyState === WebSocket.CLOSING) {
						reject(new Error('WebSocket closed before fully connecting'));
					} else {
						setTimeout(checkState, 100);
					}
				};
				checkState();
			});
		}
		if (this.ws && this.ws.readyState === WebSocket.CLOSING) {
			console.log('Previous connection is closing, waiting...');
			return new Promise((resolve, reject) => {
				const checkClosed = () => {
					if (!this.ws || this.ws.readyState === WebSocket.CLOSED) {
						this.ws = null;
						this.connect().then(resolve).catch(reject);
					} else {
						setTimeout(checkClosed, 100);
					}
				};
				checkClosed();
			});
		}
		this.clearAllTimers();
        const responseType = document.getElementById('responseType');
        const voiceSelect = document.getElementById('voiceSelect');
        voiceSelect.style.display = responseType.value === 'audio' ? 'block' : 'none';
        if (this.reconnectTimeout) {
            clearTimeout(this.reconnectTimeout);
            this.reconnectTimeout = null;
        }
        if (this.pingInterval) {
            clearInterval(this.pingInterval);
            this.pingInterval = null;
        }
        this.ws = new WebSocket(uri);
        this.ws.onmessage = this.handleMessage;
        this.ws.onerror = (error) => {
            console.error('WebSocket error:', error);
            const errorMsg = 'Connection error occurred. Please check your API key and try again.';
            showError(errorMsg);
            if (!this.stopped) {
                this.attemptReconnect();
            } else {
                this.handleConnectionFailure();
            }
        };
        this.ws.onclose = (event) => {
			console.log('WebSocket closed:', event.code, event.reason);
			let errorMsg = 'Connection closed.';
			
			// Don't show error for intentional closing (when stopping)
			if (this.stopped) {
				console.log('WebSocket closed intentionally');
				return;
			}
			
			if (event.code === 1007) {
				// Handle invalid JSON payload error specially
				if (event.reason && event.reason.includes('Invalid JSON payload')) {
					console.warn('Invalid JSON payload error, attempting to reconnect');
					errorMsg = 'Connection reset. Reconnecting...';
					if (!this.stopped) {
						// For JSON payload errors, try to reconnect with a short delay
						setTimeout(() => this.reconnect(), 2000);
					}
				} else if (event.reason && event.reason.includes('API key')) {
					errorMsg = 'Invalid API key. Please check your key and try again.';
					this.handleConnectionFailure();
				} else {
					// Other 1007 errors
					console.warn('Unspecified 1007 error, attempting to reconnect', event.reason);
					if (!this.stopped) {
						this.attemptReconnect();
					}
				}
			} else if (event.code === 1006) {
				errorMsg = 'Connection terminated unexpectedly.';
				if (!this.stopped) {
					this.attemptReconnect();
					errorMsg += ' Attempting to reconnect...';
				}
			} else if (event.code === 1011 || 
				 (event.reason && event.reason.includes('quota') || 
				  event.reason.includes('resource_exhausted') || 
				  event.reason.includes('exceeded'))) {
				
				// Show error message
				showError('API quota exceeded. Please try again manually.');
				
				// Also display in chat (optional)
				const errorDiv = document.createElement('div');
				errorDiv.className = 'message system-message';
				errorDiv.style.background = '#6c1c1c';
				errorDiv.style.color = '#ffffff';
				errorDiv.textContent = `Error: API quota exceeded`;
				document.getElementById('responses').appendChild(errorDiv);
				
				// Force manual restart
				this.handleConnectionFailure();
				return; // Prevent auto-reconnect
			} else if (!this.stopped) {
				this.attemptReconnect();
				errorMsg += ' Attempting to reconnect...';
			}
			
			// Only show error message to user for permanent failures
			if (event.code === 1007 && event.reason && event.reason.includes('Invalid JSON payload')) {
				// Don't show error for temporary JSON issues - these will auto-reconnect
				console.log('Suppressing error message for automatic reconnection');
			} else if (this.reconnectAttempts >= this.maxReconnectAttempts) {
				showError('Connection lost after multiple reconnection attempts. Please restart the stream.');
			} else {
				showError(errorMsg);
			}
			
			if (this.stopped || this.reconnectAttempts >= this.maxReconnectAttempts) {
				this.handleConnectionFailure();
			}
		};
        return new Promise((resolve, reject) => {
            const connectionTimeout = setTimeout(() => {
                reject(new Error('Connection timeout'));
            }, 10000);
            this.ws.addEventListener('open', () => {
                clearTimeout(connectionTimeout);
                this.startHeartbeat();
                const systemPrompt = document.getElementById('systemPrompt');
                const setupMessage = {
                    setup: {
                        model: "models/gemini-2.0-flash-exp",
                        systemInstruction: {
                            parts: [{
                                text: systemPrompt.value
                            }]
                        },
                        generationConfig: {
                            temperature: 0.9,
                            topK: 1,
                            topP: 1,
                            candidateCount: 1,
                            responseModalities: responseType.value === 'audio' ? 'AUDIO' : 'TEXT',
                            ...(responseType.value === 'audio' && {
                                speechConfig: {
                                    voiceConfig: {
                                        prebuiltVoiceConfig: {
                                            voiceName: voiceSelect.value
                                        }
                                    }
                                }
                            })
                        }
                    }
                };
                console.log('Sending setup message:', setupMessage);
                this.ws.send(JSON.stringify(setupMessage));
                resolve();
            }, { once: true });
            this.ws.addEventListener('error', () => {
                clearTimeout(connectionTimeout);
                reject(new Error('Connection error'));
            }, { once: true });
        });
    }
	startHeartbeat() {
		if (this.pingInterval) {
			clearInterval(this.pingInterval);
		}
		
		this.lastHeartbeatResponse = Date.now();
		this.lastActivityTime = Date.now();
		
		// Monitor the connection health, but don't send heartbeats
		this.pingInterval = setInterval(() => {
			if (this.isConnected()) {
				// Only check for heartbeat response timeout
				const elapsed = Date.now() - this.lastHeartbeatResponse;
				if (elapsed > 60000) {
					console.warn('No heartbeat response for 60 seconds, reconnecting');
					this.reconnect();
				}
			} else {
				clearInterval(this.pingInterval);
				this.pingInterval = null;
				if (!this.stopped) {
					this.attemptReconnect();
				}
			}
		}, 30000);
		
		this.startConnectionWatchdog();
	}
	startConnectionWatchdog() {
		if (this.connectionWatchdog) {
			clearInterval(this.connectionWatchdog);
		}
		this.connectionWatchdog = setInterval(() => {
			const inactiveTime = Date.now() - this.lastActivityTime;
			if (inactiveTime > this.inactivityThreshold && this.isConnected()) {
				console.warn(`Connection inactive for ${inactiveTime/1000} seconds, attempting reconnection`);
				if (this.inactivityReconnectAttempts < this.maxInactivityReconnects) {
					this.inactivityReconnectAttempts++;
					console.log(`Inactivity reconnection attempt ${this.inactivityReconnectAttempts}/${this.maxInactivityReconnects}`);
					this.reconnect();
				} else {
					console.error('Max inactivity reconnection attempts reached');
					showError('Connection appears to be inactive. Please restart the stream manually.');
					this.handleConnectionFailure();
				}
			}
		}, 10000);
	}
	attemptReconnect() {
		if (this.stopped || this.reconnectTimeout) return;
		this.reconnectAttempts++;
		if (this.reconnectAttempts <= this.maxReconnectAttempts) {
			const delay = Math.min(30000, Math.pow(2, this.reconnectAttempts) * 1000);
			console.log(`Attempting to reconnect in ${delay/1000} seconds (attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
			if (this.reconnectTimeout) {
				clearTimeout(this.reconnectTimeout);
			}
			this.reconnectTimeout = setTimeout(() => {
				this.reconnectTimeout = null;
				this.reconnect().catch(error => {
					console.error('Reconnection failed:', error);
				});
			}, delay);
		} else {
			console.error('Max reconnection attempts reached');
			this.handleConnectionFailure();
		}
	}
	async reconnect() {
		if (this._reconnectPromise) {
			return this._reconnectPromise;
		}
		if (this.ws) {
			try {
				this.ws.close();
			} catch (e) {
				console.warn('Error closing websocket:', e);
			}
			this.ws = null;
		}
		this.clearAllTimers();
		this._reconnectPromise = (async () => {
			try {
				await this.connect();
				console.log('Successfully reconnected');
				showError('Connection restored!');
				return true;
			} catch (error) {
				console.error('Failed to reconnect:', error);
				this.attemptReconnect();
				throw error;
			} finally {
				this._reconnectPromise = null;
			}
		})();
		return this._reconnectPromise;
	}
	clearAllTimers() {
		if (this.pingInterval) {
			clearInterval(this.pingInterval);
			this.pingInterval = null;
		}
		if (this.connectionWatchdog) {
			clearInterval(this.connectionWatchdog);
			this.connectionWatchdog = null;
		}
		if (this.keepaliveInterval) {
			clearInterval(this.keepaliveInterval);
			this.keepaliveInterval = null;
		}
		if (this.reconnectTimeout) {
			clearTimeout(this.reconnectTimeout);
			this.reconnectTimeout = null;
		}
	}
    async start() {
        try {
            this.stopped = false;
            this.reconnectAttempts = 0;
            await this.connect();
            await this.setupAudioProcessing();
            this.setupVideoProcessing();
        } catch (err) {
            console.error('Failed to start:', err);
            this.stop();
            throw err;
        }
    }
    async setupAudioProcessing() {
        this.audioContext = new AudioContext({
            sampleRate: 16000
        });
        const workletBlob = new Blob([`registerProcessor('audio-processor', ${AudioProcessingWorklet})`], {
            type: 'application/javascript'
        });
        const workletUrl = URL.createObjectURL(workletBlob);
        await this.audioContext.audioWorklet.addModule(workletUrl);
        URL.revokeObjectURL(workletUrl);
        const source = this.audioContext.createMediaStreamSource(this.stream);
        const processor = new AudioWorkletNode(this.audioContext, 'audio-processor');
        processor.port.onmessage = (event) => {
            if (event.data.data?.int16arrayBuffer) {
                const base64Audio = btoa(String.fromCharCode(...new Uint8Array(event.data.data.int16arrayBuffer)));
                this.sendMediaChunk([{
                    mimeType: "audio/pcm;rate=16000",
                    data: base64Audio
                }]);
            }
        };
        source.connect(processor);
    }
    setupVideoProcessing() {
        const videoTrack = this.stream.getVideoTracks()[0];
        if (!videoTrack) {
            console.log('No video track available - skipping video processing');
            return;
        }
        const canvas = document.createElement('canvas');
        canvas.width = this.imageWidth;
        canvas.height = this.imageHeight;
        this.canvasContext = canvas.getContext('2d');
        const videoElement = document.createElement('video');
        videoElement.srcObject = new MediaStream([videoTrack]);
        videoElement.autoplay = true;
        let animationFrame;
        const captureFrame = () => {
            if (this.stopped || !this.canvasContext) {
                if (animationFrame) {
                    cancelAnimationFrame(animationFrame);
                }
                return;
            }
            const now = Date.now();
            if (now - this.lastImageTime >= this.imageInterval) {
                this.canvasContext.drawImage(videoElement, 0, 0, this.imageWidth, this.imageHeight);
                const base64Image = canvas.toDataURL('image/jpeg', 0.8).split(',')[1];
                this.sendMediaChunk([{
                    mimeType: "image/jpeg",
                    data: base64Image
                }]);
                this.lastImageTime = now;
            }
            animationFrame = requestAnimationFrame(captureFrame);
        };
        videoElement.addEventListener('loadedmetadata', () => {
            animationFrame = requestAnimationFrame(captureFrame);
        });
    }
	stop() {
		this.stopped = true;
		this.clearAllTimers();
		if (this.ws) {
			this.ws.close();
			this.ws = null;
		}
		this._reconnectPromise = null;
		if (this.reconnectTimeout) {
			clearTimeout(this.reconnectTimeout);
			this.reconnectTimeout = null;
		}
		if (this.pingInterval) {
			clearInterval(this.pingInterval);
			this.pingInterval = null;
		}
		if (this.connectionWatchdog) {
			clearInterval(this.connectionWatchdog);
			this.connectionWatchdog = null;
		}
		if (this.keepaliveInterval) {
			clearInterval(this.keepaliveInterval);
			this.keepaliveInterval = null;
		}
		if (this.ws) {
			this.ws.close();
			this.ws = null;
		}
		if (this.audioContext) {
			this.audioContext.close();
			this.audioContext = null;
		}
		if (this.audioPlayer) {
			this.audioPlayer.stop();
		}
		this.videoProcessor = null;
		this.canvasContext = null;
	}
}
class AudioPlayer {
    constructor() {
        this.context = new AudioContext({sampleRate: 24000});
        this.gainNode = this.context.createGain();
        this.gainNode.connect(this.context.destination);
        this.samples = new Float32Array(0);
        this.isPlaying = false;
        this.nextTime = 0;
        this.completeCalled = false;
		this.timeout = null;
    }
    addPCM16(chunk) {
        const float32Array = new Float32Array(chunk.length / 2);
        const dataView = new DataView(chunk.buffer);
        for (let i = 0; i < chunk.length / 2; i++) {
            float32Array[i] = dataView.getInt16(i * 2, true) / 32768;
        }
        const newSamples = new Float32Array(this.samples.length + float32Array.length);
        newSamples.set(this.samples);
        newSamples.set(float32Array, this.samples.length);
        this.samples = newSamples;
        if (!this.isPlaying) {
            this.play();
        }
    }
    play() {
        if (this.samples.length === 0) return;
        this.isPlaying = true;
        const buffer = this.context.createBuffer(1, this.samples.length, this.context.sampleRate);
        buffer.getChannelData(0).set(this.samples);
        const source = this.context.createBufferSource();
        source.buffer = buffer;
        source.connect(this.gainNode);
        const startTime = Math.max(this.context.currentTime, this.nextTime);
        source.start(startTime);
        this.nextTime = startTime + buffer.duration;
        this.samples = new Float32Array(0);
        source.onended = () => {
            this.isPlaying = false;
            if (this.samples.length > 0) {
                this.play();
            } else if (this.completeCalled) {
                avatar.setEmotion('happy', false);
            } else {
                this.clearAndSetTimeout(() => {
                    avatar.setEmotion('happy', false);
                }, 20);
            }
        };
        this.clearAndSetTimeout(null);
        avatar.setEmotion("happy", true);
    }
	clearAndSetTimeout(callback, duration) {
        if (this.timeout) {
            clearTimeout(this.timeout);
            this.timeout = null;
        }
        if (callback && duration) {
            this.timeout = setTimeout(callback, duration);
        }
    }
    async resume() {
        if (this.context.state === "suspended") {
            await this.context.resume();
        }
    }
    stop() {
        this.samples = new Float32Array(0);
        this.isPlaying = false;
        this.nextTime = 0;
        this.completeCalled = false;
        this.gainNode.disconnect();
        this.gainNode = this.context.createGain();
        this.gainNode.connect(this.context.destination);
        this.clearAndSetTimeout(null);
        avatar.setEmotion('happy', false);
    }
    complete() {
        this.completeCalled = true;
        if (!this.isPlaying && this.samples.length > 0) {
            this.play();
        }
    }
}
function base64ToArrayBuffer(base64) {
    const binaryString = atob(base64);
    const bytes = new Uint8Array(binaryString.length);
    for (let i = 0; i < binaryString.length; i++) {
        bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes.buffer;
}
class MessageFormatter {
    constructor() {
        this.currentMessage = '';
        this.currentMessageElement = null;
        this.messageBuffer = '';
        this.messageComplete = false;
        this.lastMessageTime = Date.now();
        this.pauseThreshold = 300;
    }
    formatMarkdown(text) {
        let formatted = text
            .replace(/\*\*\*(.*?)\*\*\*/g, '<strong><em>$1</em></strong>')
            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
            .replace(/\*(.*?)\*/g, '<em>$1</em>')
            .replace(/`(.*?)`/g, '<code>$1</code>');
        const lines = formatted.split('\n');
        const formattedLines = lines.map(line => {
            if (line.trim().startsWith('*') && line.trim()[1] === ' ') {
                return `<li>${line.trim().substring(2)}</li>`;
            }
            if (/^\d+\./.test(line.trim())) {
                return `<li>${line.trim()}</li>`;
            }
            return line;
        });
        return formattedLines.join('\n')
            .replace(/\n\n/g, '<br><br>')
            .replace(/\n(?![<])/g, '<br>');
    }
    appendMessage(text, isUser = false) {
        const now = Date.now();
        if (isUser) {
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message user-message';
            const contentDiv = document.createElement('div');
            contentDiv.className = 'markdown-content';
            contentDiv.textContent = text;
            messageDiv.appendChild(contentDiv);
            responsesDiv.appendChild(messageDiv);
            this.messageComplete = true;
            this.scrollToBottom();
            this.lastMessageTime = now;
            return;
        }
        if (this.currentMessageElement && (now - this.lastMessageTime > this.pauseThreshold)) {
            this.messageBuffer += '\n';
        }
        this.messageBuffer += text;
        this.lastMessageTime = now;
        if (!this.currentMessageElement) {
            this.currentMessageElement = document.createElement('div');
            this.currentMessageElement.className = 'message assistant-message';
            const contentDiv = document.createElement('div');
            contentDiv.className = 'markdown-content';
            this.currentMessageElement.appendChild(contentDiv);
            responsesDiv.appendChild(this.currentMessageElement);
        }
        const contentDiv = this.currentMessageElement.querySelector('.markdown-content');
        contentDiv.innerHTML = this.formatMarkdown(this.messageBuffer);
        if (
            this.messageBuffer.match(/\n\n$/) ||
            this.messageBuffer.match(/[.!?]\s+$/) ||
            this.messageBuffer.match(/\n\s*[-*]\s.*\n\n$/)
        ) {
            this.finalizeMessage();
        }
        this.scrollToBottom();
    }
    finalizeMessage() {
        this.messageBuffer = '';
        this.currentMessageElement = null;
        this.messageComplete = true;
        this.lastMessageTime = Date.now();
    }
    scrollToBottom() {
        responsesDiv.scrollTop = responsesDiv.scrollHeight;
    }
}
const AudioProcessingWorklet = `
		class AudioProcessor extends AudioWorkletProcessor {
		  buffer = new Int16Array(2048);
		  bufferWriteIndex = 0;
		  process(inputs) {
			if (inputs[0].length) {
			  const samples = inputs[0][0];
			  for (let i = 0; i < samples.length; i++) {
				const int16Value = samples[i] * 32768;
				this.buffer[this.bufferWriteIndex++] = int16Value;
				if(this.bufferWriteIndex >= this.buffer.length) {
				  this.port.postMessage({
					data: { int16arrayBuffer: this.buffer.buffer }
				  });
				  this.bufferWriteIndex = 0;
				}
			  }
			}
			return true;
		  }
		}`;
const messageFormatter = new MessageFormatter();
window.addEventListener('modelResponse', (event) => {
    console.log(event.detail.text);
    messageFormatter.appendMessage(event.detail.text);
});
let stream = null;
const videoSelect = document.getElementById('videoSource');
const audioSelect = document.getElementById('audioSource');
const preview = document.getElementById('preview');
const errorDisplay = document.getElementById('error');
const responsesDiv = document.getElementById('responses');
let publisher = null;
async function tryGetInitialPermissions() {
    try {
        const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false })
            .catch(err => {
                console.log("Initial audio permission check failed:", err.message);
                return null;
            });
        if (audioStream) {
            audioStream.getTracks().forEach(track => track.stop());
        }
        const videoStream = await navigator.mediaDevices.getUserMedia({ audio: false, video: true })
            .catch(err => {
                console.log("Initial video permission check failed:", err.message);
                return null;
            });
        if (videoStream) {
            videoStream.getTracks().forEach(track => track.stop());
        }
        await getDevices();
    } catch (err) {
        console.warn("Initial permission checks failed:", err);
        await getDevices();
    }
}
const apiKeyInput = document.getElementById('apiKey');
apiKeyInput.value = localStorage.getItem('apiKey') || '';

document.getElementById('apiKey').addEventListener('input', validateApiKey);
function validateApiKey() {
    const apiKey = apiKeyInput.value.trim();
    startButton.disabled = !apiKey;
    
    // Only try to use provider-specific storage if providerSelect exists
    if (window.providerSelect) {
        const provider = providerSelect.value;
        localStorage.setItem(`apiKey_${provider}`, apiKey);
    } else {
        // Fallback to old method if providerSelect isn't created yet
        localStorage.setItem('apiKey', apiKey);
    }
    
    return apiKey;
}
startButton.addEventListener('click', async () => {
    const apiKey = apiKeyInput.value.trim();
    if (!apiKey) {
        apiKeyInput.classList.add('highlight');
        setTimeout(() => apiKeyInput.classList.remove('highlight'), 2000);
        return;
    }
    try {
        if (publisher) {
            startButton.textContent = 'Starting...';
            startButton.disabled = true;
            publisher.stop();
            publisher = null;
            if (stream) {
                stream.getTracks().forEach(track => track.stop());
                stream = null;
            }
            if (currentAudioIndicator) {
                currentAudioIndicator.remove();
                currentAudioIndicator = null;
            }
            preview.srcObject = null;
            startButton.textContent = 'Start Stream';
            startButton.disabled = false;
            sendButton.disabled = true;
            document.getElementById('systemPrompt').disabled = false;
            return;
        }
        startButton.textContent = 'Starting...';
        startButton.disabled = true;
        stream = await getStream();
        preview.srcObject = stream;
        sessionStorage.setItem('apiKey', apiKey);
        const currentProvider = providerSelect.value;
        publisher = currentProvider === 'chatgpt'
            ? new ChatGPTPublisher(stream, apiKey)
            : new GoogleLivePublisher(stream, apiKey);
        await publisher.start();
        startButton.textContent = 'Stop Stream';
        startButton.dataset.started = "true";
        startButton.disabled = false;
        sendButton.disabled = false;
        document.getElementById('systemPrompt').disabled = true;
        if (stream.getAudioTracks().length > 0) {
            setupAudioIndicator(stream);
        }
    } catch (err) {
        console.error(err);
        showError('Failed to start publishing: ' + err.message);
        startButton.textContent = 'Start Stream';
        startButton.dataset.started = "false";
        startButton.disabled = false;
        sendButton.disabled = true;
        document.getElementById('systemPrompt').disabled = false;
    }
});
let currentAudioIndicator = null;
let currentAudioContext = null;
let currentAnimationFrame = null;
function setupAudioIndicator(stream) {
    if (currentAudioIndicator) {
        currentAudioIndicator.remove();
        if (currentAudioContext) {
            currentAudioContext.close();
        }
        if (currentAnimationFrame) {
            cancelAnimationFrame(currentAnimationFrame);
        }
    }
    currentAudioContext = new AudioContext();
    const analyserMic = currentAudioContext.createAnalyser();
    const analyserSystem = currentAudioContext.createAnalyser();
    analyserMic.fftSize = 256;
    analyserSystem.fftSize = 256;
    const container = document.createElement('div');
    container.style.cssText = `
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-top: 8px;
    `;
    const micIndicator = document.createElement('div');
    const systemIndicator = document.createElement('div');
    const baseIndicatorStyle = `
        width: 100%;
        height: 4px;
        background: #333;
        border-radius: 2px;
        overflow: hidden;
        position: relative;
    `;
    micIndicator.style.cssText = baseIndicatorStyle;
    systemIndicator.style.cssText = baseIndicatorStyle;
    const micLabel = document.createElement('div');
    const systemLabel = document.createElement('div');
    micLabel.textContent = 'Microphone';
    systemLabel.textContent = 'System Audio';
    micLabel.style.cssText = 'font-size: 12px; color: #999; margin-bottom: 2px;';
    systemLabel.style.cssText = 'font-size: 12px; color: #999; margin-bottom: 2px; margin-top: 4px;';
    container.appendChild(micLabel);
    container.appendChild(micIndicator);
    container.appendChild(systemLabel);
    container.appendChild(systemIndicator);
    preview.insertAdjacentElement('afterend', container);
    currentAudioIndicator = container;
    stream.getAudioTracks().forEach(track => {
        const source = currentAudioContext.createMediaStreamSource(new MediaStream([track]));
        if (track.label && track.label.toLowerCase().includes('system')) {
            source.connect(analyserSystem);
        } else {
            source.connect(analyserMic);
        }
    });
    const micData = new Uint8Array(analyserMic.frequencyBinCount);
    const systemData = new Uint8Array(analyserSystem.frequencyBinCount);
    function updateIndicators() {
        if (!stream.active) {
            container.remove();
            currentAudioIndicator = null;
            currentAudioContext = null;
            cancelAnimationFrame(currentAnimationFrame);
            return;
        }
        analyserMic.getByteFrequencyData(micData);
        const micLevel = Math.min(100, (micData.reduce((a, b) => a + b) / micData.length / 128) * 100);
        micIndicator.style.background = `linear-gradient(90deg, #4CAF50 ${micLevel}%, #333 ${micLevel}%)`;
        analyserSystem.getByteFrequencyData(systemData);
        const systemLevel = Math.min(100, (systemData.reduce((a, b) => a + b) / systemData.length / 128) * 100);
        systemIndicator.style.background = `linear-gradient(90deg, #2196F3 ${systemLevel}%, #333 ${systemLevel}%)`;
        currentAnimationFrame = requestAnimationFrame(updateIndicators);
    }
    updateIndicators();
}
videoSelect.addEventListener('change', async () => {
    localStorage.setItem('selectedVideoId', videoSelect.value);
    await updateMediaStream();
});
audioSelect.addEventListener('change', async () => {
    localStorage.setItem('selectedAudioId', audioSelect.value);
    await updateMediaStream();
});
async function getDevices() {
    try {
        const devices = await navigator.mediaDevices.enumerateDevices();
        videoSelect.innerHTML = '';
        audioSelect.innerHTML = '';
        const videoDevices = devices.filter(d => d.kind === 'videoinput');
        const audioDevices = devices.filter(d => d.kind === 'audioinput');
        videoSelect.appendChild(new Option('No Video', 'none'));
        audioSelect.appendChild(new Option('No Audio', 'none'));
        videoSelect.appendChild(new Option('Screen Share', 'screen'));
        videoDevices.forEach(device => {
            videoSelect.appendChild(new Option(device.label || `Camera ${videoSelect.length}`, device.deviceId));
        });
        audioDevices.forEach(device => {
            audioSelect.appendChild(new Option(device.label || `Microphone ${audioSelect.length}`, device.deviceId));
        });
        const previousVideoId = localStorage.getItem('selectedVideoId');
        const previousAudioId = localStorage.getItem('selectedAudioId');
        let videoDeviceFound = false;
        let audioDeviceFound = false;
        if (previousVideoId) {
            if (previousVideoId === 'screen' || previousVideoId === 'none') {
                videoSelect.value = previousVideoId;
                videoDeviceFound = true;
            } else {
                for (const option of videoSelect.options) {
                    if (option.value === previousVideoId) {
                        videoSelect.value = previousVideoId;
                        videoDeviceFound = true;
                        break;
                    }
                }
            }
        }
        if (previousAudioId) {
            if (previousAudioId === 'none') {
                audioSelect.value = previousAudioId;
                audioDeviceFound = true;
            } else {
                for (const option of audioSelect.options) {
                    if (option.value === previousAudioId) {
                        audioSelect.value = previousAudioId;
                        audioDeviceFound = true;
                        break;
                    }
                }
            }
        }
        if (!videoDeviceFound && videoDevices.length > 0) {
            for (const device of videoDevices) {
                try {
                    const stream = await navigator.mediaDevices.getUserMedia({
                        video: { deviceId: { exact: device.deviceId } }
                    });
                    stream.getTracks().forEach(track => track.stop());
                    videoSelect.value = device.deviceId;
                    videoDeviceFound = true;
                    break;
                } catch (err) {
                    console.warn(`Video device ${device.label || device.deviceId} unavailable:`, err.message);
                    continue;
                }
            }
        }
        if (!videoDeviceFound) {
            videoSelect.value = 'screen';
        }
        if (!audioDeviceFound && audioDevices.length > 0) {
            for (const device of audioDevices) {
                try {
                    const stream = await navigator.mediaDevices.getUserMedia({
                        audio: { deviceId: { exact: device.deviceId } }
                    });
                    stream.getTracks().forEach(track => track.stop());
                    audioSelect.value = device.deviceId;
                    audioDeviceFound = true;
                    break;
                } catch (err) {
                    console.warn(`Audio device ${device.label || device.deviceId} unavailable:`, err.message);
                    continue;
                }
            }
        }
        if (!audioDeviceFound) {
            audioSelect.value = 'none';
        }
        localStorage.setItem('selectedVideoId', videoSelect.value);
        localStorage.setItem('selectedAudioId', audioSelect.value);
        await updateMediaStream();
    } catch (err) {
        showError('Failed to get devices: ' + err.message);
    }
}
let micMuted = false;
let audioMuted = false;
let videoMuted = false;
const muteMicButton = document.getElementById('muteMic');
const muteAudioButton = document.getElementById('muteAudio');
const muteVideoButton = document.getElementById('muteVideo');
muteVideoButton.addEventListener('click', () => {
    if (stream) {
        const videoTracks = stream.getVideoTracks();
        videoTracks.forEach(track => {
            track.enabled = videoMuted;
        });
        videoMuted = !videoMuted;
        muteVideoButton.classList.toggle('muted');
        muteVideoButton.querySelector('.video-icon').classList.toggle('muted');
    }
});
muteMicButton.addEventListener('click', () => {
    if (providerSelect.value === 'chatgpt' && publisher && publisher.recognition) {
        if (!micMuted) {
            publisher.recognition.stop();
            publisher.isRecognizing = false;
        } else {
            if (!publisher.isRecognizing) {
                try {
                    publisher.recognition.start();
                    publisher.isRecognizing = true;
                } catch (err) {
                    console.error('Failed to restart speech recognition:', err);
                    setTimeout(() => {
                        publisher.restartRecognition();
                    }, 300);
                }
            }
        }
        micMuted = !micMuted;
        muteMicButton.classList.toggle('muted');
        muteMicButton.querySelector('.mic-icon').classList.toggle('muted');
        return;
    }
    if (stream) {
        let microphoneTracks = stream.getAudioTracks().filter(track =>
            track.kind === 'audio' &&
            (!track.label || !track.label.toLowerCase().includes('system'))
        );
        if (microphoneTracks.length === 0) {
            console.warn('No microphone tracks found to mute/unmute');
            return;
        }
        microphoneTracks.forEach(track => {
            track.enabled = micMuted;
        });
        micMuted = !micMuted;
        muteMicButton.classList.toggle('muted');
        muteMicButton.querySelector('.mic-icon').classList.toggle('muted');
    }
});
muteAudioButton.addEventListener('click', () => {
    if (stream) {
        let systemTracks = stream.getAudioTracks().filter(track =>
            track.kind === 'audio' &&
            track.label &&
            track.label.toLowerCase().includes('system')
        );
        if (systemTracks.length === 0) {
            console.warn('No system audio tracks found to mute/unmute');
            return;
        }
        systemTracks.forEach(track => {
            track.enabled = audioMuted;
        });
        audioMuted = !audioMuted;
        muteAudioButton.classList.toggle('muted');
        muteAudioButton.querySelector('.speaker-icon').classList.toggle('muted');
    }
});
let audioContext;
async function getStream() {
    try {
        if (preview.srcObject) {
            preview.srcObject.getTracks().forEach(track => track.stop());
            preview.srcObject = null;
        }
        if (stream) {
            stream.getTracks().forEach(track => track.stop());
        }
        let videoStream = null;
        let micStream = null;
        const outputStream = new MediaStream();
        if (videoSelect.value === 'screen') {
            try {
                videoStream = await navigator.mediaDevices.getDisplayMedia({
                    video: true,
                    audio: true
                });
                const videoTrack = videoStream.getVideoTracks()[0];
                if (videoTrack) {
                    outputStream.getVideoTracks().forEach(track => {
                        outputStream.removeTrack(track);
                        track.stop();
                    });
                    outputStream.addTrack(videoTrack);
                }
            } catch (err) {
                console.error('Screen share failed:', err);
                videoSelect.value = 'none';
            }
        } else if (videoSelect.value !== 'none') {
            try {
                videoStream = await navigator.mediaDevices.getUserMedia({
                    video: {
                        deviceId: { exact: videoSelect.value }
                    }
                });
                const videoTrack = videoStream.getVideoTracks()[0];
                if (videoTrack) {
                    outputStream.getVideoTracks().forEach(track => {
                        outputStream.removeTrack(track);
                        track.stop();
                    });
                    outputStream.addTrack(videoTrack);
                }
            } catch (err) {
                console.warn('Selected video device failed:', err);
                videoSelect.value = 'none';
            }
        }
        if (audioSelect.value !== 'none') {
            try {
                micStream = await navigator.mediaDevices.getUserMedia({
                    audio: {
                        deviceId: { exact: audioSelect.value },
                        echoCancellation: true,
                        noiseSuppression: true
                    }
                });
                outputStream.getAudioTracks().forEach(track => {
                    outputStream.removeTrack(track);
                    track.stop();
                });
                if (videoStream?.getAudioTracks().length > 0) {
                    const ctx = new AudioContext();
                    const dest = ctx.createMediaStreamDestination();
                    const systemSource = ctx.createMediaStreamSource(videoStream);
                    const micSource = ctx.createMediaStreamSource(micStream);
                    systemSource.connect(dest);
                    micSource.connect(dest);
                    const mixedTrack = dest.stream.getAudioTracks()[0];
                    if (mixedTrack) {
                        mixedTrack.label = "Mixed Audio (System + Microphone)";
                        outputStream.addTrack(mixedTrack);
                    }
                    videoStream.getAudioTracks().forEach(track => track.stop());
                    micStream.getAudioTracks().forEach(track => track.stop());
                } else {
                    const audioTrack = micStream.getAudioTracks()[0];
                    if (audioTrack) {
                        outputStream.addTrack(audioTrack);
                    }
                }
            } catch (err) {
                console.warn('Selected audio device failed:', err);
                audioSelect.value = 'none';
            }
        } else if (videoStream?.getAudioTracks().length > 0) {
            const systemTrack = videoStream.getAudioTracks()[0];
            if (systemTrack) {
                outputStream.getAudioTracks().forEach(track => {
                    outputStream.removeTrack(track);
                    track.stop();
                });
                outputStream.addTrack(systemTrack);
            }
        }
        return outputStream;
    } catch (err) {
        showError('Failed to get stream: ' + err.message);
        throw err;
    }
}
async function updateMediaStream() {
    try {
        const previousMicMuted = micMuted;
        const previousAudioMuted = audioMuted;
        const newStream = await getStream();
        preview.srcObject = newStream;
        if (publisher) {
            const oldStream = stream;
            stream = newStream;
            publisher.stream = newStream;
            if (typeof publisher.setupAudioProcessing === 'function' && stream.getAudioTracks().length > 0) {
                await publisher.setupAudioProcessing();
            }
            if (typeof publisher.setupVideoProcessing === 'function' && stream.getVideoTracks().length > 0) {
                await publisher.setupVideoProcessing();
            }
            if (oldStream) {
                oldStream.getTracks().forEach(track => track.stop());
            }
        } else {
            stream = newStream;
        }
        if (stream.getAudioTracks().length > 0) {
            setupAudioIndicator(stream);
        }
        if (previousMicMuted || previousAudioMuted) {
            const audioTracks = stream.getAudioTracks();
            audioTracks.forEach(track => {
                if (track.kind === 'audio' && track.label) {
                    if (previousMicMuted && !track.label.toLowerCase().includes('system')) {
                        track.enabled = false;
                    }
                    if (previousAudioMuted && track.label.toLowerCase().includes('system')) {
                        track.enabled = false;
                    }
                }
            });
        }
    } catch (err) {
        console.error('Failed to update media stream:', err);
        showError('Failed to update media stream: ' + err.message);
        if (publisher) {
            publisher.stop();
            publisher = null;
        }
        if (stream) {
            stream.getTracks().forEach(track => track.stop());
            stream = null;
        }
        if (preview.srcObject) {
            preview.srcObject.getTracks().forEach(track => track.stop());
            preview.srcObject = null;
        }
        startButton.textContent = 'Start Stream';
        startButton.dataset.started = "false";
        startButton.disabled = false;
        sendButton.disabled = true;
        document.getElementById('systemPrompt').disabled = false;
    }
}
function showError(message) {
	errorDisplay.textContent = message;
	errorDisplay.style.display = 'block';
	errorDisplay.style.padding = '10px';
	errorDisplay.style.marginBottom = '10px';
	errorDisplay.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
	errorDisplay.style.border = '1px solid #ff6b6b';
	errorDisplay.style.borderRadius = '8px';
	setTimeout(() => {
		errorDisplay.style.display = 'none';
		errorDisplay.textContent = '';
	}, 5000);
}
if (!navigator.mediaDevices?.getUserMedia) {
    showError('getUserMedia not supported');
} else {
    let deviceInitialized = false;
    const initializeDevices = async () => {
        if (deviceInitialized) return;
        deviceInitialized = true;
        try {
            const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false })
                .catch(err => {
                    console.log("Audio permission check failed:", err.message);
                    return null;
                });
            if (audioStream) {
                audioStream.getTracks().forEach(track => track.stop());
            }
            await getDevices();
        } catch (err) {
            console.warn("Permission checks failed:", err);
            await getDevices();
        }
    };
    initializeDevices();
    navigator.mediaDevices.addEventListener('devicechange', getDevices);
}
const messageInput = document.querySelector('.message-input');
const sendButton = document.querySelector('#sendButton');
sendButton.disabled = true;
responsesDiv.parentElement.insertBefore(messageInput, responsesDiv);
responsesDiv.parentElement.insertBefore(sendButton, responsesDiv);
sendButton.addEventListener('click', async () => {
    if (!publisher || sendButton.disabled) {
        showError('Please start the stream first');
        return;
    }
    if (messageInput.value.trim()) {
        try {
            messageFormatter.appendMessage(messageInput.value, true);
            await publisher.sendPrompt(messageInput.value);
            messageInput.value = '';
        } catch (err) {
            console.error('Failed to send message:', err);
            showError('Failed to send message: ' + err.message);
        }
    }
});
document.getElementById('voiceSelect').addEventListener('change', async () => {
    if (publisher && startButton.textContent === 'Stop Stream') {
        startButton.textContent = 'Starting...';
        startButton.disabled = true;
        publisher.stop();
        publisher = null;
        try {
            const stream = await getStream();
            preview.srcObject = stream;
            const apiKey = document.getElementById('apiKey').value;
            publisher = new GoogleLivePublisher(stream, apiKey);
            await publisher.start();
            startButton.textContent = 'Stop Stream';
            startButton.disabled = false;
			startButton.dataset.started = "true";
			sendButton.disabled = false;
            document.getElementById('systemPrompt').disabled = true;
        } catch (err) {
            console.error(err);
            showError('Failed to restart with new voice: ' + err.message);
            startButton.textContent = 'Start Stream';
            startButton.disabled = false;
			startButton.dataset.started = "false";
			sendButton.disabled = true;
			document.getElementById('systemPrompt').disabled = false;
        }
    }
});
document.getElementById('responseType').addEventListener('change', function() {
    const voiceSelect = document.getElementById('voiceSelect');
    voiceSelect.style.display = this.value === 'audio' ? 'block' : 'none';
    if (publisher && startButton.textContent === 'Stop Stream') {
        startButton.textContent = 'Starting...';
        startButton.disabled = true;
        publisher.stop();
        publisher = null;
        (async () => {
            try {
                const stream = await getStream();
                preview.srcObject = stream;
                const apiKey = document.getElementById('apiKey').value;
                publisher = new GoogleLivePublisher(stream, apiKey);
                await publisher.start();
                startButton.textContent = 'Stop Stream';
				startButton.dataset.started = "true";
                startButton.disabled = false;
				sendButton.disabled = false;
				document.getElementById('systemPrompt').disabled = true;
				if (audioContext) {
					audioContext.close();
					audioContext = null;
				}
            } catch (err) {
                console.error(err);
                showError('Failed to restart with new response type: ' + err.message);
                startButton.textContent = 'Start Stream';
				startButton.dataset.started = "false";
                startButton.disabled = false;
				sendButton.disabled = true;
				document.getElementById('systemPrompt').disabled = false;
            }
        })();
    }
});
messageInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        sendButton.click();
    }
});
const providerSelect = document.createElement('select');
providerSelect.id = 'providerSelect';
providerSelect.innerHTML = `
    <option value="gemini">Google Gemini</option>
    <option value="chatgpt">ChatGPT</option>
`;
const apiKeyContainer = document.querySelector('.api-key-container');
apiKeyContainer.parentElement.insertBefore(providerSelect, apiKeyContainer);
const defaultPrompts = {
    gemini: "You are a friendly social chat assistant that can see and hear the user. Avoid describing what you see unless asked.",
    chatgpt: "You are a friendly and helpful social chat assistant that can see and hear the user."
};
const systemPrompt = document.getElementById('systemPrompt');
systemPrompt.value = defaultPrompts.gemini;
if (localStorage) {
    const savedProvider = localStorage.getItem('selectedProvider');
    if (savedProvider) {
        providerSelect.value = savedProvider;
        const apiKeyInfo = document.querySelector('.api-key-info');
        if (savedProvider === 'chatgpt') {
            apiKeyInput.placeholder = 'Enter ChatGPT API Key';
            apiKeyInfo.innerHTML = 'Get your ChatGPT API key at <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener">OpenAI</a>';
        }
        systemPrompt.value = defaultPrompts[providerSelect.value];
    }
}
if (providerSelect.value === 'chatgpt') {
    videoSelect.disabled = true;
    audioSelect.disabled = true;
    const deviceNotice = document.createElement('div');
    deviceNotice.id = 'chatgpt-device-notice';
    deviceNotice.className = 'api-key-info';
    deviceNotice.innerHTML = 'ChatGPT uses your system default microphone for speech recognition';
    deviceNotice.style.marginTop = '8px';
    deviceNotice.style.padding = '6px';
    deviceNotice.style.background = '#333';
    deviceNotice.style.borderRadius = '6px';
    const deviceContainer = document.querySelector('.controls');
    deviceContainer.insertBefore(deviceNotice, muteMicButton.parentElement.nextSibling);
}
if (localStorage) {
    const savedPrompts = localStorage.getItem('systemPrompts');
    if (savedPrompts) {
        const prompts = JSON.parse(savedPrompts);
        Object.assign(defaultPrompts, prompts);
        systemPrompt.value = defaultPrompts[providerSelect.value];
    }
}
systemPrompt.addEventListener('change', function() {
    defaultPrompts[providerSelect.value] = this.value;
    if (localStorage) {
        localStorage.setItem('systemPrompts', JSON.stringify(defaultPrompts));
    }
});
document.getElementById('providerSelect').addEventListener('change', function() {
    const apiKeyInfo = document.querySelector('#apikeyinfo');
    const apiKeyInput = document.getElementById('apiKey');
    
    const providerKey = localStorage.getItem(`apiKey_${this.value}`) || '';
    apiKeyInput.value = providerKey;
    
    if (this.value === 'chatgpt') {
        apiKeyInput.placeholder = 'Enter ChatGPT API Key';
        apiKeyInfo.innerHTML = 'Get your ChatGPT API key at <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener">OpenAI</a>';
    } else {
        apiKeyInput.placeholder = 'Enter Gemini API Key';
        apiKeyInfo.innerHTML = 'Get your free Gemini API key at <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener">Google AI Studio</a>';
    }
    
    systemPrompt.value = defaultPrompts[this.value];
    const isChatGPT = this.value === 'chatgpt';
    videoSelect.disabled = isChatGPT;
    audioSelect.disabled = isChatGPT;
    let deviceNotice = document.getElementById('chatgpt-device-notice');
    if (!deviceNotice && isChatGPT) {
        deviceNotice = document.createElement('div');
        deviceNotice.id = 'chatgpt-device-notice';
        deviceNotice.className = 'api-key-info';
        deviceNotice.innerHTML = 'ChatGPT uses your system default microphone for speech recognition';
        deviceNotice.style.marginTop = '8px';
        deviceNotice.style.padding = '6px';
        deviceNotice.style.background = '#333';
        deviceNotice.style.borderRadius = '6px';
        const deviceContainer = document.querySelector('.controls');
        deviceContainer.insertBefore(deviceNotice, muteMicButton.parentElement.nextSibling);
    } else if (deviceNotice && !isChatGPT) {
        deviceNotice.remove();
    }
    
    localStorage.setItem('selectedProvider', this.value);
});

const avatar = new PuppetAvatar('#puppet-container');
avatar.setPosition('calc(100vw - 320px)', 'calc(100vh - 320px)');
avatar.setEmotion('happy', false);
var ipcRenderer = false;
var ElectronDesktopCapture = false;
try {
	ipcRenderer = require("electron").ipcRenderer;
	window.navigator.mediaDevices.getDisplayMedia = (constraints = false) => {
		return new Promise(async (resolve, reject) => {
			try {
				const sources = await ipcRenderer.sendSync("getSources", { types: ["screen", "window"] });
				const selectionElem = document.createElement("div");
				selectionElem.classList = "desktop-capturer-selection";
				selectionElem.innerHTML = `
				<div class="desktop-capturer-selection__scroller">
				  <ul class="desktop-capturer-selection__list">
					${sources
						.map(
							({ id, name, thumbnail, display_id, appIcon }) => `
					  <li class="desktop-capturer-selection__item">
						<button class="desktop-capturer-click desktop-capturer-selection__btn" data-id="${id}" title="${name}">
						  <img class="desktop-capturer-selection__thumbnail" src="${thumbnail.toDataURL()}" />
						  <span class="desktop-capturer-selection__name">${name}</span>
						</button>
					  </li>
					`
						)
						.join("")}
					<div id="alsoCaptureAudioParent1" style="text-align: center;margin: auto 5px;font-size: 120%;"><i class="las la-music" style="font-size:40px;"></i><br />Include Desktop Audio<br /><input id="alsoCaptureAudio" style="width:20px;height:20px;margin-top: 10px;" type="checkbox" checked></div>
					<div id="alsoCaptureAudioParent2" style="text-align: center;margin: auto 5px;font-size: 120%;display:none;"><i class="las la-music" style="font-size:40px;"></i><br />Audio capture not <br />supported on macOS</div>
					<button id="captureDesktopAudio" class="desktop-capturer-click" style="margin: 10px;"><i class="las la-music" style="font-size:40px;"></i><br />Capture ONLY<br />Desktop Audio</button>
					<button id="cancelscreenshare" style="margin: 10px; background-color: #7c1414; width: 100px;"><i class="las la-window-close" style="font-size:40px;"></i><br />Cancel</button>
				  </ul>
				</div>
			  `;
				document.body.appendChild(selectionElem);
				const isMac = navigator.platform.toLowerCase().includes('mac');
				if (isMac) {
					try {
						document.getElementById("captureDesktopAudio").style.display = "none";
						document.getElementById("alsoCaptureAudio").checked = false;
						document.getElementById("alsoCaptureAudioParent1").style.display = "none";
						document.getElementById("alsoCaptureAudioParent2").style.display = "inline-block";
					} catch(e){}
				}
				document.getElementById("cancelscreenshare").addEventListener("click", async () => {
					selectionElem.remove();
					reject(null);
				});
				document.querySelectorAll(".desktop-capturer-click").forEach(button => {
					button.addEventListener("click", async () => {
						try {
							if (button.id == "captureDesktopAudio") {
								var new_constraints = {
									audio: {
										mandatory: {
											chromeMediaSource: "desktop"
										}
									},
									video: {
										mandatory: {
											chromeMediaSource: "desktop"
										}
									}
								};
								new_constraints.video.mandatory.maxFrameRate = 1;
								const stream = await window.navigator.mediaDevices.getUserMedia(new_constraints);
								if (stream.getVideoTracks().length) {
									var track = stream.getVideoTracks()[0];
									stream.removeTrack(stream.getVideoTracks()[0]);
									track.stop();
								}
								resolve(stream);
								selectionElem.remove();
							} else {
								var audioStream = false;
								if (document.getElementById("alsoCaptureAudio") && document.getElementById("alsoCaptureAudio").checked) {
									var new_constraints = {
										audio: {
											mandatory: {
												chromeMediaSource: "desktop"
											}
										},
										video: {
											mandatory: {
												chromeMediaSource: "desktop"
											}
										}
									};
									new_constraints.video.mandatory.maxFrameRate = 1;
									audioStream = await window.navigator.mediaDevices.getUserMedia(new_constraints);
									if (audioStream.getVideoTracks().length) {
										var track = audioStream.getVideoTracks()[0];
										audioStream.removeTrack(audioStream.getVideoTracks()[0]);
										track.stop();
									}
								}
								const id = button.getAttribute("data-id");
								const source = sources.find(source => source.id === id);
								if (!source) {
									throw new Error(`Source with id ${id} does not exist`);
								}
								var new_constraints = {
									audio: false,
									video: {
										mandatory: {
											chromeMediaSource: "desktop",
											chromeMediaSourceId: source.id
										}
									}
								};
								try {
									if (constraints.video.width.ideal) {
										new_constraints.video.mandatory.maxWidth = constraints.video.width.ideal;
									}
								} catch (e) {}
								try {
									if (constraints.video.height.ideal) {
										new_constraints.video.mandatory.maxHeight = constraints.video.height.ideal;
									}
								} catch (e) {}
								try {
									if (constraints.video.frameRate.ideal) {
										new_constraints.video.mandatory.maxFrameRate = constraints.video.frameRate.ideal;
									}
								} catch (e) {}
								const stream = await window.navigator.mediaDevices.getUserMedia(new_constraints);
								if (audioStream && audioStream.getAudioTracks().length) {
									stream.addTrack(audioStream.getAudioTracks()[0]);
								}
								resolve(stream);
								selectionElem.remove();
							}
						} catch (err) {
							console.error("Error selecting desktop capture source:", err);
							reject(err);
						}
					});
				});
			} catch (err) {
				console.error("Error displaying desktop capture sources:", err);
				reject(err);
			}
		});
	};
	ElectronDesktopCapture = true;
} catch (e) {
	console.warn("Couldn't load electron's screen capture. Elevate the app's permission to allow it (right-click?)");
}
function setupConnectionMonitoring() {
    let monitoringActive = false;
    let monitoringInterval = null;
    function startMonitoring() {
        if (monitoringActive) return;
        monitoringActive = true;
        if (monitoringInterval) {
            clearInterval(monitoringInterval);
        }
        monitoringInterval = setInterval(() => {
            if (startButton.dataset.started !== "true" || !publisher) return;
            if (!publisher.isConnected()) {
                console.log('Stream should be active but connection is closed, attempting to reconnect');
                if (publisher.reconnectAttempts < publisher.maxReconnectAttempts) {
                    publisher.reconnect().catch(err => {
                        console.error('Failed automatic reconnection:', err);
                    });
                } else {
                    console.log('Max reconnection attempts reached, notifying user');
                    showError('Connection lost. Please try restarting the stream manually.');
                }
            }
            if (stream) {
                const allTracks = [...stream.getAudioTracks(), ...stream.getVideoTracks()];
                const anyTrackEnded = allTracks.some(track => !track.readyState || track.readyState === 'ended');
                if (anyTrackEnded) {
                    console.warn('One or more media tracks have ended unexpectedly');
                    if (publisher && !publisher.reconnectTimeout && !publisher._reconnectPromise) {
                        updateMediaStream().catch(err => {
                            console.error('Failed to recover media stream:', err);
                        });
                    }
                }
            }
        }, 15000);
    }
    function stopMonitoring() {
        if (monitoringInterval) {
            clearInterval(monitoringInterval);
            monitoringInterval = null;
        }
        monitoringActive = false;
    }
    window.addEventListener('online', () => {
        console.log('Network connection restored');
        if (publisher && !publisher.isConnected() && startButton.dataset.started === "true") {
            console.log('Attempting to reconnect after network restoration');
            showError('Network connection restored. Reconnecting...');
            publisher.reconnect().catch(err => {
                console.error('Failed to reconnect after network restoration:', err);
            });
        }
    });
    window.addEventListener('offline', () => {
        console.log('Network connection lost');
        showError('Network connection lost. Waiting for connection to restore...');
    });
    document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'visible') {
            console.log('Tab became visible');
            if (publisher && startButton.dataset.started === "true") {
                const lastActivity = Date.now() - (publisher.lastActivityTime || 0);
                if (lastActivity > 10000) {
                    console.log('Long inactivity detected after tab became visible, reconnecting');
                    publisher.reconnect().catch(err => {
                        console.error('Failed to reconnect after tab became visible:', err);
                    });
                }
            }
        }
    });
    startButton.addEventListener('click', () => {
        if (startButton.dataset.started === "true") {
            startMonitoring();
        } else {
            stopMonitoring();
        }
    });
    if (startButton.dataset.started === "true") {
        startMonitoring();
    }
    return {
        start: startMonitoring,
        stop: stopMonitoring
    };
}

function addClearHistoryButton() {
    // Check if button already exists
    if (document.querySelector('#clearHistoryButton')) {
        return;
    }
    
    const clearButton = document.createElement('button');
    clearButton.id = 'clearHistoryButton';
    clearButton.textContent = 'Clear Chat History';
    clearButton.style.marginLeft = '10px';
    clearButton.style.background = '#6c1c1c';
    
    clearButton.addEventListener('click', () => {
        if (confirm('Are you sure you want to clear the conversation history?')) {
            if (publisher && typeof publisher.clearConversationHistory === 'function') {
                publisher.clearConversationHistory();
            } else {
                localStorage.removeItem('conversationHistory');
                document.getElementById('responses').innerHTML = '';
            }
        }
    });
    
    // Add to your controls
    const controlsDiv = document.querySelector('.controls');
    if (controlsDiv) {
        controlsDiv.appendChild(clearButton);
    }
}
document.addEventListener('DOMContentLoaded', () => {
    const savedProvider = localStorage.getItem('selectedProvider') || 'gemini';
    providerSelect.value = savedProvider;
    
    const providerKey = localStorage.getItem(`apiKey_${savedProvider}`) || localStorage.getItem('apiKey') || '';
    apiKeyInput.value = providerKey;
    
    validateApiKey();
	addClearHistoryButton();
});

const connectionMonitor = setupConnectionMonitoring();
</script>
</body>
</html>
