Hugging Face's logo

Spaces:
redfernstech
/
FernAI
Running

App Files Community
srinuksv commited on
Commit
27c6e32
·
verified ·
1 Parent(s): 713e7dc

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +72 -75
static/index.html CHANGED
@@ -14,6 +14,7 @@
14
  }
15
  #chat-container {
16
  max-width: 500px;
 
17
  margin: auto;
18
  padding: 20px;
19
  border-radius: 30px;
@@ -64,6 +65,7 @@
64
  #user-input {
65
  border: 1px solid #ccc;
66
  border-radius: 5px;
 
67
  }
68
  #user-input:focus {
69
  border-color: #007bff;
@@ -73,24 +75,24 @@
73
  background-color: #007bff;
74
  color: white;
75
  }
76
- .btn-close {
77
- position: absolute; /* Positioning it absolutely within the chat container */
78
- top: 10px; /* Adjust top position */
79
- left: 10px; /* Adjust left position */
80
- background-color: #dc3545; /* Red color for close button */
81
- color: white;
82
- border: none; /* Remove border for a cleaner look */
83
- border-radius: 50%; /* Round shape */
84
- width: 30px; /* Set width */
85
- height: 30px; /* Set height */
86
- display: flex; /* Flexbox for centering icon */
87
- align-items: center; /* Center vertically */
88
- justify-content: center; /* Center horizontally */
89
- }
90
- .btn-close:hover {
91
- background-color: #c82333; /* Darker red on hover */
92
- }
93
-
94
  .typing-indicator {
95
  font-style: italic;
96
  color: #aaa;
@@ -108,28 +110,28 @@
108
  <body>
109
  <div id="chat-container" class="rounded p-4 shadow">
110
  <input type="hidden" id="user-id" value="{{ user_id }}">
 
 
 
111
  <div id="chat-history" class="mb-3"></div>
112
  <div id="loading" class="spinner-border text-primary" role="status">
113
  <span class="sr-only">Loading...</span>
114
  </div>
115
  <div class="input-group mb-2">
116
- <input type="text" id="user-input" class="form-control" placeholder="Type your message..." aria-label="Message input">
117
  <div class="input-group-append">
118
  <button id="send-button" class="btn btn-icon" aria-label="Send message">
119
  <i class="fas fa-paper-plane"></i>
120
  </button>
121
- <button id="close-button" class="btn btn-close" aria-label="Close chat">
122
- <i class="fas fa-times"></i>
123
- </button>
124
  </div>
125
  </div>
126
- </div>
127
  <script>
128
  let chatHistoryArray = [];
129
  document.getElementById("send-button").addEventListener("click", sendMessage);
130
  document.getElementById("user-input").addEventListener("keypress", function(event) {
131
- if (event.key === "Enter") {
132
- event.preventDefault();
133
  sendMessage();
134
  }
135
  });
@@ -170,53 +172,6 @@
170
  }
171
  }
172
 
