Spaces:

bacancydataprophets
/

bmoxi

Runtime error

App Files Files Community

HarshSanghavi commited on Jul 25, 2024

Commit

f88e183

verified ·

1 Parent(s): 177f919

update UI

Browse files

Files changed (1) hide show

templates/chatwidget.html +746 -705

templates/chatwidget.html CHANGED Viewed

@@ -1,535 +1,532 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Document</title>
-</head>
-<body>
-  <div id="body">
-    <style>
-       body {
-    /* Add the background image */
-    background-image: url('mu-logo-mood-03.jpg');
-    /* Adjust background properties */
-    background-repeat: no-repeat;
-    background-size: cover; /* or contain, depending on your preference */
-    /* Add other background properties if needed */
-  }
-      .cm-msg-text {
-        overflow-wrap: break-word;
-        /* Break long words */
-        word-wrap: break-word;
-        /* Break long words */
-        word-break: break-word;
-        /* Break words */
-        max-width: 100%;
-        /* Limit maximum width */
-      }
-      [data-block=list11-v4-1-1-b2] .sw-border-bottom-color-000000 {
-        border-bottom-color: #000000 !important;
-      }
-      [data-block=list11-v4-1-1-b2] .sw-border-bottom-width-none {
-        border-bottom-width: 0px !important;
-      }
-      [data-block=list11-v4-1-1-b2] .sw-border-bottom-style-none {
-        border-bottom-style: none !important;
-      }
-      [data-block=list11-v4-1-1-b2] .sw-border-top-color-000000 {
-        border-top-color: #000000 !important;
-      }
-      [data-block=list11-v4-1-1-b2] .sw-border-top-width-none {
-        border-top-width: 0px !important;
-      }
-      [data-block=list11-v4-1-1-b2] .sw-border-top-style-none {
-        border-top-style: none !important;
-      }
-      [data-block=list11-v4-1-1-b2] .sw-padding-bottom-m {
-        padding-bottom: 3rem !important;
-      }
-      [data-block=list11-v4-1-1-b2] .sw-padding-top-m {
-        padding-top: 3rem !important;
-      }
-      [data-block=list11-v4-1-1-b2] .sw-background-color-ffffff {
-        background-color: #ffffff !important;
-      }
-      #body {
-        z-index: 1999;
-        position: fixed;
-        margin: 0;
-        padding: 0;
-        font-family: "Lato", sans-serif;
-        background-color: #f6f7f9;
-      }
-      @mixin chabox-container {
-        display: flex;
-        position: absolute;
-        box-shadow: 5px 5px 25px 0 rgba(46, 61, 73, 0.2);
-        flex-direction: column;
-      }
-      @mixin chatbox-header {
-        box-sizing: border-box;
-        display: flex;
-        width: 100%;
-        padding: 16px;
-        color: #fff;
-        background-color: #0360a5;
-        align-items: center;
-        justify-content: space-around;
-      }
-      @mixin chatbox-main {
-        box-sizing: border-box;
-        width: 100%;
-        padding: calc(2 * 16px) 16px;
-        line-height: calc(16px + 16px / 2);
-        color: #888;
-        text-align: center;
-      }
-      @mixin chatbox-footer {
-        box-sizing: border-box;
-        display: flex;
-        width: 100%;
-        padding: 16px;
-        border-top: 1px solid #ddd;
-        align-items: center;
-        justify-content: space-around;
-      }
-      @mixin chatbox-floating-button {
-        position: fixed;
-        bottom: 0;
-        right: 0;
-        width: 52px;
-        height: 52px;
-        color: #fff;
-        background-color: #0360a5;
-        background-position: center center;
-        background-repeat: no-repeat;
-        box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.15);
-        border: 0;
-        border-radius: 50%;
-        cursor: pointer;
-      }
-      h1 {
-        margin: 0;
-        font-size: 16px;
-        line-height: 1;
-      }
-      button {
-        color: inherit;
-        background-color: transparent;
-        border: 0;
-        outline: 0 !important;
-        cursor: pointer;
-      }
-      #center-text {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-      }
-      #chat-circle {
-        position: fixed;
-        bottom: 50px;
-        z-index: 1999;
-        align-items: center;
-        right: 50px;
-        background: #000;
-        width: 60px;
-        justify-content: center;
-        height: 60px;
-        display: flex;
-        border-radius: 50%;
-        color: white;
-        padding: 8px;
-        cursor: pointer;
-        box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.4),
-          0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-      }
-      .btn#my-btn {
-        background: white;
-        padding-top: 13px;
-        padding-bottom: 12px;
-        border-radius: 45px;
-        padding-right: 40px;
-        padding-left: 40px;
-        color: #5865c3;
-      }
-      #chat-overlay {
-        background: rgba(255, 255, 255, 0.1);
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        display: none;
-      }
-      .chat-box {
-        display: none;
-        background: #efefef;
-        position: fixed;
-        right: 30px;
-        z-index: 1999;
-        bottom: 50px;
-        width: 350px;
-        max-width: 85vw;
-        max-height: 100vh;
-        border-radius: 5px;
-        /*   box-shadow: 0px 5px 35px 9px #464a92; */
-        box-shadow: 0px 5px 35px 9px #ccc;
-      }
-      .chat-box-toggle {
-        float: right;
-        margin-right: 15px;
-        cursor: pointer;
-      }
-      .chat-box-header {
-        background: #000;
-        height: 70px;
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
-        color: white;
-        text-align: center;
-        font-size: 20px;
-        padding-top: 17px;
-        padding-left: 36px;
-      }
-      .chat-box-body {
-        position: relative;
-        height: 370px;
-        height: auto;
-        border: 1px solid #ccc;
-        overflow: hidden;
-      }
-      .chat-box-body:after {
-        content: "";
-        background: #fff;
-        opacity: 0.1;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        height: 100%;
-        position: absolute;
-        z-index: -1;
-      }
-      #chat_input {
-        background: #f4f7f9;
-        width: 100%;
-        position: relative;
-        height: 47px;
-        padding-top: 10px;
-        padding-right: 50px;
-        padding-bottom: 10px;
-        padding-left: 15px;
-        border: none;
-        resize: none;
-        outline: none;
-        border: 1px solid #ccc;
-        color: #888;
-        border-top: none;
-        border-bottom-right-radius: 5px;
-        border-bottom-left-radius: 5px;
-        overflow: hidden;
-      }
-      .chat_input>form {
-        margin-bottom: 0;
-      }
-      #chat_input::-webkit-input-placeholder {
-        /* Chrome/Opera/Safari */
-        color: #ccc;
-      }
-      #chat_input::-moz-placeholder {
-        /* Firefox 19+ */
-        color: #ccc;
-      }
-      #chat_input:-ms-input-placeholder {
-        /* IE 10+ */
-        color: #ccc;
-      }
-      #chat_input:-moz-placeholder {
-        /* Firefox 18- */
-        color: #ccc;
-      }
-      .chat-submit {
-        position: absolute;
-        bottom: 3px;
-        right: 10px;
-        background: transparent;
-        box-shadow: none;
-        border: none;
-        border-radius: 50%;
-        color: #000;
-        width: 35px;
-        height: 35px;
-      }
-      .chat_logs {
-        padding: 15px;
-        height: 370px;
-        overflow-y: scroll;
-        margin-bottom: 48px;
-      }
-      .chat_logs::-webkit-scrollbar-track {
-        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-        background-color: #f5f5f5;
-      }
-      .chat_logs::-webkit-scrollbar {
-        width: 5px;
-        background-color: #f5f5f5;
-      }
-      .chat_logs::-webkit-scrollbar-thumb {
-        background-color: #000;
-      }
-      @media only screen and (max-width: 500px) {
-        .chat_logs {
-          height: 40vh;
         }
-      }
-      .chat-msg.user>.msg-avatar img {
-        width: 45px;
-        height: 45px;
-        border-radius: 50%;
-        float: left;
-        width: 15%;
-      }
-      .chat-msg.self>.msg-avatar img {
-        width: 45px;
-        height: 45px;
-        border-radius: 50%;
-        float: right;
-        width: 15%;
-      }
-      .cm-msg-text {
-        z-index: 1999;
-        background: white;
-        padding: 10px 15px 10px 15px;
-        color: #666;
-        max-width: 75%;
-        float: left;
-        margin-left: 10px;
-        position: relative;
-        margin-bottom: 20px;
-        border-radius: 30px;
-        border-bottom-left-radius: 0px;
-      }
-      .svg-bot {
-        height: 24px;
-        width: 24px;
-      }
-      .chat-msg {
-        clear: both;
-        z-index: 1999;
-      }
-      .chat-msg.self>.cm-msg-text {
-        float: right;
-        margin-right: 10px;
-        border-radius: 30px;
-        border-bottom-right-radius: 0px;
-        background: #000;
-        color: white;
-      }
-      .cm-msg-button>ul>li {
-        list-style: none;
-        float: left;
-        width: 50%;
-      }
-      .cm-msg-button {
-        clear: both;
-        margin-bottom: 70px;
-      }
-      .chat-btn {
-        z-index: 1999;
-      }
-      .cancel {
-        display: none;
-        border: none;
-        border-radius: 5px;
-        background-color: #d6d6d6;
-        color: black;
-        z-index: 1999;
-        bottom: 3px;
-        position: absolute;
-        padding: 5px 10px;
-        margin: 0 108px;
-      }
-      [data-block^="list11-v4-1-1"] .vertical-list-item {
-        height: 100%;
-        overflow: hidden;
-      }
-      [data-block^="list11-v4-1-1"] .additional-elements-wrapper {
-        width: 100%;
-      }
-      [data-block^="list11-v4-1-1"] .label-wrapper.vertical {
-        flex-direction: column;
-      }
-      [data-block^="list11-v4-1-1"] .label-wrapper {
-        display: flex;
-      }
-      p,
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      small {
-        white-space: pre-line;
-      }
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
-      .h1,
-      .h2,
-      .h3,
-      .h4,
-      .h5,
-      .h6 {
-        margin-bottom: 0.25rem;
-        font-family: inherit;
-        font-weight: 400;
-        line-height: 1.1;
-        color: inherit;
-      }
-      [data-block^="list11-v4-1-1"] .list-container dl,
-      [data-block^="list11-v4-1-1"] .list-container h1,
-      [data-block^="list11-v4-1-1"] .list-container h2,
-      [data-block^="list11-v4-1-1"] .list-container h3,
-      [data-block^="list11-v4-1-1"] .list-container h4,
-      [data-block^="list11-v4-1-1"] .list-container h5,
-      [data-block^="list11-v4-1-1"] .list-container h6,
-      [data-block^="list11-v4-1-1"] .list-container ol,
-      [data-block^="list11-v4-1-1"] .list-container p,
-      [data-block^="list11-v4-1-1"] .list-container ul {
-        margin: 0;
-        padding: 0;
-      }
-      [data-block=list11-v4-1-1-b2] .sw-text-align-center {
-        text-align: center !important;
-      }
-      [data-block=list11-v4-1-1-b2] .sw-margin-top-none {
-        margin-top: 0rem !important;
-      }
-      [data-block=list11-v4-1-1-b2] .sw-margin-bottom-none {
-        margin-bottom: 0rem !important;
-      }
-      [data-block=list11-v4-1-1-b2] .sw-font-size-2xl {
-        font-size: 1.5rem !important;
-      }
-      [data-block=list11-v4-1-1-b2] .sw-padding-bottom-5xs {
-        padding-bottom: 0.75rem !important;
-      }
-      [data-block=list11-v4-1-1-b2] .sw-padding-top-none {
-        padding-top: 0rem !important;
-      }
-      [data-block=list11-v4-1-1-b2] .sw-letter-spacing-normal {
-        letter-spacing: 0rem !important;
-      }
-      [data-block=list11-v4-1-1-b2] .sw-text-color-0A0A0A {
-        color: #0A0A0A !important;
-      }
-      [data-block=list11-v4-1-1-b2] .sw-padding-right-none {
-        padding-right: 0rem !important;
-      }
-      [data-block=list11-v4-1-1-b2] .sw-padding-left-none {
-        padding-left: 0rem !important;
-      }
-      [data-block=list11-v4-1-1-b2] .sw-font-weight-semibold {
-        font-weight: 600 !important;
-      }
-      h1.sw-text-color-default,
-      h2.sw-text-color-default,
-      h3.sw-font-family-default {
-        color: #000000;
-      }
-      h1.sw-font-weight-default,
-      h2.sw-font-weight-default,
-      h3.sw-font-family-default {
-        font-weight: 600;
-      }
-      h1.sw-font-family-default,
-      h2.sw-font-family-default,
-      h3.sw-font-family-default {
-        font-family: "IBM Plex Sans";
-      }
-      /* .bg-img {
         background-image: url("./MU_LOGO_BLACK.jpg");
         background-repeat: no-repeat;
         position: relative;
@@ -537,42 +534,55 @@
         background-size: cover;
       } */
