Function SessionTurn

packages/ui/src/components/session-turn.tsx:24–462

(
  props: ParentProps<{
    sessionID: string
    messageID: string
    classes?: {
      root?: string
      content?: string
      container?: string
    }
  }>,
)

import { DateTime, DurationUnit, Interval } from "luxon"

export function SessionTurn(
  props: ParentProps<{
    sessionID: string
    messageID: string
    classes?: {
      root?: string
      content?: string
      container?: string
    }
  }>,
) {
  const data = useData()
  const diffComponent = useDiffComponent()
  const messages = createMemo(() => (props.sessionID ? (data.store.message[props.sessionID] ?? []) : []))
  const userMessages = createMemo(() =>
    messages()
      .filter((m) => m.role === "user")
      .sort((a, b) => a.id.localeCompare(b.id)),
  )
  const message = createMemo(() => userMessages()?.find((m) => m.id === props.messageID))
  const status = createMemo(
    () =>
      data.store.session_status[props.sessionID] ?? {
        type: "idle",
      },
  )
  const working = createMemo(() => status()?.type !== "idle")

  let scrollRef: HTMLDivElement | undefined
  const [state, setState] = createStore({
    contentRef: undefined as HTMLDivElement | undefined,
    stickyTitleRef: undefined as HTMLDivElement | undefined,
    stickyTriggerRef: undefined as HTMLDivElement | undefined,
    userScrolled: false,
    stickyHeaderHeight: 0,
    scrollY: 0,
    autoScrolling: false,
  })

  function handleScroll() {
    if (!scrollRef) return
    setState("scrollY", scrollRef.scrollTop)
    if (state.autoScrolling) return
    const { scrollTop, scrollHeight, clientHeight } = scrollRef
    const atBottom = scrollHeight - scrollTop - clientHeight < 50
    if (!atBottom && working()) {
      setState("userScrolled", true)
    }
  }

  function handleInteraction() {
    if (working()) {
      setState("userScrolled", true)
    }
  }

  function scrollToBottom() {
    if (!scrollRef || state.userScrolled || !working() || state.autoScrolling) return