chatgpt/chat.html

101 lines
2.7 KiB
HTML
Raw Permalink Normal View History

<!DOCTYPE html>
<html>
<head>
<style>
.chat-history {
height: 400px;
width: 33%;
overflow-y: scroll;
border: 1px solid black;
padding: 10px;
margin: 10px;
float: middle;
}
.chat-input {
width: 33%;
padding: 10px;
margin: 10px;
float: middle;
}
.user-info {
float: left;
width: 33%;
text-align: left;
margin: 10px;
height: 410px;
}
.user-info button {
display: block;
margin: 10px 0;
}
.chat-members {
width: 100%;
text-align: left;
margin: 10px;
border: 1px solid black;
padding: 10px;
height: 400px;
overflow-y: scroll;
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="chat-history" id="chatHistory"></div>
<div class="chat-input">
<textarea class="chat-input" id="chatInput"></textarea>
</div>
<div class="user-info">
<p id="userId">User ID: <span id="userIdValue">null</span></p>
<button id="generateIdButton">Generate ID</button>
<button id="saveNicknameButton">Save Nickname</button>
<div class="chat-members" id="chatMembers"></div>
</div>
<div class="clearfix"></div>
<script>
// generate a unique user id
document.getElementById("generateIdButton").addEventListener("click", function() {
const userIdValue = Date.now();
document.getElementById("userIdValue").innerHTML = userIdValue;
});
// save interlocutor id to nickname
document.getElementById("saveNicknameButton").addEventListener("click", function() {
// your code here
});
// update chat history
function updateChatHistory(message) {
const chatHistory = document.getElementById("chatHistory");
chatHistory.innerHTML += `<p>${message}</p>`;
chatHistory.scrollTop = chatHistory.scrollHeight;
}
// update chat members list
function updateChatMembers(members) {
const chatMembers = document.getElementById("chatMembers");
chatMembers.innerHTML = "";
members.forEach(member => {
chatMembers.innerHTML += `<p>${member}</p>`;
});
}
// handle enter key press in chat input
document.getElementById("chatInput").addEventListener("keydown", function(event) {
if (event.key === "Enter") {
const message = document.getElementById("chatInput").value;
updateChatHistory(message);
document.getElementById("chatInput").value = "";
}
});
</script>
</body>
</html>