-      .marwadi {
-        width: 100vw;
-        height: 100vh;
-        text-align: center;
-        margin: auto;
-        font-size: xx-large;
-        font-weight: bolder;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-      }
-      .bestie {
-        margin: 1rem;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        text-align: center;
-        width: 100vw;
-      }
-      #user_id {
-        width: 20%;
-        height: 2rem;
-        border-radius: 5px;
-        border: 1px solid #000;
-        padding: 0.5rem;
-      }
-    </style>
       <div class="marwadi">
         Welcome To AI Bestie
         <div class="bestie">
           <label>User Name</label>&nbsp;&nbsp;&nbsp;
-        <input type="text" id="user_id" />
-      </div>
       </div>
       <div id="chat-circle" class="btn btn-raised" style="">
         <div id="chat-overlay"></div>
@@ -582,7 +592,9 @@
       <div class="chat-box" style="display: none">
         <div class="chat-box-header">
           AI Bestie
-          <span class="chat-box-toggle"><i class="material-icons">close</i></span>
         </div>
         <div class="chat-box-body">
@@ -595,257 +607,286 @@
         </div>
         <div class="chat_input">
           <form>
-            <input type="text" id="chat_input" placeholder="Send a message..." />
             <button type="submit" class="chat-submit" id="submit">
               <i class="material-icons">send</i>
             </button>
           </form>
         </div>
       </div>
