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

package/src/components/AgentComposer.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { useAgentAssistant } from '../context/AgentAssistantContext';
+
+export function AgentComposer(): React.ReactElement | null {
+  const {
+    theme,
+    placeholder,
+    inputText,
+    setInputText,
+    sendText,
+    isLoading,
+    isVoiceAvailable,
+    interactionMode,
+    startVoice,
+    isVoiceConnecting,
+    enableFileUpload,
+    sendMessage,
+  } = useAgentAssistant();
+  const fileInputRef = React.useRef<HTMLInputElement | null>(null);
+
+  if (interactionMode === 'voice') {
+    return null;
+  }
+
+  const handleFiles = async (files: FileList | null) => {
+    if (!files?.length) return;
+    const { fileToAttachment } = await import('@bytexbyte/nxtlinq-ai-agent-web-development');
+    const attachments = await Promise.all(
+      Array.from(files).map((file) => fileToAttachment(file)),
+    );
+    await sendMessage(
+      attachments.length ? `Uploaded ${attachments.length} file(s)` : '',
+      { attachments },
+    );
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  };
+
+  return (
+    <div
+      style={{
+        borderTop: `1px solid ${theme.colors.border}`,
+        backgroundColor: theme.colors.surface,
+        padding: theme.spacing.md,
+      }}
+    >
+      <div style={{ display: 'flex', gap: theme.spacing.sm, alignItems: 'flex-end' }}>
+        {enableFileUpload ? (
+          <>
+            <button
+              type="button"
+              onClick={() => fileInputRef.current?.click()}
+              disabled={isLoading}
+              style={{
+                width: 36,
+                height: 36,
+                borderRadius: theme.radius.button,
+                border: `1px solid ${theme.colors.border}`,
+                backgroundColor: theme.colors.surface,
+                cursor: 'pointer',
+              }}
+              aria-label="Upload file"
+            >
+              +
+            </button>
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              accept="image/*,.pdf,.doc,.docx,.txt"
+              style={{ display: 'none' }}
+              onChange={(e) => void handleFiles(e.target.files)}
+            />
+          </>
+        ) : null}
+        <textarea
+          value={inputText}
+          onChange={(e) => setInputText(e.target.value)}
+          placeholder={placeholder}
+          rows={2}
+          disabled={isLoading}
+          maxLength={4000}
+          style={{
+            flex: 1,
+            resize: 'none',
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: theme.radius.panel,
+            padding: theme.spacing.sm,
+            fontSize: theme.typography.bodySize,
+            color: theme.colors.assistantText,
+          }}
+        />
+        <button
+          type="button"
+          onClick={() => void sendText()}
+          disabled={isLoading || !inputText.trim()}
+          style={{
+            backgroundColor: theme.colors.primary,
+            color: theme.colors.primaryText,
+            border: 'none',
+            borderRadius: theme.radius.button,
+            padding: `${theme.spacing.sm}px ${theme.spacing.md}px`,
+            fontWeight: 600,
+            opacity: isLoading || !inputText.trim() ? 0.5 : 1,
+            cursor: 'pointer',
+          }}
+        >
+          Send
+        </button>
+      </div>
+      {isVoiceAvailable ? (
+        <button
+          type="button"
+          onClick={() => {
+            startVoice().catch((err: unknown) => {
+              console.warn('[nxtlinq] startVoice failed:', err);
+            });
+          }}
+          disabled={isVoiceConnecting}
+          style={{
+            display: 'block',
+            margin: `${theme.spacing.sm}px auto 0`,
+            border: 'none',
+            background: 'none',
+            color: theme.colors.primary,
+            fontSize: theme.typography.captionSize,
+            cursor: 'pointer',
+          }}
+        >
+          {isVoiceConnecting ? 'Connecting voice…' : 'Switch to voice mode'}
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/components/AgentMessageList.tsx

@@ -0,0 +1,78 @@
+import type { Message } from '@bytexbyte/nxtlinq-ai-agent-core-development';
+import React, { useEffect, useRef } from 'react';
+import { useAgentAssistant } from '../context/AgentAssistantContext';
+
+function MessageBubble({ message }: { message: Message }): React.ReactElement {
+  const { theme } = useAgentAssistant();
+  const isUser = message.role === 'user';
+  const displayText =
+    message.partialContent && message.isStreaming
+      ? message.partialContent
+      : message.content;
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: isUser ? 'flex-end' : 'flex-start',
+        marginBottom: theme.spacing.sm,
+      }}
+    >
+      <div
+        style={{
+          maxWidth: '85%',
+          padding: `${theme.spacing.sm}px ${theme.spacing.md}px`,
+          borderRadius: theme.radius.bubble,
+          backgroundColor: isUser ? theme.colors.userBubble : theme.colors.assistantBubble,
+          color: isUser ? theme.colors.userText : theme.colors.assistantText,
+          fontSize: theme.typography.bodySize,
+          whiteSpace: 'pre-wrap',
+        }}
+      >
+        {displayText || ' '}
+        {message.error ? (
+          <div style={{ color: theme.colors.error, fontSize: theme.typography.captionSize }}>
+            {message.error}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export function AgentMessageList(): React.ReactElement {
+  const { messages, isLoading, theme } = useAgentAssistant();
+  const endRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    endRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages.length, messages[messages.length - 1]?.content, messages[messages.length - 1]?.partialContent]);
+
+  return (
+    <div
+      style={{
+        flex: 1,
+        minHeight: 0,
+        overflowY: 'auto',
+        padding: theme.spacing.md,
+        backgroundColor: theme.colors.background,
+      }}
+    >
+      {messages.length === 0 ? (
+        <p style={{ textAlign: 'center', color: theme.colors.mutedText, marginTop: 40 }}>
+          Send a message to start the conversation.
+        </p>
+      ) : (
+        messages.map((message: Message) => (
+          <MessageBubble key={message.id} message={message} />
+        ))
+      )}
+      {isLoading ? (
+        <p style={{ color: theme.colors.mutedText, fontSize: theme.typography.captionSize }}>
+          Thinking…
+        </p>
+      ) : null}
+      <div ref={endRef} />
+    </div>
+  );
+}

package/src/components/AgentRemoteAudio.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useRef } from 'react';
+import { useAgentAssistant } from '../context/AgentAssistantContext';
+
+/** Plays assistant WebRTC remote audio with retry until stream is ready. */
+export function AgentRemoteAudio(): React.ReactElement | null {
+  const { getRemoteAudioStream, isVoiceActive, isVoiceChannelReady } = useAgentAssistant();
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio || !isVoiceActive) return;
+
+    let cancelled = false;
+    const attach = () => {
+      if (cancelled) return;
+      const stream = getRemoteAudioStream();
+      if (!stream) return;
+      audio.srcObject = stream;
+      void audio.play().catch(() => undefined);
+    };
+
+    attach();
+    const timer = window.setInterval(attach, 120);
+    return () => {
+      cancelled = true;
+      window.clearInterval(timer);
+      audio.pause();
+      audio.srcObject = null;
+    };
+  }, [getRemoteAudioStream, isVoiceActive, isVoiceChannelReady]);
+
+  if (!isVoiceActive) return null;
+  return <audio ref={audioRef} autoPlay playsInline style={{ display: 'none' }} />;
+}

