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

package/dist/ui/VoiceModePanel.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import MicIcon from '@mui/icons-material/Mic';
+import MicOffIcon from '@mui/icons-material/MicOff';
+import StopIcon from '@mui/icons-material/Stop';
+import { IconButton, Tooltip } from '@mui/material';
+import { useChatBot } from '../context/ChatBotContext';
+const STATUS_LABELS = {
+    idle: 'Idle',
+    listening: 'Listening',
+    transcribing: 'Transcribing',
+    thinking: 'Thinking',
+    generating: 'Generating',
+    speaking: 'Speaking',
+};
+const ASSISTANT_MIC_HOLD_STATUSES = new Set([
+    'transcribing',
+    'thinking',
+    'generating',
+    'speaking',
+]);
+const statusDotColor = {
+    idle: '#6b7280',
+    listening: '#22c55e',
+    transcribing: '#eab308',
+    thinking: '#3b82f6',
+    generating: '#8b5cf6',
+    speaking: '#ec4899',
+};
+const STATUS_HINTS = {
+    listening: 'Start speaking',
+    transcribing: 'Processing your speech…',
+    thinking: 'Thinking…',
+    generating: 'Assistant is responding…',
+    speaking: 'Assistant is speaking…',
+};
+export const VoiceModePanel = () => {
+    const { voiceStatus, isVoiceConnecting, isMicMuted, remoteAudioRef, toggleVoiceMicMute, interruptVoice, } = useChatBot();
+    const isMicHeldForAssistant = ASSISTANT_MIC_HOLD_STATUSES.has(voiceStatus);
+    const statusHint = isVoiceConnecting
+        ? 'Connecting… use Text Mode above to cancel'
+        : isMicMuted && !isMicHeldForAssistant
+            ? 'Mic is off — tap the mic button when ready to speak'
+            : STATUS_HINTS[voiceStatus] ?? '';
+    return (_jsxs(_Fragment, { children: [_jsx("audio", { ref: remoteAudioRef, autoPlay: true, playsInline: true, css: css `display: none !important;` }), _jsxs("div", { css: css `
+          padding: 10px 15px !important;
+          border-top: 1px solid #eee !important;
+          background: linear-gradient(180deg, #f8fafc 0%, #fff 100%) !important;
+          display: flex !important;
+          align-items: center !important;
+          justify-content: space-between !important;
+          gap: 10px !important;
+        `, children: [_jsxs("div", { css: css `
+            min-width: 0 !important;
+            flex: 1 !important;
+            height: 32px !important;
+            padding: 0 10px !important;
+            border-radius: 999px !important;
+            border: 1px solid #e5e7eb !important;
+            background: #f9fafb !important;
+            display: flex !important;
+            align-items: center !important;
+            gap: 8px !important;
+            color: #374151 !important;
+            font-size: 12px !important;
+            line-height: 1 !important;
+          `, children: [_jsx("span", { css: css `
+              flex: 0 0 auto !important;
+              width: 8px !important;
+              height: 8px !important;
+              border-radius: 50% !important;
+              background: ${statusDotColor[voiceStatus]} !important;
+              ${voiceStatus === 'listening' || voiceStatus === 'thinking' || voiceStatus === 'speaking'
+                                    ? 'animation: voicePulse 1.2s infinite !important;'
+                                    : ''}
+            ` }), _jsx("span", { css: css `flex: 0 0 auto !important; font-weight: 600 !important;`, children: isVoiceConnecting ? 'Connecting' : STATUS_LABELS[voiceStatus] }), statusHint ? (_jsx("span", { css: css `
+                min-width: 0 !important;
+                overflow: hidden !important;
+                text-overflow: ellipsis !important;
+                white-space: nowrap !important;
+                color: #6b7280 !important;
+              `, children: statusHint })) : null] }), _jsxs("div", { css: css `display: flex !important; gap: 4px !important;`, children: [_jsx(Tooltip, { title: isVoiceConnecting
+                                    ? 'Available after connection'
+                                    : isMicHeldForAssistant
+                                        ? 'Mic paused while assistant responds (use Interrupt to speak)'
+                                        : isMicMuted
+                                            ? 'Turn on mic'
+                                            : 'Turn off mic', children: _jsx("span", { children: _jsx(IconButton, { onClick: toggleVoiceMicMute, disabled: voiceStatus !== 'listening' || isVoiceConnecting || isMicHeldForAssistant, size: "small", css: css `color: ${isMicMuted ? '#ef4444' : '#4b5563'} !important;`, children: isMicMuted ? _jsx(MicOffIcon, {}) : _jsx(MicIcon, {}) }) }) }), _jsx(Tooltip, { title: "Interrupt (barge in)", children: _jsx("span", { children: _jsx(IconButton, { onClick: interruptVoice, disabled: isVoiceConnecting, size: "small", css: css `color: #4b5563 !important;`, children: _jsx(StopIcon, {}) }) }) })] })] }), _jsx("style", { children: `
+        @keyframes voicePulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.35; }
+        }
+      ` })] }));
+};

