Add ChatRow and handle different message types

webview-ui/src/components/ChatRow.tsx

@@ -0,0 +1,209 @@
+import React, { useState } from "react"
+import { ClaudeMessage, ClaudeAsk, ClaudeSay } from "@shared/ExtensionMessage"
+import { VSCodeButton, VSCodeProgressRing, VSCodeTag } from "@vscode/webview-ui-toolkit/react"
+
+interface ChatRowProps {
+	message: ClaudeMessage
+	cost?: string
+}
+
+const ChatRow: React.FC<ChatRowProps> = ({ message, cost }) => {
+	const [isExpanded, setIsExpanded] = useState(false)
+
+	const getIconAndTitle = (type: ClaudeAsk | ClaudeSay | undefined): [JSX.Element | null, string | null] => {
+		switch (type) {
+			case "request_limit_reached":
+				return [
+					<span className="codicon codicon-error" style={{ color: "var(--vscode-errorForeground)" }}></span>,
+					"Max Requests Reached",
+				]
+			case "error":
+				return [
+					<span className="codicon codicon-error" style={{ color: "var(--vscode-errorForeground)" }}></span>,
+					"Error",
+				]
+			case "command":
+				return [<span className="codicon codicon-terminal"></span>, "Command"]
+			case "completion_result":
+				return [
+					<span
+						className="codicon codicon-check"
+						style={{ color: "var(--vscode-testing-iconPassed)" }}></span>,
+					"Task Completed",
+				]
+			case "tool":
+				return [<span className="codicon codicon-tools"></span>, "Tool"]
+			default:
+				return [null, null]
+		}
+	}
+
+	const renderContent = () => {
+		const [icon, title] = getIconAndTitle(message.type === "ask" ? message.ask : message.say)
+
+		const headerStyle: React.CSSProperties = {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "left",
+			gap: "10px",
+			marginBottom: "10px",
+		}
+
+		const contentStyle: React.CSSProperties = {
+			marginLeft: "20px",
+		}
+
+		switch (message.type) {
+			case "say":
+				switch (message.say) {
+					case "task":
+						return (
+							<div
+								style={{
+									backgroundColor: "var(--vscode-textBlockQuote-background)",
+									padding: "10px",
+									borderLeft: "5px solid var(--vscode-textBlockQuote-border)",
+								}}>
+								<h3 style={headerStyle}>Task</h3>
+								<p style={contentStyle}>{message.text}</p>
+							</div>
+						)
+					case "api_req_started":
+						return (
+							<div>
+								<div style={headerStyle}>
+									<span>Made API request...</span>
+									{cost ? (
+										<span
+											className="codicon codicon-check"
+											style={{ color: "var(--vscode-testing-iconPassed)" }}></span>
+									) : (
+										<VSCodeProgressRing />
+									)}
+									{cost && <VSCodeTag>{cost}</VSCodeTag>}
+								</div>
+								<VSCodeButton
+									appearance="icon"
+									aria-label="Toggle Details"
+									onClick={() => setIsExpanded(!isExpanded)}>
+									<span className={`codicon codicon-chevron-${isExpanded ? "up" : "down"}`}></span>
+								</VSCodeButton>
+							</div>
+						)
+					case "api_req_finished":
+						return null // Hide this message type
+					case "tool":
+					case "error":
+					case "text":
+					case "command_output":
+						return (
+							<>
+								{title && (
+									<div style={headerStyle}>
+										{icon}
+										<h4>{title}</h4>
+									</div>
+								)}
+								<pre style={contentStyle}>
+									<code>{message.text}</code>
+								</pre>
+							</>
+						)
+					default:
+						return (
+							<>
+								{title && (
+									<div style={headerStyle}>
+										{icon}
+										<h4>{title}</h4>
+									</div>
+								)}
+								<p style={contentStyle}>{message.text}</p>
+							</>
+						)
+				}
+			case "ask":
+				switch (message.ask) {
+					case "request_limit_reached":
+						return (
+							<>
+								<div style={headerStyle}>
+									{icon}
+									<h4>{title}</h4>
+								</div>
+								<p style={{ ...contentStyle, color: "var(--vscode-errorForeground)" }}>
+									Your task has reached the maximum request limit (maxRequestsPerTask, you can change
+									this in settings). Do you want to keep going or start a new task?
+								</p>
+							</>
+						)
+					case "command":
+						return (
+							<>
+								<div style={headerStyle}>
+									{icon}
+									<h4>{title}</h4>
+								</div>
+								<div style={contentStyle}>
+									<p>Claude would like to run this command. Do you allow this?</p>
+									<pre>
+										<code>{message.text}</code>
+									</pre>
+								</div>
+							</>
+						)
+					case "completion_result":
+						return (
+							<div
+								style={{
+									borderLeft: "5px solid var(--vscode-testing-iconPassed)",
+									paddingLeft: "10px",
+								}}>
+								<div style={headerStyle}>
+									{icon}
+									<h4 style={{ color: "var(--vscode-testing-iconPassed)" }}>{title}</h4>
+								</div>
+								<p style={contentStyle}>{message.text}</p>
+							</div>
+						)
+					default:
+						return (
+							<>
+								{title && (
+									<div style={headerStyle}>
+										{icon}
+										<h4>{title}</h4>
+									</div>
+								)}
+								<p style={contentStyle}>{message.text}</p>
+							</>
+						)
+				}
+		}
+	}
+
+	if (message.say === "api_req_finished") {
+		return null // Don't render anything for this message type
+	}
+
+	return (
+		<div
+			style={{
+				padding: "10px",
+				borderBottom: "1px solid var(--vscode-panel-border)",
+				backgroundColor:
+					message.say === "task"
+						? "var(--vscode-textBlockQuote-background)"
+						: "var(--vscode-editor-background)",
+			}}>
+			{renderContent()}
+			{isExpanded && message.say === "api_req_started" && (
+				<pre style={{ marginTop: "10px" }}>
+					<code>{message.text}</code>
+				</pre>
+			)}
+		</div>
+	)
+}
+
+export default ChatRow

