andy-widget-react 2.0.5

package/src/components/ChatBubble.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { CHAT_BUBBLE_DEFAULT_ICON_URL } from 'andy-widget-core'
+import type { ChatbotConfig } from '../types'
+
+interface ChatBubbleProps {
+	isOpen: boolean
+	config: ChatbotConfig | null
+	onClick: () => void
+}
+
+const ChatBubble: React.FC<ChatBubbleProps> = ({ isOpen, config, onClick }) => {
+	const bubbleClasses = ['andy-bubble', isOpen && 'andy-bubble--open'].filter(Boolean).join(' ')
+
+	return (
+		<div
+			className={bubbleClasses}
+			onClick={onClick}
+			role='button'
+			tabIndex={0}
+			aria-label={isOpen ? 'Close chat' : 'Open chat'}
+			onKeyDown={e => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					e.preventDefault()
+					onClick()
+				}
+			}}
+		>
+			{isOpen ? (
+				<svg
+					className='andy-chat-bubble__icon'
+					width='28'
+					height='28'
+					viewBox='0 0 24 24'
+					fill='currentColor'
+					xmlns='http://www.w3.org/2000/svg'
+				>
+					<path d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z' />
+				</svg>
+			) : config?.logoUrl ? (
+				<img src={config.logoUrl} alt='Chatbot Logo' className='andy-chat-bubble__logo' />
+			) : (
+				<img src={CHAT_BUBBLE_DEFAULT_ICON_URL} alt='Chat' className='andy-chat-bubble__icon' />
+			)}
+		</div>
+	)
+}
+
+export default ChatBubble

package/src/components/ChatWindow.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import MessageList from './MessageList'
+import MessageInput from './MessageInput'
+import { FOOTER_TEXT, FOOTER_URL } from 'andy-widget-core'
+import type { ChatbotConfig, Message } from '../types'
+
+interface ChatWindowProps {
+	config: ChatbotConfig | null
+	messages: Message[]
+	isLoading: boolean
+	onClose: () => void
+	onSendMessage: (message: string) => Promise<void> | void
+}
+
+const ChatWindow: React.FC<ChatWindowProps> = ({ config, messages, isLoading, onClose, onSendMessage }) => {
+	const windowClasses = ['andy-chatbot', 'open'].filter(Boolean).join(' ')
+
+	return (
+		<div className={windowClasses}>
+			<div className='andy-header'>
+				<div className='andy-title'>{config?.headline || 'Chat with our AI ✨'}</div>
+				<div className='andy-subtitle'>{config?.description || 'Ask any question and our AI will answer'}</div>
+
+				<div className='andy-close' onClick={onClose} role='button' tabIndex={0}>
+					✕
+				</div>
+			</div>
+
+			<div className='andy-messages' id='andy-messages'>
+				<MessageList
+					messages={messages}
+					isLoading={isLoading}
+					logoUrl={config?.logoUrl}
+					botName={config?.name}
+				/>
+			</div>
+
+			<div className='andy-input-container'>
+				<MessageInput onSendMessage={onSendMessage} disabled={isLoading} placeholder='Type your message here...' />
+			</div>
+
+			{config?.showBranding !== false && (
+				<div className='andy-footer'>
+					<a href={FOOTER_URL} target='_blank' rel='noopener noreferrer'>
+						{FOOTER_TEXT}
+					</a>
+				</div>
+			)}
+		</div>
+	)
+}
+
+export default ChatWindow

package/src/components/FAQ.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import type { FAQItem } from '../types'
+
+interface FAQProps {
+	faqs?: FAQItem[]
+	onBack: () => void
+}
+
+const FAQ: React.FC<FAQProps> = ({ faqs = [], onBack }) => {
+	return (
+		<div className='andy-chat-faq'>
+			<button className='andy-chat-faq__back' onClick={onBack} type='button' aria-label='Back to chat'>
+				<svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' width='16' height='16'>
+					<path d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z' fill='currentColor' />
+				</svg>
+				Back to chat
+			</button>
+
+			<div className='andy-chat-faq__title'>Frequently Asked Questions</div>
+
+			<div className='andy-chat-faq__list'>
+				{faqs.length > 0 ? (
+					faqs.map((faq, index) => (
+						<div key={index} className='andy-chat-faq__item'>
+							<div className='andy-chat-faq__question'>{faq.question}</div>
+							<div className='andy-chat-faq__answer'>{faq.answer}</div>
+						</div>
+					))
+				) : (
+					<div className='andy-chat-faq__empty'>
+						<div className='andy-chat-faq__empty-icon'>
+							<svg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+								<path
+									d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z'
+									fill='currentColor'
+									opacity='0.3'
+								/>
+							</svg>
+						</div>
+						<div className='andy-chat-faq__empty-text'>No frequently asked questions available at this time.</div>
+					</div>
+				)}
+			</div>
+		</div>
+	)
+}
+
+export default FAQ

