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

package/dist/legacy/chatbot/ui/NotificationModal.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import { createNotification, getNotificationIcon } from '@bytexbyte/nxtlinq-ai-agent-web-development';
+import { actionButton, modalOverlay } from './styles/isolatedStyles';
+export const NotificationModal = ({ type, title, message, onClose, onConfirm, showConfirm = false, confirmText = 'Confirm', cancelText = 'Cancel' }) => {
+    const icon = getNotificationIcon(type);
+    const notification = createNotification(type, message);
+    return (_jsx("div", { css: modalOverlay, children: _jsxs("div", { css: css `
+        background-color: white !important;
+        padding: 24px !important;
+        border-radius: 12px !important;
+        width: 400px !important;
+        max-width: 90% !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
+        text-align: center !important;
+      `, children: [_jsx("div", { css: css `
+          font-size: 48px !important;
+          margin-bottom: 16px !important;
+        `, children: icon }), _jsx("h3", { css: css `
+          margin: 0 0 12px 0 !important;
+          font-size: 20px !important;
+          font-weight: 600 !important;
+          color: #1a1a1a !important;
+        `, children: title }), _jsx("p", { css: css `
+          margin: 0 0 24px 0 !important;
+          font-size: 16px !important;
+          color: #666 !important;
+          line-height: 1.5 !important;
+        `, children: message }), _jsxs("div", { css: css `
+          display: flex !important;
+          justify-content: center !important;
+          gap: 12px !important;
+        `, children: [showConfirm && onConfirm && (_jsx("button", { onClick: onConfirm, css: css `
+                ${actionButton}
+                background-color: ${type === 'error' ? '#dc3545' : '#007bff'} !important;
+                border-radius: 8px !important;
+                
+                &:hover {
+                  background-color: ${type === 'error' ? '#c82333' : '#0056b3'} !important;
+                }
+              `, children: confirmText })), _jsx("button", { onClick: onClose, css: css `
+              ${actionButton}
+              background-color: ${showConfirm ? '#f8f9fa' : '#007bff'} !important;
+              color: ${showConfirm ? '#666' : 'white'} !important;
+              border: ${showConfirm ? '1px solid #dee2e6' : 'none'} !important;
+              border-radius: 8px !important;
+              
+              &:hover {
+                background-color: ${showConfirm ? '#e9ecef' : '#0056b3'} !important;
+                border-color: ${showConfirm ? '#ced4da' : 'none'} !important;
+              }
+            `, children: cancelText })] })] }) }));
+};

package/dist/legacy/chatbot/ui/PermissionForm.d.ts

@@ -0,0 +1,8 @@
+/** @jsxImportSource @emotion/react */
+import * as React from 'react';
+interface PermissionFormProps {
+    onClose: () => void;
+}
+export declare const PermissionForm: React.FC<PermissionFormProps>;
+export {};
+//# sourceMappingURL=PermissionForm.d.ts.map

package/dist/legacy/chatbot/ui/PermissionForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionForm.d.ts","sourceRoot":"","sources":["../../../../src/legacy/chatbot/ui/PermissionForm.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,UAAU,mBAAmB;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA4mBxD,CAAC"}

package/dist/legacy/chatbot/ui/PermissionForm.js

