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

package/src/SupportChat.tsx

@@ -1,106 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
-import { generateDesignTokenVariablesString, getContrastTextColor, getSupportStylesheet, sanitizeUrl, type SupportTicket } from 'andy-widget-core'
-import type { SupportAndyChatProps } from './types'
-import { useSupportChat } from './hooks/useSupportChat'
-
-const copy = {
-	es: { support: 'Soporte', close: 'Cerrar', back: 'Volver', menu: 'Menú', new: 'Nueva conversación', team: 'Hablar con el equipo', requests: 'Mis solicitudes', placeholder: '¿En qué te podemos ayudar?', send: 'Enviar', subject: 'Asunto', detail: 'Cuéntanos qué ocurrió', notice: 'Se adjuntará esta conversación', consent: 'Al enviar, aceptas adjuntar esta conversación para que el equipo pueda ayudarte.', submit: 'Enviar solicitud', receipt: 'Solicitud enviada', promise: 'El equipo responderá en', businessDay: 'un día hábil', hours: 'horas hábiles', minutes: 'minutos hábiles', empty: 'Todavía no tienes solicitudes.', powered: 'Con tecnología de Andy', loading: 'Cargando…', retry: 'Reintentar', error: 'No pudimos completar la solicitud. Puedes reintentar.', auth: 'Tu sesión de soporte no está disponible. Vuelve a iniciar sesión en esta aplicación.', denied: 'El soporte no está disponible para esta cuenta.', transcript: 'mensajes', transcriptSingular: 'mensaje', reply: 'Escribe tu respuesta', reopen: 'Reabrir', reopening: 'Cuéntanos qué volvió a ocurrir', otherProblem: 'Es otro problema', reopened: 'Reabierto', unread: 'Respuestas sin leer', resolvedReply: 'Esta solicitud está resuelta. Reábrela para continuar con el mismo problema.', open: 'Recibido', in_progress: 'En curso', waiting_customer: 'Espera tu respuesta', resolved: 'Resuelto' },
-	en: { support: 'Support', close: 'Close', back: 'Back', menu: 'Menu', new: 'New conversation', team: 'Talk to the team', requests: 'My requests', placeholder: 'How can we help?', send: 'Send', subject: 'Subject', detail: 'Tell us what happened', notice: 'This conversation will be attached', consent: 'By sending, you agree to attach this conversation so the team can help you.', submit: 'Send request', receipt: 'Request sent', promise: 'The team will reply within', businessDay: 'one business day', hours: 'business hours', minutes: 'business minutes', empty: 'You have no requests yet.', powered: 'Powered by Andy', loading: 'Loading…', retry: 'Retry', error: 'We could not complete the request. You can retry.', auth: 'Your support session is unavailable. Sign in again in this application.', denied: 'Support is unavailable for this account.', transcript: 'messages', transcriptSingular: 'message', reply: 'Write your reply', reopen: 'Reopen', reopening: 'Tell us what happened again', otherProblem: 'This is another problem', reopened: 'Reopened', unread: 'Unread replies', resolvedReply: 'This request is resolved. Reopen it to continue with the same problem.', open: 'Received', in_progress: 'In progress', waiting_customer: 'Waiting for your reply', resolved: 'Resolved' }
-}
-
-/** Private Requester UI. Sales bootstrap, visitor identity and storage never enter this renderer. */
-const SupportPanel: React.FC<SupportAndyChatProps> = ({ support, lang, orientation = 'right', initialOpen = false, tooltip }) => {
-	const { state, controller } = useSupportChat({ ...support, lang: lang || support.lang })
-	const replyLanguage = lang || support.lang || state.config?.defaultLang || 'es'
-	const strings = copy[replyLanguage]
-	const [open, setOpen] = useState(initialOpen)
-	const [menu, setMenu] = useState(false)
-	const [draft, setDraft] = useState('')
-	const [subject, setSubject] = useState('')
-	const [body, setBody] = useState('')
-	const [replyDraft, setReplyDraft] = useState('')
-	const [reopening, setReopening] = useState(false)
-	const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null)
-	const host = useRef<HTMLDivElement>(null)
-	const messages = useRef<HTMLDivElement>(null)
-	const [portal, setPortal] = useState<HTMLDivElement | null>(null)
-	useEffect(() => {
-		if (!host.current) return
-		const shadow = host.current.shadowRoot || host.current.attachShadow({ mode: 'open' })
-		const style = document.createElement('style')
-		style.textContent = generateDesignTokenVariablesString() + getSupportStylesheet()
-		const target = document.createElement('div')
-		shadow.append(style, target)
-		setPortal(target)
-		return () => { style.remove(); target.remove() }
-	}, [])
-	useEffect(() => {
-		const color = state.config?.branding.color || '#171717'
-		host.current?.style.setProperty('--andy-support-color', color)
-		host.current?.style.setProperty('--andy-support-contrast', getContrastTextColor(color))
-	}, [state.config?.branding.color])
-	useEffect(() => { messages.current?.scrollTo?.({ top: messages.current.scrollHeight, behavior: 'smooth' }) }, [state.messages, state.view])
-	useEffect(() => { controller?.setVisible(open) }, [controller, open])
-	useEffect(() => { if (support.ticketId) setOpen(true) }, [support.ticketId])
-	useEffect(() => { if (state.ticket?.status !== 'resolved' && state.followup?.action !== 'reopen') setReopening(false) }, [state.ticket?.status, state.followup?.action])
-	const choose = (action: () => void) => { setMenu(false); action() }
-	const escalate = () => { setSubject(''); setBody(''); controller?.escalate() }
-	const send = () => { if (!draft.trim() || state.busy) return; void controller?.send(draft); setDraft('') }
-	const newProblem = () => { setSubject(''); setBody(''); setReplyDraft(''); setReopening(false); controller?.newProblem() }
-	const followup = async () => {
-		const result = await controller?.reply(replyDraft, reopening)
-		if (result) { setReplyDraft(''); setReopening(false) }
-	}
-	const unread = <span className='andy-support__unread' role='img' aria-label={strings.unread} />
-	const title = state.config?.branding.name || strings.support
-	const ticketRow = (ticket: SupportTicket) => <button key={ticket.id} type='button' className='andy-support__ticket' onClick={() => { setSelectedTicketId(ticket.id); setReplyDraft(''); setReopening(false); void controller?.inspect(ticket.id) }}><span>#{ticket.number} · {ticket.subject} {ticket.unread && unread}</span><small>{strings[ticket.status]}</small><span aria-hidden='true'>›</span></button>
-	const retry = () => {
-		if (!state.config) void controller?.bootstrap()
-		else if (state.view === 'form') void controller?.submit(subject, body, replyLanguage)
-		else if (state.view === 'requests') void controller?.showRequests()
-		else if (state.view === 'request' && state.followup) void followup()
-		else if (state.view === 'request' && (selectedTicketId || support.ticketId)) void controller?.inspect((selectedTicketId || support.ticketId)!)
-	}
-	const errorText = state.error === 'ticket_resolved' ? strings.resolvedReply : ['expired', 'unknown_key', 'malformed', 'authentication_required', 'invalid_signature'].includes(state.error || '') ? strings.auth : state.error === 'permission_denied' ? strings.denied : strings.error
-	const promise = state.ticket?.replyPromise || state.config?.replyPromise
-	const promiseText = !promise ? null : promise.minutes === promise.businessDayMinutes ? strings.businessDay : promise.minutes % 60 === 0 ? `${promise.minutes / 60} ${strings.hours}` : `${promise.minutes} ${strings.minutes}`
-	return <div ref={host} className={`andy-support-host andy-support-host--${orientation}`}>
-		{portal && createPortal(<div className='andy-support' data-private data-ph-no-capture data-sentry-block lang={replyLanguage}>
-			{!open && <button type='button' className='andy-support__launcher' title={tooltip} onClick={() => setOpen(true)}><span>{strings.support} · {title} {state.unreadCount > 0 && unread}</span><span aria-hidden='true'>↗</span></button>}
-			{open && <section className='andy-support__panel' role='dialog' aria-label={`${strings.support} · ${title}`}>
-				<header className='andy-support__header'>
-					{state.view !== 'conversation' && <button type='button' aria-label={strings.back} onClick={() => state.view === 'request' ? void controller?.showRequests() : controller?.back()}>‹</button>}
-					<span className='andy-support__mark' aria-hidden='true'>{title.slice(0, 1)}</span><div className='andy-support__identity'><strong>{title}</strong><small>{strings.support}</small></div>
-					<button type='button' aria-label={strings.menu} aria-expanded={menu} disabled={!state.config} onClick={() => setMenu(!menu)}>···</button><button type='button' aria-label={strings.close} onClick={() => setOpen(false)}>×</button>
-					{menu && <nav className='andy-support__menu' aria-label={strings.menu}><button type='button' onClick={() => choose(() => controller?.newConversation())}>{strings.new}</button><button type='button' onClick={() => choose(escalate)}>{strings.team}</button><button type='button' onClick={() => choose(() => void controller?.showRequests())}>{strings.requests} {state.unreadCount > 0 && unread}</button></nav>}
-				</header>
-				<div className='andy-support__content' ref={messages}>
-					{state.loading && <p role='status'>{strings.loading}</p>}
-					{state.view === 'conversation' && <>
-						{state.messages.map((message, index) => <div key={index} className={`andy-support__message andy-support__message--${message.role}`}>{message.content}</div>)}
-						{state.config && state.messages.length === 1 && <div className='andy-support__questions'>{state.config.questions.map(question => <button type='button' key={question} disabled={state.busy} onClick={() => void controller?.send(question)}>{question}</button>)}</div>}
-						{state.busy && <p className='andy-support__muted' role='status'>···</p>}
-						{state.messages.length > 1 && !state.busy && <button type='button' className='andy-support__secondary' onClick={escalate}>{strings.team} ↗</button>}
-					</>}
-					{state.view === 'form' && <form className='andy-support__form' onSubmit={event => { event.preventDefault(); void controller?.submit(subject, body, replyLanguage) }}>
-						<h2>{strings.team}</h2><label>{strings.subject}<input required maxLength={200} value={state.submission?.subject ?? subject} readOnly={!!state.submission} disabled={state.busy} onChange={event => setSubject(event.target.value)} /></label><label>{strings.detail}<textarea required maxLength={20000} rows={5} value={state.submission?.body ?? body} readOnly={!!state.submission} disabled={state.busy} onChange={event => setBody(event.target.value)} /></label>
-						<details className='andy-support__transcript'><summary>{strings.notice} · {state.transcript.length} {state.transcript.length === 1 ? strings.transcriptSingular : strings.transcript}</summary>{state.transcript.map((message, index) => <p key={index}>{message.content}</p>)}</details><p className='andy-support__muted'>{strings.consent}</p><button type='submit' className='andy-support__primary' disabled={state.busy || !subject.trim() || !body.trim()}>{state.busy ? strings.loading : strings.submit}</button>
-					</form>}
-					{state.view === 'receipt' && state.ticket && <div className='andy-support__receipt'><span className='andy-support__check' aria-hidden='true'>✓</span><h2>{strings.receipt}</h2><strong>#{state.ticket.number}</strong><p>{state.ticket.subject}</p>{promiseText && <p>{strings.promise} <strong>{promiseText}</strong>.</p>}<button type='button' className='andy-support__primary' onClick={() => void controller?.showRequests()}>{strings.requests}</button></div>}
-					{state.view === 'requests' && <><h2>{strings.requests}</h2>{state.tickets.map(ticketRow)}{!state.busy && !state.error && !state.tickets.length && <p className='andy-support__muted'>{strings.empty}</p>}</>}
-					{state.view === 'request' && state.ticket && <><h2>#{state.ticket.number} · {state.ticket.subject}</h2><p className='andy-support__muted'>{strings[state.ticket.status]}{state.ticket.reopened && ` · ${strings.reopened}`}</p>{state.entries.filter(entry => ['requester_message', 'public_reply'].includes(entry.kind)).map(entry => <article className='andy-support__entry' key={entry.id}><strong>{entry.authorName}</strong><p>{entry.body}</p></article>)}
-						{state.ticket.status === 'resolved' && !reopening && <div className='andy-support__request-actions'><button type='button' className='andy-support__primary' onClick={() => setReopening(true)}>{strings.reopen}</button><button type='button' className='andy-support__secondary' onClick={newProblem}>{strings.otherProblem}</button></div>}
-					</>}
-					{state.error && <div className='andy-support__error' role='alert'><p>{errorText}</p>{(!state.config || state.view === 'form' || state.view === 'requests' || (state.view === 'request' && state.error !== 'ticket_resolved' && (selectedTicketId || support.ticketId))) && <button type='button' onClick={retry} disabled={state.busy}>{strings.retry}</button>}</div>}
-				</div>
-				{state.view === 'conversation' && <form className='andy-support__composer' onSubmit={event => { event.preventDefault(); send() }}><input aria-label={strings.placeholder} placeholder={strings.placeholder} value={draft} maxLength={10000} disabled={!state.config} onChange={event => setDraft(event.target.value)} /><button type='submit' aria-label={strings.send} disabled={state.busy || !state.config || !draft.trim()}>↑</button></form>}
-				{state.view === 'request' && state.ticket && (state.ticket.status !== 'resolved' || reopening) && <form className='andy-support__followup' onSubmit={event => { event.preventDefault(); void followup() }}><label>{reopening ? strings.reopening : strings.reply}<textarea rows={3} maxLength={20000} required value={state.followup?.body ?? replyDraft} readOnly={!!state.followup} disabled={state.busy} onChange={event => setReplyDraft(event.target.value)} /></label><button type='submit' className='andy-support__primary' disabled={state.busy || !replyDraft.trim()}>{state.busy ? strings.loading : reopening ? strings.reopen : strings.send}</button></form>}
-				<footer className='andy-support__footer'><span>{strings.powered}</span>{state.config?.branding.footer.map(link => <a key={link.url} href={sanitizeUrl(link.url)} target='_blank' rel='noopener noreferrer'>{link.label}</a>)}</footer>
-			</section>}
-		</div>, portal)}
-	</div>
-}
-
-/** A host identity change also destroys local drafts and menu state before the next render. */
-export const SupportChat: React.FC<SupportAndyChatProps> = props => <SupportPanel key={JSON.stringify([props.support.installationId, props.support.contextKey, props.support.apiBaseUrl])} {...props} />

package/src/components/ChatBubble.tsx

@@ -1,48 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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)
-			setMessage('')
-			await onSendMessage(trimmedMessage)
-
-			if (inputRef.current) {
-				inputRef.current.focus()
-			}
-		} catch (error) {
-			console.error('Error sending message:', error)
-			setMessage(current => current || trimmedMessage)
-		} 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={disabled}
-				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

@@ -1,124 +0,0 @@
-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 && !message.isStreaming ? 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}>
-					{message.isStreaming
-						? <div className='andy-message__content andy-message__stream'>{message.content}</div>
-						: <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 && !messages.some(message => message.isStreaming) && <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

@@ -1,186 +0,0 @@
-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