@xcelsior/ui-chat 1.0.7 → 2.0.0

package/src/components/PreChatForm.tsx

@@ -16,7 +16,8 @@ interface PreChatFormProps {
 }
 
 /**
- * PreChatForm component for collecting user information before starting chat
+ * PreChatForm component for collecting user information before starting chat.
+ * Styled to match the Xcelsior website design system.
  */
 export function PreChatForm({
     onSubmit,
@@ -30,6 +31,7 @@ export function PreChatForm({
     const [email, setEmail] = useState(initialEmail);
     const [errors, setErrors] = useState<{ name?: string; email?: string }>({});
     const [isSubmitting, setIsSubmitting] = useState(false);
+    const [focusedField, setFocusedField] = useState<string | null>(null);
 
     const validateForm = (): boolean => {
         const newErrors: { name?: string; email?: string } = {};
@@ -72,82 +74,172 @@ export function PreChatForm({
         }
     };
 
-    // Show full form
+    const inputStyle = (fieldName: string, hasError: boolean): React.CSSProperties => ({
+        width: '100%',
+        padding: '10px 16px',
+        fontSize: '14px',
+        lineHeight: '20px',
+        letterSpacing: '0.006em',
+        color: '#f7f7f8',
+        backgroundColor: 'rgba(255,255,255,0.04)',
+        border: 'none',
+        borderRadius: '12px',
+        outline: 'none',
+        boxShadow: hasError
+            ? 'inset 0 0 0 1px rgba(255,99,99,0.5)'
+            : focusedField === fieldName
+              ? 'inset 0 0 0 1px rgba(51,126,255,0.4), 0 0 0 3px rgba(51,126,255,0.15)'
+              : 'inset 0 0 0 0.5px rgba(255,255,255,0.08)',
+        transition: 'box-shadow 0.2s ease',
+        caretColor: '#337eff',
+    });
+
     return (
         <div
-            className={`fixed bottom-4 right-4 z-50 flex flex-col bg-white dark:bg-gray-900 rounded-lg shadow-2xl overflow-hidden ${className}`}
+            className={`fixed bottom-4 right-4 z-50 flex flex-col overflow-hidden ${className}`}
             style={{
-                width: '400px',
+                width: 380,
                 maxHeight: 'calc(100vh - 2rem)',
+                backgroundColor: '#00001a',
+                borderRadius: 16,
+                boxShadow: [
+                    'inset 0 0 0 0.5px rgba(255,255,255,0.06)',
+                    'inset 0 1px 0 0 rgba(255,255,255,0.12)',
+                    '0 25px 60px -12px rgba(0,0,0,0.6)',
+                    '0 0 40px -8px rgba(51,126,255,0.15)',
+                ].join(', '),
+                /* Dot grid texture */
+                backgroundImage:
+                    'radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px)',
+                backgroundSize: '24px 24px',
             }}
         >
-            {/* Header */}
-            <div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-4">
-                <div className="flex items-start justify-between">
-                    <div className="flex-1">
-                        <h2 className="text-lg font-semibold">Start a Conversation</h2>
-                        <p className="text-sm text-blue-100 mt-1">
-                            Please provide your details to continue
-                        </p>
-                    </div>
-                    <div className="flex gap-2 ml-2">
-                        {/* Minimize Button */}
-                        <button
-                            type="button"
-                            onClick={onMinimize}
-                            className="text-white hover:bg-white/20 rounded p-1 transition-colors"
-                            aria-label="Minimize chat"
-                        >
-                            <svg
-                                className="w-5 h-5"
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
+            {/* Header — matching ChatHeader gradient */}
+            <div
+                className="relative text-white overflow-hidden"
+                style={{
+                    background: 'linear-gradient(135deg, #337eff 0%, #005eff 50%, #001a66 100%)',
+                }}
+            >
+                {/* Glass overlay */}
+                <div
+                    className="absolute inset-0 pointer-events-none"
+                    style={{
+                        background:
+                            'linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 40%)',
+                    }}
+                />
+                <div className="relative px-5 py-4">
+                    <div className="flex items-start justify-between">
+                        <div className="flex-1">
+                            <h2
+                                className="font-semibold"
+                                style={{
+                                    fontSize: '17px',
+                                    letterSpacing: '-0.01em',
+                                }}
                             >
-                                <title>Minimize</title>
-                                <path
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth={2}
-                                    d="M20 12H4"
-                                />
-                            </svg>
-                        </button>
-                        {/* Close Button */}
-                        <button
-                            type="button"
-                            onClick={onClose}
-                            className="text-white hover:bg-white/20 rounded p-1 transition-colors"
-                            aria-label="Close chat"
-                        >
-                            <svg
-                                className="w-5 h-5"
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
+                                Start a Conversation
+                            </h2>
+                            <p
+                                className="mt-1"
+                                style={{
+                                    fontSize: '13px',
+                                    letterSpacing: '0.015em',
+                                    color: 'rgba(255,255,255,0.6)',
+                                }}
                             >
-                                <title>Close</title>
-                                <path
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth={2}
-                                    d="M6 18L18 6M6 6l12 12"
-                                />
-                            </svg>
-                        </button>
+                                Please provide your details to continue
+                            </p>
+                        </div>
+                        <div className="flex gap-1 ml-2">
+                            <button
+                                type="button"
+                                onClick={onMinimize}
+                                className="p-2 rounded-lg transition-all duration-150"
+                                style={{ backgroundColor: 'transparent' }}
+                                onMouseEnter={(e) => {
+                                    e.currentTarget.style.backgroundColor =
+                                        'rgba(255,255,255,0.1)';
+                                }}
+                                onMouseLeave={(e) => {
+                                    e.currentTarget.style.backgroundColor = 'transparent';
+                                }}
+                                aria-label="Minimize chat"
+                            >
+                                <svg
+                                    width="18"
+                                    height="18"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <title>Minimize</title>
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M20 12H4"
+                                    />
+                                </svg>
+                            </button>
+                            <button
+                                type="button"
+                                onClick={onClose}
+                                className="p-2 rounded-lg transition-all duration-150"
+                                style={{ backgroundColor: 'transparent' }}
+                                onMouseEnter={(e) => {
+                                    e.currentTarget.style.backgroundColor =
+                                        'rgba(255,255,255,0.1)';
+                                }}
+                                onMouseLeave={(e) => {
+                                    e.currentTarget.style.backgroundColor = 'transparent';
+                                }}
+                                aria-label="Close chat"
+                            >
+                                <svg
+                                    width="18"
+                                    height="18"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <title>Close</title>
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M6 18L18 6M6 6l12 12"
+                                    />
+                                </svg>
+                            </button>
+                        </div>
                     </div>
                 </div>
+                {/* Bottom edge line */}
+                <div
+                    className="h-px"
+                    style={{
+                        background:
+                            'linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.12) 70%, transparent 95%)',
+                    }}
+                />
             </div>
 
             {/* Form */}
-            <form onSubmit={handleSubmit} className="p-6 space-y-5">
+            <form onSubmit={handleSubmit} className="p-5 flex flex-col gap-4">
                 {/* Name Input */}
                 <div>
                     <label
                         htmlFor="chat-name"
-                        className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-200"
+                        className="block mb-2 font-medium"
+                        style={{
+                            fontSize: '13px',
+                            letterSpacing: '0.015em',
+                            color: 'rgba(247,247,248,0.72)',
+                        }}
                     >
-                        Name <span className="text-red-500">*</span>
+                        Name <span style={{ color: '#ff6363' }}>*</span>
                     </label>
                     <input
                         type="text"
@@ -159,17 +251,23 @@ export function PreChatForm({
                                 setErrors((prev) => ({ ...prev, name: undefined }));
                             }
                         }}
-                        className={`block w-full px-4 py-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border ${
-                            errors.name
-                                ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
-                                : 'border-gray-300 focus:ring-blue-500 focus:border-blue-500'
-                        } dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500`}
+                        onFocus={() => setFocusedField('name')}
+                        onBlur={() => setFocusedField(null)}
+                        style={inputStyle('name', !!errors.name)}
                         placeholder="John Doe"
                         disabled={isSubmitting}
                         autoComplete="name"
                     />
                     {errors.name && (
-                        <p className="mt-2 text-sm text-red-600 dark:text-red-500" role="alert">
+                        <p
+                            className="mt-1.5"
+                            style={{
+                                fontSize: '12px',
+                                letterSpacing: '0.015em',
+                                color: '#ff6363',
+                            }}
+                            role="alert"
+                        >
                             {errors.name}
                         </p>
                     )}
@@ -179,9 +277,14 @@ export function PreChatForm({
                 <div>
                     <label
                         htmlFor="chat-email"
-                        className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-200"
+                        className="block mb-2 font-medium"
+                        style={{
+                            fontSize: '13px',
+                            letterSpacing: '0.015em',
+                            color: 'rgba(247,247,248,0.72)',
+                        }}
                     >
-                        Email <span className="text-red-500">*</span>
+                        Email <span style={{ color: '#ff6363' }}>*</span>
                     </label>
                     <input
                         type="email"
@@ -193,51 +296,66 @@ export function PreChatForm({
                                 setErrors((prev) => ({ ...prev, email: undefined }));
                             }
                         }}
-                        className={`block w-full px-4 py-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border ${
-                            errors.email
-                                ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
-                                : 'border-gray-300 focus:ring-blue-500 focus:border-blue-500'
-                        } dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500`}
+                        onFocus={() => setFocusedField('email')}
+                        onBlur={() => setFocusedField(null)}
+                        style={inputStyle('email', !!errors.email)}
                         placeholder="john@example.com"
                         disabled={isSubmitting}
                         autoComplete="email"
                     />
                     {errors.email && (
-                        <p className="mt-2 text-sm text-red-600 dark:text-red-500" role="alert">
+                        <p
+                            className="mt-1.5"
+                            style={{
+                                fontSize: '12px',
+                                letterSpacing: '0.015em',
+                                color: '#ff6363',
+                            }}
+                            role="alert"
+                        >
                             {errors.email}
                         </p>
                     )}
                 </div>
 
-                {/* Submit Button */}
+                {/* Submit Button — gradient pill matching website CTA */}
                 <button
                     type="submit"
                     disabled={isSubmitting}
-                    className="w-full px-5 py-2.5 text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-4 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+                    className="w-full py-2.5 rounded-xl font-semibold text-white transition-all duration-200"
+                    style={{
+                        fontSize: '14px',
+                        letterSpacing: '0.006em',
+                        background: 'linear-gradient(135deg, #337eff, #005eff)',
+                        boxShadow: '0 4px 16px -4px rgba(51,126,255,0.4)',
+                        opacity: isSubmitting ? 0.6 : 1,
+                        cursor: isSubmitting ? 'not-allowed' : 'pointer',
+                    }}
+                    onMouseEnter={(e) => {
+                        if (!isSubmitting) {
+                            e.currentTarget.style.boxShadow =
+                                '0 6px 20px -4px rgba(51,126,255,0.5)';
+                        }
+                    }}
+                    onMouseLeave={(e) => {
+                        e.currentTarget.style.boxShadow =
+                            '0 4px 16px -4px rgba(51,126,255,0.4)';
+                    }}
                 >
                     {isSubmitting ? (
-                        <span className="flex items-center justify-center">
+                        <span className="flex items-center justify-center gap-2">
                             <svg
-                                className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
+                                className="animate-spin"
+                                width="18"
+                                height="18"
                                 viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="2"
                                 aria-label="Loading"
                             >
                                 <title>Loading</title>
-                                <circle
-                                    className="opacity-25"
-                                    cx="12"
-                                    cy="12"
-                                    r="10"
-                                    stroke="currentColor"
-                                    strokeWidth="4"
-                                />
-                                <path
-                                    className="opacity-75"
-                                    fill="currentColor"
-                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                                />
+                                <path d="M21 12a9 9 0 11-6.219-8.56" />
                             </svg>
                             Starting Chat...
                         </span>
@@ -247,15 +365,37 @@ export function PreChatForm({
                 </button>
 
                 {/* Privacy Notice */}
-                <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
+                <p
+                    className="text-center"
+                    style={{
+                        fontSize: '11px',
+                        letterSpacing: '0.019em',
+                        color: 'rgba(247,247,248,0.28)',
+                    }}
+                >
                     We respect your privacy. Your information will only be used to assist you.
                 </p>
             </form>
 
             {/* Footer */}
-            <div className="bg-gray-50 dark:bg-gray-950 px-4 py-2 text-center border-t border-gray-200 dark:border-gray-700">
-                <p className="text-xs text-gray-500 dark:text-gray-400">
-                    Powered by <span className="font-semibold">Xcelsior Chat</span>
+            <div
+                className="px-4 py-1.5 text-center"
+                style={{
+                    borderTop: '1px solid rgba(255,255,255,0.06)',
+                    backgroundColor: 'rgba(0,0,0,0.2)',
+                }}
+            >
+                <p
+                    style={{
+                        fontSize: '10px',
+                        letterSpacing: '0.025em',
+                        color: 'rgba(247,247,248,0.28)',
+                    }}
+                >
+                    Powered by{' '}
+                    <span style={{ fontWeight: 600, color: 'rgba(247,247,248,0.45)' }}>
+                        Xcelsior
+                    </span>
                 </p>
             </div>
         </div>