@blotoutio/providers-shop-gpt-sdk 1.5.0 → 1.6.0

package/index.js

@@ -300,7 +300,70 @@ var ProvidersShopGptSdk = (function () {
         ['ZM', 'Zambia'],
         ['ZW', 'Zimbabwe'],
     ]);
-    new Set(isoCountries.keys());
+    /**
+     * ISO-3166 US state ISO codes
+     * @see https://en.wikipedia.org/wiki/ISO_3166-2:US
+     * */
+    const usStates = new Map([
+        ['US-AL', 'Alabama'],
+        ['US-AK', 'Alaska'],
+        ['US-AZ', 'Arizona'],
+        ['US-AR', 'Arkansas'],
+        ['US-CA', 'California'],
+        ['US-CO', 'Colorado'],
+        ['US-CT', 'Connecticut'],
+        ['US-DE', 'Delaware'],
+        ['US-FL', 'Florida'],
+        ['US-GA', 'Georgia'],
+        ['US-HI', 'Hawaii'],
+        ['US-ID', 'Idaho'],
+        ['US-IL', 'Illinois'],
+        ['US-IN', 'Indiana'],
+        ['US-IA', 'Iowa'],
+        ['US-KS', 'Kansas'],
+        ['US-KY', 'Kentucky'],
+        ['US-LA', 'Louisiana'],
+        ['US-ME', 'Maine'],
+        ['US-MD', 'Maryland'],
+        ['US-MA', 'Massachusetts'],
+        ['US-MI', 'Michigan'],
+        ['US-MN', 'Minnesota'],
+        ['US-MS', 'Mississippi'],
+        ['US-MO', 'Missouri'],
+        ['US-MT', 'Montana'],
+        ['US-NE', 'Nebraska'],
+        ['US-NV', 'Nevada'],
+        ['US-NH', 'New Hampshire'],
+        ['US-NJ', 'New Jersey'],
+        ['US-NM', 'New Mexico'],
+        ['US-NY', 'New York'],
+        ['US-NC', 'North Carolina'],
+        ['US-ND', 'North Dakota'],
+        ['US-OH', 'Ohio'],
+        ['US-OK', 'Oklahoma'],
+        ['US-OR', 'Oregon'],
+        ['US-PA', 'Pennsylvania'],
+        ['US-RI', 'Rhode Island'],
+        ['US-SC', 'South Carolina'],
+        ['US-SD', 'South Dakota'],
+        ['US-TN', 'Tennessee'],
+        ['US-TX', 'Texas'],
+        ['US-UT', 'Utah'],
+        ['US-VT', 'Vermont'],
+        ['US-VA', 'Virginia'],
+        ['US-WA', 'Washington'],
+        ['US-WV', 'West Virginia'],
+        ['US-WI', 'Wisconsin'],
+        ['US-WY', 'Wyoming'],
+        ['US-DC', 'District of Columbia'],
+        ['US-AS', 'American Samoa'],
+        ['US-GU', 'Guam'],
+        ['US-MP', 'Northern Mariana Islands'],
+        ['US-PR', 'Puerto Rico'],
+        ['US-UM', 'United States Minor Outlying Islands'],
+        ['US-VI', 'Virgin Islands, U.S.'],
+    ]);
+    new Set([...isoCountries.keys(), ...usStates.keys()]);
 
     const packageName = 'shopGPT';
     const DEFAULT_MAX_THREAD_AGE = 14;
