Spaces:
Runtime error
Runtime error
widget minimizing
Browse files- static/chatbot.js +22 -0
- static/style.css +39 -0
- templates/index.html +3 -0
static/chatbot.js
CHANGED
|
@@ -69,4 +69,26 @@ $(document).ready(function() {
|
|
| 69 |
|
| 70 |
// Initial message
|
| 71 |
displayMessage('Ask me anything');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 72 |
});
|
|
|
|
| 69 |
|
| 70 |
// Initial message
|
| 71 |
displayMessage('Ask me anything');
|
| 72 |
+
|
| 73 |
+
// Function to minimize widget
|
| 74 |
+
function minimizeWidget() {
|
| 75 |
+
$chatContainer.toggleClass('minimized');
|
| 76 |
+
if ($chatContainer.hasClass('minimized')) {
|
| 77 |
+
$chatContainer.find('.chat-header h4').hide();
|
| 78 |
+
$chatContainer.find('.chat-input').hide();
|
| 79 |
+
$chatContainer.find('.chat-body').hide();
|
| 80 |
+
$chatContainer.find('.chat-header i.fa-close').removeClass('fa-close').addClass('fa-comment');
|
| 81 |
+
} else {
|
| 82 |
+
$chatContainer.find('.chat-header h4').show();
|
| 83 |
+
$chatContainer.find('.chat-input').show();
|
| 84 |
+
$chatContainer.find('.chat-body').show();
|
| 85 |
+
$chatContainer.find('.chat-header i.fa-comment').removeClass('fa-comment').addClass('fa-close');
|
| 86 |
+
}
|
| 87 |
+
}
|
| 88 |
+
|
| 89 |
+
// Minimize widget on close button click
|
| 90 |
+
$('.chat-close').click(function() {
|
| 91 |
+
minimizeWidget();
|
| 92 |
+
});
|
| 93 |
+
|
| 94 |
});
|
static/style.css
CHANGED
|
@@ -150,3 +150,42 @@
|
|
| 150 |
cursor: pointer;
|
| 151 |
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
|
| 152 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 150 |
cursor: pointer;
|
| 151 |
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
|
| 152 |
}
|
| 153 |
+
|
| 154 |
+
/* Style for minimized chat header */
|
| 155 |
+
.chat-header-minimized {
|
| 156 |
+
height: 40px;
|
| 157 |
+
border-radius: 50%;
|
| 158 |
+
background-color: #fff;
|
| 159 |
+
color: #000;
|
| 160 |
+
text-align: center;
|
| 161 |
+
cursor: pointer;
|
| 162 |
+
position: absolute;
|
| 163 |
+
bottom: 20px;
|
| 164 |
+
right: 20px;
|
| 165 |
+
z-index: 100;
|
| 166 |
+
}
|
| 167 |
+
|
| 168 |
+
.chat-header-minimized h4 {
|
| 169 |
+
display: none;
|
| 170 |
+
}
|
| 171 |
+
|
| 172 |
+
.chat-header-minimized i {
|
| 173 |
+
margin-top: 10px;
|
| 174 |
+
}
|
| 175 |
+
|
| 176 |
+
.chat-bot-icon {
|
| 177 |
+
display: flex;
|
| 178 |
+
align-items: center;
|
| 179 |
+
justify-content: center;
|
| 180 |
+
width: 50px;
|
| 181 |
+
height: 50px;
|
| 182 |
+
background-color: #007bff;
|
| 183 |
+
color: #fff;
|
| 184 |
+
border-radius: 50%;
|
| 185 |
+
margin-right: 10px;
|
| 186 |
+
}
|
| 187 |
+
|
| 188 |
+
.chat-bot-icon i {
|
| 189 |
+
font-size: 24px;
|
| 190 |
+
}
|
| 191 |
+
|
templates/index.html
CHANGED
|
@@ -11,6 +11,9 @@
|
|
| 11 |
<body>
|
| 12 |
<div class="chat-container">
|
| 13 |
<div class="chat-header">
|
|
|
|
|
|
|
|
|
|
| 14 |
<h4>Makerlab Q&A Bot</h4>
|
| 15 |
<i class="fa fa-close chat-close"></i>
|
| 16 |
</div>
|
|
|
|
| 11 |
<body>
|
| 12 |
<div class="chat-container">
|
| 13 |
<div class="chat-header">
|
| 14 |
+
<div class="chat-bot-icon">
|
| 15 |
+
<i class="fa fa-android"></i> <!-- Replace with your bot icon -->
|
| 16 |
+
</div>
|
| 17 |
<h4>Makerlab Q&A Bot</h4>
|
| 18 |
<i class="fa fa-close chat-close"></i>
|
| 19 |
</div>
|