1import React, { useState } from "react";
 2
 3interface ThinkingContentProps {
 4  thinking: string;
 5}
 6
 7function ThinkingContent({ thinking }: ThinkingContentProps) {
 8  const [isExpanded, setIsExpanded] = useState(true);
 9
10  // Truncate thinking for display - get first 80 chars
11  const truncateThinking = (text: string, maxLen: number = 80) => {
12    if (!text) return "";
13    const firstLine = text.split("\n")[0];
14    if (firstLine.length <= maxLen) return firstLine;
15    return firstLine.substring(0, maxLen) + "...";
16  };
17
18  const preview = truncateThinking(thinking);
19
20  return (
21    <div
22      className="thinking-content"
23      data-testid="thinking-content"
24      style={{
25        marginBottom: "0.5rem",
26      }}
27    >
28      <div
29        onClick={() => setIsExpanded(!isExpanded)}
30        style={{
31          cursor: "pointer",
32          display: "flex",
33          alignItems: "flex-start",
34          gap: "0.5rem",
35          marginLeft: 0,
36        }}
37      >
38        <span style={{ flexShrink: 0 }}>💭</span>
39        <div
40          style={{
41            flex: 1,
42            fontStyle: "italic",
43            color: "var(--text-secondary)",
44            whiteSpace: "pre-wrap",
45            wordBreak: "break-word",
46          }}
47        >
48          {isExpanded ? thinking : preview}
49        </div>
50        <button
51          className="thinking-toggle"
52          aria-label={isExpanded ? "Collapse" : "Expand"}
53          aria-expanded={isExpanded}
54          style={{
55            background: "none",
56            border: "none",
57            padding: "0.25rem",
58            cursor: "pointer",
59            color: "var(--text-tertiary)",
60            display: "flex",
61            alignItems: "center",
62            flexShrink: 0,
63          }}
64        >
65          <svg
66            width="12"
67            height="12"
68            viewBox="0 0 12 12"
69            fill="none"
70            xmlns="http://www.w3.org/2000/svg"
71            style={{
72              transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
73              transition: "transform 0.2s",
74            }}
75          >
76            <path
77              d="M4.5 3L7.5 6L4.5 9"
78              stroke="currentColor"
79              strokeWidth="1.5"
80              strokeLinecap="round"
81              strokeLinejoin="round"
82            />
83          </svg>
84        </button>
85      </div>
86    </div>
87  );
88}
89
90export default ThinkingContent;