Akshay4506
2 months ago
parent
2f458c2267
commit
861671be23
@ -1,94 +1,151 @@
|
||||
// Replace placeholder JS with chat UI client logic
|
||||
// Handles sending messages to backend and updating the UI
|
||||
|
||||
(function(){
|
||||
const messagesEl = document.getElementById('messages');
|
||||
const form = document.getElementById('composer');
|
||||
const input = document.getElementById('input');
|
||||
const sendBtn = document.getElementById('send');
|
||||
const BASE_URL = "https://automatic-space-funicular-954qxp96rgcqjq-5000.app.github.dev/";
|
||||
const API_ENDPOINT = `${BASE_URL}/hello`; // adjust if your backend runs elsewhere
|
||||
|
||||
function escapeHtml(str){
|
||||
if(!str) return '';
|
||||
return str.replace(/&/g,'&')
|
||||
.replace(/</g,'<')
|
||||
.replace(/>/g,'>')
|
||||
.replace(/"/g,'"')
|
||||
.replace(/'/g,''');
|
||||
}
|
||||
|
||||
function formatText(text){
|
||||
return escapeHtml(text).replace(/\n/g,'<br>');
|
||||
}
|
||||
|
||||
function scrollToBottom(){
|
||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||
}
|
||||
|
||||
function appendMessage(role, text){
|
||||
const el = document.createElement('div');
|
||||
el.className = 'message ' + role;
|
||||
el.innerHTML = `<div class="content">${formatText(text)}</div><small>${new Date().toLocaleTimeString()}</small>`;
|
||||
messagesEl.appendChild(el);
|
||||
scrollToBottom();
|
||||
return el;
|
||||
}
|
||||
|
||||
function createTyping(){
|
||||
const el = document.createElement('div');
|
||||
el.className = 'message ai';
|
||||
const typing = document.createElement('div');
|
||||
typing.className = 'typing';
|
||||
for(let i=0;i<3;i++){ const d = document.createElement('span'); d.className = 'dot'; typing.appendChild(d); }
|
||||
el.appendChild(typing);
|
||||
messagesEl.appendChild(el);
|
||||
scrollToBottom();
|
||||
return el;
|
||||
}
|
||||
|
||||
async function sendToApi(text){
|
||||
const res = await fetch(API_ENDPOINT, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ message: text })
|
||||
(function () {
|
||||
const messagesEl = document.getElementById('messages');
|
||||
const form = document.getElementById('composer');
|
||||
const input = document.getElementById('input');
|
||||
const sendBtn = document.getElementById('send');
|
||||
|
||||
const BASE_URL = "http://127.0.0.1:5000/";
|
||||
const API_ENDPOINT = `${BASE_URL}/hello`;
|
||||
|
||||
// Dynamic Send Button Logic: Enable/Disable based on input text
|
||||
input.addEventListener('input', () => {
|
||||
sendBtn.disabled = input.value.trim().length === 0;
|
||||
});
|
||||
if(!res.ok) throw new Error('Network response was not ok');
|
||||
let json = await res.json();
|
||||
return json.response;
|
||||
}
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const text = input.value.trim();
|
||||
if(!text) return;
|
||||
appendMessage('user', text);
|
||||
input.value = '';
|
||||
input.focus();
|
||||
sendBtn.disabled = true;
|
||||
|
||||
const typingEl = createTyping();
|
||||
try{
|
||||
const reply = await sendToApi(text);
|
||||
typingEl.remove();
|
||||
appendMessage('ai', reply || '(no response)');
|
||||
}catch(err){
|
||||
typingEl.remove();
|
||||
appendMessage('ai', 'Error: ' + err.message);
|
||||
console.error(err);
|
||||
}finally{
|
||||
sendBtn.disabled = false;
|
||||
|
||||
// --- CHAT FUNCTIONS ---
|
||||
function escapeHtml(str) {
|
||||
if (!str) return '';
|
||||
return str.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>').replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function formatText(text) {
|
||||
return escapeHtml(text).replace(/\n/g, '<br>');
|
||||
}
|
||||
});
|
||||
|
||||
// Enter to send, Shift+Enter for newline
|
||||
input.addEventListener('keydown', (e) => {
|
||||
if(e.key === 'Enter' && !e.shiftKey){
|
||||
e.preventDefault();
|
||||
form.dispatchEvent(new Event('submit', { cancelable: true }));
|
||||
function scrollToBottom() {
|
||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||
}
|
||||
});
|
||||
|
||||
// Small welcome message
|
||||
appendMessage('ai', 'Hello! I\'m your AI assistant. Ask me anything.');
|
||||
// Message control handlers (Copy/Delete)
|
||||
function handleDelete(messageEl) {
|
||||
if (messageEl) {
|
||||
messageEl.remove();
|
||||
}
|
||||
}
|
||||
|
||||
function handleCopy(text) {
|
||||
const tempTextArea = document.createElement('textarea');
|
||||
tempTextArea.value = text.replace(/<br>/g, '\n');
|
||||
document.body.appendChild(tempTextArea);
|
||||
tempTextArea.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
} catch (err) {
|
||||
console.error('Could not copy text: ', err);
|
||||
}
|
||||
document.body.removeChild(tempTextArea);
|
||||
}
|
||||
|
||||
function appendMessage(role, text) {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'message ' + role;
|
||||
|
||||
const contentDiv = document.createElement('div');
|
||||
contentDiv.className = 'content';
|
||||
const formattedText = formatText(text);
|
||||
contentDiv.innerHTML = formattedText;
|
||||
|
||||
const smallEl = document.createElement('small');
|
||||
smallEl.textContent = new Date().toLocaleTimeString();
|
||||
|
||||
el.appendChild(contentDiv);
|
||||
el.appendChild(smallEl);
|
||||
|
||||
// Add Controls (AI messages get copy/delete)
|
||||
if (role === 'ai') {
|
||||
const controls = document.createElement('div');
|
||||
controls.className = 'controls';
|
||||
|
||||
const copyBtn = document.createElement('button');
|
||||
copyBtn.innerHTML = '<i class="fas fa-copy"></i>';
|
||||
copyBtn.title = 'Copy message content';
|
||||
copyBtn.onclick = () => handleCopy(text);
|
||||
|
||||
const deleteBtn = document.createElement('button');
|
||||
deleteBtn.innerHTML = '<i class="fas fa-trash-alt"></i>';
|
||||
deleteBtn.title = 'Delete message';
|
||||
deleteBtn.onclick = () => handleDelete(el);
|
||||
|
||||
controls.appendChild(copyBtn);
|
||||
controls.appendChild(deleteBtn);
|
||||
el.appendChild(controls);
|
||||
}
|
||||
|
||||
messagesEl.appendChild(el);
|
||||
scrollToBottom();
|
||||
return el;
|
||||
}
|
||||
|
||||
function createTyping() {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'message ai';
|
||||
const typing = document.createElement('div');
|
||||
typing.className = 'typing';
|
||||
for (let i = 0; i < 3; i++) { const d = document.createElement('span'); d.className = 'dot'; typing.appendChild(d); }
|
||||
el.appendChild(typing);
|
||||
messagesEl.appendChild(el);
|
||||
scrollToBottom();
|
||||
return el;
|
||||
}
|
||||
|
||||
async function sendToApi(text) {
|
||||
const res = await fetch(API_ENDPOINT, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ message: text })
|
||||
});
|
||||
if (!res.ok) throw new Error('Network response was not ok');
|
||||
let json = await res.json();
|
||||
return json.response;
|
||||
}
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const text = input.value.trim();
|
||||
if (!text) return;
|
||||
appendMessage('user', text);
|
||||
input.value = '';
|
||||
sendBtn.disabled = true;
|
||||
input.focus();
|
||||
|
||||
const typingEl = createTyping();
|
||||
try {
|
||||
const reply = await sendToApi(text);
|
||||
typingEl.remove();
|
||||
appendMessage('ai', reply || '(no response)');
|
||||
} catch (err) {
|
||||
typingEl.remove();
|
||||
// Display exact error message: "Error: Failed to fetch"
|
||||
appendMessage('ai', 'Error: '+err.message);
|
||||
console.error(err);
|
||||
} finally {
|
||||
sendBtn.disabled = input.value.trim().length === 0;
|
||||
}
|
||||
});
|
||||
|
||||
// Enter to send, Shift+Enter for newline
|
||||
input.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
form.dispatchEvent(new Event('submit', { cancelable: true }));
|
||||
}
|
||||
});
|
||||
|
||||
// Small welcome message
|
||||
appendMessage('ai', 'Hello! I\'m your AI assistant. Ask me anything.');
|
||||
})();
|
||||
@ -1,35 +1,37 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Stellar AI Chat</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Stellar AI Chat</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<header class="header">
|
||||
<div style="display:flex;align-items:center;gap:12px;">
|
||||
<div class="logo">🤖</div>
|
||||
<div>
|
||||
<h1>My company</h1>
|
||||
<p class="subtitle">Dark-mode chat UI — powered by the backend AI</p>
|
||||
<div style="display:flex;align-items:center;gap:12px;">
|
||||
<div class="logo">🤖</div>
|
||||
<div>
|
||||
<h1>My company</h1>
|
||||
<p class="subtitle">Dark-mode chat UI — powered by the backend AI</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="chat" id="chat">
|
||||
<div class="messages" id="messages" aria-live="polite"></div>
|
||||
|
||||
<form id="composer" class="composer" action="#">
|
||||
<textarea id="input" placeholder="Say hello — press Enter to send (Shift+Enter for newline)" rows="2"></textarea>
|
||||
<button id="send" type="submit">Send</button>
|
||||
</form>
|
||||
<div class="messages" id="messages" aria-live="polite"></div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">Running with backend at <code>http://127.0.0.1:5000/hello</code></footer>
|
||||
</div>
|
||||
<form id="composer" class="composer" action="#">
|
||||
<textarea id="input" placeholder="Say hello — press Enter to send (Shift+Enter for newline)"
|
||||
rows="2"></textarea>
|
||||
<button id="send" type="submit" disabled>Send</button>
|
||||
</form>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
<footer class="footer">Running with backend at <code>http://127.0.0.1:5000/</code>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in new issue