fix: improve the think block

Author: bajrangCoder

src/pages/acp/acp.scss

@@ -689,22 +689,114 @@
 		&.thought {
 			align-self: stretch;
 
-			.acp-message-content {
+			.acp-thinking-block {
 				background: color-mix(
 					in srgb,
 					var(--popup-background-color),
 					var(--secondary-text-color) 2%
 				);
-				border: 1px dashed
-					color-mix(in srgb, var(--border-color), transparent 10%);
+				border: 1px solid
+					color-mix(in srgb, var(--border-color), transparent 20%);
+				border-radius: 12px;
+				overflow: hidden;
+				transition: border-color 0.3s ease;
+			}
+
+			&.streaming .acp-thinking-block {
+				border-color: color-mix(
+					in srgb,
+					var(--active-color),
+					transparent 60%
+				);
+			}
+
+			.acp-thinking-header {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 10px 14px;
+				cursor: pointer;
+				user-select: none;
+				transition: background 0.15s ease;
+
+				&:active {
+					background: color-mix(
+						in srgb,
+						var(--secondary-text-color),
+						transparent 92%
+					);
+				}
+			}
+
+			.acp-thinking-header-left {
+				display: flex;
+				align-items: center;
+				gap: 10px;
+				min-width: 0;
+			}
+
+			.acp-thinking-icon {
+				font-size: 18px;
+				color: color-mix(
+					in srgb,
+					var(--secondary-text-color),
+					transparent 40%
+				);
+				transition: color 0.3s ease;
+				flex-shrink: 0;
+
+				&.active {
+					color: var(--active-color);
+					animation: acp-streaming-pulse 1.5s ease-in-out infinite;
+				}
+			}
+
+			.acp-thinking-title {
+				font-size: 0.8rem;
+				font-weight: 600;
 				color: color-mix(
 					in srgb,
 					var(--secondary-text-color),
 					transparent 20%
 				);
-				border-radius: 12px;
+			}
+
+			.acp-thinking-chevron {
+				font-size: 18px;
+				color: color-mix(
+					in srgb,
+					var(--secondary-text-color),
+					transparent 50%
+				);
+				transition: transform 0.2s ease;
+				flex-shrink: 0;
+
+				&.expanded {
+					transform: rotate(180deg);
+				}
+			}
+
+			.acp-thinking-body {
+				display: none;
+				border-top: 1px solid var(--border-color);
+				background: color-mix(
+					in srgb,
+					var(--popup-background-color),
+					var(--secondary-text-color) 1%
+				);
 				padding: 12px 16px;
 				font-style: italic;
+				font-size: 0.82rem;
+				line-height: 1.6;
+				color: color-mix(
+					in srgb,
+					var(--secondary-text-color),
+					transparent 30%
+				);
+
+				&.expanded {
+					display: block;
+				}
 			}
 		}
 

src/pages/acp/components/chatMessage.js

@@ -280,11 +280,88 @@ async function resolveExistingPath(candidates = []) {
 	return null;
 }
 
+function ThoughtMessage({
+	message: initMessage,
+	isResponding: initResponding,
+}) {
+	let message = initMessage;
+	let messageResponding = initResponding;
+	let isExpanded = false;
+
+	const $icon = <i className="icon react acp-thinking-icon"></i>;
+	const $title = <span className="acp-thinking-title"></span>;
+	const $chevron = <i className="icon expand_more acp-thinking-chevron"></i>;
+	const $body = <div className="acp-thinking-body"></div>;
+
+	const $header = (
+		<div
+			className="acp-thinking-header"
+			onclick={() => {
+				isExpanded = !isExpanded;
+				$body.classList.toggle("expanded", isExpanded);
+				$chevron.classList.toggle("expanded", isExpanded);
+			}}
+		>
+			<div className="acp-thinking-header-left">
+				{$icon}
+				{$title}
+			</div>
+			{$chevron}
+		</div>
+	);
+
+	function renderThinking() {
+		$body.innerHTML = "";
+		const textBlocks = (message.content || []).filter((b) => b.type === "text");
+		const text = textBlocks.map((b) => b.text).join("\n");
+		if (text) {
+			const $markdown = <div className="acp-markdown-block md"></div>;
+			$markdown.innerHTML = renderMarkdown(text);
+			$body.append($markdown);
+		}
+
+		const isActive = Boolean(messageResponding);
+		$title.textContent = isActive ? "Thinking…" : "Thought Process";
+		$icon.classList.toggle("active", isActive);
+		$el.classList.toggle("streaming", isActive);
+	}
+
+	renderThinking();
+
+	const $el = (
+		<div className="acp-message thought">
+			<div className="acp-thinking-block">
+				{$header}
+				{$body}
+			</div>
+		</div>
+	);
+
+	const timestamp = new Date(message.timestamp);
+	$el.title = Number.isNaN(timestamp.getTime())
+		? ""
+		: timestamp.toLocaleString();
+
+	$el.update = (msg) => {
+		message = msg.message || msg;
+		if ("isResponding" in msg) messageResponding = Boolean(msg.isResponding);
+		renderThinking();
+		const ts = new Date(message.timestamp);
+		$el.title = Number.isNaN(ts.getTime()) ? "" : ts.toLocaleString();
+	};
+
+	return $el;
+}
+
 export default function ChatMessage({
 	message,
 	cwd = "",
 	isResponding = false,
 }) {
+	if (message.role === "thought") {
+		return ThoughtMessage({ message, isResponding });
+	}
+
 	let messageCwd = cwd;
 	let messageResponding = isResponding;
 
@@ -342,7 +419,7 @@ export default function ChatMessage({
 	};
 
 	function appendTextBlock(text) {
-		if (message.role === "agent" || message.role === "thought") {
+		if (message.role === "agent") {
 			const $markdown = <div className="acp-markdown-block md"></div>;
 			$markdown.innerHTML = renderMarkdown(text);
 			$content.append($markdown);
@@ -434,12 +511,7 @@ export default function ChatMessage({
 				</span>,
 			);
 		}
-		$role.textContent =
-			message.role === "user"
-				? "You"
-				: message.role === "thought"
-					? "Thinking"
-					: "Agent";
+		$role.textContent = message.role === "user" ? "You" : "Agent";
 		$meta.hidden = $meta.childElementCount === 0;
 		const timestamp = new Date(message.timestamp);
 		$el.title = Number.isNaN(timestamp.getTime())