andy-widget-react 2.0.5

package/src/AndyChat.tsx

@@ -0,0 +1,1091 @@
+import React, { useState, useEffect, useRef, useCallback, FormEvent } from 'react'
+import ReactDOM from 'react-dom'
+
+import {
+	fetchChatbotConfig,
+	generateSessionId,
+	createGreetingMessage,
+	sendMessage as sendMessageToAPI,
+	submitUserInfo,
+	isValidEmbedId,
+	getFullStylesheet,
+	getHostClasses,
+	parseMarkdown,
+	CHAT_BUBBLE_DEFAULT_ICON,
+	CHAT_BUBBLE_DEFAULT_ICON_URL,
+	SVG_ICONS,
+	FOOTER_TEXT,
+	getFooterUrl,
+	getDefaultBubbleLabel,
+	getKeyboardDetector,
+	updateKeyboardHeight,
+	isMobileDevice
+} from 'andy-widget-core'
+
+import type { AndyChatProps, ChatbotConfig, Message } from './types'
+
+interface FaqItemProps {
+	question: string
+	answer: string
+}
+
+const FaqItem: React.FC<FaqItemProps> = ({ question, answer }) => {
+	const [isOpen, setIsOpen] = useState(false)
+
+	return (
+		<div className={`andy-faq-item ${isOpen ? 'andy-faq-item--open' : ''}`}>
+			<button
+				type='button'
+				className='andy-faq-item__question'
+				aria-expanded={isOpen}
+				onClick={() => setIsOpen(!isOpen)}
+			>
+				<span className='andy-faq-item__question-text'>{question}</span>
+				<svg
+					className='andy-faq-item__chevron'
+					width='16'
+					height='16'
+					viewBox='0 0 24 24'
+					fill='none'
+					xmlns='http://www.w3.org/2000/svg'
+				>
+					<path
+						d='M6 9l6 6 6-6'
+						stroke='currentColor'
+						strokeWidth='2'
+						strokeLinecap='round'
+						strokeLinejoin='round'
+					/>
+				</svg>
+			</button>
+			<div className='andy-faq-item__answer'>
+				<div className='andy-faq-item__answer-content'>{answer}</div>
+			</div>
+		</div>
+	)
+}
+
+const AndyChat: React.FC<AndyChatProps> = ({
+	embedId,
+	tooltip,
+	name,
+	headline,
+	description,
+	welcomeMessage,
+	bubbleLabel,
+	theme,
+	orientation,
+	brandColor,
+	bubbleStyle,
+	useBrandColor,
+	logoUrl,
+	previewMode = false,
+	initialOpen = false
+}) => {
+	const [config, setConfig] = useState<ChatbotConfig | null>(null)
+	const [isOpen, setIsOpen] = useState(initialOpen)
+	const [messages, setMessages] = useState<Message[]>([])
+	const [isLoading, setIsLoading] = useState(false)
+	const [sessionId, setSessionId] = useState(() => generateSessionId())
+	const [shadowReady, setShadowReady] = useState(false)
+	const [showPredefinedQuestions, setShowPredefinedQuestions] = useState(true)
+	const [userInfoCollected, setUserInfoCollected] = useState(false)
+	const [isCollectingUserInfo, setIsCollectingUserInfo] = useState(false)
+	const [pendingMessage, setPendingMessage] = useState<string | null>(null)
+	const [showWelcomePopup, setShowWelcomePopup] = useState(false)
+
+	const containerRef = useRef<HTMLDivElement>(null)
+	const shadowRef = useRef<ShadowRoot | null>(null)
+	const portalRef = useRef<HTMLDivElement | null>(null)
+	const hasOpenedRef = useRef(false)
+	const messagesContainerRef = useRef<HTMLDivElement>(null)
+	const welcomePopupShownRef = useRef(false)
+	const welcomePopupTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+	// Create shadow DOM container on mount
+	useEffect(() => {
+		if (!containerRef.current) return
+
+		let shadow = shadowRef.current
+		if (!shadow) {
+			if (containerRef.current.shadowRoot) {
+				shadow = containerRef.current.shadowRoot
+			} else {
+				shadow = containerRef.current.attachShadow({ mode: 'open' })
+			}
+			shadowRef.current = shadow
+		}
+
+		let styleElement = shadow.querySelector('style')
+		if (!styleElement) {
+			styleElement = document.createElement('style')
+			shadow.appendChild(styleElement)
+		}
+
+		styleElement.textContent = getFullStylesheet({
+			color: config?.brandColor,
+			useBrandColor: config?.useBrandColor ?? true,
+			theme: config?.theme || 'light',
+			orientation: config?.orientation || 'right'
+		})
+
+		if (containerRef.current) {
+			const hostClasses = getHostClasses({
+				theme: config?.theme || 'light',
+				orientation: config?.orientation || 'right'
+			})
+			containerRef.current.className = hostClasses
+		}
+
+		if (!portalRef.current) {
+			let portalTarget = shadow.querySelector('.andy-react-portal') as HTMLDivElement | null
+			if (!portalTarget) {
+				portalTarget = document.createElement('div')
+				portalTarget.className = 'andy-react-portal'
+				shadow.appendChild(portalTarget)
+			}
+			portalRef.current = portalTarget
+		}
+
+		setShadowReady(true)
+
+		const keyboardDetector = getKeyboardDetector()
+		const keyboardListener = ({ isOpen: kbOpen, height }: { isOpen: boolean; height: number }) => {
+			updateKeyboardHeight(containerRef.current, height)
+
+			const chatWindow = shadowRef.current?.querySelector('.andy-chat-window')
+			if (chatWindow) {
+				if (kbOpen && height > 0) {
+					chatWindow.classList.add('andy-chat-window--keyboard-open')
+				} else {
+					chatWindow.classList.remove('andy-chat-window--keyboard-open')
+				}
+			}
+		}
+
+		keyboardDetector.addListener(keyboardListener)
+
+		return () => {
+			keyboardDetector.removeListener(keyboardListener)
+			shadowRef.current = null
+			portalRef.current = null
+			setShadowReady(false)
+		}
+	}, [])
+
+	// Update styles when config changes
+	useEffect(() => {
+		if (!shadowRef.current || !config) return
+
+		const styleElement = shadowRef.current.querySelector('style')
+		if (styleElement) {
+			styleElement.textContent = getFullStylesheet({
+				color: config.brandColor,
+				useBrandColor: config.useBrandColor ?? true,
+				theme: config.theme || 'light',
+				orientation: config.orientation || 'right'
+			})
+		}
+
+		if (containerRef.current) {
+			const hostClasses = getHostClasses({
+				theme: config.theme || 'light',
+				orientation: config.orientation || 'right'
+			})
+			containerRef.current.className = hostClasses
+		}
+	}, [config])
+
+	// Close button handler
+	useEffect(() => {
+		if (!shadowReady || !shadowRef.current || !isOpen) return
+
+		const timer = setTimeout(() => {
+			const closeButton = shadowRef.current?.querySelector('#andy-close-button') as HTMLButtonElement | null
+			if (closeButton) {
+				const handleCloseClick = () => {
+					setIsOpen(false)
+				}
+				closeButton.addEventListener('click', handleCloseClick)
+				;(closeButton as any)._closeHandler = handleCloseClick
+			}
+		}, 100)
+
+		return () => {
+			clearTimeout(timer)
+			if (shadowRef.current) {
+				const closeButton = shadowRef.current.querySelector('#andy-close-button') as HTMLButtonElement | null
+				if (closeButton && (closeButton as any)._closeHandler) {
+					closeButton.removeEventListener('click', (closeButton as any)._closeHandler)
+					delete (closeButton as any)._closeHandler
+				}
+			}
+		}
+	}, [isOpen, shadowReady])
+
+	// Click outside to close
+	useEffect(() => {
+		if (!shadowReady || !shadowRef.current) return
+		if (previewMode) return
+
+		const handleDocumentClick = (event: MouseEvent) => {
+			if (isMobileDevice()) return
+			if (!isOpen) return
+
+			const selection = window.getSelection()
+			if (selection && selection.toString().length > 0) {
+				return
+			}
+
+			const chatbotContainer = containerRef.current
+			let isClickInsideChatbot = false
+
+			if (chatbotContainer && chatbotContainer.contains(event.target as Node)) {
+				isClickInsideChatbot = true
+			}
+
+			if (event.composedPath) {
+				const path = event.composedPath()
+				if (chatbotContainer && path.includes(chatbotContainer)) {
+					isClickInsideChatbot = true
+				}
+			}
+
+			if (event.target === chatbotContainer) {
+				isClickInsideChatbot = true
+			}
+
+			if (!isClickInsideChatbot) {
+				setIsOpen(false)
+			}
+		}
+
+		const handleShadowClick = (event: Event) => {
+			const target = event.target as Element
+			if (
+				target.closest('#andy-close-button') ||
+				target.closest('#andy-send-button') ||
+				target.closest('.andy-predefined-question')
+			) {
+				return
+			}
+			if (target.closest('.andy-chat-window')) {
+				event.stopPropagation()
+			}
+		}
+
+		document.addEventListener('click', handleDocumentClick)
+		shadowRef.current.addEventListener('click', handleShadowClick, true)
+
+		return () => {
+			document.removeEventListener('click', handleDocumentClick)
+			if (shadowRef.current) {
+				shadowRef.current.removeEventListener('click', handleShadowClick, true)
+			}
+		}
+	}, [isOpen, shadowReady, previewMode])
+
+	// Initialize config
+	useEffect(() => {
+		if (previewMode) {
+			const previewConfig: ChatbotConfig = {
+				id: embedId || 'preview',
+				name: name || 'Andy Bot',
+				theme: theme || 'light',
+				logoUrl: logoUrl || '',
+				headline: headline || '',
+				brandColor: brandColor || '#3B82F6',
+				description: description || '',
+				orientation: orientation || 'right',
+				bubbleStyle: bubbleStyle || 'icon',
+				bubbleLabel: bubbleLabel || null,
+				useBrandColor: useBrandColor !== undefined ? useBrandColor : true,
+				defaultLang: 'en',
+				showBranding: true,
+				showWelcomePopup: { enabled: false, seconds: 3, message: '' },
+				collectUserInfo: { enabled: false, message: '' },
+				welcomeMessage: welcomeMessage || 'Hi there! How can I help you today?',
+				predefinedQuestions: [],
+				faqs: []
+			}
+			setConfig(previewConfig)
+			return
+		}
+
+		if (!embedId || !isValidEmbedId(embedId)) {
+			setConfig(null)
+			console.warn('AndyChat: Invalid or missing embedId')
+			return
+		}
+
+		let cancelled = false
+
+		const loadConfig = async () => {
+			try {
+				setConfig(null)
+				const rawConfig = await fetchChatbotConfig(embedId)
+
+				const configWithOverrides: ChatbotConfig = {
+					...rawConfig,
+					...(name && { name }),
+					...(headline && { headline }),
+					...(description && { description }),
+					...(welcomeMessage && { welcomeMessage }),
+					...(theme && { theme }),
+					...(orientation && { orientation }),
+					...(brandColor && { brandColor }),
+					...(bubbleStyle && { bubbleStyle }),
+					...(bubbleLabel && { bubbleLabel }),
+					...(useBrandColor !== undefined && { useBrandColor }),
+					...(logoUrl && { logoUrl })
+				}
+
+				if (!cancelled) setConfig(configWithOverrides)
+			} catch {
+				if (!cancelled) {
+					setConfig(null)
+					console.error('AndyChat: Failed to load configuration.')
+				}
+			}
+		}
+
+		loadConfig()
+
+		return () => {
+			cancelled = true
+		}
+	}, [
+		embedId,
+		name,
+		headline,
+		description,
+		welcomeMessage,
+		previewMode,
+		theme,
+		orientation,
+		brandColor,
+		bubbleStyle,
+		bubbleLabel,
+		useBrandColor,
+		logoUrl
+	])
+
+	// Welcome popup timer
+	useEffect(() => {
+		if (welcomePopupTimeoutRef.current) {
+			clearTimeout(welcomePopupTimeoutRef.current)
+			welcomePopupTimeoutRef.current = null
+		}
+
+		if (config?.showWelcomePopup?.enabled && !welcomePopupShownRef.current && !isOpen) {
+			const delaySeconds = config.showWelcomePopup.seconds ?? 3
+			welcomePopupTimeoutRef.current = setTimeout(() => {
+				if (!isOpen) {
+					setShowWelcomePopup(true)
+					welcomePopupShownRef.current = true
+				}
+			}, delaySeconds * 1000)
+		}
+
+		if (isOpen && showWelcomePopup) {
+			setShowWelcomePopup(false)
+		}
+
+		return () => {
+			if (welcomePopupTimeoutRef.current) {
+				clearTimeout(welcomePopupTimeoutRef.current)
+			}
+		}
+	}, [config, isOpen, showWelcomePopup])
+
+	// Add welcome message on first open
+	useEffect(() => {
+		if (isOpen && !hasOpenedRef.current && config?.welcomeMessage) {
+			hasOpenedRef.current = true
+			const greeting = createGreetingMessage(config)
+			if (greeting) {
+				setMessages([
+					{
+						id: Date.now(),
+						content: greeting,
+						sender: 'bot',
+						timestamp: new Date().toISOString()
+					}
+				])
+			}
+		}
+	}, [isOpen, config])
+
+	// Auto-scroll
+	useEffect(() => {
+		if (messagesContainerRef.current) {
+			messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight
+		}
+	}, [messages, isLoading])
+
+	// Form submit handler
+	useEffect(() => {
+		if (isCollectingUserInfo && shadowRef.current) {
+			const timer = setTimeout(() => {
+				const form = shadowRef.current?.querySelector('#andy-user-info-form') as HTMLFormElement | null
+				if (form) {
+					const handleSubmit = (e: Event) => {
+						handleUserInfoSubmit(e as unknown as FormEvent<HTMLFormElement>)
+					}
+					form.addEventListener('submit', handleSubmit)
+					;(form as any)._submitHandler = handleSubmit
+				}
+			}, 100)
+
+			return () => {
+				clearTimeout(timer)
+				if (shadowRef.current) {
+					const form = shadowRef.current.querySelector('#andy-user-info-form') as HTMLFormElement | null
+					if (form && (form as any)._submitHandler) {
+						form.removeEventListener('submit', (form as any)._submitHandler)
+						delete (form as any)._submitHandler
+					}
+				}
+			}
+		}
+	}, [isCollectingUserInfo, messages])
+
+	const handleNewChat = () => {
+		setSessionId(generateSessionId())
+
+		if (config?.welcomeMessage) {
+			const greeting = createGreetingMessage(config)
+			if (greeting) {
+				setMessages([
+					{
+						id: Date.now(),
+						content: greeting,
+						sender: 'bot',
+						timestamp: new Date().toISOString()
+					}
+				])
+			}
+		} else {
+			setMessages([])
+		}
+
+		if (config?.predefinedQuestions && config.predefinedQuestions.length > 0) {
+			setShowPredefinedQuestions(true)
+		}
+	}
+
+	const sendUserMessage = useCallback(
+		async (rawMessageText: string, options: { hidePredefined?: boolean } = {}) => {
+			const messageText = typeof rawMessageText === 'string' ? rawMessageText.trim() : ''
+			if (!messageText) {
+				return
+			}
+
+			const { hidePredefined = true } = options
+			const timestamp = Date.now()
+
+			const userMessage: Message = {
+				id: timestamp,
+				content: messageText,
+				sender: 'user',
+				timestamp: new Date().toISOString()
+			}
+			setMessages(prev => [...prev, userMessage])
+
+			if (hidePredefined) {
+				setShowPredefinedQuestions(false)
+			}
+
+			try {
+				setIsLoading(true)
+				const response = await sendMessageToAPI(embedId!, sessionId, messageText)
+
+				const botMessage: Message = {
+					id: timestamp + 1,
+					content: response,
+					sender: 'bot',
+					timestamp: new Date().toISOString()
+				}
+				setMessages(prev => [...prev, botMessage])
+
+				if (config?.collectUserInfo?.enabled && !userInfoCollected && !isCollectingUserInfo) {
+					setPendingMessage(messageText)
+					setIsCollectingUserInfo(true)
+
+					const formMessage: Message = {
+						id: timestamp + 2,
+						content: 'USER_INFO_FORM',
+						sender: 'bot',
+						isForm: true,
+						timestamp: new Date().toISOString()
+					}
+					setMessages(prev => [...prev, formMessage])
+				}
+			} catch {
+				console.error('AndyChat: Message request failed.')
+				const errorMessage: Message = {
+					id: timestamp + 3,
+					content:
+						config?.defaultLang === 'es'
+							? 'Lo siento, no pude responder. Inténtalo de nuevo.'
+							: 'Sorry, I could not answer. Please try again.',
+					sender: 'bot',
+					timestamp: new Date().toISOString(),
+					isError: true
+				}
+				setMessages(prev => [...prev, errorMessage])
+			} finally {
+				setIsLoading(false)
+			}
+		},
+		[config, embedId, sessionId, userInfoCollected, isCollectingUserInfo]
+	)
+
+	const handleSendMessage = useCallback(
+		(messageText: string) => {
+			return sendUserMessage(messageText)
+		},
+		[sendUserMessage]
+	)
+
+	const handlePredefinedQuestion = useCallback(
+		(question: string) => {
+			if (isCollectingUserInfo || isLoading) {
+				return
+			}
+
+			const trimmedQuestion = typeof question === 'string' ? question.trim() : ''
+			if (!trimmedQuestion) {
+				return
+			}
+
+			const input = shadowRef.current?.getElementById('andy-message-input') as HTMLInputElement | null
+			if (input) {
+				input.value = ''
+			}
+
+			sendUserMessage(trimmedQuestion)
+		},
+		[isCollectingUserInfo, isLoading, sendUserMessage]
+	)
+
+	// Predefined questions click handler
+	useEffect(() => {
+		if (!shadowRef.current) {
+			return
+		}
+
+		const shadowRoot = shadowRef.current
+		const captureClick = (event: Event) => {
+			const composedTarget = event.composedPath ? event.composedPath()[0] : event.target
+			const elementTarget = composedTarget instanceof Element ? composedTarget : null
+			const button =
+				elementTarget?.closest?.('.andy-predefined-question') ||
+				shadowRoot.querySelector('.andy-predefined-question:focus')
+			if (!button) {
+				return
+			}
+			if ((button as HTMLButtonElement).disabled) {
+				return
+			}
+			const question = button.getAttribute('data-question') || button.textContent || ''
+			handlePredefinedQuestion(question)
+		}
+
+		shadowRoot.addEventListener('click', captureClick)
+		return () => {
+			shadowRoot.removeEventListener('click', captureClick)
+		}
+	}, [handlePredefinedQuestion, shadowReady])
+
+	const handleUserInfoSubmit = async (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault()
+
+		const form = e.target as HTMLFormElement
+		const nameInput = form.querySelector('#andy-user-name') as HTMLInputElement | null
+		const emailInput = form.querySelector('#andy-user-email') as HTMLInputElement | null
+		const userName = nameInput?.value
+		const email = emailInput?.value
+
+		if (!userName || !email) return
+
+		setMessages(prev => prev.filter(msg => !msg.isForm))
+
+		const loadingMessage: Message = {
+			id: Date.now(),
+			content: 'LOADING',
+			sender: 'bot',
+			isLoading: true,
+			timestamp: new Date().toISOString()
+		}
+		setMessages(prev => [...prev, loadingMessage])
+
+		try {
+			await submitUserInfo(embedId!, sessionId, { name: userName, email })
+
+			setUserInfoCollected(true)
+			setIsCollectingUserInfo(false)
+
+			setMessages(prev => prev.filter(msg => !msg.isLoading))
+			setPendingMessage(null)
+		} catch (error) {
+			console.error('Error submitting user info:', error)
+			setMessages(prev => prev.filter(msg => !msg.isLoading))
+			const errorMessage: Message = {
+				id: Date.now() + 1,
+				content: 'Sorry, there was an error submitting your information. Please try again.',
+				sender: 'bot',
+				timestamp: new Date().toISOString()
+			}
+			setMessages(prev => [...prev, errorMessage])
+
+			setIsCollectingUserInfo(false)
+		}
+	}
+
+	if (!previewMode && (!embedId || !isValidEmbedId(embedId))) {
+		return null
+	}
+
+	// Render bubble
+	useEffect(() => {
+		if (!shadowRef.current || !shadowReady) return
+		if (!config) {
+			shadowRef.current.querySelector('.andy-chat-bubble')?.remove()
+			return
+		}
+
+		let bubble = shadowRef.current.querySelector('.andy-chat-bubble') as HTMLButtonElement | null
+		if (!bubble) {
+			bubble = document.createElement('button')
+			bubble.type = 'button'
+			bubble.className = 'andy-chat-bubble'
+			bubble.setAttribute('aria-label', 'Open chat')
+
+			const tooltipHTML = tooltip
+				? `<span class="andy-chat-bubble__tooltip" role="tooltip">${tooltip}</span>`
+				: ''
+			bubble.innerHTML = `${CHAT_BUBBLE_DEFAULT_ICON}${tooltipHTML}`
+			shadowRef.current.appendChild(bubble)
+
+			bubble.addEventListener('click', () => setIsOpen(prev => !prev))
+		}
+
+		const isPillStyle = config?.bubbleStyle === 'pill'
+		const displayLabel =
+			bubbleLabel || config?.bubbleLabel || (isPillStyle ? getDefaultBubbleLabel(config?.defaultLang || 'en') : null)
+		const bubbleLogoUrl = config?.logoUrl || CHAT_BUBBLE_DEFAULT_ICON_URL
+
+		if (bubble) {
+			bubble.className = 'andy-chat-bubble'
+			if (isPillStyle) {
+				bubble.classList.add('andy-chat-bubble--pill')
+			}
+			if (isOpen) {
+				bubble.classList.add('andy-chat-bubble--open')
+			}
+			if (config?.theme === 'dark') {
+				bubble.classList.add('andy-chat-bubble--theme-dark')
+			}
+			if (config) {
+				bubble.classList.add('andy-chat-bubble--loaded')
+			}
+
+			const tooltipHTML =
+				!isOpen && tooltip && !isPillStyle
+					? `<span class="andy-chat-bubble__tooltip" role="tooltip">${tooltip}</span>`
+					: ''
+
+			const configUseBrandColor = config?.useBrandColor ?? true
+			const isDarkTheme = config?.theme === 'dark'
+			const needsWhiteIcon = configUseBrandColor || isDarkTheme
+			const iconFilterStyle = needsWhiteIcon ? '' : 'filter: none;'
+			const darkModeIconStyle =
+				!configUseBrandColor && isDarkTheme ? 'filter: brightness(0) invert(1);' : iconFilterStyle
+
+			if (isOpen) {
+				const chevronWithStyle = SVG_ICONS.chevronDown.replace(
+					'class="andy-chat-bubble__icon"',
+					`class="andy-chat-bubble__icon" style="${darkModeIconStyle}"`
+				)
+				bubble.innerHTML = chevronWithStyle
+			} else if (isPillStyle && displayLabel) {
+				bubble.innerHTML = `
+					<span class="andy-chat-bubble__label">${displayLabel}</span>
+					<img src="${bubbleLogoUrl}" alt="Chat" class="andy-chat-bubble__icon--pill" style="${darkModeIconStyle}" />
+				`
+			} else {
+				if (config?.logoUrl) {
+					bubble.innerHTML = `<img src="${config.logoUrl}" alt="Chatbot Logo" class="andy-chat-bubble__logo" style="${darkModeIconStyle}" />${tooltipHTML}`
+				} else {
+					const defaultIconWithStyle = CHAT_BUBBLE_DEFAULT_ICON.replace(
+						'class="andy-chat-bubble__icon"',
+						`class="andy-chat-bubble__icon" style="${darkModeIconStyle}"`
+					)
+					bubble.innerHTML = `${defaultIconWithStyle}${tooltipHTML}`
+				}
+			}
+		}
+	}, [shadowReady, config, isOpen, tooltip, bubbleLabel])
+
+	return (
+		<div ref={containerRef} id='andy-chatbot-container'>
+			{portalRef.current && shadowReady && config && (
+				<>
+					{ReactDOM.createPortal(
+						<div className={`andy-chat-window ${isOpen ? 'andy-chat-window--open' : ''}`}>
+							<header className='andy-header'>
+								<button
+									type='button'
+									className='andy-header__back'
+									id='andy-back-button'
+									aria-label='Go back'
+									onClick={() => setIsOpen(false)}
+								>
+									<svg
+										className='andy-header__back-icon'
+										width='20'
+										height='20'
+										viewBox='0 0 24 24'
+										fill='none'
+									>
+										<path
+											d='M15 18l-6-6 6-6'
+											stroke='currentColor'
+											strokeWidth='2'
+											strokeLinecap='round'
+											strokeLinejoin='round'
+										/>
+									</svg>
+								</button>
+
+								<div className='andy-header__bot-info'>
+									<div className='andy-header__avatar'>
+										{config?.logoUrl ? (
+											<img src={config.logoUrl} alt='Bot Avatar' className='andy-header__avatar-image' />
+										) : (
+											<img
+												src={CHAT_BUBBLE_DEFAULT_ICON_URL}
+												alt='Bot Avatar'
+												className='andy-header__avatar-icon andy-header__avatar-icon--default'
+											/>
+										)}
+									</div>
+									<div className='andy-header__text'>
+										<h1 className='andy-header__name'>{config?.name || 'Andy bot'}</h1>
+										{config?.headline && (
+											<p className='andy-header__subtitle' title={config.headline}>
+												{config.headline}
+											</p>
+										)}
+									</div>
+								</div>
+
+								<button
+									type='button'
+									className='andy-header__close'
+									id='andy-close-button'
+									aria-label='Close chat'
+									onClick={() => setIsOpen(false)}
+								>
+									<svg
+										className='andy-header__close-icon'
+										width='20'
+										height='20'
+										viewBox='0 0 24 24'
+										fill='none'
+									>
+										<path
+											d='M18 6L6 18M6 6l12 12'
+											stroke='currentColor'
+											strokeWidth='2'
+											strokeLinecap='round'
+											strokeLinejoin='round'
+										/>
+									</svg>
+								</button>
+							</header>
+
+							<div className='andy-chat-window__messages' id='andy-messages' ref={messagesContainerRef}>
+								{config?.description && (
+									<div className='andy-chat-subtitle'>
+										<p className='andy-chat-subtitle__text'>{config.description}</p>
+									</div>
+								)}
+								{messages.map(message => {
+									if (message.isForm) {
+										return (
+											<div key={message.id} className='andy-message-container andy-message-container--form'>
+												<div className='andy-avatar'>
+													<svg
+														className='andy-avatar__icon'
+														width='24'
+														height='24'
+														viewBox='0 0 24 24'
+														fill='none'
+														xmlns='http://www.w3.org/2000/svg'
+													>
+														<path
+															d='M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2Z'
+															fill='currentColor'
+														/>
+													</svg>
+												</div>
+												<div className='andy-message andy-message--bot andy-message--form'>
+													<div className='andy-user-info-form'>
+														<div className='andy-user-info-form__content'>
+															<h3 className='andy-user-info-form__title'>
+																{config?.collectUserInfo?.message ||
+																	'Please provide your information to continue:'}
+															</h3>
+															<form className='andy-user-info-form__form' id='andy-user-info-form'>
+																<div className='andy-form-group'>
+																	<label htmlFor='andy-user-name' className='andy-form-group__label'>
+																		Name
+																	</label>
+																	<input
+																		type='text'
+																		id='andy-user-name'
+																		className='andy-form-group__input'
+																		placeholder='Your Name'
+																		required
+																	/>
+																</div>
+																<div className='andy-form-group'>
+																	<label htmlFor='andy-user-email' className='andy-form-group__label'>
+																		Email
+																	</label>
+																	<input
+																		type='email'
+																		id='andy-user-email'
+																		className='andy-form-group__input'
+																		placeholder='Your Email'
+																		required
+																	/>
+																</div>
+																<button
+																	type='submit'
+																	className='andy-button andy-button--primary andy-user-info-form__submit'
+																>
+																	Submit
+																</button>
+															</form>
+														</div>
+													</div>
+												</div>
+											</div>
+										)
+									}
+
+									if (message.isLoading) {
+										return (
+											<div
+												key={message.id}
+												className='andy-message-container andy-message-container--bot andy-message-container--loading'
+											>
+												<div className='andy-message andy-message--bot'>
+													<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>
+										)
+									}
+
+									return (
+										<div
+											key={message.id}
+											className={`andy-message-container andy-message-container--${message.sender}`}
+										>
+											{message.sender === 'bot' && (
+												<div
+													className={`andy-message andy-message--bot ${message.isError ? 'andy-message--error' : ''}`}
+												>
+													<div className='andy-bot-header'>
+														<div className='andy-bot-header__icon'>
+															{config?.logoUrl ? (
+																<img
+																	src={config.logoUrl}
+																	alt='Bot Avatar'
+																	className='andy-bot-header__icon-image'
+																/>
+															) : (
+																<img
+																	src={CHAT_BUBBLE_DEFAULT_ICON_URL}
+																	alt='Bot Avatar'
+																	className='andy-bot-header__icon-image andy-bot-header__icon-image--default'
+																/>
+															)}
+														</div>
+														<span className='andy-bot-header__name'>{config?.name || 'Andy bot'}</span>
+													</div>
+													<div className='andy-message__content'>
+														<div dangerouslySetInnerHTML={{ __html: parseMarkdown(message.content) }} />
+													</div>
+												</div>
+											)}
+											{message.sender === 'user' && (
+												<div className='andy-message andy-message--user'>
+													<div className='andy-message__content'>
+														<p>{message.content}</p>
+													</div>
+												</div>
+											)}
+										</div>
+									)
+								})}
+
+								{isLoading && (
+									<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>
+								)}
+							</div>
+
+							<div className='andy-chat-window__bottom'>
+								{config?.predefinedQuestions &&
+									config.predefinedQuestions.length > 0 &&
+									showPredefinedQuestions && (
+										<div className='andy-predefined-questions' id='andy-predefined-questions'>
+											<div className='andy-predefined-questions__header'>
+												<p className='andy-predefined-questions__title'>What would you like to know?</p>
+											</div>
+											<div className='andy-predefined-questions__list'>
+												{config.predefinedQuestions.map((q, index) => (
+													<button
+														key={index}
+														type='button'
+														className='andy-predefined-question'
+														data-question={q.question}
+														disabled={isCollectingUserInfo || isLoading || !config}
+													>
+														<span className='andy-predefined-question__icon'>💬</span>
+														<span className='andy-predefined-question__text'>{q.question}</span>
+													</button>
+												))}
+											</div>
+										</div>
+									)}
+
+								<div className='andy-chat-window__input'>
+									<div className='andy-input-container'>
+										<div className='andy-input'>
+											<input
+												type='text'
+												className='andy-input__field'
+												id='andy-message-input'
+												placeholder={config ? 'Type your message...' : '...'}
+												aria-label='Message input'
+												onKeyDown={e => {
+													if (e.key === 'Enter' && (e.target as HTMLInputElement).value.trim()) {
+														handleSendMessage((e.target as HTMLInputElement).value)
+														;(e.target as HTMLInputElement).value = ''
+													}
+												}}
+												disabled={isCollectingUserInfo || !config}
+											/>
+											<button
+												type='button'
+												className='andy-input__button'
+												id='andy-send-button'
+												aria-label='Send message'
+												onClick={() => {
+													const input = shadowRef.current?.getElementById(
+														'andy-message-input'
+													) as HTMLInputElement | null
+													if (input && input.value.trim()) {
+														handleSendMessage(input.value)
+														input.value = ''
+													}
+												}}
+												disabled={isCollectingUserInfo || !config}
+											>
+												<svg
+													className='andy-input__button-icon'
+													width='18'
+													height='18'
+													viewBox='0 0 24 24'
+													fill='currentColor'
+													xmlns='http://www.w3.org/2000/svg'
+												>
+													<path d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z' />
+												</svg>
+											</button>
+										</div>
+									</div>
+								</div>
+
+								{config?.showBranding !== false && (
+									<footer className='andy-chat-window__footer'>
+										<a
+											href={getFooterUrl()}
+											target='_blank'
+											rel='noopener noreferrer'
+											className='andy-chat-window__footer-link'
+										>
+											<span className='andy-chat-window__footer-text'>{FOOTER_TEXT}</span>
+										</a>
+									</footer>
+								)}
+							</div>
+						</div>,
+						portalRef.current
+					)}
+					{showWelcomePopup &&
+						!isOpen &&
+						ReactDOM.createPortal(
+							<div
+								className={`andy-welcome-popup ${config?.orientation === 'left' ? 'andychat-popup-left' : ''}`}
+								style={{ display: 'block' }}
+								role='dialog'
+								aria-label='Welcome message'
+							>
+								<div className='andy-welcome-popup__content'>
+									<div className='andy-welcome-popup__message'>
+										{config?.showWelcomePopup?.message ||
+											config?.welcomeMessage ||
+											'Welcome! How can I help you today?'}
+									</div>
+									<button
+										type='button'
+										className='andy-welcome-popup__close'
+										aria-label='Close welcome message'
+										onClick={() => setShowWelcomePopup(false)}
+									>
+										<svg
+											className='andy-welcome-popup__close-icon'
+											width='20'
+											height='20'
+											viewBox='0 0 24 24'
+											fill='none'
+											xmlns='http://www.w3.org/2000/svg'
+										>
+											<path
+												d='M18 6L6 18M6 6l12 12'
+												stroke='currentColor'
+												strokeWidth='2'
+												strokeLinecap='round'
+												strokeLinejoin='round'
+											/>
+										</svg>
+									</button>
+								</div>
+								<div className='andy-welcome-popup__arrow'></div>
+							</div>,
+							portalRef.current
+						)}
+				</>
+			)}
+		</div>
+	)
+}
+
+export default AndyChat