@bytexbyte/nxtlinq-ai-agent-ui-react-development 0.1.3 → 0.1.4

package/src/components/AgentVoiceBar.tsx

@@ -1,173 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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>
-  );
-}

package/src/context/AgentAssistantContext.tsx

@@ -1,294 +0,0 @@
-import type { Message, VoiceStatus } from '@bytexbyte/nxtlinq-ai-agent-core-development';
-import {
-  useNxtlinqAgent,
-  useNxtlinqVoice,
-  type UseNxtlinqAgentResult,
-  type UseNxtlinqVoiceResult,
-} from '@bytexbyte/nxtlinq-ai-agent-web-development';
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-  type ReactNode,
-} from 'react';
-import { defaultAgentAssistantTheme } from '../theme/defaultTheme';
-import type { AgentAssistantTheme, NxtlinqAgentChatProps, PresetMessage } from '../types';
-import { useVoiceConnectOrchestration } from '../voice/useVoiceConnectOrchestration';
-import { useVoiceMicState } from '../voice/useVoiceMicState';
-import { useVoiceTranscriptMessages } from '../voice/useVoiceTranscriptMessages';
-
-export type InteractionMode = 'text' | 'voice';
-
-export type AgentAssistantContextValue = UseNxtlinqAgentResult &
-  UseNxtlinqVoiceResult & {
-  theme: AgentAssistantTheme;
-  title: string;
-  placeholder: string;
-  presetMessages: PresetMessage[];
-  interactionMode: InteractionMode;
-  setInteractionMode: (mode: InteractionMode) => void;
-  inputText: string;
-  setInputText: (text: string) => void;
-  isVoiceAvailable: boolean;
-  isVoiceConnecting: boolean;
-  isMicMuted: boolean;
-  isMicHeldForAssistant: boolean;
-  toggleVoiceMicMute: () => void;
-  isVoiceChannelReady: boolean;
-  enableFileUpload: boolean;
-  sendText: () => Promise<void>;
-  selectPreset: (preset: PresetMessage) => Promise<void>;
-};
-
-const AgentAssistantContext = createContext<AgentAssistantContextValue | null>(null);
-
-export type AgentAssistantProviderProps = {
-  children: ReactNode;
-  ui: Pick<
-    NxtlinqAgentChatProps,
-    | 'title'
-    | 'placeholder'
-    | 'presetMessages'
-    | 'enableVoice'
-    | 'enableFileUpload'
-    | 'theme'
-    | 'startWithMicMuted'
-    | 'holdMicDuringAssistant'
-  >;
-};
-
-export function AgentAssistantProvider({
-  children,
-  ui,
-}: AgentAssistantProviderProps): React.ReactElement {
-  const agent = useNxtlinqAgent();
-  const voice = useNxtlinqVoice();
-  const [interactionMode, setInteractionModeState] = useState<InteractionMode>('text');
-  const [inputText, setInputText] = useState('');
-  const [isVoiceConnecting, setIsVoiceConnecting] = useState(false);
-
-  const isVoiceAvailable = ui.enableVoice !== false;
-  const micStartsMuted = ui.startWithMicMuted ?? true;
-
-  const handleVoiceBargeIn = useCallback(() => {
-    voice.interrupt();
-  }, [voice]);
-
-  const {
-    isMicMuted,
-    isMicHeldForAssistant,
-    toggleVoiceMicMute,
-    prepareForVoiceConnect,
-    resetMicState,
-    clearAssistantMicHold,
-  } = useVoiceMicState(voice, isVoiceConnecting, {
-    startWithMicMuted: micStartsMuted,
-    holdMicDuringAssistant: ui.holdMicDuringAssistant ?? true,
-    onBargeIn: handleVoiceBargeIn,
-  });
-
-  const voiceTranscriptApi = useMemo(
-    () => ({
-      getMessages: () => agent.agent.getSnapshot().messages,
-      updateMessages: (updater: (prev: Message[]) => Message[]) => {
-        agent.setMessages(updater(agent.agent.getSnapshot().messages));
-      },
-      syncVoiceTurnHistory: agent.syncVoiceTurnHistory,
-    }),
-    [agent.agent, agent.setMessages, agent.syncVoiceTurnHistory],
-  );
-
-  const { handleTranscript, handleDone, clearVoiceStream } = useVoiceTranscriptMessages(
-    voiceTranscriptApi,
-    interactionMode,
-    voice.voiceSessionId,
-  );
-
-  const setInteractionMode = useCallback(
-    (mode: InteractionMode) => {
-      if (mode === 'text' && interactionMode === 'voice') {
-        void voice.stopVoice('switch_to_text').then(() => {
-          clearVoiceStream();
-          resetMicState();
-        });
-      }
-      setInteractionModeState(mode);
-    },
-    [interactionMode, voice, resetMicState, clearVoiceStream],
-  );
-
-  useEffect(() => {
-    if (interactionMode === 'text' && voice.voiceSessionId != null) {
-      void voice.stopVoice('mode_text_cleanup').then(() => {
-        clearVoiceStream();
-        resetMicState();
-      });
-    }
-  }, [interactionMode, voice.voiceSessionId, voice, resetMicState, clearVoiceStream]);
-
-  const orchestrationCallbacks = useMemo(
-    () => ({
-      handleTranscript,
-      handleDone,
-      clearVoiceStream,
-      prepareForVoiceConnect,
-      resetMicState,
-      clearAssistantMicHold,
-      setInteractionMode,
-      setIsVoiceConnecting,
-    }),
-    [
-      handleTranscript,
-      handleDone,
-      clearVoiceStream,
-      prepareForVoiceConnect,
-      resetMicState,
-      clearAssistantMicHold,
-      setInteractionMode,
-    ],
-  );
-
-  const {
-    wrappedStartVoice,
-    wrappedStopVoice,
-    wrappedInterrupt,
-    isVoiceChannelReady,
-  } = useVoiceConnectOrchestration(
-    agent,
-    voice,
-    interactionMode,
-    micStartsMuted,
-    orchestrationCallbacks,
-  );
-
-  // iOS 切換 App 或相機後返回時，若 WebRTC App Channel 已斷開則自動停止語音 session，
-  // 避免麥克風圖示顯示活躍但狀態卡在 Idle 的問題。
-  useEffect(() => {
-    if (typeof document === 'undefined') return;
-    const handleVisibilityChange = () => {
-      if (document.visibilityState !== 'visible') return;
-      if (voice.voiceSessionId == null) return;
-      const session = agent.agent.getVoiceSession();
-      if (!session?.isAppChannelOpen()) {
-        void wrappedStopVoice();
-      }
-    };
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
-  }, [voice.voiceSessionId, agent.agent, wrappedStopVoice]);
-
-  const theme = useMemo(
-    () => ({
-      ...defaultAgentAssistantTheme,
-      ...ui.theme,
-      colors: { ...defaultAgentAssistantTheme.colors, ...ui.theme?.colors },
-      spacing: { ...defaultAgentAssistantTheme.spacing, ...ui.theme?.spacing },
-      radius: { ...defaultAgentAssistantTheme.radius, ...ui.theme?.radius },
-      typography: {
-        ...defaultAgentAssistantTheme.typography,
-        ...ui.theme?.typography,
-      },
-    }),
-    [ui.theme],
-  );
-
-  const sendText = useCallback(async () => {
-    const text = inputText.trim();
-    if (!text || agent.isLoading) return;
-    setInputText('');
-    await agent.sendMessage(text);
-  }, [agent, inputText]);
-
-  const selectPreset = useCallback(
-    async (preset: PresetMessage) => {
-      if (preset.autoSend) {
-        await agent.sendMessage(preset.text);
-      } else {
-        setInputText(preset.text);
-      }
-    },
-    [agent],
-  );
-
-  const value = useMemo<AgentAssistantContextValue>(
-    () => ({
-      ...agent,
-      ...voice,
-      startVoice: wrappedStartVoice,
-      stopVoice: wrappedStopVoice,
-      interrupt: wrappedInterrupt,
-      theme,
-      title: ui.title ?? 'AI Assistant',
-      placeholder: ui.placeholder ?? 'Type a message…',
-      presetMessages: ui.presetMessages ?? [],
-      interactionMode,
-      setInteractionMode,
-      inputText,
-      setInputText,
-      isVoiceAvailable,
-      isVoiceConnecting,
-      isMicMuted,
-      isMicHeldForAssistant,
-      toggleVoiceMicMute,
-      isVoiceChannelReady,
-      enableFileUpload: ui.enableFileUpload !== false,
-      sendText,
-      selectPreset,
-    }),
-    [
-      agent,
-      voice,
-      wrappedStartVoice,
-      wrappedStopVoice,
-      wrappedInterrupt,
-      theme,
-      ui.title,
-      ui.placeholder,
-      ui.presetMessages,
-      ui.enableFileUpload,
-      interactionMode,
-      setInteractionMode,
-      inputText,
-      isVoiceAvailable,
-      isVoiceConnecting,
-      isMicMuted,
-      isMicHeldForAssistant,
-      toggleVoiceMicMute,
-      isVoiceChannelReady,
-      sendText,
-      selectPreset,
-      voice.voiceStatus,
-    ],
-  );
-
-  return (
-    <AgentAssistantContext.Provider value={value}>
-      {children}
-    </AgentAssistantContext.Provider>
-  );
-}
-
-export function useAgentAssistant(): AgentAssistantContextValue {
-  const ctx = useContext(AgentAssistantContext);
-  if (!ctx) {
-    throw new Error(
-      'useAgentAssistant must be used within <NxtlinqAgentChat> or <AgentAssistantProvider>',
-    );
-  }
-  return ctx;
-}
-
-export function voiceStatusLabel(status: VoiceStatus): string {
-  const labels: Record<VoiceStatus, string> = {
-    idle: 'Ready',
-    listening: 'Listening',
-    transcribing: 'Transcribing',
-    thinking: 'Thinking',
-    generating: 'Generating',
-    speaking: 'Speaking',
-  };
-  return labels[status] ?? status;
-}