-  </div>
-  <!-- Scripts -->
-  <link rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
-  <link rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" />
-  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"></script>
-  <script
-    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css"></script>
-  <script id="rendered-js">
-    function chatWidget(id, name, status) {
-      $.ajax({
-        url: "/chatwidget",
-        type: "POST",
-        data: JSON.stringify({
-          user_id: id,
-          status: status,
-          user_name: name,
-        }),
-        headers: {
-          "Content-Type": "application/json",
-        },
-        success: function (data) {
-          if (status == "end") {
-            return true;
-          } else {
-            generate_message(data.response, "user");
-          }
-        },
-      });
-    }
-    //   chatWidget(
-    //     window.logged_in_user.airtable_record_id,
-    //     window.logged_in_user.Name,
-    //     "end"
-    //   );
-    //   setTimeout(() => {
-    //     chatWidget(
-    //       window.logged_in_user.airtable_record_id,
-    //       window.logged_in_user.Name,
-    //       "start"
-    //     );
-    //   }, 300);
-    function generate_message(msg, type) {
-      var str = "";
-      str += "<div id='cm-msg" + "' class=\"chat-msg " + type + '">';
-      str += '          <div class="cm-msg-text">';
-      var lines = msg.includes("\n") ? msg.split("\n") : [msg];
-      lines.forEach((line) => {
-        // Check if the line contains a URL
-        var urlRegex = /(https?:\/\/[^\s]+)/g;
-        var messageWithLinks = line.replace(urlRegex, '<a href="$1" target="_blank">$1</a>');
-        // Append the line with links to the message string
-        str += messageWithLinks;
-        // Only add <br> if not last line
-        if (line !== lines[lines.length - 1]) {
-          str += "<br>";
-        }
-      });
-      str += "          <\/div>";
-      str += "        <\/div>";
-      $(".chat_logs").append(str);
-      // Adjust scroll position
-      var chatLogs = document.getElementById("chat_logs");
-      chatLogs.scrollTop = chatLogs.scrollHeight;
-    }
-    function error_message(msg, type) {
-      INDEX++;
-      var str = "";
-      str += "<div id='cm-msg" + "' class=\"chat-msg " + type + '">';
-      str += '          <div class="cm-msg-text">';
-      var lines = msg.includes("\n") ? msg.split("\n") : [msg];
-      lines.forEach((line) => {
-        str += line;
-        // Only add <br> if not last line
-        if (line !== lines[lines.length - 1]) {
-          str += "<br>";
-        }
-      });
-      str += "          <\/div>";
-      str += "        <\/div>";
-      $("#chat_logs").append(str);
-      if (type == "self") {
-        $("#chat_input").val("");
-      }
-      $("#chat_logs")
-        .stop()
-        .animate({ scrollTop: $("#chat_logs")[0].scrollHeight }, 1000);
-    }
-    $(function () {
-      var INDEX = 0;
-      var input = document.getElementById("chat_input");
-      var submitBtn = document.getElementById("submit");
-      var cancelRequest = document.getElementById("cancel");
-      var userId = document.getElementById("user_id");
-      $("#cancel").click(function (e) {
-        input.disabled = false;
-        e.preventDefault();
-        submitBtn.disabled = false;
-        input.style.opacity = 1;
-        cancelRequest.style.display = 'none';
-      });
-      $("#submit").click(function (e) {
-        cancelRequest.style.display = 'block';
-        input.disabled = true;
-        input.style.opacity = 0.5;
-        submitBtn.disabled = true;
-        e.preventDefault();
-        var msg = $("#chat_input").val();
-        if (msg.trim() == "") {
-          return false;
-        }
-        generate_message(msg, "self");
-        input.value = "";
         $.ajax({
           url: "/chatwidget",
           type: "POST",
           data: JSON.stringify({
-            query: msg,
-            user_id: userId.value
-            // message: `${msg} | ${window.logged_in_user.airtable_record_id}`,
           }),
           headers: {
             "Content-Type": "application/json",
-            "Access-Control-Allow-Origin": "*",
-            "Access-Control-Allow-Headers": "Content-Type",
           },
           success: function (data) {
-            console.log(data)
-            /* data.map(item => generate_message(item.text, "user")) */
-            generate_message(data, "user");
-            /* generate_message(data.response, "user"); */
-            input.disabled = false;
-            submitBtn.disabled = false;
-            input.style.opacity = 1;
-            cancelRequest.style.display = 'none';
-          },
-          error: function (data) {
-            error_message(
-              "We are sorry. we can't proceess Your Request Please Try again after some times.",
-              "user"
-            );
-            input.disabled = false;
-            submitBtn.disabled = false;
-            input.style.opacity = 1;
-            cancelRequest.style.display = 'none';
           },
         });
-      });
-      $(document).delegate(".chat-btn", "click", function () {
-        var value = $(this).attr("chat-value");
-        var name = $(this).html();
-        $("#chat_input").attr("disabled", false);
-        generate_message(name);
       });
-      $("#chat-circle").click(function () {
         $("#chat-circle").toggle("scale");
         $(".chat-box").toggle("scale");
-        cancelRequest.style.display = 'block';
         input.disabled = true;
         $.ajax({
           url: "/start-session",
           type: "POST",
           data: JSON.stringify({
-            user_id: userId.value
             // message: `${msg} | ${window.logged_in_user.airtable_record_id}`,
           }),
           headers: {
             "Content-Type": "application/json",
           },
           success: function (data) {
             $.ajax({
-          url: "/chatwidget",
-          type: "POST",
-          data: JSON.stringify({
-            query: "START",
-            user_id: userId.value
-            // message: `${msg} | ${window.logged_in_user.airtable_record_id}`,
-          }),
-          headers: {
-            "Content-Type": "application/json",
-            "Access-Control-Allow-Origin": "*",
-            "Access-Control-Allow-Headers": "Content-Type",
-          },
-          success: function (data) {
-            console.log(data)
-            /* data.map(item => generate_message(item.text, "user")) */
-            generate_message(data, "user");
-            /* generate_message(data.response, "user"); */
-            input.disabled = false;
-            submitBtn.disabled = false;
-            input.style.opacity = 1;
-            cancelRequest.style.display = 'none';
-          },
-          error: function (data) {
-            error_message(
-              "We are sorry. we can't proceess Your Request Please Try again after some times.",
-              "user"
-            );
-            input.disabled = false;
-            submitBtn.disabled = false;
-            input.style.opacity = 1;
-            cancelRequest.style.display = 'none';
-          },
-        });
             if (status == "end") {
               return true;
             } else {
               console.log(data.response, "session_id");
             }
           },
         });
-        console.log(userId, userId.value)
       });
-      $(".chat-box-toggle").click(function () {
-        $("#chat-circle").toggle("scale");
-        $(".chat-box").toggle("scale");
-        location.reload();
-      });
-    });
-  </script>
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-</body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div id="body">
+      <style>
+        body {
+          /* Add the background image */
+          background-image: url("mu-logo-mood-03.jpg");
+          /* Adjust background properties */
+          background-repeat: no-repeat;
+          background-size: cover; /* or contain, depending on your preference */
+          /* Add other background properties if needed */
+        }
+        .cm-msg-text {
+          overflow-wrap: break-word;
+          /* Break long words */
+          word-wrap: break-word;
+          /* Break long words */
+          word-break: break-word;
+          /* Break words */
+          max-width: 100%;
+          /* Limit maximum width */
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-border-bottom-color-000000 {
+          border-bottom-color: #000000 !important;
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-border-bottom-width-none {
+          border-bottom-width: 0px !important;
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-border-bottom-style-none {
+          border-bottom-style: none !important;
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-border-top-color-000000 {
+          border-top-color: #000000 !important;
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-border-top-width-none {
+          border-top-width: 0px !important;
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-border-top-style-none {
+          border-top-style: none !important;
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-padding-bottom-m {
+          padding-bottom: 3rem !important;
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-padding-top-m {
+          padding-top: 3rem !important;
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-background-color-ffffff {
+          background-color: #ffffff !important;
+        }
+        #body {
+          z-index: 1999;
+          position: fixed;
+          margin: 0;
+          padding: 0;
+          font-family: "Lato", sans-serif;
+          background-color: #f6f7f9;
+        }
+        @mixin chabox-container {
+          display: flex;
+          position: absolute;
+          box-shadow: 5px 5px 25px 0 rgba(46, 61, 73, 0.2);
+          flex-direction: column;
+        }
+        @mixin chatbox-header {
+          box-sizing: border-box;
+          display: flex;
+          width: 100%;
+          padding: 16px;
+          color: #fff;
+          background-color: #0360a5;
+          align-items: center;
+          justify-content: space-around;
+        }
+        @mixin chatbox-main {
+          box-sizing: border-box;
+          width: 100%;
+          padding: calc(2 * 16px) 16px;
+          line-height: calc(16px + 16px / 2);
+          color: #888;
+          text-align: center;
+        }
+        @mixin chatbox-footer {
+          box-sizing: border-box;
+          display: flex;
+          width: 100%;
+          padding: 16px;
+          border-top: 1px solid #ddd;
+          align-items: center;
+          justify-content: space-around;
+        }
+        @mixin chatbox-floating-button {
+          position: fixed;
+          bottom: 0;
+          right: 0;
+          width: 52px;
+          height: 52px;
+          color: #fff;
+          background-color: #0360a5;
+          background-position: center center;
+          background-repeat: no-repeat;
+          box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.15);
+          border: 0;
+          border-radius: 50%;
+          cursor: pointer;
+        }
+        h1 {
+          margin: 0;
+          font-size: 16px;
+          line-height: 1;
+        }
+        button {
+          color: inherit;
+          background-color: transparent;
+          border: 0;
+          outline: 0 !important;
+          cursor: pointer;
+        }
+        #center-text {
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
+        }
+        #chat-circle {
+          position: fixed;
+          bottom: 50px;
+          z-index: 1999;
+          align-items: center;
+          right: 50px;
+          background: #000;
+          width: 60px;
+          justify-content: center;
+          height: 60px;
+          display: flex;
+          border-radius: 50%;
+          color: white;
+          padding: 8px;
+          cursor: pointer;
+          box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.4),
+            0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+        }
+        .btn#my-btn {
+          background: white;
+          padding-top: 13px;
+          padding-bottom: 12px;
+          border-radius: 45px;
+          padding-right: 40px;
+          padding-left: 40px;
+          color: #5865c3;
+        }
+        #chat-overlay {
+          background: rgba(255, 255, 255, 0.1);
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+          display: none;
+        }
+        .chat-box {
+          display: none;
+          background: #efefef;
+          position: fixed;
+          right: 30px;
+          z-index: 1999;
+          bottom: 50px;
+          width: 350px;
+          max-width: 85vw;
+          max-height: 100vh;
+          border-radius: 5px;
+          /*   box-shadow: 0px 5px 35px 9px #464a92; */
+          box-shadow: 0px 5px 35px 9px #ccc;
+        }
+        .chat-box-toggle {
+          float: right;
+          margin-right: 15px;
+          cursor: pointer;
+        }
+        .chat-box-header {
+          background: #000;
+          height: 70px;
+          border-top-left-radius: 5px;
+          border-top-right-radius: 5px;
+          color: white;
+          text-align: center;
+          font-size: 20px;
+          padding-top: 17px;
+          padding-left: 36px;
+        }
+        .chat-box-body {
+          position: relative;
+          height: 370px;
+          height: auto;
+          border: 1px solid #ccc;
+          overflow: hidden;
+        }
+        .chat-box-body:after {
+          content: "";
+          background: #fff;
+          opacity: 0.1;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          height: 100%;
+          position: absolute;
+          z-index: -1;
+        }
+        #chat_input {
+          background: #f4f7f9;
+          width: 100%;
+          position: relative;
+          height: 47px;
+          padding-top: 10px;
+          padding-right: 50px;
+          padding-bottom: 10px;
+          padding-left: 15px;
+          border: none;
+          resize: none;
+          outline: none;
+          border: 1px solid #ccc;
+          color: #888;
+          border-top: none;
+          border-bottom-right-radius: 5px;
+          border-bottom-left-radius: 5px;
+          overflow: hidden;
+        }
+        .chat_input > form {
+          margin-bottom: 0;
+        }
+        #chat_input::-webkit-input-placeholder {
+          /* Chrome/Opera/Safari */
+          color: #ccc;
+        }
+        #chat_input::-moz-placeholder {
+          /* Firefox 19+ */
+          color: #ccc;
+        }
+        #chat_input:-ms-input-placeholder {
+          /* IE 10+ */
+          color: #ccc;
+        }
+        #chat_input:-moz-placeholder {
+          /* Firefox 18- */
+          color: #ccc;
+        }
+        .chat-submit {
+          position: absolute;
+          bottom: 3px;
+          right: 10px;
+          background: transparent;
+          box-shadow: none;
+          border: none;
+          border-radius: 50%;
+          color: #000;
+          width: 35px;
+          height: 35px;
+        }
+        .chat_logs {
+          padding: 15px;
+          height: 370px;
+          overflow-y: scroll;
+          margin-bottom: 48px;
+        }
+        .chat_logs::-webkit-scrollbar-track {
+          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+          background-color: #f5f5f5;
+        }
+        .chat_logs::-webkit-scrollbar {
+          width: 5px;
+          background-color: #f5f5f5;
+        }
+        .chat_logs::-webkit-scrollbar-thumb {
+          background-color: #000;
         }
