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

package/dist/NxtlinqAgentChat.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { NxtlinqAgentChatProps } from './types';
+/**
+ * Drop-in React Web assistant UI wired to `@bytexbyte/nxtlinq-ai-agent-web-development`.
+ *
+ * @example
+ * ```tsx
+ * import { NxtlinqAgentChat } from '@bytexbyte/nxtlinq-ai-agent-ui-react-development';
+ *
+ * export default function Page() {
+ *   return (
+ *     <NxtlinqAgentChat
+ *       style={{ height: '100vh' }}
+ *       serviceId="..."
+ *       apiKey="..."
+ *       apiSecret="..."
+ *       environment="staging"
+ *       pseudoId={userId}
+ *       loadHistoryOnMount
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function NxtlinqAgentChat({ title, placeholder, presetMessages, loadHistoryOnMount, historyLast, enableVoice, enableFileUpload, startInVoiceMode, startWithMicMuted, holdMicDuringAssistant, theme, style, headerStyle, onMessage, onError, onToolUse, children, fetchImpl, getTimezone, resetOnIdentityChange, ...agentConfig }: NxtlinqAgentChatProps): React.ReactElement;
+//# sourceMappingURL=NxtlinqAgentChat.d.ts.map

package/dist/NxtlinqAgentChat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NxtlinqAgentChat.d.ts","sourceRoot":"","sources":["../src/NxtlinqAgentChat.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,cAAc,EACd,kBAA0B,EAC1B,WAAW,EACX,WAAkB,EAClB,gBAAuB,EACvB,gBAAwB,EACxB,iBAAwB,EACxB,sBAA6B,EAC7B,KAAK,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,WAAW,EACX,qBAAqB,EACrB,GAAG,WAAW,EACf,EAAE,qBAAqB,GAAG,KAAK,CAAC,YAAY,CA6B5C"}

package/dist/NxtlinqAgentChat.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { NxtlinqAgentProvider } from '@bytexbyte/nxtlinq-ai-agent-web-development';
+import { AgentAssistantShell } from './components/AgentAssistantShell';
+/**
+ * Drop-in React Web assistant UI wired to `@bytexbyte/nxtlinq-ai-agent-web-development`.
+ *
+ * @example
+ * ```tsx
+ * import { NxtlinqAgentChat } from '@bytexbyte/nxtlinq-ai-agent-ui-react-development';
+ *
+ * export default function Page() {
+ *   return (
+ *     <NxtlinqAgentChat
+ *       style={{ height: '100vh' }}
+ *       serviceId="..."
+ *       apiKey="..."
+ *       apiSecret="..."
+ *       environment="staging"
+ *       pseudoId={userId}
+ *       loadHistoryOnMount
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function NxtlinqAgentChat({ title, placeholder, presetMessages, loadHistoryOnMount = false, historyLast, enableVoice = true, enableFileUpload = true, startInVoiceMode = false, startWithMicMuted = true, holdMicDuringAssistant = true, theme, style, headerStyle, onMessage, onError, onToolUse, children, fetchImpl, getTimezone, resetOnIdentityChange, ...agentConfig }) {
+    return (_jsxs(NxtlinqAgentProvider, { fetchImpl: fetchImpl, getTimezone: getTimezone, resetOnIdentityChange: resetOnIdentityChange, onMessage: onMessage, onError: onError, onToolUse: onToolUse, ...agentConfig, children: [_jsx(AgentAssistantShell, { title: title, placeholder: placeholder, presetMessages: presetMessages, loadHistoryOnMount: loadHistoryOnMount, historyLast: historyLast, enableVoice: enableVoice, enableFileUpload: enableFileUpload, startInVoiceMode: startInVoiceMode, startWithMicMuted: startWithMicMuted, holdMicDuringAssistant: holdMicDuringAssistant, theme: theme, style: style, headerStyle: headerStyle }), children] }));
+}

package/dist/components/AgentAssistantShell.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { NxtlinqAgentChatProps } from '../types';
+export type AgentAssistantShellProps = Pick<NxtlinqAgentChatProps, 'title' | 'placeholder' | 'presetMessages' | 'enableVoice' | 'enableFileUpload' | 'theme' | 'style' | 'headerStyle' | 'loadHistoryOnMount' | 'historyLast' | 'startInVoiceMode' | 'startWithMicMuted' | 'holdMicDuringAssistant'>;
+export declare function AgentAssistantShell(props: AgentAssistantShellProps): React.ReactElement;
+//# sourceMappingURL=AgentAssistantShell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentAssistantShell.d.ts","sourceRoot":"","sources":["../../src/components/AgentAssistantShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAOtD,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,qBAAqB,EACnB,OAAO,GACP,aAAa,GACb,gBAAgB,GAChB,aAAa,GACb,kBAAkB,GAClB,OAAO,GACP,OAAO,GACP,aAAa,GACb,oBAAoB,GACpB,aAAa,GACb,kBAAkB,GAClB,mBAAmB,GACnB,wBAAwB,CAC3B,CAAC;AA2DF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,CAiBvF"}

package/dist/components/AgentAssistantShell.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { AgentAssistantProvider, useAgentAssistant, } from '../context/AgentAssistantContext';
+import { AgentComposer } from './AgentComposer';
+import { AgentMessageList } from './AgentMessageList';
+import { AgentRemoteAudio } from './AgentRemoteAudio';
+import { AgentVoiceBar } from './AgentVoiceBar';
+import { PresetMessageChips } from './PresetMessageChips';
+function AgentAssistantInner({ title, headerStyle, style, loadHistoryOnMount, historyLast, startInVoiceMode, }) {
+    const { theme, loadHistory, startVoice, isVoiceAvailable } = useAgentAssistant();
+    const [historyReady, setHistoryReady] = useState(!loadHistoryOnMount);
+    const voiceAutoStartRef = useRef(false);
+    useEffect(() => {
+        if (loadHistoryOnMount) {
+            void loadHistory({ last: historyLast ?? 50 }).finally(() => setHistoryReady(true));
+        }
+    }, [loadHistory, loadHistoryOnMount, historyLast]);
+    useEffect(() => {
+        if (!startInVoiceMode || !isVoiceAvailable || voiceAutoStartRef.current)
+            return;
+        voiceAutoStartRef.current = true;
+        void startVoice();
+    }, [startInVoiceMode, isVoiceAvailable, startVoice]);
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+            minHeight: 0,
+            backgroundColor: theme.colors.background,
+            ...style,
+        }, children: [_jsx("header", { style: {
+                    padding: theme.spacing.md,
+                    borderBottom: `1px solid ${theme.colors.border}`,
+                    backgroundColor: theme.colors.surface,
+                    fontSize: theme.typography.titleSize,
+                    fontWeight: 600,
+                    color: theme.colors.assistantText,
+                    ...headerStyle,
+                }, children: title ?? 'AI Assistant' }), _jsx(PresetMessageChips, {}), historyReady ? _jsx(AgentMessageList, {}) : _jsx("div", { style: { flex: 1 } }), _jsx(AgentVoiceBar, {}), _jsx(AgentComposer, {}), _jsx(AgentRemoteAudio, {})] }));
+}
+export function AgentAssistantShell(props) {
+    return (_jsx(AgentAssistantProvider, { ui: {
+            title: props.title,
+            placeholder: props.placeholder,
+            presetMessages: props.presetMessages,
+            enableVoice: props.enableVoice,
+            enableFileUpload: props.enableFileUpload,
+            theme: props.theme,
+            startWithMicMuted: props.startWithMicMuted,
+            holdMicDuringAssistant: props.holdMicDuringAssistant,
+        }, children: _jsx(AgentAssistantInner, { ...props }) }));
+}

package/dist/components/AgentComposer.d.ts

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

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

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

package/dist/components/AgentComposer.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import React from 'react';
+import { useAgentAssistant } from '../context/AgentAssistantContext';
+export function AgentComposer() {
+    const { theme, placeholder, inputText, setInputText, sendText, isLoading, isVoiceAvailable, interactionMode, startVoice, isVoiceConnecting, enableFileUpload, sendMessage, } = useAgentAssistant();
+    const fileInputRef = React.useRef(null);
+    if (interactionMode === 'voice') {
+        return null;
+    }
+    const handleFiles = async (files) => {
+        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 (_jsxs("div", { style: {
+            borderTop: `1px solid ${theme.colors.border}`,
+            backgroundColor: theme.colors.surface,
+            padding: theme.spacing.md,
+        }, children: [_jsxs("div", { style: { display: 'flex', gap: theme.spacing.sm, alignItems: 'flex-end' }, children: [enableFileUpload ? (_jsxs(_Fragment, { children: [_jsx("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", children: "+" }), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: "image/*,.pdf,.doc,.docx,.txt", style: { display: 'none' }, onChange: (e) => void handleFiles(e.target.files) })] })) : null, _jsx("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,
+                        } }), _jsx("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',
+                        }, children: "Send" })] }), isVoiceAvailable ? (_jsx("button", { type: "button", onClick: () => {
+                    startVoice().catch((err) => {
+                        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',
+                }, children: isVoiceConnecting ? 'Connecting voice…' : 'Switch to voice mode' })) : null] }));
+}

package/dist/components/AgentMessageList.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentMessageList.d.ts","sourceRoot":"","sources":["../../src/components/AgentMessageList.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAyCjD,wBAAgB,gBAAgB,IAAI,KAAK,CAAC,YAAY,CAmCrD"}

package/dist/components/AgentMessageList.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { useAgentAssistant } from '../context/AgentAssistantContext';
+function MessageBubble({ message }) {
+    const { theme } = useAgentAssistant();
+    const isUser = message.role === 'user';
+    const displayText = message.partialContent && message.isStreaming
+        ? message.partialContent
+        : message.content;
+    return (_jsx("div", { style: {
+            display: 'flex',
+            justifyContent: isUser ? 'flex-end' : 'flex-start',
+            marginBottom: theme.spacing.sm,
+        }, children: _jsxs("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',
+            }, children: [displayText || ' ', message.error ? (_jsx("div", { style: { color: theme.colors.error, fontSize: theme.typography.captionSize }, children: message.error })) : null] }) }));
+}
+export function AgentMessageList() {
+    const { messages, isLoading, theme } = useAgentAssistant();
+    const endRef = useRef(null);
+    useEffect(() => {
+        endRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [messages.length, messages[messages.length - 1]?.content, messages[messages.length - 1]?.partialContent]);
+    return (_jsxs("div", { style: {
+            flex: 1,
+            minHeight: 0,
+            overflowY: 'auto',
+            padding: theme.spacing.md,
+            backgroundColor: theme.colors.background,
+        }, children: [messages.length === 0 ? (_jsx("p", { style: { textAlign: 'center', color: theme.colors.mutedText, marginTop: 40 }, children: "Send a message to start the conversation." })) : (messages.map((message) => (_jsx(MessageBubble, { message: message }, message.id)))), isLoading ? (_jsx("p", { style: { color: theme.colors.mutedText, fontSize: theme.typography.captionSize }, children: "Thinking\u2026" })) : null, _jsx("div", { ref: endRef })] }));
+}

package/dist/components/AgentRemoteAudio.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+/** Plays assistant WebRTC remote audio with retry until stream is ready. */
+export declare function AgentRemoteAudio(): React.ReactElement | null;
+//# sourceMappingURL=AgentRemoteAudio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentRemoteAudio.d.ts","sourceRoot":"","sources":["../../src/components/AgentRemoteAudio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,4EAA4E;AAC5E,wBAAgB,gBAAgB,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI,CA6B5D"}

