Appending messages to conversation

sketches/2024-05-30-lookslike-prototype/src/components/com-app.ts

@@ -1,5 +1,5 @@
 import { LitElement, html } from 'lit-element'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, state } from 'lit/decorators.js'
 import { base } from '../styles'
 
 import { todoAppMockup } from '../data'
@@ -8,17 +8,36 @@ import { todoAppMockup } from '../data'
 export class ComApp extends LitElement {
   static styles = [base]
 
+  @state() graph = todoAppMockup as any
 
+  appendMessage() {
+    const newGraph = { ...this.graph }
+    const id = 'new' + (Math.floor(Math.random() * 1000))
+
+    newGraph.nodes.push({
+      id,
+      messages: [
+        {
+          role: 'user',
+          content: 'new message'
+        }
+      ],
+      definition: {}
+    });
+
+    newGraph.order.push(id);
+    this.graph = newGraph;
+  }
 
   render() {
     return html`
       <com-app-grid>
         <com-chat slot="main">
-            <com-thread slot="main" .graph=${todoAppMockup}></com-thread>
+            <com-thread slot="main" .graph=${this.graph}></com-thread>
             <div slot="footer">
                 <com-unibox>
                     <com-editor slot="main"></com-editor>
-                    <com-button slot="end">Send</com-button>
+                    <com-button slot="end" .action=${() => this.appendMessage()}>Send</com-button>
                 </com-unibox>
             </div>
         </com-chat>

sketches/2024-05-30-lookslike-prototype/src/components/com-button.ts

@@ -1,6 +1,6 @@
-import {LitElement, html, css} from 'lit-element'
-import {customElement} from 'lit/decorators.js'
-import {base} from '../styles'
+import { LitElement, html, css } from 'lit-element'
+import { customElement, property } from 'lit/decorators.js'
+import { base } from '../styles'
 
 const styles = css`
   :host {
@@ -29,7 +29,9 @@ const styles = css`
 export class ComButton extends LitElement {
   static styles = [base, styles]
 
+  @property({ type: Function }) action = () => { }
+
   render() {
-    return html`<button class="button"><slot></slot></button>`
+    return html`<button class="button" @click=${this.action}><slot></slot></button>`
   }
 }