streamlit postMessage

import streamlit as st
import streamlit.components.v1 as components
from streamlit_extras.row import row
from streamlit_extras.stylable_container import stylable_container
  
  with st.sidebar:
      st.markdown("""
  <style>
  :root {
    --header-height: 50px;
  }
  [data-testid="stHeader"] {
      background-image: url(/app/static/icons8-astrolabe-64.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-orgin: content-box;
  }
  
  [data-testid="stHeader"] {
      background-color: grey;
      padding-top: var(--header-height);
  }
  
  [data-testid="stSidebar"] {
      margin-top: var(--header-height);
  }
  
  [data-testid="stToolbar"]::before {
      content: "Astrolabium";
  }
  
  [data-testid="collapsedControl"] {
      margin-top: var(--header-height);
  }
  
  [data-testid="stSidebarUserContent"] {
      padding-top: 2rem;
  }
  </style>
  """, unsafe_allow_html=True)
  icon, location, start, button = st.columns([1, 3, 3, 3])
  with icon:
      st.markdown("""
  <svg height="51px" style="overflow: visible">
  <line stroke-linecap="round" x1="7" x2="7" y1="0" y2="100%" style="stroke:#01579b; stroke-width:14px"></line>
  </svg>
  <div class="segment-divider" style="background-color: rgba(255,255,255,.54);
      border-radius: 5px;
      height: 10px;        with location:
              st.text_input(time, value="Amsterdam", label_visibility="collapsed")
          with start:
              st.button(time, disabled=True)
          with button:
              st.button(":magic_wand:", key=time)
      with stylable_container(def left_callback():
      st.write('Left button was clicked')
  components.html(
      """
  <script>
  function message(msg) {
     window.parent.postMessage(
     {
         sender: "component1",
         message: msg
     },
     "*"
     );
  }
  
  const doc = window.parent.document;
  buttons = Array.from(doc.querySelectorAll('button[kind=secondary]'));
  const left_button = buttons.find(el => el.innerText === 'LEFT');
  const right_button = buttons.find(el => el.innerText === 'RIGHT');
  doc.addEventListener('keydown', function(e) {
      switch (e.keyCode) {
          case 37: // (37 = left arrow)
              //left_button.click();
              console.log("left source");
              message("left");
              break;
          case 39: // (39 = right arrow)
              //right_button.click();
              console.log("right source");
              message("right");
              break;""",
      height=0,
      width=0,
  )
  components.html(
      """
  <script>
      window.parent.addEventListener("message", (event) => {
          if (event.data &&
              event.data.sender == "component1") {
                  console.log(event.data.message);
              }
          }
      );
  </script>
  """,
      height=0,
      width=0,
  )