173
- function addMessage(sender, message, className) {
174
- const chatHistory = document.getElementById("chat-history");
175
- const messageElement = document.createElement("div");
176
- messageElement.className = `message ${className}`;
177
- // Check if the message contains a URL
178
- const linkRegex = /(https?:\/\/[^\s]+)/g;
179
- const formattedMessage = message.replace(linkRegex, function(url) {
180
- let linkText;
181
- if (url === "https://appexchange.salesforce.com/appxListingDetail?listingId=cf4b19d4-8667-49f7-83b0-d2bc4032527b") {
182
- linkText = "Visit this link to check out the Product Filter App.";
183
- } else if (url === "https://appexchange.salesforce.com/appxListingDetail?listingId=e671f4fe-92fb-4760-99e5-7a5df5754cfe") {
184
- linkText = "Visit this link to check out the Mass Approvals App.";
185
- } else if (url === "https://appexchange.salesforce.com/appxListingDetail?listingId=3473ffd3-d530-462f-828f-d2c69f80d89d") {
186
- linkText = "Visit this link to check out the Thumbnail Viewer App.";
187
- } else if (url === "https://appexchange.salesforce.com/appxListingDetail?listingId=6d605bd9-de3c-49d3-9fa4-ec3caabd5d63") {
188
- linkText = "Visit this link to check out the Currency Conversion App.";
189
- } else if (url === "https://redfernstech.com/careers/") {
190
- linkText = "Visit this link to check out the careers.";
191
- } else {
192
- linkText = "Visit this link."; // Fallback for other URLs
193
- }
194
- return `<a href="${url}" target="_blank">${linkText}</a>`;
195
- });
196
- const icon = sender === "User" ? '<i class="fas fa-user user-icon"></i>' : '<i class="fas fa-user-tie"></i>';
197
- messageElement.innerHTML = `${icon}<div>${formattedMessage} <span class="timestamp">${new Date().toLocaleTimeString()}</span></div>`;
198
- messageElement.onclick = function() {
199
- const timestamp = messageElement.querySelector('.timestamp');
200
- timestamp.style.display = timestamp.style.display === 'none' ? 'block' : 'none';
201
- };
202
- chatHistory.appendChild(messageElement);
203
- chatHistory.scrollTop = chatHistory.scrollHeight;
204
- }
205
-
206
- function showTypingIndicator() {
207
- const typingElement = document.createElement("div");
208
- typingElement.className = "typing-indicator";
209
- typingElement.innerText = "Clara is typing...";
210
- document.getElementById("chat-history").appendChild(typingElement);
211
- }
212
-
213
- function hideTypingIndicator() {
214
- const typingIndicator = document.querySelector(".typing-indicator");
215
- if (typingIndicator) {
216
- typingIndicator.remove();
217
- }
218
- }
219
-
220
  async function closeChat() {
221
  const userId = document.getElementById("user-id").value;
222
  try {
@@ -228,11 +183,53 @@ function addMessage(sender, message, className) {
228
  body: JSON.stringify({ history: chatHistoryArray, userId })
229
  });
230
  } catch (error) {
231
- console.error('Error sending chat history:', error);
232
  } finally {
233
- window.open('https://redfernstech.com/', '_blank');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
234
  }
235
  }
236
  </script>
237
  </body>
238
- </html>
 
14
  }
15
  #chat-container {
16
  max-width: 500px;
17
+ position: relative;
18
  margin: auto;
19
  padding: 20px;
20
  border-radius: 30px;
 
65
  #user-input {
66
  border: 1px solid #ccc;
67
  border-radius: 5px;
68
+ resize: none; /* Prevents resizing */
69
  }
70
  #user-input:focus {
71
  border-color: #007bff;
 
75
  background-color: #007bff;
76
  color: white;
77
  }
78
+ .btn-close {
79
+ position: absolute; /* Keep it absolute within the chat container */
80
+ top: 10px; /* Adjust top position */
81
+ left: 10px; /* Adjust left position */
82
+ background-color: #dc3545; /* Red color for close button */
83
+ color: white;
84
+ border: none; /* Remove border for a cleaner look */
85
+ border-radius: 50%; /* Round shape */
86
+ width: 30px; /* Set width */
87
+ height: 30px; /* Set height */
88
+ display: flex; /* Flexbox for centering icon */
89
+ align-items: center; /* Center vertically */
90
+ justify-content: center; /* Center horizontally */
91
+ transition: background-color 0.3s; /* Add transition for hover effect */
92
+ }
93
+ .btn-close:hover {
94
+ background-color: #c82333; /* Darker red on hover */
95
+ }
96
  .typing-indicator {
97
  font-style: italic;
98
  color: #aaa;
 
110
  <body>
111
  <div id="chat-container" class="rounded p-4 shadow">
112
  <input type="hidden" id="user-id" value="{{ user_id }}">
113
+ <button id="close-button" class="btn btn-close" aria-label="Close chat">
114
+ <i class="fas fa-times"></i>
115
+ </button>
116
  <div id="chat-history" class="mb-3"></div>
117
  <div id="loading" class="spinner-border text-primary" role="status">
118
  <span class="sr-only">Loading...</span>
119
  </div>
120
  <div class="input-group mb-2">
121
+ <textarea id="user-input" class="form-control" rows="2" placeholder="Type your message..." aria-label="Message input"></textarea>
122
  <div class="input-group-append">
123
  <button id="send-button" class="btn btn-icon" aria-label="Send message">
124
  <i class="fas fa-paper-plane"></i>
125
  </button>
 
 
 
126
  </div>
127
  </div>
128
+ </div>
129
  <script>
130
  let chatHistoryArray = [];
131
  document.getElementById("send-button").addEventListener("click", sendMessage);
132
  document.getElementById("user-input").addEventListener("keypress", function(event) {
133
+ if (event.key === "Enter" && !event.shiftKey) { // Only send if Enter is pressed without Shift
134
+ event.preventDefault(); // Prevent default newline behavior
135
  sendMessage();
136
  }
137
  });
 
172
  }
