@bytexbyte/nxtlinq-ai-agent-ui-react-development 0.4.0 → 0.4.1

package/dist/components/AgentVoiceBar.js

@@ -1,91 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useCallback } from 'react';
-import { useAgentAssistant, voiceStatusLabel, } from '../context/AgentAssistantContext';
-function statusDotColor(status, theme) {
-    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 }) {
-    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: color, "aria-hidden": true, children: _jsx("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" }) }));
-}
-function MicOffIcon() {
-    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "#ef4444", "aria-hidden": true, children: _jsx("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" }) }));
-}
-export function AgentVoiceBar() {
-    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 (_jsxs("div", { style: {
-            borderTop: `1px solid ${theme.colors.border}`,
-            backgroundColor: theme.colors.surface,
-            padding: theme.spacing.md,
-        }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 10 }, children: [_jsxs("div", { style: {
-                            flex: 1,
-                            minWidth: 0,
-                            border: `1px solid ${theme.colors.border}`,
-                            borderRadius: 12,
-                            backgroundColor: theme.colors.background,
-                            padding: '8px 10px',
-                        }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [_jsx("span", { style: {
-                                            width: 8,
-                                            height: 8,
-                                            borderRadius: 4,
-                                            backgroundColor: statusDotColor(voiceStatus, theme),
-                                            flexShrink: 0,
-                                        } }), _jsx("span", { style: {
-                                            color: theme.colors.assistantText,
-                                            fontSize: theme.typography.captionSize,
-                                            fontWeight: 600,
-                                        }, children: showConnecting || awaitingChannel ? 'Connecting' : voiceStatusLabel(voiceStatus) }), showConnecting ? (_jsx("span", { style: { color: theme.colors.mutedText, fontSize: theme.typography.captionSize }, children: "\u2026" })) : null] }), statusHint ? (_jsx("p", { style: {
-                                    margin: '4px 0 0',
-                                    color: theme.colors.mutedText,
-                                    fontSize: theme.typography.captionSize - 1,
-                                }, children: statusHint })) : null] }), _jsx("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', children: isMicMuted ? _jsx(MicOffIcon, {}) : _jsx(MicIcon, { color: theme.colors.assistantText }) })] }), _jsx("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',
-                }, children: "Back to text mode" })] }));
-}

package/dist/components/PresetMessageChips.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare function PresetMessageChips(): React.ReactElement | null;
-//# sourceMappingURL=PresetMessageChips.d.ts.map

package/dist/components/PresetMessageChips.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PresetMessageChips.d.ts","sourceRoot":"","sources":["../../src/components/PresetMessageChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,wBAAgB,kBAAkB,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI,CAoC9D"}

package/dist/components/PresetMessageChips.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useAgentAssistant } from '../context/AgentAssistantContext';
-export function PresetMessageChips() {
-    const { presetMessages, selectPreset, theme, interactionMode } = useAgentAssistant();
-    if (!presetMessages.length || interactionMode === 'voice') {
-        return null;
-    }
-    return (_jsx("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}`,
-        }, children: presetMessages.map((preset, index) => (_jsx("button", { 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',
-            }, children: preset.text }, `${preset.text}-${index}`))) }));
-}

package/dist/context/AgentAssistantContext.d.ts

@@ -1,32 +0,0 @@
-import type { VoiceStatus } from '@bytexbyte/nxtlinq-ai-agent-core-development';
-import { type UseNxtlinqAgentResult, type UseNxtlinqVoiceResult } from '@bytexbyte/nxtlinq-ai-agent-web-development';
-import React, { type ReactNode } from 'react';
-import type { AgentAssistantTheme, NxtlinqAgentChatProps, PresetMessage } from '../types';
-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>;
-};
-export type AgentAssistantProviderProps = {
-    children: ReactNode;
-    ui: Pick<NxtlinqAgentChatProps, 'title' | 'placeholder' | 'presetMessages' | 'enableVoice' | 'enableFileUpload' | 'theme' | 'startWithMicMuted' | 'holdMicDuringAssistant'>;
-};
-export declare function AgentAssistantProvider({ children, ui, }: AgentAssistantProviderProps): React.ReactElement;
-export declare function useAgentAssistant(): AgentAssistantContextValue;
-export declare function voiceStatusLabel(status: VoiceStatus): string;
-//# sourceMappingURL=AgentAssistantContext.d.ts.map

package/dist/context/AgentAssistantContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AgentAssistantContext.d.ts","sourceRoot":"","sources":["../../src/context/AgentAssistantContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAW,WAAW,EAAE,MAAM,8CAA8C,CAAC;AACzF,OAAO,EAGL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC3B,MAAM,6CAA6C,CAAC;AACrD,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAK1F,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,0BAA0B,GAAG,qBAAqB,GAC5D,qBAAqB,GAAG;IACxB,KAAK,EAAE,mBAAmB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,kBAAkB,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,YAAY,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACxD,CAAC;AAIF,MAAM,MAAM,2BAA2B,GAAG;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,EAAE,IAAI,CACN,qBAAqB,EACnB,OAAO,GACP,aAAa,GACb,gBAAgB,GAChB,aAAa,GACb,kBAAkB,GAClB,OAAO,GACP,mBAAmB,GACnB,wBAAwB,CAC3B,CAAC;CACH,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,EAAE,GACH,EAAE,2BAA2B,GAAG,KAAK,CAAC,YAAY,CA8MlD;AAED,wBAAgB,iBAAiB,IAAI,0BAA0B,CAQ9D;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAU5D"}

package/dist/context/AgentAssistantContext.js

@@ -1,179 +0,0 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useNxtlinqAgent, useNxtlinqVoice, } from '@bytexbyte/nxtlinq-ai-agent-web-development';
-import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
-import { defaultAgentAssistantTheme } from '../theme/defaultTheme';
-import { useVoiceConnectOrchestration } from '../voice/useVoiceConnectOrchestration';
-import { useVoiceMicState } from '../voice/useVoiceMicState';
-import { useVoiceTranscriptMessages } from '../voice/useVoiceTranscriptMessages';
-const AgentAssistantContext = createContext(null);
-export function AgentAssistantProvider({ children, ui, }) {
-    const agent = useNxtlinqAgent();
-    const voice = useNxtlinqVoice();
-    const [interactionMode, setInteractionModeState] = useState('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) => {
-            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) => {
-        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) => {
-        if (preset.autoSend) {
-            await agent.sendMessage(preset.text);
-        }
-        else {
-            setInputText(preset.text);
-        }
-    }, [agent]);
-    const value = useMemo(() => ({
-        ...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 (_jsx(AgentAssistantContext.Provider, { value: value, children: children }));
-}
-export function useAgentAssistant() {
-    const ctx = useContext(AgentAssistantContext);
-    if (!ctx) {
-        throw new Error('useAgentAssistant must be used within <NxtlinqAgentChat> or <AgentAssistantProvider>');
-    }
-    return ctx;
-}
-export function voiceStatusLabel(status) {
-    const labels = {
-        idle: 'Ready',
-        listening: 'Listening',
-        transcribing: 'Transcribing',
-        thinking: 'Thinking',
-        generating: 'Generating',
-        speaking: 'Speaking',
-    };
-    return labels[status] ?? status;
-}