@blotoutio/providers-shop-gpt-sdk 1.19.0 → 1.20.0

package/index.cjs.js

@@ -1907,6 +1907,8 @@ const productItemStyles = i$4 `
     font-family: 'Inter', sans-serif;
     font-size: 16px;
     font-weight: 400;
+    display: flex;
+    height: 100%;
 
     p {
       margin: 0;
@@ -1922,6 +1924,7 @@ const productItemStyles = i$4 `
     gap: 16px;
     cursor: pointer;
     text-decoration: none;
+    flex-grow: 1;
 
     img {
       width: 160px;
@@ -1951,6 +1954,10 @@ const productItemStyles = i$4 `
     }
   }
 
+  .product-info {
+    min-height: 40px;
+  }
+
   .product-name {
     display: -webkit-box;
     max-width: 100%;
@@ -5923,7 +5930,7 @@ class ProductItem extends TWLitElement$3 {
       >
         <img src=${this.product.image.url} alt=${this.product.image.alt} />
         <div class="content">
-          <div>
+          <div class="product-info">
             <p
               class="product-name text-slate-800 text-xs font-semibold"
               title=${this.product.title}
@@ -6009,6 +6016,8 @@ const productsListStyles = i$4 `
     flex: 0 0 176px;
     container-type: inline-size;
     container-name: productContainer;
+    display: flex;
+    flex-direction: column;
   }
 
   .products {
@@ -8579,6 +8588,35 @@ const chatSectionStyles = i$4 `
     margin-top: 20px;
   }
 
+  .chat-form textarea.chat-textarea {
+    flex: 1;
+    padding: 10px 38px 12px 38px;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 20px;
+    color: #201d2f;
+
+    background: #fff;
+    border-radius: 6px;
+    border: 0.5px solid #bbbbce;
+    box-shadow: 0px 4px 10px 0px #0000000d;
+
+    resize: none;
+    overflow: hidden;
+    min-height: 40px;
+    max-height: 160px;
+
+    &:focus {
+      outline-width: 0;
+    }
+
+    &::placeholder {
+      font-weight: 400;
+      font-size: 14px;
+      color: #94a3b8;
+    }
+  }
+
   ${scrollBarStyles}
 `;
 
@@ -8982,9 +9020,14 @@ class PopupView extends TWLitElement$1 {
         }));
     }
     async onSubmit(e) {
-        var _a;
         e.preventDefault();
-        const message = (_a = this.userQuery) === null || _a === void 0 ? void 0 : _a.trim();
+        const message = this.userQuery;
+        if (!message) {
+            return;
+        }
+        if (this.chatTextareaElement) {
+            this.chatTextareaElement.style.height = 'auto';
+        }
         this.userQuery = '';
         await this.processMessage(e, message, false);
     }
