Re-remove TimelineThought component

This commit is contained in:
2026-06-15 15:04:58 -07:00
parent 30581bcf75
commit f7c62b6424

View File

@@ -640,7 +640,7 @@ function Timeline({ entries, isActiveStream }: { entries: TimelineEntry[], isAct
{items.map((item, i) => { {items.map((item, i) => {
const isLast = i === items.length - 1; const isLast = i === items.length - 1;
if (item.kind === "thought") { if (item.kind === "thought") {
return <TimelineThought key={i} text={item.text} isStreaming={isActiveStream && isLast} />; return <TimelineText key={i} text={item.text} isStreaming={isActiveStream && isLast} />;
} }
if (item.kind === "text") { if (item.kind === "text") {
return <TimelineText key={i} text={item.text} isStreaming={isActiveStream && isLast} />; return <TimelineText key={i} text={item.text} isStreaming={isActiveStream && isLast} />;
@@ -666,90 +666,6 @@ function Timeline({ entries, isActiveStream }: { entries: TimelineEntry[], isAct
* step instead of concatenating into a wall of text. * step instead of concatenating into a wall of text.
*/ */
function TimelineThought({ text, isStreaming }: { text: string; isStreaming?: boolean }) {
const [expanded, setExpanded] = React.useState(true);
const textLenRef = React.useRef(text.length);
React.useEffect(() => {
// If not streaming, auto-collapse after a short delay so the user isn't stuck with huge thinking blocks
if (!isStreaming) {
const t = setTimeout(() => setExpanded(false), 500);
return () => clearTimeout(t);
}
}, [isStreaming]);
const proseWrap: React.CSSProperties = {
overflowWrap: "anywhere",
wordBreak: "break-word",
minWidth: 0,
};
return (
<div
style={{
margin: "12px 0",
fontFamily: "var(--font-inter),ui-sans-serif,sans-serif",
}}
>
<button
onClick={() => setExpanded((v) => !v)}
style={{
display: "inline-flex",
alignItems: "center",
gap: 6,
background: "#f4f4f5",
border: "1px solid #e4e4e7",
borderRadius: "999px",
padding: "4px 10px",
cursor: "pointer",
fontSize: "0.75rem",
color: "#52525b",
fontWeight: 500,
transition: "all 0.2s ease",
boxShadow: "0 1px 2px rgba(0,0,0,0.02)",
}}
>
<Sparkles
size={14}
className={isStreaming ? "animate-pulse" : ""}
style={{ color: "#8b5cf6" }}
/>
<span className={isStreaming ? "animate-pulse" : ""} style={{ transition: "opacity 0.2s ease" }}>
{isStreaming ? "Thinking..." : "Thought Process"}
</span>
<ChevronRight
size={14}
style={{
transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
transition: "transform 0.2s ease",
color: "#a1a1aa"
}}
/>
</button>
{expanded && (
<div
style={{
marginTop: 8,
padding: "10px 14px",
borderLeft: "2px solid #c4b5fd",
fontSize: "0.85rem",
color: "#52525b",
background: "linear-gradient(to right, #f5f3ff 0%, transparent 100%)",
borderRadius: "0 8px 8px 0",
...proseWrap,
}}
>
<span
style={proseWrap}
dangerouslySetInnerHTML={{
__html: renderMarkdown(stripRawToolLogs(text)) + (isStreaming ? `<span class="animate-pulse" style="display:inline-block; width:6px; height:13px; background-color:#9ca3af; vertical-align:-1px; margin-left:2px; border-radius:1px;"></span>` : ""),
}}
/>
</div>
)}
</div>
);
}
function TimelineText({ text, isStreaming }: { text: string; isStreaming?: boolean }) { function TimelineText({ text, isStreaming }: { text: string; isStreaming?: boolean }) {
const proseWrap: React.CSSProperties = { const proseWrap: React.CSSProperties = {