Spaces:
Running
Running
| <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: |