<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>AI Jira Assistant</title>
<style>
body {
font-family: Arial, sans-serif;
background: #9999;
display: flex;
flex-direction: column;
height: 100vh;
}
#chat {
flex: 1;
overflow-y: auto;
padding: 10px;
background: #888;
border: 1px solid #777;
margin: 10px;
border-radius: 6px;
}
.msg {
margin: 5px 0;
padding: 8px;
border-radius: 6px;
max-width: 70%;
}
.user {
background: #007bff;
color: white;
align-self: flex-end;
}
.bot {
background: #8888;
color: black;
align-self: flex-start;
}
#input {
display: flex;
margin: 10px;
}
#input input {
flex: 1;
padding: 10px;
border: 1px solid #777;
border-radius: 4px;
}
#input button {
margin-left: 10px;
padding: 10px 15px;
border: none;
background: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
}
#input button:hover {
background: #0056b3;
}
</style>
</head>
<body>
<div id="chat"></div>
<div id="input">
<input
type="text"
id="message"
placeholder="Ask me to create issues, search, etc..."
/>
<button onclick="sendMessage()">Send</button>
</div>
<script>
const chatBox = document.getElementById("chat");
function appendMessage(content, sender) {
const div = document.createElement("div");
div.classList.add("msg", sender);
div.innerText = content;
chatBox.appendChild(div);
chatBox.scrollTop = chatBox.scrollHeight;
}
async function sendMessage() {
const input = document.getElementById("message");
const text = input.value.trim();
if (!text) return;
appendMessage(text, "user");
input.value = "";
const response = await fetch("/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message: text }),
});
const data = await response.json();
appendMessage(JSON.stringify(data.result, null, 2), "bot");
}
</script>
</body>
</html>
