Spaces:
Running
Running
<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 ; | |
} | |
[data-block=list11-v4-1-1-b2] .sw-border-bottom-width-none { | |
border-bottom-width: 0px ; | |
} | |
[data-block=list11-v4-1-1-b2] .sw-border-bottom-style-none { | |
border-bottom-style: none ; | |
} | |
[data-block=list11-v4-1-1-b2] .sw-border-top-color-000000 { | |
border-top-color: #000000 ; | |
} | |
[data-block=list11-v4-1-1-b2] .sw-border-top-width-none { | |
border-top-width: 0px ; | |
} | |
[data-block=list11-v4-1-1-b2] .sw-border-top-style-none { | |
border-top-style: none ; | |
} | |
[data-block=list11-v4-1-1-b2] .sw-padding-bottom-m { | |
padding-bottom: 3rem ; | |
} | |
[data-block=list11-v4-1-1-b2] .sw-padding-top-m { | |
padding-top: 3rem ; | |
} | |
[data-block=list11-v4-1-1-b2] .sw-background-color-ffffff { | |
background-color: #ffffff ; | |
} | |
#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 ; | |
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 ; | |
} | |
[data-block=list11-v4-1-1-b2] .sw-margin-top-none { | |
margin-top: 0rem ; | |
} | |
[data-block=list11-v4-1-1-b2] .sw-margin-bottom-none { | |
margin-bottom: 0rem ; | |
} | |
[data-block=list11-v4-1-1-b2] .sw-font-size-2xl { | |
font-size: 1.5rem ; | |
} | |
[data-block=list11-v4-1-1-b2] .sw-padding-bottom-5xs { | |
padding-bottom: 0.75rem ; | |
} | |
[data-block=list11-v4-1-1-b2] .sw-padding-top-none { | |
padding-top: 0rem ; | |
} | |
[data-block=list11-v4-1-1-b2] .sw-letter-spacing-normal { | |
letter-spacing: 0rem ; | |
} | |
[data-block=list11-v4-1-1-b2] .sw-text-color-0A0A0A { | |
color: #0A0A0A ; | |
} | |
[data-block=list11-v4-1-1-b2] .sw-padding-right-none { | |
padding-right: 0rem ; | |
} | |
[data-block=list11-v4-1-1-b2] .sw-padding-left-none { | |
padding-left: 0rem ; | |
} | |
[data-block=list11-v4-1-1-b2] .sw-font-weight-semibold { | |
font-weight: 600 ; | |
} | |
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-position: center; | |
background-size: cover; | |
} */ | |
.marwadi { | |
width: 100vw; | |
height: 100vh; | |
text-align: center; | |
margin: auto; | |
font-size: xx-large; | |
font-weight: bolder; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
</style> | |
<div class="marwadi"> | |
Welcome To AI bestie | |
</div> | |
<div id="chat-circle" class="btn btn-raised" style=""> | |
<div id="chat-overlay"></div> | |
AI | |
</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 class="chat-box-overlay"></div> | |
<div class="chat_logs" id="chat_logs"></div> | |
<!--chat-log --> | |
<button type="submit" class="cancel" id="cancel"> | |
Stop Response | |
</button> | |
</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: "https://bacancydataprophets-bmoxi.hf.space/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"); | |
$("#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: "https://bacancydataprophets-bmoxi.hf.space/chatwidget", | |
type: "POST", | |
data: JSON.stringify({ | |
query: msg, | |
// 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"); | |
}); | |
$(".chat-box-toggle").click(function () { | |
$("#chat-circle").toggle("scale"); | |
$(".chat-box").toggle("scale"); | |
}); | |
}); | |
</script> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> | |
</body> | |
</html> |