andy-widget-react 2.3.2 → 3.0.0-next.1

package/src/AndyChat.tsx

@@ -1,1151 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback, FormEvent } from 'react'
-import ReactDOM from 'react-dom'
-
-import {
-	fetchChatbotConfig,
-	generateSessionId,
-	createGreetingMessage,
-	sendMessageForWidget as sendMessageToAPI,
-	submitUserInfo,
-	isValidEmbedId,
-	getFullStylesheet,
-	getHostClasses,
-	createBrowserHandoff,
-	parseMarkdown,
-	escapeHtml,
-	CHAT_BUBBLE_DEFAULT_ICON,
-	CHAT_BUBBLE_DEFAULT_ICON_URL,
-	SVG_ICONS,
-	FOOTER_TEXT,
-	getFooterUrl,
-	getDefaultBubbleLabel,
-	getUiStrings,
-	isMobileDevice
-} from 'andy-widget-core'
-
-import type { AndyChatProps, SalesAndyChatProps, ChatbotConfig, Message } from './types'
-import { SupportChat } from './SupportChat'
-
-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 SalesAndyChat: React.FC<SalesAndyChatProps> = ({
-	embedId,
-	tooltip,
-	name,
-	headline,
-	description,
-	welcomeMessage,
-	bubbleLabel,
-	lang,
-	predefinedQuestions,
-	theme,
-	orientation,
-	brandColor,
-	bubbleStyle,
-	useBrandColor,
-	logoUrl,
-	previewMode = false,
-	initialOpen = false
-}) => {
-	const [config, setConfig] = useState<ChatbotConfig | null>(null)
-	// The visitor's language wins over the Agent's own default: a Spanish Agent
-	// embedded on an English page must still render English chrome.
-	const uiLang = lang || config?.defaultLang || 'en'
-	const strings = getUiStrings(uiLang)
-	const activeQuestions = predefinedQuestions?.length ? predefinedQuestions : config?.predefinedQuestions
-	const [isOpen, setIsOpen] = useState(initialOpen)
-	const [messages, setMessages] = useState<Message[]>([])
-	const [isLoading, setIsLoading] = useState(false)
-	const [replyStarted, setReplyStarted] = useState(false)
-	const activeReplyRef = useRef<AbortController | null>(null)
-	const [sessionId, setSessionId] = useState(() => generateSessionId())
-	const handoffRef = useRef<ReturnType<typeof createBrowserHandoff>>(null)
-	const pendingHandoffIdsRef = useRef<string[]>([])
-	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)
-
-	useEffect(() => {
-		if (!config?.bootstrap || !config.id) return
-		handoffRef.current?.stop()
-		const handoff = createBrowserHandoff(config.id, config.bootstrap, projection => {
-			if (projection.offline) return
-			const paused = projection.control === 'requested' || projection.control === 'human'
-			if (paused) activeReplyRef.current?.abort()
-			else if (activeReplyRef.current) return
-			setSessionId(projection.identity.sessionId)
-			pendingHandoffIdsRef.current = projection.pendingProjectionIds || []
-			const projectedMessages = projection.messages.map(message => ({ id: message.id, content: message.content, sender: message.role === 'user' ? 'user' as const : 'bot' as const, timestamp: new Date(message.createdAt).toISOString(), isHuman: message.sentByHuman }))
-			// An empty agent projection does not mean the client-only greeting is gone.
-			if (projection.control === 'agent' && projectedMessages.length === 0) return
-			setMessages(projection.control === 'requested' || projection.control === 'human'
-				? [...projectedMessages, { id: 'handoff-waiting', content: strings.handoffWaiting, sender: 'bot', timestamp: new Date().toISOString(), isWaiting: true }]
-				: projectedMessages)
-		})
-		handoffRef.current = handoff
-		if (handoff) setSessionId(handoff.identity.sessionId)
-		return () => {
-			activeReplyRef.current?.abort()
-			handoffRef.current?.stop()
-			handoffRef.current = null
-		}
-	}, [config?.bootstrap, config?.id])
-
-	useEffect(() => {
-		pendingHandoffIdsRef.current.forEach(messageId => void handoffRef.current?.markRendered(messageId))
-	}, [messages])
-
-	// 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)
-
-		return () => {
-			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: uiLang,
-				showBranding: true,
-				showWelcomePopup: { enabled: false, seconds: 3, message: '' },
-				collectUserInfo: { enabled: false, message: '' },
-				welcomeMessage: welcomeMessage || 'Hi there! How can I help you today?',
-				predefinedQuestions: 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 = () => {
-		activeReplyRef.current?.abort()
-		activeReplyRef.current = null
-		setIsLoading(false)
-		setReplyStarted(false)
-		handoffRef.current = handoffRef.current?.restart() || null
-		pendingHandoffIdsRef.current = []
-		setSessionId(handoffRef.current?.identity.sessionId || 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 (activeQuestions && activeQuestions.length > 0) {
-			setShowPredefinedQuestions(true)
-		}
-	}
-
-	const sendUserMessage = useCallback(
-		async (rawMessageText: string, options: { hidePredefined?: boolean } = {}) => {
-			const messageText = typeof rawMessageText === 'string' ? rawMessageText.trim() : ''
-			if (!messageText || activeReplyRef.current) {
-				return
-			}
-
-			const { hidePredefined = true } = options
-			const timestamp = Date.now()
-			const controller = new AbortController()
-			activeReplyRef.current = controller
-
-			const userMessage: Message = {
-				id: timestamp,
-				content: messageText,
-				sender: 'user',
-				timestamp: new Date().toISOString()
-			}
-			handoffRef.current?.recordVisitorMessage(messageText)
-			setMessages(prev => [...prev, userMessage])
-
-			if (hidePredefined) {
-				setShowPredefinedQuestions(false)
-			}
-
-			try {
-				setIsLoading(true)
-				setReplyStarted(false)
-				const showReply = (content: string, isStreaming: boolean) => {
-					if (controller.signal.aborted) return
-					setReplyStarted(true)
-					const reply: Message = { id: timestamp + 1, content, sender: 'bot', timestamp: new Date(timestamp).toISOString(), isStreaming }
-					setMessages(prev => prev.some(message => message.id === reply.id)
-						? prev.map(message => message.id === reply.id ? reply : message)
-						: [...prev, reply])
-				}
-				const response = await sendMessageToAPI(embedId!, sessionId, messageText, {
-					signal: controller.signal,
-					onText: text => showReply(text, true)
-				})
-				if (controller.signal.aborted) return
-				if (response.status === 'waiting') {
-					setMessages(prev => {
-						const visible = prev.filter(message => message.id !== timestamp + 1)
-						return visible.some(message => message.isWaiting) ? visible : [...visible, { id: 'handoff-waiting', content: strings.handoffWaiting, sender: 'bot', timestamp: new Date().toISOString(), isWaiting: true }]
-					})
-					return
-				}
-
-				showReply(response.text, false)
-
-				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 {
-				if (controller.signal.aborted) return
-				console.error('AndyChat: Message request failed.')
-				const errorMessage: Message = {
-					id: timestamp + 3,
-					content: strings.sendFailure,
-					sender: 'bot',
-					timestamp: new Date().toISOString(),
-					isError: true
-				}
-				setMessages(prev => [...prev.filter(message => message.id !== timestamp + 1), errorMessage])
-			} finally {
-				if (activeReplyRef.current === controller) {
-					activeReplyRef.current = null
-					setIsLoading(false)
-					setReplyStarted(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', strings.openChat)
-
-			const tooltipHTML = tooltip
-				? `<span class="andy-chat-bubble__tooltip" role="tooltip">${escapeHtml(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(uiLang) : null)
-		const bubbleLogoUrl = config?.logoUrl || CHAT_BUBBLE_DEFAULT_ICON_URL
-
-		if (bubble) {
-			bubble.setAttribute('aria-label', isOpen ? strings.closeChat : strings.openChat)
-			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">${escapeHtml(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">${escapeHtml(displayLabel)}</span>
-					<img src="${escapeHtml(bubbleLogoUrl)}" alt="Chat" class="andy-chat-bubble__icon--pill" style="${darkModeIconStyle}" />
-				`
-			} else {
-				if (config?.logoUrl) {
-					bubble.innerHTML = `<img src="${escapeHtml(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={strings.goBack}
-									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={strings.closeChat}
-									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.isWaiting ? 'andy-message-container--waiting' : ''}`}
-										>
-											{message.sender === 'bot' && (
-												<div
-															className={`andy-message andy-message--bot ${message.isHuman ? 'andy-message--operator' : ''} ${message.isWaiting ? 'andy-message--waiting' : ''} ${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'>
-										{message.isHuman ? strings.teamName : config?.name || 'Andy bot'}
-									</span>
-													</div>
-													<div className='andy-message__content'>
-														{message.isStreaming ? <div className='andy-message__stream'>{message.content}</div> : <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 && !replyStarted && (
-									<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'>
-								{activeQuestions &&
-									activeQuestions.length > 0 &&
-									showPredefinedQuestions && (
-										<div className='andy-predefined-questions' id='andy-predefined-questions'>
-											<div className='andy-predefined-questions__header'>
-												<p className='andy-predefined-questions__title'>{strings.predefinedQuestionsTitle}</p>
-											</div>
-											<div className='andy-predefined-questions__list'>
-												{activeQuestions.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 ? strings.inputPlaceholder : '...'}
-												aria-label={strings.messageInput}
-												onKeyDown={e => {
-													if (e.key === 'Enter' && activeReplyRef.current) { e.preventDefault(); return }
-													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={strings.sendMessage}
-												onClick={() => {
-													if (activeReplyRef.current) return
-													const input = shadowRef.current?.getElementById(
-														'andy-message-input'
-													) as HTMLInputElement | null
-													if (input && input.value.trim()) {
-														handleSendMessage(input.value)
-														input.value = ''
-													}
-												}}
-												disabled={isCollectingUserInfo || isLoading || !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={strings.welcomeMessage}
-							>
-								<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={strings.closeWelcomeMessage}
-										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>
-	)
-}
-
-const AndyChat: React.FC<AndyChatProps> = props => props.mode === 'support'
-	? <SupportChat key={`${props.support.installationId}:${props.support.contextKey}`} {...props} />
-	: <SalesAndyChat {...props} />
-
-export default AndyChat