@@ -0,0 +1,465 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import * as React from 'react';
+import { css } from '@emotion/react';
+import { useChatBot } from '../context/ChatBotContext';
+import { walletTextUtils } from '@bytexbyte/nxtlinq-ai-agent-web-development';
+import { actionButton } from './styles/isolatedStyles';
+export const PermissionForm = ({ onClose }) => {
+    const { hitAddress, permissions, setPermissions, setIsDisabled, onSave, onConnectWallet, onSignIn, isNeedSignInWithWallet, walletInfo, onVerifyWallet, serviceId, nxtlinqApi, permissionGroup, isAITLoading, isWalletLoading = false, refreshAIT, props } = useChatBot();
+    const [availablePermissions, setAvailablePermissions] = React.useState([]);
+    const [isSaving, setIsSaving] = React.useState(false);
+    const [tempPermissions, setTempPermissions] = React.useState(permissions);
+    const [hasUserInteracted, setHasUserInteracted] = React.useState(false);
+    // Check if ALL permission is selected
+    const isAllSelected = tempPermissions.includes('ALL');
+    // Update temp permissions when permissions change, but only if user hasn't interacted
+    React.useEffect(() => {
+        if (!hasUserInteracted) {
+            setTempPermissions(permissions);
+        }
+    }, [permissions, hasUserInteracted]);
+    // When ALL is selected, automatically select all other permissions
+    // This handles cases where ALL is set from initial permissions or when availablePermissions loads
+    React.useEffect(() => {
+        if (isAllSelected && availablePermissions.length > 0) {
+            const allPermissionLabels = availablePermissions.map(p => p.label);
+            const currentPermissionSet = new Set(tempPermissions);
+            // Check if all permissions are already selected
+            const hasAllPermissions = allPermissionLabels.every(label => currentPermissionSet.has(label));
+            if (!hasAllPermissions) {
+                // Add all permissions (this will include ALL and all others)
+                setTempPermissions([...allPermissionLabels].sort());
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isAllSelected, availablePermissions.length]);
+    const fetchAvailablePermissions = async () => {
+        if (!serviceId)
+            return;
+        try {
+            const result = await nxtlinqApi.permissions.getServicePermissions({
+                serviceId,
+                ...(permissionGroup && { groupName: permissionGroup })
+            });
+            if ('error' in result) {
+                console.error('Failed to fetch permissions:', result.error);
+                return;
+            }
+            setAvailablePermissions(result.permissions);
+        }
+        catch (error) {
+            console.error('Error fetching permissions:', error);
+        }
+    };
+    React.useEffect(() => {
+        fetchAvailablePermissions();
+    }, [serviceId, nxtlinqApi, permissionGroup]);
+    // Refresh wallet info when component mounts or when hitAddress changes
+    React.useEffect(() => {
+        if (hitAddress) {
+            // Trigger a refresh of AIT and wallet info when the form opens
+            const refreshWalletInfo = async () => {
+                try {
+                    // This will trigger refreshAIT which includes wallet info fetch
+                    await refreshAIT();
+                }
+                catch (error) {
+                    console.error('Failed to refresh wallet info:', error);
+                }
+            };
+            refreshWalletInfo();
+        }
+    }, [hitAddress]);
+    // Check if wallet IDV verification is required based on configuration
+    const requireWalletIDVVerification = props.requireWalletIDVVerification ?? true; // Default to true
+    const isWalletVerified = Boolean(walletInfo?.id);
+    const isWalletVerifiedWithBerifyme = walletInfo?.method === 'berifyme';
+    // Show verification prompt if:
+    // 1. IDV verification is required AND wallet is not verified, OR
+    // 2. IDV verification is required AND wallet is verified but not with Berifyme
+    const shouldShowVerificationPrompt = requireWalletIDVVerification && (!isWalletVerified || !isWalletVerifiedWithBerifyme);
+    const handleSave = async () => {
+        setIsSaving(true);
+        try {
+            // Update the actual permissions with temp permissions
+            setPermissions(tempPermissions);
+            await onSave(tempPermissions);
+            setHasUserInteracted(false);
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    const handleCancel = () => {
+        // Reset temp permissions to original permissions
+        setTempPermissions(permissions);
+        setHasUserInteracted(false);
+        onClose();
+    };
+    // Check if permissions have changed
+    const hasPermissionChanges = () => {
+        if (tempPermissions.length !== permissions.length)
+            return true;
+        return tempPermissions.some(p => !permissions.includes(p)) ||
+            permissions.some(p => !tempPermissions.includes(p));
+    };
+    // Show loading state while checking wallet status
+    if (isWalletLoading) {
+        return (_jsxs("div", { css: css `
+        background-color: white !important;
+        padding: 24px !important;
+        border-radius: 12px !important;
+        width: 480px !important;
+        max-width: 90% !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
+      `, children: [_jsxs("div", { css: css `
+          display: flex !important;
+          justify-content: space-between !important;
+          align-items: center !important;
+          margin-bottom: 24px !important;
+        `, children: [_jsx("h3", { css: css `
+            margin: 0 !important;
+            font-size: 20px !important;
+            font-weight: 600 !important;
+            color: #1a1a1a !important;
+          `, children: "AIT Settings" }), _jsx("button", { onClick: onClose, css: css `
+              background: none !important;
+              border: none !important;
+              font-size: 24px !important;
+              cursor: pointer !important;
+              color: #666 !important;
+              padding: 4px !important;
+              display: flex !important;
+              align-items: center !important;
+              justify-content: center !important;
+              
+              &:hover {
+                background-color: #f0f0f0 !important;
+                color: #333 !important;
+              }
+            `, children: "\u00D7" })] }), _jsxs("div", { css: css `
+          text-align: center !important;
+          padding: 32px 0 !important;
+        `, children: [_jsx("div", { css: css `
+            width: 64px !important;
+            height: 64px !important;
+            margin: 0 auto 16px !important;
+            background-color: #f5f5f5 !important;
+            border-radius: 50% !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+          `, children: _jsx("div", { css: css `
+              width: 32px !important;
+              height: 32px !important;
+              border: 3px solid #e3e3e3 !important;
+              border-top: 3px solid #007bff !important;
+              border-radius: 50% !important;
+              animation: spin 1s linear infinite !important;
+            ` }) }), _jsx("p", { css: css `
+            margin-bottom: 24px !important;
+            font-size: 16px !important;
+            color: #666 !important;
+          `, children: walletTextUtils.getWalletText('Checking wallet status...', serviceId) })] }), _jsx("style", { children: `
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        ` })] }));
+    }
+    return (_jsxs("div", { css: css `
+      background-color: white !important;
+      padding: 24px !important;
+      border-radius: 12px !important;
+      width: 480px !important;
+      max-width: 90% !important;
+      max-height: 90vh !important;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
+      display: flex !important;
+      flex-direction: column !important;
+      overflow: hidden !important;
+      
+      /* Mobile responsive adjustments */
+      @media (max-width: 768px) {
+        width: 75vw !important;
+        max-width: 75vw !important;
+        padding: 20px !important;
+        border-radius: 8px !important;
+        max-height: 65vh !important;
+      }
+      
+      @media (max-width: 480px) {
+        width: 70vw !important;
+        max-width: 70vw !important;
+        padding: 16px !important;
+        border-radius: 6px !important;
+        max-height: 60vh !important;
+      }
+    `, children: [_jsxs("div", { css: css `
+        display: flex !important;
+        justify-content: space-between !important;
+        align-items: center !important;
+        margin-bottom: 24px !important;
+      `, children: [_jsx("h3", { css: css `
+          margin: 0 !important;
+          font-size: 20px !important;
+          font-weight: 600 !important;
+          color: #1a1a1a !important;
+        `, children: "AIT Settings" }), _jsx("button", { onClick: onClose, css: css `
+            background: none !important;
+            border: none !important;
+            font-size: 24px !important;
+            cursor: pointer !important;
+            color: #666 !important;
+            padding: 8px !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            border-radius: 4px !important;
+            transition: background-color 0.2s !important;
+            min-width: 32px !important;
+            min-height: 32px !important;
+            
+            &:hover {
+              background-color: #f0f0f0 !important;
+              color: #333 !important;
+            }
+          `, title: "Close", children: "\u00D7" })] }), !hitAddress ? (_jsxs("div", { css: css `
+          text-align: center !important;
+          padding: 32px 0 !important;
+        `, children: [_jsx("div", { css: css `
+            width: 64px !important;
+            height: 64px !important;
+            margin: 0 auto 16px !important;
+            background-color: #f5f5f5 !important;
+            border-radius: 50% !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+          `, children: _jsx("span", { css: css `font-size: 32px !important;`, children: "\uD83D\uDC5B" }) }), _jsx("p", { css: css `
+            margin-bottom: 24px !important;
+            font-size: 16px !important;
+            color: #666 !important;
+          `, children: walletTextUtils.getWalletText('Please connect your wallet first', serviceId) }), _jsx("button", { onClick: onConnectWallet, disabled: Boolean(hitAddress), css: css `
+              ${actionButton}
+              padding: 12px 24px !important;
+              background-color: ${Boolean(hitAddress) ? '#28a745' : '#007bff'} !important;
+              border-radius: 8px !important;
+              font-size: 16px !important;
+              opacity: ${Boolean(hitAddress) ? 0.8 : 1} !important;
+              
+              &:disabled {
+                cursor: not-allowed !important;
+              }
+              
+              &:hover:not(:disabled) {
+                background-color: #0056b3 !important;
+              }
+            `, children: Boolean(hitAddress) ? 'Connected' : walletTextUtils.getWalletText('Connect Wallet', serviceId) })] })) : isNeedSignInWithWallet ? (_jsxs("div", { css: css `
+          text-align: center !important;
+          padding: 32px 0 !important;
+        `, children: [_jsxs("div", { css: css `margin-bottom: 24px !important;`, children: [_jsx("h4", { css: css `
+              margin-bottom: 12px !important;
+              font-size: 16px !important;
+              color: #666 !important;
+            `, children: walletTextUtils.getWalletText('Connected Wallet', serviceId) }), _jsx("p", { css: css `
+              word-break: break-all !important;
+              background-color: #f8f9fa !important;
+              padding: 12px !important;
+              border-radius: 8px !important;
+              font-size: 14px !important;
+              color: #333 !important;
+              border: 1px solid #e9ecef !important;
+            `, children: hitAddress })] }), _jsx("p", { css: css `
+            margin-bottom: 24px !important;
+            font-size: 16px !important;
+            color: #666 !important;
+          `, children: "Please sign in to continue" }), _jsx("button", { onClick: onSignIn, disabled: !isNeedSignInWithWallet, css: css `
+              ${actionButton}
+              padding: 12px 24px !important;
+              background-color: ${!isNeedSignInWithWallet ? '#28a745' : '#007bff'} !important;
+              border-radius: 8px !important;
+              font-size: 16px !important;
+              opacity: ${!isNeedSignInWithWallet ? 0.8 : 1} !important;
+              
+              &:disabled {
+                cursor: not-allowed !important;
+              }
+              
+              &:hover:not(:disabled) {
+                background-color: #0056b3 !important;
+              }
+            `, children: !isNeedSignInWithWallet ? 'Signed In' : 'Sign In' })] })) : shouldShowVerificationPrompt ? (_jsxs("div", { css: css `
+          text-align: center !important;
+          padding: 32px 0 !important;
+        `, children: [_jsxs("div", { css: css `margin-bottom: 24px !important;`, children: [_jsx("h4", { css: css `
+              margin-bottom: 12px !important;
+              font-size: 16px !important;
+              color: #666 !important;
+            `, children: walletTextUtils.getWalletText('Connected Wallet', serviceId) }), _jsx("p", { css: css `
+              word-break: break-all !important;
+              background-color: #f8f9fa !important;
+              padding: 12px !important;
+              border-radius: 8px !important;
+              font-size: 14px !important;
+              color: #333 !important;
+              border: 1px solid #e9ecef !important;
+            `, children: hitAddress })] }), _jsx("p", { css: css `
+            margin-bottom: 24px !important;
+            font-size: 16px !important;
+            color: #666 !important;
+          `, children: isWalletVerified && !isWalletVerifiedWithBerifyme
+                            ? walletTextUtils.getWalletText('Your wallet is verified with custom method, but Berify.me verification is required to continue.', serviceId)
+                            : walletTextUtils.getWalletText('Please verify your wallet with Berify.me to continue', serviceId) }), _jsx("button", { onClick: () => onVerifyWallet('berifyme'), css: css `
+              ${actionButton}
+              padding: 12px 24px !important;
+              background-color: #007bff !important;
+              border-radius: 8px !important;
+              font-size: 16px !important;
+              
+              &:hover {
+                background-color: #0056b3 !important;
+              }
+            `, children: walletTextUtils.getWalletText('Verify your wallet', serviceId) })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { css: css `margin-bottom: 24px !important;`, children: [_jsx("h4", { css: css `
+              margin-bottom: 12px !important;
+              font-size: 16px !important;
+              color: #666 !important;
+            `, children: walletTextUtils.getWalletText('Connected Wallet', serviceId) }), _jsx("p", { css: css `
+              word-break: break-all !important;
+              background-color: #f8f9fa !important;
+              padding: 12px !important;
+              border-radius: 8px !important;
+              font-size: 14px !important;
+              color: #333 !important;
+              border: 1px solid #e9ecef !important;
+            `, children: hitAddress })] }), _jsxs("div", { css: css `
+            margin-bottom: 24px !important;
+            flex: 1 !important;
+            display: flex !important;
+            flex-direction: column !important;
+            min-height: 0 !important;
+          `, children: [_jsx("h4", { css: css `
+              margin-bottom: 12px !important;
+              font-size: 16px !important;
+              color: #666 !important;
+              flex-shrink: 0 !important;
+            `, children: "Permissions" }), isAITLoading ? (_jsx("div", { css: css `
+                background-color: #f8f9fa !important;
+                padding: 16px !important;
+                border-radius: 8px !important;
+                border: 1px solid #e9ecef !important;
+                text-align: center !important;
+                color: #666 !important;
+              `, children: "Loading permissions..." })) : (_jsx("div", { css: css `
+                background-color: #f8f9fa !important;
+                padding: 16px !important;
+                border-radius: 8px !important;
+                border: 1px solid #e9ecef !important;
+                flex: 1 !important;
+                overflow-y: auto !important;
+                overflow-x: hidden !important;
+                min-height: 0 !important;
+              `, children: availablePermissions.map((permission) => {
+                                    const isAllPermission = permission.label === 'ALL';
+                                    const isOtherPermissionDisabled = isAllSelected && !isAllPermission;
+                                    const isChecked = isAllSelected && !isAllPermission
+                                        ? true
+                                        : tempPermissions.includes(permission.label);
+                                    return (_jsx("div", { css: css `margin-bottom: 12px !important;`, children: _jsxs("label", { css: css `
+                        display: flex !important;
+                        align-items: center !important;
+                        gap: 12px !important;
+                        cursor: ${isAITLoading || isOtherPermissionDisabled ? 'not-allowed' : 'pointer'} !important;
+                        padding: 8px !important;
+                        border-radius: 6px !important;
+                        transition: background-color 0.2s !important;
+                        opacity: ${isAITLoading || isOtherPermissionDisabled ? 0.6 : 1} !important;
+                        
+                        &:hover {
+                          background-color: ${!isAITLoading && !isOtherPermissionDisabled ? '#e9ecef' : 'transparent'} !important;
+                        }
+                      `, children: [_jsx("input", { type: "checkbox", checked: isChecked, onChange: () => {
+                                                        if (!isAITLoading) {
+                                                            if (isAllPermission) {
+                                                                // Handle ALL permission toggle
+                                                                if (isAllSelected) {
+                                                                    // Unchecking ALL - keep all other permissions selected
+                                                                    // Get all permission labels except ALL
+                                                                    const allOtherPermissions = availablePermissions
+                                                                        .map(p => p.label)
+                                                                        .filter(label => label !== 'ALL');
+                                                                    setTempPermissions(allOtherPermissions.sort());
+                                                                }
+                                                                else {
+                                                                    // Checking ALL - add all permissions
+                                                                    const allPermissionLabels = availablePermissions.map(p => p.label);
+                                                                    setTempPermissions(allPermissionLabels.sort());
+                                                                }
+                                                            }
+                                                            else {
+                                                                // Handle other permissions (only if ALL is not selected)
+                                                                if (!isAllSelected) {
+                                                                    const newPermissions = tempPermissions.includes(permission.label)
+                                                                        ? tempPermissions.filter(p => p !== permission.label)
+                                                                        : [...tempPermissions, permission.label].sort();
+                                                                    setTempPermissions(newPermissions);
+                                                                }
+                                                            }
+                                                            setHasUserInteracted(true);
+                                                            setIsDisabled(false);
+                                                        }
+                                                    }, disabled: isAITLoading || isOtherPermissionDisabled, css: css `
+                            margin: 0 !important;
+                            width: 18px !important;
+                            height: 18px !important;
+                            cursor: ${isAITLoading || isOtherPermissionDisabled ? 'not-allowed' : 'pointer'} !important;
+                          ` }), _jsx("span", { css: css `
+                          font-size: 14px !important;
+                          color: ${isOtherPermissionDisabled ? '#999' : '#333'} !important;
+                        `, children: permission.label })] }) }, permission.id));
+                                }) }))] }), _jsxs("div", { css: css `
+            display: flex !important;
+            justify-content: flex-end !important;
+            gap: 12px !important;
+            border-top: 1px solid #e9ecef !important;
+            padding-top: 24px !important;
+            flex-shrink: 0 !important;
+            margin-top: auto !important;
+          `, children: [_jsx("button", { onClick: handleCancel, css: css `
+                padding: 10px 20px !important;
+                background-color: #f8f9fa !important;
+                color: #666 !important;
+                border: 1px solid #dee2e6 !important;
+                border-radius: 8px !important;
+                cursor: pointer !important;
+                font-size: 14px !important;
+                font-weight: 500 !important;
+                transition: all 0.2s !important;
+                margin-top: 0 !important;
+                
+                &:hover {
+                  background-color: #e9ecef !important;
+                  border-color: #ced4da !important;
+                }
+              `, children: "Cancel" }), _jsx("button", { onClick: handleSave, disabled: !hasPermissionChanges() || isSaving || isAITLoading, css: css `
+                padding: 10px 20px !important;
+                background-color: ${!hasPermissionChanges() || isSaving || isAITLoading ? '#e9ecef' : '#007bff'} !important;
+                color: ${!hasPermissionChanges() || isSaving || isAITLoading ? '#6c757d' : 'white'} !important;
+                border: none !important;
+                border-radius: 8px !important;
+                cursor: ${!hasPermissionChanges() || isSaving || isAITLoading ? 'not-allowed' : 'pointer'} !important;
+                font-size: 14px !important;
+                font-weight: 500 !important;
+                transition: all 0.2s !important;
+                margin-top: 0 !important;
+                
+                &:disabled {
+                  cursor: not-allowed !important;
+                }
+                
+                &:hover:not(:disabled) {
+                  background-color: #0056b3 !important;
+                }
+              `, children: isSaving ? 'Saving...' : 'Save' })] })] }))] }));
+};

package/dist/legacy/chatbot/ui/PresetMessages.d.ts

@@ -0,0 +1,4 @@
+/** @jsxImportSource @emotion/react */
+import * as React from 'react';
+export declare const PresetMessages: React.FC;
+//# sourceMappingURL=PresetMessages.d.ts.map

package/dist/legacy/chatbot/ui/PresetMessages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PresetMessages.d.ts","sourceRoot":"","sources":["../../../../src/legacy/chatbot/ui/PresetMessages.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EA0ClC,CAAC"}

package/dist/legacy/chatbot/ui/PresetMessages.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import { useChatBot } from '../context/ChatBotContext';
+import { actionButton } from './styles/isolatedStyles';
+export const PresetMessages = () => {
+    const { suggestions, handlePresetMessage } = useChatBot();
+    if (!suggestions || suggestions.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { css: css `
+      padding: 10px 15px !important;
+      border-top: 1px solid #eee !important;
+      overflow-x: auto !important;
+      white-space: nowrap !important;
+      display: flex !important;
+      gap: 10px !important;
+      align-items: center !important;
+    `, children: suggestions.map((preset, index) => (_jsx("button", { onClick: () => handlePresetMessage(preset), css: css `
+            ${actionButton}
+            padding: 5px 10px !important;
+            font-size: 12px !important;
+            white-space: nowrap !important;
+            flex-shrink: 0 !important;
+            
+            &:hover {
+              background-color: #0056b3 !important;
+            }
+            
+            &:active {
+              background-color: #004085 !important;
+            }
+          `, children: preset.text }, index))) }));
+};

package/dist/legacy/chatbot/ui/VoiceModePanel.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const VoiceModePanel: React.FC;
+//# sourceMappingURL=VoiceModePanel.d.ts.map

package/dist/legacy/chatbot/ui/VoiceModePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VoiceModePanel.d.ts","sourceRoot":"","sources":["../../../../src/legacy/chatbot/ui/VoiceModePanel.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqC/B,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EA4HlC,CAAC"}