Progress.

src/snek/static/chat-window.js

@@ -0,0 +1,43 @@
+
+
+class ChatWindowElement extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.component = document.createElement('div');
+        this.shadowRoot.appendChild(this.component);
+    }
+
+    async connectedCallback() {
+        const link = document.createElement('link')
+        link.rel = 'stylesheet'
+        link.href = '/base.css'
+        this.component.appendChild(link)
+        this.container = document.createElement("section")
+        this.container.classList.add("chat-area")
+        this.container.classList.add("chat-window")
+        
+        const chatHeader = document.createElement("div")
+        chatHeader.classList.add("chat-header")
+        const chatTitle = document.createElement('h2')
+        chatTitle.classList.add("chat-title")
+        chatTitle.innerText = "Loading..."
+        chatHeader.appendChild(chatTitle)
+        this.container.appendChild(chatHeader)
+        const channels = await app.rpc.getChannels()
+        const channel = channels[0]
+        chatTitle.innerText = channel.name 
+        const channelElement = document.createElement('message-list')
+        channelElement.setAttribute("channel", channel.uid)
+        this.container.appendChild(channelElement)
+        this.component.appendChild(this.container)
+        console.info(channel)
+        const messages = await app.rpc.getMessages(channel.uid)
+        console.info(messages)
+        await app.rpc.sendMessage(channel.uid,"hello world")
+    }
+
+
+}
+
+customElements.define('chat-window', ChatWindowElement);