package/src/legacy/index.ts

@@ -1,26 +0,0 @@
-export { ChatBot } from './chatbot/ChatBot';
-export { ChatBotProvider, useChatBot } from './chatbot/context/ChatBotContext';
-
-export { ChatBotUI } from './chatbot/ui/ChatBotUI';
-export { MessageInput } from './chatbot/ui/MessageInput';
-export { MessageList } from './chatbot/ui/MessageList';
-export { ModelSelector } from './chatbot/ui/ModelSelector';
-export { NotificationModal } from './chatbot/ui/NotificationModal';
-export { PermissionForm } from './chatbot/ui/PermissionForm';
-export { PresetMessages } from './chatbot/ui/PresetMessages';
-export { BerifyMeModal } from './chatbot/ui/BerifyMeModal';
-
-export type {
-  AIModel,
-  AITMetadata,
-  ChatBotContextType,
-  ChatBotProps,
-  NovaError,
-  NovaResponse,
-  PresetMessage,
-  ToolCall,
-  ToolUse,
-} from './chatbot/types/ChatBotTypes';
-
-/** Alias for consumers migrating to the new package naming. */
-export { ChatBot as NxtlinqChatBot } from './chatbot/ChatBot';

package/src/theme/defaultTheme.ts

@@ -1,22 +0,0 @@
-import type { AgentAssistantTheme } from '../types';
-
-export const defaultAgentAssistantTheme: AgentAssistantTheme = {
-  colors: {
-    background: '#f8fafc',
-    surface: '#ffffff',
-    border: '#e2e8f0',
-    primary: '#2563eb',
-    primaryText: '#ffffff',
-    userBubble: '#2563eb',
-    userText: '#ffffff',
-    assistantBubble: '#f1f5f9',
-    assistantText: '#0f172a',
-    mutedText: '#64748b',
-    error: '#dc2626',
-    voiceActive: '#22c55e',
-    voiceSpeaking: '#ec4899',
-  },
-  spacing: { xs: 4, sm: 8, md: 16, lg: 24 },
-  radius: { bubble: 12, panel: 8, button: 8 },
-  typography: { titleSize: 17, bodySize: 15, captionSize: 13 },
-};

