From fff27cc51070fe6091b44a243b9af77b39a6f829 Mon Sep 17 00:00:00 2001 From: Eric Wheeler Date: Thu, 15 May 2025 22:58:34 -0700 Subject: [PATCH 1/2] fix: Missing or inconsistent syntax highlighting across UI components - Change file listings to use 'shellsession' for terminal-like highlighting - Use 'markdown' for code definitions and instructions - Add file extension-based language detection for new files - Ensure consistent 'diff' highlighting for all diff content - Use 'xml' language for error messages - Make language property required in CodeAccordian - Set default fallback to 'txt' instead of undefined Fixes: #3655 Signed-off-by: Eric Wheeler --- webview-ui/src/components/chat/ChatRow.tsx | 13 +++++++++---- webview-ui/src/components/common/CodeAccordian.tsx | 4 ++-- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx index 8912a5d80e0..b8cc0eb214a 100644 --- a/webview-ui/src/components/chat/ChatRow.tsx +++ b/webview-ui/src/components/chat/ChatRow.tsx @@ -13,6 +13,7 @@ import { useExtensionState } from "@src/context/ExtensionStateContext" import { findMatchingResourceOrTemplate } from "@src/utils/mcp" import { vscode } from "@src/utils/vscode" import { removeLeadingNonAlphanumeric } from "@src/utils/removeLeadingNonAlphanumeric" +import { getLanguageFromPath } from "@src/utils/getLanguageFromPath" import { Button } from "@src/components/ui" import { ToolUseBlock, ToolUseBlockHeader } from "../common/ToolUseBlock" @@ -291,7 +292,7 @@ export const ChatRowContent = ({ @@ -461,6 +465,7 @@ export const ChatRowContent = ({ @@ -490,7 +495,7 @@ export const ChatRowContent = ({ @@ -710,7 +715,7 @@ export const ChatRowContent = ({ backgroundColor: "var(--vscode-editor-background)", borderTop: "none", }}> - + )} diff --git a/webview-ui/src/components/common/CodeAccordian.tsx b/webview-ui/src/components/common/CodeAccordian.tsx index 4b92fe416e9..c3e44e77130 100644 --- a/webview-ui/src/components/common/CodeAccordian.tsx +++ b/webview-ui/src/components/common/CodeAccordian.tsx @@ -11,7 +11,7 @@ import CodeBlock from "./CodeBlock" interface CodeAccordianProps { path?: string code?: string - language?: string | undefined + language: string progressStatus?: ToolProgressStatus isLoading?: boolean isExpanded: boolean @@ -29,7 +29,7 @@ const CodeAccordian = ({ isFeedback, onToggleExpand, }: CodeAccordianProps) => { - const inferredLanguage = useMemo(() => language ?? (path ? getLanguageFromPath(path) : undefined), [path, language]) + const inferredLanguage = useMemo(() => language ?? (path ? getLanguageFromPath(path) : "txt"), [path, language]) const source = useMemo(() => code.trim(), [code]) const hasHeader = Boolean(path || isFeedback) From fa86eacbeb4afe3c4e6c7817ae209cf99ab1781a Mon Sep 17 00:00:00 2001 From: Eric Wheeler Date: Thu, 15 May 2025 23:13:55 -0700 Subject: [PATCH 2/2] chore: make language property required in CodeBlock - Updated CodeBlockProps interface to make language property required - Updated mock implementation to match the interface change - Ensured CodeAccordian always provides a fallback language value Signed-off-by: Eric Wheeler --- .../src/components/common/CodeBlock.tsx | 93 +++++++++---------- .../components/common/__mocks__/CodeBlock.tsx | 2 +- 2 files changed, 43 insertions(+), 52 deletions(-) diff --git a/webview-ui/src/components/common/CodeBlock.tsx b/webview-ui/src/components/common/CodeBlock.tsx index 151a133c25d..da3eb6429c1 100644 --- a/webview-ui/src/components/common/CodeBlock.tsx +++ b/webview-ui/src/components/common/CodeBlock.tsx @@ -30,7 +30,7 @@ minWidth: "max-content", interface CodeBlockProps { source?: string rawSource?: string // Add rawSource prop for copying raw text - language?: string + language: string preStyle?: React.CSSProperties initialWordWrap?: boolean collapsedHeight?: number @@ -637,57 +637,48 @@ const CodeBlock = memo( ref={copyButtonWrapperRef} onMouseOver={() => updateCodeBlockButtonPosition()} style={{ gap: 0 }}> - {language && ( - { - e.currentTarget.focus() - }} - onChange={(e) => { - const newLang = normalizeLanguage(e.target.value) - userChangedLanguageRef.current = true - setCurrentLanguage(newLang) - if (onLanguageChange) { - onLanguageChange(newLang) - } - }}> - { - // Display original language at top of list for quick selection - language && ( - - ) + { + e.currentTarget.focus() + }} + onChange={(e) => { + const newLang = normalizeLanguage(e.target.value) + userChangedLanguageRef.current = true + setCurrentLanguage(newLang) + if (onLanguageChange) { + onLanguageChange(newLang) } - { - // Display all available languages in alphabetical order - Object.keys(bundledLanguages) - .sort() - .map((lang) => { - const normalizedLang = normalizeLanguage(lang) - return ( - - ) - }) - } - - )} + }}> + + { + // Display all available languages in alphabetical order + Object.keys(bundledLanguages) + .sort() + .map((lang) => { + const normalizedLang = normalizeLanguage(lang) + return ( + + ) + }) + } + {showCollapseButton && ( { diff --git a/webview-ui/src/components/common/__mocks__/CodeBlock.tsx b/webview-ui/src/components/common/__mocks__/CodeBlock.tsx index b4d73633673..abf9f303b8b 100644 --- a/webview-ui/src/components/common/__mocks__/CodeBlock.tsx +++ b/webview-ui/src/components/common/__mocks__/CodeBlock.tsx @@ -2,7 +2,7 @@ import * as React from "react" interface CodeBlockProps { children?: React.ReactNode - language?: string + language: string } const CodeBlock: React.FC = () =>
Mocked Code Block