| <html> |
| <head> |
| <title>sketch-chat-input demo</title> |
| <link rel="stylesheet" href="demo.css" /> |
| <script |
| src="/dist/web-components/sketch-chat-input.js" |
| type="module" |
| ></script> |
| |
| <script> |
| document.addEventListener("DOMContentLoaded", () => { |
| const chatInput = document.querySelector("sketch-chat-input"); |
| console.log("chatInput: ", chatInput); |
| chatInput.content = "hi"; |
| chatInput.addEventListener("send-chat", (evt) => { |
| console.log("send chat event: ", evt); |
| const msgDiv = document.querySelector("#chat-messages"); |
| const newDiv = document.createElement("div"); |
| newDiv.innerText = evt.detail.message; |
| msgDiv.append(newDiv); |
| chatInput.content = ""; |
| }); |
| }); |
| </script> |
| </head> |
| <body> |
| <h1>sketch-chat-input demo</h1> |
| |
| <div id="chat-messages"></div> |
| |
| <sketch-chat-input></sketch-chat-input> |
| </body> |
| </html> |