feat: use code block to display bash commands

This commit is contained in:
Henry Li
2026-01-19 21:59:23 +08:00
parent 58b5c2fcd5
commit 5d6162d006
2 changed files with 9 additions and 3 deletions

View File

@@ -109,12 +109,12 @@ export const CodeBlock = ({
> >
<div className="relative size-full"> <div className="relative size-full">
<div <div
className="[&>pre]:bg-background! [&>pre]:text-foreground! size-full overflow-auto dark:hidden [&_code]:font-mono [&_code]:text-sm [&>pre]:m-0 [&>pre]:p-4 [&>pre]:text-sm [&>pre]:whitespace-pre-wrap" className="[&>pre]:bg-background! [&>pre]:text-foreground! size-full overflow-auto dark:hidden [&_code]:font-mono [&_code]:text-sm [&>pre]:m-0 [&>pre]:text-sm [&>pre]:whitespace-pre-wrap"
// biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed." // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
dangerouslySetInnerHTML={{ __html: html }} dangerouslySetInnerHTML={{ __html: html }}
/> />
<div <div
className="[&>pre]:bg-background! [&>pre]:text-foreground! hidden size-full overflow-auto dark:block [&_code]:font-mono [&_code]:text-sm [&>pre]:m-0 [&>pre]:p-4 [&>pre]:text-sm [&>pre]:whitespace-pre-wrap" className="[&>pre]:bg-background! [&>pre]:text-foreground! hidden size-full overflow-auto dark:block [&_code]:font-mono [&_code]:text-sm [&>pre]:m-0 [&>pre]:text-sm [&>pre]:whitespace-pre-wrap"
// biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed." // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
dangerouslySetInnerHTML={{ __html: darkHtml }} dangerouslySetInnerHTML={{ __html: darkHtml }}
/> />

View File

@@ -33,6 +33,7 @@ import { cn } from "@/lib/utils";
import { useArtifacts } from "../artifacts"; import { useArtifacts } from "../artifacts";
import { FlipDisplay } from "../flip-display"; import { FlipDisplay } from "../flip-display";
import { CodeBlock } from "@/components/ai-elements/code-block";
export function MessageGroup({ export function MessageGroup({
className, className,
@@ -300,7 +301,12 @@ function ToolCall({
icon={SquareTerminalIcon} icon={SquareTerminalIcon}
> >
{command && ( {command && (
<ChainOfThoughtSearchResult>{command}</ChainOfThoughtSearchResult> <CodeBlock
className="mx-0 border-none px-0"
showLineNumbers={false}
language="bash"
code={command}
/>
)} )}
</ChainOfThoughtStep> </ChainOfThoughtStep>
); );