@@ -9165,7 +9208,13 @@ class PopupView extends TWLitElement$1 {
             if (message.sender === 'bot') {
                 return this.botMessage(message, index);
             }
-            return x ` <div class="message user">${message.message}</div> `;
+            return x `
+            <div class="message user">
+              ${message.message
+                .split('\n')
+                .map((line) => x `<div>${line.trim() === '' ? x `<br />` : line}</div>`)}
+            </div>
+          `;
         })}
       </div>
     `;
@@ -9377,12 +9426,24 @@ class PopupView extends TWLitElement$1 {
         ${this.chatWindow()}
         <form class="chat-form" @submit=${this.onSubmit}>
           <span class="sparkles-icon"> ${sparklesSharp} </span>
-          <input
-            type="text"
+          <textarea
+            class="chat-textarea"
             .value=${this.userQuery}
-            @input=${(e) => (this.userQuery = e.target.value)}
+            rows="1"
             placeholder="What are you looking for?"
-          />
+            @input=${(e) => {
+            const target = e.target;
+            target.style.height = 'auto';
+            target.style.height = `${target.scrollHeight}px`;
+            this.userQuery = target.value;
+        }}
+            @keydown=${(e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                this.onSubmit(e);
+            }
+        }}
+          ></textarea>
           <button
             class="btn send-btn"
             type="submit"
@@ -9532,6 +9593,10 @@ __decorate([
     e$3('.chat-window'),
     __metadata("design:type", Object)
 ], PopupView.prototype, "chatWindowElement", void 0);
+__decorate([
+    e$3('.chat-textarea'),
+    __metadata("design:type", Object)
+], PopupView.prototype, "chatTextareaElement", void 0);
 __decorate([
     r$1(),
     __metadata("design:type", Object)

package/index.js

@@ -1908,6 +1908,8 @@ var ProvidersShopGptSdk = (function () {
     font-family: 'Inter', sans-serif;
     font-size: 16px;
     font-weight: 400;
+    display: flex;
+    height: 100%;
 
     p {
       margin: 0;
@@ -1923,6 +1925,7 @@ var ProvidersShopGptSdk = (function () {
     gap: 16px;
     cursor: pointer;
     text-decoration: none;
+    flex-grow: 1;
 
     img {
       width: 160px;
@@ -1952,6 +1955,10 @@ var ProvidersShopGptSdk = (function () {
     }
   }
 
+  .product-info {
+    min-height: 40px;
+  }
+
   .product-name {
     display: -webkit-box;
     max-width: 100%;
@@ -5924,7 +5931,7 @@ var ProvidersShopGptSdk = (function () {
       >
         <img src=${this.product.image.url} alt=${this.product.image.alt} />
         <div class="content">
-          <div>
+          <div class="product-info">
             <p
               class="product-name text-slate-800 text-xs font-semibold"
               title=${this.product.title}
@@ -6010,6 +6017,8 @@ var ProvidersShopGptSdk = (function () {
     flex: 0 0 176px;
     container-type: inline-size;
     container-name: productContainer;
+    display: flex;
+    flex-direction: column;
   }
 
   .products {
@@ -8580,6 +8589,35 @@ ${this.comment ? this.comment : E}</textarea
     margin-top: 20px;
   }
 
+  .chat-form textarea.chat-textarea {
+    flex: 1;
+    padding: 10px 38px 12px 38px;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 20px;
+    color: #201d2f;
+
+    background: #fff;
+    border-radius: 6px;
+    border: 0.5px solid #bbbbce;
+    box-shadow: 0px 4px 10px 0px #0000000d;
+
+    resize: none;
+    overflow: hidden;
+    min-height: 40px;
+    max-height: 160px;
+
+    &:focus {
+      outline-width: 0;
+    }
+
+    &::placeholder {
+      font-weight: 400;
+      font-size: 14px;
+      color: #94a3b8;
+    }
+  }
+
   ${scrollBarStyles}
 `;
 
@@ -8983,9 +9021,14 @@ ${this.comment ? this.comment : E}</textarea
             }));
         }
         async onSubmit(e) {
-            var _a;
             e.preventDefault();
-            const message = (_a = this.userQuery) === null || _a === void 0 ? void 0 : _a.trim();
+            const message = this.userQuery;
+            if (!message) {
+                return;
+            }
+            if (this.chatTextareaElement) {
+                this.chatTextareaElement.style.height = 'auto';
+            }
             this.userQuery = '';
             await this.processMessage(e, message, false);
         }
@@ -9166,7 +9209,13 @@ ${this.comment ? this.comment : E}</textarea
             if (message.sender === 'bot') {
                 return this.botMessage(message, index);
             }
-            return x ` <div class="message user">${message.message}</div> `;
+            return x `
+            <div class="message user">
+              ${message.message
+                .split('\n')
+                .map((line) => x `<div>${line.trim() === '' ? x `<br />` : line}</div>`)}
+            </div>
+          `;
         })}
       </div>
     `;
@@ -9378,12 +9427,24 @@ ${this.comment ? this.comment : E}</textarea
         ${this.chatWindow()}
         <form class="chat-form" @submit=${this.onSubmit}>
           <span class="sparkles-icon"> ${sparklesSharp} </span>
-          <input
-            type="text"
+          <textarea
+            class="chat-textarea"
             .value=${this.userQuery}
-            @input=${(e) => (this.userQuery = e.target.value)}
+            rows="1"
             placeholder="What are you looking for?"
-          />
+            @input=${(e) => {
+            const target = e.target;
+            target.style.height = 'auto';
+            target.style.height = `${target.scrollHeight}px`;
+            this.userQuery = target.value;
+        }}
+            @keydown=${(e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                this.onSubmit(e);
+            }
+        }}
+          ></textarea>
           <button
             class="btn send-btn"
             type="submit"
@@ -9533,6 +9594,10 @@ ${this.comment ? this.comment : E}</textarea
         e$3('.chat-window'),
         __metadata("design:type", Object)
     ], PopupView.prototype, "chatWindowElement", void 0);
+    __decorate([
+        e$3('.chat-textarea'),
+        __metadata("design:type", Object)
+    ], PopupView.prototype, "chatTextareaElement", void 0);
     __decorate([
         r$1(),
         __metadata("design:type", Object)

package/index.mjs

@@ -1905,6 +1905,8 @@ const productItemStyles = i$4 `
     font-family: 'Inter', sans-serif;
     font-size: 16px;
     font-weight: 400;