package/src/components/AgentVoiceBar.tsx

@@ -0,0 +1,173 @@
+import React, { useCallback } from 'react';
+import {
+  useAgentAssistant,
+  voiceStatusLabel,
+} from '../context/AgentAssistantContext';
+
+function statusDotColor(
+  status: ReturnType<typeof useAgentAssistant>['voiceStatus'],
+  theme: ReturnType<typeof useAgentAssistant>['theme'],
+): string {
+  switch (status) {
+    case 'listening':
+      return theme.colors.voiceActive;
+    case 'speaking':
+      return theme.colors.voiceSpeaking;
+    case 'idle':
+      return theme.colors.mutedText;
+    default:
+      return theme.colors.primary;
+  }
+}
+
+function MicIcon({ color }: { color: string }): React.ReactElement {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill={color} aria-hidden>
+      <path 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 3zm5-3c0 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" />
+    </svg>
+  );
+}
+
+function MicOffIcon(): React.ReactElement {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="#ef4444" aria-hidden>
+      <path 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-3s-3 1.34-3 3v.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-.9L19.73 21 21 19.73 4.27 3z" />
+    </svg>
+  );
+}
+
+export function AgentVoiceBar(): React.ReactElement | null {
+  const {
+    theme,
+    interactionMode,
+    voiceStatus,
+    voiceSessionId,
+    isVoiceConnecting,
+    isVoiceChannelReady,
+    stopVoice,
+    isVoiceAvailable,
+    isMicMuted,
+    isMicHeldForAssistant,
+    toggleVoiceMicMute,
+  } = useAgentAssistant();
+
+  const returnToTextMode = useCallback(() => {
+    void stopVoice();
+  }, [stopVoice]);
+
+  if (!isVoiceAvailable) return null;
+  if (interactionMode !== 'voice' && !isVoiceConnecting) return null;
+
+  const showConnecting = isVoiceConnecting;
+  const awaitingChannel =
+    Boolean(voiceSessionId) &&
+    !isVoiceConnecting &&
+    !isVoiceChannelReady &&
+    voiceStatus === 'idle';
+
+  const statusHint = showConnecting
+    ? 'Tap Back to text mode below to cancel'
+    : awaitingChannel
+      ? 'Waiting for voice channel…'
+      : isMicHeldForAssistant
+        ? 'Assistant is responding — tap mic to interrupt and speak'
+        : isMicMuted
+          ? 'Mic is off — tap the mic when ready to speak'
+          : voiceStatus === 'listening'
+            ? 'Start speaking'
+            : voiceStatus === 'speaking'
+              ? 'Assistant is speaking…'
+              : voiceStatus === 'thinking'
+                ? 'Thinking…'
+                : '';
+
+  return (
+    <div
+      style={{
+        borderTop: `1px solid ${theme.colors.border}`,
+        backgroundColor: theme.colors.surface,
+        padding: theme.spacing.md,
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+        <div
+          style={{
+            flex: 1,
+            minWidth: 0,
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: 12,
+            backgroundColor: theme.colors.background,
+            padding: '8px 10px',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            <span
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: 4,
+                backgroundColor: statusDotColor(voiceStatus, theme),
+                flexShrink: 0,
+              }}
+            />
+            <span
+              style={{
+                color: theme.colors.assistantText,
+                fontSize: theme.typography.captionSize,
+                fontWeight: 600,
+              }}
+            >
+              {showConnecting || awaitingChannel ? 'Connecting' : voiceStatusLabel(voiceStatus)}
+            </span>
+            {showConnecting ? (
+              <span style={{ color: theme.colors.mutedText, fontSize: theme.typography.captionSize }}>
+                …
+              </span>
+            ) : null}
+          </div>
+          {statusHint ? (
+            <p
+              style={{
+                margin: '4px 0 0',
+                color: theme.colors.mutedText,
+                fontSize: theme.typography.captionSize - 1,
+              }}
+            >
+              {statusHint}
+            </p>
+          ) : null}
+        </div>
+        <button
+          type="button"
+          onClick={toggleVoiceMicMute}
+          disabled={showConnecting || awaitingChannel}
+          style={{
+            border: 'none',
+            background: 'none',
+            padding: 8,
+            cursor: showConnecting || awaitingChannel ? 'not-allowed' : 'pointer',
+            opacity: showConnecting || awaitingChannel ? 0.45 : 1,
+          }}
+          aria-label={isMicMuted ? 'Unmute microphone' : 'Mute microphone'}
+        >
+          {isMicMuted ? <MicOffIcon /> : <MicIcon color={theme.colors.assistantText} />}
+        </button>
+      </div>
+      <button
+        type="button"
+        onClick={returnToTextMode}
+        style={{
+          display: 'block',
+          margin: `${theme.spacing.sm}px auto 0`,
+          border: 'none',
+          background: 'none',
+          color: theme.colors.primary,
+          fontSize: theme.typography.captionSize,
+          cursor: 'pointer',
+        }}
+      >
+        Back to text mode
+      </button>
+    </div>
+  );
+}

package/src/components/PresetMessageChips.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useAgentAssistant } from '../context/AgentAssistantContext';
+import type { PresetMessage } from '../types';
+
+export function PresetMessageChips(): React.ReactElement | null {
+  const { presetMessages, selectPreset, theme, interactionMode } = useAgentAssistant();
+  if (!presetMessages.length || interactionMode === 'voice') {
+    return null;
+  }
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: theme.spacing.sm,
+        padding: `${theme.spacing.sm}px ${theme.spacing.md}px`,
+        borderBottom: `1px solid ${theme.colors.border}`,
+      }}
+    >
+      {presetMessages.map((preset: PresetMessage, index: number) => (
+        <button
+          key={`${preset.text}-${index}`}
+          type="button"
+          onClick={() => void selectPreset(preset)}
+          style={{
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: theme.radius.button,
+            padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
+            backgroundColor: theme.colors.surface,
+            color: theme.colors.assistantText,
+            fontSize: theme.typography.captionSize,
+            cursor: 'pointer',
+          }}
+        >
+          {preset.text}
+        </button>
+      ))}
+    </div>
+  );
+}