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

package/src/components/WelcomePopup.tsx

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

package/src/hooks/index.ts

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

package/src/hooks/useAndyChat.ts

@@ -1,312 +0,0 @@
-import { useState, useCallback, useRef, useEffect } from 'react'
-import {
-	fetchChatbotConfig,
-	generateSessionId,
-	createGreetingMessage,
-	sendMessageForWidget as sendMessageToAPI,
-	submitUserInfo as submitUserInfoAPI,
-	initializeConfig,
-	validateChatbotConfig,
-	normalizeConfig,
-	CONFIG
-} from 'andy-widget-core'
-import type { ChatbotConfig, Message, UserInfo, UseAndyChatReturn } from '../types'
-import type { SupportOptions } from 'andy-widget-core'
-import { useSupportChat } from './useSupportChat'
-
-const { SESSION_STORAGE_KEY, FORM_DISPLAY_DELAY_MS, PERSIST_SESSION } = CONFIG
-
-const useSalesAndyChat = (embedId: string, enabled: boolean): UseAndyChatReturn => {
-	if (enabled) initializeConfig('andy-widget-react')
-
-	const [config, setConfig] = useState<Partial<ChatbotConfig>>({})
-	const [isLoading, setIsLoading] = useState(true)
-	const [isOpen, setIsOpen] = useState(false)
-	const [error, setError] = useState<string | null>(null)
-
-	const [messages, setMessages] = useState<Message[]>([])
-	const [showingFaq, setShowingFaq] = useState(false)
-	const [sessionId, setSessionId] = useState(() => generateSessionId())
-
-	const [userInfoCollected, setUserInfoCollected] = useState(false)
-	const [showingWelcomePopup, setShowingWelcomePopup] = useState(false)
-	const [showingUserInfoForm, setShowingUserInfoForm] = useState(false)
-	const [welcomePopupShown, setWelcomePopupShown] = useState(false)
-
-	const activeReplyRef = useRef<AbortController | null>(null)
-	useEffect(() => () => {
-		activeReplyRef.current?.abort()
-		activeReplyRef.current = null
-	}, [embedId])
-
-	const welcomeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-	const userInfoTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-	const initializeChatbot = useCallback(async () => {
-		if (!enabled) return
-		if (!embedId) {
-			throw new Error('Embed ID is required')
-		}
-
-		try {
-			setIsLoading(true)
-			setError(null)
-
-			const rawConfig = await fetchChatbotConfig(embedId)
-
-			const validationResult = validateChatbotConfig(rawConfig)
-			if (!validationResult.isValid) {
-				throw new Error(`Invalid configuration: ${validationResult.errors.join(', ')}`)
-			}
-
-			const normalizedConfig = normalizeConfig(rawConfig as unknown as Record<string, unknown>) as unknown as ChatbotConfig
-			setConfig(normalizedConfig)
-
-			if (PERSIST_SESSION) {
-				const storedSessionId = localStorage.getItem(SESSION_STORAGE_KEY)
-				if (storedSessionId) {
-					setSessionId(storedSessionId)
-				} else {
-					setSessionId(currentSessionId => {
-						localStorage.setItem(SESSION_STORAGE_KEY, currentSessionId)
-						return currentSessionId
-					})
-				}
-			}
-
-			if (normalizedConfig.welcomeMessage) {
-				const greeting = createGreetingMessage(normalizedConfig)
-				if (greeting) {
-					const greetingMessage: Message = {
-						id: Date.now(),
-						content: greeting,
-						sender: 'bot',
-						timestamp: new Date().toISOString()
-					}
-					setMessages([greetingMessage])
-				}
-			}
-
-			setIsLoading(false)
-		} catch (err) {
-			console.error('Failed to initialize chatbot:', err)
-			setError(err instanceof Error ? err.message : 'Unknown error')
-			setIsLoading(false)
-			throw err
-		}
-	}, [embedId, enabled])
-
-	const toggleChat = useCallback(() => {
-		setIsOpen(prev => {
-			const newIsOpen = !prev
-
-			if (newIsOpen) {
-				setShowingFaq(false)
-
-				const typedConfig = config as ChatbotConfig
-				if (typedConfig?.showWelcomePopup?.enabled && !welcomePopupShown) {
-					setShowingWelcomePopup(true)
-					setWelcomePopupShown(true)
-				}
-
-				if (typedConfig?.collectUserInfo?.enabled && !userInfoCollected) {
-					if (userInfoTimeoutRef.current) {
-						clearTimeout(userInfoTimeoutRef.current)
-					}
-
-					userInfoTimeoutRef.current = setTimeout(() => {
-						setShowingUserInfoForm(true)
-					}, FORM_DISPLAY_DELAY_MS)
-				}
-			} else {
-				setShowingWelcomePopup(false)
-				setShowingUserInfoForm(false)
-
-				if (welcomeTimeoutRef.current) {
-					clearTimeout(welcomeTimeoutRef.current)
-				}
-				if (userInfoTimeoutRef.current) {
-					clearTimeout(userInfoTimeoutRef.current)
-				}
-			}
-
-			return newIsOpen
-		})
-	}, [config, welcomePopupShown, userInfoCollected])
-
-	const sendMessage = useCallback(
-		async (messageText: string) => {
-			if (!enabled || !messageText.trim() || !config || !sessionId || activeReplyRef.current) {
-				return
-			}
-
-			const controller = new AbortController()
-			activeReplyRef.current = controller
-			const userMessage: Message = {
-				id: Date.now(),
-				content: messageText,
-				sender: 'user',
-				timestamp: new Date().toISOString()
-			}
-
-			setMessages(prev => [...prev, userMessage])
-
-			const replyId = Date.now() + 1
-			const showReply = (content: string, isStreaming: boolean) => {
-				if (controller.signal.aborted) return
-				const reply: Message = { id: replyId, content, sender: 'bot', timestamp: new Date().toISOString(), isStreaming }
-				setMessages(prev => prev.some(message => message.id === replyId)
-					? prev.map(message => message.id === replyId ? reply : message)
-					: [...prev, reply])
-			}
-			try {
-				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 => prev.filter(message => message.id !== replyId))
-					return response
-				}
-				showReply(response.text, false)
-
-				return response
-			} catch (err) {
-				if (controller.signal.aborted) return
-				console.error('Error sending message:', err)
-
-				const errorMessage: Message = {
-					id: Date.now() + 1,
-					content: 'Sorry, I encountered an error. Please try again.',
-					sender: 'bot',
-					timestamp: new Date().toISOString(),
-					isError: true
-				}
-
-				setMessages(prev => [...prev.filter(message => message.id !== replyId), errorMessage])
-				throw err
-			} finally {
-				if (activeReplyRef.current === controller) activeReplyRef.current = null
-			}
-		},
-		[embedId, sessionId, config, enabled]
-	)
-
-	const showFaq = useCallback(() => {
-		setShowingFaq(true)
-	}, [])
-
-	const hideFaq = useCallback(() => {
-		setShowingFaq(false)
-	}, [])
-
-	const showWelcomePopup = useCallback(() => {
-		setShowingWelcomePopup(true)
-	}, [])
-
-	const hideWelcomePopup = useCallback(() => {
-		setShowingWelcomePopup(false)
-	}, [])
-
-	const showUserInfoForm = useCallback(() => {
-		setShowingUserInfoForm(true)
-	}, [])
-
-	const hideUserInfoForm = useCallback(() => {
-		setShowingUserInfoForm(false)
-	}, [])
-
-	const submitUserInfo = useCallback(
-		async (userInfo: UserInfo) => {
-			if (!enabled) return
-			try {
-				await submitUserInfoAPI(embedId, sessionId, userInfo)
-				setUserInfoCollected(true)
-				setShowingUserInfoForm(false)
-
-				const confirmMessage: Message = {
-					id: Date.now(),
-					content: 'Thank you for providing your information! How can I help you today?',
-					sender: 'bot',
-					timestamp: new Date().toISOString()
-				}
-
-				setMessages(prev => [...prev, confirmMessage])
-			} catch (err) {
-				console.error('Error submitting user info:', err)
-				throw err
-			}
-		},
-		[embedId, sessionId, enabled]
-	)
-
-	const startNewSession = useCallback(() => {
-		if (!enabled) return
-		activeReplyRef.current?.abort()
-		activeReplyRef.current = null
-		const newSessionId = generateSessionId()
-		setSessionId(newSessionId)
-
-		if (PERSIST_SESSION) {
-			localStorage.setItem(SESSION_STORAGE_KEY, newSessionId)
-		} else {
-			localStorage.removeItem(SESSION_STORAGE_KEY)
-		}
-
-		setMessages([])
-		setUserInfoCollected(false)
-		setShowingFaq(false)
-		setShowingUserInfoForm(false)
-		setWelcomePopupShown(false)
-
-		const typedConfig = config as ChatbotConfig
-		if (typedConfig?.welcomeMessage) {
-			const greeting = createGreetingMessage(typedConfig)
-			if (greeting) {
-				const greetingMessage: Message = {
-					id: Date.now(),
-					content: greeting,
-					sender: 'bot',
-					timestamp: new Date().toISOString()
-				}
-				setMessages([greetingMessage])
-			}
-		}
-	}, [config, enabled])
-
-	const addMessage = useCallback((message: Message) => {
-		setMessages(prev => [...prev, message])
-	}, [])
-
-	return {
-		config,
-		isLoading,
-		isOpen,
-		showingFaq,
-		showingWelcomePopup,
-		showingUserInfoForm,
-		messages,
-		userInfoCollected,
-		sessionId,
-		error,
-
-		initializeChatbot,
-		toggleChat,
-		sendMessage,
-		showFaq,
-		hideFaq,
-		showWelcomePopup,
-		hideWelcomePopup,
-		showUserInfoForm,
-		hideUserInfoForm,
-		submitUserInfo,
-		startNewSession,
-		addMessage
-	}
-}
-
-export function useAndyChat(embedId: string): UseAndyChatReturn
-export function useAndyChat(options: { mode: 'support'; support: SupportOptions }): ReturnType<typeof useSupportChat>
-export function useAndyChat(input: string | { mode: 'support'; support: SupportOptions }) {
-	const support = useSupportChat(typeof input === 'string' ? null : input.support)
-	const sales = useSalesAndyChat(typeof input === 'string' ? input : '', typeof input === 'string')
-	return typeof input === 'string' ? sales : support
-}

