Hugging Face's logo

Spaces:
rohan13
/
makerlab-bot
Runtime error

App Files Community
3
rohan13 commited on
Commit
a949edc
·
1 Parent(s): f6a9034

widget minimizing

Browse files
Files changed (3) hide show
  1. static/chatbot.js +20 -15
  2. static/style.css +46 -24
  3. templates/index.html +3 -3
static/chatbot.js CHANGED
@@ -71,25 +71,30 @@ $(document).ready(function() {
71
  // Initial message
72
  displayMessage('Ask me anything');
73
 
74
- // Function to minimize widget
75
  function minimizeWidget() {
76
- $chatContainer.toggleClass('minimized');
77
- if ($chatContainer.hasClass('minimized')) {
78
- $chatContainer.find('.chat-header h4').hide();
79
- $chatContainer.find('.chat-input').hide();
80
- $chatContainer.find('.chat-body').hide();
81
- $chatContainer.find('.chat-header i.fa-close').removeClass('fa-close').addClass('fa-comment');
82
- } else {
83
- $chatContainer.find('.chat-header h4').show();
84
- $chatContainer.find('.chat-input').show();
85
- $chatContainer.find('.chat-body').show();
86
- $chatContainer.find('.chat-header i.fa-comment').removeClass('fa-comment').addClass('fa-close');
87
- }
88
  }
89
 
90
- // Minimize widget on close button click
91
- $('.chat-close').click(function() {
92
  minimizeWidget();
93
  });
94
 
 
 
 
 
 
95
  });
 
71
  // Initial message
72
  displayMessage('Ask me anything');
73
 
74
+ // Function to minimize the widget
75
  function minimizeWidget() {
76
+ $chatContainer.addClass('minimized');
77
+ $chatHeader.hide();
78
+ $chatInput.hide();
79
+ $chatContainer.append('<div class="chat-bot-icon"><i class="fa fa-android"></i></div>');
80
+ }
81
+
82
+ // Function to maximize the widget
83
+ function maximizeWidget() {
84
+ $chatContainer.removeClass('minimized');
85
+ $chatHeader.show();
86
+ $chatInput.show();
87
+ $('.chat-bot-icon').remove();
88
  }
89
 
90
+ // Minimize the widget on click of close button
91
+ $chatHeader.find('.chat-close').click(function() {
92
  minimizeWidget();
93
  });
94
 
95
+ // Maximize the widget on click of chat-bot-icon
96
+ $chatContainer.on('click', '.chat-bot-icon', function() {
97
+ maximizeWidget();
98
+ });
99
+
100
  });
static/style.css CHANGED
@@ -151,41 +151,63 @@
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
 
 
 
 
 
 
 
 
 
 
 
 
 
151
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
152
  }
153
 
154
+ /* CSS for chat-container when minimized */
155
+ .chat-container.minimized {
156
+ width: 70px;
157
+ height: 70px;
158
  border-radius: 50%;
159
+ position: fixed;
160
+ bottom: 10px;
161
+ right: 10px;
162
+ z-index: 9999;
163
  background-color: #fff;
164
+ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
 
165
  cursor: pointer;
 
 
 
 
 
 
 
 
166
  }
167
 
168
+ /* CSS for chat-bot-icon */
169
+ .chat-bot-icon {
170
+ font-size: 30px;
171
+ color: #555;
172
+ position: absolute;
173
+ top: 50%;
174
+ left: 50%;
175
+ transform: translate(-50%, -50%);
176
  }
177
 
178
+ /* CSS for chat-header when not minimized */
179
+ .chat-header {
180
  display: flex;
181
+ justify-content: space-between;
182
  align-items: center;
183
+ background-color: #6c7ae0;
 
 
 
184
  color: #fff;
185
+ padding: 10px;
186
+ border-top-left-radius: 5px;
187
+ border-top-right-radius: 5px;
188
  }
189
 
190
+ /* CSS for chat-container when not minimized */
191
+ .chat-container:not(.minimized) {
192
+ width: 350px;
193
+ height: 500px;
194
+ border-radius: 5px;
195
+ position: fixed;
196
+ bottom: 10px;
197
+ right: 10px;
198
+ z-index: 9999;
199
+ background-color: #fff;
200
+ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
201
  }
202
 
203
+ /* CSS for chat-bot-icon when chat-container is minimized */
204
+ .chat-container.minimized .chat-bot-icon {
205
+ display: block;
206
+ }
207
+
208
+ /* CSS for chat-bot-icon when chat-container is not minimized */
209
+ .chat-container:not(.minimized) .chat-bot-icon {
210
+ display: none;
211
+ }
212
+
213
+
templates/index.html CHANGED
@@ -11,12 +11,12 @@
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>
 
 
 
20
  <div class="chat-body chat-messages round"></div>
21
  <div class="chat-input">
22
  <input type="text" placeholder="Type your message">
 
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>
17
+ <div class="chat-bot-icon">
18
+ <i class="fa fa-android"></i> <!-- Replace with your bot icon -->
19
+ </div>
20
  <div class="chat-body chat-messages round"></div>
21
  <div class="chat-input">
22
  <input type="text" placeholder="Type your message">