pager-widget 0.2.0 → 0.2.2

package/App.jsx

@@ -15,6 +15,7 @@ import useWidgetService from "./useWidgetService";
 import InputConverter from "./InputConverter";
 import ConsentPopup from "./ConsentPopup";
 import axios from "axios";
+import { EndPointProvider } from "./useEndpoint";
 
 const switchSize = (size, small, medium, large) => {
   //  ;
@@ -77,7 +78,7 @@ const FormHeader = styled.div`
   align-items: center;
   width: 100%;
   float: left;
-  font-family: "Gordita-Medium", "Open Sans", sans-serif;
+  font-family: "Inter", "Open Sans";
   font-size: ${(props) => switchSize(props.size, "15px", "20px", "24px")};
   color: #000;
   margin-right: 12px;
@@ -135,7 +136,7 @@ const ChatWrapper = styled.div`
         height: 46px;
 
             p{
-            font-family: 'Gordita-Regular', 'Open Sans', sans-serif;;
+            font-family: "Inter", "Open Sans";
             font-size: 12px;
             color: #000;
             margin: 0;
@@ -312,7 +313,7 @@ const ChatContentWrapper = styled.div`
   padding: 12px 20px 20px 15px;
   display: block;
   overflow-y: scroll;
-  background: #F6F8FA;
+  background: #FFFFFF;
   overflow-x: hidden;
   box-sizing: border-box;
   // background-position: center;
@@ -354,14 +355,14 @@ const AssistantChat = styled.div`
   // .timestamp {
   //   color: #888;
   //   font-size: 10px;
-  //   font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
+  //   font-family: "Inter", "Open Sans";
   // }
 
   // .tryit_cards h4 {
   //   font-size: 13px;
   //   margin-top: 10px;
   //   margin-bottom: 0px;
-  //   font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
+  //   font-family: "Inter", "Open Sans";
   //   width: 100%;
   //   color: #fff;
 
@@ -773,7 +774,7 @@ const ContentHeader = styled.div`
   }
 `;
 const Paragraph = styled.p`
-  font-family: "Gordita-Regular", "Open Sans", sans-serif;
+  font-family: "Inter", "Open Sans";
   margin: 0;
   width: 100%;
   color: #000;
@@ -809,14 +810,14 @@ const ChatMessage = styled.div`
   padding: 12px 10px 8px 16px !important;
   margin-left: 14px;
   margin-top: 14px;
-  font-family: "Gordita-Regular", "Open Sans", sans-serif;
+  font-family: "Inter", "Open Sans";
   white-space: pre-wrap;
   box-sizing: border-box;
   word-break: break-word;
   border-radius: 0px 6px 6px 6px;
   color: #333;
   position: relative;
-  background: #ffffff 0% 0% no-repeat padding-box;
+  background: #f2f4f7 0% 0% no-repeat padding-box;
   box-shadow: 0px 3px 5px #00000029;
   border-radius: 0px 10px 10px 10px;
   // font-size: 13px;
@@ -858,160 +859,869 @@ const ChatMessage = styled.div`
     margin-top: ${(props) => switchSize(props.size, "45px", "50px", "60px")};
   }
 
-  @media (max-width: 1920px) {
-    font-size: ${(props) => switchSize(props.size, "15px", "17px", "18px")};
-    padding: ${(props) =>
-      switchSize(
-        props.size,
-        "12px 10px 8px 28px !important",
-        "12px 10px 8px 28px !important",
-        "12px 10px 8px 20px !important"
-      )};
-    margin-left: ${(props) => switchSize(props.size, "22px", "22px", "22px")};
-    margin-top: ${(props) => switchSize(props.size, "32px", "34px", "34px")};
-  }
-  @media (max-width: 1680px) {
-    font-size: ${(props) => switchSize(props.size, "13px", "15px", "15px")};
-    padding: ${(props) =>
-      switchSize(
-        props.size,
-        "12px 10px 8px 18px !important",
-        "12px 10px 8px 20px !important",
-        "12px 10px 8px 22px !important"
-      )};
-    margin-left: ${(props) => switchSize(props.size, "14px", "16px", "18px")};
-    margin-top: ${(props) => switchSize(props.size, "26px", "26px", "26px")};
-  }
-  @media (max-width: 1280px) {
-    font-size: ${(props) => switchSize(props.size, "10px", "11px", "13px")};
-    padding: ${(props) =>
-      switchSize(
-        props.size,
-        "12px 10px 8px 16px !important",
-        "12px 10px 8px 16px !important",
-        "12px 10px 8px 16px !important"
-      )};
-    margin-left: ${(props) => switchSize(props.size, "16px", "16px", "16px")};
-    margin-top: ${(props) => switchSize(props.size, "22px", "22px", "22px")};
-  }
+  @media (max-width: 1920px) {
+    font-size: ${(props) => switchSize(props.size, "15px", "17px", "18px")};
+    padding: ${(props) =>
+      switchSize(
+        props.size,
+        "12px 10px 8px 28px !important",
+        "12px 10px 8px 28px !important",
+        "12px 10px 8px 20px !important"
+      )};
+    margin-left: ${(props) => switchSize(props.size, "22px", "22px", "22px")};
+    margin-top: ${(props) => switchSize(props.size, "32px", "34px", "34px")};
+  }
+  @media (max-width: 1680px) {
+    font-size: ${(props) => switchSize(props.size, "13px", "15px", "15px")};
+    padding: ${(props) =>
+      switchSize(
+        props.size,
+        "12px 10px 8px 18px !important",
+        "12px 10px 8px 20px !important",
+        "12px 10px 8px 22px !important"
+      )};
+    margin-left: ${(props) => switchSize(props.size, "14px", "16px", "18px")};
+    margin-top: ${(props) => switchSize(props.size, "26px", "26px", "26px")};
+  }
+  @media (max-width: 1280px) {
+    font-size: ${(props) => switchSize(props.size, "10px", "11px", "13px")};
+    padding: ${(props) =>
+      switchSize(
+        props.size,
+        "12px 10px 8px 16px !important",
+        "12px 10px 8px 16px !important",
+        "12px 10px 8px 16px !important"
+      )};
+    margin-left: ${(props) => switchSize(props.size, "16px", "16px", "16px")};
+    margin-top: ${(props) => switchSize(props.size, "22px", "22px", "22px")};
+  }
+
+  svg {
+    width: 6px;
+    height: 6px;
+    top: 0px;
+    left: -6px;
+    position: absolute;
+    color: #fff;
+  }
+  @media (max-width: 1736px) {
+    padding: 8px;
+  }
+  @media (max-width: 1600px) {
+    padding: 5px 8px;
+  }
+  .timestamp {
+    color: #888;
+    // font-size: 10px;
+    font-family: "Inter", "Open Sans";
+    position: relative;
+    bottom: 0px;
+    text-transform: uppercase;
+
+    @media (min-width: 2160px) {
+      font-size: ${(props) => switchSize(props.size, "16px", "19px", "21px")};
+    }
+    @media (min-width: 2560px) {
+      font-size: ${(props) => switchSize(props.size, "14px", "16px", "20px")};
+    }
+    @media (min-width: 3840px) {
+      font-size: ${(props) => switchSize(props.size, "24px", "26px", "30px")};
+    }
+
+    @media (max-width: 1920px) {
+      font-size: ${(props) => switchSize(props.size, "12px", "13px", "15px")};
+    }
+    @media (max-width: 1680px) {
+      font-size: ${(props) => switchSize(props.size, "10px", "12px", "13px")};
+    }
+    @media (max-width: 1280px) {
+      font-size: ${(props) => switchSize(props.size, "7px", "8px", "10px")};
+    }
+  }
+
+  .widget_title {
+    gap: 0 8px;
+    align-items: center;
+    margin-bottom: 2px;
+    display: flex;
+    margin-bottom: 4px;
+
+    h6 {
+      // font-size: 13px;
+      font-family: "Inter", "Open Sans";
+      color: #333;
+      margin: 0;
+
+      @media (min-width: 2160px) {
+        font-size: ${(props) => switchSize(props.size, "16px", "18px", "22px")};
+      }
+      @media (min-width: 2560px) {
+        font-size: ${(props) => switchSize(props.size, "16px", "18px", "24px")};
+      }
+      @media (min-width: 3840px) {
+        font-size: ${(props) => switchSize(props.size, "28px", "30px", "32px")};
+      }
+
+      @media (max-width: 1920px) {
+        font-size: ${(props) => switchSize(props.size, "14px", "15px", "16px")};
+      }
+      @media (max-width: 1680px) {
+        font-size: ${(props) => switchSize(props.size, "12px", "14px", "14px")};
+      }
+      @media (max-width: 1280px) {
+        font-size: ${(props) => switchSize(props.size, "8px", "9px", "12px")};
+      }
+    }
+  }
+
+  .chatAssistant_one {
+    h6 {
+      font-size: 16px;
+      font-family: "Inter", "Open Sans";
+      color: #555;
+      margin: 16px 0 0;
+      font-style: italic;
+    }
+    ol {
+      margin: 0;
+      padding: 4px 0 0 2px;
+      list-style: none;
+      li {
+        color: #1d48eb;
+        font-size: 16px;
+        font-family: "Inter", "Open Sans";
+        margin-bottom: 4px;
+        a {
+          text-decoration: none;
+          cursor: pointer;
+          :hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+    p {
+      margin: 6px 0 0;
+    }
+  }
+
+  .wid_message {
+    font-size: 16px;
+    font-family: "Inter", "Open Sans";
+  }
+`;
+
+const FormMessage = styled.div`
+  width: 100%;
+
+  padding: 1px 10px 8px 10px !important;
+  margin-left: 14px;
+  margin-top: 20px;
+  font-family: "Inter", "Open Sans";
+  white-space: pre-wrap;
+  box-sizing: border-box;
+  word-break: break-word;
+  border-radius: 0px 6px 6px 6px;
+  color: #333;
+  // position: relative;
+  background: #f6f8fa 0% 0% no-repeat padding-box;
+  box-shadow: 0px 3px 5px #00000029;
+  border: 1px solid lightgrey;
+  // border-radius: 0px 10px 10px 10px;
+`;
+const MessageBox = styled.div`
+  width: 100%;
+  float: left;
+  display: flex;
+
+  ${LogoSize} {
+    position: absolute;
+    z-index: 1;
+    // width: 20px;
+    // height: 20px;
+    border: 1px solid #cecece;
+
+    @media (min-width: 2160px) {
+      width: ${(props) => switchSize(props.size, "36px", "42px", "46px")};
+      height: ${(props) => switchSize(props.size, "36px", "42px", "46px")};
+    }
+    @media (min-width: 2560px) {
+      width: ${(props) => switchSize(props.size, "40px", "48px", "56px")};
+      height: ${(props) => switchSize(props.size, "40px", "48px", "56px")};
+    }
+    @media (min-width: 3840px) {
+      width: ${(props) => switchSize(props.size, "64px", "72px", "80px")};
+      height: ${(props) => switchSize(props.size, "64px", "72px", "80px")};
+    }
+
+    @media (max-width: 1920px) {
+      width: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
+      height: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
+    }
+    @media (max-width: 1680px) {
+      width: ${(props) => switchSize(props.size, "28px", "32px", "34px")};
+      height: ${(props) => switchSize(props.size, "28px", "32px", "34px")};
+    }
+    @media (max-width: 1280px) {
+      width: ${(props) => switchSize(props.size, "20px", "24px", "28px")};
+      height: ${(props) => switchSize(props.size, "20px", "24px", "28px")};
+    }
+
+    img {
+      // width: 24px;
+      // height: 24px;
+
+      @media (min-width: 2160px) {
+        width: ${(props) => switchSize(props.size, "32px", "40px", "44px")};
+        height: ${(props) => switchSize(props.size, "32px", "40px", "44px")};
+      }
+      @media (min-width: 2560px) {
+        width: ${(props) => switchSize(props.size, "36px", "44px", "52px")};
+        height: ${(props) => switchSize(props.size, "36px", "44px", "52px")};
+      }
+      @media (min-width: 3840px) {
+        width: ${(props) => switchSize(props.size, "64px", "68px", "76px")};
+        height: ${(props) => switchSize(props.size, "64px", "68px", "76px")};
+      }
+
+      @media (max-width: 1920px) {
+        width: ${(props) => switchSize(props.size, "32px", "34px", "38px")};
+        height: ${(props) => switchSize(props.size, "32px", "34px", "38px")};
+      }
+      @media (max-width: 1680px) {
+        width: ${(props) => switchSize(props.size, "26px", "30px", "32px")};
+        height: ${(props) => switchSize(props.size, "26px", "30px", "32px")};
+      }
+      @media (max-width: 1280px) {
+        width: ${(props) => switchSize(props.size, "18px", "22px", "26px")};
+        height: ${(props) => switchSize(props.size, "18px", "22px", "26px")};
+      }
+    }
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  .left_arrow {
+    transform: rotate(180deg);
+  }
+
+  .arrows {
+    display: flex;
+    align-items: center;
+    margin-top: 28px;
+    img {
+      width: 16px;
+      height: 32px;
+      cursor: pointer;
+
+      @media (min-width: 2160px) {
+        width: 22px;
+        height: 44px;
+      }
+      @media (min-width: 2560px) {
+        width: 27px;
+        height: 54px;
+      }
+      @media (min-width: 3840px) {
+        width: 32px;
+        height: 64px;
+      }
+    }
+  }
+
+  .carousal_wrapper {
+    display: flex;
+    @media (max-width: 1920px) {
+      position: relative;
+      left: 10px;
+    }
+    @media (max-width: 1680px) {
+      position: relative;
+      left: 0px;
+    }
+  }
+
+  .carousal_container {
+    margin-left: auto;
+    margin-right: auto;
+    overflow: hidden;
+    list-style: none;
+    padding: 0;
+    z-index: 1;
+
+    .widget_arrows {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      width: 458px;
+      justify-content: space-between;
+      float: left;
+      left: -20px;
+      top: 44%;
+
+      div:first-child {
+        transform: rotate(180deg);
+      }
+      div:last-child {
+        position: relative;
+        right: 0px;
+      }
+
+      img {
+        width: 16px;
+        height: 32px;
+      }
+    }
+  }
+
+  .carousal_slide_container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    display: flex;
+    transition-property: transform;
+    box-sizing: content-box;
+    transition-duration: 300ms;
+
+    .tryit_cards {
+      width: 97%;
+    }
+
+    .slide,
+    .carousal_slide_container {
+      transform: translate3d(0px, 0, 0);
+    }
+
+    .slide {
+      border-radius: 10px;
+      width: 100%;
+      float: left;
+      flex-shrink: 0;
+      position: relative;
+      transition-property: transform;
+      transform: translateZ(0);
+      backface-visibility: hidden;
+      display: flex;
+      flex-direction: column;
+      margin-top: 5px;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+  }
+
+  .carousal_box_section {
+    position: relative;
+    width: 100%;
+
+    @media (min-width: 2160px) {
+      width: ${(props) => switchSize(props.size, "94.1%", "96%", "98.1%")};
+    }
+    @media (min-width: 2560px) {
+      width: ${(props) => switchSize(props.size, "94.1%", "96%", "98%")};
+    }
+    @media (min-width: 3840px) {
+      width: ${(props) => switchSize(props.size, "97%", "100%", "100%")};
+    }
+
+    @media (max-width: 1920px) {
+      left: 3px;
+    }
+    @media (max-width: 1680px) {
+      left: 1px;
+    }
+    @media (max-width: 1280px) {
+      left: 0px;
+    }
+  }
+
+  .adaptive_card_box {
+    width: 99.7%;
+    flex-direction: row-reverse;
+    display: flex;
+    background: transparent linear-gradient(180deg, #444444 0%, #222222 100%) 0%
+      0% no-repeat padding-box;
+    justify-content: space-evenly;
+    border-radius: 10px 11px 0 0;
+    align-items: center;
+
+    @media (min-width: 2160px) {
+      gap: ${(props) => switchSize(props.size, "4%", "6%", "6%")};
+      height: ${(props) => switchSize(props.size, "76px", "84px", "90px")};
+      border-radius: ${(props) =>
+        switchSize(
+          props.size,
+          "10px 12px 0 0;",
+          "12px 14px 0 0;",
+          "16px 18px 0 0;"
+        )};
+    }
+    @media (min-width: 2560px) {
+      gap: ${(props) => switchSize(props.size, "4%", "6%", "6%")};
+      height: ${(props) => switchSize(props.size, "80px", "100px", "110px")};
+      border-radius: ${(props) =>
+        switchSize(
+          props.size,
+          "16px 18px 0 0;",
+          "20px 22px 0 0;",
+          "20px 22px 0 0;"
+        )};
+    }
+    @media (min-width: 3840px) {
+      gap: ${(props) => switchSize(props.size, "8%", "10%", "10%")};
+      height: ${(props) => switchSize(props.size, "100px", "116px", "124px")};
+      border-radius: ${(props) =>
+        switchSize(
+          props.size,
+          "16px 18px 0 0;",
+          "20px 22px 0 0;",
+          "20px 22px 0 0;"
+        )};
+    }
+
+    .tryit_cards_top_left {
+      width: 28px;
+      height: 24px;
+      margin-right: 0;
+      position: relative;
+      float: left;
+      border: 1px solid rgb(225, 225, 225);
+      display: flex;
+      align-items: center;
+      background: #fff;
+      justify-content: center;
+      border-radius: 50%;
+
+      @media (min-width: 2160px) {
+        width: 36px;
+        height: 28px;
+      }
+      @media (min-width: 2560px) {
+        width: 46px;
+        height: 38px;
+      }
+      @media (min-width: 3840px) {
+        width: 56px;
+        height: 48px;
+      }
+
+      img {
+        max-width: 100%;
+        height: auto;
+        border-radius: 50%;
+      }
+    }
+  }
+
+  .chat_adaptiveCard_section {
+    margin: 10px 10px 10px 16px;
+    width: 100%;
+    float: left;
+    position: relative;
+
+    @media (max-width: 1280px) {
+      margin: 4px 10px 10px 16px;
+    }
+  }
+
+  .tryit_cards_top_right {
+    position: relative;
+    width: 78%;
+    float: left;
+    padding-left: 0;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 0 4px;
+    min-height: 54px;
+
+    @media (min-width: 2160px) {
+      width: 74%;
+    }
+  }
+
+  .timestamp {
+    color: #888;
+    font-size: 10px;
+    font-family: "Inter", "Open Sans";
+
+    @media (min-width: 2160px) {
+      font-size: ${(props) => switchSize(props.size, "12px", "12px", "16px")};
+    }
+    @media (min-width: 2560px) {
+      font-size: ${(props) => switchSize(props.size, "16px", "16px", "20px")};
+    }
+    @media (min-width: 3840px) {
+      font-size: ${(props) => switchSize(props.size, "24px", "26px", "30px")};
+    }
+
+    @media (max-width: 1920px) {
+      font-size: ${(props) => switchSize(props.size, "12px", "13px", "15px")};
+    }
+    @media (max-width: 1600px) {
+      font-size: ${(props) => switchSize(props.size, "10px", "12px", "13px")};
+    }
+    @media (max-width: 1280px) {
+      font-size: ${(props) => switchSize(props.size, "8px", "8px", "10px")};
+    }
+  }
+
+  .tryit_cards h4 {
+    font-size: 13px;
+    margin-top: 10px;
+    margin-bottom: 0px;
+    font-family: "Inter", "Open Sans";
+    width: 100%;
+    color: #fff;
+
+    @media (min-width: 2160px) {
+      font-size: ${(props) => switchSize(props.size, "16px", "16px", "21px")};
+    }
+    @media (min-width: 2560px) {
+      font-size: ${(props) => switchSize(props.size, "22px", "22px", "22px")};
+    }
+    @media (min-width: 3840px) {
+      font-size: ${(props) => switchSize(props.size, "24px", "26px", "30px")};
+      margin-top: 16px;
+    }
+
+    @media (max-width: 1920px) {
+      font-size: ${(props) => switchSize(props.size, "12px", "13px", "15px")};
+    }
+    @media (max-width: 1600px) {
+      font-size: ${(props) => switchSize(props.size, "10px", "12px", "13px")};
+    }
+    @media (max-width: 1280px) {
+      font-size: ${(props) => switchSize(props.size, "8px", "8px", "11px")};
+    }
+  }
+
+  .tryit_cards .tryit_cards_top_right p {
+    font-size: 12px;
+    color: #fff;
+    max-width: 100%;
+    font-family: "Inter", "Open Sans";
+    margin: 0 0 8px 0;
+    display: flex;
+
+    @media (min-width: 2160px) {
+      font-size: ${(props) => switchSize(props.size, "14px", "16px", "18px")};
+    }
+    @media (min-width: 2560px) {
+      font-size: ${(props) => switchSize(props.size, "18px", "20px", "22px")};
+    }
+    @media (min-width: 3840px) {
+      font-size: ${(props) => switchSize(props.size, "24px", "24px", "24px")};
+    }
+
+    a {
+      color: #fff;
+      text-decoration: none;
+    }
+  }
+
+  .tryit_ticket_details_wrapper button {
+    min-height: 28px;
+  }
+
+  .tryit_wrapper_card {
+    width: 90%;
+    margin-left: 12px;
+    margin-top: 12px;
+    border: none !important;
+
+    @media (min-width: 2160px) {
+      margin-left: ${(props) => switchSize(props.size, "28px", "28px", "28px")};
+      margin-top: ${(props) => switchSize(props.size, "34px", "34px", "34px")};
+    }
+    @media (min-width: 2560px) {
+      margin-left: ${(props) => switchSize(props.size, "20px", "25px", "20px")};
+      margin-top: ${(props) => switchSize(props.size, "30px", "45px", "30px")};
+    }
+    @media (min-width: 3840px) {
+      margin-left: ${(props) => switchSize(props.size, "30px", "44px", "44px")};
+      margin-top: ${(props) => switchSize(props.size, "56px", "56px", "56px")};
+    }
+
+    @media (max-width: 1920px) {
+      margin-left: ${(props) => switchSize(props.size, "22px", "22px", "22px")};
+      margin-top: ${(props) => switchSize(props.size, "28px", "28px", "28px")};
+    }
+    @media (max-width: 1680px) {
+      margin-left: ${(props) => switchSize(props.size, "14px", "18px", "18px")};
+      margin-top: ${(props) => switchSize(props.size, "22px", "28px", "28px")};
+    }
+    @media (max-width: 1280px) {
+      margin-left: ${(props) => switchSize(props.size, "10px", "10px", "10px")};
+      margin-top: ${(props) => switchSize(props.size, "15px", "15px", "15px")};
+    }
+
+    @media (max-width: 1280px) {
+      margin-left: 16px;
+      margin-top: 22px;
+    }
+
+    .adaptive_tail_icon {
+      position: absolute;
+    }
+    .adaptive_tail_icon svg {
+      width: 6px;
+      height: 6px;
+      top: 0px;
+      margin-left: -5px;
+      position: absolute;
+    }
+
+    .tryit_cards {
+      margin-top: 0px;
+      width: 98.2%;
+      min-height: 200px;
+      background: #ffffff 0% 0% no-repeat padding-box;
+      box-shadow: 0px 3px 6px #00000029 !important;
+      border-radius: 10px;
+      padding: 12px 30px 12px 0px;
+      float: left;
+
+      @media (min-width: 2160px) {
+        padding: ${(props) =>
+          switchSize(
+            props.size,
+            "12px 30px 12px 0px",
+            "12px 30px 12px 0px",
+            "12px 36px 12px 2px"
+          )};
+        width: 99%;
+      }
+      @media (min-width: 2560px) {
+        padding: ${(props) =>
+          switchSize(
+            props.size,
+            "12px 30px 12px 0px",
+            "12px 30px 12px 0px",
+            "24px 44px 24px 20px"
+          )};
+      }
+      @media (min-width: 3840px) {
+        padding: ${(props) =>
+          switchSize(
+            props.size,
+            "24px 50px 24px 25px",
+            "24px 50px 24px 25px",
+            "24px 50px 24px 25px"
+          )};
+      }
+
+      .widget_title {
+        padding-left: 22px;
+      }
+
+      .tryit_ticket_wrapper {
+        padding: 16px 0px 0 16px;
+        box-shadow: none;
+        width: 95.5%;
+        max-height: 164px;
+        overflow-y: scroll;
+        background: #fff;
+        border-radius: 0px 10px 10px 10px;
+        float: left;
+
+        @media (min-width: 2160px) {
+          max-height: ${(props) =>
+            switchSize(props.size, "186px", "190px", "230px")};
+        }
+        @media (min-width: 2560px) {
+          max-height: ${(props) =>
+            switchSize(props.size, "186px", "190px", "230px")};
+        }
+        @media (min-width: 3840px) {
+          max-height: ${(props) =>
+            switchSize(props.size, "280px", "328px", "328px")};
+        }
+
+        .tryit_ticket_details_wrapper {
+          grid-template-columns: auto;
+
+          .tryit_ticket_details {
+            .tryit_ticket_colun {
+              width: auto;
+            }
+          }
+        }
+        div:nth-child(3) h6 {
+          width: 35%;
+        }
+        .tryit_ticket_details span {
+          position: relative;
+          bottom: 0px;
+        }
+      }
+
+      .widget_title {
+        gap: 0 8px;
+        align-items: center;
+        margin-bottom: 2px;
+        display: flex;
+
+        h6 {
+          font-size: 13px;
+          font-family: "Inter", "Open Sans";
+          color: #333;
+          margin: 0;
+
+          @media (min-width: 2160px) {
+            font-size: ${(props) =>
+              switchSize(props.size, "16px", "18px", "22px")};
+          }
+          @media (min-width: 2560px) {
+            font-size: ${(props) =>
+              switchSize(props.size, "18px", "18px", "24px")};
+          }
+          @media (min-width: 3840px) {
+            font-size: ${(props) =>
+              switchSize(props.size, "28px", "30px", "32px")};
+          }
+
+          @media (max-width: 1920px) {
+            font-size: ${(props) =>
+              switchSize(props.size, "14px", "15px", "16px")};
+          }
+          @media (max-width: 1600px) {
+            font-size: ${(props) =>
+              switchSize(props.size, "12px", "13px", "14px")};
+          }
+          @media (max-width: 1280px) {
+            font-size: ${(props) =>
+              switchSize(props.size, "9px", "9px", "12px")};
+          }
+        }
+      }
+    }
+    .tryit_cards .tryit_cards_wrapper {
+      width: 99%;
+      float: left;
+      background: #fff;
+      border-top: none;
+      border-bottom-right-radius: 10px;
+      border-bottom-left-radius: 12px;
+      border: 1px solid #c8c8c8;
+
+      @media (min-width: 2160px) {
+        font-size: ${(props) => switchSize(props.size, "20px", "21px", "22px")};
+      }
+      @media (min-width: 2560px) {
+        font-size: ${(props) => switchSize(props.size, "18px", "18px", "24px")};
+        width: 99.4%;
+      }
+      @media (min-width: 3840px) {
+        width: 99.3%;
+      }
+    }
 
-  svg {
-    width: 6px;
-    height: 6px;
-    top: 0px;
-    left: -6px;
-    position: absolute;
-    color: #fff;
-  }
-  @media (max-width: 1736px) {
-    padding: 8px;
+    .tryit_ticket_wrapper.tryit_button_wrapper {
+      padding-top: 0px;
+      display: flex;
+      justify-content: flex-start;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 0 8px;
+      margin-bottom: 12px;
+      padding-bottom: 6px;
+    }
+
+    .tryit_button_wrapper .tryit_ticket_details_wrapper {
+      left: inherit;
+      width: max-content;
+      width: 100%;
+
+      button {
+        margin-top: 0px;
+        min-width: unset;
+        width: 100%;
+        max-width: 100%;
+        margin-right: 0px;
+        margin-bottom: 6px;
+        :hover {
+          box-shadow: 0px 3px 5px #00000029;
+        }
+      }
+    }
   }
-  @media (max-width: 1600px) {
-    padding: 5px 8px;
+
+  .tryit_ticket_details_wrapper .tryit_ticket_details {
+    flex-direction: row;
+    gap: 0 8px;
+    align-items: baseline;
+    display: flex;
+    margin-bottom: 10px;
   }
-  .timestamp {
-    color: #888;
-    // font-size: 10px;
-    font-family: "Gordita-Regular", "Open Sans", sans-serif;
-    position: relative;
-    bottom: 0px;
-    text-transform: uppercase;
+  .tryit_ticket_wrapper h6 {
+    font-size: 12px;
+    width: 35%;
+    margin: 0;
+    font-family: "Inter", "Open Sans";
 
     @media (min-width: 2160px) {
-      font-size: ${(props) => switchSize(props.size, "16px", "19px", "21px")};
+      font-size: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
     }
     @media (min-width: 2560px) {
-      font-size: ${(props) => switchSize(props.size, "14px", "16px", "20px")};
+      font-size: ${(props) => switchSize(props.size, "18px", "18px", "24px")};
     }
     @media (min-width: 3840px) {
-      font-size: ${(props) => switchSize(props.size, "24px", "26px", "30px")};
+      font-size: ${(props) => switchSize(props.size, "28px", "30px", "32px")};
     }
 
     @media (max-width: 1920px) {
-      font-size: ${(props) => switchSize(props.size, "12px", "13px", "15px")};
+      font-size: ${(props) => switchSize(props.size, "14px", "15px", "16px")};
     }
-    @media (max-width: 1680px) {
-      font-size: ${(props) => switchSize(props.size, "10px", "12px", "13px")};
+    @media (max-width: 1600px) {
+      font-size: ${(props) => switchSize(props.size, "12px", "13px", "14px")};
     }
     @media (max-width: 1280px) {
-      font-size: ${(props) => switchSize(props.size, "7px", "8px", "10px")};
+      font-size: ${(props) => switchSize(props.size, "9px", "9px", "12px")};
     }
   }
+  .tryit_ticket_wrapper p {
+    font-size: 12px;
+    line-height: normal;
+    position: relative;
+    bottom: 1px;
+    width: 60%;
+    font-family: "Inter", "Open Sans";
+    margin: 0;
+    word-break: break-word;
 
-  .widget_title {
-    gap: 0 8px;
-    align-items: center;
-    margin-bottom: 2px;
-    display: flex;
-    margin-bottom: 4px;
-
-    h6 {
-      // font-size: 13px;
-      font-family: "Gordita-Medium", "Open Sans", sans-serif;
-      color: #333;
-      margin: 0;
-
-      @media (min-width: 2160px) {
-        font-size: ${(props) => switchSize(props.size, "16px", "18px", "22px")};
-      }
-      @media (min-width: 2560px) {
-        font-size: ${(props) => switchSize(props.size, "16px", "18px", "24px")};
-      }
-      @media (min-width: 3840px) {
-        font-size: ${(props) => switchSize(props.size, "28px", "30px", "32px")};
-      }
-
-      @media (max-width: 1920px) {
-        font-size: ${(props) => switchSize(props.size, "14px", "15px", "16px")};
-      }
-      @media (max-width: 1680px) {
-        font-size: ${(props) => switchSize(props.size, "12px", "14px", "14px")};
-      }
-      @media (max-width: 1280px) {
-        font-size: ${(props) => switchSize(props.size, "8px", "9px", "12px")};
-      }
+    @media (min-width: 2160px) {
+      font-size: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
+    }
+    @media (min-width: 2560px) {
+      font-size: ${(props) => switchSize(props.size, "18px", "18px", "24px")};
+    }
+    @media (min-width: 3840px) {
+      font-size: ${(props) => switchSize(props.size, "28px", "30px", "32px")};
     }
-  }
 
-  .chatAssistant_one {
-    h6 {
-      font-size: 16px;
-      font-family: "Gordita-Regular", "Open Sans", sans-serif;
-      color: #555;
-      margin: 16px 0 0;
-      font-style: italic;
+    @media (max-width: 1920px) {
+      font-size: ${(props) => switchSize(props.size, "14px", "15px", "16px")};
     }
-    ol {
-      margin: 0;
-      padding: 4px 0 0 2px;
-      list-style: none;
-      li {
-        color: #1d48eb;
-        font-size: 16px;
-        font-family: "Gordita-Regular", "Open Sans", sans-serif;
-        margin-bottom: 4px;
-        a {
-          text-decoration: none;
-          cursor: pointer;
-          :hover {
-            text-decoration: underline;
-          }
-        }
-      }
+    @media (max-width: 1600px) {
+      font-size: ${(props) => switchSize(props.size, "12px", "13px", "14px")};
     }
-    p {
-      margin: 6px 0 0;
+    @media (max-width: 1280px) {
+      font-size: ${(props) => switchSize(props.size, "9px", "9px", "12px")};
     }
   }
 
-  .wid_message {
-    font-size: 16px;
-    font-family: "Gordita-Regular", "Open Sans", sans-serif;
+  .tryit_ticket_wrapper p:first-child {
+    bottom: 3px;
   }
 `;
-const MessageBox = styled.div`
+
+const FormBox = styled.div`
   width: 100%;
-  float: left;
+  position: relative;
   display: flex;
 
   ${LogoSize} {
@@ -1326,7 +2036,7 @@ const MessageBox = styled.div`
   .timestamp {
     color: #888;
     font-size: 10px;
-    font-family: "Gordita-Regular", "Open Sans", sans-serif;
+    font-family: "'Inter', 'Open Sans'";
 
     @media (min-width: 2160px) {
       font-size: ${(props) => switchSize(props.size, "12px", "12px", "16px")};
@@ -1353,7 +2063,7 @@ const MessageBox = styled.div`
     font-size: 13px;
     margin-top: 10px;
     margin-bottom: 0px;
-    font-family: "Gordita-Medium", "Open Sans", sans-serif;
+    font-family: "'Inter', 'Open Sans'";
     width: 100%;
     color: #fff;
 
@@ -1383,7 +2093,7 @@ const MessageBox = styled.div`
     font-size: 12px;
     color: #fff;
     max-width: 100%;
-    font-family: "Gordita-Regular", "Open Sans", sans-serif;
+    font-family: "'Inter', 'Open Sans'";
     margin: 0 0 8px 0;
     display: flex;
 
@@ -1547,7 +2257,7 @@ const MessageBox = styled.div`
 
         h6 {
           font-size: 13px;
-          font-family: "Gordita-Medium", "Open Sans", sans-serif;
+          font-family: "'Inter', 'Open Sans'";
           color: #333;
           margin: 0;
 
@@ -1641,7 +2351,7 @@ const MessageBox = styled.div`
     font-size: 12px;
     width: 35%;
     margin: 0;
-    font-family: "Gordita-Medium", "Open Sans", sans-serif;
+    font-family: "'Inter', 'Open Sans'";
 
     @media (min-width: 2160px) {
       font-size: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
@@ -1669,7 +2379,7 @@ const MessageBox = styled.div`
     position: relative;
     bottom: 1px;
     width: 60%;
-    font-family: "Gordita-Regular", "Open Sans", sans-serif;
+    font-family: "'Inter', 'Open Sans'";
     margin: 0;
     word-break: break-word;
 
@@ -1932,7 +2642,7 @@ const WidgetUpdateButton = styled.div`
       cursor: pointer;
       margin-top: 12px;
       font-size: 14px;
-      font-family: "Gordita-Regular";
+      font-family: "Inter";
       display: flex;
       align-items: center;
       padding: 6px 12px;
@@ -1967,7 +2677,7 @@ export const Button = styled.button`
   outline: 0;
   cursor: pointer;
   margin-top: 4px;
-  font-family: "Gordita-Regular";
+  font-family: "Inter";
   display: inline-flex;
   align-items: center;
   padding: 6px 12px;
@@ -2067,8 +2777,8 @@ const InputMessageChat = styled.div`
   padding: 8px 16px 4px 16px;
   border-top: 1px solid #e5e5e5;
   border-bottom: 1px solid #e5e5e5;
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
 
   .widget_input_message_section {
     display: flex;
@@ -2096,7 +2806,7 @@ const InputMessageChat = styled.div`
         border: none;
         background-color: transparent;
         outline: none;
-        font-family: "Gordita-Regular";
+        font-family: "Inter";
         // font-size: 14px !important;
         // margin-top: 5px;
         // line-height: 20px;
@@ -2401,7 +3111,7 @@ const ButtonWrapper = styled.div`
       cursor: pointer;
       margin-top: 12px;
       font-size: 12px;
-      font-family: "Gordita-Regular";
+      font-family: "Inter";
       display: inline-flex;
       align-items: center;
       padding: 6px 12px;
@@ -2452,7 +3162,7 @@ const style = {
   overflowWrap: "break-word",
   textAlign: "start",
   height: "38px",
-  fontFamily: "Gordita-Regular",
+  fontFamily: "Inter",
 };
 
 const App = ({
@@ -2493,7 +3203,7 @@ const App = ({
 
     // enableConsent,
   });
-
+  console.log("widget", widget);
   const conversationId = messages[0]?.message?.system?.conversationId;
 
   const [open, setOpen] = useState(openByDefault);
@@ -2507,20 +3217,14 @@ const App = ({
       setSourceState(widget?.source_id);
     }
   }, [widget]);
-  
+
   useEffect(() => {
     if (!widget?.id) return; // Prevent API call if widget ID is undefined
 
-  
-
     axios
-      .get(
-        `http://dev.pagergpt.ai/wgt-hook/public/${widget?.workspace}/${widget.id}/form`
-      )
+      .get(`${endpoint}/public/${widget?.workspace}/${widget.id}/form`)
       .then((res) => {
-    
         setFields(res.data);
-
       })
       .catch((err) => {
         console.error("Error fetching form:", err);
@@ -2550,6 +3254,7 @@ const App = ({
               exit={exit}
               logoshape={style.logo_shape}
             />
+            <EndPointProvider endpoint={endpoint}>
             <ChatContentWrapper
               size={widget_size}
               clsassName="widget_chat_content"
@@ -2573,23 +3278,56 @@ const App = ({
                   isVisible={isVisible}
                   setIsVisible={setIsVisible}
                   setSourceState={setSourceState}
+                  userDetails={userDetails}
                 />
               )}
-          
-              {((sourceState &&
-              typeof sourceState === "string" &&
-              sourceState.includes("browser") &&
-              fields && widget?.lead_form_id !== null) || widget.user_consent == false && sourceState == "new_user" && widget?.lead_form_id !== null && fields)? (
-                <InputConverter
-                  formData={fields}
-                  conversationId={conversationId}
-                  widgetId={widget_id}
-                  workspace={widget?.workspace}
-                  setFormSubmit={setFormSubmit}
-                  setSourceState={setSourceState}
-                />
+
+              {(sourceState &&
+                typeof sourceState === "string" &&
+                sourceState.includes("browser") &&
+                fields &&
+                widget?.lead_form_id !== null) ||
+              (widget.user_consent == false &&
+                sourceState == "new_user" &&
+                widget?.lead_form_id !== null &&
+                fields) ? (
+                <>
+                  <FormBox>
+                    <LogoSize
+                      style={{
+                        borderRadius: "50%",
+                        top: "2px",
+                        height: "24.9px",
+                        width: "24px",
+                      }}
+                    >
+                      <img
+                        alt={"logo"}
+                        src={
+                          (widget && widget.logo_url) ||
+                          "https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
+                        }
+                        style={{
+                          width: "26px",
+                          height: "26px",
+                        }}
+                      />
+                    </LogoSize>
+                    <FormMessage>
+                      <InputConverter
+                        formData={fields}
+                        conversationId={conversationId}
+                        widget={widget}
+                        workspace={widget?.workspace}
+                        setFormSubmit={setFormSubmit}
+                        setSourceState={setSourceState}
+                      />
+                    </FormMessage>
+                  </FormBox>
+                </>
               ) : null}
             </ChatContentWrapper>
+            </EndPointProvider>
             <Footer
               {...{ sendMessage, onFileUpload }}
               widget={widget}
@@ -2758,12 +3496,10 @@ const BodyWrapper = ({
   widget,
   style,
 }) => {
-
-
   return (
     <>
       {messages.map((message, key) => (
-        <>       
+        <>
           {((sourceState == "new_user" && widget.user_consent == false) ||
             sourceState !== "new_user") && (
             <Message
@@ -2778,7 +3514,6 @@ const BodyWrapper = ({
           )}
         </>
       ))}
-     
     </>
   );
 };
@@ -3145,6 +3880,7 @@ const ReceivedCarousalOutput = ({
 
 const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
   const scale = useScaleContext();
+
   return (
     <ChatHeader
       className="widget_chat_top"
@@ -3185,7 +3921,7 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
           </Paragraph>
         </ContentHeaderLeft>
         <ContentHeaderRight size={scale.widgetSize}>
-          <IconSpan
+          {/* <IconSpan
             className="relative restart"
             onClick={restart}
             style={{ fill: widget.primary_color }}
@@ -3207,8 +3943,26 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
               />
             </svg>
             <label className="restart_content">Restart Chat</label>
-          </IconSpan>
-          <IconSpan
+          </IconSpan> */}
+          <div
+            style={{
+              display: "flex",
+              gap: "8px",
+            }}
+          >
+            <button
+              onClick={restart}
+              style={{
+                color: `${widget.primary_color}`,
+                background: `${widget.accent_color}`,
+                border: "1px solid white",
+                padding: "10px 15px",
+                borderRadius: "8px",
+              }}
+            >
+              Restart
+            </button>
+            {/* <IconSpan
             className="relative close_section"
             onClick={exit}
             style={{ fill: widget.primary_color }}
@@ -3228,7 +3982,20 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
               <path d="M16.8 14.9l4.2-4.2.1-.1c.4-.5.4-1.3-.1-1.7-.5-.4-1.3-.4-1.7.1l-4.2 4.2L10.9 9l-.1-.1c-.2-.2-.5-.3-.9-.3-.3 0-.6.1-.8.4-.3.2-.4.5-.3.8 0 .3.2.6.4.8l4.2 4.2L9.2 19c-.2.2-.4.5-.4.9 0 .7.5 1.2 1.2 1.2.3 0 .6-.1.9-.4l4.2-4.2 4.2 4.2-.1.3h.9c.3 0 .6-.1.9-.4.5-.5.5-1.2 0-1.7l-4.2-4z" />
             </svg>
             <label className=""> End Chat </label>
-          </IconSpan>
+          </IconSpan> */}
+            <button
+              onClick={exit}
+              style={{
+                color: `${widget.primary_color}`,
+                background: `${widget.accent_color}`,
+                border: "1px solid white",
+                padding: "10px 15px",
+                borderRadius: "8px",
+              }}
+            >
+              Exit
+            </button>
+          </div>
         </ContentHeaderRight>
       </ContentHeader>
     </ChatHeader>
@@ -3247,6 +4014,7 @@ const AiResponse = ({
   const scale = useScaleContext();
   return (
     <>
+    
       <MessageBox size={scale.widgetSize} className="widget_chat_logs">
         <LogoSize style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}>
           <img
@@ -3263,6 +4031,7 @@ const AiResponse = ({
             <div className="timestamp">{formatTimeAMPM(timestamp)}</div>
           </div>
           <div>
+            {console.log("output text", output.text)}
             <AssistantMd mdText={output.text}></AssistantMd>
           </div>
         </ChatMessage>
@@ -3290,6 +4059,7 @@ const ChatAssistant = ({
 }) => {
   // const [hover, setHover] = useState(false);
   const scale = useScaleContext();
+  console.log("chat assistant", widget);
   if (outputStruct.response_type === "ai_response") {
     return (
       <AiResponse
@@ -3306,7 +4076,14 @@ const ChatAssistant = ({
   return (
     <>
       <MessageBox size={scale.widgetSize} className="widget_chat_logs">
-        <LogoSize style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}>
+        <LogoSize
+          style={{
+            borderRadius: logoshape == "box" ? "5%" : "50%",
+            width: "24.9px",
+            height: "24px",
+            top: "12px",
+          }}
+        >
           <img
             alt={"logo"}
             src={
@@ -3317,7 +4094,12 @@ const ChatAssistant = ({
         </LogoSize>
         <ChatMessage size={scale.widgetSize}>
           <div className="flex widget_title chat_assisitant">
-            <h6>{widget && widget.name}</h6>
+            <h6 style={{
+              fontWeight: "500",
+              fontSize: "12px",
+              fontStyle: "normal",
+              lineHeight: "18px",
+              }}>{widget && widget.name}</h6>
             <div className="timestamp">{formatTimeAMPM(timestamp)}</div>
           </div>
           {type === "text_with_btns" ? (
@@ -3326,6 +4108,7 @@ const ChatAssistant = ({
             </div>
           ) : (
             <div>
+              {console.log("output struct", outputStruct.value)}
               <AssistantMd mdText={outputStruct.value}></AssistantMd>
             </div>
           )}
@@ -3377,6 +4160,16 @@ const FeedbackBtn = ({
       <Button
         // onMouseOver={() => setHovered(true)}
         // onMouseLeave={() => setHovered(false)}
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          width: "32px",
+          height: "32px",
+          padding: "6px",
+          borderRadius: "9999px",
+          border: "none",
+          marginTop: "8px",
+        }}
         type="button"
         onClick={() => {
           if (action.contract_action) {
@@ -3393,7 +4186,50 @@ const FeedbackBtn = ({
         className="widget_btn"
         size={scale.widgetSize}
       >
-        <AssistantMd mdText={label} />
+        {console.log("label", label)}
+        {/* <AssistantMd mdText={label} /> */}
+        {label === "Satisfied" ? (
+          <svg
+            xmlns="
+  http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            width="24px"
+            height="24px"
+          >
+            <path
+              d="M15.1615 7.17025L15.2093 7.04661C15.2927 6.83088 15.3344 6.72298 15.3656 6.62109C15.6691 5.6323 15.4418 4.55693 14.7642 3.7755C14.6943 3.69498 14.6126 3.6132 14.449 3.44965C14.3543 3.35494 14.3069 3.30758 14.265 3.27382C13.8463 2.93673 13.236 2.99095 12.8833 3.39658C12.848 3.4372 12.8097 3.49217 12.7332 3.60209L9.72134 7.92817C9.08193 8.8466 8.76223 9.30581 8.53555 9.8057C8.33438 10.2494 8.18798 10.7159 8.09959 11.1949C8 11.7347 8 12.2942 8 13.4133V15.2006C8 16.8808 8 17.7209 8.32698 18.3626C8.6146 18.9271 9.07354 19.386 9.63803 19.6737C10.2798 20.0006 11.1198 20.0006 12.8 20.0006H16.309C17.7762 20.0006 18.5097 20.0006 19.1014 19.7317C19.6228 19.4946 20.0655 19.1132 20.3771 18.6326C20.7306 18.0872 20.8392 17.3617 21.0562 15.9107L21.5879 12.3557C21.73 11.4061 21.801 10.9312 21.6589 10.562C21.5342 10.2379 21.3009 9.96707 20.9988 9.79578C20.6546 9.60064 20.1745 9.60064 19.2143 9.60064H16.8278C16.4565 9.60064 16.2708 9.60064 16.1339 9.575C15.3205 9.42264 14.7842 8.64037 14.9353 7.82676C14.9607 7.68983 15.0276 7.51663 15.1615 7.17025Z"
+              stroke="#1EC959"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M3 11.5006C3 10.1199 4.11929 9.00064 5.5 9.00064C6.88071 9.00064 8 10.1199 8 11.5006V17.5006C8 18.8814 6.88071 20.0006 5.5 20.0006C4.11929 20.0006 3 18.8814 3 17.5006V11.5006Z"
+              stroke="#1EC959"
+              strokeWidth="1.7"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        ) : (
+          <svg
+            xmlns="
+    http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            width="24px"
+            height="24px"
+          >
+            <path
+              d="M16 11.0638V12.5C16 13.8807 17.1193 15 18.5 15C19.8807 15 21 13.8807 21 12.5V6.5C21 5.11929 19.8807 4 18.5 4C17.1193 4 16 5.11929 16 6.5V8.26803M16 11.0638C15.9981 11.8772 15.9848 12.3486 15.9004 12.8057C15.812 13.2848 15.6657 13.7513 15.4645 14.1949C15.2378 14.6948 14.9181 15.154 14.2787 16.0725L11.2669 20.3986C11.1903 20.5085 11.1521 20.5634 11.1167 20.6041C10.764 21.0097 10.1537 21.0639 9.73502 20.7268C9.69309 20.6931 9.64573 20.6457 9.55102 20.551C9.38747 20.3874 9.30569 20.3057 9.23586 20.2251C8.55824 19.4437 8.33094 18.3683 8.63439 17.3796C8.66566 17.2777 8.70737 17.1698 8.79074 16.954L8.83852 16.8304C8.97239 16.484 9.03932 16.3108 9.06475 16.1739C9.21585 15.3603 8.67951 14.578 7.86615 14.4256C7.72925 14.4 7.54357 14.4 7.17222 14.4H4.7857C3.82553 14.4 3.34542 14.4 3.00125 14.2049C2.69915 14.0336 2.46584 13.7628 2.34113 13.4387C2.19905 13.0694 2.27007 12.5946 2.4121 11.645L2.94384 8.08995C3.16087 6.63894 3.26938 5.91343 3.62294 5.36807C3.93452 4.88744 4.3772 4.50605 4.89864 4.26899C5.4903 4 6.22388 4 7.69103 4H11.2C12.8802 4 13.7203 4 14.362 4.32698C14.9265 4.6146 15.3854 5.07354 15.673 5.63803C15.9635 6.20815 15.9964 6.93482 16 8.26803M16 11.0638V8.26803"
+              stroke="#ED3535"
+              strokeWidth="1.7"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        )}
       </Button>
     </WidgetUpdateButton>
   );
@@ -3441,6 +4277,16 @@ const DisplayLineBreaks = ({ text }) => {
   let texts = text.split("\n");
   let lastOne = texts[texts.length - 1];
   let exceptLastOne = texts.slice(0, texts.length - 1);
+
+  console.log(
+    "DEBUG",
+    texts,
+    lastOne,
+    exceptLastOne.reduce(
+      (arr, text) => [...arr, text, <br key={arr.length} />],
+      []
+    )
+  );
   return (
     <>
       {exceptLastOne.reduce(
@@ -3486,14 +4332,21 @@ const UserAssistant = ({
         >
           <div
             className="flex widget_title user_chat"
-            style={{ color: "#fff" }}
+            style={{ color: "#000" }}
           >
-            <h6>{SYS_FirstName}</h6>
+            <h6 style={{
+              color:`${widget.user_message_text_color}`,
+              fontSize: "12px",
+              fontStyle: "normal",
+              fontWeight: "500",
+              lineHeight: "18px"
+              
+            }}>{SYS_FirstName}</h6>
             <div className="timestamp" style={{ color: "#fff", gap: 0 }}>
               {formatTimeAMPM(timestamp)}
             </div>
           </div>
-          <div style={{ color: "#fff" }}>
+          <div style={{ color: `${widget.user_message_text_color}` }}>
             {(SYS_UPLOADED_FILE && "File uploaded") || (
               <DisplayURL text={input.value} />
             )}