@@ -383,6 +446,7 @@ var ProvidersShopGptSdk = (function () {
             }
             const data = (await response.json());
             return {
+                messageId: data.messageId,
                 message: data.message,
                 products: (_a = data.products) === null || _a === void 0 ? void 0 : _a.filter((item) => !!item).map((item) => ({ ...item, quantity: 1 })),
                 chatTitle: data.chatTitle,
@@ -453,6 +517,20 @@ var ProvidersShopGptSdk = (function () {
                 throw new Error(`Failed to delete all chat threads - ${response.status}: ${await response.text()}`);
             }
         };
+        const saveFeedback = async (messageId, feedback) => {
+            const response = await fetchImpl(getURL('/feedback'), {
+                method: 'POST',
+                headers: getHeaders(),
+                credentials: 'include',
+                body: JSON.stringify({
+                    messageId,
+                    feedback,
+                }),
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to save feedback - ${response.status}: ${await response.text()}`);
+            }
+        };
         return {
             processQuery,
             fetchChatHistory,
@@ -460,6 +538,7 @@ var ProvidersShopGptSdk = (function () {
             createChatThread,
             deleteSingleThread,
             deleteAllThreads,
+            saveFeedback,
         };
     };
 
@@ -2003,6 +2082,26 @@ var ProvidersShopGptSdk = (function () {
     }
   }
 
+  .bot-response-actions {
+    display: flex;
+    margin-left: 12px;
+    margin-top: -10px;
+
+    button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 8px;
+      background: none;
+      color: rgb(140, 137, 156);
+      border-radius: 50%;
+
+      &:hover {
+        background-color: rgba(47, 43, 61, 0.08);
+      }
+    }
+  }
+
   .bot-icon {
     display: flex;
     padding: 8px 11px;
@@ -2262,6 +2361,18 @@ var ProvidersShopGptSdk = (function () {
     const crossBtn = b `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
   <path d="M18 7.05L16.95 6L12 10.95L7.05 6L6 7.05L10.95 12L6 16.95L7.05 18L12 13.05L16.95 18L18 16.95L13.05 12L18 7.05Z" fill="white"/>
 </svg>`;
+    const thumbsUpBtn = b `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--tabler" font-size="1.375rem" width="1em" height="1em" viewBox="0 0 24 24">
+  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 11v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h3a4 4 0 0 0 4-4V6a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1-2 2h-7a3 3 0 0 1-3-3"></path>
+</svg>`;
+    const thumbsUpFilledBtn = b `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--tabler" font-size="1.375rem" width="1em" height="1em" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M13 3a3 3 0 0 1 2.995 2.824L16 6v4h2a3 3 0 0 1 2.98 2.65l.015.174L21 13l-.02.196l-1.006 5.032c-.381 1.626-1.502 2.796-2.81 2.78L17 21H9a1 1 0 0 1-.993-.883L8 20l.001-9.536a1 1 0 0 1 .5-.865a3 3 0 0 0 1.492-2.397L10 7V6a3 3 0 0 1 3-3m-8 7a1 1 0 0 1 .993.883L6 11v9a1 1 0 0 1-.883.993L5 21H4a2 2 0 0 1-1.995-1.85L2 19v-7a2 2 0 0 1 1.85-1.995L4 10z"></path>
+</svg>`;
+    const thumbsDownBtn = b `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--tabler" font-size="1.375rem" width="1em" height="1em" viewBox="0 0 24 24">
+  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 13V5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2-2l-1-5a2 3 0 0 0-2-2h-7a3 3 0 0 0-3 3"></path>
+</svg>`;
+    const thumbsDownFilledBtn = b `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--tabler" font-size="1.375rem" width="1em" height="1em" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M13 21.008a3 3 0 0 0 2.995-2.823l.005-.177v-4h2a3 3 0 0 0 2.98-2.65l.015-.173l.005-.177l-.02-.196l-1.006-5.032c-.381-1.625-1.502-2.796-2.81-2.78L17 3.008H9a1 1 0 0 0-.993.884L8 4.008l.001 9.536a1 1 0 0 0 .5.866a3 3 0 0 1 1.492 2.396l.007.202v1a3 3 0 0 0 3 3m-8-7a1 1 0 0 0 .993-.883L6 13.008v-9a1 1 0 0 0-.883-.993L5 3.008H4A2 2 0 0 0 2.005 4.86L2 5.01v7a2 2 0 0 0 1.85 1.994l.15.005h1z"></path>
+</svg>`;
 
     const personalizeDialogStyles = i$4 `
   :host {
@@ -3165,6 +3276,212 @@ var ProvidersShopGptSdk = (function () {
         customElements.define('confirm-dialog', ConfirmDialog);
     }
 
+    const feedbackDialogStyles = i$4 `
+  :host {
+    font-family: 'Inter', sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #00000050;
+  }
+
+  .modal {
+    width: 75%;
+    max-width: 400px;
+    background: #fff;
+    padding: 24px;
+    margin: auto;
+
+    border-radius: 8px;
+    box-shadow: rgba(47, 43, 61, 0.28) 0px 8px 23px 0px;
+
+    z-index: 2000;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+
+  .close {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  h3 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 700;
+    color: #172a41;
+    line-height: 24px;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin: 0;
+  }
+
+  textarea {
+    padding: 16px;
+    border: 1px solid #2f2b3d28;
+    border-radius: 10px;
+    font-size: 16px;
+    resize: none;
+    min-height: 104px;
+    box-sizing: border-box;
+    font-family: inherit;
+    color: #4e647f;
+    font-weight: 500;
+    line-height: 24px;
+
+    &:focus {
+      outline: none;
+      box-shadow: rgba(57, 123, 244, 0.5) 0px 0px 4px;
+    }
+
+    &::placeholder {
+      font-style: italic;
+      color: #8799af80;
+    }
+  }
+
+  .btns-container {
+    display: flex;
+    gap: 0 8px;
+    margin-left: auto;
+    margin-top: 10px;
+  }
+
+  button {
+    padding: 9px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  .btn-skip {
+    background-color: #dbe2eb;
+    color: #172a41;
+    font-weight: 500;
+
+    &:hover {
+      background-color: rgb(219, 226, 235);
+    }
+  }
+
+  .btn-submit-feedback {
+    background-color: rgb(23, 42, 65);
+    color: #ffffff;
+    font-weight: 500;
+
+    &:hover {
+      background-color: rgb(9, 22, 39);
+    }
+
+    &:disabled {
+      background-color: #e0e0e0;
+      cursor: not-allowed;
+    }
+  }
+`;
+
+    class FeedbackDialog extends r$2 {
+        dispatchFeedbackEvent(feedback) {
+            this.dispatchEvent(new CustomEvent('submit-feedback', {
+                detail: {
+                    messageId: this.messageId,
+                    feedback,
+                },
+                composed: true,
+                bubbles: true,
+            }));
+        }
+        handleSubmit(e) {
+            var _a;
+            e.preventDefault();
+            const form = e.target;
+            const data = new FormData(form);
+            this.dispatchFeedbackEvent({
+                rating: 'bad',
+                comment: (_a = data.get('comment')) === null || _a === void 0 ? void 0 : _a.toString().trim(),
+            });
+            form.reset();
+        }
+        handleSkipComment(e) {
+            e.preventDefault();
+            this.comment = '';
+            this.dispatchFeedbackEvent({ rating: 'bad', comment: null });
+        }
+        close(e) {
+            e.preventDefault();
+            this.dispatchEvent(new CustomEvent('close', {
+                composed: true,
+                bubbles: true,
+            }));
+        }
+        render() {
+            return x `
+      <div class="modal">
+        <div class="header">
+          <h3>Provide Additional Feedback</h3>
+          <div class="close" @click=${this.close}>${closeBtn}</div>
+        </div>
+        <form @submit=${this.handleSubmit}>
+          <textarea
+            name="comment"
+            @input=${(e) => { var _a; return (this.comment = (_a = e.target) === null || _a === void 0 ? void 0 : _a.value); }}
+            placeholder="Share your feedback"
+            required
+          >
+${this.comment ? this.comment : E}</textarea
+          >
+          <div class="btns-container">
+            <button
+              type="button"
+              class="btn btn-skip"
+              @click=${this.handleSkipComment}
+            >
+              Skip
+            </button>
+            <button
+              type="submit"
+              class="btn btn-submit-feedback"
+              ?disabled=${!this.comment}
+            >
+              Submit
+            </button>
+          </div>
+        </form>
+      </div>
+    `;
+        }
+    }
+    FeedbackDialog.styles = [feedbackDialogStyles];
+    __decorate([
+        n({ type: String }),
+        __metadata("design:type", Object)
+    ], FeedbackDialog.prototype, "messageId", void 0);
+    __decorate([
+        n({ type: String }),
+        __metadata("design:type", Object)
+    ], FeedbackDialog.prototype, "comment", void 0);
+    if (!customElements.get('feedback-dialog')) {
+        customElements.define('feedback-dialog', FeedbackDialog);
+    }
+
     class ChatSection extends r$2 {
         constructor() {
             super(...arguments);
@@ -3212,6 +3529,23 @@ var ProvidersShopGptSdk = (function () {
             }));
             this.deleteThreadId = '';
         }
+        handleFeedback(rating, messageId, comment) {
+            if (rating === 'bad') {
+                this.feedbackDetails = { messageId, comment };
+                return;
+            }
+            this.dispatchEvent(new CustomEvent('submit-feedback', {
+                detail: {
+                    messageId: messageId,
+                    feedback: {
+                        rating,
+                        comment: null,
+                    },
+                },
+                composed: true,
+                bubbles: true,
+            }));
+        }
         typingIndicator() {
             return x ` <div class="typing-dots">
       <div class="dot"></div>
@@ -3220,7 +3554,7 @@ var ProvidersShopGptSdk = (function () {
     </div>`;
         }
         botMessage(message) {
-            var _a;
+            var _a, _b, _c, _d, _e;
             return x `
       <div class="message-wrapper">
         <div class="message bot">
@@ -3251,6 +3585,26 @@ var ProvidersShopGptSdk = (function () {
               .viewType=${this.viewType}
             ></products-list>`
             : E}
+        ${message.messageId
+            ? x `<div class="bot-response-actions">
+              <button
+                type="button"
+                @click=${this.handleFeedback.bind(this, 'good', message.messageId, (_b = message.feedback) === null || _b === void 0 ? void 0 : _b.comment)}
+              >
+                ${((_c = message.feedback) === null || _c === void 0 ? void 0 : _c.rating) === 'good'
+                ? thumbsUpFilledBtn
+                : thumbsUpBtn}
+              </button>
+              <button
+                type="button"
+                @click=${this.handleFeedback.bind(this, 'bad', message.messageId, (_d = message.feedback) === null || _d === void 0 ? void 0 : _d.comment)}
+              >
+                ${((_e = message.feedback) === null || _e === void 0 ? void 0 : _e.rating) === 'bad'
+                ? thumbsDownFilledBtn
+                : thumbsDownBtn}
+              </button>
+            </div>`
+            : E}
       </div>
     `;
         }
@@ -3271,10 +3625,19 @@ var ProvidersShopGptSdk = (function () {
             </div>`
             : ''}
         ${this.isFailed
-            ? this.botMessage({
-                sender: 'bot',
-                message: "Uh-oh! Looks like I tripped over some alpha-stage wires. Things are still a bit wobbly here, buy hey, that's what testing is for, Let's try that again; or feel free to throw another challenge my way!",
-            })
+            ? x `<div class="message bot">
+              <div>
+                <div class="bot-icon">${botIcon}</div>
+              </div>
+              <div>
+                <p>
+                  Uh-oh! Looks like I tripped over some alpha-stage wires.
+                  Things are still a bit wobbly here, buy hey, that's what
+                  testing is for, Let's try that again; or feel free to throw
+                  another challenge my way!
+                </p>
+              </div>
+            </div>`
             : E}
         ${this.messages.map((message) => {
             if (message.sender === 'bot') {
@@ -3618,6 +3981,21 @@ var ProvidersShopGptSdk = (function () {
             </confirm-dialog>
           `
             : E}
+      ${this.feedbackDetails
+            ? x `
+            <feedback-dialog
+              .messageId=${this.feedbackDetails.messageId}
+              .comment=${this.feedbackDetails.comment}
+              @submit-feedback=${() => {
+                this.feedbackDetails = undefined;
+            }}
+              @close=${(e) => {
+                e.stopPropagation();
+                this.feedbackDetails = undefined;
+            }}
+            ></feedback-dialog>
+          `
+            : E}
     `;
         }
     }
@@ -3702,6 +4080,10 @@ var ProvidersShopGptSdk = (function () {
         e$3('personalize-dialog'),
         __metadata("design:type", Object)
     ], ChatSection.prototype, "personalizeDialogElement", void 0);
+    __decorate([
+        r(),
+        __metadata("design:type", Object)
+    ], ChatSection.prototype, "feedbackDetails", void 0);
     __decorate([
         n({ type: String }),
         __metadata("design:type", Object)
@@ -3822,6 +4204,7 @@ var ProvidersShopGptSdk = (function () {
                 }
                 this.messages = [
                     {
+                        messageId: reply.messageId,
                         sender: 'bot',
                         message: reply.message,
                         products: reply.products,
@@ -3889,10 +4272,12 @@ var ProvidersShopGptSdk = (function () {
                         latestAvailableProducts = products;
                     }
                     return {
+                        messageId: message.messageId,
                         message: message.message,
                         sender: message.sender,
                         products,
                         welcomePrompts: message.welcomePrompts,
+                        feedback: message.feedback,
                     };
                 });
                 this.products = latestAvailableProducts;
@@ -3973,6 +4358,7 @@ var ProvidersShopGptSdk = (function () {
                 }
                 this.messages = [
                     {
+                        messageId: reply.messageId,
                         sender: 'bot',
                         message: reply.message,
                         products: reply.products,
@@ -3992,6 +4378,20 @@ var ProvidersShopGptSdk = (function () {
                 this.isTyping = false;
             }
         }
+        submitFeedback(e) {
+            e.stopPropagation();
+            this.shopGPTAPI
+                .saveFeedback(e.detail.messageId, e.detail.feedback)
+                .then(() => {
+                const messages = this.messages;
+                const messageIndex = messages.findIndex(({ messageId }) => messageId === e.detail.messageId);
+                messages[messageIndex] = {
+                    ...messages[messageIndex],
+                    feedback: e.detail.feedback,
+                };
+                this.messages = [...messages];
+            });
+        }
         getSiteCurrency() {
             return this.storeAPI.getSiteCurrency();
         }
@@ -4008,6 +4408,7 @@ var ProvidersShopGptSdk = (function () {
         id="shop-gpt-dialog-overlay"
         @delete-thread=${this.handleThreadDelete}
         @delete-all-threads=${this.handleAllThreadsDelete}
+        @submit-feedback=${this.submitFeedback}
       >
         <div class="mobile-version">
           Please switch to the desktop version for the best experience.
@@ -4072,6 +4473,7 @@ var ProvidersShopGptSdk = (function () {
         id="shop-gpt-modal"
         @delete-thread=${this.handleThreadDelete}
         @delete-all-threads=${this.handleAllThreadsDelete}
+        @submit-feedback=${this.submitFeedback}
       >
         <chat-section
           .prompts=${this.quickPrompts}