get an early UI

Author: tiye

index.html

@@ -16,7 +16,7 @@
     <!-- <script src="./main.mjs" type="module"></script> -->
     <div class="app"></div>
     <script
-      src="./target/js/debug/build/main/main.js"
+      src="./target/js/debug/build/app.js"
       type="module"
       defer
     ></script>

src/container.mbt

@@ -0,0 +1,59 @@
+///|
+typealias @respo_node.(RespoEvent, RespoNode, DispatchFn, RespoCommonError)
+
+///|
+fnalias @respo_node.(text_node, textarea, declare_static_style)
+
+///|
+fnalias @respo.ui_textarea
+
+///|
+struct ContainerState {
+  draft : String
+} derive(Default, ToJson, @json.FromJson)
+
+///|
+fn comp_container(states : @respo.RespoStatesTree) -> RespoNode[ActionOp] {
+  let cursor = states.path()
+  let state = (states.cast_branch() : ContainerState)
+  div([
+    div([
+      textarea(
+        class_list=[ui_textarea, style_textbox],
+        placeholder="Question",
+        value=state.draft,
+        event=Map::of([
+          (
+            Input,
+            fn(e, dispatch) {
+              if e is Input(value~, ..) {
+                dispatch.set_state!(cursor, ContainerState::{ draft: value })
+              }
+            },
+          ),
+          (
+            Keydown,
+            fn(e, dispatch) {
+              if e is Keyboard(key_code~, meta_key~, ..) {
+                if key_code == 13 && meta_key {
+                  ask_gemini(state.draft)
+                }
+              }
+            },
+          ),
+        ]),
+      ),
+      button(
+        inner_text="Ask",
+        class_name=ui_button,
+        style=respo_style(margin=4 |> Px),
+        event={}..set(Click, fn(e, dispatch) { ask_gemini(state.draft) }),
+      ),
+    ]),
+  ])
+}
+
+///|
+let style_textbox : String = declare_static_style([
+  ("&", respo_style(width=600 |> Px, height=160 |> Px)),
+])

src/control.mts

@@ -143,7 +143,7 @@ async function live(client: GoogleGenAI, model: string) {
   // await handleTurn();
   // console.log("-".repeat(80));
 
-  (window as any).ask = async (s: string) => {
+  (window as any).ask_gemini = async (s: string) => {
     if (cacheOfSession) {
       cacheOfSession.sendClientContent({ turns: s });
       // await handleTurn();

src/counter.mbt

@@ -7,6 +7,15 @@ fnalias @respo_node.(div, span, button, respo_style)
 ///|
 let app_store_key : String = "mbt-workflow"
 
+///|
+extern "js" fn register_gemini_ask() -> Unit =
+  #| () => {};
+  #| import "/src/control.mjs";
+
+///|
+extern "js" fn ask_gemini(msg : String) -> Unit =
+  #| (msg) => { window.ask_gemini(msg); };
+
 ///|
 fn view(
   store : Store
@@ -17,12 +26,13 @@ fn view(
   // @dom_ffi.log("Store to render: " + store.to_json().stringify(indent=2))
   let states = store.get_states()
   div(class_name=ui_global, style=respo_style(padding=Px(12)), [
-    comp_counter(states.pick("counter"), store.counted),
+    comp_container(states.pick("container")),
   ])
 }
 
 ///|
 fn main {
+  register_gemini_ask()
   let window = @dom_ffi.window()
   let mount_target = window
     .document()
@@ -36,7 +46,11 @@ fn main {
   app.backup_model_beforeunload()
   // @dom_ffi.log("store: " + app.store.val.to_json().stringify(indent=2))
   app.render_loop(fn() { view!(app.store.val) }, fn(op) {
-    @dom_ffi.log("Action: " + op.to_string())
+    if op is StatesChange(_) {
+
+    } else {
+      @dom_ffi.log("op: \{op}")
+    }
     app.store.val.update(op)
   })
   let dev_mode = @dom_ffi.new_url_search_params(window.location().search()).get(

src/main.mbt

@@ -30,7 +30,6 @@ let loopPlay = () => {
 
 export let loadAudio = (audioStr: string) => {
   audioBlobQueue.push(audioStr);
-  console.log("load one", audioBlobQueue.length);
   if (!isPlaying) {
     if (audioBlobQueue.length > 8) {
       loopPlay();