thing.js

  constructor() {
    super();
    this.chatLog = [];
    this.darkMode = false;
    this.developerModeEnabled = null;
    this.isFullView = null;
    this.isInterfaceHidden = null;
    this.hasEditorUI = null;

    autorun(() => {
      this.chatLog = toJS(ChatStore.chatLog);
    });
    autorun(() => {
      this.darkMode = toJS(ChatStore.darkMode);
    });
    autorun(() => {
      this.developerModeEnabled = toJS(ChatStore.developerModeEnabled);
    });
    autorun(() => {
      this.isFullView = toJS(ChatStore.isFullView);
    });
    autorun(() => {
      this.isInterfaceHidden = toJS(ChatStore.isInterfaceHidden);
    });
  }


render() {
    return html`
      <div class="chat-interface-wrapper">
        <div class="chat-wrapper">
          ${ChatStore.developerModeEnabled
            ? html` <chat-developer-panel></chat-developer-panel> `
            : ""}
          <div class="main-wrapper">
            <chat-control-bar></chat-control-bar>
            <div class="chat-container">
              <div class="chat-messages" @type-writer-end="${this.finishedTyping}"
              >
                ${this.chatLog.map(
                  (message) => html`
                    <chat-message
                      message="${message.message}"
                      ?sent-prompt="${message.author === ChatStore.userName}"
                      ?suggested-prompts="${ChatStore.currentSuggestions
                        .length > 0}"
                    ></chat-message>
                  `,
                )}
              </div>
              <chat-input
                placeholder="${ChatStore.promptPlaceholder}"
              ></chat-input>
            </div>
          </div>
        </div>
      </div>
    `;
  }

  finishedTyping(e) {
    const SCROLLABLE_ELEMENT =
    this.shadowRoot.querySelector(".chat-messages");
    SCROLLABLE_ELEMENT.scrollTo(0, SCROLLABLE_ELEMENT.scrollHeight);
  }

  /**
   * @description LitElement updated / sets scroll height to the bottom when a new message is mapped.
   * @param {object} changedProperties - changed properties
   */
  updated(changedProperties) {
    if (super.updated) super.updated(changedProperties);

    if (this.developerModeEnabled) console.table(changedProperties);

    if (changedProperties.has('isInterfaceHidden') || changedProperties.has('isFullView')) {
      // TODO should be changed, but brute forces full view css percents for now does not change automatically, which is why this should be changed
      const tempSiteGrabber = globalThis.document.querySelector("haxcms-site-builder");

      if (globalThis.innerHeight > 1000) {
        this.isFullView && !this.isInterfaceHidden
          ? (tempSiteGrabber.style.width = "65%")
          : (tempSiteGrabber.style.width = "100%");
      } else {
        this.isFullView && !this.isInterfaceHidden
          ? (tempSiteGrabber.style.width = "75%")
          : (tempSiteGrabber.style.width = "100%");
      }

      if (document.querySelector("haxcms-site-editor-ui")) {
        this.hasEditorUI = true;
      } else {
        this.hasEditorUI = false;
      }
    }

    if (changedProperties.has("chatLog")) {
      setTimeout(() => {
        if (this.chatLog.length > 1) {
          const SCROLLABLE_ELEMENT =
            this.shadowRoot.querySelector(".chat-messages");
          SCROLLABLE_ELEMENT.scrollTo(0, SCROLLABLE_ELEMENT.scrollHeight);
        } else {
          SCROLLABLE_ELEMENT.scrollTop(0);
        }          
      }, 0);
    }
  }