package/src/hooks/useSupportChat.ts

@@ -1,29 +0,0 @@
-import { useEffect, useRef, useState, useSyncExternalStore } from 'react'
-import { createSupportController, type SupportOptions, type SupportState } from 'andy-widget-core'
-
-const empty: SupportState = { config: null, view: 'conversation', messages: [], transcript: [], tickets: [], ticket: null, entries: [], loading: true, busy: false, error: null, submission: null, followup: null, unreadCount: 0 }
-const noSubscribe = () => () => {}
-const emptySnapshot = () => empty
-
-/** The host context key changes before a new user/company is allowed to see any previous state. */
-export const useSupportChat = (options: SupportOptions | null) => {
-	const key = options ? JSON.stringify([options.installationId, options.contextKey, options.apiBaseUrl]) : null
-	const callback = useRef(options?.getRequesterPass)
-	callback.current = options?.getRequesterPass
-	const [owned, setOwned] = useState<{ key: string; controller: ReturnType<typeof createSupportController> } | null>(null)
-	const controller = owned?.key === key ? owned?.controller : null
-	const state = useSyncExternalStore(controller?.subscribe || noSubscribe, controller?.getSnapshot || emptySnapshot, emptySnapshot)
-	useEffect(() => {
-		if (!options || !key) return
-		const controller = createSupportController({ ...options, getRequesterPass: () => callback.current!() })
-		setOwned({ key, controller })
-		void controller.bootstrap()
-		return () => controller.dispose()
-	}, [key])
-	useEffect(() => { controller?.setLanguage(options?.lang) }, [controller, options?.lang])
-	const ready = !!state.config
-	useEffect(() => {
-		if (ready && options?.ticketId) void controller?.inspect(options.ticketId)
-	}, [controller, ready, options?.ticketId])
-	return { mode: 'support' as const, state, controller }
-}

