@crestapps/ai-chat-ui 2.0.0-preview.224 → 2.0.0-preview.225

package/dist/ai-chat.css

@@ -561,3 +561,34 @@ img.medium-zoom-image--opened {
 .ai-chat-message-item table tbody tr:nth-child(even) {
     background-color: var(--bs-tertiary-bg, #f8f9fa);
 }
+
+/* Persona avatar shown on assistant messages in place of the robot icon. */
+.ai-chat-assistant-avatar {
+    display: block;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.ai-bot-avatar,
+.ai-streaming-avatar {
+    display: inline-flex;
+    flex-shrink: 0;
+    vertical-align: middle;
+}
+
+@keyframes ai-chat-avatar-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.45; }
+}
+
+.ai-streaming-avatar {
+    animation: ai-chat-avatar-pulse 1.5s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ai-streaming-avatar {
+        animation: none;
+    }
+}

package/dist/ai-chat.js

@@ -13,6 +13,7 @@
 			downloadChartButtonText: "Download",
 			userLabel: "You",
 			assistantLabel: "Assistant",
+			assistantAvatarUrl: null,
 			thumbsUpTitle: "Thumbs up",
 			thumbsDownTitle: "Thumbs down",
 			copyTitle: "Click here to copy response to clipboard.",
@@ -46,7 +47,7 @@
                     </div>
                     <div v-else-if="message.role !== 'indicator'" class="ai-chat-message-heading ai-chat-message-heading-assistant">
                         <div :class="getAssistantRoleClasses(message)">
-                            <span :class="getAssistantIconClasses(message, index)"><i :class="getAssistantIcon(message)"></i></span>
+                            <span :class="getAssistantIconClasses(message, index)"><img v-if="getAssistantAvatarUrl(message)" class="ai-chat-assistant-avatar" :src="getAssistantAvatarUrl(message)" alt="" /><i v-else :class="getAssistantIcon(message)"></i></span>
                             <span class="ai-chat-message-role-label">{{ getAssistantLabel(message) }}</span>
                         </div>
                     </div>
@@ -100,8 +101,8 @@
 			indicatorTemplate: `
         <div class="ai-chat-message-heading ai-chat-message-heading-assistant">
             <div class="ai-chat-msg-role ai-chat-msg-role-assistant">
-                <span class="ai-streaming-icon"><i class="fa fa-robot" style="display: inline-block;"></i></span>
-                <span class="ai-chat-message-role-label">Assistant</span>
+                {{ assistantIcon }}
+                <span class="ai-chat-message-role-label">{{ assistantLabel }}</span>
             </div>
         </div>
     `
@@ -445,17 +446,22 @@
 			if (!source || typeof source !== "object") return {};
 			return Object.fromEntries(Object.entries(source).filter(([, value]) => value !== void 0));
 		}
-		function resolveIndicatorTemplate(template, assistantLabel) {
+		function resolveIndicatorTemplate(template, assistantLabel, assistantAvatarUrl) {
 			if (!template) return template;
 			const encodedAssistantLabel = escapeHtmlEntities(assistantLabel || "Assistant");
-			return template.replace(/\{\{\s*assistantLabel\s*\}\}/g, encodedAssistantLabel);
+			const avatarUrl = sanitizeUrl(assistantAvatarUrl);
+			const assistantIcon = avatarUrl ? "<span class=\"ai-streaming-avatar\"><img class=\"ai-chat-assistant-avatar\" src=\"" + escapeHtmlAttribute(avatarUrl) + "\" alt=\"\" /></span>" : "<span class=\"ai-streaming-icon\"><i class=\"fa fa-robot\" style=\"display: inline-block;\"></i></span>";
+			return template.replace(/\{\{\s*assistantLabel\s*\}\}/g, encodedAssistantLabel).replace(/\{\{\s*assistantIcon\s*\}\}/g, assistantIcon);
+		}
+		function escapeHtmlAttribute(text) {
+			return escapeHtmlEntities(text).replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 		}
 		const initialize = (instanceConfig) => {
 			const normalizedInstanceConfig = compactObject(instanceConfig);
 			const normalizedWidgetConfig = compactObject(normalizedInstanceConfig.widget);
 			const config = Object.assign({}, defaultConfig, normalizedInstanceConfig);
 			config.widget = Object.assign({}, defaultConfig.widget || {}, normalizedWidgetConfig);
-			config.indicatorTemplate = resolveIndicatorTemplate(config.indicatorTemplate, config.assistantLabel);
+			config.indicatorTemplate = resolveIndicatorTemplate(config.indicatorTemplate, config.assistantLabel, config.assistantAvatarUrl);
 			const hasWidgetConfig = !!(normalizedWidgetConfig.chatWidgetContainer && normalizedWidgetConfig.chatWidgetStateName);
 			const widgetBehavior = window.coreAIChatWidgetBehavior || null;
 			defaultConfig = config;
@@ -505,6 +511,7 @@
 						metricsEnabled: !!config.metricsEnabled,
 						userLabel: config.userLabel,
 						assistantLabel: config.assistantLabel,
+						assistantAvatarUrl: sanitizeUrl(config.assistantAvatarUrl) || null,
 						thumbsUpTitle: config.thumbsUpTitle,
 						thumbsDownTitle: config.thumbsDownTitle,
 						copyTitle: config.copyTitle,
@@ -852,8 +859,13 @@
 					},
 					getAssistantIconClasses(message, index) {
 						var appearance = message ? this.normalizeAssistantAppearance(message.appearance) : null;
+						if (this.getAssistantAvatarUrl(message)) return [this.shouldAnimateAssistantIcon(message, index) ? "ai-streaming-avatar" : "ai-bot-avatar"];
 						return [this.shouldAnimateAssistantIcon(message, index) ? "ai-streaming-icon" : "ai-bot-icon", appearance && appearance.cssClass ? appearance.cssClass : ""];
 					},
+					getAssistantAvatarUrl(message) {
+						if (!this.assistantAvatarUrl || message && this.normalizeAssistantAppearance(message.appearance)) return null;
+						return this.assistantAvatarUrl;
+					},
 					getAssistantIcon(message) {
 						var appearance = message ? this.normalizeAssistantAppearance(message.appearance) : null;
 						return appearance && appearance.icon ? appearance.icon : "fa fa-robot";
@@ -2278,6 +2290,7 @@
 				sessionUrlTemplate: getAttributeValue(element, "data-coreai-chat-session-url-template"),
 				userLabel: getAttributeValue(element, "data-coreai-chat-user-label"),
 				assistantLabel: getAttributeValue(element, "data-coreai-chat-assistant-label"),
+				assistantAvatarUrl: getAttributeValue(element, "data-coreai-chat-assistant-avatar-url"),
 				copyTitle: getAttributeValue(element, "data-coreai-chat-copy-title"),
 				copiedTitle: getAttributeValue(element, "data-coreai-chat-copied-title")
 			};