@bytexbyte/nxtlinq-ai-agent-ui-react-development 0.1.1

package/src/legacy/chatbot/ui/VoiceModePanel.tsx

@@ -0,0 +1,168 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import MicIcon from '@mui/icons-material/Mic';
+import MicOffIcon from '@mui/icons-material/MicOff';
+import StopIcon from '@mui/icons-material/Stop';
+import { IconButton, Tooltip } from '@mui/material';
+import * as React from 'react';
+import type { VoiceStatus } from '@bytexbyte/nxtlinq-ai-agent-core-development';
+import { useChatBot } from '../context/ChatBotContext';
+
+const STATUS_LABELS: Record<VoiceStatus, string> = {
+  idle: 'Idle',
+  listening: 'Listening',
+  transcribing: 'Transcribing',
+  thinking: 'Thinking',
+  generating: 'Generating',
+  speaking: 'Speaking',
+};
+
+const ASSISTANT_MIC_HOLD_STATUSES: ReadonlySet<VoiceStatus> = new Set([
+  'transcribing',
+  'thinking',
+  'generating',
+  'speaking',
+]);
+
+const statusDotColor: Record<VoiceStatus, string> = {
+  idle: '#6b7280',
+  listening: '#22c55e',
+  transcribing: '#eab308',
+  thinking: '#3b82f6',
+  generating: '#8b5cf6',
+  speaking: '#ec4899',
+};
+
+const STATUS_HINTS: Partial<Record<VoiceStatus, string>> = {
+  listening: 'Start speaking',
+  transcribing: 'Processing your speech…',
+  thinking: 'Thinking…',
+  generating: 'Assistant is responding…',
+  speaking: 'Assistant is speaking…',
+};
+
+export const VoiceModePanel: React.FC = () => {
+  const {
+    voiceStatus,
+    isVoiceConnecting,
+    isMicMuted,
+    remoteAudioRef,
+    toggleVoiceMicMute,
+    interruptVoice,
+  } = useChatBot();
+
+  const isMicHeldForAssistant = ASSISTANT_MIC_HOLD_STATUSES.has(voiceStatus);
+
+  const statusHint = isVoiceConnecting
+    ? 'Connecting… use Text Mode above to cancel'
+    : isMicMuted && !isMicHeldForAssistant
+      ? 'Mic is off — tap the mic button when ready to speak'
+      : STATUS_HINTS[voiceStatus] ?? '';
+
+  return (
+    <>
+      <audio ref={remoteAudioRef} autoPlay playsInline css={css`display: none !important;`} />
+
+      <div
+        css={css`
+          padding: 10px 15px !important;
+          border-top: 1px solid #eee !important;
+          background: linear-gradient(180deg, #f8fafc 0%, #fff 100%) !important;
+          display: flex !important;
+          align-items: center !important;
+          justify-content: space-between !important;
+          gap: 10px !important;
+        `}
+      >
+        <div
+          css={css`
+            min-width: 0 !important;
+            flex: 1 !important;
+            height: 32px !important;
+            padding: 0 10px !important;
+            border-radius: 999px !important;
+            border: 1px solid #e5e7eb !important;
+            background: #f9fafb !important;
+            display: flex !important;
+            align-items: center !important;
+            gap: 8px !important;
+            color: #374151 !important;
+            font-size: 12px !important;
+            line-height: 1 !important;
+          `}
+        >
+          <span
+            css={css`
+              flex: 0 0 auto !important;
+              width: 8px !important;
+              height: 8px !important;
+              border-radius: 50% !important;
+              background: ${statusDotColor[voiceStatus]} !important;
+              ${voiceStatus === 'listening' || voiceStatus === 'thinking' || voiceStatus === 'speaking'
+                ? 'animation: voicePulse 1.2s infinite !important;'
+                : ''}
+            `}
+          />
+          <span css={css`flex: 0 0 auto !important; font-weight: 600 !important;`}>
+            {isVoiceConnecting ? 'Connecting' : STATUS_LABELS[voiceStatus]}
+          </span>
+          {statusHint ? (
+            <span
+              css={css`
+                min-width: 0 !important;
+                overflow: hidden !important;
+                text-overflow: ellipsis !important;
+                white-space: nowrap !important;
+                color: #6b7280 !important;
+              `}
+            >
+              {statusHint}
+            </span>
+          ) : null}
+        </div>
+
+        <div css={css`display: flex !important; gap: 4px !important;`}>
+          <Tooltip title={
+            isVoiceConnecting
+              ? 'Available after connection'
+              : isMicHeldForAssistant
+                ? 'Mic paused while assistant responds (use Interrupt to speak)'
+                : isMicMuted
+                  ? 'Turn on mic'
+                  : 'Turn off mic'
+          }>
+            <span>
+              <IconButton
+                onClick={toggleVoiceMicMute}
+                disabled={isVoiceConnecting || isMicHeldForAssistant}
+                size="small"
+                css={css`color: ${isMicMuted ? '#ef4444' : '#4b5563'} !important;`}
+              >
+                {isMicMuted ? <MicOffIcon /> : <MicIcon />}
+              </IconButton>
+            </span>
+          </Tooltip>
+          <Tooltip title="Interrupt (barge in)">
+            <span>
+              <IconButton
+                onClick={interruptVoice}
+                disabled={isVoiceConnecting}
+                size="small"
+                css={css`color: #4b5563 !important;`}
+              >
+                <StopIcon />
+              </IconButton>
+            </span>
+          </Tooltip>
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes voicePulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.35; }
+        }
+      `}</style>
+    </>
+  );
+};