pager-widget 0.2.0 → 0.2.1

package/App.jsx

@@ -1009,10 +1009,720 @@ const ChatMessage = styled.div`
     font-family: "Gordita-Regular", "Open Sans", sans-serif;
   }
 `;
+
+const FormMessage = styled.div`
+  width: 100%;
+
+  padding: 1px 10px 8px 16px !important;
+  margin-left: 14px;
+  margin-top: 20px;
+  font-family: "Gordita-Regular", "Open Sans", sans-serif;
+  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;
+  box-shadow: 0px 3px 5px #00000029;
+  border: 1px solid lightgrey;
+  // border-radius: 0px 10px 10px 10px;
+`;
 const MessageBox = styled.div`
   width: 100%;
-  float: left;
+  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: "Gordita-Regular", "Open Sans", sans-serif;
+
+    @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: "Gordita-Medium", "Open Sans", sans-serif;
+    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: "Gordita-Regular", "Open Sans", sans-serif;
+    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: "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, "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%;
+      }
+    }
+
+    .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;
+        }
+      }
+    }
+  }
+
+  .tryit_ticket_details_wrapper .tryit_ticket_details {
+    flex-direction: row;
+    gap: 0 8px;
+    align-items: baseline;
+    display: flex;
+    margin-bottom: 10px;
+  }
+  .tryit_ticket_wrapper h6 {
+    font-size: 12px;
+    width: 35%;
+    margin: 0;
+    font-family: "Gordita-Medium", "Open Sans", sans-serif;
+
+    @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")};
+    }
+
+    @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_ticket_wrapper p {
+    font-size: 12px;
+    line-height: normal;
+    position: relative;
+    bottom: 1px;
+    width: 60%;
+    font-family: "Gordita-Regular", "Open Sans", sans-serif;
+    margin: 0;
+    word-break: break-word;
+
+    @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")};
+    }
+
+    @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_ticket_wrapper p:first-child {
+    bottom: 3px;
+  }
+`;
+
+const FormBox = styled.div`
+  width: 100%;
+  position: relative;
   display: flex;
+  
 
   ${LogoSize} {
     position: absolute;
@@ -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,16 @@ 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`
       )
       .then((res) => {
-    
         setFields(res.data);
-
       })
       .catch((err) => {
         console.error("Error fetching form:", err);
@@ -2573,21 +3279,53 @@ 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: "28px",
+                        width: "28px",
+                      }}
+                    >
+                      <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}
+                        widgetId={widget_id}
+                        workspace={widget?.workspace}
+                        setFormSubmit={setFormSubmit}
+                        setSourceState={setSourceState}
+                      />
+                    </FormMessage>
+                  </FormBox>
+                </>
               ) : null}
             </ChatContentWrapper>
             <Footer
@@ -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"
@@ -3263,6 +3999,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 +4027,7 @@ const ChatAssistant = ({
 }) => {
   // const [hover, setHover] = useState(false);
   const scale = useScaleContext();
+  console.log("chat assistant", widget);
   if (outputStruct.response_type === "ai_response") {
     return (
       <AiResponse
@@ -3326,8 +4064,9 @@ const ChatAssistant = ({
             </div>
           ) : (
             <div>
+              {console.log("output struct", outputStruct.value)}
               <AssistantMd mdText={outputStruct.value}></AssistantMd>
-            </div>
+          </div>
           )}
         </ChatMessage>
       </MessageBox>
@@ -3377,6 +4116,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 +4142,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 +4233,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 +4288,14 @@ const UserAssistant = ({
         >
           <div
             className="flex widget_title user_chat"
-            style={{ color: "#fff" }}
+            style={{ color: "#000" }}
           >
             <h6>{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} />
             )}