fix: message block width (#257)

This commit is contained in:
JeffJiang 2025-05-28 19:11:20 +08:00 committed by GitHub
parent 9888098f8a
commit d14fb262ea
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 5 deletions

View File

@ -173,7 +173,7 @@ function MessageListItem({
)}
>
<MessageBubble message={message}>
<div className="flex w-full flex-col">
<div className="flex w-full flex-col text-wrap break-words">
<Markdown
className={cn(
message.role === "user" &&

View File

@ -1,7 +1,14 @@
// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
// SPDX-License-Identifier: MIT
import { useEffect, useImperativeHandle, useRef, type ReactNode, type RefObject } from "react";
import {
useEffect,
useImperativeHandle,
useLayoutEffect,
useRef,
type ReactNode,
type RefObject,
} from "react";
import { useStickToBottom } from "use-stick-to-bottom";
import { ScrollArea } from "~/components/ui/scroll-area";
@ -26,15 +33,16 @@ export function ScrollContainer({
scrollShadow = true,
scrollShadowColor = "var(--background)",
autoScrollToBottom = false,
ref
ref,
}: ScrollContainerProps) {
const { scrollRef, contentRef, scrollToBottom, isAtBottom } = useStickToBottom({ initial: "instant" });
const { scrollRef, contentRef, scrollToBottom, isAtBottom } =
useStickToBottom({ initial: "instant" });
useImperativeHandle(ref, () => ({
scrollToBottom() {
if (isAtBottom) {
scrollToBottom();
}
}
},
}));
const tempScrollRef = useRef<HTMLElement>(null);
@ -51,6 +59,14 @@ export function ScrollContainer({
}
}, [autoScrollToBottom, contentRef, scrollRef]);
useLayoutEffect(() => {
if (contentRef.current) {
if (contentRef.current.parentElement) {
contentRef.current.parentElement.style.display = "block";
}
}
}, [contentRef]);
return (
<div className={cn("relative", className)}>
{scrollShadow && (