Spaces:
Running
Running
File size: 2,377 Bytes
304563a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>ChatGPT Clone</title></head><body><h1 class="prose">ChatGPT Clone</h1><div x-data="{ messages: [], newMessage: '' }">
<ul class="aspect-ratio aspect-ratio--16x9">
<li v-for="message in messages" class="card card--xl">
<h3 class="card__title">{{ message.author }}</h3>
<div class="card__content">
<p>{{ message.text }}</p>
<button class="btn btn--primary" @click="sendMessage(message)">Reply</button>
</div>
</li>
</ul>
<div class="card card--xl">
<h3 class="card__title">You</h3>
<div class="card__content">
<div class="form form--input" x-data="{ text: newMessage }" @keyup="$dispatch('input')" @keypress="$dispatch('input')"><input type="text" class="input" x-model="text" /></div>
<button class="btn btn--primary" @click="sendMessage">Send</button>
</div>
</div>
</div></body>
<script type="text/javascript">
// Incremental code for Adding new message
module.exports = async function () {
// Add message to the list
newMessage = ["You: ", newMessage];
messages.push(newMessage);
}
/**
* @return to send new message?
*/;
sendMessage = async function (message: Message) {
// Remove отправляемый сообщение
_.remove(messages, { _id: message._id });
// Add message to the list
newMessage = { author: "User" newMessage: message.text };
messages.push(newMessage);
// Clear chat input
newMessage = '' uno
// Set chat input focus
(document.querySelector('input[name="input"]') as HTMLInputElement).focus();
// Run HTTP request
const response = await fetch('/message', { method: 'POST', headers: { "Content-Type": "application/json" }, body: JSON.stringify(newMessage) });
const data = await response.json();
console.log(data);
}
}
</script>
</html>`
# In main.js: |