Skip to content

feat: syntax highlighting terminal output with Shiki #3021

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cte merged 3 commits into from
Apr 29, 2025
Merged

feat: syntax highlighting terminal output with Shiki #3021

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b4fd9ee
feat: syntax highlighting terminal output with Shiki
Apr 29, 2025
b342ee4
ui: present same compressed command output that the model will receive
Apr 29, 2025
7ec9381
test: update CommandExecution tests to use CodeBlock mock
Apr 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 36 additions & 35 deletions webview-ui/src/components/chat/CommandExecution.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,56 @@
import { HTMLAttributes, forwardRef, useMemo, useState } from "react"
import { Virtuoso } from "react-virtuoso"
import { ChevronDown } from "lucide-react"
import { forwardRef, useState } from "react"
import { useTranslation } from "react-i18next"

import { useExtensionState } from "@src/context/ExtensionStateContext"
import { cn } from "@src/lib/utils"
import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"

interface CommandExecutionProps {
command: string
output: string
}

export const CommandExecution = forwardRef<HTMLDivElement, CommandExecutionProps>(({ command, output }, ref) => {
const { t } = useTranslation()
const { terminalShellIntegrationDisabled = false } = useExtensionState()

// If we aren't opening the VSCode terminal for this command then we default
// to expanding the command execution output.
const [isExpanded, setIsExpanded] = useState(terminalShellIntegrationDisabled)

const lines = useMemo(() => output.split("\n"), [output])
const onToggleExpand = () => {
setIsExpanded(!isExpanded)
}

return (
<div ref={ref} className="w-full p-2 rounded-xs bg-vscode-editor-background">
<>
<div
className={cn("flex flex-row justify-between cursor-pointer active:opacity-75", {
"opacity-50": isExpanded,
})}
onClick={() => setIsExpanded(!isExpanded)}>
<Line>{command}</Line>
<ChevronDown className={cn("size-4 transition-transform duration-300", { "rotate-180": isExpanded })} />
</div>
<div className={cn("h-[200px]", { hidden: !isExpanded })}>
<Virtuoso
className="h-full mt-2"
totalCount={lines.length}
itemContent={(i) => <Line>{lines[i]}</Line>}
followOutput="auto"
/>
ref={ref}
style={{
borderRadius: 3,
border: "1px solid var(--vscode-editorGroup-border)",
overflow: "hidden",
backgroundColor: CODE_BLOCK_BG_COLOR,
}}>
<CodeBlock source={command} language="shell" />
{output.length > 0 && (
<div style={{ width: "100%" }}>
<div
Copy link
Contributor

@ellipsis-dev ellipsis-dev bot Apr 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider using a semantic <button> element instead of a <div> with onClick for better accessibility and keyboard interactions.

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot Apr 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use ARIA attributes on interactive elements (e.g., aria-expanded) to improve accessibility.

onClick={onToggleExpand}
style={{
display: "flex",
alignItems: "center",
gap: "4px",
width: "100%",
justifyContent: "flex-start",
cursor: "pointer",
padding: `2px 8px ${isExpanded ? 0 : 8}px 8px`,
}}>
<span className={`codicon codicon-chevron-${isExpanded ? "down" : "right"}`}></span>
<span style={{ fontSize: "0.8em" }}>{t("chat:commandOutput")}</span>
</div>
{isExpanded && <CodeBlock source={output} language="log" />}
</div>
)}
</div>
</div>
</>
)
})

type LineProps = HTMLAttributes<HTMLDivElement>

const Line = ({ className, ...props }: LineProps) => {
return (
<div
className={cn("font-mono text-vscode-editor-foreground whitespace-pre-wrap break-words", className)}
{...props}
/>
)
}

CommandExecution.displayName = "CommandExecution"
Loading