Conversation overflow bug

[cpojer]

The main Conversation component looks like this:

export const Conversation = ({ className, ...props }: ConversationProps) => (
  <StickToBottom
    className={cn("relative flex-1 overflow-y-auto", className)}
    initial="smooth"
    resize="smooth"
    role="log"
    {...props}
  />
);

See https://github.com/vercel/ai-elements/blob/main/packages/elements/src/conversation.tsx#L14

However, StickToBottom applies overflow to what we use as ConversationContent, not Conversation:

if (getComputedStyle(scrollRef.current).overflow === "visible") {
	scrollRef.current.style.overflow = "auto";
}

See https://github.com/stackblitz-labs/use-stick-to-bottom/blob/main/src/StickToBottom.tsx#L129-L131

In real-world examples, this means that we end up creating two overlapping scroll areas. When hitting the bottom or top of the inner container, it will scroll its parent, Conversation, and result in broken layout. This is especially noticeable when Conversation doesn't have a fixed height specified.

imho the fix should be overflow-y-hidden on Conversation. I'm opening an issue instead of a PR to discuss this issue as I'm trying to understand the original intent and whether this was an oversight or whether it is intentional.