package/src/components/MessageInput.tsx

@@ -0,0 +1,82 @@
+import React, { useState, useRef, KeyboardEvent, ChangeEvent, FormEvent } from 'react'
+
+interface MessageInputProps {
+	onSendMessage: (message: string) => Promise<void> | void
+	disabled?: boolean
+	placeholder?: string
+}
+
+const MessageInput: React.FC<MessageInputProps> = ({
+	onSendMessage,
+	disabled = false,
+	placeholder = 'Type your message here...'
+}) => {
+	const [message, setMessage] = useState('')
+	const [isSubmitting, setIsSubmitting] = useState(false)
+	const inputRef = useRef<HTMLInputElement>(null)
+
+	const handleSubmit = async (e: FormEvent<HTMLFormElement> | KeyboardEvent<HTMLInputElement>) => {
+		e.preventDefault()
+
+		const trimmedMessage = message.trim()
+		if (!trimmedMessage || disabled || isSubmitting) {
+			return
+		}
+
+		try {
+			setIsSubmitting(true)
+			await onSendMessage(trimmedMessage)
+			setMessage('')
+
+			if (inputRef.current) {
+				inputRef.current.focus()
+			}
+		} catch (error) {
+			console.error('Error sending message:', error)
+		} finally {
+			setIsSubmitting(false)
+		}
+	}
+
+	const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+		setMessage(e.target.value)
+	}
+
+	const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === 'Enter' && !e.shiftKey) {
+			e.preventDefault()
+			handleSubmit(e)
+		}
+	}
+
+	const isInputDisabled = disabled || isSubmitting
+	const canSend = message.trim().length > 0 && !isInputDisabled
+
+	return (
+		<div className='andy-input'>
+			<input
+				ref={inputRef}
+				type='text'
+				value={message}
+				onChange={handleInputChange}
+				onKeyDown={handleKeyDown}
+				placeholder={placeholder}
+				disabled={isInputDisabled}
+				maxLength={1000}
+				autoComplete='off'
+				id='andy-input'
+			/>
+			<button type='button' onClick={() => handleSubmit({ preventDefault: () => {} } as FormEvent<HTMLFormElement>)} disabled={!canSend} id='andy-send'>
+				{isSubmitting ? (
+					'...'
+				) : (
+					<svg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+						<path d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z' fill='white' />
+					</svg>
+				)}
+			</button>
+		</div>
+	)
+}
+
+export default MessageInput

package/src/components/MessageList.tsx

