rails_den 2.0.0

data/app/assets/javascript/rails_den/chat.js

@@ -0,0 +1,3008 @@
+(() => {
+  const ROOT_SELECTOR =
+    "[data-rails-den-chat-root]"
+
+  const PAYLOAD_SELECTOR =
+    "[data-rails-den-chat-payload]"
+
+  const MODE_SHELL_SELECTOR =
+    "[data-rails-den-chat-mode-shell]"
+
+  const SPATIAL_ROOM_EVENT =
+    "rails-den:spatial-room-event"
+
+  const SPATIAL_ROOM_CHANGED_EVENT =
+    "rails-den:spatial-room-changed"
+
+  const CHAT_CHANNEL_CHANGE_EVENT =
+    "rails-den:chat-channel-change"
+
+  const CHAT_MESSAGE_ACCEPTED_EVENT =
+    "rails-den:chat-message-accepted"
+
+  const CHAT_DECK_STATE_EVENT =
+    "rails-den:chat-deck-state-change"
+
+  const REACTION_TYPES_META =
+    "rails-den-chat-reaction-types-url"
+
+  const REACTION_SEARCH_DEBOUNCE =
+    180
+
+  const roots =
+    new Map()
+
+  function reactAvailable() {
+    return (
+      window.React &&
+      window.ReactDOM &&
+      typeof window.ReactDOM.createRoot ===
+        "function"
+    )
+  }
+
+  function payloadFor(root) {
+    const element =
+      root.querySelector(
+        PAYLOAD_SELECTOR
+      )
+
+    if (!element) {
+      return null
+    }
+
+    try {
+      return JSON.parse(
+        element.textContent
+      )
+    } catch (_error) {
+      return null
+    }
+  }
+
+  function csrfToken() {
+    return document
+      .querySelector(
+        'meta[name="csrf-token"]'
+      )
+      ?.content
+  }
+
+  function reactionTypesUrl() {
+    return document
+      .querySelector(
+        `meta[name="${REACTION_TYPES_META}"]`
+      )
+      ?.content
+  }
+
+  function presenceSessionId() {
+    if (
+      !window.RailsDenPresence ||
+      typeof window.RailsDenPresence
+        .sessionId !== "function"
+    ) {
+      return null
+    }
+
+    return window.RailsDenPresence
+      .sessionId()
+  }
+
+  function formatTime(value) {
+    const date =
+      new Date(value)
+
+    if (
+      Number.isNaN(
+        date.getTime()
+      )
+    ) {
+      return ""
+    }
+
+    return date.toLocaleTimeString(
+      [],
+      {
+        hour: "numeric",
+        minute: "2-digit"
+      }
+    )
+  }
+
+  function modeShellFor(root) {
+    return root.closest(
+      MODE_SHELL_SELECTOR
+    )
+  }
+
+  function threeDimensionalMode(shell) {
+    return (
+      shell?.dataset
+        ?.railsDenChatActiveMode ===
+      "3d"
+    )
+  }
+
+  function deckOpen(shell) {
+    return (
+      shell?.dataset
+        ?.railsDenChatDeckOpen ===
+      "true"
+    )
+  }
+
+  function editableTarget(target) {
+    if (!(target instanceof Element)) {
+      return false
+    }
+
+    return Boolean(
+      target.closest(
+        "input, textarea, select, button, [contenteditable='true'], [contenteditable='']"
+      )
+    )
+  }
+
+  function dispatchDeckState(
+    shell,
+    open,
+    restorePointerLock = false
+  ) {
+    if (!shell) {
+      return
+    }
+
+    shell.dataset
+      .railsDenChatDeckOpen =
+        open
+          ? "true"
+          : "false"
+
+    document.dispatchEvent(
+      new CustomEvent(
+        CHAT_DECK_STATE_EVENT,
+        {
+          detail: {
+            shell,
+            open,
+            restorePointerLock
+          }
+        }
+      )
+    )
+  }
+
+  function dispatchAcceptedMessage(
+    slug,
+    message
+  ) {
+    if (
+      !slug ||
+      !message
+    ) {
+      return
+    }
+
+    window.dispatchEvent(
+      new CustomEvent(
+        CHAT_MESSAGE_ACCEPTED_EVENT,
+        {
+          detail: {
+            slug,
+            message
+          }
+        }
+      )
+    )
+  }
+
+  function parseChannelResponse(html) {
+    const parsed =
+      new DOMParser()
+        .parseFromString(
+          html,
+          "text/html"
+        )
+
+    const payloadElement =
+      parsed.querySelector(
+        `${ROOT_SELECTOR} ${PAYLOAD_SELECTOR}`
+      ) ||
+      parsed.querySelector(
+        PAYLOAD_SELECTOR
+      )
+
+    if (!payloadElement) {
+      return null
+    }
+
+    try {
+      return JSON.parse(
+        payloadElement.textContent
+      )
+    } catch (_error) {
+      return null
+    }
+  }
+
+  function messageIds(messages) {
+    return new Set(
+      (messages || [])
+        .filter(
+          (message) =>
+            message?.id != null
+        )
+        .map(
+          (message) =>
+            String(message.id)
+        )
+    )
+  }
+
+  function messageAfter(candidate, marker) {
+    if (!candidate || !marker) {
+      return Boolean(candidate)
+    }
+
+    const candidateTime =
+      new Date(candidate.created_at)
+        .getTime()
+
+    const markerTime =
+      new Date(marker.created_at)
+        .getTime()
+
+    return candidateTime > markerTime ||
+      (
+        candidateTime === markerTime &&
+        Number(candidate.id) > Number(marker.id)
+      )
+  }
+
+  function orderedMessages(messages) {
+    return [...(messages || [])].sort(
+      (left, right) => {
+        if (messageAfter(left, right)) {
+          return 1
+        }
+
+        if (messageAfter(right, left)) {
+          return -1
+        }
+
+        return 0
+      }
+    )
+  }
+
+  function newestMessage(messages) {
+    return (messages || []).reduce(
+      (newest, candidate) =>
+        !newest || messageAfter(candidate, newest)
+          ? candidate
+          : newest,
+      null
+    )
+  }
+
+  function channelList(configuration) {
+    return Array.isArray(
+      configuration?.channels
+    )
+      ? configuration.channels
+      : []
+  }
+
+  function emptyPresence() {
+    return {
+      visible: false,
+      available: true,
+      channels: {}
+    }
+  }
+
+  function initialSpatialMembers(configuration) {
+    const snapshot =
+      configuration
+        ?.spatial
+        ?.room
+        ?.snapshot
+
+    return Array.isArray(snapshot)
+      ? snapshot
+      : []
+  }
+
+  function atriumConfiguration(configuration) {
+    return {
+      channel: null,
+
+      channels:
+        channelList(
+          configuration
+        ),
+
+      messages: [],
+      can_post: false,
+      post_url: null,
+      presence_url: null,
+
+      presence:
+        configuration?.presence ||
+        emptyPresence(),
+
+      subscription_token: null,
+
+      spatial:
+        configuration?.spatial ||
+        null
+    }
+  }
+
+  function ChatApp({
+    initialConfiguration,
+    hostRoot
+  }) {
+    const React =
+      window.React
+
+    const h =
+      React.createElement
+
+    const {
+      useCallback,
+      useEffect,
+      useRef,
+      useState
+    } = React
+
+    const [
+      configuration,
+      setConfiguration
+    ] =
+      useState(
+        initialConfiguration
+      )
+
+    const [
+      messages,
+      setMessages
+    ] =
+      useState(
+        initialConfiguration.messages || []
+      )
+
+    const [unreadCounts, setUnreadCounts] =
+      useState(
+        Object.fromEntries(
+          channelList(initialConfiguration).map(
+            (candidate) => [candidate.slug, Number(candidate.unread_count) || 0]
+          )
+        )
+      )
+
+    const [firstUnreadMessageId, setFirstUnreadMessageId] =
+      useState(
+        initialConfiguration.first_unread_message_id || null
+      )
+
+    const [pinnedMessages, setPinnedMessages] =
+      useState(
+        initialConfiguration.pinned_messages || []
+      )
+
+    const [
+      body,
+      setBody
+    ] =
+      useState("")
+
+    const [
+      sending,
+      setSending
+    ] =
+      useState(false)
+
+    const [
+      switching,
+      setSwitching
+    ] =
+      useState(false)
+
+    const [
+      error,
+      setError
+    ] =
+      useState("")
+
+    const [
+      connectionState,
+      setConnectionState
+    ] =
+      useState(
+        initialConfiguration.channel
+          ? "Connecting…"
+          : "Atrium"
+      )
+
+    const [
+      presence,
+      setPresence
+    ] =
+      useState(
+        initialConfiguration.presence ||
+        emptyPresence()
+      )
+
+    const [
+      spatialMembers,
+      setSpatialMembers
+    ] =
+      useState(
+        initialSpatialMembers(
+          initialConfiguration
+        )
+      )
+
+    const [
+      reactionPickerOpen,
+      setReactionPickerOpen
+    ] =
+      useState(false)
+
+    const [
+      reactionQuery,
+      setReactionQuery
+    ] =
+      useState("")
+
+    const [
+      reactionTypes,
+      setReactionTypes
+    ] =
+      useState([])
+
+    const [
+      reactionLoading,
+      setReactionLoading
+    ] =
+      useState(false)
+
+    const [
+      reactionError,
+      setReactionError
+    ] =
+      useState("")
+
+    const messagesRef =
+      useRef(null)
+
+    const displayedMessagesRef =
+      useRef(initialConfiguration.messages || [])
+
+    const acknowledgementTimerRef =
+      useRef(null)
+
+    const pendingAcknowledgementRef =
+      useRef(null)
+
+    const acknowledgementInFlightRef =
+      useRef(false)
+
+    const textareaRef =
+      useRef(null)
+
+    const reactionSearchRef =
+      useRef(null)
+
+    const composerSelectionRef =
+      useRef({
+        start: 0,
+        end: 0
+      })
+
+    const configurationRef =
+      useRef(
+        initialConfiguration
+      )
+
+    const acceptedMessageIdsRef =
+      useRef(
+        messageIds(
+          initialConfiguration.messages
+        )
+      )
+
+    const requestRef =
+      useRef(null)
+
+    const requestGenerationRef =
+      useRef(0)
+
+    const shell =
+      modeShellFor(
+        hostRoot
+      )
+
+    const activelyReading =
+      useCallback(
+        () => {
+          const mode = shell?.dataset?.railsDenChatActiveMode
+
+          return document.visibilityState === "visible" &&
+            (
+              mode === "classic" ||
+              (mode === "3d" && deckOpen(shell))
+            )
+        },
+        [shell]
+      )
+
+    const sendPendingAcknowledgement =
+      useCallback(
+        async () => {
+          acknowledgementTimerRef.current = null
+          const active = configurationRef.current
+          const message = pendingAcknowledgementRef.current
+
+          if (!activelyReading() || !active?.read_state_url || !message || acknowledgementInFlightRef.current) {
+            return
+          }
+
+          pendingAcknowledgementRef.current = null
+          acknowledgementInFlightRef.current = true
+
+          try {
+            const response = await fetch(
+              active.read_state_url,
+              {
+                method: "PATCH",
+                credentials: "same-origin",
+                headers: {
+                  Accept: "application/json",
+                  "Content-Type": "application/json",
+                  "X-CSRF-Token": csrfToken()
+                },
+                body: JSON.stringify({last_read_message_id: message.id})
+              }
+            )
+
+            if (!response.ok) {
+              throw new Error("Read acknowledgement failed.")
+            }
+
+            const result = await response.json()
+            const slug = configurationRef.current?.channel?.slug
+
+            if (slug && result.channel_slug === slug) {
+              setUnreadCounts(
+                (current) => ({
+                  ...current,
+                  [slug]: Number(result.unread_count) || 0
+                })
+              )
+            }
+          } catch (_error) {
+            pendingAcknowledgementRef.current = message
+          } finally {
+            acknowledgementInFlightRef.current = false
+
+            if (pendingAcknowledgementRef.current && activelyReading()) {
+              acknowledgementTimerRef.current = window.setTimeout(
+                sendPendingAcknowledgement,
+                1000
+              )
+            }
+          }
+        },
+        [activelyReading]
+      )
+
+    const scheduleAcknowledgement =
+      useCallback(
+        (message) => {
+          if (!message?.id || !activelyReading()) {
+            return
+          }
+
+          const pending =
+            pendingAcknowledgementRef.current
+
+          if (
+            !pending ||
+            messageAfter(message, pending)
+          ) {
+            pendingAcknowledgementRef.current = message
+          }
+
+          if (!acknowledgementTimerRef.current) {
+            acknowledgementTimerRef.current = window.setTimeout(
+              sendPendingAcknowledgement,
+              1000
+            )
+          }
+        },
+        [activelyReading, sendPendingAcknowledgement]
+      )
+
+    const acknowledgeNewestDisplayed =
+      useCallback(
+        () => {
+          const displayed = displayedMessagesRef.current
+          scheduleAcknowledgement(
+            newestMessage(displayed)
+          )
+        },
+        [scheduleAcknowledgement]
+      )
+
+    const focusComposer =
+      useCallback(
+        () => {
+          textareaRef.current
+            ?.focus()
+        },
+        []
+      )
+
+    const rememberComposerSelection =
+      useCallback(
+        () => {
+          const textarea =
+            textareaRef.current
+
+          if (!textarea) {
+            return
+          }
+
+          composerSelectionRef.current = {
+            start:
+              textarea.selectionStart ??
+              textarea.value.length,
+            end:
+              textarea.selectionEnd ??
+              textarea.value.length
+          }
+        },
+        []
+      )
+
+    const insertReactionEmoji =
+      useCallback(
+        (emoji) => {
+          const textarea =
+            textareaRef.current
+
+          if (
+            !textarea ||
+            !emoji
+          ) {
+            return
+          }
+
+          const remembered =
+            composerSelectionRef.current
+
+          const start =
+            Math.min(
+              remembered.start,
+              body.length
+            )
+
+          const finish =
+            Math.min(
+              Math.max(
+                remembered.end,
+                start
+              ),
+              body.length
+            )
+
+          const nextBody =
+            `${body.slice(0, start)}${emoji}${body.slice(finish)}`
+
+          const nextCaret =
+            start + emoji.length
+
+          composerSelectionRef.current = {
+            start: nextCaret,
+            end: nextCaret
+          }
+
+          setBody(
+            nextBody
+          )
+
+          window.requestAnimationFrame(
+            () => {
+              const current =
+                textareaRef.current
+
+              if (!current) {
+                return
+              }
+
+              current.focus()
+              current.setSelectionRange(
+                nextCaret,
+                nextCaret
+              )
+            }
+          )
+        },
+        [body]
+      )
+
+    const focusComposerAfterPointerRelease =
+      useCallback(
+        () => {
+          if (
+            !document.pointerLockElement
+          ) {
+            window.requestAnimationFrame(
+              focusComposer
+            )
+
+            return
+          }
+
+          let finished =
+            false
+
+          const finish =
+            () => {
+              if (finished) {
+                return
+              }
+
+              finished =
+                true
+
+              document.removeEventListener(
+                "pointerlockchange",
+                handlePointerLockChange
+              )
+
+              window.requestAnimationFrame(
+                focusComposer
+              )
+            }
+
+          const handlePointerLockChange =
+            () => {
+              if (
+                !document.pointerLockElement
+              ) {
+                finish()
+              }
+            }
+
+          document.addEventListener(
+            "pointerlockchange",
+            handlePointerLockChange
+          )
+
+          window.setTimeout(
+            finish,
+            250
+          )
+        },
+        [focusComposer]
+      )
+
+    const openDeck =
+      useCallback(
+        () => {
+          if (
+            !shell ||
+            !threeDimensionalMode(
+              shell
+            )
+          ) {
+            return false
+          }
+
+          dispatchDeckState(
+            shell,
+            true,
+            false
+          )
+
+          focusComposerAfterPointerRelease()
+
+          return true
+        },
+        [
+          focusComposerAfterPointerRelease,
+          shell
+        ]
+      )
+
+    const closeDeck =
+      useCallback(
+        (
+          restorePointerLock = true
+        ) => {
+          if (!shell) {
+            return false
+          }
+
+          textareaRef.current
+            ?.blur()
+
+          setReactionPickerOpen(
+            false
+          )
+
+          setReactionQuery("")
+          setReactionError("")
+
+          dispatchDeckState(
+            shell,
+            false,
+            restorePointerLock
+          )
+
+          return true
+        },
+        [shell]
+      )
+
+    const acceptMessage =
+      useCallback(
+        (message) => {
+          if (
+            !message ||
+            message.id == null
+          ) {
+            return false
+          }
+
+          const key =
+            String(
+              message.id
+            )
+
+          if (
+            acceptedMessageIdsRef
+              .current
+              .has(key)
+          ) {
+            return false
+          }
+
+          acceptedMessageIdsRef
+            .current
+            .add(key)
+
+          setMessages(
+            (current) => {
+              const next =
+                orderedMessages(
+                  [...current, message]
+                )
+
+              displayedMessagesRef.current = next
+              return next
+            }
+          )
+
+          const slug = configurationRef.current?.channel?.slug
+
+          if (activelyReading()) {
+            scheduleAcknowledgement(message)
+          } else if (slug) {
+            setUnreadCounts(
+              (current) => ({
+                ...current,
+                [slug]: (current[slug] || 0) + 1
+              })
+            )
+            setFirstUnreadMessageId(
+              (current) => {
+                if (!current) {
+                  return message.id
+                }
+
+                const boundary =
+                  displayedMessagesRef.current.find(
+                    (candidate) =>
+                      String(candidate.id) === String(current)
+                  )
+
+                return boundary && messageAfter(boundary, message)
+                  ? message.id
+                  : current
+              }
+            )
+          }
+
+          dispatchAcceptedMessage(
+            configurationRef
+              .current
+              ?.channel
+              ?.slug,
+            message
+          )
+
+          return true
+        },
+        [activelyReading, scheduleAcknowledgement]
+      )
+
+    const applyPinnedMessage =
+      useCallback(
+        (message, pinned) => {
+          if (!message?.id) {
+            return
+          }
+
+          const canonical = {...message, pinned}
+
+          setMessages(
+            (current) => {
+              const next = current.map(
+                (candidate) =>
+                  String(candidate.id) === String(message.id)
+                    ? canonical
+                    : candidate
+              )
+              displayedMessagesRef.current = next
+              return next
+            }
+          )
+
+          setPinnedMessages(
+            (current) => {
+              const without = current.filter(
+                (candidate) => String(candidate.id) !== String(message.id)
+              )
+
+              if (!pinned) {
+                return without
+              }
+
+              return orderedMessages(
+                [...without, canonical]
+              )
+            }
+          )
+        },
+        []
+      )
+
+    const refreshPresence =
+      useCallback(
+        async () => {
+          const active =
+            configurationRef.current
+
+          if (
+            !active?.presence_url
+          ) {
+            return
+          }
+
+          try {
+            const response =
+              await fetch(
+                active.presence_url,
+                {
+                  method: "GET",
+                  credentials:
+                    "same-origin",
+                  headers: {
+                    Accept:
+                      "application/json"
+                  }
+                }
+              )
+
+            if (!response.ok) {
+              return
+            }
+
+            const contentType =
+              response.headers.get(
+                "content-type"
+              ) || ""
+
+            if (
+              !contentType.includes(
+                "application/json"
+              )
+            ) {
+              return
+            }
+
+            setPresence(
+              await response.json()
+            )
+          } catch (_error) {
+            return
+          }
+        },
+        []
+      )
+
+    const installConfiguration =
+      useCallback(
+        (next) => {
+          configurationRef.current =
+            next
+
+          acceptedMessageIdsRef.current =
+            messageIds(
+              next.messages
+            )
+
+          setConfiguration(
+            next
+          )
+
+          setMessages(
+            next.messages || []
+          )
+          displayedMessagesRef.current = next.messages || []
+
+          setUnreadCounts(
+            Object.fromEntries(
+              channelList(next).map(
+                (candidate) => [candidate.slug, Number(candidate.unread_count) || 0]
+              )
+            )
+          )
+          setFirstUnreadMessageId(
+            next.first_unread_message_id || null
+          )
+          setPinnedMessages(
+            next.pinned_messages || []
+          )
+
+          setPresence(
+            next.presence ||
+            emptyPresence()
+          )
+
+          setSpatialMembers(
+            initialSpatialMembers(
+              next
+            )
+          )
+
+          setConnectionState(
+            next.channel
+              ? "Connecting…"
+              : "Atrium"
+          )
+
+          setBody("")
+          setError("")
+          setReactionPickerOpen(
+            false
+          )
+          setReactionQuery("")
+          setReactionTypes([])
+          setReactionError("")
+          composerSelectionRef.current = {
+            start: 0,
+            end: 0
+          }
+        },
+        []
+      )
+
+    const loadChannel =
+      useCallback(
+        async (
+          candidate,
+          {
+            transitionWorld = false
+          } = {}
+        ) => {
+          if (
+            !candidate?.slug ||
+            !candidate?.url
+          ) {
+            return false
+          }
+
+          const current =
+            configurationRef.current
+
+          if (
+            current?.channel?.slug ===
+              candidate.slug
+          ) {
+            if (transitionWorld) {
+              document.dispatchEvent(
+                new CustomEvent(
+                  CHAT_CHANNEL_CHANGE_EVENT,
+                  {
+                    detail: {
+                      shell,
+                      slug:
+                        candidate.slug
+                    }
+                  }
+                )
+              )
+            }
+
+            focusComposer()
+
+            return true
+          }
+
+          requestRef.current
+            ?.abort()
+
+          const controller =
+            new AbortController()
+
+          requestRef.current =
+            controller
+
+          const generation =
+            ++requestGenerationRef
+              .current
+
+          setSwitching(true)
+          setError("")
+
+          try {
+            const response =
+              await fetch(
+                candidate.url,
+                {
+                  method: "GET",
+                  credentials:
+                    "same-origin",
+                  headers: {
+                    Accept:
+                      "text/html"
+                  },
+                  signal:
+                    controller.signal
+                }
+              )
+
+            if (!response.ok) {
+              throw new Error(
+                "Channel request failed."
+              )
+            }
+
+            const next =
+              parseChannelResponse(
+                await response.text()
+              )
+
+            if (
+              generation !==
+                requestGenerationRef.current ||
+              !next?.channel?.slug ||
+              next.channel.slug !==
+                candidate.slug
+            ) {
+              if (
+                generation ===
+                  requestGenerationRef.current
+              ) {
+                throw new Error(
+                  "Channel response was not usable."
+                )
+              }
+
+              return false
+            }
+
+            installConfiguration(
+              next
+            )
+
+            if (transitionWorld) {
+              document.dispatchEvent(
+                new CustomEvent(
+                  CHAT_CHANNEL_CHANGE_EVENT,
+                  {
+                    detail: {
+                      shell,
+                      slug:
+                        candidate.slug
+                    }
+                  }
+                )
+              )
+            }
+
+            window.requestAnimationFrame(
+              focusComposer
+            )
+
+            return true
+          } catch (requestError) {
+            if (
+              requestError?.name ===
+              "AbortError"
+            ) {
+              return false
+            }
+
+            setError(
+              "Unable to open that chat room."
+            )
+
+            return false
+          } finally {
+            if (
+              generation ===
+                requestGenerationRef.current
+            ) {
+              setSwitching(false)
+            }
+          }
+        },
+        [
+          focusComposer,
+          installConfiguration,
+          shell
+        ]
+      )
+
+    const returnToAtrium =
+      useCallback(
+        () => {
+          requestRef.current
+            ?.abort()
+
+          requestGenerationRef.current +=
+            1
+
+          installConfiguration(
+            atriumConfiguration(
+              configurationRef.current
+            )
+          )
+
+          setSpatialMembers([])
+          setSwitching(false)
+        },
+        [installConfiguration]
+      )
+
+    useEffect(
+      () => {
+        configurationRef.current =
+          configuration
+      },
+      [configuration]
+    )
+
+    useEffect(
+      () => {
+        if (
+          !reactionPickerOpen
+        ) {
+          return
+        }
+
+        const url =
+          reactionTypesUrl()
+
+        if (!url) {
+          setReactionTypes([])
+          setReactionError(
+            "Reactions are unavailable."
+          )
+
+          return
+        }
+
+        const controller =
+          new AbortController()
+
+        const timer =
+          window.setTimeout(
+            async () => {
+              setReactionLoading(true)
+              setReactionError("")
+
+              try {
+                const requestUrl =
+                  new URL(
+                    url,
+                    window.location.href
+                  )
+
+                if (
+                  reactionQuery.trim()
+                ) {
+                  requestUrl.searchParams.set(
+                    "q",
+                    reactionQuery
+                  )
+                }
+
+                const response =
+                  await fetch(
+                    requestUrl.toString(),
+                    {
+                      method: "GET",
+                      credentials:
+                        "same-origin",
+                      headers: {
+                        Accept:
+                          "application/json"
+                      },
+                      signal:
+                        controller.signal
+                    }
+                  )
+
+                if (!response.ok) {
+                  throw new Error(
+                    "Reaction search failed."
+                  )
+                }
+
+                const payload =
+                  await response.json()
+
+                setReactionTypes(
+                  Array.isArray(
+                    payload.reaction_types
+                  )
+                    ? payload.reaction_types
+                    : []
+                )
+              } catch (requestError) {
+                if (
+                  requestError?.name ===
+                  "AbortError"
+                ) {
+                  return
+                }
+
+                setReactionTypes([])
+                setReactionError(
+                  "Could not load reactions."
+                )
+              } finally {
+                if (
+                  !controller.signal.aborted
+                ) {
+                  setReactionLoading(false)
+                }
+              }
+            },
+            REACTION_SEARCH_DEBOUNCE
+          )
+
+        return () => {
+          window.clearTimeout(
+            timer
+          )
+
+          controller.abort()
+        }
+      },
+      [
+        reactionPickerOpen,
+        reactionQuery
+      ]
+    )
+
+    useEffect(
+      () => {
+        if (
+          reactionPickerOpen
+        ) {
+          window.requestAnimationFrame(
+            () => {
+              reactionSearchRef.current
+                ?.focus()
+            }
+          )
+        }
+      },
+      [reactionPickerOpen]
+    )
+
+    useEffect(
+      () => {
+        function handleReadingOpportunity(event) {
+          if (event?.detail?.shell && event.detail.shell !== shell) {
+            return
+          }
+
+          if (activelyReading()) {
+            acknowledgeNewestDisplayed()
+          }
+        }
+
+        function handleModeClick(event) {
+          if (event.target.closest('[data-rails-den-chat-mode="classic"]')) {
+            window.requestAnimationFrame(handleReadingOpportunity)
+          }
+        }
+
+        document.addEventListener("visibilitychange", handleReadingOpportunity)
+        document.addEventListener(CHAT_DECK_STATE_EVENT, handleReadingOpportunity)
+        document.addEventListener("click", handleModeClick)
+        handleReadingOpportunity()
+
+        return () => {
+          document.removeEventListener("visibilitychange", handleReadingOpportunity)
+          document.removeEventListener(CHAT_DECK_STATE_EVENT, handleReadingOpportunity)
+          document.removeEventListener("click", handleModeClick)
+        }
+      },
+      [acknowledgeNewestDisplayed, activelyReading, configuration.channel?.slug, shell]
+    )
+
+    useEffect(
+      () => {
+        const container =
+          messagesRef.current
+
+        if (!container) {
+          return
+        }
+
+        container.scrollTop =
+          container.scrollHeight
+      },
+      [
+        messages.length,
+        configuration.channel?.slug
+      ]
+    )
+
+    useEffect(
+      () => {
+        const slug =
+          configuration.channel?.slug
+
+        const token =
+          configuration.subscription_token
+
+        if (
+          !slug ||
+          !token
+        ) {
+          setConnectionState(
+            configuration.channel
+              ? "Offline"
+              : "Atrium"
+          )
+
+          return
+        }
+
+        const cable =
+          window.RailsDenCable &&
+          window.RailsDenCable.consumer()
+
+        if (!cable) {
+          setConnectionState(
+            "Offline"
+          )
+
+          return
+        }
+
+        setConnectionState(
+          "Connecting…"
+        )
+
+        let disposed =
+          false
+
+        const subscription =
+          cable.subscriptions.create(
+            {
+              channel:
+                "RailsDen::ChatStreamChannel",
+              token,
+              slug,
+              session_id:
+                presenceSessionId()
+            },
+            {
+              connected() {
+                if (disposed) {
+                  return
+                }
+
+                setConnectionState(
+                  "Live"
+                )
+
+                refreshPresence()
+              },
+
+              disconnected() {
+                if (disposed) {
+                  return
+                }
+
+                setConnectionState(
+                  "Reconnecting…"
+                )
+              },
+
+              rejected() {
+                if (disposed) {
+                  return
+                }
+
+                setConnectionState(
+                  "Unavailable"
+                )
+              },
+
+              received(data) {
+                if (
+                  disposed ||
+                  !data ||
+                  configurationRef
+                    .current
+                    ?.channel
+                    ?.slug !== slug
+                ) {
+                  return
+                }
+
+                if (
+                  data.type ===
+                    "chat_message_created"
+                ) {
+                  acceptMessage(
+                    data.message
+                  )
+
+                  return
+                }
+
+                if (
+                  data.type ===
+                    "presence_changed"
+                ) {
+                  refreshPresence()
+
+                  return
+                }
+
+                if (
+                  data.type === "chat_message_pinned" ||
+                  data.type === "chat_message_unpinned"
+                ) {
+                  applyPinnedMessage(
+                    data.message,
+                    data.type === "chat_message_pinned"
+                  )
+
+                  return
+                }
+
+                if (
+                  data.type ===
+                    "chat_membership_removed"
+                ) {
+                  window.location.reload()
+                }
+              }
+            }
+          )
+
+        return () => {
+          disposed =
+            true
+
+          subscription.unsubscribe()
+        }
+      },
+      [
+        acceptMessage,
+        applyPinnedMessage,
+        configuration.channel?.slug,
+        configuration.subscription_token,
+        refreshPresence
+      ]
+    )
+
+    useEffect(
+      () => {
+        function handleSpatialRoom(
+          event
+        ) {
+          const activeSlug =
+            configurationRef
+              .current
+              ?.channel
+              ?.slug
+
+          if (
+            !activeSlug ||
+            event.detail?.slug !==
+              activeSlug ||
+            !Array.isArray(
+              event.detail.members
+            )
+          ) {
+            return
+          }
+
+          setSpatialMembers(
+            event.detail.members
+          )
+        }
+
+        window.addEventListener(
+          SPATIAL_ROOM_EVENT,
+          handleSpatialRoom
+        )
+
+        return () => {
+          window.removeEventListener(
+            SPATIAL_ROOM_EVENT,
+            handleSpatialRoom
+          )
+        }
+      },
+      []
+    )
+
+    useEffect(
+      () => {
+        function handleSpatialRoomChanged(
+          event
+        ) {
+          if (
+            event.detail?.shell &&
+            event.detail.shell !==
+              shell
+          ) {
+            return
+          }
+
+          if (
+            !threeDimensionalMode(
+              shell
+            )
+          ) {
+            return
+          }
+
+          const kind =
+            event.detail?.kind
+
+          const slug =
+            event.detail?.slug
+
+          if (
+            kind === "atrium" ||
+            slug === "atrium"
+          ) {
+            returnToAtrium()
+
+            return
+          }
+
+          if (
+            kind !== "channel" ||
+            !slug
+          ) {
+            return
+          }
+
+          if (
+            configurationRef
+              .current
+              ?.channel
+              ?.slug === slug
+          ) {
+            return
+          }
+
+          const candidate =
+            channelList(
+              configurationRef.current
+            ).find(
+              (channel) =>
+                channel.slug ===
+                slug
+            )
+
+          if (!candidate) {
+            setError(
+              "This spatial room is not available in Chat."
+            )
+
+            return
+          }
+
+          loadChannel(
+            candidate,
+            {
+              transitionWorld:
+                false
+            }
+          )
+        }
+
+        document.addEventListener(
+          SPATIAL_ROOM_CHANGED_EVENT,
+          handleSpatialRoomChanged
+        )
+
+        return () => {
+          document.removeEventListener(
+            SPATIAL_ROOM_CHANGED_EVENT,
+            handleSpatialRoomChanged
+          )
+        }
+      },
+      [
+        loadChannel,
+        returnToAtrium,
+        shell
+      ]
+    )
+
+    useEffect(
+      () => {
+        if (!shell) {
+          return
+        }
+
+        shell.dataset
+          .railsDenChatDeckOpen =
+            "false"
+
+        const launcher =
+          document.createElement(
+            "button"
+          )
+
+        launcher.type =
+          "button"
+
+        launcher.className =
+          "rails-den-chat-launcher"
+
+        launcher.textContent =
+          "Enter · Chat"
+
+        launcher.setAttribute(
+          "aria-label",
+          "Open chat"
+        )
+
+        launcher.addEventListener(
+          "click",
+          openDeck
+        )
+
+        shell.append(
+          launcher
+        )
+
+        function handleDocumentKeyDown(
+          event
+        ) {
+          if (
+            !threeDimensionalMode(
+              shell
+            ) ||
+            event.repeat
+          ) {
+            return
+          }
+
+          if (
+            event.key === "Escape" &&
+            deckOpen(shell)
+          ) {
+            event.preventDefault()
+            event.stopPropagation()
+
+            closeDeck(
+              true
+            )
+
+            return
+          }
+
+          if (
+            event.key !== "Enter" ||
+            deckOpen(shell) ||
+            editableTarget(
+              event.target
+            )
+          ) {
+            return
+          }
+
+          event.preventDefault()
+          event.stopPropagation()
+
+          openDeck()
+        }
+
+        document.addEventListener(
+          "keydown",
+          handleDocumentKeyDown,
+          true
+        )
+
+        return () => {
+          launcher.removeEventListener(
+            "click",
+            openDeck
+          )
+
+          launcher.remove()
+
+          document.removeEventListener(
+            "keydown",
+            handleDocumentKeyDown,
+            true
+          )
+        }
+      },
+      [
+        closeDeck,
+        openDeck,
+        shell
+      ]
+    )
+
+    useEffect(
+      () => {
+        return () => {
+          requestRef.current
+            ?.abort()
+
+          if (acknowledgementTimerRef.current) {
+            window.clearTimeout(
+              acknowledgementTimerRef.current
+            )
+          }
+        }
+      },
+      []
+    )
+
+    async function changePin(message, pinned) {
+      const template = configurationRef.current?.message_pin_url_template
+
+      if (!template || !message?.id || !configurationRef.current?.can_manage_channel) {
+        return
+      }
+
+      setError("")
+
+      try {
+        const response = await fetch(
+          template.replace("__MESSAGE_ID__", encodeURIComponent(message.id)),
+          {
+            method: pinned ? "POST" : "DELETE",
+            credentials: "same-origin",
+            headers: {
+              Accept: "application/json",
+              "Content-Type": "application/json",
+              "X-CSRF-Token": csrfToken()
+            }
+          }
+        )
+
+        if (!response.ok) {
+          throw new Error("Pin request failed.")
+        }
+
+        const result = await response.json()
+        applyPinnedMessage(result.message, Boolean(result.message?.pinned))
+      } catch (_error) {
+        setError("The pinned-message state could not be changed. Please try again.")
+      }
+    }
+
+    async function sendMessage() {
+      const value =
+        body.trim()
+
+      const active =
+        configurationRef.current
+
+      if (
+        !active?.channel?.slug ||
+        !active.post_url ||
+        !value ||
+        sending ||
+        switching ||
+        !active.can_post
+      ) {
+        return
+      }
+
+      const postSlug =
+        active.channel.slug
+
+      setSending(true)
+      setError("")
+
+      const token =
+        csrfToken()
+
+      const headers = {
+        Accept:
+          "application/json",
+        "Content-Type":
+          "application/x-www-form-urlencoded;charset=UTF-8"
+      }
+
+      if (token) {
+        headers["X-CSRF-Token"] =
+          token
+      }
+
+      try {
+        const response =
+          await fetch(
+            active.post_url,
+            {
+              method: "POST",
+              credentials:
+                "same-origin",
+              headers,
+              body:
+                new URLSearchParams({
+                  "chat_message[body]":
+                    value
+                })
+            }
+          )
+
+        const payload =
+          await response.json()
+
+        if (!response.ok) {
+          const errors =
+            Array.isArray(
+              payload.errors
+            )
+              ? payload.errors
+              : []
+
+          setError(
+            errors.join(", ") ||
+              "Unable to send message."
+          )
+
+          return
+        }
+
+        if (
+          configurationRef
+            .current
+            ?.channel
+            ?.slug !== postSlug
+        ) {
+          return
+        }
+
+        acceptMessage(
+          payload.message
+        )
+
+        setBody("")
+        setReactionPickerOpen(
+          false
+        )
+        setReactionQuery("")
+        setReactionError("")
+        composerSelectionRef.current = {
+          start: 0,
+          end: 0
+        }
+
+        window.requestAnimationFrame(
+          focusComposer
+        )
+      } catch (_error) {
+        setError(
+          "Unable to send message."
+        )
+      } finally {
+        setSending(false)
+      }
+    }
+
+    function handleSubmit(event) {
+      event.preventDefault()
+
+      sendMessage()
+    }
+
+    function handleComposerKeyDown(
+      event
+    ) {
+      if (
+        event.key === "Enter" &&
+        !event.shiftKey
+      ) {
+        event.preventDefault()
+
+        sendMessage()
+      }
+    }
+
+    function handleChannelSelection(
+      event
+    ) {
+      const slug =
+        event.target.value
+
+      if (!slug) {
+        return
+      }
+
+      const candidate =
+        channelList(
+          configurationRef.current
+        ).find(
+          (channel) =>
+            channel.slug === slug
+        )
+
+      if (!candidate) {
+        return
+      }
+
+      loadChannel(
+        candidate,
+        {
+          transitionWorld:
+            true
+        }
+      )
+    }
+
+    function handleClassicChannelClick(
+      event,
+      candidate
+    ) {
+      if (
+        !threeDimensionalMode(
+          shell
+        )
+      ) {
+        return
+      }
+
+      event.preventDefault()
+
+      loadChannel(
+        candidate,
+        {
+          transitionWorld:
+            true
+        }
+      )
+    }
+
+    const channel =
+      configuration.channel
+
+    const channels =
+      channelList(
+        configuration
+      )
+
+    const roomPresence =
+      channel
+        ? presence.channels?.[
+            channel.slug
+          ] || {
+            count: 0,
+            members: []
+          }
+        : {
+            count: 0,
+            members: []
+          }
+
+    const spatialMemberNames =
+      spatialMembers
+        .map(
+          (member) =>
+            member?.display_name
+              ?.toString()
+              .trim()
+        )
+        .filter(Boolean)
+
+    return h(
+      "div",
+      {
+        className:
+          "rails-den-chat-workspace"
+      },
+
+      h(
+        "aside",
+        {
+          className:
+            "rails-den-chat-sidebar"
+        },
+
+        h(
+          "div",
+          {
+            className:
+              "rails-den-chat-sidebar-title"
+          },
+          "Channels"
+        ),
+
+        h(
+          "nav",
+          {
+            className:
+              "rails-den-chat-channel-list",
+            "aria-label":
+              "Chat channels"
+          },
+
+          ...channels.map(
+            (candidate) => {
+              const candidatePresence =
+                presence.channels?.[
+                  candidate.slug
+                ]
+
+              return h(
+                "a",
+                {
+                  key:
+                    candidate.slug,
+                  href:
+                    candidate.url,
+                  onClick:
+                    (event) =>
+                      handleClassicChannelClick(
+                        event,
+                        candidate
+                      ),
+                  className:
+                    candidate.slug ===
+                      channel?.slug
+                      ? "rails-den-chat-channel-link is-active"
+                      : "rails-den-chat-channel-link"
+                },
+
+                h(
+                  "span",
+                  null,
+                  "# ",
+                  candidate.title
+                ),
+
+                h(
+                  "span",
+                  {
+                    className:
+                      "rails-den-chat-channel-meta"
+                  },
+
+                  candidate.visibility ===
+                    "private" &&
+                    h(
+                      "small",
+                      null,
+                      "Private"
+                    ),
+
+                  (unreadCounts[candidate.slug] || 0) > 0 &&
+                    h(
+                      "span",
+                      {
+                        className: "rails-den-chat-unread-badge"
+                      },
+                      `${unreadCounts[candidate.slug]} unread`
+                    ),
+
+                  presence.visible &&
+                    presence.available &&
+                    h(
+                      "span",
+                      {
+                        className:
+                          "rails-den-chat-room-count"
+                      },
+                      String(
+                        candidatePresence?.count ||
+                          0
+                      )
+                    )
+                )
+              )
+            }
+          )
+        )
+      ),
+
+      h(
+        "section",
+        {
+          className:
+            "rails-den-chat-main"
+        },
+
+        h(
+          "header",
+          {
+            className:
+              "rails-den-chat-header"
+          },
+
+          h(
+            "div",
+            {
+              className:
+                "rails-den-chat-header-copy"
+            },
+
+            h(
+              "span",
+              {
+                className:
+                  "rails-den-chat-hud-kicker"
+              },
+              channel
+                ? "Spatial room"
+                : "Atrium"
+            ),
+
+            h(
+              "h1",
+              null,
+              channel
+                ? `# ${channel.title}`
+                : "Chat"
+            ),
+
+            h(
+              "p",
+              null,
+              channel
+                ? channel.description ||
+                  "Live room conversation"
+                : "Enter a portal or choose a room to start chatting."
+            )
+          ),
+
+          h(
+            "div",
+            {
+              className:
+                "rails-den-chat-header-actions"
+            },
+
+            channel &&
+              h(
+                "span",
+                {
+                  className:
+                    "rails-den-chat-spatial-count"
+                },
+                spatialMembers.length === 1
+                  ? "1 here"
+                  : `${spatialMembers.length} here`
+              ),
+
+            channel &&
+              h(
+                "span",
+                {
+                  className:
+                    connectionState ===
+                      "Live"
+                      ? "rails-den-chat-connection is-live"
+                      : "rails-den-chat-connection"
+                },
+                switching
+                  ? "Switching…"
+                  : connectionState
+              ),
+
+            h(
+              "button",
+              {
+                type:
+                  "button",
+                className:
+                  "rails-den-chat-hud-close",
+                title:
+                  "Close chat",
+                "aria-label":
+                  "Close chat",
+                onClick:
+                  () =>
+                    closeDeck(
+                      true
+                    )
+              },
+              "×"
+            )
+          )
+        ),
+
+        h(
+          "div",
+          {
+            className:
+              "rails-den-chat-hud-room-picker"
+          },
+
+          h(
+            "label",
+            {
+              htmlFor:
+                "rails-den-chat-hud-room-select"
+            },
+            "Room"
+          ),
+
+          h(
+            "select",
+            {
+              id:
+                "rails-den-chat-hud-room-select",
+              value:
+                channel?.slug || "",
+              disabled:
+                switching,
+              onChange:
+                handleChannelSelection
+            },
+
+            h(
+              "option",
+              {
+                value: ""
+              },
+              channel
+                ? "Choose another room…"
+                : "Choose a room…"
+            ),
+
+            ...channels.map(
+              (candidate) =>
+                h(
+                  "option",
+                  {
+                    key:
+                      candidate.slug,
+                    value:
+                      candidate.slug
+                  },
+                  `${candidate.visibility === "private" ? "◇" : "#"} ${candidate.title}${(unreadCounts[candidate.slug] || 0) > 0 ? ` · ${unreadCounts[candidate.slug]} unread` : ""}`
+                )
+            )
+          )
+        ),
+
+        channel &&
+          spatialMemberNames.length > 0 &&
+          h(
+            "div",
+            {
+              className:
+                "rails-den-chat-spatial-members"
+            },
+            spatialMemberNames.join(
+              " · "
+            )
+          ),
+
+        channel &&
+          presence.visible &&
+          h(
+            "div",
+            {
+              className:
+                "rails-den-chat-room-presence"
+            },
+
+            !presence.available
+              ? h(
+                  "span",
+                  {
+                    className:
+                      "rails-den-chat-presence-unavailable"
+                  },
+                  "Room presence unavailable"
+                )
+              : h(
+                  React.Fragment,
+                  null,
+
+                  h(
+                    "strong",
+                    null,
+                    roomPresence.count === 1
+                      ? "1 person here"
+                      : `${roomPresence.count} people here`
+                  ),
+
+                  roomPresence.members
+                    .length > 0 &&
+                    h(
+                      "div",
+                      {
+                        className:
+                          "rails-den-chat-room-people"
+                      },
+
+                      ...roomPresence.members.map(
+                        (member, index) =>
+                          h(
+                            "span",
+                            {
+                              key:
+                                member.mention_name ||
+                                `${member.display_name}-${index}`,
+                              className:
+                                "rails-den-chat-room-person"
+                            },
+                            member.display_name
+                          )
+                      )
+                    )
+                )
+          ),
+
+        channel &&
+          pinnedMessages.length > 0 &&
+          h(
+            "section",
+            {
+              className: "rails-den-chat-pinned-panel",
+              "aria-label": "Pinned messages"
+            },
+            h("h2", null, "Pinned messages"),
+            h(
+              "ul",
+              null,
+              ...pinnedMessages.map(
+                (message) =>
+                  h(
+                    "li",
+                    {key: message.id},
+                    h(
+                      "div",
+                      null,
+                      h("strong", null, message.author_name),
+                      h("span", {className: "rails-den-chat-pinned-preview"}, message.body)
+                    ),
+                    configuration.can_manage_channel &&
+                      h(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => changePin(message, false)
+                        },
+                        "Unpin"
+                      )
+                  )
+              )
+            )
+          ),
+
+        h(
+          "div",
+          {
+            className:
+              "rails-den-chat-message-list",
+            ref:
+              messagesRef
+          },
+
+          !channel
+            ? h(
+                "div",
+                {
+                  className:
+                    "rails-den-chat-hud-atrium-empty"
+                },
+
+                h(
+                  "strong",
+                  null,
+                  "You're in the Atrium."
+                ),
+
+                h(
+                  "span",
+                  null,
+                  "Walk through a portal or choose a room above."
+                )
+              )
+            : messages.length === 0
+              ? h(
+                  "div",
+                  {
+                    className:
+                      "rails-den-chat-empty"
+                  },
+                  "No messages yet. Start the conversation."
+                )
+              : messages.map(
+                  (message) =>
+                    h(
+                      React.Fragment,
+                      {
+                        key: message.id
+                      },
+                      String(message.id) === String(firstUnreadMessageId) &&
+                        h(
+                          "div",
+                          {
+                            className: "rails-den-chat-unread-divider",
+                            role: "separator"
+                          },
+                          "Unread messages"
+                        ),
+                      h(
+                        "article",
+                        {
+                          id: `chat-message-${message.id}`,
+                          className: message.pinned
+                            ? "rails-den-chat-message is-pinned"
+                            : "rails-den-chat-message"
+                        },
+                        h(
+                          "div",
+                          {className: "rails-den-chat-message-meta"},
+                          h("strong", null, message.author_name),
+                          message.pinned &&
+                            h("span", {className: "rails-den-chat-pin-indicator"}, "Pinned"),
+                          h(
+                            "time",
+                            {dateTime: message.created_at},
+                            formatTime(message.created_at)
+                          ),
+                          configuration.can_manage_channel &&
+                            h(
+                              "button",
+                              {
+                                type: "button",
+                                className: "rails-den-chat-pin-control",
+                                onClick: () => changePin(message, !message.pinned)
+                              },
+                              message.pinned ? "Unpin" : "Pin"
+                            )
+                        ),
+                        h("div", {className: "rails-den-chat-message-body"}, message.body)
+                      )
+                    )
+                )
+        ),
+
+        error &&
+          h(
+            "div",
+            {
+              className:
+                "rails-den-chat-error",
+              role:
+                "alert"
+            },
+            error
+          ),
+
+        channel &&
+          configuration.can_post
+          ? h(
+              "form",
+              {
+                className:
+                  "rails-den-chat-composer",
+                onSubmit:
+                  handleSubmit
+              },
+
+              h(
+                "textarea",
+                {
+                  ref:
+                    textareaRef,
+                  value:
+                    body,
+                  maxLength:
+                    50000,
+                  rows:
+                    3,
+                  required:
+                    true,
+                  disabled:
+                    switching,
+                  placeholder:
+                    `Message #${channel.title}`,
+                  onChange:
+                    (event) => {
+                      setBody(
+                        event.target.value
+                      )
+
+                      composerSelectionRef.current = {
+                        start:
+                          event.target.selectionStart ??
+                          event.target.value.length,
+                        end:
+                          event.target.selectionEnd ??
+                          event.target.value.length
+                      }
+                    },
+                  onClick:
+                    rememberComposerSelection,
+                  onKeyUp:
+                    rememberComposerSelection,
+                  onSelect:
+                    rememberComposerSelection,
+                  onKeyDown:
+                    handleComposerKeyDown
+                }
+              ),
+
+              h(
+                "div",
+                {
+                  className:
+                    "rails-den-chat-composer-footer"
+                },
+
+                h(
+                  "div",
+                  {
+                    className:
+                      "rails-den-chat-composer-tools"
+                  },
+
+                  h(
+                    "div",
+                    {
+                      className:
+                        "rails-den-reaction-picker rails-den-chat-reaction-picker"
+                    },
+
+                    h(
+                      "button",
+                      {
+                        type:
+                          "button",
+                        className:
+                          "rails-den-add-reaction",
+                        "aria-expanded":
+                          reactionPickerOpen,
+                        onMouseDown:
+                          () =>
+                            rememberComposerSelection(),
+                        onClick:
+                          () => {
+                            if (
+                              reactionPickerOpen
+                            ) {
+                              setReactionPickerOpen(
+                                false
+                              )
+                              setReactionQuery("")
+                              setReactionError("")
+                            } else {
+                              setReactionLoading(
+                                true
+                              )
+                              setReactionPickerOpen(
+                                true
+                              )
+                            }
+                          }
+                      },
+                      "Emoji"
+                    ),
+
+                    reactionPickerOpen &&
+                      h(
+                        "div",
+                        {
+                          className:
+                            "rails-den-reaction-picker-menu",
+                          "aria-label":
+                            "Choose a reaction emoji"
+                        },
+
+                        h(
+                          "div",
+                          {
+                            className:
+                              "rails-den-reaction-search"
+                          },
+
+                          h(
+                            "input",
+                            {
+                              ref:
+                                reactionSearchRef,
+                              type:
+                                "search",
+                              value:
+                                reactionQuery,
+                              placeholder:
+                                "Search emoji",
+                              autoComplete:
+                                "off",
+                              "aria-label":
+                                "Search reactions",
+                              onChange:
+                                (event) =>
+                                  setReactionQuery(
+                                    event.target.value
+                                  ),
+                              onKeyDown:
+                                (event) => {
+                                  if (
+                                    event.key ===
+                                    "Enter"
+                                  ) {
+                                    event.preventDefault()
+                                  }
+
+                                  if (
+                                    event.key ===
+                                    "Escape"
+                                  ) {
+                                    event.preventDefault()
+                                    setReactionPickerOpen(
+                                      false
+                                    )
+                                    setReactionQuery("")
+                                    setReactionError("")
+                                    focusComposer()
+                                  }
+                                }
+                            }
+                          )
+                        ),
+
+                        h(
+                          "div",
+                          {
+                            className:
+                              "rails-den-reaction-options",
+                            role:
+                              "group",
+                            "aria-label":
+                              "Available reactions"
+                          },
+
+                          reactionLoading
+                            ? h(
+                                "p",
+                                {
+                                  className:
+                                    "rails-den-reaction-no-results"
+                                },
+                                "Loading reactions…"
+                              )
+                            : reactionError
+                              ? h(
+                                  "p",
+                                  {
+                                    className:
+                                      "rails-den-reaction-error"
+                                  },
+                                  reactionError
+                                )
+                              : reactionTypes.length ===
+                                  0
+                                ? h(
+                                    "p",
+                                    {
+                                      className:
+                                        "rails-den-reaction-no-results"
+                                    },
+                                    "No matching reactions found."
+                                  )
+                                : reactionTypes.map(
+                                    (reactionType) =>
+                                      h(
+                                        "button",
+                                        {
+                                          key:
+                                            reactionType.id,
+                                          type:
+                                            "button",
+                                          className:
+                                            "rails-den-reaction-option",
+                                          title:
+                                            reactionType.name,
+                                          onClick:
+                                            () =>
+                                              insertReactionEmoji(
+                                                reactionType.emoji
+                                              )
+                                        },
+
+                                        h(
+                                          "span",
+                                          {
+                                            "aria-hidden":
+                                              "true"
+                                          },
+                                          reactionType.emoji
+                                        ),
+
+                                        h(
+                                          "span",
+                                          null,
+                                          reactionType.name
+                                        )
+                                      )
+                                  )
+                        )
+                      )
+                  ),
+
+                  h(
+                    "span",
+                    null,
+                    "Enter sends · Shift+Enter adds a line · Esc moves"
+                  )
+                ),
+
+                h(
+                  "button",
+                  {
+                    type:
+                      "submit",
+                    disabled:
+                      sending ||
+                      switching ||
+                      body.trim() === ""
+                  },
+                  sending
+                    ? "Sending…"
+                    : "Send"
+                )
+              )
+            )
+          : channel
+            ? h(
+                "div",
+                {
+                  className:
+                    "rails-den-chat-cannot-post"
+                },
+                "You cannot send messages in this channel."
+              )
+            : null
+      )
+    )
+  }
+
+  function initializeChat(root) {
+    if (
+      root.dataset
+        .railsDenChatReady ===
+      "true"
+    ) {
+      return
+    }
+
+    if (!reactAvailable()) {
+      return
+    }
+
+    const configuration =
+      payloadFor(root)
+
+    if (!configuration) {
+      return
+    }
+
+    const originalHtml =
+      root.innerHTML
+
+    root.dataset
+      .railsDenChatReady =
+      "true"
+
+    const reactRoot =
+      window.ReactDOM.createRoot(
+        root
+      )
+
+    roots.set(
+      root,
+      {
+        root:
+          reactRoot,
+        originalHtml
+      }
+    )
+
+    reactRoot.render(
+      window.React.createElement(
+        ChatApp,
+        {
+          initialConfiguration:
+            configuration,
+          hostRoot:
+            root
+        }
+      )
+    )
+  }
+
+  function initializeChats() {
+    document
+      .querySelectorAll(
+        ROOT_SELECTOR
+      )
+      .forEach(
+        initializeChat
+      )
+  }
+
+  function restoreChatsForTurboCache() {
+    roots.forEach(
+      (
+        {
+          root,
+          originalHtml
+        },
+        element
+      ) => {
+        root.unmount()
+
+        element.innerHTML =
+          originalHtml
+
+        delete element.dataset
+          .railsDenChatReady
+      }
+    )
+
+    document
+      .querySelectorAll(
+        MODE_SHELL_SELECTOR
+      )
+      .forEach(
+        (shell) => {
+          delete shell.dataset
+            .railsDenChatDeckOpen
+        }
+      )
+
+    roots.clear()
+  }
+
+  document.addEventListener(
+    "DOMContentLoaded",
+    initializeChats
+  )
+
+  document.addEventListener(
+    "turbo:load",
+    initializeChats
+  )
+
+  document.addEventListener(
+    "turbo:before-cache",
+    restoreChatsForTurboCache
+  )
+})()