Hugging Face's logo

Spaces:
redfernstech
/
FernAI
Running

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

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +55 -52
static/index.html CHANGED
@@ -19,7 +19,6 @@
19
  border-radius: 30px;
20
  background-color: #fafafa;
21
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
22
- position: relative;
23
  }
24
  #chat-history {
25
  height: 530px;
@@ -74,13 +73,24 @@
74
  background-color: #007bff;
75
  color: white;
76
  }
77
- .btn-close {
78
- background-color: #dc3545;
79
- color: white;
80
- }
81
- .btn-close:hover {
82
- background-color: #c82333;
83
- }
 
 
 
 
 
 
 
 
 
 
 
84
  .typing-indicator {
85
  font-style: italic;
86
  color: #aaa;
@@ -92,23 +102,12 @@
92
  display: none;
93
  margin-top: 5px;
94
  }
95
- .close-chat-button {
96
- position: absolute;
97
- top: 10px;
98
- right: 10px;
99
- border: none;
100
- background: transparent;
101
- cursor: pointer;
102
- }
103
  </style>
104
  <title>Chat Interface</title>
105
  </head>
106
  <body>
107
  <div id="chat-container" class="rounded p-4 shadow">
108
  <input type="hidden" id="user-id" value="{{ user_id }}">
109
- <button id="close-button" class="close-chat-button" aria-label="Close chat">
110
- <i class="fas fa-times fa-lg"></i>
111
- </button>
112
  <div id="chat-history" class="mb-3"></div>
113
  <div id="loading" class="spinner-border text-primary" role="status">
114
  <span class="sr-only">Loading...</span>
@@ -119,6 +118,9 @@
119
  <button id="send-button" class="btn btn-icon" aria-label="Send message">
120
  <i class="fas fa-paper-plane"></i>
121
  </button>
 
 
 
122
  </div>
123
  </div>
124
  </div>
@@ -168,37 +170,38 @@
168
  }
169
  }
170
 
171
- function addMessage(sender, message, className) {
172
- const chatHistory = document.getElementById("chat-history");
173
- const messageElement = document.createElement("div");
174
- messageElement.className = `message ${className}`;
175
- const linkRegex = /(https?:\/\/[^\s]+)/g;
176
- const formattedMessage = message.replace(linkRegex, function(url) {
177
- let linkText;
178
- if (url === "https://appexchange.salesforce.com/appxListingDetail?listingId=cf4b19d4-8667-49f7-83b0-d2bc4032527b") {
179
- linkText = "Visit this link to check out the Product Filter App.";
180
- } else if (url === "https://appexchange.salesforce.com/appxListingDetail?listingId=e671f4fe-92fb-4760-99e5-7a5df5754cfe") {
181
- linkText = "Visit this link to check out the Mass Approvals App.";
182
- } else if (url === "https://appexchange.salesforce.com/appxListingDetail?listingId=3473ffd3-d530-462f-828f-d2c69f80d89d") {
183
- linkText = "Visit this link to check out the Thumbnail Viewer App.";
184
- } else if (url === "https://appexchange.salesforce.com/appxListingDetail?listingId=6d605bd9-de3c-49d3-9fa4-ec3caabd5d63") {
185
- linkText = "Visit this link to check out the Currency Conversion App.";
186
- } else if (url === "https://redfernstech.com/careers/") {
187
- linkText = "Visit this link to check out the careers.";
188
- } else {
189
- linkText = "Visit this link."; // Fallback for other URLs
190
- }
191
- return `<a href="${url}" target="_blank">${linkText}</a>`;
192
- });
193
- const icon = sender === "User" ? '<i class="fas fa-user user-icon"></i>' : '<i class="fas fa-user-tie"></i>';
194
- messageElement.innerHTML = `${icon}<div>${formattedMessage} <span class="timestamp">${new Date().toLocaleTimeString()}</span></div>`;
195
- messageElement.onclick = function() {
196
- const timestamp = messageElement.querySelector('.timestamp');
197
- timestamp.style.display = timestamp.style.display === 'none' ? 'block' : 'none';
198
- };
199
- chatHistory.appendChild(messageElement);
200
- chatHistory.scrollTop = chatHistory.scrollHeight;
201
- }
 
202
 
203
  function showTypingIndicator() {
204
  const typingElement = document.createElement("div");
@@ -227,9 +230,9 @@
227
  } catch (error) {
228
  console.error('Error sending chat history:', error);
229
  } finally {
230
- window.open('https://redfernstech.com/chat-bot-test', '_blank');
231
  }
232
  }
233
  </script>
234
  </body>
235
- </html>
 
19
  border-radius: 30px;
20
  background-color: #fafafa;
21
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
 
22
  }
23
  #chat-history {
24
  height: 530px;
 
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;
 
102
  display: none;
103
  margin-top: 5px;
104
  }
 
 
 
 
 
 
 
 
105
  </style>
106
  <title>Chat Interface</title>
107
  </head>
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>
 
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>
 
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");
 
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>