{
const isLast = i === items.length - 1;
if (item.kind === "thought") {
- return
;
+ return
;
}
if (item.kind === "text") {
return
;
@@ -668,6 +661,89 @@ function Timeline({ entries, isActiveStream }: { entries: TimelineEntry[], isAct
* bubble so each round of multi-tool-loop output reads as a discrete
* step instead of concatenating into a wall of text.
*/
+
+function TimelineThought({ text, isStreaming }: { text: string; isStreaming?: boolean }) {
+ const [expanded, setExpanded] = React.useState(true);
+
+ // Auto-collapse when streaming stops
+ const textLenRef = React.useRef(text.length);
+ React.useEffect(() => {
+ let t = setTimeout(() => {
+ if (text.length === textLenRef.current && !isStreaming) {
+ setExpanded(false);
+ }
+ }, 1500);
+ return () => clearTimeout(t);
+ }, [text, isStreaming]);
+
+ React.useEffect(() => {
+ textLenRef.current = text.length;
+ }, [text]);
+
+ return (
+
+
+
+ {expanded && (
+
+ ` : ""),
+ }}
+ />
+
+ )}
+
+ );
+}
+
function TimelineText({ text, isStreaming }: { text: string; isStreaming?: boolean }) {
const proseWrap: React.CSSProperties = {
overflowWrap: "anywhere",
@@ -1068,6 +1144,8 @@ export function ChatPanel({
);
const [showThreads, setShowThreads] = useState(false);
const [mcpToken, setMcpToken] = useState
(null);
+ const [showScrollButton, setShowScrollButton] = useState(false);
+ const scrollContainerRef = useRef(null);
const [isChatMinimized, setIsChatMinimized] = useState(false);
// Auto-minimize when navigating to dashboard, auto-open when navigating to preview
@@ -2920,3 +2998,36 @@ export function ChatPanel({
);
}
+
+
+
+
+function ScrollToBottomButton({ onClick, visible }: { onClick: () => void, visible: boolean }) {
+ if (!visible) return null;
+ return (
+
+ );
+}