@@ -0,0 +1,122 @@
+import React, { useEffect, useRef } from 'react'
+import { parseMarkdown } from 'andy-widget-core'
+import type { Message } from '../types'
+
+interface MessageProps {
+	message: Message
+	logoUrl?: string
+	botName?: string
+}
+
+const MessageComponent: React.FC<MessageProps> = ({ message, botName }) => {
+	const isBot = message.sender === 'bot'
+
+	const containerClasses = ['andy-message-container', `andy-message-container--${message.sender}`]
+		.filter(Boolean)
+		.join(' ')
+
+	const messageClasses = ['andy-message', `andy-message--${message.sender}`].filter(Boolean).join(' ')
+
+	const messageContent = isBot ? parseMarkdown(message.content) : message.content
+
+	if (isBot) {
+		return (
+			<div className={containerClasses}>
+				<div className='andy-bot-header'>
+					<div className='andy-bot-header__icon'>
+						<svg
+							width='16'
+							height='16'
+							viewBox='0 0 24 24'
+							fill='none'
+							xmlns='http://www.w3.org/2000/svg'
+							stroke='currentColor'
+							strokeWidth='2'
+							strokeLinecap='round'
+							strokeLinejoin='round'
+						>
+							<path d='M12 6V2H8' />
+							<path d='m8 18-4 4V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2Z' />
+							<path d='M2 12h2' />
+							<path d='M9 11v2' />
+							<path d='M15 11v2' />
+							<path d='M20 12h2' />
+						</svg>
+					</div>
+					<span className='andy-bot-header__name'>{botName || 'Andy bot'}</span>
+				</div>
+				<div className={messageClasses}>
+					<div className='andy-message__content' dangerouslySetInnerHTML={{ __html: messageContent }} />
+				</div>
+			</div>
+		)
+	}
+
+	return (
+		<div className={containerClasses}>
+			<div className={messageClasses}>
+				<div className='andy-message__content'>
+					<p>{messageContent}</p>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+const TypingIndicator: React.FC = () => (
+	<div className='andy-message-container andy-message-container--bot andy-message-container--typing'>
+		<div className='andy-message andy-message--bot andy-message--typing'>
+			<div className='andy-typing-indicator'>
+				<div className='andy-typing-indicator__dot'></div>
+				<div className='andy-typing-indicator__dot'></div>
+				<div className='andy-typing-indicator__dot'></div>
+			</div>
+		</div>
+	</div>
+)
+
+interface MessageListProps {
+	messages: Message[]
+	isLoading: boolean
+	logoUrl?: string
+	botName?: string
+}
+
+const MessageList: React.FC<MessageListProps> = ({ messages, isLoading, logoUrl, botName }) => {
+	const messagesEndRef = useRef<HTMLDivElement>(null)
+
+	useEffect(() => {
+		if (messagesEndRef.current) {
+			messagesEndRef.current.scrollIntoView({
+				behavior: 'smooth',
+				block: 'end'
+			})
+		}
+	}, [messages, isLoading])
+
+	return (
+		<>
+			{messages.map(message => (
+				<MessageComponent
+					key={message.id || message.timestamp}
+					message={message}
+					logoUrl={logoUrl}
+					botName={botName}
+				/>
+			))}
+
+			{isLoading && <TypingIndicator />}
+
+			{messages.length === 0 && !isLoading && (
+				<div className='andy-empty-state'>
+					<div className='andy-empty-state__icon'>💬</div>
+					<div className='andy-empty-state__text'>Start a conversation by typing a message below</div>
+				</div>
+			)}
+
+			<div ref={messagesEndRef} />
+		</>
+	)
+}
+
+export default MessageList

package/src/components/UserInfoForm.tsx

@@ -0,0 +1,186 @@
+import React, { useState, useEffect, MouseEvent, ChangeEvent, FormEvent } from 'react'
+import type { UserInfo } from '../types'
+
+interface UserInfoFormProps {
+	headerText?: string
+	brandColor?: string
+	onSubmit: (data: UserInfo) => Promise<void> | void
+	onClose: () => void
+}
+
+interface FormErrors {
+	name?: string
+	email?: string
+	submit?: string
+}
+
+const UserInfoForm: React.FC<UserInfoFormProps> = ({ headerText, onSubmit, onClose }) => {
+	const [formData, setFormData] = useState<UserInfo>({
+		name: '',
+		email: ''
+	})
+	const [errors, setErrors] = useState<FormErrors>({})
+	const [isSubmitting, setIsSubmitting] = useState(false)
+
+	const validateForm = (): boolean => {
+		const newErrors: FormErrors = {}
+
+		if (!formData.name.trim()) {
+			newErrors.name = 'Name is required'
+		} else if (formData.name.trim().length < 2) {
+			newErrors.name = 'Name must be at least 2 characters'
+		}
+
+		if (!formData.email.trim()) {
+			newErrors.email = 'Email is required'
+		} else {
+			const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+			if (!emailRegex.test(formData.email)) {
+				newErrors.email = 'Please enter a valid email address'
+			}
+		}
+
+		setErrors(newErrors)
+		return Object.keys(newErrors).length === 0
+	}
+
+	const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault()
+
+		if (!validateForm() || isSubmitting) {
+			return
+		}
+
+		try {
+			setIsSubmitting(true)
+			await onSubmit(formData)
+		} catch (error) {
+			console.error('Error submitting user info:', error)
+			setErrors({
+				submit: 'Failed to save your information. Please try again.'
+			})
+		} finally {
+			setIsSubmitting(false)
+		}
+	}
+
+	const handleInputChange = (field: keyof UserInfo) => (e: ChangeEvent<HTMLInputElement>) => {
+		setFormData(prev => ({
+			...prev,
+			[field]: e.target.value
+		}))
+
+		if (errors[field]) {
+			setErrors(prev => ({
+				...prev,
+				[field]: undefined
+			}))
+		}
+	}
+
+	useEffect(() => {
+		const handleEscape = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') {
+				onClose()
+			}
+		}
+
+		document.addEventListener('keydown', handleEscape)
+		return () => document.removeEventListener('keydown', handleEscape)
+	}, [onClose])
+
+	const handleBackdropClick = (e: MouseEvent<HTMLDivElement>) => {
+		if (e.target === e.currentTarget) {
+			onClose()
+		}
+	}
+
+	return (
+		<div className='andy-chat-user-form__backdrop' onClick={handleBackdropClick}>
+			<div className='andy-chat-user-form'>
+				<button className='andy-chat-user-form__close' onClick={onClose} aria-label='Close form' type='button'>
+					✕
+				</button>
+
+				<div className='andy-chat-user-form__header'>
+					<div className='andy-chat-user-form__icon'>
+						<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+							<path
+								d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'
+								fill='currentColor'
+							/>
+						</svg>
+					</div>
+					<div className='andy-chat-user-form__title'>{headerText || "Let's get to know you better"}</div>
+					<div className='andy-chat-user-form__subtitle'>Please provide your information to continue</div>
+				</div>
+
+				<form className='andy-chat-user-form__form' onSubmit={handleSubmit}>
+					<div className='andy-chat-user-form__field'>
+						<label htmlFor='andy-user-name' className='andy-chat-user-form__label'>
+							Name *
+						</label>
+						<input
+							id='andy-user-name'
+							type='text'
+							className={`andy-chat-user-form__input ${errors.name ? 'andy-chat-user-form__input--error' : ''}`}
+							value={formData.name}
+							onChange={handleInputChange('name')}
+							placeholder='Enter your name'
+							disabled={isSubmitting}
+							maxLength={100}
+						/>
+						{errors.name && <div className='andy-chat-user-form__error'>{errors.name}</div>}
+					</div>
+
+					<div className='andy-chat-user-form__field'>
+						<label htmlFor='andy-user-email' className='andy-chat-user-form__label'>
+							Email *
+						</label>
+						<input
+							id='andy-user-email'
+							type='email'
+							className={`andy-chat-user-form__input ${errors.email ? 'andy-chat-user-form__input--error' : ''}`}
+							value={formData.email}
+							onChange={handleInputChange('email')}
+							placeholder='Enter your email'
+							disabled={isSubmitting}
+							maxLength={100}
+						/>
+						{errors.email && <div className='andy-chat-user-form__error'>{errors.email}</div>}
+					</div>
+
+					{errors.submit && <div className='andy-chat-user-form__submit-error'>{errors.submit}</div>}
+
+					<div className='andy-chat-user-form__actions'>
+						<button
+							type='button'
+							className='andy-chat-user-form__button andy-chat-user-form__button--secondary'
+							onClick={onClose}
+							disabled={isSubmitting}
+						>
+							Skip for now
+						</button>
+						<button
+							type='submit'
+							className='andy-chat-user-form__button andy-chat-user-form__button--primary'
+							disabled={isSubmitting}
+						>
+							{isSubmitting ? (
+								<span className='andy-chat-user-form__loading'>
+									<span className='andy-chat-user-form__loading-dot'></span>
+									<span className='andy-chat-user-form__loading-dot'></span>
+									<span className='andy-chat-user-form__loading-dot'></span>
+								</span>
+							) : (
+								'Continue'
+							)}
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	)
+}
+
+export default UserInfoForm

