Add BrowserSessionRow grouping

webview-ui/src/components/chat/ChatRow.tsx

@@ -1,13 +1,8 @@
 import { VSCodeBadge, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react"
 import deepEqual from "fast-deep-equal"
 import React, { memo, useEffect, useMemo, useRef } from "react"
-import {
-	BrowserActionResult,
-	ClineApiReqInfo,
-	ClineMessage,
-	ClineSayBrowserAction,
-	ClineSayTool,
-} from "../../../../src/shared/ExtensionMessage"
+import { useSize } from "react-use"
+import { ClineApiReqInfo, ClineMessage, ClineSayTool } from "../../../../src/shared/ExtensionMessage"
 import { COMMAND_OUTPUT_STRING } from "../../../../src/shared/combineCommandSequences"
 import { vscode } from "../../utils/vscode"
 import CodeAccordian, { removeLeadingNonAlphanumeric } from "../common/CodeAccordian"
@@ -15,7 +10,6 @@ import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
 import MarkdownBlock from "../common/MarkdownBlock"
 import Thumbnails from "../common/Thumbnails"
 import { highlightMentions } from "./TaskHeader"
-import { useSize } from "react-use"
 
 interface ChatRowProps {
 	message: ClineMessage
@@ -66,7 +60,13 @@ const ChatRow = memo(
 
 export default ChatRow
 
-const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessage, isLast }: ChatRowContentProps) => {
+export const ChatRowContent = ({
+	message,
+	isExpanded,
+	onToggleExpand,
+	lastModifiedMessage,
+	isLast,
+}: ChatRowContentProps) => {
 	const [cost, apiReqCancelReason, apiReqStreamingFailedMessage] = useMemo(() => {
 		if (message.text != null && message.say === "api_req_started") {
 			const info: ClineApiReqInfo = JSON.parse(message.text)
@@ -617,58 +617,6 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
 							</div>
 						</>
 					)
-				case "browser_action":
-					const browserAction = JSON.parse(message.text || "{}") as ClineSayBrowserAction
-					return (
-						<div
-							style={{
-								marginTop: -10,
-								width: "100%",
-							}}>
-							<div style={{ fontWeight: "bold" }}>{browserAction.action}</div>
-							{browserAction.coordinate && <div>{browserAction.coordinate}</div>}
-							{browserAction.text && <div>{browserAction.text}</div>}
-						</div>
-					)
-				case "browser_action_result":
-					const { screenshot, logs, currentMousePosition, currentUrl } = JSON.parse(
-						message.text || "{}"
-					) as BrowserActionResult
-					return (
-						<div
-							style={{
-								marginTop: -10,
-								width: "100%",
-							}}>
-							{currentMousePosition && <div>{currentMousePosition}</div>}
-							{currentUrl && <div>{currentUrl}</div>}
-							{screenshot && (
-								<img
-									src={screenshot}
-									alt="Inspect screenshot"
-									style={{
-										width: "calc(100% - 2px)",
-										height: "auto",
-										objectFit: "contain",
-										marginBottom: logs ? 7 : 0,
-										borderRadius: 3,
-										cursor: "pointer",
-										marginLeft: "1px",
-									}}
-									onClick={() => vscode.postMessage({ type: "openImage", text: screenshot })}
-								/>
-							)}
-							{logs && (
-								<CodeAccordian
-									code={logs}
-									language="shell"
-									isConsoleLogs={true}
-									isExpanded={isExpanded}
-									onToggleExpand={onToggleExpand}
-								/>
-							)}
-						</div>
-					)
 				default:
 					return (
 						<>
@@ -800,29 +748,6 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
 							</div>
 						</>
 					)
-				case "browser_action_launch":
-					// const isInspecting =
-					// isLast && lastModifiedMessage?.say === "inspect_site_result" && !lastModifiedMessage?.images
-
-					return (
-						<>
-							<div style={headerStyle}>
-								{/* {isInspecting ? <ProgressIndicator /> : toolIcon("inspect")} */}
-								<span style={{ fontWeight: "bold" }}>
-									<>Cline wants to use the browser:</>
-								</span>
-							</div>
-							<div
-								style={{
-									borderRadius: 3,
-									border: "1px solid var(--vscode-editorGroup-border)",
-									overflow: "hidden",
-									backgroundColor: CODE_BLOCK_BG_COLOR,
-								}}>
-								<CodeBlock source={`${"```"}shell\n${message.text}\n${"```"}`} forceWrap={true} />
-							</div>
-						</>
-					)
 				default:
 					return null
 			}