package/dist/ui/chatBotHeaderParts.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export declare const DRAG_CORNER_EXCLUSION_PX = 20;
+export declare const piiBadgeStyles: import("@emotion/utils").SerializedStyles;
+export declare const PiiBadge: React.FC;
+type HeaderActionsProps = {
+    isVoiceMode: boolean;
+    isVoiceConnecting: boolean;
+    onVoiceToggle: () => void;
+    onSettingsClick: () => void;
+    onClose: () => void;
+};
+export declare const HeaderActions: React.FC<HeaderActionsProps>;
+export declare const HeaderLoadingIndicator: React.FC;
+export {};
+//# sourceMappingURL=chatBotHeaderParts.d.ts.map

package/dist/ui/chatBotHeaderParts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatBotHeaderParts.d.ts","sourceRoot":"","sources":["../../src/ui/chatBotHeaderParts.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAa3C,eAAO,MAAM,cAAc,2CAc1B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAU5B,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA8CtD,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAW1C,CAAC"}

package/dist/ui/chatBotHeaderParts.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import GraphicEqIcon from '@mui/icons-material/GraphicEq';
+import { closeButton, headerButton, loadingSpinner } from './styles/isolatedStyles';
+export const DRAG_CORNER_EXCLUSION_PX = 20;
+const voiceButtonStyles = css `
+  width: auto !important;
+  min-width: 82px !important;
+  padding: 0 10px !important;
+  gap: 6px !important;
+  font-size: 12px !important;
+  font-weight: 600 !important;
+  line-height: 1 !important;
+  white-space: nowrap !important;
+`;
+export const piiBadgeStyles = css `
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 4px !important;
+  padding: 2px 8px !important;
+  background-color: rgba(255, 255, 255, 0.2) !important;
+  border: 1px solid rgba(255, 255, 255, 0.4) !important;
+  border-radius: 10px !important;
+  font-size: 10px !important;
+  font-weight: 600 !important;
+  color: #ffffff !important;
+  white-space: nowrap !important;
+  line-height: 1.4 !important;
+  user-select: none !important;
+`;
+export const PiiBadge = () => (_jsxs("div", { css: piiBadgeStyles, title: "PII Protection is active \u2014 sensitive data is automatically anonymized before sending to AI", children: [_jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "#ffffff", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z" }) }), "PII Protected"] }));
+export const HeaderActions = ({ isVoiceMode, isVoiceConnecting, onVoiceToggle, onSettingsClick, onClose, }) => (_jsxs("div", { css: css `
+    display: flex !important;
+    align-items: center !important;
+    gap: 10px !important;
+    flex-shrink: 0 !important;
+    pointer-events: auto !important;
+  `, children: [_jsxs("button", { onClick: onVoiceToggle, css: [headerButton, voiceButtonStyles], title: isVoiceConnecting
+                ? 'Cancel voice connection and return to text mode'
+                : isVoiceMode
+                    ? 'Switch to text mode'
+                    : 'Switch to voice mode', onPointerDown: (e) => e.stopPropagation(), children: [_jsx(GraphicEqIcon, { css: css `font-size: 16px !important; color: #fff !important;` }), (isVoiceMode || isVoiceConnecting) ? 'Text Mode' : 'Voice Mode'] }), _jsx("button", { onClick: onSettingsClick, css: headerButton, title: "AIT Settings", onPointerDown: (e) => e.stopPropagation(), children: "\u2699\uFE0F" }), _jsx("button", { onClick: onClose, css: closeButton, onPointerDown: (e) => e.stopPropagation(), title: "Minimize", children: "\u2212" })] }));
+export const HeaderLoadingIndicator = () => (_jsxs("div", { css: css `
+    display: flex !important;
+    align-items: center !important;
+    gap: 5px !important;
+    font-size: 12px !important;
+    opacity: 0.8 !important;
+  `, children: [_jsx("div", { css: loadingSpinner }), "Loading..."] }));

package/dist/ui/index.d.ts

@@ -0,0 +1,9 @@
+export { ChatBotUI } from './ChatBotUI';
+export { MessageInput } from './MessageInput';
+export { MessageList } from './MessageList';
+export { ModelSelector } from './ModelSelector';
+export { NotificationModal } from './NotificationModal';
+export { PermissionForm } from './PermissionForm';
+export { PresetMessages } from './PresetMessages';
+export { BerifyMeModal } from './BerifyMeModal';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/ui/index.js

@@ -0,0 +1,8 @@
+export { ChatBotUI } from './ChatBotUI';
+export { MessageInput } from './MessageInput';
+export { MessageList } from './MessageList';
+export { ModelSelector } from './ModelSelector';
+export { NotificationModal } from './NotificationModal';
+export { PermissionForm } from './PermissionForm';
+export { PresetMessages } from './PresetMessages';
+export { BerifyMeModal } from './BerifyMeModal';

package/dist/ui/styles/isolatedStyles.d.ts

@@ -0,0 +1,73 @@
+export declare const sdkReset: import("@emotion/utils").SerializedStyles;
+export declare const sdkContainer: import("@emotion/utils").SerializedStyles;
+export declare const floatingButton: import("@emotion/utils").SerializedStyles;
+export declare const chatWindow: import("@emotion/utils").SerializedStyles;
+/** @deprecated Use resizeHandleNW — kept for compatibility */
+export declare const resizeHandle: import("@emotion/utils").SerializedStyles;
+export declare const resizeHandleNW: import("@emotion/utils").SerializedStyles;
+export declare const resizeHandleNE: import("@emotion/utils").SerializedStyles;
+export declare const resizeHandleSW: import("@emotion/utils").SerializedStyles;
+export declare const resizeHandleSE: import("@emotion/utils").SerializedStyles;
+export declare const chatHeader: import("@emotion/utils").SerializedStyles;
+export declare const headerTitle: import("@emotion/utils").SerializedStyles;
+export declare const headerButton: import("@emotion/utils").SerializedStyles;
+export declare const closeButton: import("@emotion/utils").SerializedStyles;
+export declare const messageListContainer: import("@emotion/utils").SerializedStyles;
+export declare const messageBubble: import("@emotion/utils").SerializedStyles;
+export declare const userMessage: import("@emotion/utils").SerializedStyles;
+export declare const messageContent: import("@emotion/utils").SerializedStyles;
+export declare const userMessageContent: import("@emotion/utils").SerializedStyles;
+export declare const retryMessageContent: import("@emotion/utils").SerializedStyles;
+export declare const chatbotButton: import("@emotion/utils").SerializedStyles;
+export declare const actionButton: import("@emotion/utils").SerializedStyles;
+export declare const connectedButton: import("@emotion/utils").SerializedStyles;
+export declare const loadingIndicator: import("@emotion/utils").SerializedStyles;
+export declare const modelIndicator: import("@emotion/utils").SerializedStyles;
+export declare const modelBadge: import("@emotion/utils").SerializedStyles;
+export declare const modelDot: import("@emotion/utils").SerializedStyles;
+export declare const toastNotification: import("@emotion/utils").SerializedStyles;
+export declare const successToast: import("@emotion/utils").SerializedStyles;
+export declare const errorToast: import("@emotion/utils").SerializedStyles;
+export declare const warningToast: import("@emotion/utils").SerializedStyles;
+export declare const infoToast: import("@emotion/utils").SerializedStyles;
+export declare const toastCloseButton: import("@emotion/utils").SerializedStyles;
+export declare const modalOverlay: import("@emotion/utils").SerializedStyles;
+export declare const idvBanner: import("@emotion/utils").SerializedStyles;
+export declare const idvBannerTitle: import("@emotion/utils").SerializedStyles;
+export declare const idvBannerText: import("@emotion/utils").SerializedStyles;
+export declare const idvVerifyButton: import("@emotion/utils").SerializedStyles;
+export declare const idvDismissButton: import("@emotion/utils").SerializedStyles;
+export declare const loadingSpinner: import("@emotion/utils").SerializedStyles;
+export declare const streamingPartialText: import("@emotion/utils").SerializedStyles;
+export declare const streamingContainer: import("@emotion/utils").SerializedStyles;
+export declare const streamingHeader: import("@emotion/utils").SerializedStyles;
+export declare const streamingIcon: import("@emotion/utils").SerializedStyles;
+export declare const streamingToolName: import("@emotion/utils").SerializedStyles;
+export declare const streamingProgressPercent: import("@emotion/utils").SerializedStyles;
+export declare const streamingProgressContainer: import("@emotion/utils").SerializedStyles;
+export declare const streamingProgressBar: import("@emotion/utils").SerializedStyles;
+export declare const streamingStatus: import("@emotion/utils").SerializedStyles;
+export declare const streamingCaret: import("@emotion/utils").SerializedStyles;
+export declare const streamingStepsContainer: import("@emotion/utils").SerializedStyles;
+export declare const streamingStepItem: import("@emotion/utils").SerializedStyles;
+export declare const streamingStepCheck: import("@emotion/utils").SerializedStyles;
+export declare const piiStepperContainer: import("@emotion/utils").SerializedStyles;
+export declare const piiStepArrow: import("@emotion/utils").SerializedStyles;
+export declare const piiStepBase: import("@emotion/utils").SerializedStyles;
+export declare const piiStepActiveStyle: import("@emotion/utils").SerializedStyles;
+export declare const piiStepDoneStyle: import("@emotion/utils").SerializedStyles;
+export declare const piiStepPendingStyle: import("@emotion/utils").SerializedStyles;
+export declare const piiBadgeContainer: import("@emotion/utils").SerializedStyles;
+export declare const piiBadgeButton: import("@emotion/utils").SerializedStyles;
+export declare const piiDetailPanel: import("@emotion/utils").SerializedStyles;
+export declare const piiMiniPipeline: import("@emotion/utils").SerializedStyles;
+export declare const piiMappingTable: import("@emotion/utils").SerializedStyles;
+export declare const piiMappingRow: import("@emotion/utils").SerializedStyles;
+export declare const piiMappingOriginal: import("@emotion/utils").SerializedStyles;
+export declare const piiMappingToken: import("@emotion/utils").SerializedStyles;
+export declare const piiNoPiiIndicator: import("@emotion/utils").SerializedStyles;
+export declare const piiScanningShimmer: import("@emotion/utils").SerializedStyles;
+export declare const piiContentSwapIn: import("@emotion/utils").SerializedStyles;
+export declare const piiContentStatic: import("@emotion/utils").SerializedStyles;
+export declare const piiTokenReveal: import("@emotion/utils").SerializedStyles;
+//# sourceMappingURL=isolatedStyles.d.ts.map

package/dist/ui/styles/isolatedStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isolatedStyles.d.ts","sourceRoot":"","sources":["../../../src/ui/styles/isolatedStyles.ts"],"names":[],"mappings":"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"}