@ni/spright-components 5.1.1 → 5.2.0

package/dist/all-components-bundle.js

@@ -93047,7 +93047,7 @@ focus outline in that case.
     :host {
         flex-direction: column;
         justify-content: flex-start;
-        row-gap: ${standardPadding};
+        row-gap: 32px;
         padding: ${mediumPadding};
         background: ${applicationBackgroundColor};
         overflow-y: auto;
@@ -93073,6 +93073,16 @@ focus outline in that case.
       .withPrefix('spright')
       .register(sprightChatConversation());
 
+  /**
+   * A message type in a chat conversation.
+   * @public
+   */
+  const ChatMessageType = {
+      system: undefined,
+      outbound: 'outbound',
+      inbound: 'inbound'
+  };
+
   const styles$1 = css `
     ${display('flex')}
 
@@ -93087,45 +93097,85 @@ focus outline in that case.
         color: ${bodyFontColor};
     }
 
-    :host([message-type='outbound']) {
+    :host([message-type='${ChatMessageType.outbound}']) {
         justify-content: flex-end;
     }
 
-    :host([message-type='inbound']) {
+    :host([message-type='${ChatMessageType.inbound}']) {
         justify-content: flex-start;
     }
 
-    div {
-        max-width: calc(100% - 200px);
+    .container {
+        display: flex;
+        flex-direction: column;
+        max-width: calc(90%);
+    }
+
+    [part='start'] {
+        display: none;
+    }
+
+    .message-content {
         width: fit-content;
         height: fit-content;
-        padding: ${mediumPadding};
         overflow-x: auto;
     }
 
-    :host([message-type='outbound']) div {
+    :host([message-type='${ChatMessageType.outbound}']) .message-content {
         background: ${fillSelectedColor};
         border: ${borderWidth} solid ${borderHoverColor};
-        border-radius: 8px 8px 0px 8px;
+        border-radius: ${mediumPadding} ${mediumPadding} 0px ${mediumPadding};
+        padding: ${mediumPadding};
+    }
+
+    .footer-actions {
+        display: none;
+    }
+
+    :host([message-type='${ChatMessageType.inbound}'])
+        .footer-actions.has-content {
+        display: flex;
+        column-gap: ${standardPadding};
+        margin-top: ${mediumPadding};
     }
 
-    :host([message-type='inbound']) div {
-        border-radius: 8px 8px 8px 0px;
+    .footer-actions ::slotted(${buttonTag}),
+    .footer-actions ::slotted(${toggleButtonTag}),
+    .footer-actions ::slotted(${anchorButtonTag}),
+    .footer-actions ::slotted(${menuButtonTag}) {
+        height: ${controlSlimHeight};
+    }
+
+    .end {
+        display: none;
+    }
+
+    :host([message-type='${ChatMessageType.inbound}']) .end {
+        display: flex;
+        column-gap: ${standardPadding};
+        margin-top: ${largePadding};
     }
 `;
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$1 = html `<div><slot></slot></div>`;
+  const template$1 = (context, definition) => html `
+    <div class="container">
+        ${startSlotTemplate(context, definition)}
+        <section class="message-content">
+            <slot></slot>
+        </section>
+        <section class="footer-actions ${x => (x.footerActionsIsEmpty ? '' : 'has-content')}">
+           <slot 
+                name="footer-actions"
+                ${slotted({ property: 'slottedFooterActionsElements' })}
+           ></slot>
+        </section>
+        ${endSlotTemplate(context, definition)}
+    </div>
+`;
   /* eslint-enable @typescript-eslint/indent */
 
-  /**
-   * A message type in a chat conversation.
-   * @public
-   */
-  const ChatMessageType = {
-      system: undefined};
-
   /**
    * A Spright component for displaying a chat message
    */
@@ -93139,11 +93189,23 @@ focus outline in that case.
            * HTML Attribute: message-type
            */
           this.messageType = ChatMessageType.system;
+          /** @internal */
+          this.footerActionsIsEmpty = true;
+      }
+      slottedFooterActionsElementsChanged(_prev, next) {
+          this.footerActionsIsEmpty = !next?.length;
       }
   }
   __decorate([
       attr({ attribute: 'message-type' })
   ], ChatMessage.prototype, "messageType", void 0);
+  __decorate([
+      observable
+  ], ChatMessage.prototype, "footerActionsIsEmpty", void 0);
+  __decorate([
+      observable
+  ], ChatMessage.prototype, "slottedFooterActionsElements", void 0);
+  applyMixins(ChatMessage, StartEnd);
   const sprightChatMessage = ChatMessage.compose({
       baseName: 'chat-message',
       template: template$1,