andy-widget-react 2.3.1 → 2.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "andy-widget-react",
-	"version": "2.3.1",
+	"version": "2.3.2",
 	"description": "Official React Widget for embeddable Andy agents",
 	"type": "module",
 	"main": "dist/index.cjs",
@@ -67,6 +67,6 @@
 		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"dependencies": {
-		"andy-widget-core": "2.3.1"
+		"andy-widget-core": "2.3.2"
 	}
 }

package/src/AndyChat.tsx

@@ -12,6 +12,7 @@ import {
 	getHostClasses,
 	createBrowserHandoff,
 	parseMarkdown,
+	escapeHtml,
 	CHAT_BUBBLE_DEFAULT_ICON,
 	CHAT_BUBBLE_DEFAULT_ICON_URL,
 	SVG_ICONS,
@@ -713,7 +714,7 @@ const SalesAndyChat: React.FC<SalesAndyChatProps> = ({
 			bubble.setAttribute('aria-label', strings.openChat)
 
 			const tooltipHTML = tooltip
-				? `<span class="andy-chat-bubble__tooltip" role="tooltip">${tooltip}</span>`
+				? `<span class="andy-chat-bubble__tooltip" role="tooltip">${escapeHtml(tooltip)}</span>`
 				: ''
 			bubble.innerHTML = `${CHAT_BUBBLE_DEFAULT_ICON}${tooltipHTML}`
 			shadowRef.current.appendChild(bubble)
@@ -744,7 +745,7 @@ const SalesAndyChat: React.FC<SalesAndyChatProps> = ({
 
 			const tooltipHTML =
 				!isOpen && tooltip && !isPillStyle
-					? `<span class="andy-chat-bubble__tooltip" role="tooltip">${tooltip}</span>`
+					? `<span class="andy-chat-bubble__tooltip" role="tooltip">${escapeHtml(tooltip)}</span>`
 					: ''
 
 			const configUseBrandColor = config?.useBrandColor ?? true
@@ -762,12 +763,12 @@ const SalesAndyChat: React.FC<SalesAndyChatProps> = ({
 				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}" />
+					<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="${config.logoUrl}" alt="Chatbot Logo" class="andy-chat-bubble__logo" style="${darkModeIconStyle}" />${tooltipHTML}`
+					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"',

package/src/SupportChat.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { generateDesignTokenVariablesString, getContrastTextColor, getSupportStylesheet, type SupportTicket } from 'andy-widget-core'
+import { generateDesignTokenVariablesString, getContrastTextColor, getSupportStylesheet, sanitizeUrl, type SupportTicket } from 'andy-widget-core'
 import type { SupportAndyChatProps } from './types'
 import { useSupportChat } from './hooks/useSupportChat'
 
@@ -96,7 +96,7 @@ const SupportPanel: React.FC<SupportAndyChatProps> = ({ support, lang, orientati
 				</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={link.url} target='_blank' rel='noopener noreferrer'>{link.label}</a>)}</footer>
+				<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>