@meetelise/chat 1.20.56 → 1.20.57

package/src/WebComponent/Launcher.ts

@@ -17,15 +17,16 @@ import {
   FilledEmailIcon,
   FilledPhoneIcon,
   FilledTourIcon,
-  ChevronIcon,
-  ChevronIconBlack,
+  ChevronIconWhite,
   HeyThereEmoji,
   EmailBlackStrokeIcon,
   PhoneBlackStrokeIcon,
   ChatWhiteStrokeIcon,
   EmailWhiteStrokeIcon,
-  PhoneWhiteStrokeIcon,
+  TabletWhiteStrokeIcon,
   ChatBlueBttnIcon,
+  PhoneWhiteStrokeIcon,
+  ChevronIconBlack,
 } from "../svgIcons";
 
 @customElement("meetelise-launcher")
@@ -35,6 +36,9 @@ export class Launcher extends LitElement {
   @property({ type: Boolean })
   isMobile = false;
 
+  @property({ type: Boolean })
+  isMinimized = false;
+
   @property({ type: Boolean })
   isFirstMount = false;
 
@@ -238,6 +242,12 @@ export class Launcher extends LitElement {
     this.isTextUsWindowOpen = false;
   };
 
+  onClickMinimize = (e: MouseEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.isMinimized = !this.isMinimized;
+  };
+
   renderTextUsOption = (): TemplateResult => {
     return html`
       <div
@@ -306,8 +316,13 @@ export class Launcher extends LitElement {
   };
 
   renderActionPills = (): TemplateResult => {
-    if (this.isMobile) {
+    if (this.isMobile || this.isMinimized) {
       return html`<div class="typeMobile-list">
+        ${this.isMobile
+          ? ""
+          : html` <button @click=${this.onClickMinimize} class="minimize-bttn">
+              <div class="chevron-up">${ChevronIconBlack}</div>
+            </button>`}
         <ul>
           <li @click=${this.onChatTapped} class="typeMobile-bttn">
             <div class="typeMobile-inner">
@@ -329,7 +344,10 @@ export class Launcher extends LitElement {
     }
 
     if (this.buildingABTestType === abTestTypes.ConceptBlueBlack) {
-      return html`<div class="type-gradient__list">
+      return html` <div class="type-gradient__list">
+        <button @click=${this.onClickMinimize} class="minimize-bttn">
+          <div class="chevron-down">${ChevronIconBlack}</div>
+        </button>
         ${this.hasChatEnabled
           ? html`
               <div
@@ -345,7 +363,7 @@ export class Launcher extends LitElement {
                     <div class="type-gradient__chat-header">
                       <span class="title-bold">Chat</span> with us
                     </div>
-                    ${ChevronIcon}
+                    ${ChevronIconWhite}
                   </div>
                   <ul class="type-gradient__description">
                     <li>our apartments</li>
@@ -364,7 +382,7 @@ export class Launcher extends LitElement {
           <div class="type-gradient__inner-txt">
             <span class="title-bold">Email</span> an agent
             </div>
-            <div class="type-gradient__icon">${ChevronIcon}</div>
+            <div class="type-gradient__icon">${ChevronIconWhite}</div>
           </div>
           </div>`
           : ""}
@@ -373,7 +391,7 @@ export class Launcher extends LitElement {
               <div class="type-gradient__contact type-gradient__bottom-tab" @click=${
                 this.onClickPhoneOption
               }> 
-              <div class="type-gradient__icon">${PhoneWhiteStrokeIcon}</div>
+              <div class="type-gradient__icon">${TabletWhiteStrokeIcon}</div>
               <div class="type-gradient__inner-txt">
                 <span class="title-bold">Call</span>
                 ${
@@ -382,7 +400,7 @@ export class Launcher extends LitElement {
                     : "us"
                 }
                 </div>
-              <div class="type-gradient__icon">${ChevronIcon}</div>
+              <div class="type-gradient__icon">${ChevronIconWhite}</div>
               </div>
               </div>
               `
@@ -392,7 +410,11 @@ export class Launcher extends LitElement {
 
     if (this.buildingABTestType === abTestTypes.ConceptBlueWhite) {
       return html`
+      
       <div class="type-hey__list">
+      <button @click=${this.onClickMinimize} class="minimize-bttn">
+        <div class="chevron-down">${ChevronIconBlack}</div>
+      </button>
         <div class="type-hey__top-section">
           <div class="type-hey__ai-topic">
             <p>AI Assistant</p>
@@ -418,7 +440,7 @@ export class Launcher extends LitElement {
                         </ul>
                     </div>
                   </div>
-                    <div>${ChevronIcon}</div>
+                    <div>${ChevronIconWhite}</div>
                   </div>
                   </div>
                 </div>
@@ -435,7 +457,7 @@ export class Launcher extends LitElement {
           <div>
             <span class="title-bold">Email</span> an agent
             </div>
-            <div class="type-gradient__icon">${ChevronIconBlack}</div>
+            <div class="type-gradient__icon">${ChevronIconWhite}</div>
           </div>
           </div>`
               : ""
@@ -453,7 +475,7 @@ export class Launcher extends LitElement {
                     : "us"
                 }
                 </div>
-                <div class="type-gradient__icon">${ChevronIconBlack}</div>
+                <div class="type-gradient__icon">${ChevronIconWhite}</div>
               </div>
               </div>
               `
@@ -471,6 +493,9 @@ export class Launcher extends LitElement {
     }
 
     return html` <div class="vertical-pill-list">
+      <button @click=${this.onClickMinimize} class="minimize-bttn">
+        <div class="chevron-down">${ChevronIconBlack}</div>
+      </button>
       ${this.hasEmailEnabled
         ? this.renderPillVertical(
             html`
@@ -529,7 +554,7 @@ export class Launcher extends LitElement {
     return html`
       <div"
         class=${
-          this.isMobile
+          this.isMobile || this.isMinimized
             ? "launcher__mobile-launcher-wrapper"
             : "launcher__mini-launcher-wrapper"
         }

package/src/WebComponent/launcherStyles.ts

@@ -315,6 +315,40 @@ export const launcherStyles = css`
     }
   }
 
+  .minimize-bttn {
+    position: absolute;
+    top: -9px;
+    right: 15px;
+
+    background: #ffffff;
+    border-radius: 4px;
+    border: none;
+
+    width: 18px;
+    height: 18px;
+
+    padding: 0;
+    cursor: pointer;
+    z-index: 1;
+  }
+  .minimize-bttn:hover {
+    filter: brightness(0.9);
+  }
+
+  .chevron-down,
+  .chevron-up {
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .chevron-down {
+    transform: rotate(90deg);
+  }
+  .chevron-up {
+    transform: rotate(-90deg);
+  }
   .vertical-pill-list {
     display: flex;
     flex-direction: column;
@@ -495,7 +529,6 @@ export const launcherStyles = css`
     justify-content: center;
     align-items: center;
     position: relative;
-    overflow: hidden;
   }
   .type-hey__chat-container {
     position: absolute;
@@ -515,7 +548,7 @@ export const launcherStyles = css`
     justify-content: center;
     align-items: center;
     gap: 4px;
-    padding: 26px 40px;
+    padding: 16px 40px;
     flex: 1;
   }
 
@@ -738,6 +771,7 @@ export const launcherStyles = css`
     display: flex;
     justify-content: flex-end;
     align-items: center;
+    margin-right: 12px;
   }
   .typeMobile-list > ul {
     padding: 0;
@@ -759,6 +793,10 @@ export const launcherStyles = css`
     justify-content: center;
     align-items: center;
   }
+  .typeMobile-bttn:hover {
+    filter: brightness(1.1);
+    cursor: pointer;
+  }
   .typeMobile-bttn > .typeMobile-inner {
     width: 43px;
     height: 43px;

package/src/WebComponent/me-chat.ts

@@ -29,8 +29,8 @@ import addMinutes from "date-fns/addMinutes";
 import formatISO from "date-fns/formatISO";
 import fetchLeadSources from "../fetchLeadSources";
 import {
-  ChevronIcon,
-  PhoneWhiteStrokeIcon,
+  ChevronIconWhite,
+  TabletWhiteStrokeIcon,
   WhiteStrokeTourIcon,
 } from "../svgIcons";
 
@@ -172,21 +172,31 @@ export class MEChat extends LitElement {
     if (!this.buildingSlug || !this.orgSlug) {
       return;
     }
-    this.building = await fetchBuildingInfo(this.orgSlug, this.buildingSlug);
-    const buildingABTest = await fetchBuildingABTestType(this.buildingSlug);
-    this.leadSources = await fetchLeadSources(this.buildingSlug);
+    const [
+      building,
+      buildingABTest,
+      leadSources,
+      featureFlagShowDropdown,
+      currentLeadSource,
+    ] = await Promise.all([
+      fetchBuildingInfo(this.orgSlug, this.buildingSlug),
+      fetchBuildingABTestType(this.buildingSlug),
+      fetchLeadSources(this.buildingSlug),
+      fetchFeatureFlag(this.buildingSlug),
+      fetchCurrentParsedLeadSource(this.buildingSlug, document.referrer),
+    ]);
+
+    this.building = building;
+    this.buildingABTestType = buildingABTest?.abTestType ?? "";
+    this.leadSources = leadSources;
+    this.featureFlagShowDropdown = featureFlagShowDropdown;
+    this.currentLeadSource = currentLeadSource;
 
-    this.featureFlagShowDropdown = await fetchFeatureFlag(this.buildingSlug);
-    this.currentLeadSource = await fetchCurrentParsedLeadSource(
-      this.buildingSlug,
-      document.referrer
-    );
     if (this.currentLeadSource) {
       if (!this.leadSources.includes(this.currentLeadSource)) {
         this.leadSources.push(this.currentLeadSource);
       }
     }
-    this.buildingABTestType = buildingABTest?.abTestType ?? "";
     getRawAvailabilities(this.building.id); // we're not using this here, just want to cache the result
     this.chatId = getChatID(this.orgSlug, this.buildingSlug);
     this.avatarSrc = this.avatarSrc || this.building.avatarSrc;
@@ -440,12 +450,12 @@ export class MEChat extends LitElement {
           <button class="actionTabBttn" @click=${this.handleTourClicked}>
             ${WhiteStrokeTourIcon}
             <p><span class="heavyLabel">Book</span> a tour</p>
-            ${ChevronIcon}
+            ${ChevronIconWhite}
           </button>
           <button class="actionTabBttn" @click=${this.handleContactTabClicked}>
-            ${PhoneWhiteStrokeIcon}
+            ${TabletWhiteStrokeIcon}
             <p><span class="heavyLabel">Contact</span> us</p>
-            ${ChevronIcon}
+            ${ChevronIconWhite}
           </button>
         </div>
         <div

package/src/svgIcons.ts

@@ -1,4 +1,9 @@
 import { svg } from "lit";
+export const PhoneWhiteStrokeIcon = svg`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+<path d="M11 1C11 1 13.2 1.2 16 4C18.8 6.8 19 9 19 9" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M11.207 4.53564C11.207 4.53564 12.197 4.81849 13.6819 6.30341C15.1668 7.78834 15.4497 8.77829 15.4497 8.77829" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M7.03759 4.31617L7.6866 5.4791C8.2723 6.52858 8.03718 7.90532 7.11471 8.8278C7.11471 8.8278 7.11471 8.8278 7.11471 8.8278C7.11459 8.82792 5.99588 9.94685 8.02451 11.9755C10.0525 14.0035 11.1714 12.8861 11.1722 12.8853C11.1722 12.8853 11.1722 12.8853 11.1722 12.8853C12.0947 11.9628 13.4714 11.7277 14.5209 12.3134L15.6838 12.9624C17.2686 13.8468 17.4557 16.0692 16.0628 17.4622C15.2258 18.2992 14.2004 18.9505 13.0669 18.9934C11.1588 19.0658 7.91828 18.5829 4.6677 15.3323C1.41713 12.0817 0.934215 8.84122 1.00655 6.93309C1.04952 5.7996 1.7008 4.77423 2.53781 3.93723C3.93076 2.54428 6.15317 2.73144 7.03759 4.31617Z" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>`;
 export const ChatBlueBttnIcon = svg`<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" fill="none">
 <g clip-path="url(#clip0_1012_1691)">
 <path d="M0 30.5C0 13.9315 13.4315 0.5 30 0.5C46.5685 0.5 60 13.9315 60 30.5C60 47.0685 46.5685 60.5 30 60.5C13.4315 60.5 0 47.0685 0 30.5Z" fill="#9CABD1" fill-opacity="0.2"/>
@@ -38,8 +43,10 @@ export const ChatBlueBttnIcon = svg`<svg xmlns="http://www.w3.org/2000/svg" widt
 </clipPath>
 </defs>
 </svg>`;
-export const ChatWhiteStrokeIcon = svg`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.35387 9.42907e-08H11.1462C12.6004 -5.69015e-06 13.7405 -1.01768e-05 14.6513 0.0865871C15.5796 0.174854 16.3397 0.357866 17.0098 0.768502C17.7116 1.19852 18.3016 1.78851 18.7316 2.49023C19.1422 3.16033 19.3252 3.92047 19.4135 4.84881C19.5001 5.75959 19.5001 6.89963 19.5001 8.35386V9.3218C19.5001 10.3569 19.5001 11.1685 19.4553 11.8241C19.4098 12.4912 19.3158 13.0464 19.1031 13.5597C18.5738 14.8376 17.5585 15.8529 16.2807 16.3822C15.5506 16.6846 14.719 16.7517 13.5805 16.7713C13.1822 16.7781 12.93 16.7832 12.7377 16.8045C12.558 16.8244 12.4884 16.8535 12.4476 16.8772C12.4046 16.9022 12.346 16.9478 12.2443 17.0874C12.1343 17.2384 12.0099 17.4471 11.8127 17.7803L11.321 18.611C10.6194 19.7963 8.88067 19.7963 8.17905 18.611L7.68738 17.7803C7.49016 17.4471 7.36578 17.2384 7.25571 17.0874C7.15401 16.9478 7.09542 16.9022 7.05243 16.8772C7.01167 16.8535 6.94202 16.8244 6.76234 16.8045C6.57005 16.7832 6.3178 16.7781 5.91955 16.7713C4.78103 16.7517 3.94949 16.6846 3.21939 16.3822C1.94154 15.8529 0.926284 14.8376 0.396979 13.5597C0.184325 13.0464 0.0902408 12.4912 0.0447279 11.8241C-5.09518e-06 11.1685 -2.7709e-06 10.3569 2.02411e-07 9.3218L9.42907e-08 8.35387C-5.69015e-06 6.89963 -1.01768e-05 5.75959 0.0865871 4.84881C0.174854 3.92047 0.357866 3.16033 0.768502 2.49024C1.19852 1.78851 1.78851 1.19852 2.49024 0.768502C3.16033 0.357866 3.92047 0.174854 4.84881 0.0865871C5.75959 -1.01768e-05 6.89963 -5.69015e-06 8.35387 9.42907e-08ZM4.97759 1.44095C4.14883 1.51975 3.62149 1.67087 3.20108 1.92849C2.68241 2.24633 2.24633 2.68241 1.92849 3.20108C1.67087 3.62149 1.51975 4.14883 1.44095 4.97759C1.36119 5.81647 1.36047 6.89193 1.36047 8.38957V9.29655C1.36047 10.3624 1.36084 11.1276 1.40204 11.7315C1.44283 12.3293 1.52134 12.7191 1.65389 13.0391C2.04511 13.9836 2.79552 14.734 3.74002 15.1252C4.20769 15.319 4.80433 15.3914 5.94299 15.411L5.97185 15.4115C6.33282 15.4177 6.64915 15.4232 6.91207 15.4523C7.19459 15.4835 7.47089 15.5468 7.73642 15.7012C7.9997 15.8543 8.1896 16.0589 8.35515 16.2861C8.50813 16.4959 8.66533 16.7616 8.84339 17.0624L9.34981 17.918C9.52463 18.2134 9.97541 18.2134 10.1502 17.918L10.6566 17.0624C10.8347 16.7616 10.9919 16.4959 11.1449 16.2861C11.3104 16.0589 11.5003 15.8543 11.7636 15.7012C12.0291 15.5468 12.3055 15.4835 12.588 15.4523C12.8509 15.4232 13.1672 15.4177 13.5282 15.4115L13.557 15.411C14.6957 15.3914 15.2924 15.319 15.7601 15.1252C16.7046 14.734 17.455 13.9836 17.8462 13.0391C17.9787 12.7191 18.0572 12.3293 18.098 11.7315C18.1392 11.1276 18.1396 10.3624 18.1396 9.29655V8.38957C18.1396 6.89193 18.1389 5.81647 18.0591 4.97759C17.9803 4.14883 17.8292 3.62149 17.5716 3.20108C17.2537 2.68241 16.8177 2.24633 16.299 1.92849C15.8786 1.67087 15.3512 1.51975 14.5225 1.44095C13.6836 1.36119 12.6081 1.36047 11.1105 1.36047H8.38957C6.89193 1.36047 5.81647 1.36119 4.97759 1.44095ZM9.75004 4.5349C10.1257 4.5349 10.4303 4.83945 10.4303 5.21514V12.471C10.4303 12.8467 10.1257 13.1512 9.75004 13.1512C9.37435 13.1512 9.0698 12.8467 9.0698 12.471V5.21514C9.0698 4.83945 9.37435 4.5349 9.75004 4.5349ZM6.12212 6.34886C6.4978 6.34886 6.80235 6.65341 6.80235 7.0291V10.657C6.80235 11.0327 6.4978 11.3373 6.12212 11.3373C5.74643 11.3373 5.44188 11.0327 5.44188 10.657V7.0291C5.44188 6.65341 5.74643 6.34886 6.12212 6.34886ZM13.378 6.34886C13.7536 6.34886 14.0582 6.65341 14.0582 7.0291V10.657C14.0582 11.0327 13.7536 11.3373 13.378 11.3373C13.0023 11.3373 12.6977 11.0327 12.6977 10.657V7.0291C12.6977 6.65341 13.0023 6.34886 13.378 6.34886Z" fill="white"/>
+export const ChatWhiteStrokeIcon = svg`<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
+<path d="M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 12.5997 1.37562 14.1116 2.04346 15.4525C2.22094 15.8088 2.28001 16.2161 2.17712 16.6006L1.58151 18.8267C1.32295 19.793 2.20701 20.677 3.17335 20.4185L5.39939 19.8229C5.78393 19.72 6.19121 19.7791 6.54753 19.9565C7.88837 20.6244 9.40032 21 11 21Z" stroke="white" stroke-width="1.5"/>
+<path d="M7 9.5H15" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M7 13H12.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
 </svg>`;
 export const EmailBlackStrokeIcon = svg`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 16 14" fill="none">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M6.46964 0.488404H9.53036C10.898 0.488392 11.9813 0.488382 12.829 0.602365C13.7015 0.71967 14.4077 0.966828 14.9647 1.52375C15.5216 2.08068 15.7687 2.78687 15.886 3.65938C16 4.50717 16 5.59044 16 6.95808V7.04204C16 8.40968 16 9.49295 15.886 10.3407C15.7687 11.2132 15.5216 11.9194 14.9647 12.4764C14.4077 13.0333 13.7015 13.2804 12.829 13.3978C11.9813 13.5117 10.898 13.5117 9.53035 13.5117H6.46965C5.10201 13.5117 4.01875 13.5117 3.17096 13.3978C2.29846 13.2804 1.59227 13.0333 1.03534 12.4764C0.478423 11.9194 0.231266 11.2132 0.113961 10.3407C-2.09587e-05 9.49295 -1.15596e-05 8.40968 2.39342e-07 7.04204V6.95807C-1.15596e-05 5.59043 -2.09587e-05 4.50717 0.113961 3.65938C0.231266 2.78687 0.478423 2.08068 1.03534 1.52375C1.59227 0.966828 2.29846 0.71967 3.17096 0.602365C4.01875 0.488382 5.10201 0.488392 6.46964 0.488404ZM3.3197 1.70869C2.57098 1.80936 2.13962 1.99814 1.82467 2.31308C1.50973 2.62803 1.32095 3.0594 1.22029 3.80812C1.11746 4.5729 1.11628 5.58102 1.11628 7.00006C1.11628 8.41909 1.11746 9.42722 1.22029 10.192C1.32095 10.9407 1.50973 11.3721 1.82467 11.687C2.13962 12.002 2.57098 12.1908 3.3197 12.2914C4.08447 12.3942 5.0926 12.3954 6.51163 12.3954H9.48837C10.9074 12.3954 11.9155 12.3942 12.6803 12.2914C13.429 12.1908 13.8604 12.002 14.1753 11.687C14.4903 11.3721 14.6791 10.9407 14.7797 10.192C14.8825 9.42722 14.8837 8.41909 14.8837 7.00006C14.8837 5.58102 14.8825 4.5729 14.7797 3.80812C14.6791 3.0594 14.4903 2.62803 14.1753 2.31308C13.8604 1.99814 13.429 1.80936 12.6803 1.70869C11.9155 1.60587 10.9074 1.60469 9.48837 1.60469H6.51163C5.0926 1.60469 4.08448 1.60587 3.3197 1.70869ZM3.10611 3.66599C3.30345 3.42918 3.65539 3.39719 3.8922 3.59453L5.49882 4.93338C6.19311 5.51196 6.67515 5.91236 7.08211 6.1741C7.47605 6.42747 7.7432 6.51252 8 6.51252C8.2568 6.51252 8.52395 6.42747 8.91789 6.1741C9.32485 5.91236 9.80689 5.51196 10.5012 4.93338L12.1078 3.59453C12.3446 3.39719 12.6966 3.42918 12.8939 3.66599C13.0912 3.9028 13.0592 4.25474 12.8224 4.45208L11.1878 5.81425C10.5282 6.36395 9.99359 6.80949 9.52173 7.11297C9.0302 7.4291 8.5515 7.62881 8 7.62881C7.4485 7.62881 6.9698 7.4291 6.47827 7.11297C6.00641 6.80949 5.47179 6.36395 4.81218 5.81425L3.17757 4.45208C2.94077 4.25474 2.90877 3.9028 3.10611 3.66599Z" fill="black"/>
@@ -47,7 +54,7 @@ export const EmailBlackStrokeIcon = svg`<svg xmlns="http://www.w3.org/2000/svg"
 export const EmailWhiteStrokeIcon = svg`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 16 14" fill="none">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M6.46964 0.488404H9.53036C10.898 0.488392 11.9813 0.488382 12.829 0.602365C13.7015 0.71967 14.4077 0.966828 14.9647 1.52375C15.5216 2.08068 15.7687 2.78687 15.886 3.65938C16 4.50717 16 5.59044 16 6.95808V7.04204C16 8.40968 16 9.49295 15.886 10.3407C15.7687 11.2132 15.5216 11.9194 14.9647 12.4764C14.4077 13.0333 13.7015 13.2804 12.829 13.3978C11.9813 13.5117 10.898 13.5117 9.53035 13.5117H6.46965C5.10201 13.5117 4.01875 13.5117 3.17096 13.3978C2.29846 13.2804 1.59227 13.0333 1.03534 12.4764C0.478423 11.9194 0.231266 11.2132 0.113961 10.3407C-2.09587e-05 9.49295 -1.15596e-05 8.40968 2.39342e-07 7.04204V6.95807C-1.15596e-05 5.59043 -2.09587e-05 4.50717 0.113961 3.65938C0.231266 2.78687 0.478423 2.08068 1.03534 1.52375C1.59227 0.966828 2.29846 0.71967 3.17096 0.602365C4.01875 0.488382 5.10201 0.488392 6.46964 0.488404ZM3.3197 1.70869C2.57098 1.80936 2.13962 1.99814 1.82467 2.31308C1.50973 2.62803 1.32095 3.0594 1.22029 3.80812C1.11746 4.5729 1.11628 5.58102 1.11628 7.00006C1.11628 8.41909 1.11746 9.42722 1.22029 10.192C1.32095 10.9407 1.50973 11.3721 1.82467 11.687C2.13962 12.002 2.57098 12.1908 3.3197 12.2914C4.08447 12.3942 5.0926 12.3954 6.51163 12.3954H9.48837C10.9074 12.3954 11.9155 12.3942 12.6803 12.2914C13.429 12.1908 13.8604 12.002 14.1753 11.687C14.4903 11.3721 14.6791 10.9407 14.7797 10.192C14.8825 9.42722 14.8837 8.41909 14.8837 7.00006C14.8837 5.58102 14.8825 4.5729 14.7797 3.80812C14.6791 3.0594 14.4903 2.62803 14.1753 2.31308C13.8604 1.99814 13.429 1.80936 12.6803 1.70869C11.9155 1.60587 10.9074 1.60469 9.48837 1.60469H6.51163C5.0926 1.60469 4.08448 1.60587 3.3197 1.70869ZM3.10611 3.66599C3.30345 3.42918 3.65539 3.39719 3.8922 3.59453L5.49882 4.93338C6.19311 5.51196 6.67515 5.91236 7.08211 6.1741C7.47605 6.42747 7.7432 6.51252 8 6.51252C8.2568 6.51252 8.52395 6.42747 8.91789 6.1741C9.32485 5.91236 9.80689 5.51196 10.5012 4.93338L12.1078 3.59453C12.3446 3.39719 12.6966 3.42918 12.8939 3.66599C13.0912 3.9028 13.0592 4.25474 12.8224 4.45208L11.1878 5.81425C10.5282 6.36395 9.99359 6.80949 9.52173 7.11297C9.0302 7.4291 8.5515 7.62881 8 7.62881C7.4485 7.62881 6.9698 7.4291 6.47827 7.11297C6.00641 6.80949 5.47179 6.36395 4.81218 5.81425L3.17757 4.45208C2.94077 4.25474 2.90877 3.9028 3.10611 3.66599Z" fill="white"/>
 </svg>`;
-export const PhoneWhiteStrokeIcon = svg`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20" fill="none">
+export const TabletWhiteStrokeIcon = svg`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20" fill="none">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M7.88488 2.91698e-07H7.98722C9.65402 -1.40883e-05 10.9742 -2.55434e-05 12.0075 0.13889C13.0708 0.281855 13.9315 0.583077 14.6103 1.26183C15.289 1.94057 15.5902 2.80125 15.7332 3.86461C15.8721 4.89785 15.8721 6.21808 15.8721 7.88488V11.6151C15.8721 13.2819 15.8721 14.6021 15.7332 15.6354C15.5902 16.6987 15.289 17.5594 14.6103 18.2382C13.9315 18.9169 13.0708 19.2181 12.0075 19.3611C10.9742 19.5 9.65402 19.5 7.98721 19.5H7.88488C6.21808 19.5 4.89785 19.5 3.86461 19.3611C2.80125 19.2181 1.94057 18.9169 1.26183 18.2382C0.583077 17.5594 0.281855 16.6987 0.13889 15.6354C-2.55434e-05 14.6021 -1.40883e-05 13.2819 2.91698e-07 11.6151V7.88488C-1.40883e-05 6.21807 -2.55434e-05 4.89785 0.13889 3.86461C0.281855 2.80125 0.583077 1.94057 1.26183 1.26183C1.94057 0.583077 2.80125 0.281855 3.86461 0.13889C4.89785 -2.55434e-05 6.21807 -1.40883e-05 7.88488 2.91698e-07ZM3.23244 1.65357C2.78891 1.78614 2.47579 1.97185 2.22382 2.22382C1.83998 2.60766 1.60991 3.13339 1.48722 4.04589C1.36191 4.97795 1.36047 6.2066 1.36047 7.93605V11.564C1.36047 13.2934 1.36191 14.522 1.48722 15.4541C1.60991 16.3666 1.83998 16.8923 2.22382 17.2762C2.60766 17.66 3.13339 17.8901 4.04589 18.0128C4.97795 18.1381 6.2066 18.1395 7.93605 18.1395C9.66549 18.1395 10.8941 18.1381 11.8262 18.0128C12.7387 17.8901 13.2644 17.66 13.6483 17.2762C14.0321 16.8923 14.2622 16.3666 14.3849 15.4541C14.5102 14.522 14.5116 13.2934 14.5116 11.564V7.93605C14.5116 6.2066 14.5102 4.97795 14.3849 4.04589C14.2622 3.13339 14.0321 2.60766 13.6483 2.22382C13.3963 1.97185 13.0832 1.78614 12.6397 1.65357C12.0395 2.55482 11.6199 3.18136 10.9959 3.56908C10.8714 3.64643 10.7421 3.71565 10.6087 3.77631C9.93555 4.08241 9.17592 4.08202 8.08155 4.08145C8.0337 4.08142 7.9852 4.0814 7.93605 4.0814C7.88689 4.0814 7.8384 4.08142 7.79054 4.08145C6.69617 4.08202 5.93654 4.08241 5.26341 3.77631C5.13 3.71565 5.00066 3.64643 4.87618 3.56908C4.25224 3.18136 3.83262 2.55483 3.23244 1.65357ZM4.71745 1.4204C5.12021 2.00409 5.33112 2.25004 5.59423 2.41354C5.66892 2.45995 5.74653 2.50148 5.82657 2.53788C6.19744 2.70653 6.63687 2.72093 7.93605 2.72093C9.23522 2.72093 9.67465 2.70653 10.0455 2.53788C10.1256 2.50148 10.2032 2.45995 10.2779 2.41354C10.541 2.25004 10.7519 2.00408 11.1546 1.4204C10.32 1.36134 9.27902 1.36047 7.93605 1.36047C6.59307 1.36047 5.55208 1.36134 4.71745 1.4204ZM4.53488 16.0988C4.53488 15.7232 4.83943 15.4186 5.21512 15.4186H10.657C11.0327 15.4186 11.3372 15.7232 11.3372 16.0988C11.3372 16.4745 11.0327 16.7791 10.657 16.7791H5.21512C4.83943 16.7791 4.53488 16.4745 4.53488 16.0988Z" fill="white"/>
 </svg>`;
 export const PhoneBlackStrokeIcon = svg`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="17" viewBox="0 0 14 17" fill="none">
@@ -90,7 +97,7 @@ export const FilledPhoneIcon = svg`<svg width="16" height="24" viewBox="0 0 16 2
 
 `;
 
-export const ChevronIcon = svg`<svg
+export const ChevronIconWhite = svg`<svg
     width="5"
     height="8"
     viewBox="0 0 5 8"
@@ -106,19 +113,19 @@ export const ChevronIcon = svg`<svg
   </svg> `;
 
 export const ChevronIconBlack = svg`<svg
-width="5"
-height="8"
-viewBox="0 0 5 8"
-fill="none"
-xmlns="http://www.w3.org/2000/svg"
->
-<path
-  d="M1 7L4 4L1 1"
-  stroke="black"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-/>
-</svg> `;
+    width="5"
+    height="8"
+    viewBox="0 0 5 8"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1 7L4 4L1 1"
+      stroke="black"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `;
 
 export const OutlinedChatIcon = svg`<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: translate(2px, -1px);">
 <path d="M21.0385 9.79957H7.03915C6.66786 9.79957 6.31178 9.94706 6.04924 10.2096C5.7867 10.4721 5.63921 10.8282 5.63921 11.1995C5.63921 11.5708 5.7867 11.9269 6.04924 12.1894C6.31178 12.4519 6.66786 12.5994 7.03915 12.5994H21.0385C21.4098 12.5994 21.7659 12.4519 22.0284 12.1894C22.291 11.9269 22.4385 11.5708 22.4385 11.1995C22.4385 10.8282 22.291 10.4721 22.0284 10.2096C21.7659 9.94706 21.4098 9.79957 21.0385 9.79957ZM15.4388 15.3993H7.03915C6.66786 15.3993 6.31178 15.5468 6.04924 15.8094C5.7867 16.0719 5.63921 16.428 5.63921 16.7993C5.63921 17.1705 5.7867 17.5266 6.04924 17.7892C6.31178 18.0517 6.66786 18.1992 7.03915 18.1992H15.4388C15.8101 18.1992 16.1661 18.0517 16.4287 17.7892C16.6912 17.5266 16.8387 17.1705 16.8387 16.7993C16.8387 16.428 16.6912 16.0719 16.4287 15.8094C16.1661 15.5468 15.8101 15.3993 15.4388 15.3993ZM14.0388 0C12.2004 0 10.38 0.362105 8.68151 1.06564C6.98302 1.76917 5.43975 2.80036 4.13978 4.10032C1.51439 6.72572 0.0394592 10.2865 0.0394592 13.9994C0.0272207 17.232 1.14652 20.3671 3.20332 22.861L0.403443 25.6609C0.209191 25.8577 0.077602 26.1077 0.0252806 26.3793C-0.0270409 26.6509 0.00224956 26.9319 0.109456 27.1868C0.225732 27.4387 0.414228 27.6503 0.651018 27.7949C0.887807 27.9395 1.16221 28.0104 1.4394 27.9988H14.0388C17.7517 27.9988 21.3125 26.5238 23.9379 23.8984C26.5633 21.273 28.0382 17.7122 28.0382 13.9994C28.0382 10.2865 26.5633 6.72572 23.9379 4.10032C21.3125 1.47493 17.7517 0 14.0388 0V0ZM14.0388 25.1989H4.81325L6.11519 23.8969C6.37593 23.6346 6.52228 23.2798 6.52228 22.91C6.52228 22.5401 6.37593 22.1853 6.11519 21.923C4.28209 20.092 3.14057 17.682 2.8851 15.1036C2.62964 12.5253 3.27604 9.93817 4.71417 7.78299C6.1523 5.6278 8.2932 4.03792 10.7721 3.28422C13.251 2.53051 15.9146 2.65961 18.309 3.64952C20.7033 4.63943 22.6805 6.4289 23.9034 8.71306C25.1264 10.9972 25.5195 13.6348 25.0159 16.1763C24.5123 18.7178 23.1431 21.0061 21.1415 22.6513C19.1399 24.2965 16.6298 25.1968 14.0388 25.1989V25.1989Z" fill="#1E1E1E" />

package/src/themes.ts

@@ -124,11 +124,11 @@ const themesById = {
       backgroundColor: white,
       textColor: darkGray,
     },
-    chatPaneBackgroundColor: "rgba(38, 38, 38, 0.4)",
+    chatPaneBackgroundColor: "rgba(0, 0, 0, 0.5)",
     message: {
       user: {
         textColor: "#FFFFFF",
-        backgroundColor: "#4d4d4d",
+        backgroundColor: "#000000",
       },
       agent: {
         textColor: "#000000",