webview-ui/src/components/ChatView.tsx

@@ -4,12 +4,60 @@ import { KeyboardEvent, useEffect, useRef, useState } from "react"
 import DynamicTextArea from "react-textarea-autosize"
 import { vscode } from "../utilities/vscode"
 import { ClaudeAskResponse } from "@shared/WebviewMessage"
+import ChatRow from "./ChatRow"
 
 interface ChatViewProps {
 	messages: ClaudeMessage[]
 }
 // maybe instead of storing state in App, just make chatview  always show so dont conditionally load/unload? need to make sure messages are persisted (i remember seeing something about how webviews can be frozen in docs)
-const ChatView = ({ messages}: ChatViewProps) => {
+const ChatView = ({}: ChatViewProps) => {
+	// dummy data for messages
+	const generateRandomTimestamp = (baseDate: Date, rangeInDays: number): number => {
+		const rangeInMs = rangeInDays * 24 * 60 * 60 * 1000 // convert days to milliseconds
+		const randomOffset = Math.floor(Math.random() * rangeInMs * 2) - rangeInMs // rangeInMs * 2 to have offset in both directions
+		return baseDate.getTime() + randomOffset
+	}
+
+	const baseDate = new Date("2024-07-08T00:00:00Z")
+
+	const messages: ClaudeMessage[] = [
+		{ type: "say", say: "task", text: "type: say, say: task", ts: generateRandomTimestamp(baseDate, 1) },
+		{
+			type: "ask",
+			ask: "request_limit_reached",
+			text: "type: ask, ask: request_limit_reached",
+			ts: generateRandomTimestamp(baseDate, 1),
+		},
+		{ type: "ask", ask: "followup", text: "type: ask, ask: followup", ts: generateRandomTimestamp(baseDate, 1) },
+		{ type: "ask", ask: "command", text: "type: ask, ask: command", ts: generateRandomTimestamp(baseDate, 1) },
+		{ type: "say", say: "error", text: "type: say, say: error", ts: generateRandomTimestamp(baseDate, 1) },
+		{
+			type: "say",
+			say: "api_req_started",
+			text: "type: say, say: api_req_started",
+			ts: generateRandomTimestamp(baseDate, 1),
+		},
+		{
+			type: "say",
+			say: "api_req_finished",
+			text: "type: say, say: api_req_finished",
+			ts: generateRandomTimestamp(baseDate, 1),
+		},
+		{ type: "say", say: "text", text: "type: say, say: text", ts: generateRandomTimestamp(baseDate, 1) },
+		{ type: "say", say: "tool", text: "type: say, say: tool", ts: generateRandomTimestamp(baseDate, 1) },
+		{
+			type: "say",
+			say: "command_output",
+			text: "type: say, say: command_output",
+			ts: generateRandomTimestamp(baseDate, 1),
+		},
+		{
+			type: "ask",
+			ask: "completion_result",
+			text: "type: ask, ask: completion_result",
+			ts: generateRandomTimestamp(baseDate, 1),
+		},
+	]
 	const [inputValue, setInputValue] = useState("")
 	const messagesEndRef = useRef<HTMLDivElement>(null)
 	const textAreaRef = useRef<HTMLTextAreaElement>(null)
@@ -20,14 +68,14 @@ const ChatView = ({ messages}: ChatViewProps) => {
 
 	const scrollToBottom = () => {
 		// https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move
-		messagesEndRef.current?.scrollIntoView({ behavior: "smooth", block: 'nearest', inline: 'start' })
+		messagesEndRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" })
 	}
 
 	useEffect(() => {
 		scrollToBottom()
 		// if last message is an ask, show user ask UI
 
-		// if user finished a task, then start a new task with a new conversation history since in this moment that the extension is waiting for user response, the user could close the extension and the conversation history would be lost. 
+		// if user finished a task, then start a new task with a new conversation history since in this moment that the extension is waiting for user response, the user could close the extension and the conversation history would be lost.
 		// basically as long as a task is active, the conversation history will be persisted
 
 		const lastMessage = messages.at(-1)
@@ -42,14 +90,12 @@ const ChatView = ({ messages}: ChatViewProps) => {
 		}
 	}, [messages])
 
-
 	const handleSendMessage = () => {
 		const text = inputValue.trim()
 		if (text) {
 			setInputValue("")
 			if (messages.length === 0) {
-				
-			vscode.postMessage({ type: "newTask", text })
+				vscode.postMessage({ type: "newTask", text })
 			} else if (claudeAsk) {
 				switch (claudeAsk) {
 					case "followup":
@@ -81,28 +127,23 @@ const ChatView = ({ messages}: ChatViewProps) => {
 		if (textAreaRef.current && !textAreaHeight) {
 			setTextAreaHeight(textAreaRef.current.offsetHeight)
 		}
-	// eslint-disable-next-line react-hooks/exhaustive-deps
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [])
 
 	return (
-		<div style={{ display: "flex", flexDirection: "column", height: "100vh", overflow: "hidden" }}>
+		<div
+			style={{
+				display: "flex",
+				flexDirection: "column",
+				height: "100vh",
+				overflow: "hidden",
+				backgroundColor: "gray",
+			}}>
 			<div style={{ flexGrow: 1, overflowY: "scroll", scrollbarWidth: "none" }}>
-				{messages.map((message, index) => (
-					<div
-						key={index}
-						style={{
-							marginBottom: "10px",
-							padding: "8px",
-							borderRadius: "4px",
-							backgroundColor:
-							message.type === "ask"
-									? "var(--vscode-editor-background)"
-									: "var(--vscode-sideBar-background)",
-						}}>
-						<span style={{ whiteSpace: "pre-line", overflowWrap: "break-word" }}>{message.text}</span>
-					</div>
+				{messages.map((message) => (
+					<ChatRow message={message} />
 				))}
-				<div style={{ float:"left", clear: "both" }} ref={messagesEndRef} />
+				<div style={{ float: "left", clear: "both" }} ref={messagesEndRef} />
 			</div>
 			<div style={{ position: "relative", paddingTop: "16px", paddingBottom: "16px" }}>
 				<DynamicTextArea