Re-remove TimelineThought component
This commit is contained in:
@@ -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 = {
|
||||||
|
|||||||
Reference in New Issue
Block a user