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

package/src/legacy/chatbot/ui/PermissionForm.tsx

@@ -0,0 +1,632 @@
+/** @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, modalOverlay } from './styles/isolatedStyles';
+
+interface PermissionFormProps {
+  onClose: () => void;
+}
+
+export const PermissionForm: React.FC<PermissionFormProps> = ({ 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<any[]>([]);
+  const [isSaving, setIsSaving] = React.useState(false);
+  const [tempPermissions, setTempPermissions] = React.useState<string[]>(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 (
+      <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;
+      `}>
+        <div css={css`
+          display: flex !important;
+          justify-content: space-between !important;
+          align-items: center !important;
+          margin-bottom: 24px !important;
+        `}>
+          <h3 css={css`
+            margin: 0 !important;
+            font-size: 20px !important;
+            font-weight: 600 !important;
+            color: #1a1a1a !important;
+          `}>AIT Settings</h3>
+          <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;
+              }
+            `}
+          >
+            ×
+          </button>
+        </div>
+        <div css={css`
+          text-align: center !important;
+          padding: 32px 0 !important;
+        `}>
+          <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;
+          `}>
+            <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;
+            `}></div>
+          </div>
+          <p css={css`
+            margin-bottom: 24px !important;
+            font-size: 16px !important;
+            color: #666 !important;
+          `}>{walletTextUtils.getWalletText('Checking wallet status...', serviceId)}</p>
+        </div>
+        <style>{`
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        `}</style>
+      </div>
+    );
+  }
+
+  return (
+    <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;
+      }
+    `}>
+      <div css={css`
+        display: flex !important;
+        justify-content: space-between !important;
+        align-items: center !important;
+        margin-bottom: 24px !important;
+      `}>
+        <h3 css={css`
+          margin: 0 !important;
+          font-size: 20px !important;
+          font-weight: 600 !important;
+          color: #1a1a1a !important;
+        `}>AIT Settings</h3>
+        <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"
+        >
+          ×
+        </button>
+      </div>
+
+      {!hitAddress ? (
+        <div css={css`
+          text-align: center !important;
+          padding: 32px 0 !important;
+        `}>
+          <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;
+          `}>
+            <span css={css`font-size: 32px !important;`}>👛</span>
+          </div>
+          <p css={css`
+            margin-bottom: 24px !important;
+            font-size: 16px !important;
+            color: #666 !important;
+          `}>{walletTextUtils.getWalletText('Please connect your wallet first', serviceId)}</p>
+          <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;
+              }
+            `}
+          >
+            {Boolean(hitAddress) ? 'Connected' : walletTextUtils.getWalletText('Connect Wallet', serviceId)}
+          </button>
+        </div>
+      ) : isNeedSignInWithWallet ? (
+        <div css={css`
+          text-align: center !important;
+          padding: 32px 0 !important;
+        `}>
+          <div css={css`margin-bottom: 24px !important;`}>
+            <h4 css={css`
+              margin-bottom: 12px !important;
+              font-size: 16px !important;
+              color: #666 !important;
+            `}>{walletTextUtils.getWalletText('Connected Wallet', serviceId)}</h4>
+            <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;
+            `}>
+              {hitAddress}
+            </p>
+          </div>
+          <p css={css`
+            margin-bottom: 24px !important;
+            font-size: 16px !important;
+            color: #666 !important;
+          `}>Please sign in to continue</p>
+          <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;
+              }
+            `}
+          >
+            {!isNeedSignInWithWallet ? 'Signed In' : 'Sign In'}
+          </button>
+        </div>
+      ) : shouldShowVerificationPrompt ? (
+        <div css={css`
+          text-align: center !important;
+          padding: 32px 0 !important;
+        `}>
+          <div css={css`margin-bottom: 24px !important;`}>
+            <h4 css={css`
+              margin-bottom: 12px !important;
+              font-size: 16px !important;
+              color: #666 !important;
+            `}>{walletTextUtils.getWalletText('Connected Wallet', serviceId)}</h4>
+            <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;
+            `}>
+              {hitAddress}
+            </p>
+          </div>
+          <p css={css`
+            margin-bottom: 24px !important;
+            font-size: 16px !important;
+            color: #666 !important;
+          `}>
+            {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)
+            }
+          </p>
+          <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;
+              }
+            `}
+          >
+            {walletTextUtils.getWalletText('Verify your wallet', serviceId)}
+          </button>
+        </div>
+      ) : (
+        <>
+          <div css={css`margin-bottom: 24px !important;`}>
+            <h4 css={css`
+              margin-bottom: 12px !important;
+              font-size: 16px !important;
+              color: #666 !important;
+            `}>{walletTextUtils.getWalletText('Connected Wallet', serviceId)}</h4>
+            <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;
+            `}>
+              {hitAddress}
+            </p>
+          </div>
+          <div css={css`
+            margin-bottom: 24px !important;
+            flex: 1 !important;
+            display: flex !important;
+            flex-direction: column !important;
+            min-height: 0 !important;
+          `}>
+            <h4 css={css`
+              margin-bottom: 12px !important;
+              font-size: 16px !important;
+              color: #666 !important;
+              flex-shrink: 0 !important;
+            `}>Permissions</h4>
+            {isAITLoading ? (
+              <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;
+              `}>
+                Loading permissions...
+              </div>
+            ) : (
+              <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;
+              `}>
+                {availablePermissions.map((permission) => {
+                  const isAllPermission = permission.label === 'ALL';
+                  const isOtherPermissionDisabled = isAllSelected && !isAllPermission;
+                  const isChecked = isAllSelected && !isAllPermission 
+                    ? true 
+                    : tempPermissions.includes(permission.label);
+                  
+                  return (
+                    <div key={permission.id} css={css`margin-bottom: 12px !important;`}>
+                      <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;
+                        }
+                      `}
+                      >
+                        <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;
+                          `}
+                        />
+                        <span css={css`
+                          font-size: 14px !important;
+                          color: ${isOtherPermissionDisabled ? '#999' : '#333'} !important;
+                        `}>{permission.label}</span>
+                      </label>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+          <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;
+          `}>
+            <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;
+                }
+              `}
+            >
+              Cancel
+            </button>
+            <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;
+                }
+              `}
+            >
+              {isSaving ? 'Saving...' : 'Save'}
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}; 

package/src/legacy/chatbot/ui/PresetMessages.tsx

@@ -0,0 +1,50 @@
+/** @jsxImportSource @emotion/react */
+import * as React from 'react';
+import { css } from '@emotion/react';
+import { useChatBot } from '../context/ChatBotContext';
+import { PresetMessage } from '../types/ChatBotTypes';
+import { actionButton } from './styles/isolatedStyles';
+
+export const PresetMessages: React.FC = () => {
+  const { suggestions, handlePresetMessage } = useChatBot();
+
+  if (!suggestions || suggestions.length === 0) {
+    return null;
+  }
+
+  return (
+    <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;
+    `}>
+      {suggestions.map((preset: PresetMessage, index: number) => (
+        <button
+          key={index}
+          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;
+            }
+          `}
+        >
+          {preset.text}
+        </button>
+      ))}
+    </div>
+  );
+};