package/src/index.ts

@@ -1,67 +0,0 @@
-// Main export for AndyChat React package
-export { default as AndyChat } from './AndyChat'
-// Back-compat: older integrations import { Andy } from 'andy-widget-react'
-export { default as Andy } from './AndyChat'
-
-// Export the custom hook for advanced usage
-export { useAndyChat } from './hooks/useAndyChat'
-
-// Export individual components for advanced customization
-export { default as ChatBubble } from './components/ChatBubble'
-export { default as ChatWindow } from './components/ChatWindow'
-export { default as MessageList } from './components/MessageList'
-export { default as MessageInput } from './components/MessageInput'
-export { default as FAQ } from './components/FAQ'
-export { default as WelcomePopup } from './components/WelcomePopup'
-export { default as UserInfoForm } from './components/UserInfoForm'
-
-// Export types for consumers
-export type {
-	AndyChatProps,
-	SupportAndyChatProps,
-	SalesAndyChatProps,
-	ChatbotConfig,
-	Message,
-	FAQItem,
-	PredefinedQuestion,
-	WelcomePopupConfig,
-	CollectUserInfoConfig,
-	UserInfo,
-	UseAndyChatReturn,
-	ChatBubbleProps,
-	ChatWindowProps,
-	MessageListProps,
-	MessageInputProps,
-	FAQProps,
-	WelcomePopupProps,
-	UserInfoFormProps,
-	FaqItemProps
-} from './types'
-
-// Re-export core utilities for React users who need them
-export {
-	// Design tokens for custom styling
-	theme,
-	colors,
-	typography,
-	spacing,
-	borderRadius,
-	shadows,
-	zIndex,
-	animation,
-	chat,
-
-	// Utility functions
-	generateSessionId,
-	parseMarkdown,
-	sanitizeUrl,
-
-	// Configuration helpers
-	isValidEmbedId,
-	getEmbedId,
-	getApiBaseUrl,
-	setApiBaseUrl
-} from 'andy-widget-core'
-
-// Default export is the main AndyChat component
-export { default } from './AndyChat'

package/src/styles/main.css

@@ -1,14 +0,0 @@
-/* AndyChat React Styles */
-/* Placeholder CSS file - can be expanded with custom styles */
-
-.andychat-react-container {
-	/* Container styles */
-}
-
-.andychat-bubble {
-	/* Chat bubble styles - handled inline for now */
-}
-
-.andychat-window {
-	/* Chat window styles - handled inline for now */
-}