package/src/types.ts

@@ -1,65 +0,0 @@
-import type { Message, ToolUse as CoreToolUse } from '@bytexbyte/nxtlinq-ai-agent-core-development';
-import type { NxtlinqAgentProviderProps } from '@bytexbyte/nxtlinq-ai-agent-web-development';
-import type { CSSProperties } from 'react';
-
-export type PresetMessage = {
-  text: string;
-  autoSend?: boolean;
-};
-
-export type AgentAssistantTheme = {
-  colors: {
-    background: string;
-    surface: string;
-    border: string;
-    primary: string;
-    primaryText: string;
-    userBubble: string;
-    userText: string;
-    assistantBubble: string;
-    assistantText: string;
-    mutedText: string;
-    error: string;
-    voiceActive: string;
-    voiceSpeaking: string;
-  };
-  spacing: {
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-  };
-  radius: {
-    bubble: number;
-    panel: number;
-    button: number;
-  };
-  typography: {
-    titleSize: number;
-    bodySize: number;
-    captionSize: number;
-  };
-};
-
-export type NxtlinqAgentChatProps = Omit<NxtlinqAgentProviderProps, 'children'> & {
-  children?: NxtlinqAgentProviderProps['children'];
-  title?: string;
-  placeholder?: string;
-  presetMessages?: PresetMessage[];
-  loadHistoryOnMount?: boolean;
-  historyLast?: number;
-  enableVoice?: boolean;
-  enableFileUpload?: boolean;
-  startInVoiceMode?: boolean;
-  startWithMicMuted?: boolean;
-  holdMicDuringAssistant?: boolean;
-  theme?: Partial<AgentAssistantTheme>;
-  style?: CSSProperties;
-  headerStyle?: CSSProperties;
-  onMessage?: NxtlinqAgentProviderProps['onMessage'];
-  onError?: NxtlinqAgentProviderProps['onError'];
-  onToolUse?: NxtlinqAgentProviderProps['onToolUse'];
-};
-
-export type ToolUse = CoreToolUse;
-export type { Message };