@blotoutio/providers-shop-gpt-sdk 1.61.0 → 1.61.2

package/index.cjs.js

@@ -10123,60 +10123,88 @@ if (!customElements.get('feedback-dialog')) {
     customElements.define('feedback-dialog', FeedbackDialog);
 }
 
+const THINKING_TO_TYPING_DELAY = 4000;
 class TypingIndicator extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.label = 'Thinking';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.label = 'Thinking';
+        this.phaseTimer = setTimeout(() => {
+            this.label = 'Typing';
+        }, THINKING_TO_TYPING_DELAY);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.phaseTimer) {
+            clearTimeout(this.phaseTimer);
+            this.phaseTimer = undefined;
+        }
+    }
     render() {
         return b `
-      <div class="typing-dots">
-        <div class="dot"></div>
-        <div class="dot"></div>
-        <div class="dot"></div>
+      <div class="indicator" role="status" aria-live="polite">
+        <span>${this.label}</span><span class="dots"></span>
       </div>
     `;
     }
 }
 TypingIndicator.styles = [
     i$4 `
-      .typing-dots {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-      }
-
-      .dot {
-        width: 6px;
-        height: 6px;
-        background-color: #b6b6b6;
-        border-radius: 50%;
-        animation: bounce 1.2s infinite ease-in-out;
+      .indicator {
+        display: inline-flex;
+        align-items: baseline;
+        font-size: 14px;
+        font-weight: 500;
+        color: #8b8b8b;
+        animation: pulse 1.5s ease-in-out infinite;
       }
 
-      .dot:nth-child(1) {
-        animation-delay: 0s;
+      /* Animated ellipsis that keeps the label width stable. */
+      .dots {
+        display: inline-block;
+        width: 1.1em;
+        text-align: left;
       }
 
-      .dot:nth-child(2) {
-        animation-delay: 0.2s;
+      .dots::after {
+        content: '';
+        animation: ellipsis 1.4s steps(1, end) infinite;
       }
 
-      .dot:nth-child(3) {
-        animation-delay: 0.4s;
+      @keyframes ellipsis {
+        0% {
+          content: '';
+        }
+        25% {
+          content: '.';
+        }
+        50% {
+          content: '..';
+        }
+        75%,
+        100% {
+          content: '...';
+        }
       }
 
-      @keyframes bounce {
+      @keyframes pulse {
         0%,
-        80%,
         100% {
-          transform: translateY(0);
-          background-color: #b6b6b6;
+          opacity: 0.5;
         }
-        40% {
-          transform: translateY(-4px);
-          background-color: #8b8b8b;
+        50% {
+          opacity: 1;
         }
       }
     `,
 ];
+__decorate([
+    r$1(),
+    __metadata("design:type", String)
+], TypingIndicator.prototype, "label", void 0);
 if (!customElements.get('typing-indicator')) {
     customElements.define('typing-indicator', TypingIndicator);
 }

package/index.js

@@ -10124,60 +10124,88 @@ ${this.comment ? this.comment : A}</textarea
         customElements.define('feedback-dialog', FeedbackDialog);
     }
 
+    const THINKING_TO_TYPING_DELAY = 4000;
     class TypingIndicator extends i$1 {
+        constructor() {
+            super(...arguments);
+            this.label = 'Thinking';
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.label = 'Thinking';
+            this.phaseTimer = setTimeout(() => {
+                this.label = 'Typing';
+            }, THINKING_TO_TYPING_DELAY);
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            if (this.phaseTimer) {
+                clearTimeout(this.phaseTimer);
+                this.phaseTimer = undefined;
+            }
+        }
         render() {
             return b `
-      <div class="typing-dots">
-        <div class="dot"></div>
-        <div class="dot"></div>
-        <div class="dot"></div>
+      <div class="indicator" role="status" aria-live="polite">
+        <span>${this.label}</span><span class="dots"></span>
       </div>
     `;
         }
     }
     TypingIndicator.styles = [
         i$4 `
-      .typing-dots {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-      }
-
-      .dot {
-        width: 6px;
-        height: 6px;
-        background-color: #b6b6b6;
-        border-radius: 50%;
-        animation: bounce 1.2s infinite ease-in-out;
+      .indicator {
+        display: inline-flex;
+        align-items: baseline;
+        font-size: 14px;
+        font-weight: 500;
+        color: #8b8b8b;
+        animation: pulse 1.5s ease-in-out infinite;
       }
 
-      .dot:nth-child(1) {
-        animation-delay: 0s;
+      /* Animated ellipsis that keeps the label width stable. */
+      .dots {
+        display: inline-block;
+        width: 1.1em;
+        text-align: left;
       }
 
-      .dot:nth-child(2) {
-        animation-delay: 0.2s;
+      .dots::after {
+        content: '';
+        animation: ellipsis 1.4s steps(1, end) infinite;
       }
 
-      .dot:nth-child(3) {
-        animation-delay: 0.4s;
+      @keyframes ellipsis {
+        0% {
+          content: '';
+        }
+        25% {
+          content: '.';
+        }
+        50% {
+          content: '..';
+        }
+        75%,
+        100% {
+          content: '...';
+        }
       }
 
-      @keyframes bounce {
+      @keyframes pulse {
         0%,
-        80%,
         100% {
-          transform: translateY(0);
-          background-color: #b6b6b6;
+          opacity: 0.5;
         }
-        40% {
-          transform: translateY(-4px);
-          background-color: #8b8b8b;
+        50% {
+          opacity: 1;
         }
       }
     `,
     ];