package/dist/components/AgentRemoteAudio.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { useAgentAssistant } from '../context/AgentAssistantContext';
+/** Plays assistant WebRTC remote audio with retry until stream is ready. */
+export function AgentRemoteAudio() {
+    const { getRemoteAudioStream, isVoiceActive, isVoiceChannelReady } = useAgentAssistant();
+    const audioRef = useRef(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 _jsx("audio", { ref: audioRef, autoPlay: true, playsInline: true, style: { display: 'none' } });
+}

package/dist/components/AgentVoiceBar.d.ts

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

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

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

package/dist/components/AgentVoiceBar.js

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentAssistantContext.d.ts","sourceRoot":"","sources":["../../src/context/AgentAssistantContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8CAA8C,CAAC;AAChF,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,CA4LlD;AAED,wBAAgB,iBAAiB,IAAI,0BAA0B,CAQ9D;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAU5D"}

package/dist/context/AgentAssistantContext.js

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

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+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';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EACL,OAAO,EACP,cAAc,EACd,eAAe,EACf,UAAU,EACV,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,aAAa,GACd,MAAM,UAAU,CAAC;AAElB,YAAY,EACV,OAAO,EACP,WAAW,EACX,kBAAkB,EAClB,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,QAAQ,GACT,MAAM,UAAU,CAAC;AAElB,YAAY,EACV,qBAAqB,EACrB,mBAAmB,EACnB,aAAa,EACb,OAAO,EACP,OAAO,GACR,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EAChB,KAAK,0BAA0B,EAC/B,KAAK,eAAe,GACrB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,eAAe,EACf,qBAAqB,EACrB,gBAAgB,EAChB,KAAK,yBAAyB,GAC/B,MAAM,6CAA6C,CAAC;AAErD,YAAY,EACV,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,oBAAoB,EACpB,YAAY,EACZ,WAAW,GACZ,MAAM,8CAA8C,CAAC;AAEtD,OAAO,EACL,YAAY,EACZ,WAAW,EACX,sBAAsB,EACtB,YAAY,GACb,MAAM,8CAA8C,CAAC"}