Add Label to the Assisant (#397)

Author: MikeAlhayek

src/Abstractions/CrestApps.OrchardCore.AI.Abstractions/Models/AssistantMessageAppearance.cs

@@ -5,6 +5,11 @@ namespace CrestApps.OrchardCore.AI.Models;
 /// </summary>
 public sealed class AssistantMessageAppearance
 {
+    /// <summary>
+    /// Gets or sets the assistant role label shown in the chat UI.
+    /// </summary>
+    public string Label { get; set; }
+
     /// <summary>
     /// Gets or sets the Font Awesome icon classes for the assistant message.
     /// </summary>

src/CrestApps.OrchardCore.Documentations/docs/ai/response-handlers.md

@@ -83,6 +83,7 @@ public sealed class GenesysResponseHandler : IChatResponseHandler
         // Optional: set this only when you want to override the default bot appearance.
         context.AssistantAppearance = new AssistantMessageAppearance
         {
+            Label = "Mike",
             Icon = "fa-solid fa-headset",
             CssClass = "text-secondary",
             DisableStreamingAnimation = true,
@@ -108,7 +109,7 @@ public sealed class GenesysResponseHandler : IChatResponseHandler
 
 Setting `context.AssistantAppearance` is optional. If you leave it unset, the chat UI keeps the default assistant/bot appearance.
 
-Use `context.AssistantAppearance` only when your handler needs the streamed assistant message to render as something other than the default AI bot. This is especially useful for live-agent or transferred conversations where you want a headset icon, a different Bootstrap text color, or no streaming spinner/fade animation.
+Use `context.AssistantAppearance` only when your handler needs the streamed assistant message to render as something other than the default AI bot. This is especially useful for live-agent or transferred conversations where you want a custom label such as `Mike` or `Agent`, a headset icon, a different Bootstrap text color, or no streaming spinner/fade animation.
 
 For streaming handlers, setting `context.AssistantAppearance` is enough because the hub sends that same value to the client and persists it on the assistant prompt with `assistantMessage.Put(context.AssistantAppearance)`.
 
@@ -198,6 +199,7 @@ internal static class GenesysWebhookEndpoint
             };
             prompt.Put(new AssistantMessageAppearance
             {
+                Label = "Mike",
                 Icon = "fa-solid fa-headset",
                 CssClass = "text-secondary",
                 DisableStreamingAnimation = true,
@@ -286,7 +288,7 @@ public override void Configure(IApplicationBuilder app, IEndpointRouteBuilder ro
 :::important
 `ReceiveMessage` is **not** a built-in SignalR client method in the current chat UI, so calling `SendAsync("ReceiveMessage", ...)` will not update the browser. The built-in client methods are:
 
-- `ReceiveConversationAssistantToken` + `ReceiveConversationAssistantComplete` to append a new assistant message directly to the current UI. `ReceiveConversationAssistantToken` accepts an optional `AssistantMessageAppearance` so services can override the icon, text color class, and streaming animation behavior.
+- `ReceiveConversationAssistantToken` + `ReceiveConversationAssistantComplete` to append a new assistant message directly to the current UI. `ReceiveConversationAssistantToken` accepts an optional `AssistantMessageAppearance` so services can override the visible assistant label, icon, text color class, and streaming animation behavior.
 - `LoadSession` / `LoadInteraction` to reload the full transcript after you persist a deferred assistant message.
 - `ReceiveNotification`, `UpdateNotification`, and `RemoveNotification` for transient system messages sent through `IChatNotificationSender`.
 

src/CrestApps.OrchardCore.Documentations/docs/changelog/v2.0.0.md

@@ -63,7 +63,7 @@ This is one of the most important practical advancements in the release because
 
 Response-handler-driven assistant messages can now also override the default bot presentation by supplying a custom icon, a CSS color class such as `text-secondary`, and an option to disable the streaming spinner animation. This makes live-agent and transferred conversations look like real people in the transcript instead of always appearing as the green AI bot.
 
-The response-handler API now exposes this customization through the typed `ChatResponseHandlerContext.AssistantAppearance` property, and the hubs persist or return `AssistantMessageAppearance` directly through `Put(...)` and `As<AssistantMessageAppearance>()` instead of a separate helper. The response-handler documentation also now makes it explicit that deferred webhook implementations must persist `AssistantMessageAppearance` on the saved assistant prompt and include it in `ReceiveConversationAssistantToken(...)` if they want the appearance to survive reloads and be broadcast correctly to connected clients.
+The response-handler API now exposes this customization through the typed `ChatResponseHandlerContext.AssistantAppearance` property, and the hubs persist or return `AssistantMessageAppearance` directly through `Put(...)` and `As<AssistantMessageAppearance>()` instead of a separate helper. The response-handler documentation also now makes it explicit that deferred webhook implementations must persist `AssistantMessageAppearance` on the saved assistant prompt and include it in `ReceiveConversationAssistantToken(...)` if they want the appearance to survive reloads and be broadcast correctly to connected clients. `AssistantMessageAppearance` can also override the visible assistant label, so live-agent and external-handler replies can display names such as `Mike` or `Agent` instead of always showing `Assistant`.
 
 See [Response Handlers](../ai/response-handlers.md) and [Chat UI Notifications](../ai/chat-notifications.md).
 

src/Modules/CrestApps.OrchardCore.AI.Chat.Interactions/Assets/js/chat-interaction.js

@@ -10,6 +10,7 @@ window.chatInteractionManager = function () {
         downloadChartTitle: 'Download chart as image',
         downloadChartButtonText: 'Download',
         codeCopiedText: 'Copied!',
+        assistantLabel: 'Assistant',
 
         messageTemplate: `
             <div class="ai-chat-messages">
@@ -18,7 +19,7 @@ window.chatInteractionManager = function () {
                         <div v-if="message.role === 'user'" class="ai-chat-msg-role ai-chat-msg-role-user">You</div>
                         <div v-else-if="message.role !== 'indicator'" :class="getAssistantRoleClasses(message)">
                             <span :class="getAssistantIconClasses(message, index)"><i :class="getAssistantIcon(message)"></i></span>
-                            Assistant
+                            {{ getAssistantLabel(message) }}
                         </div>
                         <div class="lh-base">
                             <h4 v-if="message.title">{{ message.title }}</h4>
@@ -691,20 +692,26 @@ window.chatInteractionManager = function () {
                         return null;
                     }
 
+                    var label = typeof appearance.label === 'string' ? appearance.label.trim() : '';
                     var icon = typeof appearance.icon === 'string' ? appearance.icon.trim() : '';
                     var cssClass = typeof appearance.cssClass === 'string' ? appearance.cssClass.trim() : '';
                     var disableStreamingAnimation = !!appearance.disableStreamingAnimation;
 
-                    if (!icon && !cssClass && !disableStreamingAnimation) {
+                    if (!label && !icon && !cssClass && !disableStreamingAnimation) {
                         return null;
                     }
 
                     return {
+                        label: label,
                         icon: icon,
                         cssClass: cssClass,
                         disableStreamingAnimation: disableStreamingAnimation,
                     };
                 },
+                getAssistantLabel(message) {
+                    var appearance = message ? this.normalizeAssistantAppearance(message.appearance) : null;
+                    return appearance && appearance.label ? appearance.label : defaultConfig.assistantLabel;
+                },
                 getAssistantRoleClasses(message) {
                     var appearance = message ? this.normalizeAssistantAppearance(message.appearance) : null;
                     var classes = ['ai-chat-msg-role'];

src/Modules/CrestApps.OrchardCore.AI.Chat.Interactions/wwwroot/scripts/chat-interaction.js

@@ -30,7 +30,8 @@ window.chatInteractionManager = function () {
     downloadChartTitle: 'Download chart as image',
     downloadChartButtonText: 'Download',
     codeCopiedText: 'Copied!',
-    messageTemplate: "\n            <div class=\"ai-chat-messages\">\n                <div v-for=\"(message, index) in messages\" :key=\"index\" class=\"ai-chat-message-item\">\n                    <div>\n                        <div v-if=\"message.role === 'user'\" class=\"ai-chat-msg-role ai-chat-msg-role-user\">You</div>\n                        <div v-else-if=\"message.role !== 'indicator'\" :class=\"getAssistantRoleClasses(message)\">\n                            <span :class=\"getAssistantIconClasses(message, index)\"><i :class=\"getAssistantIcon(message)\"></i></span>\n                            Assistant\n                        </div>\n                        <div class=\"lh-base\">\n                            <h4 v-if=\"message.title\">{{ message.title }}</h4>\n                            <div v-html=\"message.htmlContent\"></div>\n                            <span class=\"message-buttons-container\" v-if=\"!isIndicator(message)\">\n                                <button class=\"btn btn-sm btn-link text-secondary p-0 button-message-toolbox\" @click=\"copyResponse(message.content)\" title=\"Click here to copy response to clipboard.\">\n                                    <i class=\"fa-solid fa-copy\"></i>\n                                </button>\n                            </span>\n                        </div>\n                    </div>\n                </div>\n                <div v-for=\"notification in notifications\" :key=\"'notif-' + notification.type\" class=\"ai-chat-notification\" :class=\"'ai-chat-notification-' + (notification.type || 'info') + ' ' + (notification.cssClass || '')\">\n                    <div class=\"ai-chat-notification-content\">\n                        <i v-if=\"notification.icon\" :class=\"notification.icon\" class=\"ai-chat-notification-icon\"></i>\n                        <span class=\"ai-chat-notification-text\">{{ notification.content }}</span>\n                        <button v-if=\"notification.dismissible\" class=\"btn btn-sm btn-link p-0 ms-2 ai-chat-notification-dismiss\" @click=\"dismissNotification(notification.type)\" title=\"Dismiss\">\n                            <i class=\"fa-solid fa-xmark\"></i>\n                        </button>\n                    </div>\n                    <div v-if=\"notification.actions && notification.actions.length\" class=\"ai-chat-notification-actions\">\n                        <button v-for=\"action in notification.actions\" :key=\"action.name\" class=\"btn btn-sm\" :class=\"action.cssClass || 'btn-outline-secondary'\" @click=\"handleNotificationAction(notification.type, action.name)\">\n                            <i v-if=\"action.icon\" :class=\"action.icon\" class=\"me-1\"></i>\n                            {{ action.label }}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        ",
+    assistantLabel: 'Assistant',
+    messageTemplate: "\n            <div class=\"ai-chat-messages\">\n                <div v-for=\"(message, index) in messages\" :key=\"index\" class=\"ai-chat-message-item\">\n                    <div>\n                        <div v-if=\"message.role === 'user'\" class=\"ai-chat-msg-role ai-chat-msg-role-user\">You</div>\n                        <div v-else-if=\"message.role !== 'indicator'\" :class=\"getAssistantRoleClasses(message)\">\n                            <span :class=\"getAssistantIconClasses(message, index)\"><i :class=\"getAssistantIcon(message)\"></i></span>\n                            {{ getAssistantLabel(message) }}\n                        </div>\n                        <div class=\"lh-base\">\n                            <h4 v-if=\"message.title\">{{ message.title }}</h4>\n                            <div v-html=\"message.htmlContent\"></div>\n                            <span class=\"message-buttons-container\" v-if=\"!isIndicator(message)\">\n                                <button class=\"btn btn-sm btn-link text-secondary p-0 button-message-toolbox\" @click=\"copyResponse(message.content)\" title=\"Click here to copy response to clipboard.\">\n                                    <i class=\"fa-solid fa-copy\"></i>\n                                </button>\n                            </span>\n                        </div>\n                    </div>\n                </div>\n                <div v-for=\"notification in notifications\" :key=\"'notif-' + notification.type\" class=\"ai-chat-notification\" :class=\"'ai-chat-notification-' + (notification.type || 'info') + ' ' + (notification.cssClass || '')\">\n                    <div class=\"ai-chat-notification-content\">\n                        <i v-if=\"notification.icon\" :class=\"notification.icon\" class=\"ai-chat-notification-icon\"></i>\n                        <span class=\"ai-chat-notification-text\">{{ notification.content }}</span>\n                        <button v-if=\"notification.dismissible\" class=\"btn btn-sm btn-link p-0 ms-2 ai-chat-notification-dismiss\" @click=\"dismissNotification(notification.type)\" title=\"Dismiss\">\n                            <i class=\"fa-solid fa-xmark\"></i>\n                        </button>\n                    </div>\n                    <div v-if=\"notification.actions && notification.actions.length\" class=\"ai-chat-notification-actions\">\n                        <button v-for=\"action in notification.actions\" :key=\"action.name\" class=\"btn btn-sm\" :class=\"action.cssClass || 'btn-outline-secondary'\" @click=\"handleNotificationAction(notification.type, action.name)\">\n                            <i v-if=\"action.icon\" :class=\"action.icon\" class=\"me-1\"></i>\n                            {{ action.label }}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        ",
     indicatorTemplate: "\n            <div class=\"ai-chat-msg-role ai-chat-msg-role-assistant\">\n                <span class=\"ai-streaming-icon\"><i class=\"fa fa-robot\" style=\"display: inline-block;\"></i></span>\n                Assistant\n            </div>\n        ",
     // Localizable strings
     untitledText: 'Untitled',
@@ -676,18 +677,24 @@ window.chatInteractionManager = function () {
           if (!appearance) {
             return null;
           }
+          var label = typeof appearance.label === 'string' ? appearance.label.trim() : '';
           var icon = typeof appearance.icon === 'string' ? appearance.icon.trim() : '';
           var cssClass = typeof appearance.cssClass === 'string' ? appearance.cssClass.trim() : '';
           var disableStreamingAnimation = !!appearance.disableStreamingAnimation;
-          if (!icon && !cssClass && !disableStreamingAnimation) {
+          if (!label && !icon && !cssClass && !disableStreamingAnimation) {
             return null;
           }
           return {
+            label: label,
             icon: icon,
             cssClass: cssClass,
             disableStreamingAnimation: disableStreamingAnimation
           };
         },
+        getAssistantLabel: function getAssistantLabel(message) {
+          var appearance = message ? this.normalizeAssistantAppearance(message.appearance) : null;
+          return appearance && appearance.label ? appearance.label : defaultConfig.assistantLabel;
+        },
         getAssistantRoleClasses: function getAssistantRoleClasses(message) {
           var appearance = message ? this.normalizeAssistantAppearance(message.appearance) : null;
           var classes = ['ai-chat-msg-role'];

src/Modules/CrestApps.OrchardCore.AI.Chat.Interactions/wwwroot/scripts/chat-interaction.min.js

@@ -22,7 +22,7 @@ window.openAIChatManager = function () {
                     <div v-if="message.role === 'user'" class="ai-chat-msg-role ai-chat-msg-role-user">{{ userLabel }}</div>
                     <div v-else-if="message.role !== 'indicator'" :class="getAssistantRoleClasses(message)">
                         <span :class="getAssistantIconClasses(message, index)"><i :class="getAssistantIcon(message)"></i></span>
-                        {{ assistantLabel }}
+                        {{ getAssistantLabel(message) }}
                     </div>
                     <div class="lh-base">
                         <h4 v-if="message.title">{{ message.title }}</h4>
@@ -623,20 +623,26 @@ window.openAIChatManager = function () {
                         return null;
                     }
 
+                    var label = typeof appearance.label === 'string' ? appearance.label.trim() : '';
                     var icon = typeof appearance.icon === 'string' ? appearance.icon.trim() : '';
                     var cssClass = typeof appearance.cssClass === 'string' ? appearance.cssClass.trim() : '';
                     var disableStreamingAnimation = !!appearance.disableStreamingAnimation;
 
-                    if (!icon && !cssClass && !disableStreamingAnimation) {
+                    if (!label && !icon && !cssClass && !disableStreamingAnimation) {
                         return null;
                     }
 
                     return {
+                        label: label,
                         icon: icon,
                         cssClass: cssClass,
                         disableStreamingAnimation: disableStreamingAnimation,
                     };
                 },
+                getAssistantLabel(message) {
+                    var appearance = message ? this.normalizeAssistantAppearance(message.appearance) : null;
+                    return appearance && appearance.label ? appearance.label : this.assistantLabel;
+                },
                 getAssistantRoleClasses(message) {
                     var appearance = message ? this.normalizeAssistantAppearance(message.appearance) : null;
                     var classes = ['ai-chat-msg-role'];