From ede6a404054789ffdfb9870f824bd23c4969df3a Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Sat, 7 Dec 2024 20:14:03 -0800
Subject: [PATCH] Visual tweaks

---
 webview-ui/src/components/chat/ChatRow.tsx       | 14 +++++++++++---
 webview-ui/src/components/mcp/McpResourceRow.tsx |  2 +-
 webview-ui/src/components/mcp/McpToolRow.tsx     |  5 ++---
 webview-ui/src/components/mcp/McpView.tsx        |  2 +-
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx
index ec5b877..b10210f 100644
--- a/webview-ui/src/components/chat/ChatRow.tsx
+++ b/webview-ui/src/components/chat/ChatRow.tsx
@@ -665,7 +665,12 @@ export const ChatRowContent = ({
 									}}>
 									Response
 								</div>
-								<CodeBlock source={`${"```"}json\n${message.text}\n${"```"}`} />
+								<CodeAccordian
+									code={message.text}
+									language="json"
+									isExpanded={true}
+									onToggleExpand={onToggleExpand}
+								/>
 							</div>
 						</>
 					)
@@ -825,8 +830,11 @@ export const ChatRowContent = ({
 													}}>
 													Arguments
 												</div>
-												<CodeBlock
-													source={`${"```"}json\n${useMcpServer.arguments}\n${"```"}`}
+												<CodeAccordian
+													code={useMcpServer.arguments}
+													language="json"
+													isExpanded={true}
+													onToggleExpand={onToggleExpand}
 												/>
 											</div>
 										)}
diff --git a/webview-ui/src/components/mcp/McpResourceRow.tsx b/webview-ui/src/components/mcp/McpResourceRow.tsx
index 8ecccdc..815b329 100644
--- a/webview-ui/src/components/mcp/McpResourceRow.tsx
+++ b/webview-ui/src/components/mcp/McpResourceRow.tsx
@@ -12,7 +12,7 @@ const McpResourceRow = ({ item }: McpResourceRowProps) => {
 		<div
 			key={uri}
 			style={{
-				padding: "8px 0",
+				padding: "3px 0 8px 0",
 			}}>
 			<div
 				style={{
diff --git a/webview-ui/src/components/mcp/McpToolRow.tsx b/webview-ui/src/components/mcp/McpToolRow.tsx
index 703c86b..4bab069 100644
--- a/webview-ui/src/components/mcp/McpToolRow.tsx
+++ b/webview-ui/src/components/mcp/McpToolRow.tsx
@@ -1,5 +1,4 @@
 import { McpTool } from "../../../../src/shared/mcp"
-import { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
 
 type McpToolRowProps = {
 	tool: McpTool
@@ -10,7 +9,7 @@ const McpToolRow = ({ tool }: McpToolRowProps) => {
 		<div
 			key={tool.name}
 			style={{
-				padding: "8px 0",
+				padding: "3px 0 8px 0",
 			}}>
 			<div style={{ display: "flex" }}>
 				<span className="codicon codicon-symbol-method" style={{ marginRight: "6px" }}></span>
@@ -32,7 +31,7 @@ const McpToolRow = ({ tool }: McpToolRowProps) => {
 					style={{
 						marginTop: "8px",
 						fontSize: "12px",
-						background: CODE_BLOCK_BG_COLOR,
+						border: "1px solid color-mix(in srgb, var(--vscode-descriptionForeground) 30%, transparent)",
 						borderRadius: "3px",
 						padding: "8px",
 					}}>
diff --git a/webview-ui/src/components/mcp/McpView.tsx b/webview-ui/src/components/mcp/McpView.tsx
index 391628d..8be4c5c 100644
--- a/webview-ui/src/components/mcp/McpView.tsx
+++ b/webview-ui/src/components/mcp/McpView.tsx
@@ -217,7 +217,7 @@ const ServerRow = ({ server }: { server: McpServer }) => {
 							<VSCodePanelView id="tools-view">
 								{server.tools && server.tools.length > 0 ? (
 									<div
-										style={{ display: "flex", flexDirection: "column", gap: "3px", width: "100%" }}>
+										style={{ display: "flex", flexDirection: "column", gap: "6px", width: "100%" }}>
 										{server.tools.map((tool) => (
 											<McpToolRow key={tool.name} tool={tool} />
 										))}