@crestapps/ai-chat-ui 2.0.0-preview.223 → 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,
@@ -756,7 +763,6 @@
 						}
 						for (var m = 0; m < this.uploadErrors.length; m++) {
 							var failedItem = this.uploadErrors[m];
-							failedItem.fileName;
 							var errorMsg = failedItem.error || "Upload failed";
 							html += "<span class=\"alert alert-danger d-flex align-items-start gap-2 w-100 mb-1 py-1 px-2\" role=\"alert\" style=\"font-size: 0.8rem;\">";
 							html += "<i class=\"fa-solid fa-circle-exclamation mt-1\" style=\"font-size: 0.7rem;\"></i>";
@@ -853,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";
@@ -1032,7 +1043,7 @@
 								if (this.realtimeController) this.realtimeController.receivePcm(bytes);
 							} else this.audioChunks.push(bytes);
 						});
-						this.connection.on("ReceiveAudioComplete", (sessionId) => {
+						this.connection.on("ReceiveAudioComplete", () => {
 							this.playCollectedAudio();
 						});
 						this.connection.on("ReceiveNotification", (notification) => {
@@ -1420,7 +1431,7 @@
 								icons[i].classList.add("ai-bot-icon");
 							}
 						}
-						for (var i = 0; i < this.messages.length; i++) if (this.messages[i].isStreaming) this.messages[i].isStreaming = false;
+						for (i = 0; i < this.messages.length; i++) if (this.messages[i].isStreaming) this.messages[i].isStreaming = false;
 					},
 					handleExternalTtsStop(e) {
 						if (e?.detail?.sourceId === this.ttsInstanceId) return;
@@ -2007,7 +2018,7 @@
 							this.generatePrompt(e.target);
 						});
 						const chatSessions = document.getElementsByClassName("chat-session-history-item");
-						for (var i = 0; i < chatSessions.length; i++) chatSessions[i].addEventListener("click", (e) => {
+						for (i = 0; i < chatSessions.length; i++) chatSessions[i].addEventListener("click", (e) => {
 							e.preventDefault();
 							var sessionId = e.target.getAttribute("data-session-id");
 							if (!sessionId) {
@@ -2144,7 +2155,7 @@
 							if (msg) this.updateFeedbackIcons(containers[i], msg.userRating);
 						}
 					},
-					rateMessage(message, isPositive, event) {
+					rateMessage(message, isPositive) {
 						var sessionId = this.getSessionId();
 						if (!sessionId || !message.id || !this.connection) return;
 						var newRating = message.userRating === isPositive ? null : isPositive;
@@ -2279,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")
 			};