@bytexbyte/nxtlinq-ai-agent-sdk 1.6.29 → 1.6.31

package/dist/components/ui/ChatBotUI.js

@@ -9,7 +9,11 @@ import { MessageInput } from './MessageInput';
 import { PresetMessages } from './PresetMessages';
 import { ModelSelector } from './ModelSelector';
 import * as walletTextUtils from '../../core/utils/walletTextUtils';
+import { useResizable } from '../../core/lib/useResizable';
+import { useDraggable } from '../../core/lib/useDraggable';
+import useLocalStorage from '../../core/lib/useLocalStorage';
 import { sdkContainer, floatingButton, chatWindow, chatHeader, headerTitle, headerButton, closeButton, modalOverlay, idvBanner, idvBannerTitle, idvBannerText, idvVerifyButton, idvDismissButton, loadingSpinner, successToast, errorToast, warningToast, infoToast, toastCloseButton } from './styles/isolatedStyles';
+import { resizeHandle } from './styles/isolatedStyles';
 // Toast Notification Component
 const ToastNotification = ({ type, message, onClose, isChatOpen = false }) => {
     const getToastStyles = () => {
@@ -49,7 +53,20 @@ const ToastNotification = ({ type, message, onClose, isChatOpen = false }) => {
     return (_jsxs("div", { css: getToastStyles(), children: [_jsx("span", { css: css `font-size: 18px !important;`, children: getIcon() }), _jsx("span", { css: css `flex: 1 !important;`, children: message }), _jsx("button", { onClick: onClose, css: toastCloseButton, children: "\u00D7" })] }));
 };
 export const ChatBotUI = () => {
-    const { isOpen, setIsOpen, showPermissionForm, setShowPermissionForm, notification, setNotification, isAITLoading, hitAddress, walletInfo, onVerifyWallet, serviceId, props } = useChatBot();
+    const { isOpen, setIsOpen, showPermissionForm, setShowPermissionForm, notification, setNotification, isAITLoading, hitAddress, walletInfo, onVerifyWallet, serviceId, isNeedSignInWithWallet, props } = useChatBot();
+    const positionRef = React.useRef({ x: 0, y: 0 });
+    const { dimensions, handleResizeStart, positionAdjustment } = useResizable(positionRef);
+    const { position, handleDragStart, isDragging, updatePosition } = useDraggable(dimensions);
+    // Update position ref when position changes
+    React.useEffect(() => {
+        positionRef.current = position;
+    }, [position]);
+    // Update position when resizing to keep bottom-right corner fixed
+    React.useEffect(() => {
+        if (positionAdjustment) {
+            updatePosition(positionAdjustment);
+        }
+    }, [positionAdjustment, updatePosition]);
     // IDV suggestion banner state
     const [showIDVSuggestion, setShowIDVSuggestion] = React.useState(true);
     const [dismissUntil, setDismissUntil] = React.useState(null);
@@ -57,21 +74,21 @@ export const ChatBotUI = () => {
     // Check if there's a berifyme token in URL (indicating recent berifyme verification)
     const urlParams = new URLSearchParams(window.location.search);
     const hasBerifymeToken = urlParams.get('token') && urlParams.get('method') === 'berifyme';
-    // Check if wallet is verified with berifyme
     const isWalletVerifiedWithBerifyme = walletInfo?.id && walletInfo?.method === 'berifyme';
     // Check if IDV suggestion should be shown
     React.useEffect(() => {
-        // Only show suggestion when verification is not required and wallet is not verified with berifyme
         const shouldShowBanner = hitAddress &&
             !props.requireWalletIDVVerification &&
             !hasBerifymeToken &&
-            !isWalletVerifiedWithBerifyme;
+            !isWalletVerifiedWithBerifyme &&
+            !isNeedSignInWithWallet;
         if (shouldShowBanner) {
             const timer = setTimeout(() => {
                 const shouldShowBannerAfterDelay = hitAddress &&
                     !props.requireWalletIDVVerification &&
                     !hasBerifymeToken &&
-                    !isWalletVerifiedWithBerifyme;
+                    !isWalletVerifiedWithBerifyme &&
+                    !isNeedSignInWithWallet;
                 if (shouldShowBannerAfterDelay) {
                     const dismissed = localStorage.getItem('idv-suggestion-dismissed');
                     if (dismissed) {
@@ -95,7 +112,7 @@ export const ChatBotUI = () => {
                                     localStorage.removeItem('idv-suggestion-dismissed');
                                     clearInterval(countdownTimer);
                                 }
-                            }, 60000); // Update every minute
+                            }, 60000);
                             return () => clearInterval(countdownTimer);
                         }
                         else {
@@ -116,8 +133,7 @@ export const ChatBotUI = () => {
                     setDismissUntil(null);
                     setTimeRemaining('');
                 }
-            }, 1000); // 1 second delay
-            // Cleanup timer if component unmounts or dependencies change
+            }, 1000);
             return () => clearTimeout(timer);
         }
         else {
@@ -128,15 +144,13 @@ export const ChatBotUI = () => {
             setDismissUntil(null);
             setTimeRemaining('');
         }
-    }, [hitAddress, walletInfo]);
-    // Handle dismiss IDV suggestion
+    }, [hitAddress, walletInfo, isNeedSignInWithWallet, props.requireWalletIDVVerification]);
     const handleDismissIDV = () => {
-        const dismissSeconds = props.idvBannerDismissSeconds || 86400; // Default 24 hours in seconds
-        const dismissTime = Date.now() + (dismissSeconds * 1000); // Configurable seconds from now
+        const dismissSeconds = props.idvBannerDismissSeconds || 86400;
+        const dismissTime = Date.now() + (dismissSeconds * 1000);
         localStorage.setItem('idv-suggestion-dismissed', dismissTime.toString());
         setShowIDVSuggestion(false);
         setDismissUntil(dismissTime);
-        // Show confirmation message
         const hours = Math.floor(dismissSeconds / 3600);
         const minutes = Math.floor((dismissSeconds % 3600) / 60);
         const timeText = hours > 0
@@ -165,9 +179,35 @@ export const ChatBotUI = () => {
         };
     }, []);
     const handleClose = () => {
+        // When closing window, update button position to align with window's bottom-right corner
+        if (typeof window !== 'undefined') {
+            // Window uses left/top, button uses right/bottom
+            const windowRight = window.innerWidth - (position.x + dimensions.width);
+            const windowBottom = window.innerHeight - (position.y + dimensions.height);
+            const newButtonPosition = clampButtonPosition({ right: windowRight, bottom: windowBottom });
+            setButtonPosition(newButtonPosition);
+            if (hasLoadedButtonPosition.current) {
+                setSavedButtonPosition(newButtonPosition);
+            }
+        }
         setIsOpen(false);
     };
     const handleOpen = () => {
+        // Calculate window position based on button position when opening
+        // Window's bottom-right corner should align with button's position
+        if (typeof window !== 'undefined' && buttonRef.current) {
+            const buttonRect = buttonRef.current.getBoundingClientRect();
+            // Get button's right and bottom values (distance from viewport edges)
+            const buttonRight = window.innerWidth - buttonRect.right;
+            const buttonBottom = window.innerHeight - buttonRect.bottom;
+            // Window uses left/top, button uses right/bottom
+            const windowLeft = window.innerWidth - dimensions.width - buttonRight;
+            const windowTop = window.innerHeight - dimensions.height - buttonBottom;
+            // Clamp to ensure window stays within viewport (use same margin as button)
+            const clampedLeft = Math.max(BUTTON_MARGIN, Math.min(windowLeft, window.innerWidth - dimensions.width - BUTTON_MARGIN));
+            const clampedTop = Math.max(BUTTON_MARGIN, Math.min(windowTop, window.innerHeight - dimensions.height - BUTTON_MARGIN));
+            updatePosition({ x: clampedLeft, y: clampedTop });
+        }
         setIsOpen(true);
     };
     const handleCloseNotification = () => {
@@ -185,11 +225,210 @@ export const ChatBotUI = () => {
     const handleSettingsClick = () => {
         setShowPermissionForm(true);
     };
+    // Constants for button positioning
+    const BUTTON_MARGIN = 20;
+    const BUTTON_MIN_MARGIN = 5;
+    const DRAG_THRESHOLD = 5; // Minimum distance in pixels to distinguish drag from click
+    // Track window size for responsive button positioning and dragging
+    const buttonRef = React.useRef(null);
+    const buttonDragState = React.useRef(null);
+    const [isButtonDragging, setIsButtonDragging] = React.useState(false);
+    const [isButtonDragActive, setIsButtonDragActive] = React.useState(false);
+    const hasLoadedButtonPosition = React.useRef(false);
+    const buttonDragDistance = React.useRef(0);
+    // Track latest button position for saving (to avoid stale closure issues)
+    const latestButtonPositionRef = React.useRef({ right: BUTTON_MARGIN, bottom: BUTTON_MARGIN });
+    // Load saved position synchronously on initialization to avoid position jump
+    const getInitialButtonPosition = () => {
+        if (typeof window === 'undefined') {
+            return { right: BUTTON_MARGIN, bottom: BUTTON_MARGIN };
+        }
+        try {
+            const saved = localStorage.getItem('ai-agent-button-position');
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                if (parsed && typeof parsed.right === 'number' && typeof parsed.bottom === 'number') {
+                    return parsed;
+                }
+            }
+        }
+        catch (e) {
+            // Ignore parse errors, use default
+        }
+        return { right: BUTTON_MARGIN, bottom: BUTTON_MARGIN };
+    };
+    const [, setSavedButtonPosition, isButtonPositionInitialized] = useLocalStorage('ai-agent-button-position', null);
+    const [buttonPosition, setButtonPosition] = React.useState(getInitialButtonPosition);
+    // Keep ref in sync with button position state and mark as loaded when initialized
+    React.useEffect(() => {
+        latestButtonPositionRef.current = buttonPosition;
+        if (isButtonPositionInitialized && !hasLoadedButtonPosition.current) {
+            hasLoadedButtonPosition.current = true;
+        }
+    }, [buttonPosition, isButtonPositionInitialized]);
+    // Fast clamp calculation helper (used in both drag and resize)
+    const clampButtonPositionFast = React.useCallback((right, bottom, buttonWidth, buttonHeight) => {
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Clamp horizontally
+        const maxRight = viewportWidth - buttonWidth - BUTTON_MARGIN;
+        let clampedRight = right;
+        if (clampedRight > maxRight) {
+            clampedRight = Math.max(BUTTON_MIN_MARGIN, maxRight);
+        }
+        else if (clampedRight < BUTTON_MARGIN) {
+            clampedRight = BUTTON_MARGIN;
+        }
+        // Clamp vertically
+        const maxBottom = viewportHeight - buttonHeight - BUTTON_MARGIN;
+        let clampedBottom = bottom;
+        if (clampedBottom > maxBottom) {
+            clampedBottom = Math.max(BUTTON_MIN_MARGIN, maxBottom);
+        }
+        else if (clampedBottom < BUTTON_MARGIN) {
+            clampedBottom = BUTTON_MARGIN;
+        }
+        return { right: clampedRight, bottom: clampedBottom };
+    }, []);
+    // Clamp button position to keep it within viewport
+    const clampButtonPosition = React.useCallback((pos, buttonWidth, buttonHeight) => {
+        if (typeof window === 'undefined') {
+            return pos;
+        }
+        // Use provided dimensions or get from DOM (avoid getBoundingClientRect during drag)
+        let width = buttonWidth;
+        let height = buttonHeight;
+        if (width === undefined || height === undefined) {
+            if (!buttonRef.current) {
+                return pos;
+            }
+            const rect = buttonRef.current.getBoundingClientRect();
+            width = rect.width;
+            height = rect.height;
+        }
+        return clampButtonPositionFast(pos.right, pos.bottom, width, height);
+    }, [clampButtonPositionFast]);
+    const handleButtonDragStart = React.useCallback((event) => {
+        // Don't prevent default to allow normal button behavior if it's just a click
+        event.stopPropagation();
+        if (buttonRef.current) {
+            // Cache button dimensions to avoid getBoundingClientRect during drag
+            const rect = buttonRef.current.getBoundingClientRect();
+            buttonDragState.current = {
+                startX: event.clientX,
+                startY: event.clientY,
+                startRight: buttonPosition.right,
+                startBottom: buttonPosition.bottom,
+                buttonWidth: rect.width,
+                buttonHeight: rect.height
+            };
+            buttonDragDistance.current = 0;
+            setIsButtonDragging(false);
+            setIsButtonDragActive(true);
+            document.body.style.userSelect = 'none';
+        }
+    }, [buttonPosition]);
+    // Handle button drag move and end
+    React.useEffect(() => {
+        // Only set up listeners when drag is active
+        if (!isButtonDragActive) {
+            return;
+        }
+        const handlePointerMove = (event) => {
+            if (!buttonDragState.current)
+                return;
+            const deltaX = event.clientX - buttonDragState.current.startX;
+            const deltaY = event.clientY - buttonDragState.current.startY;
+            const dragDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+            buttonDragDistance.current = dragDistance;
+            // Only start dragging if moved more than threshold (to distinguish from click)
+            if (dragDistance > DRAG_THRESHOLD && !isButtonDragging) {
+                setIsButtonDragging(true);
+                document.body.style.cursor = 'grabbing';
+            }
+            if (dragDistance > DRAG_THRESHOLD) {
+                // Calculate new position (right decreases when moving right, bottom decreases when moving down)
+                const newRight = buttonDragState.current.startRight - deltaX;
+                const newBottom = buttonDragState.current.startBottom - deltaY;
+                // Use fast clamp calculation with cached dimensions
+                const clampedPos = clampButtonPositionFast(newRight, newBottom, buttonDragState.current.buttonWidth, buttonDragState.current.buttonHeight);
+                latestButtonPositionRef.current = clampedPos;
+                // Update state immediately (same as window drag) for responsive dragging
+                setButtonPosition(clampedPos);
+            }
+        };
+        const handlePointerUp = () => {
+            const wasDragging = buttonDragDistance.current > DRAG_THRESHOLD;
+            // Save position to localStorage if we were dragging
+            if (wasDragging && hasLoadedButtonPosition.current) {
+                setSavedButtonPosition(latestButtonPositionRef.current);
+            }
+            setIsButtonDragging(false);
+            setIsButtonDragActive(false);
+            buttonDragDistance.current = 0;
+            document.body.style.userSelect = '';
+            document.body.style.cursor = '';
+            buttonDragState.current = null;
+        };
+        document.addEventListener('pointermove', handlePointerMove);
+        document.addEventListener('pointerup', handlePointerUp);
+        return () => {
+            document.removeEventListener('pointermove', handlePointerMove);
+            document.removeEventListener('pointerup', handlePointerUp);
+            document.body.style.userSelect = '';
+            document.body.style.cursor = '';
+        };
+    }, [isButtonDragActive, isButtonDragging, setSavedButtonPosition, clampButtonPositionFast]);
+    // Update button position on window resize to ensure it stays within viewport
+    React.useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const handleResize = () => {
+            // Use requestAnimationFrame to ensure DOM is updated
+            requestAnimationFrame(() => {
+                const clampedPos = clampButtonPosition(buttonPosition);
+                if (clampedPos.right !== buttonPosition.right || clampedPos.bottom !== buttonPosition.bottom) {
+                    setButtonPosition(clampedPos);
+                }
+            });
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [buttonPosition, clampButtonPosition]);
+    // Calculate responsive button style - ensure it overrides base styles
+    const getButtonStyle = React.useMemo(() => {
+        return css `
+      position: fixed !important;
+      bottom: ${buttonPosition.bottom}px !important;
+      right: ${buttonPosition.right}px !important;
+    `;
+    }, [buttonPosition]);
     // Show floating button when chat is closed
     if (!isOpen) {
-        return (_jsxs("div", { css: sdkContainer, children: [_jsx("button", { onClick: handleOpen, css: floatingButton, title: "Open AI Agent Chat", children: "AI Agent" }), notification.show && (_jsx(ToastNotification, { type: notification.type, message: notification.message, onClose: handleCloseNotification, isChatOpen: isOpen }))] }));
+        return (_jsxs("div", { css: sdkContainer, children: [_jsx("button", { ref: buttonRef, onClick: (e) => {
+                        // Don't open if we just finished dragging (moved more than threshold)
+                        if (buttonDragDistance.current > DRAG_THRESHOLD) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            return;
+                        }
+                        handleOpen();
+                    }, onPointerDown: handleButtonDragStart, css: [floatingButton, getButtonStyle, css `
+            cursor: ${isButtonDragging ? 'grabbing' : 'grab'} !important;
+            user-select: none !important;
+          `], title: "Drag to move or click to open AI Agent Chat", children: "AI Agent" }), notification.show && (_jsx(ToastNotification, { type: notification.type, message: notification.message, onClose: handleCloseNotification, isChatOpen: isOpen }))] }));
     }
