fix: updates for welcome screen: prompts styles, welcome screen icon (#63)

Author: vladstart1

src/core/components/UIComponents.ts

@@ -155,6 +155,11 @@ export class UIComponents {
     const welcomeScreen = document.createElement('div');
     welcomeScreen.className = 'chat-widget-welcome-screen';
 
+    const welcomeIcon = document.createElement('div');
+    welcomeIcon.className = 'chat-widget-welcome-icon';
+    welcomeIcon.innerHTML =
+      '<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="104" height="104" rx="52" fill="#F7F4F8"/><path d="M78.25 57.25C78.25 57.7141 78.0656 58.1593 77.7374 58.4874C77.4092 58.8156 76.9641 59 76.5 59H73V62.5C73 62.9641 72.8156 63.4092 72.4874 63.7374C72.1592 64.0656 71.7141 64.25 71.25 64.25C70.7858 64.25 70.3407 64.0656 70.0125 63.7374C69.6843 63.4092 69.5 62.9641 69.5 62.5V59H66C65.5358 59 65.0907 58.8156 64.7625 58.4874C64.4343 58.1593 64.25 57.7141 64.25 57.25C64.25 56.7859 64.4343 56.3407 64.7625 56.0126C65.0907 55.6844 65.5358 55.5 66 55.5H69.5V52C69.5 51.5359 69.6843 51.0908 70.0125 50.7626C70.3407 50.4344 70.7858 50.25 71.25 50.25C71.7141 50.25 72.1592 50.4344 72.4874 50.7626C72.8156 51.0908 73 51.5359 73 52V55.5H76.5C76.9641 55.5 77.4092 55.6844 77.7374 56.0126C78.0656 56.3407 78.25 56.7859 78.25 57.25ZM36.2499 39.75H39.75V43.25C39.75 43.7141 39.9343 44.1592 40.2625 44.4874C40.5907 44.8156 41.0358 45 41.5 45C41.9641 45 42.4092 44.8156 42.7374 44.4874C43.0656 44.1592 43.25 43.7141 43.25 43.25V39.75H46.75C47.2141 39.75 47.6592 39.5656 47.9874 39.2374C48.3156 38.9092 48.5 38.4641 48.5 38C48.5 37.5359 48.3156 37.0908 47.9874 36.7626C47.6592 36.4344 47.2141 36.25 46.75 36.25H43.25V32.75C43.25 32.2859 43.0656 31.8408 42.7374 31.5126C42.4092 31.1844 41.9641 31 41.5 31C41.0358 31 40.5907 31.1844 40.2625 31.5126C39.9343 31.8408 39.75 32.2859 39.75 32.75V36.25H36.2499C35.7858 36.25 35.3407 36.4344 35.0125 36.7626C34.6843 37.0908 34.4999 37.5359 34.4999 38C34.4999 38.4641 34.6843 38.9092 35.0125 39.2374C35.3407 39.5656 35.7858 39.75 36.2499 39.75ZM64.25 66H62.5V64.25C62.5 63.7859 62.3156 63.3408 61.9874 63.0126C61.6592 62.6844 61.2141 62.5 60.75 62.5C60.2858 62.5 59.8407 62.6844 59.5125 63.0126C59.1843 63.3408 59 63.7859 59 64.25V66H57.25C56.7858 66 56.3407 66.1844 56.0125 66.5126C55.6843 66.8408 55.5 67.2859 55.5 67.75C55.5 68.2141 55.6843 68.6592 56.0125 68.9874C56.3407 69.3156 56.7858 69.5 57.25 69.5H59V71.25C59 71.7141 59.1843 72.1592 59.5125 72.4874C59.8407 72.8156 60.2858 73 60.75 73C61.2141 73 61.6592 72.8156 61.9874 72.4874C62.3156 72.1592 62.5 71.7141 62.5 71.25V69.5H64.25C64.7141 69.5 65.1592 69.3156 65.4874 68.9874C65.8156 68.6592 66 68.2141 66 67.75C66 67.2859 65.8156 66.8408 65.4874 66.5126C65.1592 66.1844 64.7141 66 64.25 66ZM71.974 41.5L41.5 71.9741C40.8436 72.6299 39.9537 72.9984 39.0259 72.9984C38.098 72.9984 37.2081 72.6299 36.5518 71.9741L32.0237 67.4503C31.6986 67.1253 31.4407 66.7394 31.2648 66.3147C31.0888 65.89 30.9983 65.4348 30.9983 64.9752C30.9983 64.5155 31.0888 64.0603 31.2648 63.6356C31.4407 63.2109 31.6986 62.825 32.0237 62.5L62.5 32.0259C62.825 31.7008 63.2108 31.443 63.6355 31.267C64.0602 31.0911 64.5154 31.0005 64.9751 31.0005C65.4348 31.0005 65.89 31.0911 66.3147 31.267C66.7394 31.443 67.1252 31.7008 67.4503 32.0259L71.974 36.5497C72.2991 36.8747 72.557 37.2606 72.7329 37.6853C72.9089 38.11 72.9994 38.5651 72.9994 39.0248C72.9994 39.4845 72.9089 39.9397 72.7329 40.3644C72.557 40.7891 72.2991 41.175 71.974 41.5ZM69.5 39.0259L64.974 34.5L57.974 41.5L62.5 46.0259L69.5 39.0259Z" fill="#783F8E"/></svg>';
+
     const welcomeTitle = document.createElement('h3');
     welcomeTitle.className = 'chat-widget-welcome-title';
     welcomeTitle.textContent = options.welcomeTitle!;
@@ -163,6 +168,7 @@ export class UIComponents {
     welcomeSubtitle.className = 'chat-widget-welcome-subtitle';
     welcomeSubtitle.textContent = options.welcomeSubtitle!;
 
+    welcomeScreen.appendChild(welcomeIcon);
     welcomeScreen.appendChild(welcomeTitle);
     welcomeScreen.appendChild(welcomeSubtitle);
 

src/core/styles.css

@@ -73,8 +73,8 @@
 @media only screen and (min-width: 768px) {
   .chat-widget-container {
     bottom: 70px;
-    width: 400px;
-    height: 600px;
+    width: 480px;
+    height: 670px;
   }
   .chat-widget-container-toggle-button {
     bottom: -5px;
@@ -254,6 +254,14 @@
   justify-content: center;
 }
 
+.chat-widget-welcome-icon {
+  margin-bottom: 10px;
+}
+
+.chat-widget-welcome-icon svg path {
+  fill: var(--primary-color);
+}
+
 .chat-widget-prompt {
   text-align: left;
   border-width: 0;
@@ -265,10 +273,15 @@
   font-weight: 500;
   font-family: var(--font-family);
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .chat-widget-container-full-screen .chat-widget-prompt {
   height: 104px;
+  flex-direction: column;
+  align-items: flex-start;
 }
 
 .chat-widget-messages,