@xcelsior/ui-chat 1.0.8 → 2.0.1

package/src/components/ChatInput.tsx

@@ -1,10 +1,21 @@
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { Button, TextArea } from '@xcelsior/design-system';
 import Picker from '@emoji-mart/react';
 import type { IChatConfig } from '../types';
 import type { UseFileUploadReturn } from '../hooks/useFileUpload';
 
+/** Detect if a hex/rgb color is "light" (luminance > 0.5) */
+function isLightColor(color: string): boolean {
+    let r = 0, g = 0, b = 0;
+    if (color.startsWith('#')) {
+        const hex = color.replace('#', '');
+        r = parseInt(hex.substring(0, 2), 16);
+        g = parseInt(hex.substring(2, 4), 16);
+        b = parseInt(hex.substring(4, 6), 16);
+    }
+    return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5;
+}
+
 interface ChatInputProps {
     onSend: (message: string) => void;
     onTyping?: (isTyping: boolean) => void;
@@ -27,6 +38,7 @@ export function ChatInput({
         top: number;
         left: number;
     } | null>(null);
+    const [isFocused, setIsFocused] = useState(false);
     const textAreaRef = useRef<HTMLTextAreaElement>(null);
     const emojiPickerRef = useRef<HTMLDivElement>(null);
     const emojiButtonRef = useRef<HTMLButtonElement>(null);
@@ -38,6 +50,13 @@ export function ChatInput({
     const enableEmoji = config.enableEmoji ?? true;
     const enableFileUpload = config.enableFileUpload ?? true;
 
+    // Theme tokens — aligned with Xcelsior website design system
+    const bgColor = config.theme?.background || '#00001a';
+    const isLightTheme = isLightColor(bgColor);
+    const textColor = config.theme?.text || (isLightTheme ? '#1a1a2e' : '#f7f7f8');
+    const textMuted = config.theme?.textMuted || (isLightTheme ? 'rgba(0,0,0,0.4)' : 'rgba(247,247,248,0.45)');
+    const primaryColor = config.theme?.primary || '#337eff';
+
     // Load emoji data
     useEffect(() => {
         if (!enableEmoji) return;
@@ -123,7 +142,7 @@ export function ChatInput({
                 startTypingTimeoutRef.current = setTimeout(() => {
                     onTyping(true);
                     isTypingRef.current = true;
-                }, 300); // 300ms debounce for start typing
+                }, 300);
             }
 
             // Set timeout to stop typing indicator after inactivity
@@ -132,7 +151,7 @@ export function ChatInput({
                     onTyping(false);
                     isTypingRef.current = false;
                 }
-            }, 1500); // 1.5s of inactivity to stop typing
+            }, 1500);
         }
     };
 