-    return (_jsxs("div", { css: sdkContainer, children: [_jsxs("div", { css: chatWindow, children: [_jsxs("div", { css: chatHeader, children: [_jsxs("div", { css: css `
+    return (_jsxs("div", { css: sdkContainer, children: [_jsxs("div", { css: [chatWindow, css `
+          width: ${dimensions.width}px !important;
+          height: ${dimensions.height}px !important;
+          left: ${position.x}px !important;
+          top: ${position.y}px !important;
+          bottom: auto !important;
+          right: auto !important;
+        `], children: [_jsx("div", { css: resizeHandle, onPointerDown: handleResizeStart, title: "Resize", "aria-label": "Resize chat window" }), _jsxs("div", { css: [chatHeader, css `
+            cursor: ${isDragging ? 'grabbing' : 'grab'} !important;
+            user-select: none !important;
+          `], onPointerDown: handleDragStart, title: "Drag to move", children: [_jsxs("div", { css: css `
             display: flex !important;
             align-items: center !important;
             gap: 10px !important;
@@ -203,7 +442,7 @@ export const ChatBotUI = () => {
             display: flex !important;
             align-items: center !important;
             gap: 10px !important;
-          `, children: [_jsx("button", { onClick: handleSettingsClick, css: headerButton, title: "AIT Settings", children: "\u2699\uFE0F" }), _jsx("button", { onClick: handleClose, css: closeButton, children: "\u00D7" })] })] }), showIDVSuggestion && hitAddress && !props.requireWalletIDVVerification && !hasBerifymeToken && !isWalletVerifiedWithBerifyme && (_jsxs("div", { "data-idv-banner": true, css: idvBanner, children: [_jsx("div", { css: css `
+          `, children: [_jsx("button", { onClick: handleSettingsClick, css: headerButton, title: "AIT Settings", onPointerDown: (e) => e.stopPropagation(), children: "\u2699\uFE0F" }), _jsx("button", { onClick: handleClose, css: closeButton, onPointerDown: (e) => e.stopPropagation(), title: "Minimize", children: "\u2212" })] })] }), showIDVSuggestion && hitAddress && !props.requireWalletIDVVerification && !hasBerifymeToken && !isWalletVerifiedWithBerifyme && (_jsxs("div", { "data-idv-banner": true, css: idvBanner, children: [_jsx("div", { css: css `
               font-size: 20px !important;
               color: #f39c12 !important;
             `, children: "\uD83D\uDCA1" }), _jsxs("div", { css: css `flex: 1 !important;`, children: [_jsx("h5", { css: idvBannerTitle, children: walletTextUtils.getWalletText('Recommended: Verify Your Wallet', serviceId) }), _jsx("p", { css: idvBannerText, children: walletTextUtils.getWalletText('While not required, verifying your wallet with Berify.me provides additional security and trust for your AI agent interactions.', serviceId) }), _jsx("button", { onClick: () => onVerifyWallet('berifyme'), css: idvVerifyButton, children: walletTextUtils.getWalletText('Verify Wallet', serviceId) })] }), _jsx("button", { onClick: handleDismissIDV, css: idvDismissButton, title: `Hide for ${Math.floor((props.idvBannerDismissSeconds || 86400) / 3600)} hours`, children: "\u00D7" })] })), !showIDVSuggestion && dismissUntil && timeRemaining && (_jsxs("div", { css: css `

package/dist/components/ui/MessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/ui/MessageList.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EA4K/B,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/ui/MessageList.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkC/B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAsO/B,CAAC"}

package/dist/components/ui/MessageList.js

@@ -5,7 +5,7 @@ import { css } from '@emotion/react';
 import { convertUrlsToLinks } from '../../core/utils/urlUtils';
 import * as walletTextUtils from '../../core/utils/walletTextUtils';
 import { useChatBot } from '../context/ChatBotContext';
-import { messageListContainer, messageBubble, userMessage, messageContent, userMessageContent, retryMessageContent, chatbotButton, connectedButton, loadingIndicator, modelIndicator, modelBadge, modelDot } from './styles/isolatedStyles';
+import { messageListContainer, messageBubble, userMessage, messageContent, userMessageContent, retryMessageContent, chatbotButton, connectedButton, loadingIndicator, modelIndicator, modelBadge, modelDot, streamingCaret, streamingContainer, streamingHeader, streamingIcon, streamingToolName, streamingProgressPercent, streamingProgressContainer, streamingProgressBar, streamingPartialText, streamingStatus, streamingStepsContainer, streamingStepItem, streamingStepCheck } from './styles/isolatedStyles';
 export const MessageList = () => {
     const { messages, isLoading, isTtsProcessing, requiresGesture, retryTtsWithGesture, connectWallet, signInWallet, hitAddress, isAutoConnecting, isNeedSignInWithWallet, enableAIT, isAITLoading, isAITEnabling, sendMessage, permissions, availableModels, serviceId } = useChatBot();
     const messagesEndRef = React.useRef(null);
@@ -16,6 +16,10 @@ export const MessageList = () => {
         scrollToBottom();
     }, [messages]);
     const handleButtonClick = async (buttonType, message) => {
+        // Prevent sending messages while AI Agent is processing
+        if (isLoading) {
+            return;
+        }
         if (buttonType === 'connectWallet') {
             connectWallet(true);
         }
@@ -62,7 +66,7 @@ export const MessageList = () => {
                             ? userMessageContent
                             : message.metadata?.isRetry
                                 ? retryMessageContent
-                                : messageContent, children: [message.metadata?.isRetry && (_jsx("span", { css: css `margin-right: 8px !important; font-size: 14px !important;`, children: "\uD83D\uDD04" })), message.role === 'assistant' ? convertUrlsToLinks(message.content) : message.content, message.button && (_jsx("div", { css: css `margin-top: 10px !important;`, children: _jsx("button", { onClick: () => {
+                                : messageContent, children: [message.metadata?.isRetry && (_jsx("span", { css: css `margin-right: 8px !important; font-size: 14px !important;`, children: "\uD83D\uDD04" })), message.isStreaming && message.partialContent && (_jsxs("div", { css: streamingPartialText, children: [message.role === 'assistant' ? convertUrlsToLinks(message.partialContent) : message.partialContent, _jsx("span", { css: streamingCaret, children: "\u258A" })] })), message.isStreaming && !message.partialContent && message.role === 'assistant' && (_jsxs("div", { css: streamingContainer, children: [_jsxs("div", { css: streamingHeader, children: [_jsx("span", { css: streamingIcon, children: "\uD83D\uDD27" }), _jsx("span", { css: streamingToolName, children: message.streamingToolName || 'Processing' }), message.streamingProgress !== undefined && (_jsxs("span", { css: streamingProgressPercent, children: [message.streamingProgress, "%"] }))] }), message.streamingProgress !== undefined && (_jsx("div", { css: streamingProgressContainer, children: _jsx("div", { css: [streamingProgressBar, css `width: ${message.streamingProgress}% !important;`] }) })), message.streamingStatus && (_jsx("div", { css: streamingStatus, children: message.streamingStatus })), message.streamingSteps && message.streamingSteps.length > 0 && (_jsx("div", { css: streamingStepsContainer, children: message.streamingSteps.map((step, idx) => (_jsxs("div", { css: streamingStepItem, children: [_jsx("span", { css: streamingStepCheck, children: "\u2713" }), _jsx("span", { children: step })] }, idx))) }))] })), !message.isStreaming && (message.role === 'assistant' ? convertUrlsToLinks(message.content) : message.content), message.button && (_jsx("div", { css: css `margin-top: 10px !important;`, children: _jsx("button", { onClick: () => {
                                         if (message.button && message.button.trim()) {
                                             handleButtonClick(message.button, message);
                                         }

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

@@ -2,6 +2,7 @@ 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;
+export declare const resizeHandle: 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;
@@ -32,4 +33,17 @@ 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;
 //# sourceMappingURL=isolatedStyles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"isolatedStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/styles/isolatedStyles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,2CAwBpB,CAAC;AAGF,eAAO,MAAM,YAAY,2CAmExB,CAAC;AAGF,eAAO,MAAM,cAAc,2CA6C1B,CAAC;AAGF,eAAO,MAAM,UAAU,2CAuCtB,CAAC;AAGF,eAAO,MAAM,UAAU,2CAStB,CAAC;AAGF,eAAO,MAAM,WAAW,2CAMvB,CAAC;AAGF,eAAO,MAAM,YAAY,2CA0BxB,CAAC;AAGF,eAAO,MAAM,WAAW,2CAoBvB,CAAC;AAGF,eAAO,MAAM,oBAAoB,2CAQhC,CAAC;AAGF,eAAO,MAAM,aAAa,2CAKzB,CAAC;AAGF,eAAO,MAAM,WAAW,2CAKvB,CAAC;AAGF,eAAO,MAAM,cAAc,2CAQ1B,CAAC;AAGF,eAAO,MAAM,kBAAkB,2CAQ9B,CAAC;AAGF,eAAO,MAAM,mBAAmB,2CAS/B,CAAC;AAGF,eAAO,MAAM,aAAa,2CAezB,CAAC;AAGF,eAAO,MAAM,YAAY,2CAexB,CAAC;AAGF,eAAO,MAAM,eAAe,2CAc3B,CAAC;AAGF,eAAO,MAAM,gBAAgB,2CAQ5B,CAAC;AAGF,eAAO,MAAM,cAAc,2CAM1B,CAAC;AAGF,eAAO,MAAM,UAAU,2CAYtB,CAAC;AAGF,eAAO,MAAM,QAAQ,2CAMpB,CAAC;AAGF,eAAO,MAAM,iBAAiB,2CAc7B,CAAC;AAGF,eAAO,MAAM,YAAY,2CAIxB,CAAC;AAGF,eAAO,MAAM,UAAU,2CAItB,CAAC;AAGF,eAAO,MAAM,YAAY,2CAIxB,CAAC;AAGF,eAAO,MAAM,SAAS,2CAIrB,CAAC;AAGF,eAAO,MAAM,gBAAgB,2CAiB5B,CAAC;AAGF,eAAO,MAAM,YAAY,2CAyBxB,CAAC;AAGF,eAAO,MAAM,SAAS,2CAWrB,CAAC;AAGF,eAAO,MAAM,cAAc,2CAM1B,CAAC;AAGF,eAAO,MAAM,aAAa,2CAMzB,CAAC;AAGF,eAAO,MAAM,eAAe,2CAoB3B,CAAC;AAGF,eAAO,MAAM,gBAAgB,2CAmB5B,CAAC;AAGF,eAAO,MAAM,cAAc,2CAO1B,CAAC"}
+{"version":3,"file":"isolatedStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/styles/isolatedStyles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,2CAwBpB,CAAC;AAGF,eAAO,MAAM,YAAY,2CAmExB,CAAC;AAGF,eAAO,MAAM,cAAc,2CAmD1B,CAAC;AAGF,eAAO,MAAM,UAAU,2CAuCtB,CAAC;AAGF,eAAO,MAAM,YAAY,2CAcxB,CAAC;AAGF,eAAO,MAAM,UAAU,2CAStB,CAAC;AAGF,eAAO,MAAM,WAAW,2CAMvB,CAAC;AAGF,eAAO,MAAM,YAAY,2CA0BxB,CAAC;AAGF,eAAO,MAAM,WAAW,2CAoBvB,CAAC;AAGF,eAAO,MAAM,oBAAoB,2CAQhC,CAAC;AAGF,eAAO,MAAM,aAAa,2CAKzB,CAAC;AAGF,eAAO,MAAM,WAAW,2CAKvB,CAAC;AAGF,eAAO,MAAM,cAAc,2CAQ1B,CAAC;AAGF,eAAO,MAAM,kBAAkB,2CAQ9B,CAAC;AAGF,eAAO,MAAM,mBAAmB,2CAS/B,CAAC;AAGF,eAAO,MAAM,aAAa,2CAezB,CAAC;AAGF,eAAO,MAAM,YAAY,2CAexB,CAAC;AAGF,eAAO,MAAM,eAAe,2CAc3B,CAAC;AAGF,eAAO,MAAM,gBAAgB,2CAQ5B,CAAC;AAGF,eAAO,MAAM,cAAc,2CAM1B,CAAC;AAGF,eAAO,MAAM,UAAU,2CAYtB,CAAC;AAGF,eAAO,MAAM,QAAQ,2CAMpB,CAAC;AAGF,eAAO,MAAM,iBAAiB,2CAc7B,CAAC;AAGF,eAAO,MAAM,YAAY,2CAIxB,CAAC;AAGF,eAAO,MAAM,UAAU,2CAItB,CAAC;AAGF,eAAO,MAAM,YAAY,2CAIxB,CAAC;AAGF,eAAO,MAAM,SAAS,2CAIrB,CAAC;AAGF,eAAO,MAAM,gBAAgB,2CAiB5B,CAAC;AAGF,eAAO,MAAM,YAAY,2CAyBxB,CAAC;AAGF,eAAO,MAAM,SAAS,2CAWrB,CAAC;AAGF,eAAO,MAAM,cAAc,2CAM1B,CAAC;AAGF,eAAO,MAAM,aAAa,2CAMzB,CAAC;AAGF,eAAO,MAAM,eAAe,2CAoB3B,CAAC;AAGF,eAAO,MAAM,gBAAgB,2CAmB5B,CAAC;AAGF,eAAO,MAAM,cAAc,2CAO1B,CAAC;AAGF,eAAO,MAAM,oBAAoB,2CAIhC,CAAC;AAGF,eAAO,MAAM,kBAAkB,2CAO9B,CAAC;AAGF,eAAO,MAAM,eAAe,2CAM3B,CAAC;AAGF,eAAO,MAAM,aAAa,2CAczB,CAAC;AAGF,eAAO,MAAM,iBAAiB,2CAK7B,CAAC;AAGF,eAAO,MAAM,wBAAwB,2CAMpC,CAAC;AAGF,eAAO,MAAM,0BAA0B,2CAOtC,CAAC;AAGF,eAAO,MAAM,oBAAoB,2CAIhC,CAAC;AAGF,eAAO,MAAM,eAAe,2CAK3B,CAAC;AAGF,eAAO,MAAM,cAAc,2CAY1B,CAAC;AAGF,eAAO,MAAM,uBAAuB,2CAInC,CAAC;AAGF,eAAO,MAAM,iBAAiB,2CAO7B,CAAC;AAGF,eAAO,MAAM,kBAAkB,2CAE9B,CAAC"}

package/dist/components/ui/styles/isolatedStyles.js

@@ -97,8 +97,6 @@ export const sdkContainer = css `
 // Floating button styles
 export const floatingButton = css `
   position: fixed !important;
-  bottom: 20px !important;
-  right: 20px !important;
   background-color: #007bff !important;
   color: white !important;
   border: none !important;
@@ -112,6 +110,7 @@ export const floatingButton = css `
   font-weight: 500 !important;
   font-family: inherit !important;
   max-width: calc(100vw - 40px) !important;
+  white-space: nowrap !important;
   
   &:disabled {
     cursor: not-allowed !important;
@@ -123,23 +122,30 @@ export const floatingButton = css `
     transform: translateY(-2px) !important;
   }
   
-  /* Mobile responsive adjustments */
+  /* Responsive adjustments for small windows */
   @media (max-width: 768px) {
-    bottom: 15px !important;
-    right: 15px !important;
     max-width: calc(100vw - 30px) !important;
     padding: 8px 16px !important;
     font-size: 13px !important;
   }
   
   @media (max-width: 480px) {
-    bottom: 10px !important;
-    right: 10px !important;
     max-width: calc(100vw - 20px) !important;
     padding: 6px 12px !important;
     font-size: 12px !important;
     border-radius: 16px !important;
   }
+  
+  /* Ensure button is visible when viewport is very small */
+  @media (max-height: 200px) {
+    padding: 4px 8px !important;
+    font-size: 11px !important;
+  }
+  
+  @media (max-width: 200px) {
+    padding: 4px 8px !important;
+    font-size: 11px !important;
+  }
 `;
 // Chat window container styles
 export const chatWindow = css `
@@ -182,6 +188,22 @@ export const chatWindow = css `
     border-radius: 6px !important;
   }
 `;
+// Resize handle for chat window (top-left, invisible until hover)
+export const resizeHandle = css `
+  position: absolute !important;
+  top: 6px !important;
+  left: 6px !important;
+  width: 18px !important;
+  height: 18px !important;
+  border-radius: 4px !important;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  cursor: nwse-resize !important;
+  z-index: 10 !important;
+  display: grid !important;
+  place-items: center !important;
+`;
 // Header styles
 export const chatHeader = css `
   padding: 15px !important;
@@ -563,3 +585,112 @@ export const loadingSpinner = css `
   border-radius: 50% !important;
   animation: spin 1s linear infinite !important;
 `;
+// Streaming partial text block (token-level)
+export const streamingPartialText = css `
+  color: #333 !important;
+  white-space: pre-wrap !important;
+  word-break: break-word !important;
+`;
+// Streaming indicator container styles
+export const streamingContainer = css `
+  margin-bottom: 12px !important;
+  padding: 12px !important;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%) !important;
+  border-radius: 8px !important;
+  border-left: 3px solid #667eea !important;
+  font-family: inherit !important;
+`;
+// Streaming header styles
+export const streamingHeader = css `
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+  margin-bottom: 8px !important;
+  font-family: inherit !important;
+`;
+// Streaming icon styles
+export const streamingIcon = css `
+  font-size: 16px !important;
+  animation: pulse 1.5s ease-in-out infinite !important;
+
+  @keyframes pulse {
+    0%, 100% {
+      opacity: 1 !important;
+      transform: scale(1) !important;
+    }
+    50% {
+      opacity: 0.6 !important;
+      transform: scale(1.1) !important;
+    }
+  }
+`;
+// Streaming tool name styles
+export const streamingToolName = css `
+  font-weight: 600 !important;
+  color: #667eea !important;
+  font-size: 14px !important;
+  font-family: inherit !important;
+`;
+// Streaming progress percentage styles
+export const streamingProgressPercent = css `
+  margin-left: auto !important;
+  color: #888 !important;
+  font-size: 12px !important;
+  font-weight: 600 !important;
+  font-family: inherit !important;
+`;
+// Streaming progress bar container styles
+export const streamingProgressContainer = css `
+  width: 100% !important;
+  height: 4px !important;
+  background: rgba(102, 126, 234, 0.1) !important;
+  border-radius: 2px !important;
+  overflow: hidden !important;
+  margin-bottom: 8px !important;
+`;
+// Streaming progress bar fill styles
+export const streamingProgressBar = css `
+  height: 100% !important;
+  background: linear-gradient(90deg, #667eea, #764ba2) !important;
+  transition: width 0.3s ease !important;
+`;
+// Streaming status message styles
+export const streamingStatus = css `
+  font-size: 13px !important;
+  color: #555 !important;
+  font-style: italic !important;
+  font-family: inherit !important;
+`;
+// Streaming caret (blinking)
+export const streamingCaret = css `
+  margin-left: 2px !important;
+  animation: blink 1s infinite !important;
+
+  @keyframes blink {
+    0%, 50% {
+      opacity: 1 !important;
+    }
+    51%, 100% {
+      opacity: 0 !important;
+    }
+  }
+`;
+// Streaming steps container styles
+export const streamingStepsContainer = css `
+  margin-top: 8px !important;
+  font-size: 12px !important;
+  font-family: inherit !important;
+`;
+// Streaming step item styles
+export const streamingStepItem = css `
+  display: flex !important;
+  align-items: center !important;
+  gap: 6px !important;
+  margin-top: 4px !important;
+  color: #666 !important;
+  font-family: inherit !important;
+`;
+// Streaming step checkmark styles
+export const streamingStepCheck = css `
+  color: #4caf50 !important;
+`;

package/dist/core/lib/textToSpeech.js

@@ -1,7 +1,7 @@
 import { SpeechConfig, SpeechSynthesizer } from 'microsoft-cognitiveservices-speech-sdk';
 import Cookie from 'universal-cookie';
 // Hardcoded Azure Speech credentials
-const SPEECH_KEY = '8b2cec35ebcd4e6e94da56537c5e910c';
+const SPEECH_KEY = '70ab55f06c454e82bcb5ee0c7a5ea25e';
 const SPEECH_REGION = 'westcentralus';
 const cookie = new Cookie();
 /**

package/dist/core/lib/useDraggable.d.ts

@@ -0,0 +1,15 @@
+interface Position {
+    x: number;
+    y: number;
+}
+export declare const useDraggable: (dimensions: {
+    width: number;
+    height: number;
+}) => {
+    position: Position;
+    handleDragStart: (event: React.PointerEvent<HTMLDivElement>) => void;
+    isDragging: boolean;
+    updatePosition: (newPosition: Position) => void;
+};
+export {};
+//# sourceMappingURL=useDraggable.d.ts.map

package/dist/core/lib/useDraggable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDraggable.d.ts","sourceRoot":"","sources":["../../../src/core/lib/useDraggable.ts"],"names":[],"mappings":"AAGA,UAAU,QAAQ;IAChB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAKD,eAAO,MAAM,YAAY,GAAI,YAAY;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE;;6BAuFxC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC;;kCA8EjB,QAAQ;CAgB1D,CAAC"}