package/src/components/WelcomePopup.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, MouseEvent } from 'react'
+
+interface WelcomePopupProps {
+	message: string
+	brandColor?: string
+	onClose: () => void
+}
+
+const WelcomePopup: React.FC<WelcomePopupProps> = ({ message, onClose }) => {
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			onClose()
+		}, 5000)
+
+		return () => clearTimeout(timer)
+	}, [onClose])
+
+	const handleBackdropClick = (e: MouseEvent<HTMLDivElement>) => {
+		if (e.target === e.currentTarget) {
+			onClose()
+		}
+	}
+
+	useEffect(() => {
+		const handleEscape = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') {
+				onClose()
+			}
+		}
+
+		document.addEventListener('keydown', handleEscape)
+		return () => document.removeEventListener('keydown', handleEscape)
+	}, [onClose])
+
+	return (
+		<div className='andy-chat-welcome-popup__backdrop' onClick={handleBackdropClick}>
+			<div className='andy-chat-welcome-popup'>
+				<button
+					className='andy-chat-welcome-popup__close'
+					onClick={onClose}
+					aria-label='Close welcome message'
+					type='button'
+				>
+					✕
+				</button>
+
+				<div className='andy-chat-welcome-popup__icon'>
+					<svg width='32' height='32' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+						<path
+							d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'
+							fill='currentColor'
+						/>
+					</svg>
+				</div>
+
+				<div className='andy-chat-welcome-popup__message'>{message}</div>
+
+				<button className='andy-chat-welcome-popup__button' onClick={onClose} type='button'>
+					Get Started
+				</button>
+
+				<div className='andy-chat-welcome-popup__timer'>
+					<div className='andy-chat-welcome-popup__timer-bar'></div>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default WelcomePopup

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useAndyChat } from './useAndyChat'