+    __decorate([
+        r$1(),
+        __metadata("design:type", String)
+    ], TypingIndicator.prototype, "label", void 0);
     if (!customElements.get('typing-indicator')) {
         customElements.define('typing-indicator', TypingIndicator);
     }

package/index.mjs

@@ -10121,60 +10121,88 @@ if (!customElements.get('feedback-dialog')) {
     customElements.define('feedback-dialog', FeedbackDialog);
 }
 
+const THINKING_TO_TYPING_DELAY = 4000;
 class TypingIndicator extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.label = 'Thinking';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.label = 'Thinking';
+        this.phaseTimer = setTimeout(() => {
+            this.label = 'Typing';
+        }, THINKING_TO_TYPING_DELAY);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.phaseTimer) {
+            clearTimeout(this.phaseTimer);
+            this.phaseTimer = undefined;
+        }
+    }
     render() {
         return b `
-      <div class="typing-dots">
-        <div class="dot"></div>
-        <div class="dot"></div>
-        <div class="dot"></div>
+      <div class="indicator" role="status" aria-live="polite">
+        <span>${this.label}</span><span class="dots"></span>
       </div>
     `;
     }
 }
 TypingIndicator.styles = [
     i$4 `
-      .typing-dots {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-      }
-
-      .dot {
-        width: 6px;
-        height: 6px;
-        background-color: #b6b6b6;
-        border-radius: 50%;
-        animation: bounce 1.2s infinite ease-in-out;
+      .indicator {
+        display: inline-flex;
+        align-items: baseline;
+        font-size: 14px;
+        font-weight: 500;
+        color: #8b8b8b;
+        animation: pulse 1.5s ease-in-out infinite;
       }
 
-      .dot:nth-child(1) {
-        animation-delay: 0s;
+      /* Animated ellipsis that keeps the label width stable. */
+      .dots {
+        display: inline-block;
+        width: 1.1em;
+        text-align: left;
       }
 
-      .dot:nth-child(2) {
-        animation-delay: 0.2s;
+      .dots::after {
+        content: '';
+        animation: ellipsis 1.4s steps(1, end) infinite;
       }
 
-      .dot:nth-child(3) {
-        animation-delay: 0.4s;
+      @keyframes ellipsis {
+        0% {
+          content: '';
+        }
+        25% {
+          content: '.';
+        }
+        50% {
+          content: '..';
+        }
+        75%,
+        100% {
+          content: '...';
+        }
       }
 
-      @keyframes bounce {
+      @keyframes pulse {
         0%,
-        80%,
         100% {
-          transform: translateY(0);
-          background-color: #b6b6b6;
+          opacity: 0.5;
         }
-        40% {
-          transform: translateY(-4px);
-          background-color: #8b8b8b;
+        50% {
+          opacity: 1;
         }
       }
     `,
 ];
+__decorate([
+    r$1(),
+    __metadata("design:type", String)
+], TypingIndicator.prototype, "label", void 0);
 if (!customElements.get('typing-indicator')) {
     customElements.define('typing-indicator', TypingIndicator);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blotoutio/providers-shop-gpt-sdk",
-  "version": "1.61.0",
+  "version": "1.61.2",
   "description": "Shop GPT SDK for EdgeTag",
   "author": "Blotout",
   "license": "MIT",