From 2fccf42c9e9d40838277a2c26d7558806cdf143d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Wed, 11 Dec 2024 15:57:17 -0800
Subject: [PATCH] fix llm demo

---
 demo/embeddable-llm-with-propagators.html | 11 +++--------
 src/folk-timer.ts                         |  9 +++++++--
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/demo/embeddable-llm-with-propagators.html b/demo/embeddable-llm-with-propagators.html
index 349dadd..370f191 100644
--- a/demo/embeddable-llm-with-propagators.html
+++ b/demo/embeddable-llm-with-propagators.html
@@ -35,6 +35,7 @@
         font-style: italic;
         font-size: 1rem;
         text-align: center;
+        margin: 0;
       }
     </style>
   </head>
@@ -80,7 +81,7 @@
     </folk-shape>
 
     <folk-shape x="400" y="100" width="250">
-      <folk-llm system-prompt="Output text as HTML, no backticks"></folk-llm>
+      <folk-llm system-prompt="Output text as HTML"></folk-llm>
     </folk-shape>
 
     <folk-shape x="700" y="200">
@@ -94,13 +95,7 @@
       expression="prompt: `double this list of ingredients '${from.innerHTML}'`"
     ></folk-event-propagator>
 
-    <folk-event-propagator
-      source="folk-llm"
-      target="folk-timer"
-      trigger="started"
-      expression="reset(): true
-start(): true"
-    >
+    <folk-event-propagator source="folk-llm" target="folk-timer" trigger="started" expression="restart(): true">
     </folk-event-propagator>
 
     <folk-event-propagator
diff --git a/src/folk-timer.ts b/src/folk-timer.ts
index 988043f..56c71e1 100644
--- a/src/folk-timer.ts
+++ b/src/folk-timer.ts
@@ -16,7 +16,7 @@ export class FolkTimer extends FolkElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.#updateTime(0);
+    this.reset();
   }
 
   start() {
@@ -33,8 +33,13 @@ export class FolkTimer extends FolkElement {
     this.#updateTime(0);
   }
 
+  restart() {
+    this.reset();
+    this.start();
+  }
+
   #updateTime = (time = this.#timeMs + this.#intervalMs) => {
     this.#timeMs = time;
-    this.textContent = (time / 1000).toFixed(1);
+    this.renderRoot.textContent = (time / 1000).toFixed(1);
   };
 }