@blotoutio/providers-shop-gpt-sdk 0.68.1

package/index.mjs

@@ -0,0 +1,1423 @@
+const expand = (str) => str.split(',').flatMap((entry) => {
+    if (!entry.includes('-')) {
+        return entry;
+    }
+    const result = [];
+    const [start, end] = entry.split('-').map(Number);
+    for (let i = start; i <= end; i++) {
+        result.push(i.toString());
+    }
+    return result;
+});
+/**
+ * Exported from https://en.wikipedia.org/wiki/List_of_North_American_Numbering_Plan_area_codes
+ *
+ * In Dev Tools, select the `tbody` element containing the area codes and run the following code,
+ * replacing the emdash character with a simple endash:
+ *
+ * ```ts
+ * [...$0.querySelectorAll('td:first-child')]
+ *   .filter(cell => cell.firstChild.nodeName != 'A')
+ *   .map(cell => cell.textContent.trim()).join(',')
+ * ```
+ */
+new Set([
+    ...expand('200,211,221,222,230,232,233,235,237-238,241,243,244,245,247,255,257,258-259,261,265,266,271,273,274,275,277,278,280,282,283,285-287,288,290-299'),
+    ...expand('300,311,322,324,327,328,333,335,338,342,344,348-349,353,355,356,357-359,362,366,369,370-379,381,382,383-384,387,388,389,390-399'),
+    ...expand('400,411,420,421-422,426-427,428,429,433,439,444,446,449,451-454,455,456,457,459,460,461-462,465,466,467,471,476,477,481-483,485-486,487,488,489,490-499'),
+    ...expand('511,532,535,536,537,538,542-543,545-547,549-550,552-554,555,556,558,560,565,568,569,576,578,583,589,590-599'),
+    ...expand('611,621,624,625,627,632,633,634-635,637-638,642-643,644,648,652-654,655,663,665,666,668,673-676,677,679,685,686,687,688,690-699'),
+    ...expand('711,722,723,729,733,735-736,739,741,744,745-746,748,749-751,752,755,756,759,761,764,766,768,776,777,783,788,789,790-799'),
+    ...expand('811,821,822,823-824,827,834,836,841-842,846,851,852-853,871,874-875,879,880-887,889,890-899'),
+    ...expand('911,921,922,923,924,926,927,932,933,935,942,944,946,950,953,955,957-958,960-969,974,975,976,977,981-982,987,988,990-999'),
+]);
+
+const packageName = 'shopGPT';
+
+var _a$1;
+const registryKey = Symbol.for('shop-gpt');
+if (typeof window != 'undefined') {
+    (_a$1 = window[registryKey]) !== null && _a$1 !== void 0 ? _a$1 : (window[registryKey] = {});
+}
+
+const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, storeAPI, }) => {
+    if (!baseURL) {
+        throw new Error(`baseURL missing`);
+    }
+    if (!userId) {
+        throw new Error(`userId missing`);
+    }
+    if (!storeAPI) {
+        throw new Error(`store API implementation missing`);
+    }
+    const getHeaders = (json = false) => {
+        const headers = new Headers({ EdgeTagUserId: userId });
+        if (json) {
+            headers.set('Content-type', 'application/json; charset=utf-8');
+        }
+        return headers;
+    };
+    const getURL = (path) => {
+        const url = new URL(`/providers/shopGPT${path}`, baseURL);
+        return url;
+    };
+    const processQuery = async (query) => {
+        const response = await fetchImpl(getURL('/query'), {
+            method: 'POST',
+            headers: getHeaders(),
+            body: JSON.stringify({ query, timestamp: Date.now() }),
+            credentials: 'include',
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to process the query - ${response.status}: ${await response.text()}`);
+        }
+        const data = (await response.json());
+        return {
+            message: data.message,
+            products: data.products.map((item) => ({ ...item, quantity: 1 })),
+        };
+    };
+    const queryPrompts = async () => {
+        const response = await fetchImpl(getURL('/query-prompts'), {
+            method: 'GET',
+            headers: getHeaders(),
+            credentials: 'include',
+        });
+        if (!response.ok) {
+            throw new Error(`Could not fetch query Prompts - ${response.status}: ${await response.text()}`);
+        }
+        const data = (await response.json());
+        return data.prompts;
+    };
+    const initialPrompt = async (productId) => {
+        const response = await fetchImpl(getURL('/query-initial-prompt'), {
+            method: 'POST',
+            headers: getHeaders(),
+            body: JSON.stringify({ productId }),
+            credentials: 'include',
+        });
+        if (!response.ok) {
+            throw new Error(`Could not fetch query Prompts - ${response.status}: ${await response.text()}`);
+        }
+        const data = (await response.json());
+        return data.prompt;
+    };
+    const fetchChatHistory = async () => {
+        const response = await fetchImpl(getURL('/query-history'), {
+            method: 'GET',
+            headers: getHeaders(),
+            credentials: 'include',
+        });
+        if (!response.ok) {
+            throw new Error(`Could not fetch query history - ${response.status}: ${await response.text()}`);
+        }
+        const data = (await response.json());
+        return data.history;
+    };
+    return {
+        processQuery,
+        queryPrompts,
+        initialPrompt,
+        fetchChatHistory,
+    };
+};
+
+const error = (message) => console.error(message);
+const init = (params) => {
+    var _a, _b, _c;
+    if (typeof window == 'undefined' || typeof document == 'undefined') {
+        // if loaded in non-browser SDKs, return early
+        return;
+    }
+    let storeAPI = window[registryKey].storeAPI;
+    if (!storeAPI) {
+        storeAPI = window[registryKey].storeAPI =
+            (_b = (_a = window[registryKey]).storeAPIFactory) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    if (!storeAPI) {
+        error('Implementation for store API missing!');
+        return;
+    }
+    if (window.top !== window) {
+        // exit if not in top window
+        return;
+    }
+    const { enabled } = (_c = params.manifest.variables) !== null && _c !== void 0 ? _c : {};
+    if (enabled) {
+        const uiImplementation = window[registryKey].ui;
+        if (!uiImplementation) {
+            error('UI implementation is missing');
+            return;
+        }
+        const shopGPTAPI = createShopGPTAPI({
+            baseURL: params.baseUrl,
+            storeAPI,
+            userId: params.userId,
+        });
+        uiImplementation.init({
+            storeAPI,
+            shopGPTAPI,
+        });
+    }
+};
+
+// eslint-disable-next-line @nx/enforce-module-boundaries
+const data = {
+    name: packageName,
+    init,
+};
+try {
+    if (typeof window !== 'undefined') {
+        window.edgetagProviders = window.edgetagProviders || [];
+        window.edgetagProviders.push(data);
+    }
+}
+catch {
+    // no window
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$2=globalThis,e$4=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$2=Symbol(),o$3=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s$2)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$4&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$3.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$3.set(s,t));}return t}toString(){return this.cssText}};const r$5=t=>new n$3("string"==typeof t?t:t+"",void 0,s$2),i$2=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$3(o,t,s$2)},S$1=(s,o)=>{if(e$4)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$2.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$4?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$5(e)})(t):t;
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const{is:i$1,defineProperty:e$3,getOwnPropertyDescriptor:r$4,getOwnPropertyNames:h$1,getOwnPropertySymbols:o$2,getPrototypeOf:n$2}=Object,a$1=globalThis,c$1=a$1.trustedTypes,l$1=c$1?c$1.emptyScript:"",p$1=a$1.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$1(t,s),y$1={attribute:!0,type:String,converter:u$1,reflect:!1,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$1.litPropertyMetadata??=new WeakMap;let b$1 = class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y$1){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$3(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$4(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$1}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$2(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...h$1(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$1).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$1;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$1)(this[t],s))return;this.P(t,s,i);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}};b$1.elementStyles=[],b$1.shadowRootOptions={mode:"open"},b$1[d$1("elementProperties")]=new Map,b$1[d$1("finalized")]=new Map,p$1?.({ReactiveElement:b$1}),(a$1.reactiveElementVersions??=[]).push("2.0.4");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$1=globalThis,i=t$1.trustedTypes,s$1=i?i.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$2="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$1="?"+h,n$1=`<${o$1}>`,r$3=document,l=()=>r$3.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a=Array.isArray,u=t=>a(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y(1),b=y(2),w=Symbol.for("lit-noChange"),T=Symbol.for("lit-nothing"),A=new WeakMap,E=r$3.createTreeWalker(r$3,129);function C(t,i){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$1?s$1.createHTML(i):i}const P=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":"",c=f;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n$1:d>=0?(o.push(a),s.slice(0,d)+e$2+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [C(t,l+(t[s]||"<?>")+(2===i?"</svg>":"")),o]};class V{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=P(t,s);if(this.el=V.createElement(f,n),E.currentNode=this.el.content,2===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=E.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$2)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?k:"?"===e[1]?H:"@"===e[1]?I:R}),r.removeAttribute(t);}else t.startsWith(h)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h),s=t.length-1;if(s>0){r.textContent=i?i.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l()),E.nextNode(),d.push({type:2,index:++c});r.append(t[s],l());}}}else if(8===r.nodeType)if(r.data===o$1)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h,t+1));)d.push({type:7,index:c}),t+=h.length-1;}c++;}}static createElement(t,i){const s=r$3.createElement("template");return s.innerHTML=t,s}}function N(t,i,s=t,e){if(i===w)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(!1),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=N(t,h._$AS(t,i.values),h,e)),i}class S{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r$3).importNode(i,!0);E.currentNode=e;let h=E.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new M(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new L(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=E.nextNode(),o++);}return E.currentNode=r$3,e}p(t){let i=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class M{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=T,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??!0;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=N(this,t,i),c(t)?t===T||null==t||""===t?(this._$AH!==T&&this._$AR(),this._$AH=T):t!==this._$AH&&t!==w&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u(t)?this.k(t):this._(t);}S(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.S(t));}_(t){this._$AH!==T&&c(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$3.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=V.createElement(C(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new S(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new V(t)),i}k(t){a(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new M(this.S(l()),this.S(l()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class R{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=T,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=T;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=N(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==w,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=N(this,e[s+n],i,n),r===w&&(r=this._$AH[n]),o||=!c(r)||r!==this._$AH[n],r===T?t=T:t!==T&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===T?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class k extends R{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===T?void 0:t;}}class H extends R{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==T);}}class I extends R{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=N(this,t,i,0)??T)===w)return;const s=this._$AH,e=t===T&&s!==T||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==T&&(s===T||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}class L{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){N(this,t);}}const Z=t$1.litHtmlPolyfillSupport;Z?.(V,M),(t$1.litHtmlVersions??=[]).push("3.1.3");const j=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new M(i.insertBefore(l(),t),t,void 0,s??{});}return h._$AI(t),h};
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class s extends b$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=j(i,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return w}}s._$litElement$=!0,s[("finalized")]=!0,globalThis.litElementHydrateSupport?.({LitElement:s});const r$2=globalThis.litElementPolyfillSupport;r$2?.({LitElement:s});(globalThis.litElementVersions??=[]).push("4.0.5");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t=t=>(e,o)=>{void 0!==o?o.addInitializer((()=>{customElements.define(t,e);})):customElements.define(t,e);};
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const o={attribute:!0,type:String,converter:u$1,reflect:!1,hasChanged:f$1},r$1=(t=o,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),s.set(r.name,t),"accessor"===n){const{name:o}=r;return {set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t);},init(e){return void 0!==e&&this.P(o,void 0,t),e}}}if("setter"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t);}}throw Error("Unsupported decorator location: "+n)};function n(t){return (e,o)=>"object"==typeof o?r$1(t,e,o):((t,e,o)=>{const r=e.hasOwnProperty(o);return e.constructor.createProperty(o,r?{...t,wrapped:!0}:t),r?Object.getOwnPropertyDescriptor(e,o):void 0})(t,e,o)}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function r(r){return n({...r,state:!0,attribute:!1})}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e$1=(e,t,c)=>(c.configurable=!0,c.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function e(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;if(r){const{get:e,set:r}="object"==typeof s?n:i??(()=>{const t=Symbol();return {get(){return this[t]},set(e){this[t]=e;}}})();return e$1(n,s,{get(){let t=e.call(this);return void 0===t&&(t=o(this),(null!==t||this.hasUpdated)&&r.call(this,t)),t}})}return e$1(n,s,{get(){return o(this)}})}}
+
+const canLog = () => {
+    try {
+        return localStorage.getItem('edgeTagDebug') === '1';
+    }
+    catch {
+        return false;
+    }
+};
+const logger = {
+    log: (...args) => {
+        if (canLog()) {
+            console.log(...args);
+        }
+    },
+    error: (...args) => {
+        if (canLog()) {
+            console.error(...args);
+        }
+    },
+    info: (...args) => {
+        if (canLog()) {
+            console.info(...args);
+        }
+    },
+    trace: (...args) => {
+        if (canLog()) {
+            console.trace(...args);
+        }
+    },
+    table: (...args) => {
+        if (canLog()) {
+            console.table(...args);
+        }
+    },
+    dir: (...args) => {
+        if (canLog()) {
+            console.dir(...args);
+        }
+    },
+};
+
+const shopGPTStyles = () => i$2 `
+  :host {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+  }
+
+  ::-webkit-scrollbar {
+    width: 20px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #d6dee1;
+    border-radius: 20px;
+    border: 6px solid transparent;
+    background-clip: content-box;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #a8bbbf;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: Inter;
+    margin: 0;
+    padding: 0;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+    background: #ffffff;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 21px;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24px;
+    text-align: center;
+    border-bottom: 1px solid #d4d4d8;
+    height: 114px;
+
+    @media screen and (max-width: 430px) {
+      height: 68px;
+      padding: 16px;
+    }
+  }
+
+  .header-title,
+  .chat-header-title {
+    color: #000;
+    font-size: 20px;
+    font-weight: 700;
+    font-style: normal;
+    line-height: 28px;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    margin: 0;
+  }
+
+  @media screen and (max-width: 430px) {
+    .header-title {
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    .product-content {
+      max-width: calc(100vw - 150px);
+    }
+  }
+
+  .loader {
+    display: flex;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    z-index: 5000;
+
+    .spinner {
+      /* --webkit-animation: spin 1s linear infinite; */
+      animation: 1s linear infinite spin;
+      border-radius: 50%;
+      border: 5px solid #f9d5ba;
+      border-top: 5px solid #555;
+      width: 30px;
+      height: 30px;
+      margin: 10px;
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .header-sub-title,
+  .chat-header-sub-title {
+    color: #000;
+    font-size: 12px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 12px;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    margin: 0;
+  }
+
+  .header-pre-alpha {
+    @media screen and (max-width: 768px) {
+      display: none;
+    }
+  }
+
+  .body {
+    display: flex;
+    flex: 1;
+
+    @media screen and (max-width: 430px) {
+      flex-direction: column;
+      justify-content: flex-end;
+    }
+  }
+
+  .products-section {
+    flex: 1 0 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1px;
+    border-right: 1px solid #d4d4d8;
+    background: #f5f3ee;
+
+    .product-section {
+      flex: 1;
+      padding: 24px;
+      width: 100%;
+
+      h2 {
+        color: #a49b94;
+        font-size: 18px;
+        font-weight: 700;
+        line-height: 24px;
+        text-transform: uppercase;
+        margin: 0 0 24px;
+      }
+
+      p.no-product-text {
+        color: #000;
+        font-size: 18px;
+        line-height: 24px;
+        opacity: 0.6;
+      }
+    }
+
+    .hidden {
+      display: none;
+    }
+
+    .show-more,
+    .show-less {
+      display: none;
+      margin: 16px 0;
+      color: #a49b94;
+      text-align: center;
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 12px;
+      letter-spacing: -0.28px;
+      text-transform: uppercase;
+    }
+
+    @media screen and (max-width: 430px) {
+      flex: 0;
+      box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0px 2px 4px -1px rgba(0, 0, 0, 0.06);
+      z-index: 1;
+
+      .product-section {
+        padding: 16px 16px 0;
+
+        h2 {
+          display: flex;
+          font-size: 12px;
+          font-weight: 700;
+          line-height: 18px;
+          letter-spacing: -0.36px;
+          margin: 0 0 16px;
+          color: #53433a;
+          align-items: center;
+          gap: 16px;
+
+          &::after {
+            content: '';
+            flex-grow: 1;
+            height: 1px;
+            background: #a49b94;
+          }
+        }
+
+        .no-products {
+          display: none;
+        }
+      }
+
+      .product-section.recommended-product h2 {
+        display: none;
+      }
+
+      .show-more,
+      .show-less {
+        display: block;
+      }
+    }
+  }
+
+  @media screen and (max-width: 430px) {
+    .no-recommended-product {
+      display: none;
+    }
+  }
+
+  .recommended-product {
+    border-bottom: 1px solid #d4d4d8;
+
+    .product {
+      display: flex;
+      gap: 12px;
+
+      /* .buy-now-btn {
+        cursor: pointer;
+        padding: 7px 37px;
+        background: #971b1b;
+        border-radius: 5px;
+        margin-top: 12px;
+        color: #ffffff;
+        font-size: 18px;
+        line-height: 24px;
+        letter-spacing: -0.35px;
+        border: 0;
+      } */
+
+      /* Replica of TrueClassic */
+      .buy-now-btn {
+        cursor: pointer;
+        padding: 7px 37px;
+        background: #53433a;
+        border-radius: 5px;
+        margin-top: 12px;
+        color: #ffffff;
+        font-size: 18px;
+        line-height: 24px;
+        letter-spacing: -0.35px;
+        border: 0;
+        text-transform: uppercase;
+
+        :hover {
+          background-color: #2e2520;
+        }
+
+        :active {
+          background-color: #0c0a09;
+        }
+      }
+
+      p {
+        margin: 0;
+      }
+
+      img {
+        cursor: pointer;
+        width: 170px;
+        height: 213px;
+      }
+
+      .product-name,
+      .product-variation-details {
+        cursor: pointer;
+        font-size: 16px;
+        line-height: 24px;
+        color: #3f3f46;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-bottom: 12px;
+      }
+    }
+
+    @media screen and (max-width: 430px) {
+      border-bottom: unset;
+
+      .product {
+        img {
+          height: 132px;
+          width: 106px;
+        }
+
+        .product-name,
+        .product-variation-details {
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  .more-recommendations {
+    padding: 15px;
+
+    .products {
+      display: flex;
+      overflow: hidden;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 16px;
+    }
+
+    .product {
+      max-width: 140px;
+
+      p {
+        margin: 0;
+      }
+
+      .product-name,
+      .product-variation-details {
+        cursor: pointer;
+        color: #3f3f46;
+        font-size: 16px;
+        line-height: 24px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      img {
+        cursor: pointer;
+        width: 140px;
+        height: 175px;
+      }
+    }
+
+    @media screen and (max-width: 430px) {
+      display: none;
+
+      .products {
+        padding: 0px;
+      }
+
+      .product {
+        max-width: 108px;
+
+        .product-name,
+        .product-variation-details {
+          font-size: 12px;
+          line-height: 18px;
+          letter-spacing: -0.36px;
+          margin: 0;
+        }
+
+        img {
+          height: 133px;
+          width: 108px;
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 430px) {
+    .show-more-sml {
+      display: block;
+    }
+  }
+
+  .product-prices {
+    display: flex;
+    gap: 0 8px;
+    line-height: 24px;
+    font-weight: 700;
+    font-size: 18px;
+    color: #000000;
+
+    .compared-at-price {
+      color: #a1a1aa;
+      text-decoration: line-through;
+    }
+
+    @media screen and (max-width: 430px) {
+      font-size: 14px;
+      line-height: 21px;
+    }
+  }
+
+  .chatbot-section {
+    flex: 1;
+    flex-direction: column;
+    padding: 10px 24px 24px;
+    background: #fff;
+    display: flex;
+    gap: 25px;
+    align-self: stretch;
+
+    @media screen and (max-width: 430px) {
+      padding: 10px 16px 16px;
+      gap: 16px;
+    }
+  }
+
+  .chat-header {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    justify-content: flex-end;
+  }
+
+  .chat-window {
+    flex: 1;
+    display: flex;
+    flex-direction: column-reverse;
+    overflow-y: auto;
+    gap: 28px;
+    max-height: calc(100vh - 211px);
+
+    @media screen and (max-width: 430px) {
+      max-height: unset;
+      gap: 24px;
+    }
+  }
+
+  .chat-header {
+    align-items: center;
+
+    .chat-header-sub-title {
+      margin-bottom: 16px;
+    }
+
+    .chat-header-description {
+      text-align: center;
+      line-height: 24px;
+    }
+  }
+
+  .bot-message-container {
+    display: flex;
+    gap: 0 16px;
+  }
+
+  .message {
+    color: #18181b;
+    font-size: 16px;
+  }
+
+  .message.user {
+    padding: 8px 14px;
+    background: #f1f1f1;
+    align-self: flex-end;
+    max-width: 45%;
+    border-radius: 17.5px;
+    text-align: right;
+    letter-spacing: -0.32px;
+
+    @media screen and (max-width: 430px) {
+      max-width: 70%;
+    }
+  }
+
+  .message.bot {
+    align-self: flex-start;
+    max-width: 70%;
+
+    p {
+      margin: 0;
+    }
+
+    .product {
+      margin-top: 16px;
+      display: flex;
+      gap: 12px;
+
+      .product-name,
+      .product-variation-details {
+        cursor: pointer;
+        margin-bottom: 8px;
+      }
+
+      img {
+        cursor: pointer;
+        width: 75px;
+        height: 93px;
+      }
+
+      @media screen and (max-width: 430px) {
+        display: none;
+
+        .product-name,
+        .product-variation-details {
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  .predefined-prompts {
+    margin: 24px 0;
+    display: flex;
+    align-items: start;
+    flex-wrap: wrap;
+    gap: 16px 8px;
+
+    button {
+      padding: 10px 16px;
+      cursor: pointer;
+      border-radius: 21px;
+      border: 1px solid #d4d4d8;
+      color: #8b2822;
+      background: #fff;
+    }
+  }
+
+  .chat-input {
+    display: flex;
+    align-items: center;
+
+    input {
+      flex: 1;
+      height: 48px;
+      padding: 11px 50px 11px 16px;
+      border-radius: 24px;
+      background: #f1f1f1;
+      border-style: none;
+      border: 0px;
+      font-size: 16px;
+
+      &:focus {
+        outline-width: 0;
+        box-shadow: 0 0 4px rgba(57, 123, 244, 0.5);
+      }
+
+      &::placeholder {
+        color: #52525b;
+      }
+    }
+
+    button {
+      cursor: pointer;
+      position: absolute;
+      right: 36px;
+      width: 30px;
+      height: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 0px solid;
+      border-radius: 50%;
+      background: #8b2822;
+
+      &:disabled {
+        background: #808080;
+      }
+    }
+  }
+
+  input {
+    &:focus {
+      outline-width: 0;
+    }
+  }
+
+  button {
+    &:focus {
+      outline-style: none;
+    }
+
+    &:focus-visible {
+      outline-style: none;
+    }
+  }
+`;
+
+const sendFilledIcon = () => b `
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="send--filled 1" clip-path="url(#clip0_11627_1046)">
+    <path id="Vector" d="M18.1564 9.44101L4.40636 2.56601C4.29859 2.51211 4.17754 2.49052 4.05778 2.50382C3.93803 2.51713 3.82467 2.56477 3.73136 2.64101C3.64225 2.71569 3.57574 2.81375 3.5393 2.92416C3.50287 3.03457 3.49795 3.15296 3.52511 3.26601L5.18136 9.37226H12.2501V10.6223H5.18136L3.50011 16.7098C3.47463 16.8042 3.47165 16.9032 3.49143 16.999C3.5112 17.0948 3.55317 17.1846 3.61396 17.2612C3.67475 17.3378 3.75267 17.399 3.84144 17.44C3.93022 17.481 4.02738 17.5006 4.12511 17.4973C4.22295 17.4967 4.31928 17.4731 4.40636 17.4285L18.1564 10.5535C18.2587 10.5011 18.3447 10.4214 18.4046 10.3232C18.4646 10.2251 18.4964 10.1123 18.4964 9.99726C18.4964 9.88223 18.4646 9.76943 18.4046 9.67129C18.3447 9.57314 18.2587 9.49346 18.1564 9.44101Z" fill="white"/>
+    </g>
+    <defs>
+    <clip-path id="clip0_11627_1046">
+    <rect width="20" height="20" fill="white"/>
+    </clip-path>
+    </defs>
+  </svg>
+`;
+const botIcon = () => b `
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="12" cy="12" r="12" fill="black"/>
+    <path d="M10.6465 7.71833L11.048 8.83333C11.494 10.0708 12.4685 11.0453 13.706 11.4913L14.821 11.8928C14.9215 11.9293 14.9215 12.0718 14.821 12.1078L13.706 12.5093C12.4685 12.9553 11.494 13.9298 11.048 15.1673L10.6465 16.2823C10.61 16.3828 10.4675 16.3828 10.4315 16.2823L10.03 15.1673C9.58402 13.9298 8.60952 12.9553 7.37202 12.5093L6.25702 12.1078C6.15652 12.0713 6.15652 11.9288 6.25702 11.8928L7.37202 11.4913C8.60952 11.0453 9.58402 10.0708 10.03 8.83333L10.4315 7.71833C10.4675 7.61733 10.61 7.61733 10.6465 7.71833Z" fill="white"/>
+    <path d="M15.6655 5.03863L15.869 5.60313C16.095 6.22963 16.5885 6.72313 17.215 6.94913L17.7795 7.15263C17.8305 7.17113 17.8305 7.24312 17.7795 7.26163L17.215 7.46513C16.5885 7.69113 16.095 8.18463 15.869 8.81113L15.6655 9.37563C15.647 9.42663 15.575 9.42663 15.5565 9.37563L15.353 8.81113C15.127 8.18463 14.6335 7.69113 14.007 7.46513L13.4425 7.26163C13.3915 7.24312 13.3915 7.17113 13.4425 7.15263L14.007 6.94913C14.6335 6.72313 15.127 6.22963 15.353 5.60313L15.5565 5.03863C15.575 4.98712 15.6475 4.98712 15.6655 5.03863Z" fill="white"/>
+    <path d="M15.6655 14.6242L15.869 15.1887C16.095 15.8152 16.5885 16.3087 17.215 16.5347L17.7795 16.7382C17.8305 16.7567 17.8305 16.8287 17.7795 16.8472L17.215 17.0507C16.5885 17.2767 16.095 17.7702 15.869 18.3967L15.6655 18.9612C15.647 19.0122 15.575 19.0122 15.5565 18.9612L15.353 18.3967C15.127 17.7702 14.6335 17.2767 14.007 17.0507L13.4425 16.8472C13.3915 16.8287 13.3915 16.7567 13.4425 16.7382L14.007 16.5347C14.6335 16.3087 15.127 15.8152 15.353 15.1887L15.5565 14.6242C15.575 14.5732 15.6475 14.5732 15.6655 14.6242Z" fill="white"/>
+  </svg>
+`;
+
+const IMAGE_WIDTHS = [165, 360, 533, 720, 940, 1066, 1600];
+const getImageProperties = (src) => {
+    const image = new URL(src);
+    const srcSet = IMAGE_WIDTHS.map((width) => {
+        image.searchParams.set('width', width.toString());
+        return `${image.toString()} ${width}w`;
+    });
+    return {
+        srcset: srcSet.join(', '),
+        sizes: '(min-width: 1200px) 140px, (min-width: 990px) 33%',
+    };
+};
+let ShopGPT = class ShopGPT extends s {
+    constructor() {
+        super(...arguments);
+        this.recommendedProduct = null;
+        this.moreRecommendations = [];
+        this.chatbotMessages = [];
+        this.userMessage = '';
+        this.isLoadingHistory = false;
+        this.isTyping = false;
+        this.isFailed = false;
+        this.showMore = false;
+        this.promptSuggestions = [];
+        this.submitQuery = (message) => {
+            if (!message) {
+                return;
+            }
+            this.isFailed = false;
+            return this.shopGPTAPI.processQuery(message);
+        };
+        this.onAddToCart = async (ev) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            await this.storeAPI
+                .addToCart({
+                quantity: 1,
+                productId: this.productId.value,
+                variantId: this.variantId.value,
+            })
+                .catch(logger.error);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('edgetag-initialized', async () => {
+            if (!this.shopGPTAPI) {
+                return;
+            }
+            await this.loadHistory();
+        });
+    }
+    async loadHistory() {
+        var _a, _b, _c;
+        try {
+            this.isLoadingHistory = true;
+            const data = await this.shopGPTAPI.fetchChatHistory();
+            this.chatbotMessages = data.map((message) => {
+                var _a;
+                return ({
+                    message: message.message,
+                    sender: message.sender,
+                    quantity: 1,
+                    product: ((_a = message.products) === null || _a === void 0 ? void 0 : _a.length) ? message.products[0] : null,
+                });
+            });
+            if (((_a = data[0]) === null || _a === void 0 ? void 0 : _a.sender) === 'bot' && ((_c = (_b = data[0]) === null || _b === void 0 ? void 0 : _b.products) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+                const products = data[0].products.map((product) => ({
+                    ...product,
+                    quantity: 1,
+                }));
+                this.recommendedProduct = products[0];
+                this.moreRecommendations = products.slice(1, 4);
+            }
+        }
+        catch (e) {
+            logger.error(e);
+        }
+        finally {
+            this.isLoadingHistory = false;
+        }
+    }
+    redirect(url) {
+        var _a;
+        if (!url) {
+            return;
+        }
+        (_a = open(url, '_blank')) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    scrollToBottom() {
+        if (!this.chatWindowElement) {
+            return;
+        }
+        this.chatWindowElement.scrollTo({
+            top: this.chatWindowElement.scrollHeight,
+            behavior: 'smooth',
+        });
+    }
+    resetProductRecommendations() {
+        this.recommendedProduct = null;
+        this.moreRecommendations = [];
+    }
+    async sendMessageToServer(e, message) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!message || this.isTyping || this.isLoadingHistory) {
+            return;
+        }
+        try {
+            this.chatbotMessages = [
+                { sender: 'user', message: message },
+                ...this.chatbotMessages,
+            ];
+            this.isTyping = true;
+            this.userMessage = '';
+            this.scrollToBottom();
+            const reply = await this.submitQuery(message);
+            if (!reply) {
+                return;
+            }
+            this.chatbotMessages = [
+                { sender: 'bot', message: reply.message, product: reply.products[0] },
+                ...this.chatbotMessages,
+            ];
+            this.recommendedProduct = reply.products[0];
+            this.moreRecommendations = reply.products.slice(1, 4);
+            this.setChatWindowHeight();
+        }
+        catch (e) {
+            logger.error(e);
+            this.resetProductRecommendations();
+            this.isFailed = true;
+        }
+        finally {
+            this.isTyping = false;
+        }
+    }
+    // TODO: ShopGPT - This needs to come from StoreAPI and should utilize Store SDK to figure out the currency
+    getCurrencySymbol() {
+        return '$';
+    }
+    handleShowMore(value) {
+        if (!this.chatWindowElement) {
+            return;
+        }
+        this.showMore = value;
+        // dynamically add the maximum height when more products are shown
+        const height = value ? 'calc(100vh - 580px' : 'calc(100vh - 351px)';
+        this.chatWindowElement.style.maxHeight = height;
+    }
+    setChatWindowHeight() {
+        if (!this.chatWindowElement) {
+            return;
+        }
+        if (window.innerWidth < 430) {
+            this.chatWindowElement.style.maxHeight = 'calc(100vh - 351px)';
+        }
+        else {
+            this.chatWindowElement.style.maxHeight = 'calc(100vh - 221px)';
+        }
+    }
+    render() {
+        return x `
+      <div class="container">
+        <div class="header">
+          <div>
+            <h1 class="header-title">ShopGPT</h1>
+            <p class="header-sub-title">powered by Blotout</p>
+          </div>
+          <div class="header-pre-alpha">Pre-Alpha Release v0.1</div>
+        </div>
+
+        <div class="body">${this.productSection()} ${this.chatSection()}</div>
+      </div>
+    `;
+    }
+    productSection() {
+        var _a;
+        return x `
+      <div
+        class="products-section ${!this.recommendedProduct
+            ? 'no-recommended-product'
+            : ''}"
+      >
+        <div class="product-section recommended-product">
+          <h2>Recommended product</h2>
+          ${!((_a = this.recommendedProduct) === null || _a === void 0 ? void 0 : _a.id)
+            ? x `
+                <p class="no-product-text">
+                  Enter what you’re looking for in the chat to get product
+                  results.
+                </p>
+              `
+            : x `
+                <div class="product">
+                  <img
+                    src=${this.recommendedProduct.image.url}
+                    alt=${this.recommendedProduct.image.alt}
+                    @click=${() => { var _a; return this.redirect((_a = this.recommendedProduct) === null || _a === void 0 ? void 0 : _a.url); }}
+                  />
+                  <div class="product-content">
+                    <p
+                      class="product-name"
+                      title=${this.recommendedProduct.title}
+                      @click=${() => { var _a; return this.redirect((_a = this.recommendedProduct) === null || _a === void 0 ? void 0 : _a.url); }}
+                    >
+                      ${this.recommendedProduct.title}
+                    </p>
+                    ${this.recommendedProduct.variants[0].selectedOptions.map((option) => x `
+                        <p class="product-variation-details">
+                          ${option.name}: ${option.value}
+                        </p>
+                      `)}
+                    <div class="product-prices">
+                      ${this.recommendedProduct.variants[0].comparedAtPrice &&
+                this.recommendedProduct.variants[0].comparedAtPrice !==
+                    this.recommendedProduct.variants[0].price
+                ? x `<p class="compared-at-price">
+                            ${this.getCurrencySymbol()}${this.recommendedProduct
+                    .variants[0].comparedAtPrice}
+                          </p>`
+                : T}
+                      <p class="price">
+                        ${this.getCurrencySymbol()}${this.recommendedProduct
+                .variants[0].price}
+                      </p>
+                    </div>
+                    <button
+                      class="buy-now-btn"
+                      @click=${() => { var _a; return this.redirect((_a = this.recommendedProduct) === null || _a === void 0 ? void 0 : _a.url); }}
+                    >
+                      Add To Cart
+                    </button>
+                  </div>
+                </div>
+              `}
+        </div>
+
+        <div
+          class="product-section more-recommendations ${this.showMore
+            ? 'show-more-sml'
+            : ''}"
+        >
+          <h2>More Recommendations</h2>
+          ${this.moreRecommendations.length === 0
+            ? x `
+                <p class="no-product-text">
+                  Enter what you’re looking for in the chat to get product
+                  results.
+                </p>
+              `
+            : x `<div class="products">
+                ${this.moreRecommendations.map((product) => {
+                const imageProperties = getImageProperties(product.image.url);
+                return x `
+                    <div class="product">
+                      <img
+                        srcset=${imageProperties.srcset}
+                        sizes=${imageProperties.sizes}
+                        src=${product.image.url}
+                        alt=${product.image.alt}
+                        @click=${() => this.redirect(product.url)}
+                      />
+                      <p
+                        class="product-name"
+                        title=${product.title}
+                        @click=${() => this.redirect(product.url)}
+                      >
+                        ${product.title}
+                      </p>
+                      <div class="product-prices">
+                        ${product.variants[0].comparedAtPrice &&
+                    product.variants[0].comparedAtPrice !==
+                        product.variants[0].price
+                    ? x `<p class="compared-at-price">
+                              ${this.getCurrencySymbol()}${product.variants[0]
+                        .comparedAtPrice}
+                            </p>`
+                    : T}
+                        <p class="price">
+                          ${this.getCurrencySymbol()}${product.variants[0]
+                    .price}
+                        </p>
+                      </div>
+                    </div>
+                  `;
+            })}
+              </div>`}
+        </div>
+
+        ${this.showMore
+            ? x `
+              <div class="show-less" @click=${() => this.handleShowMore(false)}>
+                Show less
+              </div>
+            `
+            : x `
+              <div class="show-more" @click=${() => this.handleShowMore(true)}>
+                Show more
+              </div>
+            `}
+      </div>
+    `;
+    }
+    chatWindow() {
+        if (this.isLoadingHistory) {
+            return x ` <div class="loader"><div class="spinner"></div></div> `;
+        }
+        if (this.chatbotMessages.length === 0) {
+            return x `
+        <div class="chat-header">
+          <div class="chat-header-title">ShopGPT</div>
+          <div class="chat-header-sub-title">powered by Blotout</div>
+          <div class="chat-header-description">
+            Hi, type a message to get started!
+          </div>
+        </div>
+      `;
+        }
+        return x `
+      <div class="chat-window">
+        ${this.isTyping
+            ? x `<div class="bot-message-container">
+              ${botIcon()}
+              <div class="message bot">Typing...</div>
+            </div>`
+            : ''}
+        ${this.isFailed
+            ? x `<div class="bot-message-container">
+              ${botIcon()}
+              <div class="message bot">
+                Something went wrong please try again!
+              </div>
+            </div>`
+            : ''}
+        ${this.chatbotMessages.map((message) => {
+            if (message.sender === 'bot') {
+                return x `
+              <div class="bot-message-container">
+                ${botIcon()}
+                <div class="message bot">
+                  <p>${message.message}</p>
+                  ${message.product
+                    ? x `<div class="product">
+                        <img
+                          src=${message.product.image.url}
+                          alt=${message.product.image.alt}
+                          @click=${() => { var _a; return this.redirect((_a = message.product) === null || _a === void 0 ? void 0 : _a.url); }}
+                        />
+                        <div>
+                          <p
+                            class="product-name"
+                            title=${message.product.title}
+                            @click=${() => { var _a; return this.redirect((_a = message.product) === null || _a === void 0 ? void 0 : _a.url); }}
+                          >
+                            ${message.product.title}
+                          </p>
+                          <div class="product-prices">
+                            ${message.product.variants[0].comparedAtPrice &&
+                        message.product.variants[0].comparedAtPrice !==
+                            message.product.variants[0].comparedAtPrice
+                        ? x `<p class="compared-at-price">
+                                  ${this.getCurrencySymbol()}${message.product
+                            .variants[0].comparedAtPrice}
+                                </p>`
+                        : T}
+                            <p class="price">
+                              ${this.getCurrencySymbol()}${message.product
+                        .variants[0].price}
+                            </p>
+                          </div>
+                        </div>
+                      </div>`
+                    : T}
+                </div>
+              </div>
+            `;
+            }
+            return x ` <div class="message user">${message.message}</div> `;
+        })}
+      </div>
+    `;
+    }
+    predefinedPrompts() {
+        // TODO: ShopGPT - Handle prompt clicks, should enable this when LLM supports it.
+        return x `
+      <div class="predefined-prompts" style="display:none;">
+        ${this.promptSuggestions.map((prompt) => x ` <button>${prompt}</button> `)}
+      </div>
+    `;
+    }
+    chatSection() {
+        return x `
+      <div class="chatbot-section">
+        ${this.chatWindow()} ${this.predefinedPrompts()}
+        <form
+          class="chat-input"
+          @submit=${async (e) => { var _a; return await this.sendMessageToServer(e, (_a = this.userMessage) === null || _a === void 0 ? void 0 : _a.trim()); }}
+        >
+          <input
+            type="text"
+            .value=${this.userMessage}
+            @input=${(e) => (this.userMessage = e.target.value)}
+            placeholder="Type your message here"
+          />
+          <button
+            type="submit"
+            ?disabled=${this.isTyping || this.isLoadingHistory}
+          >
+            ${sendFilledIcon()}
+          </button>
+        </form>
+      </div>
+    `;
+    }
+};
+ShopGPT.styles = [shopGPTStyles()];
+__decorate([
+    n({ type: Object }),
+    __metadata("design:type", Object)
+], ShopGPT.prototype, "recommendedProduct", void 0);
+__decorate([
+    n({ type: Array }),
+    __metadata("design:type", Array)
+], ShopGPT.prototype, "moreRecommendations", void 0);
+__decorate([
+    r(),
+    __metadata("design:type", Array)
+], ShopGPT.prototype, "chatbotMessages", void 0);
+__decorate([
+    r(),
+    __metadata("design:type", Object)
+], ShopGPT.prototype, "userMessage", void 0);
+__decorate([
+    e('input[name=productId]'),
+    __metadata("design:type", HTMLInputElement)
+], ShopGPT.prototype, "productId", void 0);
+__decorate([
+    e('input[name=variantId]'),
+    __metadata("design:type", HTMLInputElement)
+], ShopGPT.prototype, "variantId", void 0);
+__decorate([
+    e('.chat-window'),
+    __metadata("design:type", Object)
+], ShopGPT.prototype, "chatWindowElement", void 0);
+__decorate([
+    n({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], ShopGPT.prototype, "isLoadingHistory", void 0);
+__decorate([
+    n({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], ShopGPT.prototype, "isTyping", void 0);
+__decorate([
+    n({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], ShopGPT.prototype, "isFailed", void 0);
+__decorate([
+    n({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], ShopGPT.prototype, "showMore", void 0);
+__decorate([
+    r(),
+    __metadata("design:type", Array)
+], ShopGPT.prototype, "promptSuggestions", void 0);
+ShopGPT = __decorate([
+    t('shop-gpt')
+], ShopGPT);
+
+var _a, _b;
+var _c;
+let shopGPT;
+if (typeof window != 'undefined' && typeof document != 'undefined') {
+    (_a = window[registryKey]) !== null && _a !== void 0 ? _a : (window[registryKey] = {});
+    (_b = (_c = window[registryKey]).ui) !== null && _b !== void 0 ? _b : (_c.ui = {
+        init(params) {
+            if (shopGPT) {
+                return;
+            }
+            shopGPT = document.createElement('shop-gpt');
+            shopGPT.storeAPI = params.storeAPI;
+            shopGPT.shopGPTAPI = params.shopGPTAPI;
+            document.body.append(shopGPT);
+        },
+    });
+}
+
+export { data as default };