@blotoutio/providers-shop-gpt-sdk 1.13.0 → 1.14.0

package/index.mjs

@@ -423,6 +423,7 @@ const uiActions = new Set([
     'showThreads',
     'queryInteractions',
     'promptClicked',
+    'customPromptClicked',
     'productRecommendationClicked',
     'blotoutLinkClicked',
 ]);
@@ -1111,7 +1112,7 @@ const e$4=(e,t,c)=>(c.configurable=!0,c.enumerable=!0,Reflect.decorate&&"object"
 
 const scrollBarStyles = i$4 `
   ::-webkit-scrollbar {
-    width: 20px;
+    width: 15px;
   }
 
   ::-webkit-scrollbar-track {
@@ -1161,15 +1162,15 @@ const shopGPTStyles = i$4 `
   }
 
   #shop-gpt-modal {
-    right: 19px;
-    bottom: 28px;
-    height: 80%;
+    right: 20px;
+    bottom: 91px;
+    height: calc(90% - 91px);
     width: 35%;
     min-width: 475px;
-    border-radius: 10px;
+    box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1),
+      0px 10px 10px -5px rgba(0, 0, 0, 0.04);
+    border-radius: 24px;
     overflow: hidden;
-    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12),
-      0px 20px 20px 0px rgba(0, 0, 0, 0.08);
     position: fixed;
     z-index: 2000;
     background: var(--shopgpt-white);
@@ -1177,10 +1178,11 @@ const shopGPTStyles = i$4 `
     @media screen and (max-width: 768px) {
       min-height: unset;
       min-width: unset;
-      width: 90vw;
-      height: 80vh;
-      bottom: 10px;
-      right: 10px;
+      width: 100vw;
+      height: 100vh;
+      bottom: 0;
+      right: 0;
+      border-radius: 0;
     }
   }
 
@@ -1191,17 +1193,9 @@ const shopGPTStyles = i$4 `
     z-index: 1000;
 
     button {
-      color: var(--shopgpt-white);
-      border: none;
-      cursor: pointer;
-      width: 56px;
-      height: 56px;
-      background-color: var(--shopgpt-primary);
-      border-radius: 50%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      box-shadow: 0 0 4px 1px var(--shopgpt-white);
+      background: unset;
+      border: unset;
+      padding: 0;
     }
 
     .chatbot-hover-text {
@@ -1219,9 +1213,7 @@ const shopGPTStyles = i$4 `
       right: calc(100% + 5px);
 
       border-radius: 5px 5px 0px;
-      background: var(--shopgpt-warning);
-      box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
-        0px 2px 4px -1px rgba(0, 0, 0, 0.06);
+      background: white;
 
       font-weight: 400;
       line-height: 150%;
@@ -1343,9 +1335,8 @@ const sendFilledIcon = b `
 const trashIcon = b `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
   <path fill-rule="evenodd" clip-rule="evenodd" d="M6.75 1.125H11.25V2.25H6.75V1.125ZM2.25 3.375V4.5H3.375V15.75C3.375 16.0484 3.49353 16.3345 3.7045 16.5455C3.91548 16.7565 4.20163 16.875 4.5 16.875H13.5C13.7984 16.875 14.0845 16.7565 14.2955 16.5455C14.5065 16.3345 14.625 16.0484 14.625 15.75V4.5H15.75V3.375H2.25ZM4.5 15.75V4.5H13.5V15.75H4.5ZM6.75 6.75H7.875V13.5H6.75V6.75ZM10.125 6.75H11.25V13.5H10.125V6.75Z" fill="#A3B2C6"/>
 </svg>`;
-const chatIcon = b `<svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M16 19a6.9908 6.9908 0 01-5.833-3.1287l1.666-1.1074a5.0007 5.0007 0 008.334 0l1.666 1.1074A6.9908 6.9908 0 0116 19zM20 8a2 2 0 102 2A1.9806 1.9806 0 0020 8zM12 8a2 2 0 102 2A1.9806 1.9806 0 0012 8z"></path><path d="M17.7358,30,16,29l4-7h6a1.9966,1.9966,0,0,0,2-2V6a1.9966,1.9966,0,0,0-2-2H6A1.9966,1.9966,0,0,0,4,6V20a1.9966,1.9966,0,0,0,2,2h9v2H6a3.9993,3.9993,0,0,1-4-4V6A3.9988,3.9988,0,0,1,6,2H26a3.9988,3.9988,0,0,1,4,4V20a3.9993,3.9993,0,0,1-4,4H21.1646Z"></path></svg>`;
-const botIcon = b `
-  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="18" viewBox="0 0 12 18" fill="none">
+const botIcon = (width, height) => b `
+  <svg xmlns="http://www.w3.org/2000/svg" width=${width || '12'} height=${height || '18'} viewBox="0 0 12 18" fill="none">
   <g clip-path="url(#clip0_12438_1597)">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M0.0703335 0.211252C0.0351569 0.281773 0.0351562 0.374089 0.0351562 0.55872V17.2552C0.0351562 17.4398 0.0351569 17.5321 0.0703335 17.6026C0.101276 17.6647 0.150648 17.7151 0.211375 17.7468C0.280413 17.7826 0.37079 17.7826 0.551541 17.7826H1.75313C1.93388 17.7826 2.02425 17.7826 2.09329 17.7468C2.15402 17.7151 2.20339 17.6647 2.23433 17.6026C2.26951 17.5321 2.26951 17.4398 2.26951 17.2552V16.6659C3.28957 17.5011 4.58438 18.0007 5.99343 18.0007C9.2841 18.0007 11.9517 15.2758 11.9517 11.9145C11.9517 8.55319 9.2841 5.82832 5.99343 5.82832C4.58438 5.82832 3.28957 6.32793 2.26951 7.1632V0.55872C2.26951 0.374089 2.26951 0.281773 2.23433 0.211252C2.20339 0.149221 2.15402 0.0987883 2.09329 0.0671818C2.02425 0.03125 1.93388 0.03125 1.75313 0.03125H0.551541C0.37079 0.03125 0.280413 0.03125 0.211375 0.0671818C0.150648 0.0987883 0.101276 0.149221 0.0703335 0.211252ZM2.26951 11.9145C2.26951 14.0154 3.93677 15.7184 5.99343 15.7184C8.05007 15.7184 9.71735 14.0154 9.71735 11.9145C9.71735 9.81372 8.05007 8.11064 5.99343 8.11064C3.93677 8.11064 2.26951 9.81372 2.26951 11.9145Z" fill="#F25C2B"/>
   </g>
@@ -1362,10 +1353,10 @@ const cursorBtn = b `<svg xmlns="http://www.w3.org/2000/svg" width="56" height="
 const closeBtn = b `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="37" viewBox="0 0 36 37" fill="none">
   <path d="M27 11.075L25.425 9.5L18 16.925L10.575 9.5L9 11.075L16.425 18.5L9 25.925L10.575 27.5L18 20.075L25.425 27.5L27 25.925L19.575 18.5L27 11.075Z" fill="#A3B2C6"/>
 </svg>`;
-const leftBtn = b `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+const leftBtn$1 = b `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
   <path d="M6.64645 2.64645L6.9954 2.2975L7.34889 2.64184L8.06389 3.33834L8.42613 3.69121L8.06918 4.04942L5.12908 7H14H14.5V7.5V8.5V9H14H5.1329L8.06839 11.9328L8.42264 12.2867L8.06818 12.6404L7.35318 13.3539L6.99963 13.7067L6.64645 13.3536L1.64645 8.35355L1.29289 8L1.64645 7.64645L6.64645 2.64645Z" fill="#4E647F" stroke="#4E647F"/>
 </svg>`;
-const rightBtn = b `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+const rightBtn$1 = b `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
   <path d="M9.35355 2.64645L9.0046 2.2975L8.65111 2.64184L7.93611 3.33834L7.57387 3.69121L7.93082 4.04942L10.8709 7H2H1.5V7.5V8.5V9H2H10.8671L7.93161 11.9328L7.57736 12.2867L7.93182 12.6404L8.64682 13.3539L9.00037 13.7067L9.35355 13.3536L14.3536 8.35355L14.7071 8L14.3536 7.64645L9.35355 2.64645Z" fill="#4E647F" stroke="#4E647F"/>
 </svg>`;
 const searchIcon = b `<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
@@ -1398,6 +1389,46 @@ const shopGPTIcon = b `<svg xmlns="http://www.w3.org/2000/svg" width="105" heigh
   <path d="M75.2265 25.6998C75.1436 25.6998 75.1021 25.6998 75.0705 25.7161C75.0426 25.7305 75.02 25.7534 75.0058 25.7815C74.9896 25.8135 74.9896 25.8555 74.9896 25.9393V26.9083H74.6394C74.5593 26.9083 74.5183 26.9086 74.4872 26.9247C74.4593 26.939 74.4367 26.9619 74.4225 26.99C74.4063 27.0221 74.4063 27.064 74.4063 27.1478V27.7051C74.4063 27.7889 74.4063 27.8308 74.4225 27.8628C74.4367 27.891 74.4593 27.9139 74.4872 27.9282C74.5188 27.9446 74.5603 27.9446 74.6432 27.9446H74.9896V32.0994H74.9882C74.9878 32.1063 74.9874 32.1131 74.987 32.12C74.9876 32.1359 74.9885 32.1518 74.9896 32.1676V32.2073L74.9918 32.2072C75.0376 33.0766 75.7476 33.7581 76.6088 33.7595C76.7762 33.7594 76.9423 33.733 77.1013 33.6816C77.1703 33.6593 77.2245 33.5768 77.2243 33.5035L77.2261 32.7371C77.2261 32.7257 77.224 32.7075 77.2211 32.6964C77.2206 32.6945 77.22 32.6924 77.2194 32.6903C77.2148 32.6737 77.2005 32.6492 77.1865 32.6391C77.1828 32.6365 77.1347 32.6088 77.0944 32.6334C77.0512 32.6536 77.0505 32.654 77.0498 32.6543C77.0388 32.6596 77.0016 32.6737 76.9842 32.6839C76.8335 32.7484 76.8109 32.7469 76.7666 32.7532C76.7363 32.7575 76.7058 32.7596 76.6752 32.7596C76.6174 32.7596 76.56 32.752 76.5042 32.7369C76.4485 32.7218 76.3949 32.6993 76.3449 32.6702C76.3181 32.6523 76.2927 32.6326 76.2687 32.6111C76.2546 32.6011 76.241 32.5905 76.2278 32.5793C76.2212 32.5744 76.2146 32.5693 76.2081 32.5641C76.2064 32.5618 76.2047 32.5596 76.203 32.5573C76.0832 32.4441 76.0151 32.2858 76.0147 32.12C76.0151 32.1146 76.0157 32.1092 76.0163 32.1039C76.0157 32.0999 76.0152 32.0959 76.0147 32.092V27.9446H76.9737C77.0566 27.9446 77.0981 27.9446 77.1298 27.9282C77.1576 27.9139 77.1803 27.891 77.1945 27.8628C77.2106 27.8308 77.2106 27.7889 77.2106 27.7051V27.1478C77.2106 27.064 77.2106 27.0221 77.1945 26.99C77.1803 26.9619 77.1576 26.939 77.1298 26.9247C77.0981 26.9083 77.0566 26.9083 76.9737 26.9083H76.0147V25.9393C76.0147 25.8555 76.0147 25.8135 75.9985 25.7815C75.9843 25.7534 75.9617 25.7305 75.9338 25.7161C75.9021 25.6998 75.8607 25.6998 75.7778 25.6998H75.2265Z" fill="#F25C2B"/>
   <path d="M90.323 25.7117C90.2401 25.7117 90.1986 25.7117 90.1669 25.7281C90.1391 25.7424 90.1165 25.7653 90.1022 25.7934C90.0861 25.8255 90.0861 25.8674 90.0861 25.9512V26.9203H89.7359C89.6558 26.9203 89.6148 26.9205 89.5836 26.9366C89.5558 26.9509 89.5331 26.9738 89.5189 27.002C89.5028 27.034 89.5028 27.0759 89.5028 27.1597V27.717C89.5028 27.8008 89.5028 27.8427 89.5189 27.8748C89.5331 27.9029 89.5558 27.9258 89.5836 27.9402C89.6153 27.9565 89.6568 27.9565 89.7397 27.9565H90.0861V32.1113H90.0847C90.0843 32.1182 90.0838 32.1251 90.0835 32.1319C90.0841 32.1478 90.085 32.1637 90.0861 32.1795V32.2192L90.0883 32.2191C90.1341 33.0885 90.844 33.7701 91.7052 33.7715C91.8727 33.7713 92.0388 33.745 92.1978 33.6936C92.2668 33.6713 92.321 33.5887 92.3208 33.5154L92.3225 32.749C92.3226 32.7376 92.3205 32.7194 92.3176 32.7084C92.317 32.7064 92.3165 32.7043 92.3159 32.7022C92.3113 32.6856 92.297 32.6611 92.283 32.651C92.2793 32.6484 92.2311 32.6207 92.1908 32.6453C92.1477 32.6656 92.147 32.6659 92.1463 32.6662C92.1353 32.6715 92.0981 32.6856 92.0807 32.6958C91.9299 32.7603 91.9074 32.7589 91.8631 32.7651C91.8328 32.7694 91.8023 32.7716 91.7716 32.7716C91.7139 32.7716 91.6565 32.7639 91.6007 32.7488C91.5449 32.7337 91.4914 32.7113 91.4414 32.6821C91.4146 32.6643 91.3891 32.6445 91.3652 32.623C91.3511 32.613 91.3375 32.6024 91.3243 32.5912C91.3176 32.5863 91.3111 32.5812 91.3046 32.576C91.3029 32.5738 91.3012 32.5715 91.2995 32.5692C91.1797 32.456 91.1115 32.2977 91.1112 32.1319C91.1116 32.1265 91.1121 32.1212 91.1127 32.1158C91.1122 32.1118 91.1116 32.1079 91.1112 32.1039V27.9565H92.0702C92.1531 27.9565 92.1946 27.9565 92.2262 27.9402C92.2541 27.9258 92.2767 27.9029 92.2909 27.8748C92.3071 27.8427 92.3071 27.8008 92.3071 27.717V27.1597C92.3071 27.0759 92.3071 27.034 92.2909 27.002C92.2767 26.9738 92.2541 26.9509 92.2262 26.9366C92.1946 26.9203 92.1531 26.9203 92.0702 26.9203H91.1112V25.9512C91.1112 25.8674 91.1112 25.8255 91.095 25.7934C91.0808 25.7653 91.0582 25.7424 91.0303 25.7281C90.9986 25.7117 90.9572 25.7117 90.8743 25.7117H90.323Z" fill="#F25C2B"/>
 </svg>`;
+const thumbsUpBtn = b `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_158_630)">
+<path d="M4.08317 5.83335V12.8334M8.74984 3.43002L8.1665 5.83335H11.5673C11.7485 5.83335 11.9271 5.87552 12.0891 5.95652C12.2511 6.03752 12.392 6.15512 12.5007 6.30002C12.6093 6.44492 12.6828 6.61312 12.7152 6.79132C12.7476 6.96952 12.7381 7.15281 12.6873 7.32669L11.3282 11.9934C11.2575 12.2357 11.1101 12.4486 10.9082 12.6C10.7062 12.7515 10.4606 12.8334 10.2082 12.8334H2.33317C2.02375 12.8334 1.72701 12.7104 1.50821 12.4916C1.28942 12.2729 1.1665 11.9761 1.1665 11.6667V7.00002C1.1665 6.6906 1.28942 6.39385 1.50821 6.17506C1.72701 5.95627 2.02375 5.83335 2.33317 5.83335H3.94317C4.16022 5.83324 4.37293 5.77258 4.55739 5.65819C4.74186 5.5438 4.89075 5.38023 4.98734 5.18585L6.99984 1.16669C7.27492 1.17009 7.54568 1.23562 7.79189 1.35837C8.03809 1.48112 8.25338 1.65792 8.42166 1.87556C8.58993 2.09319 8.70686 2.34605 8.76368 2.61522C8.82051 2.8844 8.81578 3.16293 8.74984 3.43002Z" stroke="#18181B" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_158_630">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>`;
+const thumbsUpFilledBtn = b `<svg width="14" height="14" viewBox="0 0 14 14" fill="#18181B" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_158_630_1)">
+<path d="M4.08317 5.83335V12.8334M8.74984 3.43002L8.1665 5.83335H11.5673C11.7485 5.83335 11.9271 5.87552 12.0891 5.95652C12.2511 6.03752 12.392 6.15512 12.5007 6.30002C12.6093 6.44492 12.6828 6.61312 12.7152 6.79132C12.7476 6.96952 12.7381 7.15281 12.6873 7.32669L11.3282 11.9934C11.2575 12.2357 11.1101 12.4486 10.9082 12.6C10.7062 12.7515 10.4606 12.8334 10.2082 12.8334H2.33317C2.02375 12.8334 1.72701 12.7104 1.50821 12.4916C1.28942 12.2729 1.1665 11.9761 1.1665 11.6667V7.00002C1.1665 6.6906 1.28942 6.39385 1.50821 6.17506C1.72701 5.95627 2.02375 5.83335 2.33317 5.83335H3.94317C4.16022 5.83324 4.37293 5.77258 4.55739 5.65819C4.74186 5.5438 4.89075 5.38023 4.98734 5.18585L6.99984 1.16669C7.27492 1.17009 7.54568 1.23562 7.79189 1.35837C8.03809 1.48112 8.25338 1.65792 8.42166 1.87556C8.58993 2.09319 8.70686 2.34605 8.76368 2.61522C8.82051 2.8844 8.81578 3.16293 8.74984 3.43002Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_158_630_1">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>`;
+const thumbsDownBtn = b `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_158_651)">
+<path d="M9.9165 8.16669V1.16669M5.24979 10.57L5.83312 8.16669H2.43229C2.25117 8.16669 2.07254 8.12452 1.91054 8.04352C1.74854 7.96252 1.60763 7.84492 1.49896 7.70002C1.39029 7.55512 1.31684 7.38692 1.28444 7.20872C1.25204 7.03052 1.26158 6.84723 1.31229 6.67335L2.67146 2.00669C2.74214 1.76435 2.88951 1.55148 3.09146 1.40002C3.2934 1.24856 3.53903 1.16669 3.79146 1.16669H11.6665C11.9759 1.16669 12.2726 1.2896 12.4914 1.5084C12.7102 1.72719 12.8331 2.02393 12.8331 2.33335V7.00002C12.8331 7.30944 12.7102 7.60619 12.4914 7.82498C12.2726 8.04377 11.9759 8.16669 11.6665 8.16669H10.0565C9.83941 8.1668 9.6267 8.22746 9.44223 8.34185C9.25777 8.45624 9.10888 8.61981 9.01229 8.81419L6.99979 12.8334C6.7247 12.8299 6.45394 12.7644 6.20774 12.6417C5.96153 12.5189 5.74625 12.3421 5.57797 12.1245C5.40969 11.9068 5.29277 11.654 5.23594 11.3848C5.17912 11.1156 5.18385 10.8371 5.24979 10.57Z" stroke="#18181B" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_158_651">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>`;
+const thumbsDownFilledBtn = b `<svg width="14" height="14" viewBox="0 0 14 14" fill="#18181B" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_158_651_1)">
+<path d="M9.9165 8.16669V1.16669M5.24979 10.57L5.83312 8.16669H2.43229C2.25117 8.16669 2.07254 8.12452 1.91054 8.04352C1.74854 7.96252 1.60763 7.84492 1.49896 7.70002C1.39029 7.55512 1.31684 7.38692 1.28444 7.20872C1.25204 7.03052 1.26158 6.84723 1.31229 6.67335L2.67146 2.00669C2.74214 1.76435 2.88951 1.55148 3.09146 1.40002C3.2934 1.24856 3.53903 1.16669 3.79146 1.16669H11.6665C11.9759 1.16669 12.2726 1.2896 12.4914 1.5084C12.7102 1.72719 12.8331 2.02393 12.8331 2.33335V7.00002C12.8331 7.30944 12.7102 7.60619 12.4914 7.82498C12.2726 8.04377 11.9759 8.16669 11.6665 8.16669H10.0565C9.83941 8.1668 9.6267 8.22746 9.44223 8.34185C9.25777 8.45624 9.10888 8.61981 9.01229 8.81419L6.99979 12.8334C6.7247 12.8299 6.45394 12.7644 6.20774 12.6417C5.96153 12.5189 5.74625 12.3421 5.57797 12.1245C5.40969 11.9068 5.29277 11.654 5.23594 11.3848C5.17912 11.1156 5.18385 10.8371 5.24979 10.57Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_158_651_1">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>`;
 
 const chatThreadsStyles = i$4 `
   :host {
@@ -1867,7 +1898,6 @@ const productItemStyles = i$4 `
     }
 
     button {
-      border-style: none;
       cursor: pointer;
     }
   }