@@ -146,14 +165,12 @@ export function ChatInput({
 
         // Stop typing indicator
         if (onTyping) {
-            // Clear all typing-related timeouts
             if (typingTimeoutRef.current) {
                 clearTimeout(typingTimeoutRef.current);
             }
             if (startTypingTimeoutRef.current) {
                 clearTimeout(startTypingTimeoutRef.current);
             }
-            // Send stop typing event if currently typing
             if (isTypingRef.current) {
                 onTyping(false);
                 isTypingRef.current = false;
@@ -214,114 +231,241 @@ export function ChatInput({
         }
     };
 
-    return (
-        <div className="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-3">
-            <div className="relative flex-1">
-                <div className="relative">
-                    <TextArea
-                        ref={textAreaRef}
-                        value={message}
-                        onChange={(e) => handleTyping(e.target.value)}
-                        onKeyDown={handleKeyDown}
-                        placeholder="Type a message..."
-                        rows={1}
-                        className="resize-none pr-24 pl-4 py-3 rounded-full bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-sm leading-5 placeholder-gray-500 dark:placeholder-gray-400"
-                        disabled={disabled}
-                    />
-
-                    {/* Actions inside the input on the right */}
-                    <div className="absolute right-12 top-1/2 -translate-y-1/2 flex items-center gap-1">
-                        {enableEmoji && (
-                            <div className="relative">
-                                <button
-                                    ref={emojiButtonRef}
-                                    type="button"
-                                    onClick={() => {
-                                        if (!showEmojiPicker && emojiButtonRef.current) {
-                                            const rect =
-                                                emojiButtonRef.current.getBoundingClientRect();
-                                            setEmojiPickerPosition({
-                                                top: rect.top - 450,
-                                                left: rect.left - 290,
-                                            });
-                                        }
-                                        setShowEmojiPicker((v) => !v);
-                                    }}
-                                    className="p-1.5 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
-                                    disabled={disabled}
-                                    aria-label="Add emoji"
-                                >
-                                    <span className="text-lg">😊</span>
-                                </button>
-                            </div>
-                        )}
-
-                        {enableFileUpload && fileUpload.canUpload && (
-                            <>
-                                <button
-                                    type="button"
-                                    onClick={() => fileInputRef.current?.click()}
-                                    className="p-1.5 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
-                                    disabled={disabled || fileUpload.isUploading}
-                                    aria-label="Attach file"
-                                >
-                                    {fileUpload.isUploading ? (
-                                        <span className="text-lg animate-spin">⏳</span>
-                                    ) : (
-                                        <span className="text-lg">📎</span>
-                                    )}
-                                </button>
-                                <input
-                                    ref={fileInputRef}
-                                    type="file"
-                                    accept="image/*,application/pdf,.doc,.docx"
-                                    className="hidden"
-                                    onChange={handleFileSelect}
-                                />
-                            </>
-                        )}
-                    </div>
+    const canSend = message.trim().length > 0 && !disabled;
+
+    const placeholderColor = isLightTheme ? 'rgba(0,0,0,0.35)' : 'rgba(247,247,248,0.3)';
 
-                    {/* Send button positioned inside the input at far right */}
-                    <div className="absolute right-2 top-1/2 -translate-y-1/2">
-                        <Button
-                            onClick={handleSend}
-                            disabled={!message.trim() || disabled}
-                            variant="primary"
-                            size="sm"
-                            className="h-9 w-9 p-0 rounded-full flex items-center justify-center shadow-sm"
+    return (
+        <div
+            className="px-4 py-3"
+            style={{
+                borderTop: isLightTheme
+                    ? '1px solid rgba(0,0,0,0.06)'
+                    : '1px solid rgba(255,255,255,0.06)',
+            }}
+        >
+            <div
+                className="relative flex items-center rounded-full transition-all duration-200"
+                style={{
+                    backgroundColor: isLightTheme
+                        ? 'rgba(112,115,124,0.08)'
+                        : 'rgba(112,115,124,0.12)',
+                    outline: isFocused ? `2px solid ${primaryColor}` : 'none',
+                    outlineOffset: '-1px',
+                    border: isLightTheme
+                        ? '1px solid rgba(0,0,0,0.1)'
+                        : '1px solid rgba(255,255,255,0.08)',
+                    backdropFilter: 'blur(32px)',
+                }}
+            >
+                {/* Placeholder color via inline style element */}
+                <style>{`.xchat-input::placeholder { color: ${placeholderColor}; }`}</style>
+                <textarea
+                    ref={textAreaRef}
+                    value={message}
+                    onChange={(e) => handleTyping(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    onFocus={() => setIsFocused(true)}
+                    onBlur={() => setIsFocused(false)}
+                    placeholder="Type a message..."
+                    rows={1}
+                    className="xchat-input flex-1 resize-none bg-transparent"
+                    style={{
+                        color: textColor,
+                        border: 'none',
+                        outline: 'none',
+                        boxShadow: 'none',
+                        WebkitAppearance: 'none',
+                        padding: '10px 0 10px 20px',
+                        minHeight: '42px',
+                        maxHeight: '120px',
+                        caretColor: primaryColor,
+                        fontSize: '14px',
+                        lineHeight: '20px',
+                        letterSpacing: '0.006em',
+                    }}
+                    disabled={disabled}
+                />
+
+                {/* Action buttons row */}
+                <div className="flex items-center gap-1 px-2 shrink-0">
+                    {enableEmoji && (
+                        <button
+                            ref={emojiButtonRef}
+                            type="button"
+                            onClick={() => {
+                                if (!showEmojiPicker && emojiButtonRef.current) {
+                                    const rect = emojiButtonRef.current.getBoundingClientRect();
+                                    setEmojiPickerPosition({
+                                        top: rect.top - 450,
+                                        left: rect.left - 290,
+                                    });
+                                }
+                                setShowEmojiPicker((v) => !v);
+                            }}
+                            className="p-1.5 rounded-lg transition-all duration-150"
+                            style={{
+                                color: textMuted,
+                                backgroundColor: 'transparent',
+                            }}
+                            onMouseEnter={(e) => {
+                                e.currentTarget.style.backgroundColor = isLightTheme ? 'rgba(0,0,0,0.06)' : 'rgba(255,255,255,0.06)';
+                                e.currentTarget.style.color = textColor;
+                            }}
+                            onMouseLeave={(e) => {
+                                e.currentTarget.style.backgroundColor = 'transparent';
+                                e.currentTarget.style.color = textMuted;
+                            }}
+                            disabled={disabled}
+                            aria-label="Add emoji"
                         >
-                            <span className="flex items-center justify-center">
-                                <svg
-                                    className="w-4 h-4 rotate-90"
-                                    fill="none"
-                                    viewBox="0 0 24 24"
-                                    stroke="currentColor"
-                                    aria-hidden="true"
-                                >
-                                    <title>Send icon</title>
-                                    <path
+                            <svg
+                                width="18"
+                                height="18"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="1.75"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                aria-hidden="true"
+                            >
+                                <title>Emoji</title>
+                                <circle cx="12" cy="12" r="10" />
+                                <path d="M8 14s1.5 2 4 2 4-2 4-2" />
+                                <line x1="9" y1="9" x2="9.01" y2="9" />
+                                <line x1="15" y1="9" x2="15.01" y2="9" />
+                            </svg>
+                        </button>
+                    )}
+
+                    {enableFileUpload && fileUpload.canUpload && (
+                        <>
+                            <button
+                                type="button"
+                                onClick={() => fileInputRef.current?.click()}
+                                className="p-1.5 rounded-lg transition-all duration-150"
+                                style={{
+                                    color: textMuted,
+                                    backgroundColor: 'transparent',
+                                }}
+                                onMouseEnter={(e) => {
+                                    e.currentTarget.style.backgroundColor =
+                                        'rgba(255,255,255,0.06)';
+                                    e.currentTarget.style.color = textColor;
+                                }}
+                                onMouseLeave={(e) => {
+                                    e.currentTarget.style.backgroundColor = 'transparent';
+                                    e.currentTarget.style.color = textMuted;
+                                }}
+                                disabled={disabled || fileUpload.isUploading}
+                                aria-label="Attach file"
+                            >
+                                {fileUpload.isUploading ? (
+                                    <svg
+                                        width="18"
+                                        height="18"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        strokeWidth="1.75"
+                                        className="animate-spin"
+                                        aria-hidden="true"
+                                    >
+                                        <title>Uploading</title>
+                                        <path d="M21 12a9 9 0 11-6.219-8.56" />
+                                    </svg>
+                                ) : (
+                                    <svg
+                                        width="18"
+                                        height="18"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        strokeWidth="1.75"
                                         strokeLinecap="round"
                                         strokeLinejoin="round"
-                                        strokeWidth={2}
-                                        d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
-                                    />
-                                </svg>
-                            </span>
-                        </Button>
-                    </div>
+                                        aria-hidden="true"
+                                    >
+                                        <title>Attach file</title>
+                                        <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" />
+                                    </svg>
+                                )}
+                            </button>
+                            <input
+                                ref={fileInputRef}
+                                type="file"
+                                accept="image/*,application/pdf,.doc,.docx"
+                                className="hidden"
+                                onChange={handleFileSelect}
+                            />
+                        </>
+                    )}
+
+                    {/* Send button — gradient pill matching website CTA style */}
+                    <button
+                        type="button"
+                        onClick={handleSend}
+                        disabled={!canSend}
+                        className="p-1.5 rounded-lg transition-all duration-200"
+                        style={{
+                            background: canSend
+                                ? `linear-gradient(135deg, ${primaryColor}, ${config.theme?.primaryStrong || '#005eff'})`
+                                : 'transparent',
+                            color: canSend ? '#ffffff' : textMuted,
+                            opacity: canSend ? 1 : 0.35,
+                            cursor: canSend ? 'pointer' : 'default',
+                            boxShadow: canSend
+                                ? `0 2px 8px -2px ${primaryColor}60`
+                                : 'none',
+                        }}
+                        aria-label="Send message"
+                    >
+                        <svg
+                            width="18"
+                            height="18"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            aria-hidden="true"
+                        >
+                            <title>Send</title>
+                            <line x1="22" y1="2" x2="11" y2="13" />
+                            <polygon points="22 2 15 22 11 13 2 9 22 2" />
+                        </svg>
+                    </button>
                 </div>
             </div>
 
+            {/* Upload progress */}
             {fileUpload.isUploading && (
-                <div className="mt-2">
-                    <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
+                <div className="mt-2 px-1">
+                    <div
+                        className="w-full rounded-full overflow-hidden"
+                        style={{
+                            height: 3,
+                            backgroundColor: isLightTheme ? 'rgba(0,0,0,0.06)' : 'rgba(255,255,255,0.06)',
+                        }}
+                    >
                         <div
-                            className="bg-blue-600 h-1.5 rounded-full transition-all duration-300"
-                            style={{ width: `${fileUpload.uploadProgress}%` }}
+                            className="h-full rounded-full transition-all duration-300"
+                            style={{
+                                width: `${fileUpload.uploadProgress}%`,
+                                background: `linear-gradient(90deg, ${primaryColor}, ${config.theme?.primaryStrong || '#005eff'})`,
+                            }}
                         />
                     </div>
-                    <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                    <p
+                        className="mt-1"
+                        style={{
+                            fontSize: '11px',
+                            letterSpacing: '0.019em',
+                            color: textMuted,
+                        }}
+                    >
                         Uploading... {fileUpload.uploadProgress}%
                     </p>
                 </div>
@@ -335,11 +479,16 @@ export function ChatInput({
                 createPortal(
                     <div
                         ref={emojiPickerRef}
-                        className="fixed rounded-lg border bg-white dark:bg-gray-800 dark:border-gray-700 shadow-xl"
+                        className="fixed rounded-xl overflow-hidden"
                         style={{
                             top: `${emojiPickerPosition.top}px`,
                             left: `${emojiPickerPosition.left}px`,
                             zIndex: 9999,
+                            boxShadow: [
+                                'inset 0 0 0 0.5px rgba(255,255,255,0.06)',
+                                'inset 0 1px 0 0 rgba(255,255,255,0.1)',
+                                '0 16px 48px -8px rgba(0,0,0,0.5)',
+                            ].join(', '),
                         }}
                     >
                         <Picker
@@ -353,7 +502,7 @@ export function ChatInput({
                             navPosition="bottom"
                             perLine={8}
                             searchPosition="sticky"
-                            theme="auto"
+                            theme="dark"
                         />
                     </div>,
                     document.body