173
  }
174
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
175
  async function closeChat() {
176
  const userId = document.getElementById("user-id").value;
177
  try {
 
183
  body: JSON.stringify({ history: chatHistoryArray, userId })
184
  });
185
  } catch (error) {
186
+ console.error('Error sending chat history on close:', error);
187
  } finally {
188
+ const chatContainer = document.getElementById("chat-container");
189
+ chatContainer.style.display = 'none'; // Or use chatContainer.remove(); to completely remove it
190
+ }
191
+ }
192
+
193
+ function addMessage(sender, message, className) {
194
+ const chatHistory = document.getElementById("chat-history");
195
+ const messageElement = document.createElement("div");
196
+ messageElement.className = `message ${className}`;
197
+ // Check if the message contains a URL
198
+ const linkRegex = /(https?:\/\/[^\s]+)/g;
199
+ const formattedMessage = message.replace(linkRegex, function(url) {
200
+ let linkText;
201
+ if (url === "https://appexchange.salesforce.com/appxListingDetail?listingId=cf4b19d4-8667-49f7-83b0-d2bc4032527b") {
202
+ linkText = "Visit this link to check out the Product Filter App.";
203
+ } else if (url === "https://appexchange.salesforce.com/appxListingDetail?listingId=e671f4fe-92fb-4760-99e5-7a5df5754cfe") {
204
+ linkText = "Visit this link to check out the Mass Approvals App.";
205
+ } else if (url === "https://appexchange.salesforce.com/appxListingDetail?listingId=3473ffd3-d530-462f-828f-d2c69f80d89d") {
206
+ linkText = "Visit this link to check out the Related Records App.";
207
+ } else {
208
+ linkText = url;
209
+ }
210
+ return `<a href="${url}" target="_blank">${linkText}</a>`;
211
+ });
212
+ messageElement.innerHTML = `<span class="${sender.toLowerCase()}-icon">${sender === "User" ? '<i class="fas fa-user"></i>' : '<i class="fas fa-robot"></i>'}</span>${formattedMessage}<div class="timestamp">${new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>`;
213
+ chatHistory.appendChild(messageElement);
214
+ chatHistory.scrollTop = chatHistory.scrollHeight; // Scroll to bottom
215
+ }
216
+
217
+ function showTypingIndicator() {
218
+ const chatHistory = document.getElementById("chat-history");
219
+ const typingIndicator = document.createElement("div");
220
+ typingIndicator.className = "typing-indicator";
221
+ typingIndicator.id = "typing-indicator";
222
+ typingIndicator.innerText = "Bot is typing...";
223
+ chatHistory.appendChild(typingIndicator);
224
+ chatHistory.scrollTop = chatHistory.scrollHeight; // Scroll to bottom
225
+ }
226
+
227
+ function hideTypingIndicator() {
228
+ const typingIndicator = document.getElementById("typing-indicator");
229
+ if (typingIndicator) {
230
+ typingIndicator.remove();
231
  }
232
  }
233
  </script>
234
  </body>
235
+ </html>