+        @media only screen and (max-width: 500px) {
+          .chat_logs {
+            height: 40vh;
+          }
+        }
+        .chat-msg.user > .msg-avatar img {
+          width: 45px;
+          height: 45px;
+          border-radius: 50%;
+          float: left;
+          width: 15%;
+        }
+        .chat-msg.self > .msg-avatar img {
+          width: 45px;
+          height: 45px;
+          border-radius: 50%;
+          float: right;
+          width: 15%;
+        }
+        .cm-msg-text {
+          z-index: 1999;
+          background: white;
+          padding: 10px 15px 10px 15px;
+          color: #666;
+          max-width: 75%;
+          float: left;
+          margin-left: 10px;
+          position: relative;
+          margin-bottom: 20px;
+          border-radius: 30px;
+          border-bottom-left-radius: 0px;
+        }
+        .svg-bot {
+          height: 24px;
+          width: 24px;
+        }
+        .chat-msg {
+          clear: both;
+          z-index: 1999;
+        }
+        .chat-msg.self > .cm-msg-text {
+          float: right;
+          margin-right: 10px;
+          border-radius: 30px;
+          border-bottom-right-radius: 0px;
+          background: #000;
+          color: white;
+        }
+        .cm-msg-button > ul > li {
+          list-style: none;
+          float: left;
+          width: 50%;
+        }
+        .cm-msg-button {
+          clear: both;
+          margin-bottom: 70px;
+        }
+        .chat-btn {
+          z-index: 1999;
+        }
+        .cancel {
+          display: none;
+          border: none;
+          border-radius: 5px;
+          background-color: #d6d6d6;
+          color: black;
+          z-index: 1999;
+          bottom: 3px;
+          position: absolute;
+          padding: 5px 10px;
+          margin: 0 108px;
+        }
+        [data-block^="list11-v4-1-1"] .vertical-list-item {
+          height: 100%;
+          overflow: hidden;
+        }
+        [data-block^="list11-v4-1-1"] .additional-elements-wrapper {
+          width: 100%;
+        }
+        [data-block^="list11-v4-1-1"] .label-wrapper.vertical {
+          flex-direction: column;
+        }
+        [data-block^="list11-v4-1-1"] .label-wrapper {
+          display: flex;
+        }
+        p,
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        small {
+          white-space: pre-line;
+        }
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        .h1,
+        .h2,
+        .h3,
+        .h4,
+        .h5,
+        .h6 {
+          margin-bottom: 0.25rem;
+          font-family: inherit;
+          font-weight: 400;
+          line-height: 1.1;
+          color: inherit;
+        }
+        [data-block^="list11-v4-1-1"] .list-container dl,
+        [data-block^="list11-v4-1-1"] .list-container h1,
+        [data-block^="list11-v4-1-1"] .list-container h2,
+        [data-block^="list11-v4-1-1"] .list-container h3,
+        [data-block^="list11-v4-1-1"] .list-container h4,
+        [data-block^="list11-v4-1-1"] .list-container h5,
+        [data-block^="list11-v4-1-1"] .list-container h6,
+        [data-block^="list11-v4-1-1"] .list-container ol,
+        [data-block^="list11-v4-1-1"] .list-container p,
+        [data-block^="list11-v4-1-1"] .list-container ul {
+          margin: 0;
+          padding: 0;
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-text-align-center {
+          text-align: center !important;
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-margin-top-none {
+          margin-top: 0rem !important;
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-margin-bottom-none {
+          margin-bottom: 0rem !important;
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-font-size-2xl {
+          font-size: 1.5rem !important;
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-padding-bottom-5xs {
+          padding-bottom: 0.75rem !important;
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-padding-top-none {
+          padding-top: 0rem !important;
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-letter-spacing-normal {
+          letter-spacing: 0rem !important;
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-text-color-0A0A0A {
+          color: #0a0a0a !important;
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-padding-right-none {
+          padding-right: 0rem !important;
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-padding-left-none {
+          padding-left: 0rem !important;
+        }
+        [data-block="list11-v4-1-1-b2"] .sw-font-weight-semibold {
+          font-weight: 600 !important;
+        }
+        h1.sw-text-color-default,
+        h2.sw-text-color-default,
+        h3.sw-font-family-default {
+          color: #000000;
+        }
+        h1.sw-font-weight-default,
+        h2.sw-font-weight-default,
+        h3.sw-font-family-default {
+          font-weight: 600;
+        }
+        h1.sw-font-family-default,
+        h2.sw-font-family-default,
+        h3.sw-font-family-default {
+          font-family: "IBM Plex Sans";
+        }
+        /* .bg-img {
         background-image: url("./MU_LOGO_BLACK.jpg");
         background-repeat: no-repeat;
         position: relative;
         background-size: cover;
       } */
+        .marwadi {
+          width: 100vw;
+          height: 100vh;
+          text-align: center;
+          margin: auto;
+          font-size: xx-large;
+          font-weight: bolder;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+        }
+        .bestie {
+          margin: 1rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          width: 100vw;
+        }
+        #user_id {
+          width: 20%;
+          height: 2rem;
+          border-radius: 5px;
+          border: 1px solid #000;
+          padding: 0.5rem;
+          font-size: medium;
+        }
+        .input-submit-button {
+          padding: 5px 10px;
+          background: gray;
+          color: white;
+          margin: 16px;
+          font-size: medium;
+          border-radius: 25px;
+        }
+      </style>
       <div class="marwadi">
         Welcome To AI Bestie
         <div class="bestie">
           <label>User Name</label>&nbsp;&nbsp;&nbsp;
+          <input type="text" id="user_id" oninput="enableSubmitButton()" />
+          <button class="input-submit-button" disabled id="submit-button">
+            Submit
+          </button>
+        </div>
       </div>
       <div id="chat-circle" class="btn btn-raised" style="">
         <div id="chat-overlay"></div>
       <div class="chat-box" style="display: none">
         <div class="chat-box-header">
           AI Bestie
+          <span class="chat-box-toggle"
+            ><i class="material-icons">close</i></span
+          >
         </div>
         <div class="chat-box-body">
         </div>
         <div class="chat_input">
           <form>
+            <input
+              type="text"
+              id="chat_input"
+              placeholder="Send a message..."
+            />
             <button type="submit" class="chat-submit" id="submit">
               <i class="material-icons">send</i>
             </button>
           </form>
         </div>
       </div>
+    </div>
+    <!-- Scripts -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css"></script>
+    <script id="rendered-js">
+      function enableSubmitButton() {
+        var user_id_input = document.getElementById("user_id");
+        var submit_button = document.getElementById("submit-button");
+        console.log(user_id_input.value)
+        submit_button.disabled = user_id_input.value === "";
+        submit_button.style.background =  user_id_input.value === "" ? "gray" : "#000";
+      }
+      function chatWidget(id, name, status) {
         $.ajax({
           url: "/chatwidget",
           type: "POST",
           data: JSON.stringify({
+            user_id: id,
+            status: status,
+            user_name: name,
           }),
           headers: {
             "Content-Type": "application/json",
           },
           success: function (data) {
+            if (status == "end") {
+              return true;
+            } else {
+              generate_message(data.response, "user");
+            }
           },
         });
+      }
+      //   chatWidget(
+      //     window.logged_in_user.airtable_record_id,
+      //     window.logged_in_user.Name,
+      //     "end"
+      //   );
+      //   setTimeout(() => {
+      //     chatWidget(
+      //       window.logged_in_user.airtable_record_id,
+      //       window.logged_in_user.Name,
+      //       "start"
+      //     );
+      //   }, 300);
+      function generate_message(msg, type) {
+        var str = "";
+        str += "<div id='cm-msg" + "' class=\"chat-msg " + type + '">';
+        str += '          <div class="cm-msg-text">';
+        var lines = msg.includes("\n") ? msg.split("\n") : [msg];
+        lines.forEach((line) => {
+          // Check if the line contains a URL
+          var urlRegex = /(https?:\/\/[^\s]+)/g;
+          var messageWithLinks = line.replace(
+            urlRegex,
+            '<a href="$1" target="_blank">$1</a>'
+          );
+          // Append the line with links to the message string
+          str += messageWithLinks;
+          // Only add <br> if not last line
+          if (line !== lines[lines.length - 1]) {
+            str += "<br>";
+          }
+        });
+        str += "          <\/div>";
+        str += "        <\/div>";
+        $(".chat_logs").append(str);
+        // Adjust scroll position
+        var chatLogs = document.getElementById("chat_logs");
+        chatLogs.scrollTop = chatLogs.scrollHeight;
+      }
+      function error_message(msg, type) {
+        INDEX++;
+        var str = "";
+        str += "<div id='cm-msg" + "' class=\"chat-msg " + type + '">';
+        str += '          <div class="cm-msg-text">';
+        var lines = msg.includes("\n") ? msg.split("\n") : [msg];
+        lines.forEach((line) => {
+          str += line;
+          // Only add <br> if not last line
+          if (line !== lines[lines.length - 1]) {
+            str += "<br>";
+          }
+        });
+        str += "          <\/div>";
+        str += "        <\/div>";
+        $("#chat_logs").append(str);
+        if (type == "self") {
+          $("#chat_input").val("");
+        }
+        $("#chat_logs")
+          .stop()
+          .animate({ scrollTop: $("#chat_logs")[0].scrollHeight }, 1000);
+      }
+      $(function () {
+        var INDEX = 0;
+        var input = document.getElementById("chat_input");
+        var submitBtn = document.getElementById("submit");
+        var cancelRequest = document.getElementById("cancel");
+        var userId = document.getElementById("user_id");
+        $("#cancel").click(function (e) {
+          input.disabled = false;
+          e.preventDefault();
+          submitBtn.disabled = false;
+          input.style.opacity = 1;
+          cancelRequest.style.display = "none";
+        });
+        $("#submit").click(function (e) {
+          cancelRequest.style.display = "block";
+          input.disabled = true;
+          input.style.opacity = 0.5;
+          submitBtn.disabled = true;
+          e.preventDefault();
+          var msg = $("#chat_input").val();
+          if (msg.trim() == "") {
+            return false;
+          }
+          generate_message(msg, "self");
+          input.value = "";
+          $.ajax({
+            url: "/chatwidget",
+            type: "POST",
+            data: JSON.stringify({
+              query: msg,
+              user_id: userId.value,
+              // message: `${msg} | ${window.logged_in_user.airtable_record_id}`,
+            }),
+            headers: {
+              "Content-Type": "application/json",
+              "Access-Control-Allow-Origin": "*",
+              "Access-Control-Allow-Headers": "Content-Type",
+            },
+            success: function (data) {
+              console.log(data);
+              /* data.map(item => generate_message(item.text, "user")) */
+              generate_message(data, "user");
+              /* generate_message(data.response, "user"); */
+              input.disabled = false;
+              submitBtn.disabled = false;
+              input.style.opacity = 1;
+              cancelRequest.style.display = "none";
+            },
+            error: function (data) {
+              error_message(
+                "We are sorry. we can't proceess Your Request Please Try again after some times.",
+                "user"
+              );
+              input.disabled = false;
+              submitBtn.disabled = false;
+              input.style.opacity = 1;
+              cancelRequest.style.display = "none";
+            },
+          });
+        });
+        $(document).delegate(".chat-btn", "click", function () {
+          var value = $(this).attr("chat-value");
+          var name = $(this).html();
+          $("#chat_input").attr("disabled", false);
+          generate_message(name);
+        });
+        $(".chat-box-toggle").click(function () {
+          $("#chat-circle").toggle("scale");
+          $(".chat-box").toggle("scale");
+          $("#sub-button").prop("disabled", false);
+          userId.disabled = "false"
+          location.reload();
+        });
       });
+      $("#submit-button").click(function () {
         $("#chat-circle").toggle("scale");
         $(".chat-box").toggle("scale");
+        var input = document.getElementById("chat_input");
+        var submitBtn = document.getElementById("submit");
+        var cancelRequest = document.getElementById("cancel");
+        var userId = document.getElementById("user_id");
+        var submit_button = document.getElementById("submit-button");
+        submit_button.style.display = 'none'
+        user_id.style.border = 'none'
+        user_id.style.background = 'none'
+        userId.disabled = "true"
+        $("#sub-button").prop("disabled", true);
+        cancelRequest.style.display = "block";
         input.disabled = true;
         $.ajax({
           url: "/start-session",
           type: "POST",
           data: JSON.stringify({
+            user_id: userId.value,
             // message: `${msg} | ${window.logged_in_user.airtable_record_id}`,
           }),
           headers: {
             "Content-Type": "application/json",
           },
           success: function (data) {
             $.ajax({
+              url: "/chatwidget",
+              type: "POST",
+              data: JSON.stringify({
+                query: "START",
+                user_id: userId.value,
+                // message: `${msg} | ${window.logged_in_user.airtable_record_id}`,
+              }),
+              headers: {
+                "Content-Type": "application/json",
+                "Access-Control-Allow-Origin": "*",
+                "Access-Control-Allow-Headers": "Content-Type",
+              },
+              success: function (data) {
+                console.log(data);
+                /* data.map(item => generate_message(item.text, "user")) */
+                generate_message(data, "user");
+                /* generate_message(data.response, "user"); */
+                input.disabled = false;
+                submitBtn.disabled = false;
+                input.style.opacity = 1;
+                cancelRequest.style.display = "none";
+              },
+              error: function (data) {
+                error_message(
+                  "We are sorry. we can't proceess Your Request Please Try again after some times.",
+                  "user"
+                );
+                input.disabled = false;
+                submitBtn.disabled = false;
+                input.style.opacity = 1;
+                cancelRequest.style.display = "none";
+              },
+            });
             if (status == "end") {
               return true;
             } else {
               console.log(data.response, "session_id");
             }
           },
         });
+        console.log(userId, userId.value);
       });
+    </script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  </body>
+</html>