Function useChatUI

cli/src/hooks/use-chat-ui.ts:47–131

({
  messages,
  isUserCollapsing,
}: UseChatUIOptions)

}

export function useChatUI({
  messages,
  isUserCollapsing,
}: UseChatUIOptions): UseChatUIReturn {
  const scrollRef = useRef<ScrollBoxRenderable | null>(null)
  const [hasOverflow, setHasOverflow] = useState(false)
  const hasOverflowRef = useRef(false)

  // Terminal dimensions
  const { separatorWidth, terminalWidth, terminalHeight } =
    useTerminalDimensions()
  const { height: heightLayout, width: widthLayout } = useTerminalLayout()
  const isCompactHeight = heightLayout.is('xs')
  const isNarrowWidth = widthLayout.is('xs')
  const messageAvailableWidth = separatorWidth

  // Theme
  const theme = useTheme()
  const markdownPalette = useMemo(() => createMarkdownPalette(theme), [theme])

  // Scroll management
  const { scrollToLatest, scrollUp, scrollDown, scrollboxProps, isAtBottom } =
    useChatScrollbox(scrollRef, messages, isUserCollapsing)

  // Check if content has overflowed and needs scrolling
  useEffect(() => {
    const scrollbox = scrollRef.current
    if (!scrollbox) return

    const checkOverflow = () => {
      const contentHeight = scrollbox.scrollHeight
      const viewportHeight = scrollbox.viewport.height
      const isOverflowing = contentHeight > viewportHeight

      if (hasOverflowRef.current !== isOverflowing) {
        hasOverflowRef.current = isOverflowing
        setHasOverflow(isOverflowing)
      }
    }

    checkOverflow()
    scrollbox.verticalScrollBar.on('change', checkOverflow)

    return () => {
      scrollbox.verticalScrollBar.off('change', checkOverflow)
    }
  }, [])

  // Inertial scroll acceleration
  const inertialScrollAcceleration = useMemo(
    () => createChatScrollAcceleration(),
    [],
  )

  const appliedScrollboxProps = useMemo(
    () =>
      inertialScrollAcceleration
        ? { ...scrollboxProps, scrollAcceleration: inertialScrollAcceleration }