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

package/src/context/AgentAssistantContext.tsx

@@ -0,0 +1,276 @@
+import type { 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,
+      setMessages: agent.setMessages,
+      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,
+  );
+
+  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/index.ts

@@ -0,0 +1,78 @@
+export { NxtlinqAgentChat } from './NxtlinqAgentChat';
+
+export {
+  ChatBot,
+  NxtlinqChatBot,
+  ChatBotProvider,
+  useChatBot,
+  ChatBotUI,
+  MessageInput,
+  MessageList,
+  ModelSelector,
+  NotificationModal,
+  PermissionForm,
+  PresetMessages,
+  BerifyMeModal,
+} from './legacy';
+
+export type {
+  AIModel,
+  AITMetadata,
+  ChatBotContextType,
+  ChatBotProps,
+  NovaError,
+  NovaResponse,
+  ToolCall,
+} from './legacy';
+
+export type {
+  NxtlinqAgentChatProps,
+  AgentAssistantTheme,
+  PresetMessage,
+  Message,
+  ToolUse,
+} from './types';
+
+export { defaultAgentAssistantTheme } from './theme/defaultTheme';
+
+export {
+  AgentAssistantProvider,
+  useAgentAssistant,
+  voiceStatusLabel,
+  type AgentAssistantContextValue,
+  type InteractionMode,
+} from './context/AgentAssistantContext';
+
+export { AgentMessageList } from './components/AgentMessageList';
+export { AgentComposer } from './components/AgentComposer';
+export { AgentVoiceBar } from './components/AgentVoiceBar';
+export { AgentRemoteAudio } from './components/AgentRemoteAudio';
+export { PresetMessageChips } from './components/PresetMessageChips';
+export { AgentAssistantShell } from './components/AgentAssistantShell';
+
+export {
+  NxtlinqAgentProvider,
+  useNxtlinqAgent,
+  useNxtlinqVoice,
+  createNxtlinqAgentWeb,
+  fileToAttachment,
+  type NxtlinqAgentProviderProps,
+} from '@bytexbyte/nxtlinq-ai-agent-web-development';
+
+export type {
+  AgentEnvironment,
+  AgentConfig,
+  Attachment,
+  AgentResponse,
+  SendMessageOptions,
+  NxtlinqAgentSnapshot,
+  VoiceSession,
+  VoiceStatus,
+} from '@bytexbyte/nxtlinq-ai-agent-core-development';
+
+export {
+  NxtlinqAgent,
+  setApiHosts,
+  VoiceNotSupportedError,
+  STORAGE_KEYS,
+} from '@bytexbyte/nxtlinq-ai-agent-core-development';