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

package/index.cjs.js

@@ -299,7 +299,70 @@ const isoCountries = new Map([
     ['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;
@@ -382,6 +445,7 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
         }
         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,
@@ -452,6 +516,20 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
             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,
@@ -459,6 +537,7 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
         createChatThread,
         deleteSingleThread,
         deleteAllThreads,
+        saveFeedback,
     };
 };
 
@@ -2002,6 +2081,26 @@ const chatSectionStyles = i$4 `
     }
   }
 
+  .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;
@@ -2261,6 +2360,18 @@ const timerBtn = b `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="2
 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 {
@@ -3164,6 +3275,212 @@ if (!customElements.get('confirm-dialog')) {
     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);
@@ -3211,6 +3528,23 @@ class ChatSection extends r$2 {
         }));
         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>
@@ -3219,7 +3553,7 @@ class ChatSection extends r$2 {
     </div>`;
     }
     botMessage(message) {
-        var _a;
+        var _a, _b, _c, _d, _e;
         return x `
       <div class="message-wrapper">
         <div class="message bot">
@@ -3250,6 +3584,26 @@ class ChatSection extends r$2 {
               .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>
     `;
     }
@@ -3270,10 +3624,19 @@ class ChatSection extends r$2 {
             </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') {
@@ -3617,6 +3980,21 @@ class ChatSection extends r$2 {
             </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}
     `;
     }
 }
@@ -3701,6 +4079,10 @@ __decorate([
     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)
@@ -3821,6 +4203,7 @@ class ShopGPT extends r$2 {
             }
             this.messages = [
                 {
+                    messageId: reply.messageId,
                     sender: 'bot',
                     message: reply.message,
                     products: reply.products,
@@ -3888,10 +4271,12 @@ class ShopGPT extends r$2 {
                     latestAvailableProducts = products;
                 }
                 return {
+                    messageId: message.messageId,
                     message: message.message,
                     sender: message.sender,
                     products,
                     welcomePrompts: message.welcomePrompts,
+                    feedback: message.feedback,
                 };
             });
             this.products = latestAvailableProducts;
@@ -3972,6 +4357,7 @@ class ShopGPT extends r$2 {
             }
             this.messages = [
                 {
+                    messageId: reply.messageId,
                     sender: 'bot',
                     message: reply.message,
                     products: reply.products,
@@ -3991,6 +4377,20 @@ class ShopGPT extends r$2 {
             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();
     }
@@ -4007,6 +4407,7 @@ class ShopGPT extends r$2 {
         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.
@@ -4071,6 +4472,7 @@ class ShopGPT extends r$2 {
         id="shop-gpt-modal"
         @delete-thread=${this.handleThreadDelete}
         @delete-all-threads=${this.handleAllThreadsDelete}
+        @submit-feedback=${this.submitFeedback}
       >
         <chat-section
           .prompts=${this.quickPrompts}