open-chat-studio-widget 0.4.7 → 0.4.8

package/dist/collection/collection-manifest.json

@@ -4,7 +4,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.26.0",
+    "version": "4.36.3",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

package/dist/collection/components/ocs-chat/ocs-chat.css

@@ -499,6 +499,39 @@ video {
 [hidden]:where(:not([hidden="until-found"])) {
   display: none;
 }
+.container {
+  width: 100%;
+}
+@media (min-width: 640px) {
+
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+
+  .container {
+    max-width: 1536px;
+  }
+}
 #ocs-chat-window {
     z-index: var(--chat-z-index);
     font-size: var(--chat-window-font-size);
@@ -747,6 +780,7 @@ video {
   overflow-y: auto;
 }
 .messages-container::-webkit-scrollbar {
+  height: 0.375rem;
   width: 0.375rem;
 }
 .messages-container::-webkit-scrollbar-track {
@@ -1342,6 +1376,7 @@ textarea {
   overflow-y: auto;
 }
 textarea::-webkit-scrollbar {
+  height: 0.375rem;
   width: 0.375rem;
 }
 textarea::-webkit-scrollbar-track {
@@ -1371,6 +1406,7 @@ textarea::-webkit-scrollbar-thumb:hover {
   height: var(--loading-spinner-size);
 }
 .overflow-y-auto::-webkit-scrollbar {
+  height: 0.375rem;
   width: 0.375rem;
 }
 .overflow-y-auto::-webkit-scrollbar-track {

package/dist/collection/components/ocs-chat/ocs-chat.js

@@ -509,10 +509,30 @@ export class OcsChat {
             // Silently fail for polling
         }
     }
-    scrollToBottom() {
+    /**
+     * Scroll the message container to the bottom.
+     * @param forceEnd When `false`, scroll the top of the last message into view.
+     *    When `true`, scroll all the way to the end of the last message.
+     */
+    scrollToBottom(forceEnd = false) {
         setTimeout(() => {
             if (this.messageListRef) {
-                this.messageListRef.scrollTop = this.messageListRef.scrollHeight;
+                const lastChild = this.messageListRef.lastElementChild;
+                if (!forceEnd && lastChild) {
+                    // scroll so that the top of the last message is in the centre of the message container
+                    const parentRect = this.messageListRef.getBoundingClientRect();
+                    const childRect = lastChild.getBoundingClientRect();
+                    const currentScrollTop = this.messageListRef.scrollTop;
+                    const childTopRelativeToParent = childRect.top - parentRect.top;
+                    const targetScroll = currentScrollTop + childTopRelativeToParent - (parentRect.height / 2);
+                    this.messageListRef.scrollTo({
+                        top: targetScroll,
+                        behavior: 'smooth'
+                    });
+                }
+                else {
+                    this.messageListRef.scrollTop = this.messageListRef.scrollHeight;
+                }
             }
         }, OcsChat.SCROLL_DELAY_MS);
     }
@@ -613,6 +633,7 @@ export class OcsChat {
             this.pauseMessagePolling();
         }
         else {
+            this.scrollToBottom(true);
             this.resumeMessagePolling();
         }
     }
@@ -939,6 +960,7 @@ export class OcsChat {
         return {
             "chatbotId": {
                 "type": "string",
+                "attribute": "chatbot-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -953,11 +975,11 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "chatbot-id",
                 "reflect": false
             },
             "apiBaseUrl": {
                 "type": "string",
+                "attribute": "api-base-url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -972,12 +994,12 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "api-base-url",
                 "reflect": false,
                 "defaultValue": "\"https://chatbots.dimagi.com\""
             },
             "buttonText": {
                 "type": "string",
+                "attribute": "button-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -992,11 +1014,11 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-text",
                 "reflect": false
             },
             "iconUrl": {
                 "type": "string",
+                "attribute": "icon-url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1011,11 +1033,11 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-url",
                 "reflect": false
             },
             "buttonShape": {
                 "type": "string",
+                "attribute": "button-shape",
                 "mutable": false,
                 "complexType": {
                     "original": "'round' | 'square'",
@@ -1030,12 +1052,12 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-shape",
                 "reflect": false,
                 "defaultValue": "'square'"
             },
             "headerText": {
                 "type": "string",
+                "attribute": "header-text",
                 "mutable": false,
                 "complexType": {
                     "original": "''",
@@ -1050,11 +1072,11 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "header-text",
                 "reflect": false
             },
             "newChatConfirmationMessage": {
                 "type": "string",
+                "attribute": "new-chat-confirmation-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1069,12 +1091,12 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "new-chat-confirmation-message",
                 "reflect": false,
                 "defaultValue": "\"Starting a new chat will clear your current conversation. Continue?\""
             },
             "visible": {
                 "type": "boolean",
+                "attribute": "visible",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -1089,12 +1111,12 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "visible",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": true,
                 "complexType": {
                     "original": "'left' | 'center' | 'right'",
@@ -1109,12 +1131,12 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": false,
                 "defaultValue": "'right'"
             },
             "welcomeMessages": {
                 "type": "string",
+                "attribute": "welcome-messages",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1129,11 +1151,11 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "welcome-messages",
                 "reflect": false
             },
             "starterQuestions": {
                 "type": "string",
+                "attribute": "starter-questions",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1148,11 +1170,11 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "starter-questions",
                 "reflect": false
             },
             "userId": {
                 "type": "string",
+                "attribute": "user-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1167,11 +1189,11 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "user-id",
                 "reflect": false
             },
             "userName": {
                 "type": "string",
+                "attribute": "user-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1186,11 +1208,11 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "user-name",
                 "reflect": false
             },
             "persistentSession": {
                 "type": "boolean",
+                "attribute": "persistent-session",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1205,12 +1227,12 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "persistent-session",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "persistentSessionExpire": {
                 "type": "number",
+                "attribute": "persistent-session-expire",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -1225,12 +1247,12 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "persistent-session-expire",
                 "reflect": false,
                 "defaultValue": "60 * 24"
             },
             "allowFullScreen": {
                 "type": "boolean",
+                "attribute": "allow-full-screen",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1245,12 +1267,12 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "allow-full-screen",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "allowAttachments": {
                 "type": "boolean",
+                "attribute": "allow-attachments",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1265,12 +1287,12 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "allow-attachments",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "typingIndicatorText": {
                 "type": "string",
+                "attribute": "typing-indicator-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1285,7 +1307,6 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "typing-indicator-text",
                 "reflect": false,
                 "defaultValue": "\"Preparing response\""
             }