@@ -1877,19 +1907,28 @@ const productItemStyles = i$4 `
     gap: 16px;
     cursor: pointer;
     text-decoration: none;
-    height: 100%;
 
     img {
-      width: 150px;
-      height: 186px;
+      width: 160px;
+      height: 160px;
       object-position: center;
       object-fit: contain;
+      border-radius: 8px;
     }
   }
 
+  .product.modal {
+    padding: 8px;
+    gap: 6px;
+    border-radius: 10px;
+    background-color: #fff;
+    box-sizing: border-box;
+    border: 0.5px solid #cbd5e1;
+  }
+
   .content {
     display: flex;
-    gap: 8px;
+    gap: 10px;
     flex-direction: column;
 
     *:last-child {
@@ -1899,29 +1938,42 @@ const productItemStyles = i$4 `
 
   .product-name {
     display: -webkit-box;
-    color: #3f3f46;
-    line-height: 150%;
+    color: #1e293b;
     max-width: 100%;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
     word-break: break-word;
     white-space: normal;
+
+    opacity: 0.7;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
   }
 
   .product-variation-details {
-    color: #3f3f46;
-    font-weight: 700;
-    line-height: 150%;
+    color: #000000;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 22px;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-word;
+    white-space: normal;
   }
 
   .prices {
     display: flex;
     gap: 0 8px;
-    font-weight: 700;
-    line-height: 24px;
-    color: #000;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 16px;
+    color: #020617;
 
     .price-compared {
       color: #a1a1aa;
@@ -1929,26 +1981,44 @@ const productItemStyles = i$4 `
     }
   }
 
-  .btn-view-product {
-    color: #fff;
-    line-height: 150%;
-    text-transform: capitalize;
-    max-width: 200px;
-    padding: 10px;
-    text-align: center;
+  .product-description {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-word;
+    white-space: normal;
+    max-height: 48px;
+    margin: 4px 0 6px;
 
-    border-radius: 5px;
-    background: #172a41;
-    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0px 2px 4px -1px rgba(0, 0, 0, 0.06);
+    font-weight: 400;
+    line-height: 16px;
+    font-size: 12px;
+    color: #475569;
+  }
+
+  .btn-quick-view {
+    color: #fafafa;
+    font-weight: 500;
+    font-size: 12px;
+    text-transform: uppercase;
+    max-width: 160px;
+    padding: 8px 12px;
+    text-align: center;
+    background: #18181b;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
 
     &:hover {
-      background: #091627;
+      opacity: 0.7;
     }
   }
 
-  @container productContainer (max-width: 150px) {
-    .btn-view-product {
+  @container productContainer (max-width: 216px) {
+    .btn-quick-view {
       display: none;
     }
 
@@ -1961,18 +2031,33 @@ const productItemStyles = i$4 `
       gap: 0;
     }
 
-    .product-name {
-      max-width: 150px;
+    .product-variation-details {
       font-size: 14px;
     }
 
-    .product-variation-details {
-      font-size: 14px;
+    .product.modal {
+      height: 100%;
+
+      .btn-quick-view {
+        display: flex;
+        text-transform: capitalize;
+        max-width: 123px;
+      }
+
+      .content {
+        gap: 0px;
+      }
+
+      .product-name,
+      .product-variation-details {
+        font-size: 12px;
+        max-width: 160px;
+      }
     }
   }
 
   @container productContainer (max-height: 124px) {
-    .btn-view-product {
+    .btn-quick-view {
       display: none;
     }
 
@@ -1997,9 +2082,54 @@ const productItemStyles = i$4 `
     .product-variation-details {
       color: #172a41;
     }
+
+    .product-description {
+      display: none;
+    }
   }
 `;
 
+const plusBtn = b `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M12.75 11.25V6H11.25V11.25H6V12.75H11.25V18H12.75V12.75H18V11.25H12.75Z" fill="white"/>
+</svg>`;
+const historyBtn = b `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.25 9C2.25 10.335 2.64588 11.6401 3.38758 12.7501C4.12928 13.8601 5.18349 14.7253 6.41689 15.2362C7.65029 15.7471 9.00749 15.8808 10.3169 15.6203C11.6262 15.3599 12.829 14.717 13.773 13.773C14.717 12.829 15.3599 11.6262 15.6203 10.3169C15.8808 9.00749 15.7471 7.65029 15.2362 6.41689C14.7253 5.18349 13.8601 4.12928 12.7501 3.38758C11.6401 2.64588 10.335 2.25 9 2.25C7.11296 2.2571 5.30173 2.99342 3.945 4.305L2.25 6M2.25 6V2.25M2.25 6H6M9 5.25V9L12 10.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+const crossBtn = b `<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.5 7.5L7.5 22.5M7.5 7.5L22.5 22.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+const sendBtn = b `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 8L2 2L14.6667 8M4 8L2 14L14.6667 8M4 8H14.6667" stroke="#1E293B" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+const sparklesSharp = b `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_172_31)">
+<path d="M6.62455 10.3334C6.56503 10.1026 6.44477 9.89209 6.27629 9.72361C6.10781 9.55513 5.89726 9.43487 5.66655 9.37536L1.57655 8.32069C1.50677 8.30088 1.44535 8.25886 1.40162 8.20099C1.35789 8.14312 1.33423 8.07256 1.33423 8.00002C1.33423 7.92749 1.35789 7.85693 1.40162 7.79906C1.44535 7.74119 1.50677 7.69916 1.57655 7.67936L5.66655 6.62402C5.89718 6.56456 6.10767 6.44441 6.27615 6.27605C6.44462 6.10769 6.56492 5.89728 6.62455 5.66669L7.67921 1.57669C7.69882 1.50664 7.7408 1.44492 7.79876 1.40095C7.85672 1.35699 7.92747 1.33319 8.00021 1.33319C8.07296 1.33319 8.14371 1.35699 8.20166 1.40095C8.25962 1.44492 8.30161 1.50664 8.32121 1.57669L9.37521 5.66669C9.43473 5.8974 9.55499 6.10795 9.72347 6.27644C9.89195 6.44492 10.1025 6.56517 10.3332 6.62469L14.4232 7.67869C14.4935 7.69809 14.5556 7.74003 14.5998 7.79807C14.644 7.85612 14.6679 7.92706 14.6679 8.00002C14.6679 8.07298 14.644 8.14393 14.5998 8.20197C14.5556 8.26002 14.4935 8.30196 14.4232 8.32136L10.3332 9.37536C10.1025 9.43487 9.89195 9.55513 9.72347 9.72361C9.55499 9.89209 9.43473 10.1026 9.37521 10.3334L8.32055 14.4234C8.30094 14.4934 8.25896 14.5551 8.201 14.5991C8.14304 14.6431 8.07229 14.6669 7.99955 14.6669C7.9268 14.6669 7.85605 14.6431 7.79809 14.5991C7.74014 14.5551 7.69815 14.4934 7.67854 14.4234L6.62455 10.3334Z" fill="#CBD5E1"/>
+<path d="M13.3333 2.00002V4.66669V2.00002Z" fill="#CBD5E1"/>
+<path d="M14.6666 3.33335H11.9999H14.6666Z" fill="#CBD5E1"/>
+<path d="M2.66659 11.3334V12.6667V11.3334Z" fill="#CBD5E1"/>
+<path d="M3.33325 12H1.99992H3.33325Z" fill="#CBD5E1"/>
+<path d="M13.3333 2.00002V4.66669M14.6666 3.33335H11.9999M2.66659 11.3334V12.6667M3.33325 12H1.99992M6.62455 10.3334C6.56503 10.1026 6.44477 9.89209 6.27629 9.72361C6.10781 9.55513 5.89726 9.43487 5.66655 9.37536L1.57655 8.32069C1.50677 8.30088 1.44535 8.25886 1.40162 8.20099C1.35789 8.14312 1.33423 8.07256 1.33423 8.00002C1.33423 7.92749 1.35789 7.85693 1.40162 7.79906C1.44535 7.74119 1.50677 7.69916 1.57655 7.67936L5.66655 6.62402C5.89718 6.56456 6.10767 6.44441 6.27615 6.27605C6.44462 6.10769 6.56492 5.89728 6.62455 5.66669L7.67921 1.57669C7.69882 1.50664 7.7408 1.44492 7.79876 1.40095C7.85672 1.35699 7.92747 1.33319 8.00021 1.33319C8.07296 1.33319 8.14371 1.35699 8.20166 1.40095C8.25962 1.44492 8.30161 1.50664 8.32121 1.57669L9.37521 5.66669C9.43473 5.8974 9.55499 6.10795 9.72347 6.27644C9.89195 6.44492 10.1025 6.56517 10.3332 6.62469L14.4232 7.67869C14.4935 7.69809 14.5556 7.74003 14.5998 7.79807C14.644 7.85612 14.6679 7.92706 14.6679 8.00002C14.6679 8.07298 14.644 8.14393 14.5998 8.20197C14.5556 8.26002 14.4935 8.30196 14.4232 8.32136L10.3332 9.37536C10.1025 9.43487 9.89195 9.55513 9.72347 9.72361C9.55499 9.89209 9.43473 10.1026 9.37521 10.3334L8.32055 14.4234C8.30094 14.4934 8.25896 14.5551 8.201 14.5991C8.14304 14.6431 8.07229 14.6669 7.99955 14.6669C7.9268 14.6669 7.85605 14.6431 7.79809 14.5991C7.74013 14.5551 7.69815 14.4934 7.67855 14.4234L6.62455 10.3334Z" stroke="#CBD5E1" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_172_31">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
+`;
+const leftBtn = b `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 19L5 12M5 12L12 5M5 12H19" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+const rightBtn = b `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+const chevronRight = b `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.25 10.5L8.75 7L5.25 3.5" stroke="white" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+
 class ProductItem extends i$1 {
     getLocalPrice(price) {
         if (!this.siteCurrency) {
@@ -2033,7 +2163,12 @@ class ProductItem extends i$1 {
             return E;
         }
         return this.product.variants[0].selectedOptions.map((option) => x `
-        <p class="product-variation-details">${option.name}: ${option.value}</p>
+        <p
+          class="product-variation-details"
+          title=${`${option.name}: ${option.value}`}
+        >
+          ${option.name}: ${option.value}
+        </p>
       `);
     }
     productClicked(product) {
@@ -2058,21 +2193,28 @@ class ProductItem extends i$1 {
     render() {
         return x `
       <a
-        class="product"
+        class=${e$1({ product: true, modal: this.viewType === 'modal' })}
         href=${this.getProductUrl(this.product.url)}
         @click=${() => this.productClicked(this.product)}
       >
         <img src=${this.product.image.url} alt=${this.product.image.alt} />
         <div class="content">
-          <p class="product-name" title=${this.product.title}>
-            ${this.product.title}
-          </p>
-          ${this.renderVariantTitles()}
+          <div>
+            <p class="product-name" title=${this.product.title}>
+              ${this.product.title}
+            </p>
+            ${this.renderVariantTitles()}
+          </div>
           <div class="prices">
+            <p>From</p>
             ${this.getComparedAtPrice(this.product.variants[0].comparedAtPrice, this.product.variants[0].price)}
             <p>${this.getLocalPrice(this.product.variants[0].price)}</p>
           </div>
-          <button class="btn-view-product">View Product</button>
+          <div class="product-description">${this.product.description}</div>
+          <button class="btn-quick-view">
+            <span> View Product </span>
+            ${chevronRight}
+          </button>
         </div>
       </a>
     `;
@@ -2103,6 +2245,10 @@ __decorate([
     n({ type: String }),
     __metadata("design:type", String)
 ], ProductItem.prototype, "userId", void 0);
+__decorate([
+    n({ type: String }),
+    __metadata("design:type", String)
+], ProductItem.prototype, "viewType", void 0);
 if (!customElements.get('product-item')) {
     customElements.define('product-item', ProductItem);
 }
@@ -2113,28 +2259,17 @@ const productsListStyles = i$4 `
   }
 
   .product-container {
-    flex: 0 0 150px;
+    flex: 0 0 176px;
     container-type: inline-size;
     container-name: productContainer;
   }
 
-  .product-container.modal {
-    padding: 8px;
-    margin-bottom: 4px;
-    border-radius: 10px;
-    background: #fff;
-    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0px 2px 4px -1px rgba(0, 0, 0, 0.06);
-  }
-
   .products {
     flex: 1;
     display: flex;
-    gap: 24px;
+    gap: 12px;
     overflow-x: auto;
     scrollbar-width: none;
-    margin-left: -10px;
-    padding-left: 10px;
   }
 
   .scroll-btns {
@@ -2160,12 +2295,31 @@ const productsListStyles = i$4 `
 
     .disabled {
       opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .scroll-btns.modal {
+    flex-direction: row;
+    align-items: center;
+    position: absolute;
+    bottom: -33px;
+    right: 0;
+    height: unset;
+    gap: 10px;
+
+    div {
+      padding: 5px;
+      background: #f8fafc;
+      border: unset;
+      border-radius: 12.5px;
     }
   }
 
   .products-wrapper {
     display: flex;
     gap: 24px;
+    position: relative;
   }
 `;
 
@@ -2190,18 +2344,12 @@ class ProductsList extends i$1 {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.updateButtonsState();
-        window.addEventListener('resize', this.updateButtonsState);
+        this.resizeObserver = new ResizeObserver(() => this.updateButtonsState());
     }
     disconnectedCallback() {
-        window.removeEventListener('resize', this.updateButtonsState);
+        this.resizeObserver.disconnect();
         super.disconnectedCallback();
     }
-    updated(_changedProperties) {
-        if (_changedProperties.has('products')) {
-            this.updateButtonsState();
-        }
-    }
     scrollToLeft(e) {
         var _a;
         e.preventDefault();
@@ -2212,20 +2360,27 @@ class ProductsList extends i$1 {
         e.preventDefault();
         (_a = this.productsEle) === null || _a === void 0 ? void 0 : _a.scrollBy({ left: 186, behavior: 'smooth' });
     }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        if (!this.productsEle) {
+            return;
+        }
+        this.resizeObserver.observe(this.productsEle);
+        Array.from(this.productsEle.children).forEach((child) => {
+            this.resizeObserver.observe(child);
+        });
+        this.updateButtonsState();
+    }
     render() {
         if (!this.products.length) {
             return E;
         }
+        const isPopupView = this.viewType === 'modal';
         return x `
       <div class="products-wrapper">
         <div class="products" @scroll=${this.updateButtonsState}>
           ${o$1(this.products, (product, index) => x `
-                <div
-                  class=${e$1({
-            'product-container': true,
-            modal: this.viewType === 'modal',
-        })}
-                >
+                <div class=${'product-container'}>
                   <product-item
                     .query=${this.query}
                     .response=${this.response}
@@ -2233,17 +2388,24 @@ class ProductsList extends i$1 {
                     .siteCurrency=${this.siteCurrency}
                     .rank=${index + 1}
                     .userId=${this.userId}
+                    .viewType=${this.viewType}
                   ></product-item>
                 </div>
               `)}
         </div>
         ${this.showButtons
-            ? x ` <div class="scroll-btns">
+            ? x `<div
+              class="scroll-btns"
+              class=${e$1({
+                'scroll-btns': true,
+                modal: isPopupView,
+            })}
+            >
               <div class="left-btn disabled" @click=${this.scrollToLeft}>
-                ${leftBtn}
+                ${isPopupView ? leftBtn : leftBtn$1}
               </div>
               <div class="right-btn" @click=${this.scrollToRight}>
-                ${rightBtn}
+                ${isPopupView ? rightBtn : rightBtn$1}
               </div>
             </div>`
             : E}
@@ -2286,7 +2448,7 @@ __decorate([
 ], ProductsList.prototype, "rightBtnEle", void 0);
 __decorate([
     e$3('.products'),
-    __metadata("design:type", Object)
+    __metadata("design:type", HTMLDivElement)
 ], ProductsList.prototype, "productsEle", void 0);
 if (!customElements.get('products-list')) {
     customElements.define('products-list', ProductsList);
@@ -2407,7 +2569,7 @@ if (!customElements.get('products-section')) {
     customElements.define('products-section', ProductsSection);
 }
 
-const chatSectionStyles = i$4 `
+const chatSectionStyles$1 = i$4 `
   :host {
     font-family: 'Inter', sans-serif;
     font-size: 16px;
@@ -2484,33 +2646,6 @@ const chatSectionStyles = i$4 `
         align-items: center;
         justify-content: center;
       }
-
-      .threads-btn.active {
-        background: #2b65cf;
-        opacity: 1;
-      }
-
-      .close-btn:hover {
-        background: #dc3545;
-      }
-
-      .threads-btn:hover,
-      .new-search-btn:hover {
-        background: #2b65cf;
-        opacity: 0.8;
-      }
-
-      .threads-btn:active,
-      .new-search-btn:active {
-        background: #2b65cf;
-        opacity: 1;
-      }
-
-      .new-search-btn:disabled {
-        background: #808080;
-        cursor: not-allowed;
-        opacity: 0.5;
-      }
     }
   }
 
@@ -2524,12 +2659,6 @@ const chatSectionStyles = i$4 `
     gap: 25px;
   }
 
-  .chatbot-section.modal-view {
-    height: calc(100% - 93px);
-    padding: 0px 16px 16px;
-    gap: 16px;
-  }
-
   .chat-form {
     display: flex;
     align-items: center;
@@ -2578,10 +2707,6 @@ const chatSectionStyles = i$4 `
         cursor: unset;
       }
     }
-
-    button.modal {
-      right: 26px;
-    }
   }
 
   .messages {
@@ -2761,46 +2886,6 @@ const chatSectionStyles = i$4 `
     gap: 24px;
   }
 
-  .typing-dots {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-  }
-
-  .dot {
-    width: 6px;
-    height: 6px;
-    background-color: #b6b6b6;
-    border-radius: 50%;
-    animation: bounce 1.2s infinite ease-in-out;
-  }
-
-  .dot:nth-child(1) {
-    animation-delay: 0s;
-  }
-
-  .dot:nth-child(2) {
-    animation-delay: 0.2s;
-  }
-
-  .dot:nth-child(3) {
-    animation-delay: 0.4s;
-  }
-
-  @keyframes bounce {
-    0%,
-    80%,
-    100% {
-      transform: translateY(0);
-      background-color: #b6b6b6;
-    }
-    40% {
-      transform: translateY(-4px);
-      background-color: #8b8b8b;
-    }
-  }
-
   .prompts {
     display: flex;
     justify-content: center;
@@ -2828,170 +2913,45 @@ const chatSectionStyles = i$4 `
     }
   }
 
-  #modal-chat-threads {
-    .chat-threads {
-      position: absolute;
-      overflow: hidden;
-      z-index: 1;
-      top: 78px;
-      height: 30%;
-      width: 100%;
-      background: #fff;
-      box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12),
-        0px 20px 20px 0px rgba(0, 0, 0, 0.08);
-      border-radius: 0px 0px 10px 10px;
+  ${scrollBarStyles}
+`;
 
-      .title-wrapper {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-bottom: 1px solid #dbe2eb;
-        padding: 10px 16px;
+const capitalizeEachWord = (str) => {
+    return str === null || str === void 0 ? void 0 : str.replace(/^\w/, (char) => char.toUpperCase());
+};
+const adParams = new Set([
+    'fbclid',
+    'gclid',
+    'sccid',
+    'ttclid',
+    'epik',
+    'li_fat_id',
+    'twclid',
+    'rdt_cid',
+    'aleid',
+    'tabclid',
+    'msclkid',
+    'dclid',
+    'wbraid',
+]);
+const isFromAd = (params) => [...params.keys()].some((key) => adParams.has(key.toLowerCase()));
 
-        h2 {
-          color: #172a41;
-          font-size: 16px;
-          font-weight: 700;
-          line-height: 20px;
-        }
-      }
+const personalizeDialogStyles = i$4 `
+  :host {
+    font-family: 'Inter', sans-serif;
+    font-size: 16px;
+    font-weight: 400;
 
-      .thread-titles-wrapper {
-        overflow-y: auto;
-        height: calc(100% - 40px);
-      }
+    h2,
+    p {
+      margin: 0;
+    }
 
-      .thread-title {
-        display: flex;
-        justify-content: space-between;
-        padding: 10px 16px;
-        color: #4e647f;
-        cursor: pointer;
-
-        p {
-          font-size: 14px;
-          font-weight: 400;
-          line-height: 20px;
-        }
-
-        .trash-icon {
-          display: none;
-        }
-
-        &:hover {
-          background: #f1f4f8;
-
-          .trash-icon {
-            display: flex;
-          }
-        }
-      }
-
-      .thread-title.disabled {
-        cursor: not-allowed;
-      }
-    }
-
-    .trash-icon {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 2px;
-      cursor: pointer;
-
-      &:hover {
-        border-radius: 5px;
-        background: #dc3545;
-
-        path {
-          fill: white;
-        }
-      }
-    }
-
-    .chat-threads-background {
-      position: absolute;
-      top: 78px;
-      height: 100%;
-      width: 100%;
-      opacity: 0.5;
-      background: #000;
-      z-index: 0;
-    }
-  }
-
-  footer {
-    text-align: center;
-    font-size: 10px;
-    color: #4e647f;
-    font-weight: 500;
-
-    a {
-      text-decoration: none;
-    }
-  }
-
-  ${scrollBarStyles}
-`;
-
-const capitalizeEachWord = (str) => {
-    return str === null || str === void 0 ? void 0 : str.replace(/^\w/, (char) => char.toUpperCase());
-};
-const adParams = new Set([
-    'fbclid',
-    'gclid',
-    'sccid',
-    'ttclid',
-    'epik',
-    'li_fat_id',
-    'twclid',
-    'rdt_cid',
-    'aleid',
-    'tabclid',
-    'msclkid',
-    'dclid',
-    'wbraid',
-]);
-const isFromAd = (params) => [...params.keys()].some((key) => adParams.has(key.toLowerCase()));
-
-const plusBtn = b `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path d="M12.75 11.25V6H11.25V11.25H6V12.75H11.25V18H12.75V12.75H18V11.25H12.75Z" fill="white"/>
-</svg>`;
-const timerBtn = b `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.16652 20.7304C7.89323 21.8842 9.9233 22.5 12 22.5C14.7848 22.5 17.4555 21.3938 19.4246 19.4246C21.3938 17.4555 22.5 14.7848 22.5 12C22.5 9.9233 21.8842 7.89323 20.7304 6.16652C19.5767 4.4398 17.9368 3.09399 16.0182 2.29927C14.0996 1.50455 11.9884 1.29661 9.95156 1.70176C7.91476 2.1069 6.04383 3.10693 4.57538 4.57538C3.10693 6.04383 2.1069 7.91476 1.70176 9.95156C1.29661 11.9884 1.50455 14.0996 2.29927 16.0182C3.09399 17.9368 4.4398 19.5767 6.16652 20.7304ZM6.99987 4.51678C8.47992 3.52785 10.22 3 12 3C14.387 3 16.6761 3.94822 18.364 5.63604C20.0518 7.32387 21 9.61306 21 12C21 13.78 20.4722 15.5201 19.4832 17.0001C18.4943 18.4802 17.0887 19.6337 15.4442 20.3149C13.7996 20.9961 11.99 21.1743 10.2442 20.8271C8.49836 20.4798 6.89472 19.6226 5.63604 18.364C4.37737 17.1053 3.5202 15.5016 3.17294 13.7558C2.82567 12.01 3.0039 10.2004 3.68509 8.55585C4.36628 6.91132 5.51983 5.50571 6.99987 4.51678ZM11.25 12.3075L15.4425 16.5L16.5 15.4425L12.75 11.685V5.25H11.25V12.3075Z" fill="white"/>
-</svg>`;
-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 {
-    font-family: 'Inter', sans-serif;
-    font-size: 16px;
-    font-weight: 400;
-
-    h2,
-    p {
-      margin: 0;
-    }
-
-    button {
-      border-style: none;
-      cursor: pointer;
-    }
-  }
+    button {
+      border-style: none;
+      cursor: pointer;
+    }
+  }
 
   dialog::backdrop {
     background: rgba(0, 0, 0, 0.5);
@@ -3627,7 +3587,7 @@ class MarkdownRenderer extends i$1 {
 MarkdownRenderer.styles = i$4 `
     :host {
       font-family: 'Inter', sans-serif;
-      font-size: 16px;
+      font-size: 14px;
       font-weight: 400;
 
       p {
@@ -3643,131 +3603,11 @@ if (!customElements.get('markdown-renderer')) {
     customElements.define('markdown-renderer', MarkdownRenderer);
 }
 
-class TooltipComponent extends i$1 {
-    constructor() {
-        super(...arguments);
-        this.position = 'bottom-left';
-        this.text = '';
-    }
-    render() {
-        return x `
-      <slot></slot>
-      <div class="tooltip ${this.position}">${this.text}</div>
-    `;
-    }
-}
-TooltipComponent.styles = [
-    i$4 `
-      :host {
-        position: relative;
-        display: inline-block;
-      }
-
-      .tooltip {
-        position: absolute;
-        color: #172a41;
-        padding: 4px 8px;
-        white-space: nowrap;
-        font-size: 12px;
-        opacity: 0;
-        transition: opacity 0.2s;
-        pointer-events: none;
-
-        border-radius: 5px;
-        background: #ffcc81;
-        box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
-          0px 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-        font-style: normal;
-        font-weight: 400;
-        line-height: 150%;
-      }
-
-      :host(:hover) .tooltip {
-        opacity: 1;
-      }
-
-      .top-center {
-        bottom: calc(100% + 2px);
-        left: 50%;
-        transform: translateX(-50%);
-      }
-
-      .top-left {
-        bottom: calc(100% + 2px);
-        left: 0;
-      }
-
-      .top-right {
-        bottom: calc(100% + 2px);
-        right: 0;
-      }
-
-      .bottom-center {
-        top: calc(100% + 2px);
-        left: 50%;
-        transform: translateX(-50%);
-      }
-
-      .bottom-left {
-        top: calc(100% + 2px);
-        left: 0;
-      }
-
-      .bottom-right {
-        top: calc(100% + 2px);
-        right: 0;
-      }
-
-      .left-center {
-        right: calc(100% + 2px);
-        top: 50%;
-        transform: translateY(-50%);
-      }
-
-      .left-top {
-        right: calc(100% + 2px);
-        top: 0;
-      }
-
-      .left-bottom {
-        right: calc(100% + 2px);
-        bottom: 0;
-      }
-
-      .right-center {
-        left: calc(100% + 2px);
-        top: 50%;
-        transform: translateY(-50%);
-      }
-
-      .right-top {
-        left: calc(100% + 2px);
-        top: 0;
-      }
-
-      .right-bottom {
-        left: calc(100% + 2px);
-        bottom: 0;
-      }
-    `,
-];
-__decorate([
-    n({ type: String }),
-    __metadata("design:type", String)
-], TooltipComponent.prototype, "position", void 0);
-__decorate([
-    n({ type: String }),
-    __metadata("design:type", Object)
-], TooltipComponent.prototype, "text", void 0);
-if (!customElements.get('tooltip-component')) {
-    customElements.define('tooltip-component', TooltipComponent);
-}
-
-const confirmDialogStyles = i$4 `
+const feedbackDialogStyles = i$4 `
   :host {
     font-family: 'Inter', sans-serif;
     font-size: 16px;
+    line-height: 24px;
     font-weight: 400;
 
     display: flex;
@@ -3781,141 +3621,22 @@ const confirmDialogStyles = i$4 `
 
   .modal {
     width: 75%;
-    max-width: 350px;
+    max-width: 400px;
     background: #fff;
-    padding: 16px;
+    padding: 24px;
     margin: auto;
 
-    border-radius: 10px;
-    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12),
-      0px 20px 20px 0px rgba(0, 0, 0, 0.08);
+    border-radius: 8px;
+    box-shadow: rgba(47, 43, 61, 0.28) 0px 8px 23px 0px;
 
     z-index: 2000;
   }
 
-  ::slotted([slot='title']) {
-    margin-bottom: 8px !important;
-    color: #172a41;
-    font-size: 18px;
-    font-weight: 700;
-    line-height: 150%;
-  }
-
-  ::slotted([slot='content']) {
-    color: #4e647f;
-    line-height: 150%;
-  }
-
-  .button-wrapper {
-    margin-top: 12px;
-    display: flex;
-    gap: 12px;
-
-    .btn {
-      justify-self: stretch;
-      padding: 10px;
-      cursor: pointer;
-      text-align: center;
-      width: 100%;
-      border: 0;
-      color: #fff;
-      line-height: 150%;
-      text-transform: capitalize;
-    }
-
-    .accept-btn {
-      border-radius: 5px;
-      background: #dc3545;
-
-      &:hover {
-        background: rgb(176, 62, 25);
-      }
-    }
-
-    .decline-btn {
-      border-radius: 5px;
-      background: #4e647f;
-
-      &:hover {
-        background: rgb(57, 77, 102);
-      }
-    }
-  }
-`;
-
-class ConfirmDialog extends i$1 {
-    onAcceptClick(e) {
-        e.preventDefault();
-        this.dispatchEvent(new CustomEvent('accept', {
-            composed: true,
-        }));
-    }
-    onCancelClick(e) {
-        e.preventDefault();
-        this.dispatchEvent(new CustomEvent('decline', {
-            composed: true,
-        }));
-    }
-    render() {
-        return x `
-      <div class="modal">
-        <slot name="title"></slot>
-        <slot name="content"></slot>
-        <div class="button-wrapper">
-          <slot name="accept-btn">
-            <button class="btn accept-btn" @click=${this.onAcceptClick}>
-              Delete
-            </button>
-          </slot>
-          <slot name="decline-btn">
-            <button class="btn decline-btn" @click=${this.onCancelClick}>
-              Cancel
-            </button>
-          </slot>
-        </div>
-      </div>
-    `;
-    }
-}
-ConfirmDialog.styles = [confirmDialogStyles];
-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;
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
   }
 
   .close {
@@ -4098,11 +3819,80 @@ if (!customElements.get('feedback-dialog')) {
     customElements.define('feedback-dialog', FeedbackDialog);
 }
 
+class TypingIndicator extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.position = 'bottom-left';
+        this.text = '';
+    }
+    render() {
+        return x `
+      <div class="typing-dots">
+        <div class="dot"></div>
+        <div class="dot"></div>
+        <div class="dot"></div>
+      </div>
+    `;
+    }
+}
+TypingIndicator.styles = [
+    i$4 `
+      .typing-dots {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+      }
+
+      .dot {
+        width: 6px;
+        height: 6px;
+        background-color: #b6b6b6;
+        border-radius: 50%;
+        animation: bounce 1.2s infinite ease-in-out;
+      }
+
+      .dot:nth-child(1) {
+        animation-delay: 0s;
+      }
+
+      .dot:nth-child(2) {
+        animation-delay: 0.2s;
+      }
+
+      .dot:nth-child(3) {
+        animation-delay: 0.4s;
+      }
+
+      @keyframes bounce {
+        0%,
+        80%,
+        100% {
+          transform: translateY(0);
+          background-color: #b6b6b6;
+        }
+        40% {
+          transform: translateY(-4px);
+          background-color: #8b8b8b;
+        }
+      }
+    `,
+];
+__decorate([
+    n({ type: String }),
+    __metadata("design:type", String)
+], TypingIndicator.prototype, "position", void 0);
+__decorate([
+    n({ type: String }),
+    __metadata("design:type", Object)
+], TypingIndicator.prototype, "text", void 0);
+if (!customElements.get('typing-indicator')) {
+    customElements.define('typing-indicator', TypingIndicator);
+}
+
 class ChatSection extends i$1 {
     constructor() {
         super(...arguments);
-        this.showChatThreads = false;
-        this.deleteAllThreads = false;
         this.userQuery = '';
         this.isStylesheetInjected = false;
     }
@@ -4143,25 +3933,6 @@ class ChatSection extends i$1 {
         this.userQuery = '';
         await this.processMessage(e, message, false);
     }
-    handleThreadDelete() {
-        if (this.deleteAllThreads) {
-            this.dispatchEvent(new CustomEvent('delete-all-threads', {
-                composed: true,
-                bubbles: true,
-            }));
-            this.deleteAllThreads = false;
-            return;
-        }
-        if (!this.deleteThreadId) {
-            return;
-        }
-        this.dispatchEvent(new CustomEvent('delete-thread', {
-            detail: { threadId: this.deleteThreadId },
-            composed: true,
-            bubbles: true,
-        }));
-        this.deleteThreadId = '';
-    }
     handleFeedback(rating, messageId, queryMessageId, comment, query, response) {
         var _a, _b, _c, _d;
         if (rating === 'bad') {
@@ -4203,13 +3974,6 @@ class ChatSection extends i$1 {
             bubbles: true,
         }));
     }
-    typingIndicator() {
-        return x ` <div class="typing-dots">
-      <div class="dot"></div>
-      <div class="dot"></div>
-      <div class="dot"></div>
-    </div>`;
-    }
     botMessage(message, index) {
         var _a, _b, _c, _d, _e;
         const queryMessage = this.messages[index + 1];
@@ -4223,7 +3987,7 @@ class ChatSection extends i$1 {
                   .content=${message.message}
                 ></markdown-renderer>`
             : E}
-            ${this.viewType !== 'modal' && ((_a = message.products) === null || _a === void 0 ? void 0 : _a[0])
+            ${((_a = message.products) === null || _a === void 0 ? void 0 : _a[0])
             ? x `
                   <span class="line"></span>
                   <div class="product-container">
@@ -4240,16 +4004,6 @@ class ChatSection extends i$1 {
             : E}
           </div>
         </div>
-        ${this.viewType === 'modal' && message.products
-            ? x ` <products-list
-              .query=${queryMessage === null || queryMessage === void 0 ? void 0 : queryMessage.message}
-              .response=${message.message}
-              .products=${message.products}
-              .siteCurrency=${this.siteCurrency}
-              .viewType=${this.viewType}
-              .userId=${this.userId}
-            ></products-list>`
-            : E}
         ${message.messageId && (queryMessage === null || queryMessage === void 0 ? void 0 : queryMessage.messageId)
             ? x ` <div class="bot-response-actions">
               <button
@@ -4279,7 +4033,7 @@ class ChatSection extends i$1 {
         <img src=${this.botIconUrl} width="30" height="30" />
       </div>`;
         }
-        return x ` <div class="bot-icon">${botIcon}</div> `;
+        return x ` <div class="bot-icon">${botIcon()}</div> `;
     }
     chatWindow() {
         if (this.isLoadingHistory || this.isLoadingThreads) {
@@ -4291,13 +4045,1230 @@ class ChatSection extends i$1 {
       <div class="messages">
         ${this.isTyping
             ? x ` <div class="message bot">
-              <div>${this.renderBotIcon()}</div>
-              ${this.typingIndicator()}
+              <div>${this.renderBotIcon()}</div>
+              <typing-indicator></typing-indicator>
+            </div>`
+            : ''}
+        ${this.isFailed
+            ? x ` <div class="message bot">
+              <div>${this.renderBotIcon()}</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}
+        ${o$1(this.messages, (message, index) => {
+            if (message.sender === 'bot') {
+                return this.botMessage(message, index);
+            }
+            return x ` <div class="message user">${message.message}</div> `;
+        })}
+        ${!this.welcomeFlowTriggered || !this.thread
+            ? x `
+            <div class="message bot">
+              <div>${this.renderBotIcon()}</div>
+              <div>
+                <p>
+                  Hi,
+                  ${this.brandName
+                ? x `Welcome to ${this.brandName}.`
+                : E}
+                  I'm here to help you find the perfect product. Pick a suggested
+                  prompt from below, or enter your own query.
+                </p>
+              </div>
+            </div>
+            </div>`
+            : E}
+      </div>
+    `;
+    }
+    renderPrompts() {
+        var _a;
+        if (this.isLoadingHistory || this.isStreaming || this.isLoadingThreads) {
+            return E;
+        }
+        const latestMessage = this.messages[0];
+        const isWelcomeMessage = this.messages.length === 1 && (latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.sender) === 'bot';
+        const isLLMPrompt = !!((_a = latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.prompts) === null || _a === void 0 ? void 0 : _a.length);
+        const prompts = this.messages.length
+            ? this.messages[0].prompts
+            : this.prompts
+                ? this.prompts.split(',').map((prompt) => prompt.trim())
+                : ['Best Sellers'];
+        const customPrompts = !this.messages.length || isWelcomeMessage ? this.customPrompts : undefined;
+        if (!prompts && !customPrompts) {
+            return E;
+        }
+        return x `
+      <div class="prompts btn">
+        ${o$1(prompts, (prompt) => {
+            return x `
+            <div
+              class="prompt"
+              @click=${(e) => {
+                this.processMessage(e, prompt, true);
+                const eventName = isLLMPrompt
+                    ? 'customPromptClicked'
+                    : 'promptClicked';
+                this.sendEvent(eventName, undefined, {
+                    promptName: prompt,
+                });
+            }}
+            >
+              ${prompt}
+            </div>
+          `;
+        })}
+        ${o$1(customPrompts, ({ prompt, link }) => {
+            return x `
+            <a
+              class="prompt"
+              href=${link}
+              target="_blank"
+              rel="noopener"
+              @click=${() => this.sendEvent('promptClicked', undefined, {
+                promptName: prompt,
+            })}
+            >
+              ${prompt}
+            </a>
+          `;
+        })}
+      </div>
+    `;
+    }
+    showContext() {
+        var _a;
+        if (!((_a = this.thread) === null || _a === void 0 ? void 0 : _a.devContext)) {
+            return x `
+        <div class="context-container">
+          <div class="context-title">
+            <p>Context</p>
+            <div
+              class="btn"
+              @click=${() => {
+                if (!this.contextContainerElement) {
+                    return;
+                }
+                this.contextContainerElement.classList.remove('show');
+            }}
+            >
+              ${closeBtn}
+            </div>
+          </div>
+          <p>
+            This search thread has no pre-defined context. Start a new search to
+            personalize.
+          </p>
+        </div>
+      `;
+        }
+        const devContext = this.thread.devContext;
+        const profileType = devContext.email
+            ? 'Pick your profile'
+            : 'Stay Anonymous';
+        const userDetails = devContext.email
+            ? `${capitalizeEachWord(devContext.firstName)} / ${capitalizeEachWord(devContext.gender)} / ${devContext.city} / ${devContext.state ? `- ${capitalizeEachWord(devContext.state)}` : ''} - ${devContext.preferences
+                ? `${devContext.preferences.size},${capitalizeEachWord(devContext.preferences.color)},${capitalizeEachWord(devContext.preferences.material)}`
+                : ''}`
+            : '';
+        const visitationType = devContext.productHandle ? 'Via Ad' : 'Direct Visit';
+        return x `
+      <div class="context-container">
+        <div class="context-title">
+          <p>Context</p>
+          <div
+            class="btn"
+            @click=${() => {
+            var _a;
+            (_a = this.contextContainerElement) === null || _a === void 0 ? void 0 : _a.classList.remove('show');
+        }}
+          >
+            ${closeBtn}
+          </div>
+        </div>
+        <div>
+          <div class="context">
+            <span>Profile Type:</span>${' '}
+            <span class="context-type-value"> ${profileType} </span>
+          </div>
+          ${userDetails
+            ? x ` <div class="context user-details">${userDetails}</div>`
+            : E}
+        </div>
+        <div>
+          <div class="context">
+            <span>Visitation Context:</span>${' '}
+            <span class="context-type-value">${visitationType}</span>
+          </div>
+          ${devContext.productHandle
+            ? x ` <div class="context product-handle">
+                ${devContext.productHandle}
+              </div>`
+            : E}
+        </div>
+      </div>
+    `;
+    }
+    contextButton() {
+        var _a, _b, _c, _d;
+        if (!this.devMode) {
+            return ((_a = this.thread) === null || _a === void 0 ? void 0 : _a.threadId)
+                ? x `<h2>${((_b = this.thread) === null || _b === void 0 ? void 0 : _b.title) || 'New Search'}</h2>`
+                : x `<h2>New Search</h2>`;
+        }
+        if ((_c = this.thread) === null || _c === void 0 ? void 0 : _c.threadId) {
+            return x `
+        <h2>${((_d = this.thread) === null || _d === void 0 ? void 0 : _d.title) || 'New Search'}</h2>
+        <button
+          class="btn-context btn"
+          @click=${() => {
+                if (!this.contextContainerElement) {
+                    return;
+                }
+                this.contextContainerElement.classList.toggle('show');
+            }}
+        >
+          SHOW CONTEXT
+        </button>
+        ${this.showContext()}
+      `;
+        }
+        return x `
+      <h2>Click personalize for hyper Contextual</h2>
+      <button
+        class="btn-context active btn"
+        @click=${() => this.personalizeDialogElement.showModal()}
+      >
+        Personalize
+      </button>
+    `;
+    }
+    render() {
+        if (this.merchantImage) {
+            // set the merchant image as a css variable
+            this.style.setProperty('--shopgpt-merchant-img-url', `url('${this.merchantImage}')`);
+        }
+        else {
+            this.style.removeProperty('--shopgpt-merchant-img-url');
+        }
+        return x `
+      <div class="chat-header">${this.contextButton()}</div>
+      <div class="chatbot-section">
+        ${this.chatWindow()} ${this.renderPrompts()}
+        <form class="chat-form" @submit=${this.onSubmit}>
+          <input
+            type="text"
+            .value=${this.userQuery}
+            @input=${(e) => (this.userQuery = e.target.value)}
+            placeholder="Type your search here..."
+          />
+          <button
+            class="btn"
+            type="submit"
+            ?disabled=${this.isStreaming || this.isLoadingHistory}
+          >
+            ${sendFilledIcon}
+          </button>
+        </form>
+      </div>
+      <personalize-dialog
+        .createChatThread=${this.createChatThread.bind(this)}
+        .defaultProductHandles=${this.productHandles}
+        .defaultProfiles=${this.profiles}
+      ></personalize-dialog>
+      ${this.feedbackDetails
+            ? x `
+            <feedback-dialog
+              .messageId=${this.feedbackDetails.messageId}
+              .queryMessageId=${this.feedbackDetails.queryMessageId}
+              .threadId=${this.feedbackDetails.threadId}
+              .comment=${this.feedbackDetails.comment}
+              @submit-feedback=${() => {
+                this.feedbackDetails = undefined;
+            }}
+              @close=${(e) => {
+                e.stopPropagation();
+                this.feedbackDetails = undefined;
+            }}
+            ></feedback-dialog>
+          `
+            : E}
+    `;
+    }
+}
+ChatSection.styles = [chatSectionStyles$1];
+__decorate([
+    n({ type: String }),
+    __metadata("design:type", Object)
+], ChatSection.prototype, "merchantImage", void 0);
+__decorate([
+    n({ type: String }),
+    __metadata("design:type", Object)
+], ChatSection.prototype, "botIconUrl", void 0);
+__decorate([
+    n({ type: String }),
+    __metadata("design:type", Object)
+], ChatSection.prototype, "brandName", void 0);
+__decorate([
+    n({ type: String }),
+    __metadata("design:type", Object)
+], ChatSection.prototype, "prompts", void 0);
+__decorate([
+    n({ type: Array }),
+    __metadata("design:type", Object)
+], ChatSection.prototype, "customPrompts", void 0);
+__decorate([
+    n({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], ChatSection.prototype, "isLoadingThreads", void 0);
+__decorate([
+    n({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], ChatSection.prototype, "isLoadingHistory", void 0);
+__decorate([
+    n({ type: Boolean }),
+    __metadata("design:type", Object)
+], ChatSection.prototype, "devMode", void 0);
+__decorate([
+    n({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], ChatSection.prototype, "isTyping", void 0);
+__decorate([
+    n({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], ChatSection.prototype, "isStreaming", void 0);
+__decorate([
+    n({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], ChatSection.prototype, "isFailed", void 0);
+__decorate([
+    n({ type: Array }),
+    __metadata("design:type", Array)
+], ChatSection.prototype, "messages", void 0);
+__decorate([
+    n({ type: Array }),
+    __metadata("design:type", Array)
+], ChatSection.prototype, "profiles", void 0);
+__decorate([
+    n({ type: Array }),
+    __metadata("design:type", Array)
+], ChatSection.prototype, "productHandles", void 0);
+__decorate([
+    n({ type: Object }),
+    __metadata("design:type", Object)
+], ChatSection.prototype, "thread", void 0);
+__decorate([
+    n({ type: Object }),
+    __metadata("design:type", Object)
+], ChatSection.prototype, "siteCurrency", void 0);
+__decorate([
+    e$3('.context-container'),
+    __metadata("design:type", Object)
+], ChatSection.prototype, "contextContainerElement", void 0);
+__decorate([
+    e$3('.chat-window'),
+    __metadata("design:type", Object)
+], ChatSection.prototype, "chatWindowElement", void 0);
+__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)
+], ChatSection.prototype, "userQuery", void 0);
+__decorate([
+    n({ type: String }),
+    __metadata("design:type", String)
+], ChatSection.prototype, "css", void 0);
+__decorate([
+    n({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], ChatSection.prototype, "welcomeFlowTriggered", void 0);
+__decorate([
+    n({ type: String }),
+    __metadata("design:type", String)
+], ChatSection.prototype, "userId", void 0);
+if (!customElements.get('chat-section')) {
+    customElements.define('chat-section', ChatSection);
+}
+
+const chatSectionStyles = i$4 `
+  :host {
+    font-family: 'Inter', sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+
+    h2,
+    p {
+      margin: 0;
+    }
+
+    button {
+      border-style: none;
+      cursor: pointer;
+    }
+  }
+
+  .btn {
+    cursor: pointer;
+  }
+
+  .chat-header {
+    padding: 15px 19px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #020617;
+    gap: 8px;
+    height: 60px;
+    box-sizing: border-box;
+
+    h2 {
+      color: #ffffff;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+      text-transform: capitalize;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .btns-wrapper {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+      gap: 20px;
+
+      .btn-icon {
+        border-radius: 50%;
+        padding: 0;
+        background: transparent;
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 24px;
+        width: 24px;
+        opacity: 1;
+
+        &:hover {
+          opacity: 0.7;
+        }
+
+        &.active {
+          opacity: 1;
+        }
+
+        &:disabled {
+          cursor: not-allowed;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+
+  .chatbot-section {
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    height: calc(100% - 73px);
+    padding: 0px 20px 13px;
+    gap: 11px;
+  }
+
+  .chat-form {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    position: relative;
+
+    .sparkles-icon {
+      position: absolute;
+      left: 15px;
+      top: 50%;
+      transform: translateY(-50%);
+      pointer-events: none;
+      transition: opacity 0.2s;
+    }
+
+    input {
+      flex: 1;
+      padding: 10px 38px 12px 35px;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 20px;
+      color: #201d2f;
+
+      background: #fff;
+      border-radius: 6px;
+      border: 0.5px solid #bbbbce;
+      box-shadow: 0px 4px 10px 0px #0000000d;
+
+      &:focus {
+        outline-width: 0;
+      }
+
+      &::placeholder {
+        font-weight: 400;
+        font-size: 14px;
+        color: #94a3b8;
+      }
+    }
+
+    .send-btn {
+      position: absolute;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      right: 11px;
+      background-color: unset;
+
+      &:disabled {
+        opacity: 0.3;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .chat-welcome {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+
+    .bot-icon {
+      border-radius: 50px;
+      width: 100px;
+      height: 100px;
+    }
+
+    .welcome-title {
+      font-weight: 700;
+      font-style: normal;
+      font-size: 36px;
+      line-height: 100%;
+      text-align: center;
+      color: #020617;
+      margin-bottom: 8px;
+    }
+
+    .welcome-message {
+      font-style: normal;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+      text-align: center;
+      color: #64748b;
+      margin: 0 32px 8px;
+    }
+  }
+
+  .messages {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 12px;
+    padding-bottom: 10px;
+    margin-bottom: -10px;
+    margin-right: -10px;
+    padding-right: 10px;
+    margin-left: -10px;
+    padding-left: 10px;
+    background: linear-gradient(#f7f8fa80, #f7f8fa80),
+      var(--shopgpt-merchant-img-url);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+
+    &.loading {
+      justify-content: center;
+      align-items: center;
+    }
+
+    .message:last-child {
+      margin-top: 10px;
+    }
+  }
+
+  .message-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-bottom: 10px;
+  }
+
+  .message {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .message.user {
+    background: #18181b;
+    color: #fafafa;
+    max-width: 75%;
+    align-self: flex-end;
+    padding: 8px 12px;
+    border-radius: 6px;
+  }
+
+  .message.bot {
+    display: flex;
+    gap: 16px;
+    color: #000000;
+    max-width: 80%;
+  }
+
+  .bot-response-actions {
+    display: flex;
+    gap: 20px;
+    margin-top: -2px;
+
+    button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      padding: 0px;
+
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+  }
+
+  .bot-icon {
+    display: flex;
+    padding: 8px 11px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 70px;
+    border: 1px solid #dbe2eb;
+    background: #fff;
+    width: 36px;
+    height: 36px;
+    box-sizing: border-box;
+  }
+
+  .prompts {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    flex-wrap: wrap;
+
+    .prompt {
+      padding: 8px 12px;
+      border-radius: 6px;
+      border: 1px solid #e4e4e7;
+      text-decoration: none;
+      white-space: nowrap;
+      display: inline-flex;
+
+      color: #18181b;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+
+      &:hover {
+        opacity: 0.7;
+      }
+
+      &:active {
+        opacity: 1;
+      }
+    }
+
+    &.left-align {
+      justify-content: flex-start;
+    }
+  }
+
+  #modal-chat-threads {
+    .chat-threads {
+      position: absolute;
+      overflow: hidden;
+      z-index: 1;
+      top: 60px;
+      height: 30%;
+      width: 100%;
+      background: #fff;
+      box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12),
+        0px 20px 20px 0px rgba(0, 0, 0, 0.08);
+      border-radius: 0px 0px 10px 10px;
+
+      .title-wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid #dbe2eb;
+        padding: 10px 16px;
+
+        h2 {
+          color: #172a41;
+          font-size: 16px;
+          font-weight: 700;
+          line-height: 20px;
+        }
+      }
+
+      .thread-titles-wrapper {
+        overflow-y: auto;
+        height: calc(100% - 40px);
+      }
+
+      .thread-title {
+        display: flex;
+        justify-content: space-between;
+        padding: 10px 16px;
+        color: #4e647f;
+        cursor: pointer;
+
+        p {
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 20px;
+          width: 100%;
+        }
+
+        .trash-icon {
+          display: none;
+        }
+
+        &:hover {
+          background: #f1f4f8;
+
+          .trash-icon {
+            display: flex;
+          }
+        }
+      }
+
+      .thread-title.disabled {
+        cursor: not-allowed;
+      }
+    }
+
+    .trash-icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 2px;
+      cursor: pointer;
+
+      &:hover {
+        border-radius: 5px;
+        background: #dc3545;
+
+        path {
+          fill: white;
+        }
+      }
+    }
+
+    .chat-threads-background {
+      position: absolute;
+      top: 78px;
+      height: 100%;
+      width: 100%;
+      opacity: 0.5;
+      background: #000;
+      z-index: 0;
+    }
+  }
+
+  footer {
+    text-align: center;
+    font-size: 12px;
+    line-height: 16px;
+    color: #64748b;
+    font-weight: 500;
+
+    a {
+      color: #ef4444;
+      text-decoration: none;
+    }
+  }
+
+  ${scrollBarStyles}
+`;
+
+class TooltipComponent extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.position = 'bottom-left';
+        this.text = '';
+    }
+    render() {
+        return x `
+      <slot></slot>
+      <div class="tooltip ${this.position}">${this.text}</div>
+    `;
+    }
+}
+TooltipComponent.styles = [
+    i$4 `
+      :host {
+        position: relative;
+        display: inline-block;
+      }
+
+      .tooltip {
+        position: absolute;
+        color: #172a41;
+        padding: 4px 8px;
+        white-space: nowrap;
+        font-size: 12px;
+        opacity: 0;
+        transition: opacity 0.2s;
+        pointer-events: none;
+
+        border-radius: 5px;
+        background: #fff;
+
+        font-style: normal;
+        font-weight: 400;
+        line-height: 150%;
+      }
+
+      :host(:hover) .tooltip {
+        opacity: 1;
+      }
+
+      .top-center {
+        bottom: calc(100% + 2px);
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      .top-left {
+        bottom: calc(100% + 2px);
+        left: 0;
+      }
+
+      .top-right {
+        bottom: calc(100% + 2px);
+        right: 0;
+      }
+
+      .bottom-center {
+        top: calc(100% + 2px);
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      .bottom-left {
+        top: calc(100% + 2px);
+        left: 0;
+      }
+
+      .bottom-right {
+        top: calc(100% + 2px);
+        right: 0;
+      }
+
+      .left-center {
+        right: calc(100% + 2px);
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      .left-top {
+        right: calc(100% + 2px);
+        top: 0;
+      }
+
+      .left-bottom {
+        right: calc(100% + 2px);
+        bottom: 0;
+      }
+
+      .right-center {
+        left: calc(100% + 2px);
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      .right-top {
+        left: calc(100% + 2px);
+        top: 0;
+      }
+
+      .right-bottom {
+        left: calc(100% + 2px);
+        bottom: 0;
+      }
+    `,
+];
+__decorate([
+    n({ type: String }),
+    __metadata("design:type", String)
+], TooltipComponent.prototype, "position", void 0);
+__decorate([
+    n({ type: String }),
+    __metadata("design:type", Object)
+], TooltipComponent.prototype, "text", void 0);
+if (!customElements.get('tooltip-component')) {
+    customElements.define('tooltip-component', TooltipComponent);
+}
+
+const confirmDialogStyles = i$4 `
+  :host {
+    font-family: 'Inter', sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #00000050;
+  }
+
+  .modal {
+    width: 75%;
+    max-width: 350px;
+    background: #fff;
+    padding: 16px;
+    margin: auto;
+
+    border-radius: 10px;
+    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12),
+      0px 20px 20px 0px rgba(0, 0, 0, 0.08);
+
+    z-index: 2000;
+  }
+
+  ::slotted([slot='title']) {
+    margin-bottom: 8px !important;
+    color: #172a41;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 150%;
+  }
+
+  ::slotted([slot='content']) {
+    color: #4e647f;
+    line-height: 150%;
+  }
+
+  .button-wrapper {
+    margin-top: 12px;
+    display: flex;
+    gap: 12px;
+
+    .btn {
+      justify-self: stretch;
+      padding: 10px;
+      cursor: pointer;
+      text-align: center;
+      width: 100%;
+      border: 0;
+      color: #fff;
+      line-height: 150%;
+      text-transform: capitalize;
+    }
+
+    .accept-btn {
+      border-radius: 5px;
+      background: #dc3545;
+
+      &:hover {
+        background: rgb(176, 62, 25);
+      }
+    }
+
+    .decline-btn {
+      border-radius: 5px;
+      background: #4e647f;
+
+      &:hover {
+        background: rgb(57, 77, 102);
+      }
+    }
+  }
+`;
+
+class ConfirmDialog extends i$1 {
+    onAcceptClick(e) {
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('accept', {
+            composed: true,
+        }));
+    }
+    onCancelClick(e) {
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('decline', {
+            composed: true,
+        }));
+    }
+    render() {
+        return x `
+      <div class="modal">
+        <slot name="title"></slot>
+        <slot name="content"></slot>
+        <div class="button-wrapper">
+          <slot name="accept-btn">
+            <button class="btn accept-btn" @click=${this.onAcceptClick}>
+              Delete
+            </button>
+          </slot>
+          <slot name="decline-btn">
+            <button class="btn decline-btn" @click=${this.onCancelClick}>
+              Cancel
+            </button>
+          </slot>
+        </div>
+      </div>
+    `;
+    }
+}
+ConfirmDialog.styles = [confirmDialogStyles];
+if (!customElements.get('confirm-dialog')) {
+    customElements.define('confirm-dialog', ConfirmDialog);
+}
+
+const chatbotIcon = b `<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13.9999 6.99999V2.33333H9.33325M2.33325 14H4.66659M10.4999 12.8333V15.1667M17.4999 12.8333V15.1667M23.3333 14H25.6666M9.33325 21L4.66659 25.6667V9.33333C4.66659 8.71449 4.91242 8.121 5.35 7.68341C5.78759 7.24583 6.38108 6.99999 6.99992 6.99999H20.9999C21.6188 6.99999 22.2122 7.24583 22.6498 7.68341C23.0874 8.121 23.3333 8.71449 23.3333 9.33333V18.6667C23.3333 19.2855 23.0874 19.879 22.6498 20.3166C22.2122 20.7542 21.6188 21 20.9999 21H9.33325Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+class ChatbotIcon extends i$1 {
+    render() {
+        return x ` <div class="chatbot-icon">${chatbotIcon}</div> `;
+    }
+}
+ChatbotIcon.styles = [
+    i$4 `
+      .chatbot-icon {
+        border: none;
+        cursor: pointer;
+        width: 60px;
+        height: 58px;
+        background-color: #020617;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        box-shadow: 0px 10px 10px -5px #0000000a;
+      }
+    `,
+];
+if (!customElements.get('chatbot-icon')) {
+    customElements.define('chatbot-icon', ChatbotIcon);
+}
+
+class PopupView extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.showChatThreads = false;
+        this.deleteAllThreads = false;
+        this.userQuery = '';
+        this.isStylesheetInjected = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.injectCustomCSS();
+    }
+    injectCustomCSS() {
+        if (!this.isStylesheetInjected && this.css) {
+            const sheet = new CSSStyleSheet();
+            sheet.replaceSync(this.css);
+            this.shadowRoot.adoptedStyleSheets.push(sheet);
+            this.isStylesheetInjected = true;
+        }
+    }
+    scrollToBottom() {
+        var _a;
+        (_a = this.chatWindowElement) === null || _a === void 0 ? void 0 : _a.scrollTo({
+            top: this.chatWindowElement.scrollHeight,
+            behavior: 'smooth',
+        });
+    }
+    async processMessage(e, message, isPrompt = false) {
+        this.scrollToBottom();
+        if (!this.thread) {
+            await this.createChatThread({ title: '' }, false);
+        }
+        await this.sendMessageToServer(e, message, isPrompt);
+    }
+    sendEvent(action, actionData, clickData) {
+        this.dispatchEvent(new CustomEvent('send-event', {
+            detail: { action, actionData, clickData },
+            composed: true,
+            bubbles: true,
+        }));
+    }
+    async onSubmit(e) {
+        var _a;
+        e.preventDefault();
+        const message = (_a = this.userQuery) === null || _a === void 0 ? void 0 : _a.trim();
+        this.userQuery = '';
+        await this.processMessage(e, message, false);
+    }
+    handleThreadDelete() {
+        if (this.deleteAllThreads) {
+            this.dispatchEvent(new CustomEvent('delete-all-threads', {
+                composed: true,
+                bubbles: true,
+            }));
+            this.deleteAllThreads = false;
+            return;
+        }
+        if (!this.deleteThreadId) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('delete-thread', {
+            detail: { threadId: this.deleteThreadId },
+            composed: true,
+            bubbles: true,
+        }));
+        this.deleteThreadId = '';
+    }
+    handleFeedback(rating, messageId, queryMessageId, comment, query, response) {
+        var _a, _b, _c, _d;
+        if (rating === 'bad') {
+            this.sendEvent('thumbsDown', undefined, {
+                messageId,
+                threadId: ((_a = this.thread) === null || _a === void 0 ? void 0 : _a.threadId) || '',
+                rating,
+                comment: comment !== null && comment !== void 0 ? comment : '',
+                query: query !== null && query !== void 0 ? query : '',
+                response: response !== null && response !== void 0 ? response : '',
+            });
+            this.feedbackDetails = {
+                messageId,
+                queryMessageId,
+                threadId: ((_b = this.thread) === null || _b === void 0 ? void 0 : _b.threadId) || '',
+                comment,
+            };
+            return;
+        }
+        this.sendEvent('thumbsUp', undefined, {
+            messageId,
+            threadId: ((_c = this.thread) === null || _c === void 0 ? void 0 : _c.threadId) || '',
+            rating,
+            comment: comment !== null && comment !== void 0 ? comment : '',
+            query: query !== null && query !== void 0 ? query : '',
+            response: response !== null && response !== void 0 ? response : '',
+        });
+        this.dispatchEvent(new CustomEvent('submit-feedback', {
+            detail: {
+                messageId: messageId,
+                queryMessageId: queryMessageId,
+                threadId: (_d = this.thread) === null || _d === void 0 ? void 0 : _d.threadId,
+                feedback: {
+                    rating,
+                    comment: null,
+                },
+            },
+            composed: true,
+            bubbles: true,
+        }));
+    }
+    botMessage(message, index) {
+        var _a, _b, _c, _d;
+        const queryMessage = this.messages[index + 1];
+        return x `
+      <div class="message-wrapper">
+        <div class="message bot">
+          <div>
+            ${message.message
+            ? x ` <markdown-renderer
+                  .content=${message.message}
+                ></markdown-renderer>`
+            : E}
+          </div>
+        </div>
+        ${message.products
+            ? x ` <products-list
+              .query=${queryMessage === null || queryMessage === void 0 ? void 0 : queryMessage.message}
+              .response=${message.message}
+              .products=${message.products}
+              .siteCurrency=${this.siteCurrency}
+              .viewType=${this.viewType}
+              .userId=${this.userId}
+            ></products-list>`
+            : E}
+        ${message.messageId && (queryMessage === null || queryMessage === void 0 ? void 0 : queryMessage.messageId)
+            ? x ` <div class="bot-response-actions">
+              <button
+                type="button"
+                @click=${this.handleFeedback.bind(this, 'good', message.messageId, queryMessage === null || queryMessage === void 0 ? void 0 : queryMessage.messageId, (_a = message.feedback) === null || _a === void 0 ? void 0 : _a.comment, queryMessage === null || queryMessage === void 0 ? void 0 : queryMessage.message, message === null || message === void 0 ? void 0 : message.message)}
+              >
+                ${((_b = message.feedback) === null || _b === void 0 ? void 0 : _b.rating) === 'good'
+                ? thumbsUpFilledBtn
+                : thumbsUpBtn}
+              </button>
+              <button
+                type="button"
+                @click=${this.handleFeedback.bind(this, 'bad', message.messageId, queryMessage === null || queryMessage === void 0 ? void 0 : queryMessage.messageId, (_c = message.feedback) === null || _c === void 0 ? void 0 : _c.comment, queryMessage === null || queryMessage === void 0 ? void 0 : queryMessage.message, message === null || message === void 0 ? void 0 : message.message)}
+              >
+                ${((_d = message.feedback) === null || _d === void 0 ? void 0 : _d.rating) === 'bad'
+                ? thumbsDownFilledBtn
+                : thumbsDownBtn}
+              </button>
+            </div>`
+            : E}
+        ${index === 0 ? this.renderPrompts() : E}
+      </div>
+    `;
+    }
+    renderBotIcon(width = 30, height = 30) {
+        if (!this.botIconUrl) {
+            return E;
+        }
+        return x ` <div class="bot-icon">
+      <img src=${this.botIconUrl} width=${width} height=${height} />
+    </div>`;
+    }
+    chatWindow() {
+        if (this.isLoadingHistory || this.isLoadingThreads) {
+            return x ` <div class="messages loading">
+        <load-spinner></load-spinner>
+      </div>`;
+        }
+        if (this.messages.length === 0) {
+            return x `
+        <div class="chat-welcome">
+          ${this.botIconUrl
+                ? this.renderBotIcon(60, 60)
+                : x `<chatbot-icon></chatbot-icon>`}
+          <div>
+            <h2 class="welcome-title">Hello!</h2>
+            <p class="welcome-message">
+              I’m your personal AI concierge and I’m here to help you. What are
+              you looking for today?
+            </p>
+          </div>
+          ${this.renderPrompts()}
+        </div>
+      `;
+        }
+        return x `
+      <div class="messages">
+        ${this.isTyping
+            ? x ` <div class="message bot">
+              <typing-indicator></typing-indicator>
             </div>`
             : ''}
         ${this.isFailed
             ? x ` <div class="message bot">
-              <div>${this.renderBotIcon()}</div>
               <div>
                 <p>
                   Uh-oh! Looks like I tripped over some alpha-stage wires.
@@ -4314,33 +5285,19 @@ class ChatSection extends i$1 {
             }
             return x ` <div class="message user">${message.message}</div> `;
         })}
-        ${!this.fromAd || !this.thread
-            ? x `
-            <div class="message bot">
-              <div>${this.renderBotIcon()}</div>
-              <div>
-                <p>
-                  Hi,
-                  ${this.brandName
-                ? x `Welcome to ${this.brandName}.`
-                : E}
-                  I'm here to help you find the perfect product. Pick a suggested
-                  prompt from below, or enter your own query.
-                </p>
-              </div>
-            </div>
-            </div>`
-            : E}
       </div>
     `;
     }
     renderPrompts() {
+        var _a, _b;
         if (this.isLoadingHistory || this.isStreaming || this.isLoadingThreads) {
             return E;
         }
-        const isWelcomeMessage = this.messages.length === 1 && this.messages[0].sender === 'bot';
-        const prompts = this.messages.length
-            ? this.messages[0].welcomePrompts
+        const latestMessage = this.messages[0];
+        const isWelcomeMessage = this.messages.length === 1 && (latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.sender) === 'bot';
+        const isLLMPrompt = !!((_a = latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.prompts) === null || _a === void 0 ? void 0 : _a.length);
+        let prompts = this.messages.length
+            ? this.messages[0].prompts
             : this.prompts
                 ? this.prompts.split(',').map((prompt) => prompt.trim())
                 : ['Best Sellers'];
@@ -4348,15 +5305,26 @@ class ChatSection extends i$1 {
         if (!prompts && !customPrompts) {
             return E;
         }
+        // limit the prompts to 5
+        prompts = prompts === null || prompts === void 0 ? void 0 : prompts.slice(0, 5);
         return x `
-      <div class="prompts btn">
+      <div
+        class=${e$1({
+            prompts: true,
+            btn: true,
+            'left-align': ((_b = this.messages) === null || _b === void 0 ? void 0 : _b.length) > 0,
+        })}
+      >
         ${o$1(prompts, (prompt) => {
             return x `
             <div
               class="prompt"
               @click=${(e) => {
                 this.processMessage(e, prompt, true);
-                this.sendEvent('promptClicked', undefined, {
+                const eventName = isLLMPrompt
+                    ? 'customPromptClicked'
+                    : 'promptClicked';
+                this.sendEvent(eventName, undefined, {
                     promptName: prompt,
                 });
             }}
@@ -4383,93 +5351,20 @@ class ChatSection extends i$1 {
       </div>
     `;
     }
-    showContext() {
-        var _a;
-        if (!((_a = this.thread) === null || _a === void 0 ? void 0 : _a.devContext)) {
-            return x `
-        <div class="context-container">
-          <div class="context-title">
-            <p>Context</p>
-            <div
-              class="btn"
-              @click=${() => {
-                if (!this.contextContainerElement) {
-                    return;
-                }
-                this.contextContainerElement.classList.remove('show');
-            }}
-            >
-              ${closeBtn}
-            </div>
-          </div>
-          <p>
-            This search thread has no pre-defined context. Start a new search to
-            personalize.
-          </p>
-        </div>
-      `;
-        }
-        const devContext = this.thread.devContext;
-        const profileType = devContext.email
-            ? 'Pick your profile'
-            : 'Stay Anonymous';
-        const userDetails = devContext.email
-            ? `${capitalizeEachWord(devContext.firstName)} / ${capitalizeEachWord(devContext.gender)} / ${devContext.city} / ${devContext.state ? `- ${capitalizeEachWord(devContext.state)}` : ''} - ${devContext.preferences
-                ? `${devContext.preferences.size},${capitalizeEachWord(devContext.preferences.color)},${capitalizeEachWord(devContext.preferences.material)}`
-                : ''}`
-            : '';
-        const visitationType = devContext.productHandle ? 'Via Ad' : 'Direct Visit';
-        return x `
-      <div class="context-container">
-        <div class="context-title">
-          <p>Context</p>
-          <div
-            class="btn"
-            @click=${() => {
-            var _a;
-            (_a = this.contextContainerElement) === null || _a === void 0 ? void 0 : _a.classList.remove('show');
-        }}
-          >
-            ${closeBtn}
-          </div>
-        </div>
-        <div>
-          <div class="context">
-            <span>Profile Type:</span>${' '}
-            <span class="context-type-value"> ${profileType} </span>
-          </div>
-          ${userDetails
-            ? x ` <div class="context user-details">${userDetails}</div>`
-            : E}
-        </div>
-        <div>
-          <div class="context">
-            <span>Visitation Context:</span>${' '}
-            <span class="context-type-value">${visitationType}</span>
-          </div>
-          ${devContext.productHandle
-            ? x ` <div class="context product-handle">
-                ${devContext.productHandle}
-              </div>`
-            : E}
-        </div>
-      </div>
-    `;
-    }
-    modalViewHeader() {
+    chatHeader() {
         var _a;
         return x `
-      <div>
-        ${this.botIconUrl
-            ? x `<img src=${this.botIconUrl} width="30" height="30" />`
-            : botIcon}
-      </div>
-      <h2>${((_a = this.thread) === null || _a === void 0 ? void 0 : _a.title) || 'New Search'}</h2>
-      <div class="btns-wrapper">
-        <tooltip-component .position=${'bottom-right'} .text=${'New Chat'}>
-          <button
-            class="btn btn-icon new-search-btn"
-            @click=${(e) => {
+      <div class="chat-header">
+        ${this.renderBotIcon()}
+        <h2>
+          ${this.brandName && !this.botIconUrl ? this.brandName : E}
+          ${((_a = this.thread) === null || _a === void 0 ? void 0 : _a.title) || 'AI Concierge'}
+        </h2>
+        <div class="btns-wrapper">
+          <tooltip-component .position=${'bottom-right'} .text=${'New Chat'}>
+            <button
+              class="btn btn-icon new-search-btn"
+              @click=${(e) => {
             var _a, _b;
             e.preventDefault();
             if ((_a = this.thread) === null || _a === void 0 ? void 0 : _a.threadId) {
@@ -4477,85 +5372,49 @@ class ChatSection extends i$1 {
             }
             (_b = this.setSelectedThreadId) === null || _b === void 0 ? void 0 : _b.call(this, '');
         }}
-            ?disabled=${this.isStreaming}
+              ?disabled=${this.isStreaming}
+            >
+              ${plusBtn}
+            </button>
+          </tooltip-component>
+          <tooltip-component
+            .position=${'bottom-right'}
+            .text=${'Search History'}
           >
-            ${plusBtn}
-          </button>
-        </tooltip-component>
-        <tooltip-component
-          .position=${'bottom-right'}
-          .text=${'Search History'}
-        >
-          <button
-            class=${e$1({
+            <button
+              class=${e$1({
             btn: true,
             'btn-icon': true,
             'threads-btn': true,
             active: this.showChatThreads,
         })}
-            @click=${(e) => {
+              @click=${(e) => {
             e.preventDefault();
             this.showChatThreads = !this.showChatThreads;
             if (this.showChatThreads) {
                 this.sendEvent('showThreads');
             }
         }}
-          >
-            ${timerBtn}
-          </button>
-        </tooltip-component>
-        <tooltip-component .position=${'bottom-right'} .text=${'Close Chat'}>
-          <button
-            class="btn btn-icon close-btn"
-            @click=${(e) => {
+            >
+              ${historyBtn}
+            </button>
+          </tooltip-component>
+          <tooltip-component .position=${'bottom-right'} .text=${'Close Chat'}>
+            <button
+              class="btn btn-icon close-btn"
+              @click=${(e) => {
             var _a;
             e.preventDefault();
             (_a = this.closeModal) === null || _a === void 0 ? void 0 : _a.call(this);
         }}
-          >
-            ${crossBtn}
-          </button>
-        </tooltip-component>
+            >
+              ${crossBtn}
+            </button>
+          </tooltip-component>
+        </div>
       </div>
     `;
     }
-    contextButton() {
-        var _a, _b, _c, _d;
-        if (this.viewType === 'modal') {
-            return this.modalViewHeader();
-        }
-        if (!this.devMode) {
-            return ((_a = this.thread) === null || _a === void 0 ? void 0 : _a.threadId)
-                ? x `<h2>${((_b = this.thread) === null || _b === void 0 ? void 0 : _b.title) || 'New Search'}</h2>`
-                : x `<h2>New Search</h2>`;
-        }
-        if ((_c = this.thread) === null || _c === void 0 ? void 0 : _c.threadId) {
-            return x `
-        <h2>${((_d = this.thread) === null || _d === void 0 ? void 0 : _d.title) || 'New Search'}</h2>
-        <button
-          class="btn-context btn"
-          @click=${() => {
-                if (!this.contextContainerElement) {
-                    return;
-                }
-                this.contextContainerElement.classList.toggle('show');
-            }}
-        >
-          SHOW CONTEXT
-        </button>
-        ${this.showContext()}
-      `;
-        }
-        return x `
-      <h2>Click personalize for hyper Contextual</h2>
-      <button
-        class="btn-context active btn"
-        @click=${() => this.personalizeDialogElement.showModal()}
-      >
-        Personalize
-      </button>
-    `;
-    }
     renderChatThreads() {
         if (!this.chatThreads || !this.showChatThreads) {
             return E;
@@ -4631,52 +5490,38 @@ class ChatSection extends i$1 {
             this.style.removeProperty('--shopgpt-merchant-img-url');
         }
         return x `
-      <div class="chat-header">${this.contextButton()}</div>
-      <div
-        class=${e$1({
-            'chatbot-section': true,
-            'modal-view': this.viewType === 'modal',
-        })}
-      >
-        ${this.chatWindow()} ${this.renderPrompts()}
+      ${this.chatHeader()}
+      <div class="chatbot-section">
+        ${this.chatWindow()}
         <form class="chat-form" @submit=${this.onSubmit}>
+          <span class="sparkles-icon"> ${sparklesSharp} </span>
           <input
             type="text"
             .value=${this.userQuery}
             @input=${(e) => (this.userQuery = e.target.value)}
-            placeholder="Type your search here..."
+            placeholder="What are you looking for?"
           />
           <button
-            class=${e$1({
-            btn: true,
-            modal: this.viewType === 'modal',
-        })}
+            class="btn send-btn"
             type="submit"
             ?disabled=${this.isStreaming || this.isLoadingHistory}
           >
-            ${sendFilledIcon}
+            ${sendBtn}
           </button>
         </form>
-        ${this.viewType === 'modal'
-            ? x ` <footer>
-              Powered by
-              <a
-                target="_blank"
-                href="https://shopgpt.edgeagents.ai"
-                @click=${() => {
-                this.sendEvent('blotoutLinkClicked');
-            }}
-              >
-                Blotout
-              </a>
-            </footer>`
-            : E}
+        <footer>
+          Powered by
+          <a
+            target="_blank"
+            href="https://shopgpt.edgeagents.ai"
+            @click=${() => {
+            this.sendEvent('blotoutLinkClicked');
+        }}
+          >
+            Blotout
+          </a>
+        </footer>
       </div>
-      <personalize-dialog
-        .createChatThread=${this.createChatThread.bind(this)}
-        .defaultProductHandles=${this.productHandles}
-        .defaultProfiles=${this.profiles}
-      ></personalize-dialog>
       ${this.renderChatThreads()}
       ${this.deleteThreadId || this.deleteAllThreads
             ? x `
@@ -4724,121 +5569,97 @@ class ChatSection extends i$1 {
     `;
     }
 }
-ChatSection.styles = [chatSectionStyles];
+PopupView.styles = [chatSectionStyles];
 __decorate([
     n({ type: String }),
     __metadata("design:type", Object)
-], ChatSection.prototype, "merchantImage", void 0);
+], PopupView.prototype, "merchantImage", void 0);
 __decorate([
     n({ type: String }),
     __metadata("design:type", Object)
-], ChatSection.prototype, "botIconUrl", void 0);
+], PopupView.prototype, "botIconUrl", void 0);
 __decorate([
     n({ type: String }),
     __metadata("design:type", Object)
-], ChatSection.prototype, "brandName", void 0);
+], PopupView.prototype, "brandName", void 0);
 __decorate([
     n({ type: String }),
     __metadata("design:type", Object)
-], ChatSection.prototype, "prompts", void 0);
+], PopupView.prototype, "prompts", void 0);
 __decorate([
     n({ type: Array }),
     __metadata("design:type", Object)
-], ChatSection.prototype, "customPrompts", void 0);
+], PopupView.prototype, "customPrompts", void 0);
 __decorate([
     n({ type: Boolean }),
     __metadata("design:type", Boolean)
-], ChatSection.prototype, "isLoadingThreads", void 0);
+], PopupView.prototype, "isLoadingThreads", void 0);
 __decorate([
     n({ type: Object }),
     __metadata("design:type", Map)
-], ChatSection.prototype, "chatThreads", void 0);
+], PopupView.prototype, "chatThreads", void 0);
 __decorate([
     r(),
     __metadata("design:type", String)
-], ChatSection.prototype, "deleteThreadId", void 0);
+], PopupView.prototype, "deleteThreadId", void 0);
 __decorate([
     n({ type: Boolean }),
     __metadata("design:type", Object)
-], ChatSection.prototype, "showChatThreads", void 0);
+], PopupView.prototype, "showChatThreads", void 0);
 __decorate([
     n({ type: Boolean }),
     __metadata("design:type", Boolean)
-], ChatSection.prototype, "isLoadingHistory", void 0);
-__decorate([
-    n({ type: Boolean }),
-    __metadata("design:type", Object)
-], ChatSection.prototype, "devMode", void 0);
+], PopupView.prototype, "isLoadingHistory", void 0);
 __decorate([
     n({ type: Boolean }),
     __metadata("design:type", Boolean)
-], ChatSection.prototype, "isTyping", void 0);
+], PopupView.prototype, "isTyping", void 0);
 __decorate([
     n({ type: Boolean }),
     __metadata("design:type", Boolean)
-], ChatSection.prototype, "isStreaming", void 0);
+], PopupView.prototype, "isStreaming", void 0);
 __decorate([
     n({ type: Boolean }),
     __metadata("design:type", Boolean)
-], ChatSection.prototype, "isFailed", void 0);
-__decorate([
-    n({ type: Array }),
-    __metadata("design:type", Array)
-], ChatSection.prototype, "messages", void 0);
-__decorate([
-    n({ type: Array }),
-    __metadata("design:type", Array)
-], ChatSection.prototype, "profiles", void 0);
+], PopupView.prototype, "isFailed", void 0);
 __decorate([
     n({ type: Array }),
     __metadata("design:type", Array)
-], ChatSection.prototype, "productHandles", void 0);
+], PopupView.prototype, "messages", void 0);
 __decorate([
     n({ type: Object }),
     __metadata("design:type", Object)
-], ChatSection.prototype, "thread", void 0);
+], PopupView.prototype, "thread", void 0);
 __decorate([
     n({ type: Object }),
     __metadata("design:type", Object)
-], ChatSection.prototype, "siteCurrency", void 0);
+], PopupView.prototype, "siteCurrency", void 0);
 __decorate([
     r(),
     __metadata("design:type", Object)
-], ChatSection.prototype, "deleteAllThreads", void 0);
-__decorate([
-    e$3('.context-container'),
-    __metadata("design:type", Object)
-], ChatSection.prototype, "contextContainerElement", void 0);
+], PopupView.prototype, "deleteAllThreads", void 0);
 __decorate([
     e$3('.chat-window'),
     __metadata("design:type", Object)
-], ChatSection.prototype, "chatWindowElement", void 0);
-__decorate([
-    e$3('personalize-dialog'),
-    __metadata("design:type", Object)
-], ChatSection.prototype, "personalizeDialogElement", void 0);
+], PopupView.prototype, "chatWindowElement", void 0);
 __decorate([
     r(),
     __metadata("design:type", Object)
-], ChatSection.prototype, "feedbackDetails", void 0);
+], PopupView.prototype, "feedbackDetails", void 0);
 __decorate([
     n({ type: String }),
     __metadata("design:type", Object)
-], ChatSection.prototype, "userQuery", void 0);
+], PopupView.prototype, "userQuery", void 0);
 __decorate([
     n({ type: String }),
     __metadata("design:type", String)
-], ChatSection.prototype, "css", void 0);
-__decorate([
-    n({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], ChatSection.prototype, "fromAd", void 0);
+], PopupView.prototype, "css", void 0);
 __decorate([
     n({ type: String }),
     __metadata("design:type", String)
-], ChatSection.prototype, "userId", void 0);
-if (!customElements.get('chat-section')) {
-    customElements.define('chat-section', ChatSection);
+], PopupView.prototype, "userId", void 0);
+if (!customElements.get('popup-view')) {
+    customElements.define('popup-view', PopupView);
 }
 
 async function* streamToIterable(stream) {
@@ -4934,15 +5755,20 @@ class ShopGPT extends i$1 {
             this.modalState = 'close';
             (_a = this.shopGPTDialog) === null || _a === void 0 ? void 0 : _a.close();
         };
-        this.isFromAd = () => {
-            var _a;
+        this.isWelcomeFlowRequired = () => {
+            var _a, _b;
             if (this.devMode) {
                 const thread = this.chatThreads.get(this.selectedThreadId);
-                return thread ? !!((_a = thread.devContext) === null || _a === void 0 ? void 0 : _a.productHandle) : false;
+                return ((_a = thread === null || thread === void 0 ? void 0 : thread.devContext) === null || _a === void 0 ? void 0 : _a.email)
+                    ? true
+                    : !!((_b = thread === null || thread === void 0 ? void 0 : thread.devContext) === null || _b === void 0 ? void 0 : _b.productHandle);
             }
             const searchParams = new URLSearchParams(window.location.search);
-            return ((isFromAd(searchParams) || searchParams.get('shopGPT') === '1') &&
-                !!this.storeAPI.getCurrentProductHandle());
+            const userType = getUserType(this.destination, this.sessionId);
+            if (userType === 'known') {
+                return true;
+            }
+            return isFromAd(searchParams) || searchParams.get('shopGPT') === '1';
         };
         this.submitQuery = (message) => {
             if (!message) {
@@ -5007,6 +5833,7 @@ class ShopGPT extends i$1 {
             // If the url has `utm_source` open the popup when reloaded
             if (hasSource && isDesktop) {
                 this.modalState = 'open';
+                setUserInteracted(this.destination);
             }
         }
     }
@@ -5035,15 +5862,17 @@ class ShopGPT extends i$1 {
         if (!thread) {
             return;
         }
-        const fromAd = this.isFromAd();
-        const productHandle = this.devMode
-            ? (_a = thread === null || thread === void 0 ? void 0 : thread.devContext) === null || _a === void 0 ? void 0 : _a.productHandle
-            : fromAd
-                ? this.storeAPI.getCurrentProductHandle()
-                : undefined;
-        if (!fromAd) {
+        const welcomeFlow = this.isWelcomeFlowRequired();
+        let productHandle;
+        if (!welcomeFlow) {
             return;
         }
+        if (this.devMode) {
+            productHandle = (_a = thread === null || thread === void 0 ? void 0 : thread.devContext) === null || _a === void 0 ? void 0 : _a.productHandle;
+        }
+        else if (welcomeFlow) {
+            productHandle = this.storeAPI.getCurrentProductHandle();
+        }
         try {
             this.isTyping = true;
             this.isStreaming = true;
@@ -5083,7 +5912,7 @@ class ShopGPT extends i$1 {
         if (latestThread) {
             this.setSelectedThreadId(latestThread.threadId, true);
         }
-        else if (!this.devMode && this.isFromAd()) {
+        else if (!this.devMode && this.isWelcomeFlowRequired()) {
             this.createChatThread({ title: '' }, true);
         }
     }
@@ -5111,7 +5940,7 @@ class ShopGPT extends i$1 {
                     message: message.message,
                     sender: message.sender,
                     products,
-                    welcomePrompts: message.welcomePrompts,
+                    prompts: message.prompts,
                     feedback: message.feedback,
                 };
             });
@@ -5243,7 +6072,7 @@ class ShopGPT extends i$1 {
                 ...latestMessage,
                 message: messageData.message || '',
                 messageId: messageData.messageId,
-                welcomePrompts: messageData.welcomePrompts,
+                prompts: messageData.prompts,
                 sender: 'bot',
                 isChunk: false,
             },
@@ -5425,7 +6254,7 @@ class ShopGPT extends i$1 {
             .customPrompts=${this.customPrompts}
             .botIconUrl=${this.botIconUrl}
             .css=${this.css}
-            .fromAd=${this.isFromAd()}
+            .welcomeFlowTriggered=${this.isWelcomeFlowRequired()}
             .userId=${this.userId}
           ></chat-section>
         </div>
@@ -5439,74 +6268,76 @@ class ShopGPT extends i$1 {
             this.modalState = 'close';
             this.shopGPTAPI.sendEvent('chatbotClosed');
         };
-        if (this.modalState === 'close') {
-            return x ` <div class="chatbot-widget">
+        return x `
+      ${this.modalState === 'open'
+            ? x `<div
+            id="shop-gpt-modal"
+            @delete-thread=${this.handleThreadDelete}
+            @delete-all-threads=${this.handleAllThreadsDelete}
+            @submit-feedback=${this.submitFeedback}
+            @click=${this.handleUserInteraction}
+            @send-event=${this.sendEvent}
+            @product-clicked=${this.productClicked}
+          >
+            <popup-view
+              .prompts=${this.quickPrompts}
+              .brandName=${this.brandName}
+              .isFailed=${this.isFailed}
+              .isLoadingHistory=${this.isLoadingHistory}
+              .isTyping=${this.isTyping}
+              .isStreaming=${this.isStreaming}
+              .messages=${this.messages}
+              .siteCurrency=${this.getSiteCurrency()}
+              .sendMessageToServer=${this.sendMessageToServer.bind(this)}
+              .thread=${thread}
+              .createChatThread=${this.createChatThread.bind(this)}
+              .viewType=${'modal'}
+              .closeModal=${closeModal}
+              .setSelectedThreadId=${this.setSelectedThreadId.bind(this)}
+              .chatThreads=${this.chatThreads}
+              .isLoadingThreads=${this.isLoadingThreads}
+              .merchantImage=${this.merchantImage}
+              .customPrompts=${this.customPrompts}
+              .botIconUrl=${this.botIconUrl}
+              .css=${this.css}
+              .userId=${this.userId}
+            ></popup-view>
+          </div>`
+            : E}
+      <div class="chatbot-widget">
         <button
           @click=${(e) => {
-                e.preventDefault();
+            e.preventDefault();
+            if (this.modalState === 'open') {
+                closeModal();
+            }
+            else {
                 this.openModal();
-            }}
+            }
+        }}
         >
-          ${chatIcon}
+          <chatbot-icon></chatbot-icon>
         </button>
         ${((_a = this.nudge) === null || _a === void 0 ? void 0 : _a.show) && this.showNudge
-                ? x ` <div
+            ? x ` <div
               class="nudge"
               @click=${(e) => {
-                    e.preventDefault();
-                    this.openModal();
-                }}
+                e.preventDefault();
+                this.openModal();
+            }}
             >
               Hi there! I'm an AI Agent to help you find the perfect product.
               What are you looking for today?
             </div>`
-                : x ` <div class="chatbot-hover-text">
+            : x ` <div class="chatbot-hover-text">
               What are you looking for today?
             </div>`}
-      </div>`;
-        }
-        return x `
-      <div
-        id="shop-gpt-modal"
-        @delete-thread=${this.handleThreadDelete}
-        @delete-all-threads=${this.handleAllThreadsDelete}
-        @submit-feedback=${this.submitFeedback}
-        @click=${this.handleUserInteraction}
-        @send-event=${this.sendEvent}
-        @product-clicked=${this.productClicked}
-      >
-        <chat-section
-          .prompts=${this.quickPrompts}
-          .brandName=${this.brandName}
-          .isFailed=${this.isFailed}
-          .isLoadingHistory=${this.isLoadingHistory}
-          .isTyping=${this.isTyping}
-          .isStreaming=${this.isStreaming}
-          .messages=${this.messages}
-          .siteCurrency=${this.getSiteCurrency()}
-          .sendMessageToServer=${this.sendMessageToServer.bind(this)}
-          .thread=${thread}
-          .createChatThread=${this.createChatThread.bind(this)}
-          .devMode=${this.devMode}
-          .productHandles=${this.productHandles}
-          .profiles=${this.profiles}
-          .viewType=${'modal'}
-          .closeModal=${closeModal}
-          .setSelectedThreadId=${this.setSelectedThreadId.bind(this)}
-          .chatThreads=${this.chatThreads}
-          .isLoadingThreads=${this.isLoadingThreads}
-          .merchantImage=${this.merchantImage}
-          .customPrompts=${this.customPrompts}
-          .botIconUrl=${this.botIconUrl}
-          .css=${this.css}
-          .fromAd=${this.isFromAd()}
-          .userId=${this.userId}
-        ></chat-section>
       </div>
     `;
     }
     openModal() {
         setIsBotOpened(this.destination, this.sessionId, true);
+        setUserInteracted(this.destination);
         this.shopGPTAPI.sendEvent('chatbotOpened');
         this.modalState = 'open';
         this.handleUserInteraction();