+    display: flex;
+    height: 100%;
 
     p {
       margin: 0;
@@ -1920,6 +1922,7 @@ const productItemStyles = i$4 `
     gap: 16px;
     cursor: pointer;
     text-decoration: none;
+    flex-grow: 1;
 
     img {
       width: 160px;
@@ -1949,6 +1952,10 @@ const productItemStyles = i$4 `
     }
   }
 
+  .product-info {
+    min-height: 40px;
+  }
+
   .product-name {
     display: -webkit-box;
     max-width: 100%;
@@ -5921,7 +5928,7 @@ class ProductItem extends TWLitElement$3 {
       >
         <img src=${this.product.image.url} alt=${this.product.image.alt} />
         <div class="content">
-          <div>
+          <div class="product-info">
             <p
               class="product-name text-slate-800 text-xs font-semibold"
               title=${this.product.title}
@@ -6007,6 +6014,8 @@ const productsListStyles = i$4 `
     flex: 0 0 176px;
     container-type: inline-size;
     container-name: productContainer;
+    display: flex;
+    flex-direction: column;
   }
 
   .products {
@@ -8577,6 +8586,35 @@ const chatSectionStyles = i$4 `
     margin-top: 20px;
   }
 
+  .chat-form textarea.chat-textarea {
+    flex: 1;
+    padding: 10px 38px 12px 38px;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 20px;
+    color: #201d2f;
+
+    background: #fff;
+    border-radius: 6px;
+    border: 0.5px solid #bbbbce;
+    box-shadow: 0px 4px 10px 0px #0000000d;
+
+    resize: none;
+    overflow: hidden;
+    min-height: 40px;
+    max-height: 160px;
+
+    &:focus {
+      outline-width: 0;
+    }
+
+    &::placeholder {
+      font-weight: 400;
+      font-size: 14px;
+      color: #94a3b8;
+    }
+  }
+
   ${scrollBarStyles}
 `;
 
@@ -8980,9 +9018,14 @@ class PopupView extends TWLitElement$1 {
         }));
     }
     async onSubmit(e) {
-        var _a;
         e.preventDefault();
-        const message = (_a = this.userQuery) === null || _a === void 0 ? void 0 : _a.trim();
+        const message = this.userQuery;
+        if (!message) {
+            return;
+        }
+        if (this.chatTextareaElement) {
+            this.chatTextareaElement.style.height = 'auto';
+        }
         this.userQuery = '';
         await this.processMessage(e, message, false);
     }
@@ -9163,7 +9206,13 @@ class PopupView extends TWLitElement$1 {
             if (message.sender === 'bot') {
                 return this.botMessage(message, index);
             }
-            return x ` <div class="message user">${message.message}</div> `;
+            return x `
+            <div class="message user">
+              ${message.message
+                .split('\n')
+                .map((line) => x `<div>${line.trim() === '' ? x `<br />` : line}</div>`)}
+            </div>
+          `;
         })}
       </div>
     `;
@@ -9375,12 +9424,24 @@ class PopupView extends TWLitElement$1 {
         ${this.chatWindow()}
         <form class="chat-form" @submit=${this.onSubmit}>
           <span class="sparkles-icon"> ${sparklesSharp} </span>
-          <input
-            type="text"
+          <textarea
+            class="chat-textarea"
             .value=${this.userQuery}
-            @input=${(e) => (this.userQuery = e.target.value)}
+            rows="1"
             placeholder="What are you looking for?"
-          />
+            @input=${(e) => {
+            const target = e.target;
+            target.style.height = 'auto';
+            target.style.height = `${target.scrollHeight}px`;
+            this.userQuery = target.value;
+        }}
+            @keydown=${(e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                this.onSubmit(e);
+            }
+        }}
+          ></textarea>
           <button
             class="btn send-btn"
             type="submit"
@@ -9530,6 +9591,10 @@ __decorate([
     e$3('.chat-window'),
     __metadata("design:type", Object)
 ], PopupView.prototype, "chatWindowElement", void 0);
+__decorate([
+    e$3('.chat-textarea'),
+    __metadata("design:type", Object)
+], PopupView.prototype, "chatTextareaElement", void 0);
 __decorate([
     r$1(),
     __metadata("design:type", Object)

package/package.json

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